reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-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/EventSparkline

EventSparkline

Chart

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

display
Related docs
bun add @reopt-ai/opt-charts
100%

Page Views

2,847↑+12.5%

Bounce Rate

34%↓-8.2%

컴포넌트 의존 관계

깊이
▼ USES (1)EventSparklinesparkline
View test results

테스트 커버리지

2026년 7월 9일2/2 통과
2성공
0실패
2전체
  • 라벨과 값을 렌더링한다
  • 변화량과 트렌드를 표시한다

Related components

Sparkline

인라인 미니 차트. 작은 공간에서 추세를 빠르게 시각화합니다. StatCard, 테이블 셀 등에서 사용합니다.

Cartesian

PathFlowChart

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

TimeSeriesChart

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

TimeSeriesTooltip

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

SmallMultiples

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

TraceWaterfall

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

PreviousTrendChartNextReportWidget

Basic Sparklines

Line
Area
Gradient

Trend Colors

Revenue$45,231
+12.5%
Expenses$12,345
-8.2%
Visitors1,234
+0.5%

Bar & Win-Loss

Bar
Win-Loss

Sizes

Various Sizes

Small
Medium
Large

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%

p50–p95 지연 시간 밴드와 결측 구간

선은 p50과 p95, 음영은 두 값 사이의 범위입니다. 03:00의 p95는 미수집 값이므로 밴드가 끊어집니다. 밴드는 별도 툴팁 항목이 아닙니다.

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