Data Visualization

형태 고르기 (색보다 먼저)

금지: 이중 Y축 · 8색 초과 · 무지개 순차형 · 발산 중간에 색상 · 모든 점에 숫자 · 툴팁으로만 읽을 수 있는 값 · 스켈레톤 깜빡임.

팔레트

범주 8계열 — 순서 고정

인접 쌍 CVD ΔE 라이트 9.1 / 다크 8.4 (기준 ≥ 8), 정상시력 19.6 / 19.3 (기준 ≥ 15) — 통과. 색은 개체를 따라간다: 필터로 계열이 빠져도 남은 계열 색은 그대로. 산점·히트맵 범례처럼 어떤 두 색이든 맞닿는 형태는 3계열까지.

순차 · 발산

상태 · 결재

크롬

차트별 규칙

온도 추세선

• 계열: 센서 ≤3 이면 직접 라벨(선 끝), 4~6 이면 범례, 그 이상은 소형 다중.
• Y축 깨끗한 정수(℃), 눈금 4~7개. X축 시각(HH:mm) 5~6개(폰 3~4개).
• 이탈 점은 status-alarm 마커(지름 8, 배경 링 2px). 이탈 건수는 제목 옆 배지.
• 상호작용: 세로 크로스헤어가 가장 가까운 시각에 스냅, 툴팁 하나에 모든 계열 값(값 굵게, 계열명 보조). 키보드 포커스 시 같은 내용.

일별 막대 · 스파크라인

CCP 합격/불합격

결재 진행

히트맵

마크 상수

표 보기 쌍둥이

모든 차트는 같은 데이터를 .fna-table 로 보여주는 "표" 토글을 카드 머리에 둡니다. 툴팁은 보조일 뿐이며, 라이트에서 배경 대비 3:1 미만인 청록·노랑·분홍 계열은 직접 라벨 또는 표 보기가 필수입니다.

Do · Don't

접근성

• SVG 에 role="img" + aria-label(무엇을 보여주는 차트인지 한 문장). 표 보기가 스크린리더용 대체다.
• 글자는 항상 텍스트 토큰. 계열 색으로 글자를 칠하지 않는다(직접 라벨 예외: 3:1 이상 계열만).
• 색만으로 구분하지 않는다: 상태 차트는 아이콘·라벨, 스택은 값 라벨, 히트맵은 셀 값.
• 툴팁은 키보드 포커스로도 열린다. 폰에서는 탭으로 표시, 차트 밖 탭으로 닫힘.

코드

<div class="fna-chart">
  <svg viewBox="0 0 640 260" role="img" aria-label="냉동창고 A·B 온도 추세 (6시간)">
    <rect class="band" …/>                 <!-- 기준 밴드 -->
    <rect class="deviation" …/>            <!-- 이탈 구간 -->
    <g class="grid"><line …/></g>
    <g class="axis"><path d="M40,12V232H624"/></g>
    <text class="tick" …>-15</text>
    <path class="line fna-series-1" d="…"/>
    <circle class="marker fna-series-alarm" r="4" …/>
  </svg>
  <div class="fna-chart__legend"><span class="fna-series-1"><i></i>냉동창고 A</span></div>
</div>
/* RN */ import {CHART, DARK_CHART, CHART_MARK} from './theme/tokens'; CHART.series[0] …

안정마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 docs/dataviz.md · tokens.json chart.* · scripts/validate_palette.mjsFoundations · FNA 디자인 시스템 v1.0