차트 데이터 상태

차트는 데이터를 받아 시각화하므로 데이터 상태와 다음 행동을 함께 처리해야 합니다. WDS는 ChartDataState로 로딩·오류·빈 상태를 공통 처리하고, 실제 업무 화면에서는 부분 데이터·오래된 데이터·권한 없음까지 같은 표면 규칙으로 확장합니다.

상태 표면#

적용 현황#

기준서

완료

포털 적용

이 문서의 상태별 차트 조합 데모에 1차 적용

재사용 구현

@wds/ui-web ChartDataState가 로딩·오류·빈 상태를 공통 처리

배포 패키지

LineChart·BarChart 등 차트 계열의 isLoading·errorMessage·renderEmpty API에 포함

다음 조치

Dashboard·Admin Console·ChartExport 화면에 부분·오래된·권한 상태 반복 적용 검토

기본 상태 우선순위#

우선순위: isLoading → errorMessage → 권한 없음 커스텀 empty → isEmpty(빈 데이터) → 정상.

확장 상태 규칙#

부분 데이터

유효한 구간은 차트로 유지하고, 누락 범위·비교 제한·필터 확인 행동을 차트 옆에 둡니다.

오래된 데이터

마지막 성공 데이터를 보여 주되 기준 시각과 새로고침 행동을 명확히 표시합니다.

권한 없음

빈 데이터와 구분합니다. renderEmpty로 권한 요청·관리자 문의·감사 로그 진입을 제공합니다.

대량 데이터

차트는 요약을 우선 표시하고, 원본 표는 페이지 전체 가로 스크롤이 아니라 표면 내부에서만 처리합니다.

모바일 규칙#

순서

상태 선택 → 차트 표면 → 상태 판단 → 사용자 조치 순서로 쌓습니다.

표면

좁은 화면에서는 데스크탑 pane 테두리를 제거하고, 필요한 구분선만 남깁니다.

선택 메뉴

한 줄에 들어가면 SegmentedButton, 넘어가면 ChipGroup 같은 가로 슬라이딩 칩을 써서 버튼 격자 줄바꿈을 만들지 않습니다.

차트

차트 영역 높이는 유지하되 첫 화면을 넘기지 않도록 요약과 액션을 차트 아래로 보냅니다.

표

모바일에서 원본 표를 노출해야 하면 Table responsive="cards" 또는 columns를 우선 검토합니다.

사용 방법#

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

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

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

지원 차트#

빈 상태 커스텀 슬롯#

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 자체는 정적 안내 표면입니다. 데이터 상태가 동적으로 바뀌는 화면에서는 호출부가 status/live region을 한 번만 부여합니다.
• reduced-motion: Skeleton 애니메이션이 자동 정지(prefers-reduced-motion: reduce).
• 부분·오래됨: 정상 차트와 구분되는 텍스트 상태를 함께 제공해 색만으로 판단하지 않게 합니다.