사용법
LLM 비용처럼 구성 비율을 도넛 링과 범례로 보여줘요. 링·범례에 포인터를 올리면 세부 값을 확인할 수 있어요.
초안 생성 $12.4, 60%. 이미지 $4.8, 23%. 교정 $2.1, 10%. 요약 $1.3, 6%
60%
- 초안 생성$12.4(60%)
- 이미지$4.8(23%)
- 교정$2.1(10%)
- 요약$1.3(6%)
스타일 커스터마이징
DonutChart는 className과 style prop으로 루트 스타일을 덮어쓸 수 있어요.
<DonutChart className="rounded-full px-4" style={{ opacity: 0.9 }} />인터페이스
DonutChartProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| slices* | DonutSlice[] | — | 슬라이스 (label, value, color) |
| centerLabel | string | — | 중앙 표시 텍스트 |
| size | number | 128 | 링 크기(px) |
| valuePrefix | string | "" | 값 접두사 ($ 등) |
| emptyMessage | string | — | 빈 상태 메시지 |
| formatValue | (value: number) => string | — | 값 포맷터 |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
DonutChart 컴포넌트 Props 표
가져오기
import { DonutChart } from "@/components/ui/DonutChart";