reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui205opt-charts40opt-datagrid7opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 소개
  • 문의
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/opt-charts/TraceWaterfall

TraceWaterfall

차트

트레이스의 스팬을 하나의 시간축에 놓는 워터폴. 부모-자식 관계로 들여쓰고 접을 수 있으며, 실패한 스팬은 색이 아니라 표식으로 알린다. 아무 스팬도 덮지 않는 유휴 구간은 접어서 짧은 호출이 점으로 뭉개지지 않게 한다 — 접히는 것은 위치뿐이고 표시되는 소요 시간은 실제 값이다.

관련 문서
bun add @reopt-ai/opt-charts
100%

에이전트 턴 트레이스

유휴 구간 접기

승인을 기다린 2분을 접지 않으면 380ms 도구 호출이 점이 된다

  • ⋯
4.20s
입력 1,850 · 출력 240 · $0.0054
2.90s
380ms
160ms
3.10s
입력 3,120 · 출력 480 · $0.0081
3.00s
APICallError · 529
1.00s

선택: gen-0

TraceWaterfall

Prop타입기본값설명
spans*TraceSpan[]—스팬 목록. startMs/endMs는 절대 epoch ms
foldingTraceWaterfallFolding | false—유휴 구간 접기 기준. false면 실제 축척으로 그린다
collapseDepthnumber—첫 렌더에서 이 깊이보다 깊은 스팬을 접는다
selectedIdstring—선택된 스팬 id
onSelect(id: string) => void—스팬 선택
onHover(id: string | null) => void—행 호버 — 상세 패널 동기화용
kindColorsRecord<string, string>—kind별 색. 지정하지 않으면 팔레트 순서
rowHeightnumber28행 최소 높이
labelWidthstring"minmax(8rem, 14rem)"이름 열 grid track. 좁은 컨테이너에서는 줄여 축을 확보한다
maxRowsnumber500렌더할 행 상한
valueFormatter(durationMs: number) => string—소요 시간 표기
labelsTraceWaterfallLabels—문구 재정의
emptyStateReactNode—스팬이 없을 때 표시할 내용
classNamestring—추가 CSS 클래스
aria-labelstring—축 설명
테스트 결과 자세히 보기

테스트 커버리지

2026년 7월 9일

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

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

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

관련 컴포넌트

PathFlowChart

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

TimeSeriesChart

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

TimeSeriesTooltip

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

SmallMultiples

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

VennDiagram

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

EventSparkline

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

표시
이전SmallMultiples다음VennDiagram

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%

Time axis

Trailing bucket still filling

The last bar covers a day that is only half over. It is shaded rather than presented as a collapse.

Drag to zoom

Drag across the plot to pick a window.

Comparison period

Annotations and thresholds

Gaps in the data

Broken at the gap (default)

Drawn through the gap

Sorted, with a full timestamp

Hover the chart. Series are ranked by value, so the eye does not have to chase the legend order.

Total and time zone

Comparison folded into a delta

Rendered on its own

Static preview

Aug 24, 2026

Still filling

Web430
Mobile320
API180
Total930