DXStatCard
A KPI / stat tile: a big formatted value with a title, optional subtitle, an optional up/down delta badge (auto-coloured and arrowed) versus a comparison period, and an optional trend/sparkline slot. Themed with Bootstrap variables.
Live Examples
Revenue
This week
£6,480.55
61%vs last week
New customers
This week
128
12%vs last week
Refund rate
Lower is better
2.4%
0.6%vs last week
Props
| Name Click to sort ascending | Type | Required Click to sort ascending | Default | Description |
|---|---|---|---|---|
title | string | Yes | - | Metric label, e.g. "Revenue" |
value | string | number | Yes | - | The metric value. Numbers are formatted per `format`; strings pass through |
subtitle | string | No | - | Secondary line under the title, e.g. "This week" |
format | 'number' | 'currency' | 'percent' | No | 'number' | How to format a numeric value |
currencySymbol | string | No | '£' | Currency symbol for format: "currency" |
precision | number | No | 2 for currency, else 0 | Decimal places |
locale | string | No | - | Locale for number grouping/formatting |
delta | number | No | - | Change vs a comparison period; its sign drives the arrow/colour |
deltaFormat | 'number' | 'currency' | 'percent' | No | 'percent' | How to format the delta |
deltaDirection | 'up' | 'down' | 'neutral' | No | derived from delta | Force the delta direction |
deltaLabel | string | No | - | Caption beside the delta, e.g. "vs last week" |
invertDelta | boolean | No | false | Invert the delta colour for metrics where down is good (costs, bounce rate) |
Slots
| Name Click to sort ascending | Description | Scoped Props |
|---|---|---|
value | Override the rendered value | - |
icon | Icon/visual in the top-right of the card | - |
trend | Trend visual (e.g. a sparkline) in the card footer | - |