GaugeChart

한눈에#

GaugeChart는 KPI 단일 지표(목표 대비 달성률)를 270° 방사형 아크로 보여줍니다. 값 아크의 색이 임계 구간에 따라 미달(error)·주의(warning)·달성(success)으로 바뀌어 — 색만으로 어느 지표가 위험한지 드러납니다.

어떻게 동작하나#

값 → 분율 → 아크 각도는 순수 코어 computeGauge가 계산합니다(ADR-018, Flutter wiz_charts 포팅 단위).

• 임계 구간색 — thresholds={{ warning, success }}(분율)를 주면 값 아크 색이 의미를 인코딩합니다: < warning = error, < success = warning, ≥ success = success. 색이 장식이 아니라 KPI 건강도입니다.
• 목표 마커 + 잔여 거리 — target을 주면 아크에 노치(헤일로로 분리)로 목표 위치를, 미달 시 값→목표 사이를 옅은 톤 아크로 "얼마나 모자란지" 표시합니다.
• ★호(arc) 렌더는 네이티브 — 각도 math만 공유하고, 호는 SVG(웹 A)·Canvas(Flutter drawArc)가 각각 그립니다(파이와 동일).
• 헤드라인 달성률 — target을 주면 목표 대비(value/target, 100% 초과도 그대로 — "목표 대비 114.5%")를, 없으면 아크 채움 분율(value/max)을 중앙에 톤 색으로. 톤(value/max 임계)과 독립된 상보 신호.
• 중앙에 큰 값 + 라벨 + 달성률, 아크 양 끝에 min/max.

사용#

<GaugeChart
  value={8700}
  max={9500}
  target={7600}
  thresholds={{ warning: 0.5, success: 0.8 }}
  label="유지 고객"
/>;

min(기본 0)·max로 범위를, variant로 arc(270°, 기본)·semicircle(180°)을, size(기본 200)로 크기를 조정합니다. thresholds 없으면 값 아크는 단일 액센트(--wds-chart-1)입니다.

접근성#

아크 각도 비교는 어려우므로(SC 1.4.1), 값·범위·목표·목표 대비 달성률 표가 정본입니다 — sr-only <table>로 노출하고 SVG는 aria-hidden입니다. 값 아크·헤드라인 달성률 모두 톤별 -text 토큰(≥4.5:1)을 써서 비텍스트 3:1을 여유 있게 만족합니다(warning base=amber.500은 2.15:1 미달 — amber는 600 티어가 없어 amber.700이 3:1 충족 최저).

토큰#