PathFlowChart
visualExplore staged user paths with transition ribbons, session starts and exits, grid or proportional Sankey layouts, and linked hover highlighting.
컴포넌트 의존 관계
깊이
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-chart-other)" | 기타(other) 행 색. 중립 토큰 |
dropOffColor | string | "var(--opt-danger)" | 이탈 행·이탈 꼬리 색. 손실이라는 상태라 danger 토큰 |
entryColor | string | CHART_COLORS.secondary | 시작 행 색. 시작은 판정이 아니라 정체성이라 상태 토큰 대신 두 번째 범주 슬롯 |
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 | — | 카운트 포맷터. 기본은 로캘 숫자(formatNumber) |
locale | 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 | — | 단계 헤더, 기타/이탈/시작 행, 툴팁 문구, 빈 상태(empty), 접근성 이름. 지역화 지점 |
emptyState | React.ReactNode | — | 단계가 없을 때 대신 그릴 내용. 기본은 labels.empty를 담은 빈 상태 |
className | string | — | 루트 요소에 붙는 CSS 클래스 |
aria-label | string | — | figure의 접근성 이름 |
Design contract
Usage
- steps는 단계 순서대로 구성하고 각 단계의 rows.key를 고유하게 유지하세요. edges.stepIndex는 출발 단계이며 source와 target은 인접 단계의 row key입니다.
- 카드 선택 ID는 단계 인덱스와 key를 콜론으로 연결합니다. onCardClick의 card.id를 selectedCardIds에 저장하면 직접 문자열을 조립할 필요가 없습니다.
- grid는 경로 비교, sankey는 규모 비교에 사용하세요. otherCount·dropOffCount·entryCount는 집계 데이터의 의미에 맞게 전달하세요.
- loading은 기존 데이터를 유지한 갱신 상태에, emptyState는 결과 없는 상태에 사용하세요. 요청 실패는 호출 화면에서 별도로 안내하세요.
- Avoid: 서로 다른 기간이나 집계 단위의 카드 수와 전환 수를 섞지 마세요.
- Avoid: pinnable의 내부 강조 상태와 외부 선택 링을 같은 상태로 가정하지 마세요. 호출자가 선택을 제어하는 예제에서는 pinnable을 끕니다.
Import
tsx
import { PathFlowChart } from "@reopt-ai/opt-ui";