WIZ Design System

차트는 데이터를 받아 시각화하므로 세 가지 예외 상태를 반드시 처리해야 합니다. WDS는 ChartDataState 컴포넌트 하나로 이 책임을 담당하고, 차트 13종 모두에 동일 패턴으로 적용합니다.

세 가지 상태#

월별 매출 추이 데이터 표
항목	1월	2월	3월	4월	5월	6월
매출	1.2K	1.9K	1.6K	2.1K	1.9K	2.5K

데이터가 정상 렌더됩니다.

차트 데이터 상태 — 로딩 · 에러 · 빈 상태 토글

상태	prop	렌더 결과
로딩	`isLoading={true}`	`Skeleton variant="rect"` — 차트 영역을 구조적으로 대체, pulse 애니메이션
에러	`errorMessage="..."`	`Alert variant="error"` — `role="alert"`, 스크린리더 즉시 낭독
빈 상태	`series={[]}` 또는 빈 데이터	`EmptyState` + `BloomSpot variant="noData"` 일러스트
정상	(없음)	차트 정상 렌더

우선순위: isLoading → errorMessage → isEmpty(빈 데이터).

사용 방법#

// 로딩 중
<LineChart label="매출 추이" series={[]} isLoading />

// 에러
<LineChart label="매출 추이" series={[]} errorMessage="서버에서 데이터를 가져오지 못했습니다." />

// 빈 상태 — 커스텀 메시지
<LineChart
  label="매출 추이"
  series={[]}
  renderEmpty={() => (
    <EmptyState title="아직 데이터가 없습니다" description="첫 매출이 발생하면 차트가 나타납니다." />
  )}
/>

지원 차트#

차트	`isLoading`	`errorMessage`	`renderEmpty`
LineChart	✓	✓	✓
BarChart	✓	✓	✓
AreaChart	✓	✓	✓
ComboChart	✓	✓	✓
ScatterChart	✓	✓	✓
PieChart	✓	✓	✓
HeatmapChart	✓	✓	✓
FunnelChart	✓	✓	✓
RadarChart	✓	✓	✓
GaugeChart	✓	✓	— (value 필수)
StockChart	✓	✓	✓ (AreaChart 경유)
Sparkline	✓	✓	— (글랜스 이미지)

빈 상태 커스텀 슬롯#

renderEmpty prop이 없으면 기본 EmptyState + BloomSpot(noData) 일러스트가 표시됩니다. 제품 컨텍스트에 맞는 메시지나 액션(데이터 추가 버튼 등)이 필요하면 슬롯을 교체합니다.

renderEmpty={() => (
  <EmptyState
    illustration={<BloomSpot variant="noData" size={80} label="데이터 없음" />}
    title="필터 조건에 맞는 데이터가 없습니다"
    description="기간이나 필터를 변경해 보세요."
    action={<Button variant="outline" size="sm">필터 초기화</Button>}
  />
)}

접근성#

로딩: Skeleton이 차트 영역 크기를 유지해 레이아웃 시프트 없음.
에러: role="alert" — 스크린리더가 상태 변경 즉시 낭독.
빈 상태: EmptyState 루트는 role="status" 처리.
reduced-motion: Skeleton 애니메이션이 자동 정지(prefers-reduced-motion: reduce).