FNA Design System

차트

차트 카드의 규격: 제목 · 이탈 배지 · 차트/표 토글 · 범례 · 툴팁 · 빈 상태 · 로딩. 형태별 규칙과 팔레트는 Foundations · Data Visualization 에 있고, 여기서는 컴포넌트로서의 크롬을 정합니다.

-25-20-15-1009:0010:0011:0012:00냉동창고 A

정의

.fna-chart는 SVG 차트와 범례·툴팁·빈 상태를 감싸는 컨테이너입니다. 계열 색은 .fna-series-N / .fna-series-ok / .fna-approval-* 클래스가 --fna-s 변수로 전달하고, 선·면·막대·마커는 그 변수를 씁니다. 차트는 항상 카드 안에 들어가며 카드 머리에 차트/표 토글이 있습니다.

언제 쓰고 언제 쓰지 않나

  • 값의 변화·비교·분포를 보여줄 때. 값 하나는 스탯 타일, 두 값 비교는 가로 막대(파이 금지).
  • 표로 충분히 읽히면 차트를 만들지 않는다. 차트를 만들면 표 보기를 반드시 같이 둔다.
  • 인쇄 양식에는 추세선·막대만(툴팁·크로스헤어 없음), 흑백에서도 읽히도록 직접 라벨.

해부도 — 차트 카드

냉동창고 온도 이탈 1

-25-20-15-10-50506:0007:0008:0009:0010:0011:0012:00냉동창고 A냉동창고 B
  1. 제목무엇의 무엇(대상 + 지표). 기간은 필터 줄에
  2. 이탈 배지기간 내 이탈 건수. 0이면 표시하지 않는다
  3. 차트 / 표 토글세그먼트. 같은 데이터를 .fna-table 로
  4. 기준 밴드·이탈 띠band(주의 14%) · deviation(경보 14%) · 이탈 마커
  5. 직접 라벨 / 범례≤3 계열은 선 끝 라벨, 4~6 은 하단 범례

변형

툴팁 — 값이 주인공, 계열명 보조, 한 툴팁에 모든 계열
09-29 10:20
-14.2℃냉동창고 A
-20.6℃냉동창고 B
빈 상태 · 로딩(이전 렌더 40% 유지)
이 기간에 수신된 데이터가 없습니다마지막 수신 09-28 23:58
-25-20-15-1009:0010:0011:0012:00냉동창고 A
스파크라인 · 히트맵 (표·타일 안)
스파크라인 96×28 · 회색 선 · 마지막 점 primary
히트맵 · 셀 ≥12px · 간격 2px
000204060810121416182022냉동 A냉동 B냉장 1냉장 2전처리
-20.6℃12.4℃

상태

상태표현
기본즉시 렌더, 등장 애니메이션 없음
호버 / 포커스 (점·막대)brightness 1.12 + 크로스헤어 + 툴팁. 키보드 화살표로 시각 이동
로딩.is-loading: SVG·범례 40% + "갱신 중…" 중앙. 레이아웃 이동 없음
빈 상태.fna-chart__empty 점선 상자 + 문장 + 마지막 수신 시각
오류빈 상태 형태 + "불러오지 못했습니다" + 다시 시도 버튼
비강조 계열.fna-series-muted 회색 — 하나만 강조할 때 나머지

치수

항목폰태블릿데스크톱
높이 --fna-chart-h170220260
눈금 글자101111
X 눈금 수3~456
범례아래 2줄까지아래 1줄아래 또는 오른쪽
카드당 차트12열2~3열
선 / 마커 / 막대2px / r4 (+링 2) / ≤24px
툴팁패딩 6/10 · 라운드 8 · popover 그림자 · 포인트 위 10px

Do · Don't

-25-20-15-1009:0010:0011:0012:00냉동창고 A
Do 이탈은 띠 + 마커 + 배지
Don't 이탈 구간 선 색을 빨강으로 바꿈계열 색이 상태 색으로 바뀌어 어느 센서인지 잃는다

접근성

  • SVG: role="img" aria-label="냉동창고 A·B 온도 추세, 6시간, 이탈 1건". 데이터는 표 보기로 접근.
  • 툴팁은 마우스 없이도: 차트에 tabindex="0", 좌우 화살표로 시각 이동, 툴팁 내용은 aria-live="polite" 영역에 복제.
  • 글자 색은 텍스트 토큰(tick 5.6:1 이상). 직접 라벨을 계열 색으로 칠할 때는 3:1 이상 계열(1·2·6·7·8)만.
  • 동작 줄이기: 로딩 페이드 외 애니메이션 없음.

문구

부분예
제목냉동창고 온도 · 일별 CCP 점검 건수 · 라인별 금속검출 판정 · 이번 달 결재 진행
빈 상태이 기간에 수신된 데이터가 없습니다 · 마지막 수신 09-28 23:58
로딩갱신 중…
오류차트를 불러오지 못했습니다. 다시 시도
툴팁 시각09-29 10:20 (날짜는 기간이 하루를 넘을 때만)

코드

<div class="fna-card">
  <div class="fna-card__head"><h3 class="fna-card__title">냉동창고 온도 <span class="fna-badge fna-badge--alarm">이탈 1</span></h3>
    <span class="fna-spacer"></span><div class="fna-seg" role="group"><button class="is-active" aria-pressed="true">차트</button><button>표</button></div></div>
  <div class="fna-card__body">
    <div class="fna-chart" tabindex="0">
      <svg viewBox="0 0 640 260" role="img" aria-label="…">…</svg>
      <div class="fna-chart__legend"><span class="fna-series-1"><i></i>냉동창고 A</span></div>
      <div class="fna-chart__tooltip" hidden><div class="t">09-29 10:20</div><div class="r fna-series-1"><i></i><b>-14.2℃</b><span>냉동창고 A</span></div></div>
    </div>
  </div>
</div>
<div class="fna-chart"><div class="fna-chart__empty">이 기간에 수신된 데이터가 없습니다</div></div>
<svg class="fna-sparkline" viewBox="0 0 96 28"><path class="line" d="…"/><circle class="marker" r="3" …/></svg>

안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css .fna-chart* · .fna-sparkline · .fna-heatmapComponents · FNA 디자인 시스템 v1.0