분포 바

부분-전체 분포를 한 줄 가로 누적 바 + 범례로 보여주는 도넛의 컴팩트 대안: 좁은 카드에 적합하다. 세그먼트 사이는 2px 서페이스 갭, 양 끝은 둥글게 마감되고, 값·라벨 텍스트는 텍스트 토큰만 쓴다(정체는 옆 스와치가 말한다).

상태

결제6266%미결제2324%환불910%

범례 있음

범례 없음 (legend=false)

결제6266%미결제2324%환불910%

두껍게 (height)

활용 방법

결제 상태 분포

legend=false 로 바만 남기면 카드 헤더 아래 한 줄 인디케이터로 쓸 수 있다. formatValue 로 값 포맷을 바꾼다.

Preview

정상820건71%지연240건21%실패90건8%

tsx

<DistBar
  segments={[
    { label: "정상", value: 820 },
    { label: "지연", value: 240 },
    { label: "실패", value: 90 },
  ]}
  formatValue={(v) => `${v.toLocaleString("ko-KR")}건`}
/>

속성

이름	타입	기본값	설명
segments	DistSegment[]	-	세그먼트 배열: { label, value, tone? }
height	number	10	바 두께(px)
legend	boolean	true	하단 범례(라벨·값·%) 표시
formatValue	(v: number) => string	ko-KR 콤마	범례·툴팁 값 포맷