StatusBoard

Density-aware system/service health grid — each cell pairs a StatusPip with the system's headline metric, delta, and sparkline.

Import

StatusBoard is a registry composite — you own the source after installing:

npx ploxum add status-board

import { StatusBoard, type StatusBoardSystem } from "@/components/status-board";

Depends on @roger-emerson/ploxum-primitives (Card, StatusPip, TrendDelta, useDensity) and @roger-emerson/ploxum-utils (cn).

Usage

const systems: StatusBoardSystem[] = [
  {
    id: "ingress",
    name: "Ingress scanning",
    status: "ok",
    value: 1204,
    unit: "scans/min",
    delta: 4.2,
    trend: [980, 1010, 1090, 1150, 1204],
  },
  {
    id: "broadcast",
    name: "Broadcast uplink",
    status: "live",
    value: "4/4",
    unit: "feeds",
  },
  {
    id: "mesh",
    name: "Camera mesh",
    status: "warning",
    value: 47,
    unit: "of 48 online",
    delta: -2.1,
  },
  {
    id: "radio",
    name: "Radio comms",
    status: "ok",
    value: "CH 1–6",
  },
  {
    id: "ticketing",
    name: "Ticketing API",
    status: "critical",
    value: 503,
    unit: "ms p99",
    delta: 38.7,
    trend: [120, 140, 180, 320, 503],
  },
  {
    id: "parking",
    name: "Parking sensors",
    status: "offline",
  },
];
 
<StatusBoard columns={3} onSelect={(id) => openSystemDetail(id)} systems={systems} />;

Cell padding, gaps, and metric size respond to the active density from PloxumProvider (compact for NOC walls, comfortable for laptops). When onSelect is provided every cell renders as a button with hover + focus-ring affordances.

Props

`StatusBoard`

Prop	Type	Default	Description
`systems`	`StatusBoardSystem[]`	—	One cell per system.
`columns`	`number`	`3`	Grid column count.
`onSelect`	`(id: string) => void`	—	When provided, every cell renders as a button.
`className`	`string`	—	Extra classes on the grid root.
`ref`	`Ref<HTMLDivElement>`	—	Forwarded to the grid root.

`StatusBoardSystem`

Field	Type	Description
`id`	`string`	Stable key.
`name`	`string`	System label, truncates on overflow.
`status`	`StatusPipStatus`	`"live" \| "ok" \| "warning" \| "critical" \| "offline" \| "unknown"`. Mapped to labels: Live / Operational / Degraded / Critical / Offline / Unknown.
`value`	`number \| string?`	Headline metric — monospace, tabular numerals.
`unit`	`string?`	Tertiary-toned unit suffix.
`delta`	`number?`	Signed delta vs. previous period, rendered as a small `TrendDelta`.
`trend`	`number[]?`	Sparkline points (needs ≥2). Omit to skip the sparkline.

Design rules

Status is always StatusPip shape + color — the board never conveys health by hue alone.
Headline metrics use monospace tabular numerals so values align as they tick.
The sparkline is aria-hidden decoration drawn in --ploxum-color-chart-series1; the pip + value carry the accessible signal.
No animation on state change — a cell flipping to critical repaints instantly (P1 rule).

Storybook

Composites/StatusBoard ↗