Uptime Matrix
betaA day-by-day status history drawn in dithered tiles — operational, degraded, outage — with a keyboard-navigable readout and legend.
- Data
- 1 file
- 1 npm package
- Accessibility notes
- Draws on a canvas
pnpm dlx @dowel-ui/cli add uptime-matrixnpm packages installed: class-variance-authority.
import { UPTIME } from "@/components/ui/uptime-matrix";Default
System Uptime Matrix
Gallery
With Visible Table
Static
<UptimeMatrix>
| Prop | Type | Default |
|---|---|---|
days (required) | readonly UptimeDay[] | — |
label (required)What the matrix shows. Names the image, the grid and the data table. | string | — |
activeIndexThe day whose readout shows (controlled); null hides it. | number | null | — |
animate | boolean | true |
cellCell pitch in CSS pixels. Default 2: tiles are thin. | number | 2 |
columnsTiles per row. Default: every day in one row. | number | — |
dayLabelData table headers. | string | "Day" |
defaultActiveIndex | number | null | null |
descriptionReplaces the generated summary in the image's accessible name. | string | — |
endLabel | string | — |
formatUptime | (percent: number) => string | (percent) => `${String(Math.round(percent * 100) / 100)}%` |
noteLabel | string | "Note" |
onActiveIndexChange | (index: number | null) => void | — |
showAxisShow the first and last day under the tiles. | boolean | true |
showLegendShow the state legend with counts. | boolean | true |
showTableShow the data table. It is always present for assistive technology. | boolean | false |
size | "sm" | "md" | "lg" | "md" |
startLabelReplace the axis labels, e.g. "90 days ago" and "Today". | string | — |
statusLabel | string | "Status" |
statusLabelsNames for each state (translate here). | Partial<Record<UptimeStatus, string>> | — |
uptimeLabel | string | "Uptime" |
Plus every attribute of <div> except children.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes