MetricBreakdown

The decomposed-metric dashboard card: headline value, tone-aware rate, Sparkline trend, per-category share rows, and a chip footer.
It holds a preformatted headline value with its caption, an optional secondary rate readout top right (toned by rateSuccess, rateWarning, or rateDestructive), an optional trend strip drawn by the kit Sparkline with a latest-value caption above the plot, per-category breakdown rows with proportional share bars and Stats-style deltas, and a chips footer for recent notable codes. Every section is independently optional, so one layout backs OAuth token issuance, API request volume, sign-up sources, and any metric that needs decomposition plus trend in one card.
3,771
Tokens issued
iOS
3,771
Tokens issued
Android
3,771
Tokens issued
Web
tsx
<MetricBreakdown
value="3,771"
label="Tokens issued"
breakdown={[
{ label: "authorization_code", value: 1842, delta: "+12%" },
{ label: "refresh_token", value: 1264, delta: "+4%" },
{ label: "client_credentials", value: 618, delta: "-3%", down: true },
]}
/>

Props

Prop
Description
value
required
string
The headline figure, preformatted (e.g. "3,771").
label
required
string
Small caption under the headline (e.g. "Tokens issued").
rate
string
Secondary metric, top right (e.g. "1.39%").
rateLabel
string
Caption under the rate (e.g. "Error rate").
rateSuccess
boolean
Rate tone (slot-scoped; pick one; default muted). Precedence: rateSuccess > rateWarning > rateDestructive (first match wins).
rateWarning
boolean
Rate tone (slot-scoped; pick one; default muted). Precedence: rateSuccess > rateWarning > rateDestructive (first match wins).
rateDestructive
boolean
Rate tone (slot-scoped; pick one; default muted). Precedence: rateSuccess > rateWarning > rateDestructive (first match wins).
spark
number[]
Trend series rendered as a Sparkline line strip under the header. Needs at least two points to draw.
sparkUnit
string
Unit suffix on the latest-value caption (e.g. "req/s").
breakdown
BreakdownRow[]
Per-category rows with proportional share bars.
chips
MetricBreakdownChip[]
Footer chips rendered with the kit Chip (e.g. top error codes).
chipsLabel
string
Leading caption on the chip row (e.g. "Errors"). Omit to hide.
formatValue
(v: number) => string
Formats row values and the spark tag (data formatting, not styling).
compact
boolean
Density (omit for the default spacing).
plain
boolean
Strip the card surface for nesting inside an existing card (mirrors Stats).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

MetricBreakdown

Don’t
12.4k
REQUESTS
Rebuilding the header and trend from Text and Sparkline at the call site splits the anatomy the card owns and loses the rows' accessible shares.
Do
12.4k
Requests
0.74%
Error rate
Pass preformatted strings and semantic tone booleans; the card owns the header, trend, rows, and chip anatomy.
← LineChart
PieChart →