KPI Sparkline list showcase — one row per KPI: label · sparkline · value · Δ%.
Tracks _kpi-sparkline-list.scss from @keenmate/pure-admin-core 2.7.1+.
Container queries on the card adapt the row template (4-col → 2-row →
3-row) as the card narrows. is_no_delta drops the rightmost column;
is_chart_first rotates the canonical L→R order 90° at narrow widths.
Summary
Functions
Renders the card wrapper for a list of kpi_sparkline_row/1 rows.
Renders one row inside a kpi_sparkline_list/1.
Functions
Renders the card wrapper for a list of kpi_sparkline_row/1 rows.
Examples
<.kpi_sparkline_list title_text="Live KPIs" is_live>
<.kpi_sparkline_row label_text="Revenue" value_text="848" unit_text="K" prefix_text="$" delta_text="▲ 12%" delta_variant="positive" variant="up">
<:chart>
<svg viewBox="0 0 100 24" preserveAspectRatio="none">
<polygon points="0,24 0,18 12,16 24,17 36,12 48,15 60,9 72,11 84,7 96,5 96,24"/>
<polyline points="0,18 12,16 24,17 36,12 48,15 60,9 72,11 84,7 96,5"/>
<circle cx="96" cy="5" r="2"/>
</svg>
</:chart>
</.kpi_sparkline_row>
</.kpi_sparkline_list>Attributes
title_text(:string) - Defaults tonil.is_live(:boolean) - Defaults tofalse.live_text(:string) - Defaults to"LIVE".footer_text(:string) - Defaults tonil.is_no_delta(:boolean) - Drop the rightmost Δ% column (pa-kpi-spark-list--no-delta). Defaults tofalse.is_chart_first(:boolean) - Rotate to label/chart/value+delta stacking at mid-narrow widths. Defaults tofalse.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required) - Row content —kpi_sparkline_row/1instances.footer
Renders one row inside a kpi_sparkline_list/1.
The row is the hover host for the detail popover. Set detail_title_text
plus any combination of previous_value_text / delta_absolute_text /
target_text to auto-build the popover body, or pass raw markup via the
:detail slot.
Variants
variantcolours the chart line/area/dot viacurrentColor(up_strong/up/flat/down/down_strong).delta_variantcolours the Δ% cell (very_positive/positive/neutral/negative/very_negative).
Attributes
id(:string) - Defaults tonil.variant(:string) - Defaults tonil.Must be one ofnil,"up_strong","up","flat","down", or"down_strong".label_text(:string) - Defaults tonil.value_text(:string) - Defaults tonil.unit_text(:string) - Defaults tonil.prefix_text(:string) - Defaults tonil.delta_text(:string) - Defaults tonil.delta_variant(:string) - Defaults tonil.Must be one ofnil,"very_positive","positive","neutral","negative", or"very_negative".detail_title_text(:string) - Defaults tonil.previous_value_text(:string) - Defaults tonil.target_text(:string) - Defaults tonil.delta_absolute_text(:string) - Defaults tonil.delta_absolute_sentiment(:atom) - Defaults tonil.Must be one ofnil,:pos,:neg, or:warn.detail_rows(:list) - Defaults tonil.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
labelchart- Chart cell content — any SVG / hook-mounted chart.valuedeltadetail- Raw popover content — overrides the auto-built popover.