래디얼 바

서로 다른 비율 지표 2~4개를 동심 링 진행도로 겹쳐 보여주는 게이지의 다지표 버전. 바깥 링부터 순서대로 그려지고, 트랙은 surface-muted, 끝은 둥근 캡이다. 정체는 우측 범례 스와치가 말하고 값 텍스트는 텍스트 토큰을 쓴다.

상태

목표 달성82%

진행64%

대기38%

3개 링

수납76%

미납24%

2개 링

활용 방법

KPI 달성률

items 는 바깥 링부터 순서대로(2~4개 권장). 각 percent 는 0~100. 서로 다른 척도의 비율을 한 컴포넌트에 겹쳐 비교한다.

Preview

매출 목표82%

신규 고객64%

재구매율47%

tsx

<RadialBars
  size={168}
  items={[
    { label: "매출 목표", percent: 82 },
    { label: "신규 고객", percent: 64 },
    { label: "재구매율", percent: 47 },
  ]}
/>

속성

이름	타입	기본값	설명
items	RadialItem[]	-	바깥 링부터 순서대로: { label, percent(0~100), tone? }. 2~4개 권장
size	number	132	지름(px)