TimeSeriesChart
visualExplore time series with fixed query ranges, automatic ticks, incomplete buckets, drag zoom, annotations, thresholds, and comparison overlays.
100%
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
테스트 커버리지
2026년 7월 9일생성된 테스트 결과를 찾지 못했습니다.
TimeSeriesChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
TimeSeriesChart Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
bands | TimeSeriesBand[] | — | 두 데이터 키 사이 음영 범위. { lowerKey, upperKey, name, color?, opacity?, axis?, showInLegend? }. opacity 기본 0.15, axis 기본 left, showInLegend 기본 false. 한쪽 값이 null이면 connectNulls=false에서 밴드가 끊어진다. 툴팁에는 별도 항목으로 나오지 않는다 |
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 타임존 |
locale | string | — | 축·툴팁의 시각 표기에 쓰는 로케일. 생략하면 브라우저 기본값 |
variant | "line" | "area" | "bar" | "line" | 시리즈가 지정하지 않았을 때의 기본 마크 |
stacked | boolean | false | 시리즈를 누적할지 여부 |
gradient | boolean | false | area 변형의 그라데이션 채우기 사용 여부 |
height | number | `${number}%` | 300 | 차트 높이 |
className | string | — | 루트 요소에 붙는 CSS 클래스 |
margin | ChartMargin | { top: 8, right: 16, bottom: 4, left: 0 } | 차트 여백 (top/right/bottom/left) |
strokeWidth | number | 2 | 선 두께 (px) |
dot | boolean | false | 각 데이터 점에 마커를 찍을지 여부 |
connectNulls | boolean | false | 값이 없는 구간을 선으로 이을지 여부 |
showGrid | boolean | true | 그리드 표시 여부 |
showLegend | boolean | — | 범례 표시 여부. 미지정 시 시리즈가 2개 이상일 때만 표시 |
showXAxis | boolean | true | X축 표시 여부 |
showYAxis | boolean | true | Y축 표시 여부 |
showTooltip | boolean | true | 툴팁 표시 여부 |
maxTicks | number | 8 | X축에 그릴 눈금의 최대 개수 |
yFormatter | (value: number) => string | — | Y축 눈금 값을 표시 문자열로 바꾸는 함수 |
yDomain | [number | "auto" | "dataMin", number | "auto" | "dataMax"] | — | Y축 범위. "auto"·"dataMin"·"dataMax"를 섞어 쓸 수 있다 |
partialBucket | boolean | number | "auto" | "auto" | 아직 채워지는 중인 마지막 버킷 음영 표시 |
now | number | — | "지금"으로 볼 시각 (ms). partialBucket="auto" 판정과 테스트 고정에 쓰인다 |
selectable | boolean | false | 드래그로 구간 선택 활성화 |
onRangeSelect | (range: { from: number; to: number }) => void | — | 드래그 선택이 끝났을 때 호출 |
onPointClick | (time: number) => void | — | 데이터 점을 클릭했을 때 그 시각(ms)을 받는 콜백 |
annotations | TimeSeriesAnnotation[] | — | 시간축 위 마커/구간 (배포, 장애, 캠페인) |
thresholds | ChartReferenceLine[] | — | Y축 임계선 |
brush | boolean | false | 하단 범위 선택 브러시 표시 여부 |
syncId | string | — | 같은 값을 가진 차트끼리 crosshair 동기화 |
tooltipOptions | Omit<TimeSeriesTooltipContentProps, "active" | "payload" | "label" | "granularity" | "timeZone" | "locale"> | — | TimeSeriesTooltipContent에 넘길 옵션. 차트가 스스로 채우는 값은 제외돼 있다 |
legendOptions | ChartLegendOptions | — | ChartLegendContent에 그대로 넘길 옵션. inactiveKeys에 담긴 dataKey는 범례에서 흐려지고 차트에서도 그려지지 않습니다 |
legendToggle | boolean | true | 범례 칩 클릭으로 시리즈를 켜고 끕니다. legendOptions.inactiveKeys를 주면 호출자가 상태를 소유하고, onClick만 주면 클릭을 전달받으면서 차트가 상태를 유지합니다. 마지막 남은 시리즈는 꺼지지 않습니다. false면 정적 범례 |
accessibleTable | boolean | false | 스크린 리더용 숨김 데이터 표 렌더 |
accessibilityLayer | boolean | true | Recharts 키보드 레이어(포커스 가능한 svg). 패널 자체가 버튼인 SmallMultiples처럼 버튼 안에 포커스 요소를 둘 수 없을 때 끈다 |
labels | TimeSeriesChartLabels | — | 차트가 직접 쓰는 문자열 (빈 상태·미완 구간·요약 표·범례). 지역화 지점 |
emptyState | React.ReactNode | — | 데이터가 없을 때 그릴 노드. 생략하면 labels.empty 문구 |
aria-label | string | — | 스크린 리더용 레이블 |
aria-describedby | string | — | 차트를 설명하는 요소의 id |
Import
tsx
import { TimeSeriesChart } from "@reopt-ai/opt-ui";