reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui202opt-charts39opt-datagrid7opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
reopt designreopt design

A design system for the AI era

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

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

© 2026 reopt Inc. All rights reserved.

Explore/opt-charts/PathFlowChart

PathFlowChart

Chart

단계별 사용자 경로 흐름. 각 단계의 상위 항목 카드와 단계 사이 전환 리본, 단계에서 끝난·시작한 세션을 함께 그립니다. 고정 높이 grid와 카운트 비례 sankey 두 변형, 호버 시 연결 경로 강조와 툴팁을 제공합니다.

Related docs
bun add @reopt-ai/opt-charts
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%

컴포넌트 의존 관계

깊이
▲ USED BY (1)path-analysisPathFlowChart

테스트 커버리지

2026년 7월 9일

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

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

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

Blocks that use this component

PathAnalysis

경로 분석 Surface. 설정 사이드바(단계 소스·시작/종료점·단계 수·행 수·제외·반복 병합·URL 그룹핑·최소 세션·세그먼트) + PathFlowChart(grid/sankey) 흐름 탭 + Top Paths/Drop-off/Patterns/Entry-Exit/Dwell 탭 조합.

Analytics

Related components

TimeSeriesChart

시간축 기반 시계열 차트. 조회 구간에 고정된 시간 스케일, 자동 틱/라벨, 미완료 버킷 표시, 드래그 구간 선택(줌), 주석·임계선, 비교 기간 오버레이를 지원합니다.

TimeSeriesTooltip

시계열 전용 툴팁. 전체 타임스탬프와 타임존, 값 내림차순 정렬, 합계, 이전 기간 대비 델타, 미완료 버킷 경고를 표시합니다.

SmallMultiples

브레이크다운 값마다 작은 시계열 패널 하나씩을 격자로 그리는 트렐리스. y축을 공유해 크기를 비교 가능하게 유지하고, 상위 값부터 정렬하며 긴 꼬리는 접는다. 한 패널에 커서를 올리면 모든 패널의 크로스헤어가 함께 움직인다.

VennDiagram

2~3개 집합을 면적 비례 원으로 그리는 순수 SVG 벤 다이어그램. 2집합은 겹침 면적을 정확히 풀고, 3집합은 쌍별 거리로 근사합니다. 배타 영역별 hover/클릭과 숨김 표를 제공합니다.

EventSparkline

이벤트 스파크라인. 라벨, 값, 변화량과 미니 차트를 표시합니다.

Display

ChartContainer

Recharts ResponsiveContainer를 감싸는 반응형 차트 컨테이너. 접근성 속성과 스타일링을 지원합니다.

Heatmap
PreviousSankeyChartNextCalendarHeatmap