Span Timeline Chart React component
See where the time goes in one request: every step as a bar on a shared time axis, nested under the step that started it, with a click to focus one branch.
About the Span Timeline Chart component
Span Timeline Chart shows one request as the steps it took. Each step is a bar on a shared time axis, nested under the step that started it, so slow parts and steps that wait on each other stand out at a glance.
Point at a step to see how long it took, its share of the whole run and how much of that was its own work rather than waiting on children. Click it to focus that branch and dim everything else.
When to use it
Use it for request traces, build pipelines, page loads and any job made of nested steps.
For one number over time, a line chart reads better. This is for the shape of a single run.
Installation
Add the Span Timeline Chart component to your project with the shadcn CLI. It lands in components/span-timeline-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/span-timeline-chartOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<SpanTimelineChart /> accepts 8 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Request timeline" |
| subtitle | string | "Where the time goes in one request, span by span." |
| runs | { label: string; spans: TimelineSpan[] }[] | RUNS |
| colors Colour per service. Services not listed get the neutral colour. | Record<string, string> | COLORS |
| rowHeight Height of each row, in px. | number | 30 |
| formatTime | (ms: number) => string | FORMAT |
| onSpanSelect | (span: TimelineSpan | null) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Request timeline"
- subtitlestringDefault: "Where the time goes in one request, span by span."
- runs{ label: string; spans: TimelineSpan[] }[]Default: RUNS
- colors
Colour per service. Services not listed get the neutral colour.
Record<string, string>Default: COLORS - rowHeight
Height of each row, in px.
numberDefault: 30 - formatTime(ms: number) => stringDefault: FORMAT
- onSpanSelect(span: TimelineSpan | null) => void
npm dependencies
Installed for you by the shadcn CLI.
Span Timeline Chart FAQ
- What does 'on its own' mean?
- The time a step spent outside its children. Overlapping children are merged first, so parallel work isn't counted twice.
- Can I compare several runs?
- Yes. Each entry in runs gets a pill, and the bars ease to their new places when you switch.
- How deep can nesting go?
- Any depth. The indent stops growing after three levels so names keep their room.
- Does the height change between runs?
- No. It is set by the run with the most spans.
