PathFlowChart
visual단계별 사용자 경로 흐름. 각 단계의 상위 항목 카드와 단계 사이 전환 리본, 단계에서 끝난·시작한 세션을 함께 그립니다. 고정 높이 grid와 카운트 비례 sankey 두 변형, 호버 시 연결 경로 강조와 툴팁을 제공합니다.
컴포넌트 의존 관계
깊이
100%
Journey grid
Hover a card or a ribbon.
Step 12,000 sessions
Step 21,460 sessions
Step 3860 sessions
Step 4560 sessions
/
1,20060%
/pricing
42021%
/blog/launch
26013%
Other
1206%
Ends here
34017%
/pricing
56038.4%
/docs
38026%
/signup
30020.5%
Other
22015.1%
Ends here
41028.1%
/signup
42048.8%
/docs/quickstart
21024.4%
/pricing
14016.3%
Other
9010.5%
Ends here
19022.1%
/dashboard
38067.9%
/signup
12021.4%
Other
6010.7%
Localized, end-anchored
1단계300 sessions
2단계300 sessions
3단계440 sessions
/
300100%
여기서 시작
300100%
/pricing
22073.3%
/docs
8026.7%
여기서 시작
14046.7%
/signup
440100%
테스트 커버리지
2026년 7월 9일생성된 테스트 결과를 찾지 못했습니다.
PathFlowChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
PathFlowChart Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
data* | PathFlowData | null | undefined | — | 단계(steps: index, rows, otherCount?, dropOffCount?, entryCount?)와 인접 단계 간 엣지(edges: stepIndex, source, target, count, avgSeconds?) |
variant | "grid" | "sankey" | "grid" | grid는 고정 높이 카드, sankey는 카운트에 비례한 노드와 이탈 꼬리 |
height | number | 420 | sankey 변형의 캔버스 높이. grid는 행 수로 스스로 정한다 |
layout | PathFlowChartLayout | — | 카드 너비/높이, 컬럼·행 간격, 리본 최대 두께, 노드 너비, 라벨 너비(px) |
fitWidth | boolean | true | 자연 너비가 컨테이너보다 좁으면 컬럼 간격을 늘려 채운다 |
loading | boolean | false | 새 답이 오는 중. 현재 그림을 흐리게 두고 상태 문구를 띄운다 |
nodeColor | string | CHART_COLORS.primary | 이름 있는 항목 카드·리본 색 |
otherColor | string | "var(--opt-text-tertiary)" | 기타(other) 행 색 |
dropOffColor | string | "var(--opt-danger)" | 이탈 행·이탈 꼬리 색 |
entryColor | string | "var(--opt-success)" | 시작 행 색 |
continueColor | string | "var(--opt-info)" | 마지막 단계 너머로 이어지는 행 색 |
highlightMode | PathFlowHighlightMode | "chain" | 호버 시 강조 범위. chain은 그 카드를 지나는 대표 경로, connected는 앞뒤로 연결된 전부, adjacent는 이웃만, none은 없음 |
pinnable | boolean | true | 카드를 클릭하면 강조가 고정된다. 다시 클릭하거나 Escape로 해제 |
selectedCardIds | readonly string[] | — | 선택 링을 그릴 카드 id(`${stepIndex}:${key}`). 시작·종료 앵커 표시용 |
maxLabelChars | number | 30 | 라벨을 가운데 줄임표로 줄이기 전 남기는 글자 수 |
valueFormatter | (value: number) => string | — | 카운트 포맷터 |
durationFormatter | (seconds: number) => string | — | 평균 소요 시간 포맷터 |
renderCardActions | (card: PathFlowCard) => React.ReactNode | — | 카드 안에 그릴 추가 컨트롤(예: 액션 메뉴). 이 영역의 클릭은 카드 클릭으로 세지 않는다 |
onCardClick | (card: PathFlowCard) => void | — | 카드 클릭·Enter/Space 핸들러. 있으면 카드가 button이 된다 |
onCardHover | (card: PathFlowCard | null) => void | — | 카드 호버 진입/이탈 핸들러 |
onRibbonClick | (ribbon: PathFlowRibbon) => void | — | 리본 클릭 핸들러. 있으면 리본이 포커스 가능한 button이 된다 |
onRibbonHover | (ribbon: PathFlowRibbon | null) => void | — | 리본 호버 진입/이탈 핸들러 |
labels | PathFlowChartLabels | — | 단계 헤더, 기타/이탈/시작 행, 툴팁 문구, 접근성 이름. 지역화 지점 |
emptyState | React.ReactNode | — | 단계가 없을 때 대신 그릴 내용 |
className | string | — | 루트 요소에 붙는 CSS 클래스 |
aria-label | string | — | figure의 접근성 이름 |
Import
tsx
import { PathFlowChart } from "@reopt-ai/opt-ui";