Display

Stat & StatusDot

A number with its label and its direction of travel, and the smallest honest way to show a state.

Stat StatusDot

import { Stat, StatusDot } from '@anomalia/ui';

Notes

Tabular figures are not optional here. A dashboard is a column of numbers, and proportional digits do not line up down a column.
The delta names its own direction *and* whether that direction is welcome: direction="down" good is churn falling, direction="down" alone is revenue falling. One prop would have conflated them.
The arrow carries the meaning and the colour only reinforces it, so a delta still reads in greyscale and under forced colours.
StatusDot requires a label. A bare coloured dot fails SC 1.4.1 and says nothing at all to a screen reader; labelHidden moves the word out of the layout, never out of the accessibility tree.
pulse is for states genuinely in progress. A dot pulsing next to a finished job is a spinner nobody turned off.

Examples

Tiles

A row of figures. The delta names its direction and whether that direction is welcome — churn falling is good news, revenue falling is not, and one prop could not have said both.

Reach

184.2k +12% up

vs last week

Churn

1.8% −0.4pt down

vs last month

Revenue

€8,240 −6% down

vs last month

Queue

Nothing waiting

All systems normal Rendering 3 videos 2 posts need copy Instagram token expired

API

Stat

Prop	Type	Default	Description
`label / value`	`string / string \| number`	—	The field name and the figure. Pre-formatted — the component does not know your locale.
`unit`	`string`	—	Qualifier beside the value, at a smaller size.
`delta`	`string \| null`	—	Change since the comparison period.
`direction`	`'up' \| 'down' \| 'flat'`	`'flat'`	The arrow.
`good`	`boolean`	`true`	Is that direction welcome? Drives the colour, not the arrow.
`chart`	`Snippet`	—	A Sparkline under the figure, at the same width.

StatusDot

Prop	Type	Default	Description
`label`	`string`	—	Required. The state in words.
`labelHidden`	`boolean`	`false`	Keeps the name, drops the layout.
`tone`	`Tone`	`'neutral'`	Dot colour.
`pulse`	`boolean`	`false`	Halo for ongoing states.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.