FunnelChart

visual

Show stage entries, overall conversion, and drop-off between stages in a funnel.

컴포넌트 의존 관계

깊이

100%

Interactive steps

Funnel entry
64% from previous step
Drop-off from Visitors to Signups: 1,800, 36%
56.3% from previous step
Drop-off from Signups to Activated: 1,400, 43.8%
52.8% from previous step
Drop-off from Activated to Subscribed: 850, 47.2%
65.3% from previous step
Drop-off from Subscribed to Retained: 330, 34.7%

Selected: None

Details: None

Default list

Step 1
Visitors5,000 / 100%
Drop-off from Visitors to Signups: 1,800, 36%
Step 2
Signups3,200 / 64%
Drop-off from Signups to Activated: 1,400, 43.8%
Step 3
Activated1,800 / 36%
Drop-off from Activated to Subscribed: 850, 47.2%
Step 4
Subscribed950 / 19%
Drop-off from Subscribed to Retained: 330, 34.7%
Step 5
Retained620 / 12.4%

Bars

5,000100%
Step 1Visitors
3,20064%
Step 2Signups
Drop-off from Visitors to Signups: 1,800, 36%
1,80036%
Step 3Activated
Drop-off from Signups to Activated: 1,400, 43.8%
95019%
Step 4Subscribed
Drop-off from Activated to Subscribed: 850, 47.2%
62012.4%
Step 5Retained
Drop-off from Subscribed to Retained: 330, 34.7%

Horizontal

Step 1
Visitors5,000 / 100%
Step 2
Signups3,200 / 64%
Drop-off from Visitors to Signups: 1,800, 36%
Step 3
Activated1,800 / 36%
Drop-off from Signups to Activated: 1,400, 43.8%
Step 4
Subscribed950 / 19%
Drop-off from Activated to Subscribed: 850, 47.2%
Step 5
Retained620 / 12.4%
Drop-off from Subscribed to Retained: 330, 34.7%

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

FunnelChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

FunnelChart Props

Prop	타입	기본값	설명
`data`*	`FunnelDataPoint[]`	—	퍼널 데이터 ({ name, value, color? })
`variant`	`"list" \| "bars" \| "horizontal" \| "steps"`	`"list"`	steps는 반응형 세로/가로 막대와 명시적 전환·이탈 레이블. list는 단계별 진행 행, bars는 단계별 세로 막대(이탈은 막대 위 빗금), horizontal은 가로 막대(이탈은 채워지지 않은 나머지)
`renderStepAction`	`(index: number) => React.ReactNode`	—	steps 제목 옆 독립 액션. 단계 선택 버튼 외부에 렌더링. 제목 앞 2rem 공간에 맞는 작은 아이콘 버튼을 사용
`selectedStep`	`number \| null`	—	steps 표현의 선택 단계 인덱스
`onStepSelect`	`(index: number) => void`	—	steps 단계 선택 콜백. 포인터와 키보드 지원
`height`	`number`	`300`	차트 높이
`showLabels`	`boolean`	`true`	라벨 표시
`showValues`	`boolean`	`true`	값 표시
`valueFormatter`	`(value: number) => string`	—	값 포맷터. 기본은 로캘 숫자(formatNumber)
`locale`	`string`	—	기본 숫자·퍼센트 포맷 로캘
`loading`	`boolean`	`false`	새 데이터를 기다리는 동안 현재 그림을 흐리게 유지
`emptyState`	`React.ReactNode`	—	데이터가 없을 때 대신 그릴 내용. 기본은 labels.empty
`labels`	`FunnelChartLabels`	—	차트가 직접 쓰는 단계·이탈·진행률 보조 기술 문자열과 빈 상태. 지역화 지점
`className`	`string`	—	루트 요소에 붙는 CSS 클래스
`aria-label`	`string`	—	스크린 리더용 레이블

Design contract

Usage

동일 기간·코호트의 단계별 인원을 순서대로 전달하세요. 단계가 진행될수록 인원이 감소하는 전환 분석에 사용합니다.
기본 list는 간결한 목록, steps는 단계 선택과 반응형 전환·이탈 설명, bars와 horizontal은 막대 비교에 사용하세요.
selectedStep과 onStepSelect로 선택을 제어하세요. renderStepAction은 선택 버튼 바깥의 독립 액션이므로 별도의 상세 열기 등에 연결할 수 있습니다.
valueFormatter는 값 표기, labels는 보조 문구를 지역화합니다. 데이터가 없는 경우 호출 화면에서 수집 대기나 검색 결과 없음을 설명하세요.
Avoid: 서로 독립적인 항목의 크기 비교를 퍼널 전환율로 해석하지 마세요.
Avoid: renderStepAction 안의 버튼이 단계 선택도 수행한다고 가정하지 마세요. 필요한 동작을 명시적으로 연결하세요.

Import

tsx

import { FunnelChart } from "@reopt-ai/opt-ui";