Stat cards
A row of KPIs, each with its change against the period before and a sparkline, with a period switch that rolls the numbers and redraws the lines.
Stat cards are a row of numbers that matter. Each card has an icon, a label, the value in large
type, its change against the period before (green from zero, red below), and a sparkline in its own
colour. A period switch along the top rolls the numbers to their new values and redraws every
line.
Usage
<!-- include core.css + stat-cards.css -->
<div class="dm-scx">
<div class="dm-scx-grid">
<div class="dm-scx-c dm-panel">
<span class="dm-scx-k">Agent runs</span>
<div class="dm-scx-v">
<b class="dm-num">1,842</b>
<span class="dm-scx-d dm-tag dm-ok dm-up">+12.4%</span>
</div>
<div class="dm-scx-sp">
<svg viewBox="0 0 100 30" preserveAspectRatio="none">
<path d="M0 24 L100 4" />
</svg>
</div>
</div>
<!-- one .dm-scx-c per stat -->
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
stats | StatCardsStat[] | The cards. Each has an icon, label, one values entry per period, and optional prefix, suffix and color. |
periods | StatCardsPeriod[] | The switch options. Each has a label and an optional compare line shown on hover. |
period | number | The period on show, by index. Leave it out to let the switch pick it. |
defaultPeriod | number | The period shown first when uncontrolled. Defaults to 0. |
onPeriodChange | (period: number) => void | Called with the new index when the switch changes. |
sparkRange | [number, number] | The bottom and top of every sparkline. Defaults to each card's own range. |
Each StatCardsStat carries values: { value, change, points }[] — one entry per period, in the
same order as periods — where value is the number, change is the percent against the period
before, and points is the sparkline oldest first.
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). In
Blueprint the cards are squared off with hairline borders; in Soft they are rounded panels with a
softer shadow. The sparkline colours fall back to the chart palette (the accent, then violet, green
and orange) unless a card sets its own color.