Dither Gauge
betaA half-circle gauge drawn in dithered cells, one sweeping ring per metric, with a centre reading and metric switch.
- Data
- 1 file
- 1 npm package
- Accessibility notes
- Draws on a canvas
Loading the example…
pnpm dlx @dowel-ui/cli add dither-gaugenpm packages installed: class-variance-authority.
import { DitherGauge } from "@/components/ui/dither-gauge";Default
Server Cpu Gauge
Gallery
Units
With Visible Table
Static
<DitherGauge>
| Prop | Type | Default |
|---|---|---|
label (required)What the gauge shows. Names the image and the data table. | string | — |
metrics (required) | readonly DitherGaugeMetric[] | — |
activeMetricThe metric the centre reads (controlled). Defaults to the first. | string | — |
animate | boolean | true |
categoryLabelData table headers. | string | "Metric" |
cell | number | 3 |
defaultActiveMetric | string | — |
descriptionReplaces the generated summary in the image's accessible name. | string | — |
formatValueFormats a reading. Defaults to the share of | (value: number, metric: DitherGaugeMetric) => string | percent |
onActiveMetricChange | (key: string) => void | — |
showLegendShow the metric buttons (only drawn with more than one metric). | boolean | true |
showTableShow the data table. It is always present for assistive technology. | boolean | false |
size | "sm" | "md" | "lg" | "md" |
valueLabel | string | "Reading" |
Plus every attribute of <div> except children.
The rings are role="img" with an aria-label listing every metric's reading. The centre reading is a role="meter" with aria-valuemin, aria-valuemax, aria-valuenow and a formatted aria-valuetext. With several metrics, legend buttons (named with label and reading) preview a ring on hover or focus and choose the centre's metric when pressed (aria-pressed). The data is always in a table, visually hidden unless showTable is set.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes