Stat widget
No reference page demonstrates this component — it was inferred from the screens that use one, so there is no variant matrix behind it.
Usage
A single headline number with its movement and a comparison period — the tile that fills the top row of a dashboard. No reference page demonstrates this; it was inferred from the dashboards that use one, so there is no variant matrix behind it.import { Statwidget } from '@summonware/ui';Best practices
DoAlways give a delta a period in `footer`. "12.4%" alone is meaningless without "vs last month".
DoSet `deltaTone` by whether the movement is *good*, not by its sign — falling churn is `up`-toned good news.
Don'tPut more than about four of these in a row. Every number competing for attention means none of them get it.
Don'tShow a delta when there is no prior period to compare against.
Anatomy
Label *What is being measured.
Value *The headline figure, pre-formatted.
DeltaChange, tinted by `deltaTone`.
FooterThe comparison period.
IconOptional glyph, decorative.
Examples
Common configurations, variations and states.Dashboard row
Revenue
$48,290
▲ 12.4%vs last month
Open tickets
37
▲ 3.1%vs last week
Churn
1.8%
▼ 0.4%vs last quarter
Active seats
1,204
no change this week
Four tiles as they appear across the top of a dashboard. Note that falling open tickets is toned as good news.