Bloomberg-y "terminal grid" KPI panel — mono numbers, status tags, sparklines, ▲▼ deltas. The header strip is a tab control: each tab swaps in a separate pane with its own tile set and grid layout (different tile counts allowed). Hover any tile for the detail breakdown.
Key Performance Indicators
- Current
- 88.6%
- Previous
- 84.2%
- Δ absolute
- +4.4pp
- Δ percent
- ▲ 5.2%
- Target
- 90.0%
- Current
- $835K
- Previous
- $752K
- Δ absolute
- +$83K
- Δ percent
- ▲ 11.0%
- Target
- $900K
- Current
- 22.9°C
- Previous
- 24.5°C
- Δ absolute
- −1.6°C
- Δ percent
- ▼ 6.5%
- Target
- ≤ 23°C
- Current
- 81.6%
- Previous
- 71.0%
- Δ absolute
- +10.6pp
- Δ percent
- ▲ 14.9%
- Target
- ≤ 75%
- Current
- 0.24%
- Previous
- 0.41%
- Δ absolute
- −0.17pp
- Δ percent
- ▼ 41.0%
- Target
- ≤ 0.50%
- Current
- ¥11.6M
- Previous
- ¥11.2M
- Δ absolute
- +0.39M
- Δ percent
- ▲ 3.5%
- Target
- ¥13.0M
- Current
- $835K
- Previous
- $752K
- Δ absolute
- +$83K
- Δ percent
- ▲ 11.0%
- Target
- $900K
- Current
- ¥11.6M
- Previous
- ¥11.2M
- Δ absolute
- +0.39M
- Δ percent
- ▲ 3.5%
- Target
- ¥13.0M
- Current
- 88.6%
- Previous
- 84.2%
- Δ absolute
- +4.4pp
- Δ percent
- ▲ 5.2%
- Target
- 90.0%
- Current
- 22.9°C
- Previous
- 24.5°C
- Δ absolute
- −1.6°C
- Δ percent
- ▼ 6.5%
- Target
- ≤ 23°C
- Current
- 81.6%
- Previous
- 71.0%
- Δ absolute
- +10.6pp
- Δ percent
- ▲ 14.9%
- Target
- ≤ 75%
- Current
- 0.24%
- Previous
- 0.41%
- Δ absolute
- −0.17pp
- Δ percent
- ▼ 41.0%
- Target
- ≤ 0.50%
1×3 · .pa-col-1-3 columns
Each tile in its own .pa-col-1-3 (33% page-grid column) as a standalone mini-card
— no shared terminal-grid chrome, no tabs. Tests how a single tile renders at one-third of the viewport
width, the typical "stat strip" placement.
- Current
- 88.6%
- Previous
- 84.2%
- Δ absolute
- +4.4pp
- Δ percent
- ▲ 5.2%
- Target
- 90.0%
- Current
- $835K
- Previous
- $752K
- Δ absolute
- +$83K
- Δ percent
- ▲ 11.0%
- Target
- $900K
- Current
- 22.9°C
- Previous
- 24.5°C
- Δ absolute
- −1.6°C
- Δ percent
- ▼ 6.5%
- Target
- ≤ 23°C
Asymmetric · .pa-col-25 + .pa-col-45 + .pa-col-30
Mixed-width page-grid: a narrow .pa-col-25 (25%), a mid .pa-col-45 (45%),
and a .pa-col-30 (30%) all carrying standalone tiles. Surfaces how the typography + layout
handles narrow vs wide cells in the same row.
- Current
- 88.6%
- Previous
- 84.2%
- Δ absolute
- +4.4pp
- Δ percent
- ▲ 5.2%
- Target
- 90.0%
- Current
- $835K
- Previous
- $752K
- Δ absolute
- +$83K
- Δ percent
- ▲ 11.0%
- Target
- $900K
- Current
- 0.24%
- Previous
- 0.41%
- Δ absolute
- −0.17pp
- Δ percent
- ▼ 41.0%
- Target
- ≤ 0.50%
Custom chart library · Chart.js in the chart slot
The terminal sparkline is just a <svg class="pa-kpi-tile__spark"> — swap it for a
<canvas class="pa-kpi-tile__spark" data-kpi-chart> and a real charting library renders
into the same place, here a Chart.js bar chart so it's clearly not the default line
sparkline. The pa-kpi-tile__spark class still carries the tile's sentiment
color, so the bars read currentColor and track the sentiment scale + theme.
Key Performance Indicators
- Current
- 88.6%
- Previous
- 84.2%
- Δ percent
- ▲ 5.2%
- Target
- 90.0%
- Current
- 0.28%
- Previous
- 0.42%
- Δ percent
- ▼ 33.3%
- Target
- ≤ 0.50%
Usage Guide
When to use
Bloomberg-style dense KPI panels: per-tile depth (id, status pill, label, focal value, prev row, sparkline) with an optional tab strip on top that swaps in a different pane (different tile set, different grid layout) per tab. Best for trading floor / NOC / operations dashboards where a single panel must carry several distinct views. If you want even-weight grids with less per-tile chrome, pick Sparkline list or Editorial minimal.
Tab strip (optional)
Each kpi_terminal/1 can hold one or more :pane slots, each carrying an
id + label_text. The header auto-renders a tab strip; the
PureAdminKpiTerminalTabs hook toggles .is-active on the clicked tab and
matching pane. Panes are independent — different tile counts in this demo: OVERVIEW has 6, FINANCE
has 2, OPERATIONS has 4.
Sections without tabs simply omit the :pane slots and place tiles as inner_block
— the wrapper supplies a pa-kpi-terminal__grid--2col automatically. The 1×3 / asymmetric
stress tests and the Chart.js demo do this.
Status pills (different axis from sentiment)
Three pill styles for tile-level status: WARN (filled orange — needs attention),
GOOD (text-only — passing, no chrome by design), NEUTRAL (filled grey —
informational).
The pill is on a different axis from the 5-step sentiment scale
(very_positive / positive / neutral / negative /
very_negative) used on value_variant and delta_variant.
Sentiment is direction of change; the pill is action urgency. A tile can be
very_negative numerically AND good pill-wise if the drop is on target.
is_standalone modifier
Tiles inside a kpi_terminal share grid-bookkeeping borders. A tile placed directly
inside a .pa-col-* outside a grid needs is_standalone to draw its own
full border + card-bg + bottom margin so it doesn't look orphaned.
Sparkline trailing dot
SVG preserveAspectRatio="none" stretches a <circle> into an oval, so
the PureAdminKpiSparkDot hook converts each circle to an HTML <span>
inside a .pa-kpi-spark-wrap on mount. The dot is sized in CSS pixels so it stays a
true circle regardless of chart aspect ratio.
Hover detail popover
Cursor-anchored via Floating UI's computePosition + virtual reference element. Each
tile's detail is appended to <body> on init to escape ancestor
overflow: hidden. Set detail_title_text (plus any combination of
previous_value_text / delta_absolute_text / target_text) and
the popover body is auto-built; pass a :detail slot for fully-custom markup.
CSS Classes Reference
Card structure
pa-kpi-terminal— page-namespace class on.pa-card. Scopes the tab/pane DOM contract.pa-kpi-header— flex header with title + controls + LIVE indicator.pa-kpi-terminal__controls— controls group (tabs + LIVE side by side).pa-kpi-live/pa-kpi-live__dot— LIVE pill + animated dot.pa-kpi-terminal__body— card body with internal padding.pa-kpi-terminal__grid— internal tile grid.pa-kpi-terminal__grid--2col— 2-col layout modifier (canonical dense grid).
Tab strip
pa-kpi-terminal__tabs— segmented tab container (role="tablist").pa-kpi-terminal__tab— tab button.data-tab="slug"matches a pane; addis-activefor the selected one.pa-kpi-terminal__pane— pane container.data-tab="slug"matches a tab; addis-activefor the visible one.
Tile structure
pa-kpi-tile— single tile.pa-kpi-tile--standalone— for tiles directly in a.pa-col-*outside a grid.pa-kpi-tile--up-strong/--up/--flat/--down/--down-strong— sparkline-direction sentiment.
Tile head
pa-kpi-tile__head— top row (id + status pill).pa-kpi-tile__id— tile id (e.g. "KPI.01").pa-kpi-tile__status+--warn/--good/--neutral.pa-kpi-tile__label— uppercase mono caption below the head.
Tile value
pa-kpi-tile__values— wrapper.pa-kpi-tile__value— focal value element.pa-kpi-tile__num/pa-kpi-tile__unit— numeric + unit spans.pa-kpi-tile__value--very-positive/--positive/--neutral/--negative/--very-negative— coloured-number sentiment.
Prev row + delta
pa-kpi-tile__prev— previous-period row.pa-kpi-tile__delta--very-positive/--positive/--neutral/--negative/--very-negative— delta sentiment.
Sparkline
pa-kpi-tile__spark— chart SVG (or<canvas data-kpi-chart>for library-rendered charts).pa-kpi-spark-wrap— JS-inserted wrapper around the SVG.pa-kpi-spark-dot— HTML span replacing the SVG circle.
Hover detail popover
pa-kpi-detail— popover root (moved to<body>on init).pa-kpi-detail__title— uppercase mono header.pa-kpi-detail .pos / .neg / .warn— sentiment-coloured<dd>text.
Framework tokens used by this showcase
--pa-very-positive/--pa-positive/--pa-neutral/--pa-negative/--pa-very-negative— 5-step sentiment.--pa-warning— orange "off-target / approaching limit" signal.--pa-detail-bg/-text/-row-label/-title/-shadow— popover chrome.