사용법
기간별 발행 수를 막대로 비교해요. 마지막 항목을 강조하고 포인터·키보드로 툴팁을 볼 수 있어요.
스택 보조 값
showSecondary로 완료·실패처럼 두 값을 한 막대에 쌓을 수 있어요. primaryLabel, secondaryLabel로 툴팁 라벨을 바꿔요.
관리자 대시보드 조합
Card와 차트를 묶으면 블로그 관리자처럼 KPI·추이·퍼널 패널을 구성할 수 있어요.
발행 추이
최근 7일
7일
비용 구성
목적별 (오늘)
초안 생성 $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%)
파이프라인 퍼널
아이디어 128건, 비중 100%. 초안 96건, 비중 75%. 검토 72건, 비중 56%. 발행 54건, 비중 42%. 배포 41건, 비중 32%
스타일 커스터마이징
BarChart는 className과 style prop으로 루트 스타일을 덮어쓸 수 있어요.
<BarChart className="rounded-full px-4" style={{ opacity: 0.9 }} />인터페이스
BarChartProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| points* | BarPoint[] | — | 막대 데이터 (label, value, secondary?) |
| height | number | 176 | 차트 높이(px) |
| highlightLast | boolean | true | 마지막 막대 강조 |
| showSecondary | boolean | false | 스택 보조 값 표시 |
| primaryColor | string | var(--gtd-primary) | 주요 막대 색 |
| secondaryColor | string | — | 비강조 막대 색 |
| primaryLabel | string | 값 | 툴팁 주요 라벨 |
| secondaryLabel | string | 보조 | 툴팁 보조 라벨 |
| emptyMessage | string | — | 빈 상태 메시지 |
| formatValue | (value: number) => string | — | 값 포맷터 |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
BarChart 컴포넌트 Props 표
가져오기
import { BarChart } from "@/components/ui/BarChart";