PureAdmin.Components.KpiSparklineList (PureAdmin v1.2.0)

Copy Markdown View Source

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.

Functions

kpi_sparkline_list(assigns)

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 to nil.
  • is_live (:boolean) - Defaults to false.
  • live_text (:string) - Defaults to "LIVE".
  • footer_text (:string) - Defaults to nil.
  • is_no_delta (:boolean) - Drop the rightmost Δ% column (pa-kpi-spark-list--no-delta). Defaults to false.
  • is_chart_first (:boolean) - Rotate to label/chart/value+delta stacking at mid-narrow widths. Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

kpi_sparkline_row(assigns)

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

  • variant colours the chart line/area/dot via currentColor (up_strong / up / flat / down / down_strong).
  • delta_variant colours the Δ% cell (very_positive / positive / neutral / negative / very_negative).

Attributes

  • id (:string) - Defaults to nil.
  • variant (:string) - Defaults to nil.Must be one of nil, "up_strong", "up", "flat", "down", or "down_strong".
  • label_text (:string) - Defaults to nil.
  • value_text (:string) - Defaults to nil.
  • unit_text (:string) - Defaults to nil.
  • prefix_text (:string) - Defaults to nil.
  • delta_text (:string) - Defaults to nil.
  • delta_variant (:string) - Defaults to nil.Must be one of nil, "very_positive", "positive", "neutral", "negative", or "very_negative".
  • detail_title_text (:string) - Defaults to nil.
  • previous_value_text (:string) - Defaults to nil.
  • target_text (:string) - Defaults to nil.
  • delta_absolute_text (:string) - Defaults to nil.
  • delta_absolute_sentiment (:atom) - Defaults to nil.Must be one of nil, :pos, :neg, or :warn.
  • detail_rows (:list) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • label
  • chart - Chart cell content — any SVG / hook-mounted chart.
  • value
  • delta
  • detail - Raw popover content — overrides the auto-built popover.