A KPI readout: a label, a big figure written with Intl.NumberFormat (number, currency, percent or compact, in any locale) whose digits roll into place like an odometer whenever the value changes, a delta chip that knows whether up is good news, an inline sparkline that draws itself in and ends on a dot in the verdict's color, and an optional caption. The written figure is read out once for screen readers; the rolling columns are decoration. Three tones and three sizes.
The import and the props worth knowing about, in one place.
import { ReadoutStat } from "@/components/beste/component/readout-stat";
<ReadoutStat
label="Monthly revenue"
value={48290}
format="currency" // "number" | "currency" | "percent" | "compact"
currency="USD"
previous={42870} // the chip shows the change from this
trend={[31, 34, 33, 37, 40, 43, 45, 48]}
caption="Compared with August"
/>
// Churn going down is good news
<ReadoutStat
label="Churn"
value={0.021}
format="percent"
delta={-0.18} // a ready-made change, as a fraction
goodDirection="down"
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | What is being measured, above the figure. |
value* | number | — | The figure. Changing it rolls the digits to the new value. |
format | "number" | "currency" | "percent" | "compact" | — | |
currency | string | — | ISO currency code, for `format="currency"`. |
locale | string | — | |
fractionDigits | number | — | Most digits after the point. Each format has its own default. |
previous | number | — | The comparison value. The chip shows the change from it unless `delta` is given. |
delta | number | — | A ready-made change as a fraction (0.12 is +12%). Overrides `previous`. |
goodDirection | "up" | "down" | — | Which way a change is good news. Revenue is `up`, churn is `down`. |
trend | number[] | — | Recent values, oldest first, drawn as an inline sparkline. |
caption | string | — | A short line under the figure, e.g. the period. |
size | "sm" | "default" | "lg" | — | |
tone | "muted" | "outline" | "ghost" | — | |
className | string | — |