Koala UITracker
ProAn uptime bar: one thin block per day, coloured by the status scale from operational to major outage. Every block names its status on hover, on focus and to screen readers, never by colour alone.
Installation#
Usage#
Tracker ships in the Chart folder. Pass one TrackerBlock per period, oldest first, each with a status and the label of the day it covers. The blocks share the width of the box, so 30 days and 90 days fill the same track. Put a TrackerLegend inside it to key the statuses the data actually uses.
The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.
Have a license? Unlock it here
Anatomy#
import { Tracker, TrackerLegend } from "@/components/ui/chart"
<Tracker data={days} label="API status, last 30 days">
<TrackerLegend />
</Tracker>Single service#
One service over 30 days. The legend sits inside the tracker, so it lists only the statuses this window contains, in severity order. Hover or focus a block for its status, its day and the incident behind it.
Statuses#
Six statuses, coloured by the reserved status scale rather than the series palette, so an outage reads the same in every chart on the screen: operational (good), degraded (warning), partial (serious), outage (critical), maintenance (info, for planned work) and empty for a period with no readings, like the days before a service launched. The hero above keys all six under three stacked trackers with one standalone TrackerLegend.
Sizes and labels#
size sets the block height: sm (24px) for a stack of services, md (32px, the default) and lg (40px) for a single hero bar. statusLabels renames any status in your own words (here “Down” and “Partially down”), and the blocks, tooltips and legend all follow.
Accessibility#
The track is a list named by label and a single tab stop: the arrow keys move between blocks, and Home and End jump to the oldest and the newest. Focus opens the same tooltip as hover. Every block carries its reading as its name (“Oct 3: Degraded”), and the tooltip and legend pair every colour with an icon and a label, so colour is never the only channel. Under forced colours the statuses switch to distinct shapes instead: shorter bars as severity rises, a hatch for an outage, an outline for maintenance and a low stub for no data. A focused block lifts with a brand outline; it never scales.
The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.
Have a license? Unlock it here
API reference#
Tracker
The root: the track of blocks and a slot for its legend, sharing the statuses in use and their labels with TrackerLegend through Context. Forwards all native <div> props; every part accepts className, merged last.
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | TrackerBlock[] | - | One entry per period, oldest first: { status, label?, tooltip?, key? }. label ("Oct 3") leads the block's name and tooltip; tooltip adds content under it, like an incident title. |
| size | "sm" | "md" | "lg" | "md" | The block height: 24px, 32px or 40px. |
| label | string | - | Accessible name of the track, for example "API status, last 90 days". Strongly recommended. |
| statusLabels | Partial<Record<TrackerStatus, string>> | - | Rename any status ("Down" for "Major outage"); feeds the blocks, the tooltips and the legend. |
| tooltip | boolean | true | Show a tooltip with the status icon, its label and the block's period on hover and focus. |
| children | ReactNode | - | Rendered under the track; the place for a TrackerLegend. |
| Data attribute | Description |
|---|---|
| data-status | On each tracker-block: its status. |
TrackerLegend
The key: a swatch, an icon and a label per status, in severity order. Inside a Tracker it keys the statuses its data uses; it also stands alone under several stacked trackers. Forwards all native <ul> props.
| Prop | Type | Default | Description |
|---|---|---|---|
| statuses | "operational" | "degraded" | "partial" | "outage" | "maintenance" | "empty"[] | - | Statuses to key. Defaults to the ones the parent Tracker's data uses; outside a Tracker, pass them here. |
| statusLabels | Partial<Record<TrackerStatus, string>> | - | Rename statuses in the legend only; inside a Tracker it inherits the root's labels. |
| Data attribute | Description |
|---|---|
| data-status | On each tracker-legend-item: its status. |