MetricBreakdown

Chart
The decomposed-metric dashboard card: headline value, tone-aware rate, Sparkline trend, per-category share rows, and a chip footer.
src/charts/metric-breakdown
View in Charts

Playground

Every control sets a real prop of MetricBreakdownProps. The JSX below updates as you go.
Installs
48.2k
+12.4%
Props
value
string
label
string
rate
string
Rate
pick one
plain
boolean
compact
boolean
JSX · MetricBreakdownProps
<MetricBreakdown value="48.2k" label="Installs" rate="+12.4%" rateSuccess />

Variants

2 examples from src/charts/metric-breakdown/metric-breakdown.md, each rendered live from its own JSX.
Requests
25,874
0.74%
4xx + 5xx rate
Rate and trend
<MetricBreakdown
value="25,874"
label="Requests"
rate="0.74%"
rateLabel="4xx + 5xx rate"
rateSuccess
spark={[180, 196, 188, 204, 210, 202, 214, 220]}
sparkUnit="req/s"
/>
Requests
25,874
Plain, inside a card
<Card>
<MetricBreakdown
plain
value="25,874"
label="Requests"
breakdown={[
{ label: "GET", value: 18248, delta: "+8%" },
{ label: "POST", value: 6104, delta: "+21%" },
{ label: "PATCH", value: 1212, delta: "-2%", down: true },
]}
/>
</Card>

Anatomy

Installs
48.2k
+12.4%
1
Frame
2
Value
3
Rate
4
Breakdown rows
Dimmed parts appear only in some states or variants.

Props

19 props on MetricBreakdownProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
4 props
value *
string
–
The headline figure, preformatted (e.g. "3,771").
label *
string
–
Small caption over the headline (e.g. "Tokens issued").
rate
string
–
Secondary metric, under the headline (e.g. "1.39%").
rateLabel
string
–
Caption after the rate (e.g. "Error rate").
Rate tone
pick one
10 props
rateSuccess
boolean
false
rateWarning
boolean
false
rateDestructive
boolean
false
spark
number[]
–
Trend series rendered as a Sparkline bar strip beside the headline. Needs at least two points to draw.
sparkUnit
string
–
Unit suffix on the latest-value caption (e.g. "req/s").
hideSparkTag
boolean
false
Hide the latest-value tag over the trend strip (the strip alone, when the headline already carries the figure).
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).
Density
5 props
compact
boolean
false
detailed
boolean
false
Expanded metric summary with a divided share breakdown and trend annotation.
plain
boolean
false
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
group
img
ARIA on web
aria-hidden
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Revenue
$48,210
Web
control 10 · field 10 · card 16 · Instrument Sans
Revenue
$48,210
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Revenue
$48,210
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<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 },
]}
/>
It holds a preformatted headline value with its caption, an optional secondary rate readout under the headline (toned by rateSuccess, rateWarning, or rateDestructive), an optional trend strip drawn by the kit Sparkline at the header's end with a latest-value caption above it, per-category breakdown rows with proportional share meters 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.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--c2
--c3
--f-dp
--fd
--fm
--ft
--ln
--ok
--sf
--sf3
--sh-sm
--tx3

Related components