Bloomberg-y "sparkline list" KPI indicator. Each KPI becomes one row: name · sparkline · value · Δ%. No view-mode toggle, no status pills, no prev row — built for fast vertical scanning and side-by-side comparison rather than per-tile depth. Sparkline gets a filled area under the line for stronger visual weight than the terminal-grid version. Hover any row for the structured detail breakdown.
Two list-level modifiers are independently composable: isChartFirst flips the value/chart
stacking order at narrow widths, and noDelta drops the rightmost (Δ%) column when the
sparkline's slope already conveys direction. Source markup stays the same; pick modifiers per instance.
Key Performance Indicators
LIVE- Current
- 87.9%
- Previous
- 84.2%
- Δ absolute
- +3.7pp
- Δ percent
- +4.4%
- Target
- 90.0%
- Current
- $862K
- Previous
- $752K
- Δ absolute
- +$110K
- Δ percent
- +14.7%
- Target
- $900K
- Current
- 23.8°C
- Previous
- 24.5°C
- Δ absolute
- −0.7°C
- Δ percent
- -2.7%
- Target
- ≤ 23°C
- Current
- 83.1%
- Previous
- 71.0%
- Δ absolute
- +12.1pp
- Δ percent
- +17.1%
- Target
- ≤ 75%
- Current
- 0.25%
- Previous
- 0.40%
- Δ absolute
- −0.15pp
- Δ percent
- -38.1%
- Target
- ≤ 0.50%
- Current
- ¥11.6M
- Previous
- ¥11.2M
- Δ absolute
- +0.40M
- Δ percent
- +3.6%
- Target
- ¥13.0M
Layout variant · noDelta
Drops the rightmost (Δ%) column — each row reads as label · sparkline · value. Useful when the sparkline's slope already conveys direction and the percentage delta would be redundant chrome. The row template shrinks from 4 to 3 columns at wide widths; at narrow widths the responsive 2-row / 3-row layouts also collapse to a delta-less shape. The Δ% data is left on each row so the popover still surfaces it on hover.
Key Performance Indicators
LIVE- Current
- 87.9%
- Previous
- 84.2%
- Δ absolute
- +3.7pp
- Δ percent
- +4.4%
- Target
- 90.0%
- Current
- $862K
- Previous
- $752K
- Δ absolute
- +$110K
- Δ percent
- +14.7%
- Target
- $900K
- Current
- 23.8°C
- Previous
- 24.5°C
- Δ absolute
- −0.7°C
- Δ percent
- -2.7%
- Target
- ≤ 23°C
- Current
- 0.25%
- Previous
- 0.40%
- Δ absolute
- −0.15pp
- Δ percent
- -38.1%
- Target
- ≤ 0.50%
1×3 page-grid — isChartFirst comparison
Three smaller cards side-by-side. The middle card uses the isChartFirst modifier so you can
see the two stacking styles at the same width: card 1 + 3 = value-above-chart (default), card 2 = chart-above-value (modifier).
- Current
- 87.9%
- Previous
- 84.2%
- Δ percent
- +4.4%
- Target
- 90.0%
- Current
- $862K
- Previous
- $752K
- Δ percent
- +14.7%
- Target
- $900K
- Current
- 23.8°C
- Previous
- 24.5°C
- Δ percent
- -2.7%
- Current
- 83.1%
- Δ percent
- +17.1%
- Current
- 0.25%
- Δ percent
- -38.1%
- Current
- ¥11.6M
- Δ percent
- +3.6%
Usage Guide
When to use
Vertical scanning of many KPIs side-by-side. Each row reads label · trend · value · Δ% in a single glance. Best for "give me the whole board at once" use cases — financial dashboards, ops monitoring, performance reviews. If you want per-tile depth or status pills, pick Terminal grid or Editorial minimal instead.
Chart cell is library-agnostic
Pass any chart content via the chart snippet — inline SVG (as shown), Chart.js <canvas>, or any other library. When SVG with a <circle> endpoint
marker is detected, the kpiSparklineDots action auto-converts it to a CSS-pixel-sized
span so the dot stays round under the SVG's preserveAspectRatio="none" stretching.
Two sentiment scales
variant sets the trend colour (line, area-fill, dot) via a currentColor cascade — 5 levels: up-strong / up / flat / down / down-strong. deltaVariant colours the Δ% cell using a different 5-step
scale: very-positive / positive / neutral / negative / very-negative. The two scales are distinct because the line and the delta value can
disagree (e.g., a sharp drop in error rate is line-going-down but delta-very-positive).
Responsive layout
Container queries (driven by card width, not viewport) collapse the 4-col grid in stages: below 640 px → label/value/delta on one row with chart spanning below; below 360 px → label / chart / value+delta as three rows.
List-level modifiers (composable)
Two independently composable boolean props on KpiSparklineList:
isChartFirst— flips the mid-narrow 2-row collapsed layout from "value-above-chart" to "label / chart / value+delta", preserving the canonical L→R reading order when rotated 90°. The very-narrow ≤360 px fallback always uses the 3-row layout regardless of modifier — neither variant has room for label+value+delta on one line at that width.noDelta— drops the rightmost Δ% column. At wide widths the row shrinks from 4 cols to 3 (label · chart · value); at mid-narrow the top row becomeslabel valueonly; at very-narrow the bottom row becomes a single full-width value cell. The delta element is hidden viadisplay: none, so the same markup keeps the value available for the popover on hover.
Composing both (isChartFirst + noDelta) at mid-narrow gives a clean 3-row
single-column stack: label / chart / value.
Component Reference
KpiSparklineList props
titleText— card title in the header.isLive— show the LIVE pill with animated green dot.footerText— footer caption (plain string). Override viafootersnippet.isChartFirst— applypa-kpi-spark-list--chart-firstmodifier (rotates the narrow-card layout to label-on-top / chart-middle / value+delta-bottom).noDelta— applypa-kpi-spark-list--no-deltamodifier (drops the Δ% column; composes withisChartFirst).
KpiSparklineRow props
variant— trend line/area/dot colour:up-strong/up/flat/down/down-strong.labelText— uppercase mono label.valueText/unit/prefix— focal value cell.deltaText+deltaVariant— Δ% text and sentiment:very-positive/positive/neutral/negative/very-negative.chart— snippet for the chart cell (SVG, canvas, anything).detailTitleText— popover title (setting this enables the auto-generated popover).previousValueText— "Previous" row in the auto-generated popover.targetText— "Target" row in the auto-generated popover.deltaAbsoluteText— "Δ absolute" row in the auto-generated popover.