데이터 시각화

KPI · Sparkline · Gauge

대시보드 최상단의 핵심 지표 카드입니다. 값 → 증감 → 추세 순서로 읽히게 배치하고, 스파크라인은 축 없이 방향만 보여줍니다.

KpiCard

결제금액
48.2백만원
+12.4%전주 대비
결제건수
12,840건
+8.1%전주 대비
신규 고객
1,208명
0.0%전주 대비
환불률
1.8%
−0.6%전주 대비
요소스타일
라벨caption1 · Medium · --fg-muted (+ 16px 아이콘)
값title2 · Bold · tabular · 자간 −3%
단위body2 · Semibold (값보다 한 단계 작게)
증감caption1 · 화살표 아이콘 + 부호, 좋음 = positive
스파크라인높이 44px · 2px 선 · 20% 영역 · 마지막 점 강조

Sparkline

온기카페 성수점
4,812,300원
브루잉랩 판교
3,204,000원
모닝베이커리
2,118,500원

Gauge

목표 달성률0%

신규 가맹점 13 / 25곳

목표 달성률0%

월 매출 목표

목표 달성률0%

계약 갱신율

달성률색
70% 미만--warning
70 – 99%--brand
100% 이상--positive

사용 규칙

이렇게 하세요

  • KPI 카드는 한 줄에 3–4개
  • 증감 비교 기준을 항상 명시 (전주 대비)
  • 낮을수록 좋은 지표는 invertDelta

이렇게 하지 마세요

  • KPI 6개 이상 나열
  • 스파크라인에 축 · 라벨 추가
  • 게이지를 정확한 값 비교에 사용

Props

PropTypeDefault설명
KpiCard.label · value · unit*string—라벨 · 포맷된 값 · 단위
KpiCard.delta · deltaLabelnumber · string—증감률(%) · 비교 기준
KpiCard.invertDeltaboolean—감소가 좋은 지표
KpiCard.trendnumber[]—스파크라인 값
Gauge.value · targetnumber—현재 · 목표 (기본 100)