사용법
파이프라인 단계별 건수와 이탈을 가로 막대로 보여줘요. 이전 단계 대비 감소율을 툴팁으로 확인할 수 있어요.
아이디어 128건, 비중 100%. 초안 96건, 비중 75%. 검토 72건, 비중 56%. 발행 54건, 비중 42%. 배포 41건, 비중 32%
스타일 커스터마이징
FunnelBars는 className과 style prop으로 루트 스타일을 덮어쓸 수 있어요.
<FunnelBars className="rounded-full px-4" style={{ opacity: 0.9 }} />인터페이스
FunnelBarsProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| steps* | FunnelStep[] | — | 퍼널 단계 (label, count) |
| barColor | string | var(--gtd-primary) | 막대 색 |
| countLabel | string | 건수 | 툴팁 건수 라벨 |
| shareLabel | string | 비중 | 툴팁 비중 라벨 |
| dropLabel | string | 이전 대비 | 퍼널 이탈 라벨 |
| emptyMessage | string | — | 빈 상태 메시지 |
| formatValue | (value: number) => string | — | 값 포맷터 |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
FunnelBars 컴포넌트 Props 표
가져오기
import { FunnelBars } from "@/components/ui/FunnelBars";