Stat

Data display · src/components/Stat/Stat.tsx

One number that matters, with what it is and which way it moved.

upIsGood={false} exists because up is not always good. Cost, latency and churn going up is bad news, and a component that always paints a rise green tells that story backwards.

The direction is carried by an arrow as well as the colour, so it survives for a reader who cannot separate the green from the red.

Import

import { Stat } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
label	React.ReactNode
value	React.ReactNode
delta	number	The change, as a number. Its sign decides the direction.
deltaSuffix	string	Unit after the delta. % by default.
upIsGood	boolean	false when down is the good direction - cost, latency, churn.
period	React.ReactNode	What the delta is measured against: "vs last month".
trend	number[]	A short series drawn beside the figure. Needs at least two points.
wash	boolean | 'brand'
className	string