Components · Metrics

Metrics

The dashboard family — how a movement, not a level, reads in the skin. A StatGrid lays out a strip of MetricCards (label · display value · caption), each carrying a TrendDelta: an arrow + signed figure colored green up / red down / muted flat against last period. KpiRow packs the same figures into one rule-divided strip, and ComparisonCard states a value directly against its prior period. All of this sits above the single stat tile — it's the comparison layer, not one number.

StatGrid · MetricCards with TrendDelta (▲ up / ▼ down / → flat)
Active volunteers
947 +6.2%increase
vs last week
New signups · 7d
128 +18.5%increase
vs last week
Weekly active rate
74% −3.1%decrease
vs last week
Awaiting approval
62 0.0%no change
unchanged

Tile 1 is --accent (2px left edge) and pinned :hover — hover the others to see them lift to surface-2. The value takes the Fraunces display face; the TrendDelta arrow + sign is the only colored element, so direction reads before you parse the number. Down is red here because a falling rate is bad — pass invert when down is good.

KpiRow · one strip, rule-divided KPI cells
On roster 1,284 +23increase this week
Teams active 18 across 5 states
Signatures pending 7 of 41 sent
Median response 3.4h −0.6hdecrease faster

One framed .kpi-row of cells split by left --rule hairlines (first cell loses its border + left pad). Each cell = label · display value · a muted foot that can hold a TrendDelta. On Median response a ▼ decrease is shown green — faster is better, the invert case.

ComparisonCard · value vs the prior period
Adoptions this month
38 +9increase
vs 29 last month
Avg. time to foster
5.2 days −1.1 daysdecrease
vs 6.3 days last month

The labelled comparison: a value and its baseline in one card — display figure, TrendDelta, then a faint __prior line spelling out what it's measured against. Left card is a plain increase (green ▲); right card inverts — a shorter time-to-foster is a win, so the ▼ decrease reads green.

MetricCard
{ label, value, delta?, caption?, accent? } — an uppercase label, a display-face tabular-nums value with the delta inline, and a faint caption. accent draws the 2px brand left edge.
TrendDelta
{ value, invert?, neutralAt?, format? } resolves a direction → --num-pos (▲ green) / --num-neg (▼ red) / --num-flat (→ muted). invert flips the color where down is good; an sr-only "increase / decrease" backs the arrow.
StatGrid
repeat(auto-fit, minmax(200px, 1fr)) — the responsive strip that reflows the MetricCards from four-up down to a single column.
KpiRow / KpiCell
One card, many figures: cells divided by left --rule hairlines, each with a label · value · optional foot (which can carry a TrendDelta). The compact snapshot header.
ComparisonCard
{ label, value, delta?, prior? } — states the number against its baseline (prior). The labelled comparison, distinct from a single StatTile that shows only the level.

Source · @phauna/ds MetricCard / StatGrid / TrendDelta / KpiRow · KpiCell / ComparisonCard · MomentumSummaryCard.tsx + analytics/OverviewTab.tsx (StatTile + KPI strips) · design-system/data-viz.