Stat grid
A dense KPI grid with values, deltas against a selectable comparison period, target meters, mini charts and an anomaly flag.
Preview
Business overview
Monthly recurring revenue
$184.3K
+2.4%vs last week(better)
$200KWeekly active workspaces
3,412
+4%vs last week(better)
3,500Trial → paid
14.2%
-3.4%vs last week(worse)
15%Logo churn
1.9%
-9.5%vs last week(better)
≤ 2%API latency p95
Anomaly412ms
+73.1%vs last week(worse)
≤ 300Up 73% since Monday's deploy; EU reads are slow.
Open support tickets
58
-18.3%vs last week(better)
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| metrics | StatMetric[] | — | { id, label, value, format?, unit?, previous: { [periodId]: number }, series?, target?, invert?, anomaly? }. |
| metrics[].invert | boolean | false | A drop is good (latency, churn); also makes target a ceiling. |
| metrics[].anomaly | string | — | Flags the cell with an ember ring, chip and this explanation. |
| periods | { id, label }[] | — | Comparison options for the switch. |
| period / defaultPeriod | string | first period | Selected comparison period. |
| onPeriodChange | (period: string) => void | — | Called when the switch changes. |
| title | string | "Key metrics" | Grid heading. |
| locale | string | "en-US" | Locale for values and percentages. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.