TimeSeriesChart
visual시간축 기반 시계열 차트. 조회 구간에 고정된 시간 스케일, 자동 틱/라벨, 미완료 버킷 표시, 드래그 구간 선택(줌), 주석·임계선, 비교 기간 오버레이를 지원합니다.
100%
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
테스트 커버리지
2026년 7월 9일생성된 테스트 결과를 찾지 못했습니다.
TimeSeriesChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
TimeSeriesChart Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
data* | TimeSeriesPoint[] | — | t(epoch/ISO/Date)와 시리즈 값을 담은 데이터 배열 |
series* | TimeSeriesDef[] | — | 시리즈 정의 (dataKey, name, color, type, comparison) |
from | number | string | Date | — | 축 시작 — 조회 구간에 축을 고정 |
to | number | string | Date | — | 축 끝 — 조회 구간에 축을 고정 |
granularity | TimeGranularity | "auto" | "auto" | 버킷 단위 |
timeZone | string | — | 축 라벨과 버킷 경계를 계산할 IANA 타임존 |
variant | "line" | "area" | "bar" | "line" | 시리즈가 지정하지 않았을 때의 기본 마크 |
height | number | `${number}%` | 300 | 차트 높이 |
partialBucket | boolean | number | "auto" | "auto" | 아직 채워지는 중인 마지막 버킷 음영 표시 |
selectable | boolean | false | 드래그로 구간 선택 활성화 |
onRangeSelect | (range: { from: number; to: number }) => void | — | 드래그 선택이 끝났을 때 호출 |
annotations | TimeSeriesAnnotation[] | — | 시간축 위 마커/구간 (배포, 장애, 캠페인) |
thresholds | ChartReferenceLine[] | — | Y축 임계선 |
syncId | string | — | 같은 값을 가진 차트끼리 crosshair 동기화 |
accessibleTable | boolean | false | 스크린 리더용 숨김 데이터 표 렌더 |
Import
tsx
import { TimeSeriesChart } from "@reopt-ai/opt-ui";