Meter Scale
The maths behind `Meter` and `RankedBarList`. No React, no DOM — the same split `charts/scale.ts` makes, and for the same reason: a bar that draws a beautiful wrong length is worse than one that fails to render, and the length is the part that can be…
Preview
Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.
Install
Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.
npx shadcn@latest add https://ds.interlace.tools/r/meter-scale.jsonnpx shadcn@latest add @interlace/meter-scaleHistory
This component is at v1.0.0, first shipped in @interlace/ui 1.1.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.
@interlace/ui 1.1.01 entry
- Addedminor
Absence becomes a first-class value.
DataStategrows from four states to nine, and two new primitives consume the union as a contract rather than each re-deriving it from a boolean ladder. The states areloading · error · not-applicable · not-counted · empty · partial · truncated · first-measurement · idle, and that list is also the precedence order — lowest wins. Error beats empty, because a failed fetch is not "no results". Truncated is not empty at all: it qualifies a body that still renders. States co-occur, soresolveDataStatereturns the winner AND every loser asqualifiers, the wrapper publishes them asdata-qualifiers, and the announcement says all of them — a list that is both partially covered and truncated is wrong twice and now says so twice. Each state is drawn distinctly and, more importantly, **announced**. A diagonal hatch means no run happened; a dashed outline means not yet real; the accent is spent onfirst-measurementalone, because it is the only absence a reader can act on. Every one of those carries a sentence viaannounceDataState— "Not counted. No measurement was taken; this is not a zero." A hatch that exists only in pixels keeps the distinction for sighted readers and destroys it for everyone else, and axe scores that green.StatStripis the dense measurement grid that appeared in all six of the audited artifacts, hand-rolled four times: mono micro-label,tabular-numsvalue, optional note, optional delta, on a<dl>so every number keeps its label. It renders the three-state null honestly — a metric withprior: nullshows "first measurement" and the caller's delta node is **not rendered at all**, so there is no path by which a missing prior reaches the DOM as+0%.Meterabsorbs three hand-rolled bars (an odds bar, a score meter, a reviewer bar). Magnitude is carried by length AND by the printed number, never by hue, and the number is not optional.value: nullhatches by default rather than drawing an empty bar, because an empty bar and a measured zero are the same picture.variant="dead"recedes without vanishing, for a dormant row that still holds its rank.RankedBarListis the repeated-row composition and supports a labelled log scale, so a 10k row and a 10M row can share an axis. Pure logic ships alongside asdata-state-modelandmeter-scale— the union, the precedence, the announcements, the scale maths — with no React import, exported for callers wiring their own state.Skeletongainsmeterandstat-stripvariants, both composites, so the loading state reserves the real silhouette on the real breakpoints. Not included, deliberately: the domain vocabularies these were extracted from (authority,visibility,dormant,unwritten,ungated) stay in their artifacts as labels a caller passes in. They are subject-matter, not design system — the DS ships the two axes underneath them (does it recede or does it act, and did a run happen) rather than nine nouns it cannot define.
Import
10 named exports — pull the parts you need.
import { FILL_WIDTH_CLASSES, LOG_FLOOR, MeterScaleKind, clamp01, compactMagnitude, describeMeter, fillWidthClass, meterDomainMax, meterFraction, rankByValue } from '@/components/ui/meter-scale';Accessibility
Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.
What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.
- Focus + keyboard behaviour
- Native element semantics — no interaction layer to get wrong.
- Focus ring (WCAG 2.2 SC 2.4.13)
- Not focusable — no focus indicator required.
- Reduced motion
- No animation to gate.
- ARIA in the source
- None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.
Examples
1 more state from the same story file.
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
- none
- Registry dependencies
Source
The full implementation — components/ui/meter-scale.ts once installed.
export type MeterScaleKind = 'linear' | 'log';
/** Clamp to the unit interval. Non-finite input is treated as the floor. */
export const clamp01 = (value: number): number =>
Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
/**
* The log domain floor.
*
* `log(0)` is `-Infinity`, so a log axis needs a positive lower bound. 1 is the
* honest choice for counts: it is the smallest thing that can be observed at
* all, and it maps to fraction 0 — "the least this axis can show", not "none".
*/
export const LOG_FLOOR = 1;
/**
* Value → fill fraction in `[0, 1]`, or `null` when the value is unmeasured.
*
* Rules, each of which exists because the naive version is wrong:
*
…208 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.