reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-charts40
PathFlowChart
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

PathFlowChart

Chart

Explore staged user paths with transition ribbons, session starts and exits, grid or proportional Sankey layouts, and linked hover highlighting.

Related docs
bun add @reopt-ai/opt-charts
Install and import
bash
bun add @reopt-ai/opt-charts
tsx
import { PathFlowChart } from "@reopt-ai/opt-charts";

Live preview

Change the width and theme, then interact with the components.

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%

Usage guidance

Best practices

  • Arrange steps in sequence and keep rows.key unique within each step. edges.stepIndex identifies the source step; source and target are row keys in adjacent steps.
  • A card selection ID joins its step index and key with a colon. Store card.id from onCardClick in selectedCardIds instead of assembling the string yourself.
  • Use grid to compare paths and sankey to compare volume. Supply otherCount, dropOffCount, and entryCount according to the meaning of your aggregated data.
  • Use loading when refreshing existing data and emptyState when there are no results. Handle request errors separately in the host screen.

Usage to avoid

  • Keep card counts and transition counts consistent in their period and aggregation units.
  • The internal pinnable highlight and the externally controlled selection ring are separate states. Disable pinnable in examples where the host controls selection.

Usage examples

Connect adjacent-step data and selection state

PathFlowChart

PropTypeDefaultDescription
dataRequiredPathFlowData | null | undefined—단계(steps: index, rows, otherCount?, dropOffCount?, entryCount?)와 인접 단계 간 엣지(edges: stepIndex, source, target, count, avgSeconds?)
variant"grid" | "sankey""grid"grid는 고정 높이 카드, sankey는 카운트에 비례한 노드와 이탈 꼬리
heightnumber420sankey 변형의 캔버스 높이. grid는 행 수로 스스로 정한다
layoutPathFlowChartLayout—카드 너비/높이, 컬럼·행 간격, 리본 최대 두께, 노드 너비, 라벨 너비(px)
fitWidthbooleantrue자연 너비가 컨테이너보다 좁으면 컬럼 간격을 늘려 채운다
loadingbooleanfalse새 답이 오는 중. 현재 그림을 흐리게 두고 상태 문구를 띄운다
nodeColorstringCHART_COLORS.primary이름 있는 항목 카드·리본 색
otherColorstring"var(--opt-chart-other)"기타(other) 행 색. 중립 토큰
dropOffColorstring"var(--opt-danger)"이탈 행·이탈 꼬리 색. 손실이라는 상태라 danger 토큰
entryColorstringCHART_COLORS.secondary시작 행 색. 시작은 판정이 아니라 정체성이라 상태 토큰 대신 두 번째 범주 슬롯
continueColorstring"var(--opt-info)"마지막 단계 너머로 이어지는 행 색
highlightModePathFlowHighlightMode"chain"호버 시 강조 범위. chain은 그 카드를 지나는 대표 경로, connected는 앞뒤로 연결된 전부, adjacent는 이웃만, none은 없음
pinnablebooleantrue카드를 클릭하면 강조가 고정된다. 다시 클릭하거나 Escape로 해제
selectedCardIdsreadonly string[]—선택 링을 그릴 카드 id(`${stepIndex}:${key}`). 시작·종료 앵커 표시용
maxLabelCharsnumber30라벨을 가운데 줄임표로 줄이기 전 남기는 글자 수
valueFormatter(value: number) => string—카운트 포맷터. 기본은 로캘 숫자(formatNumber)
localestring—기본 카운트 포맷 로캘
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—리본 호버 진입/이탈 핸들러
labelsPathFlowChartLabels—단계 헤더, 기타/이탈/시작 행, 툴팁 문구, 빈 상태(empty), 접근성 이름. 지역화 지점
emptyStateReact.ReactNode—단계가 없을 때 대신 그릴 내용. 기본은 labels.empty를 담은 빈 상태
classNamestring—루트 요소에 붙는 CSS 클래스
aria-labelstring—figure의 접근성 이름

컴포넌트 의존 관계

깊이
▲ USED BY (1)path-analysisPathFlowChart
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Blocks that use this component

opt-ui

PathAnalysis

Blocks

Configure user-path analysis and explore grid or Sankey flows, top paths, drop-off, patterns, entry and exit points, and dwell time.

Related components

opt-charts

TimeSeriesChart

Charts

Explore time series with fixed query ranges, automatic ticks, incomplete buckets, drag zoom, annotations, thresholds, and comparison overlays.

opt-charts

TimeSeriesTooltip

Charts

Read full timestamps and time zones, sorted values, totals, comparison deltas, and incomplete-bucket warnings.

opt-charts

SmallMultiples

Charts

Compare breakdowns in small time-series panels with a shared y-axis, synchronized crosshairs, top-value ordering, and a collapsed long tail.

opt-charts

TraceWaterfall

Charts

Inspect nested trace spans on one timeline with collapsible branches, explicit failure markers, and compressed idle gaps that preserve reported durations.

opt-charts

VennDiagram

Charts

Compare two or three sets with area-scaled SVG circles, interactive exclusive regions, and an accessible table; three-set placement is approximate.

opt-charts

EventSparkline

Charts

Show an event label, value, change, and miniature trend chart together.

PreviousSankeyChartNextCalendarHeatmap