Tracker

A React component in Beamline's Dashboard category.

A row of status blocks for uptime, job runs or daily checks, with tooltips and a legend.

Use it for

Status history over days or runs.

Not for

Continuous values → sparkline or activity-heatmap.

Anatomy

title + summary
blocks
tooltip
range labels
legend

States

ok
degraded
down (taller)
maintenance
no data (hatched)
right-to-left: the history keeps oldest → newest left to right (continuous time, O1 D2); ← / → move physically
narrow: bars keep a 1 px gap below 640 px so 90 days fit 390 px without scrolling
loading (`loading`: the strip, labels and legend as placeholders of their real height; the header shows when title or summary is given, an empty string holds its line)

Keyboard

The row is one tab stop (the newest block first); ←/→ (mirrored in RTL), Home and End move between blocks. Each block is spoken as "date: status, detail"; focus shows the tooltip.

Motion

Other blocks dim on hover (180ms out).

Props

Prop	Type	Default	Description
`data` (required)	`{ status, label, detail? }[]`	—
`title / summary`	`string`	—
`startLabel / endLabel`	`string`	—
`legend`	`boolean`	—
`style / ref`	`CSSProperties / native Ref`	—	native HTMLDivElement
`classNames`	`TrackerClassNames`	—
`loading`	`boolean`	`false`	strip, labels and legend as placeholders while the history loads; title or summary "" holds the header line

Import

import { Tracker } from "@/components/tracker/tracker";

Get it

Tracker is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent