덤벨 차트
항목마다 두 값(전월 · 이번 달, 목표 · 실적)을 점 둘과 잇는 선으로 보여 주는 표현 전용 차트입니다. 어디서 어디로 얼마나 움직였는지를 한 줄에 비교합니다. 위치를 비교하므로 축은 0 을 강제하지 않고 값 범위에 맞춥니다. 오른쪽 증감은 better 에 따라 좋아진 쪽을 success, 나빠진 쪽을 danger 글자색으로 칠합니다.
상태
9월10월
신규 고객
148 +28
재구매
92 +6
방문
176 −34
리뷰
41 +7
추천
12 −6
050100150200250
상반기하반기
견적
2.1일 −1.1일
발주
1.6일 +0.2일
출고
1.9일 −0.9일
1.0일1.5일2.0일2.5일3.0일3.5일
활용 방법
전월 대비 지표
sort="change" 면 증감이 큰 항목부터 보인다. 줄에 마우스를 올리면 두 값과 증감이 나온다.
Preview
9월10월
신규 고객
148 +28
리뷰
41 +7
재구매
92 +6
추천
12 −6
방문
176 −34
050100150200250
tsx
<DumbbellChartfromLabel="9월"toLabel="10월"sort="change"items={[{ label: "신규 고객", from: 120, to: 148 },{ label: "방문", from: 210, to: 176 },// ...]}/>
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | DumbbellItem[] | - | { label, from, to } |
| fromLabel · toLabel | string | "이전" · "이후" | 범례 이름 |
| better | "higher" | "lower" | "higher" | 증감 색의 기준(좋아진 쪽이 success) |
| sort | "none" | "to" | "change" | "none" | 입력 순서 · 이후 값 큰 순 · 증감 큰 순 |
| tone | ChartTone | "primary" | 이후 점 색(이전 점은 muted) |
| labelW | number | 64 | 항목 이름 칸 폭(px) |
| formatValue | (v: number) => string | ko-KR 콤마 | 값 · 증감 · 눈금 포맷 |