PureAdmin.Components.KpiTerminal (PureAdmin v1.2.0)

Copy Markdown View Source

KPI Terminal grid showcase — Bloomberg-style dense panel of KPI tiles.

Tracks _kpi-terminal.scss from @keenmate/pure-admin-core 2.7.1+. The tile primitive lives in PureAdmin.Components.Kpi.kpi_tile/1; this module supplies the card chrome (pa-kpi-terminal) and the optional tab strip that swaps panes (each pane can hold a different tile count + grid).

Usage

Single grid (no tabs) — children are tiles, the wrapper supplies the pa-kpi-terminal__grid--2col:

<.kpi_terminal title_text="Key Performance Indicators" is_live>
  <.kpi_tile id_text="KPI.01" .../>
  <.kpi_tile id_text="KPI.02" .../>
</.kpi_terminal>

Tabs + panes — :pane slots define each tab. The hook PureAdminKpiTerminalTabs toggles active tab/pane client-side. Mark one pane is_active for the initial state (defaults to the first pane).

<.kpi_terminal id="exec-kpis" title_text="Key Performance Indicators" is_live>
  <:pane id="overview" label_text="OVERVIEW" is_active>
    <.kpi_tile .../>
    <.kpi_tile .../>
  </:pane>
  <:pane id="finance" label_text="FINANCE">
    <.kpi_tile .../>
  </:pane>
</.kpi_terminal>

Summary

Functions

kpi_terminal(assigns)

Functions

kpi_terminal(assigns)

Attributes

  • id (:string) - Required when tabs are used (the JS hook needs an id). Defaults to nil.
  • title_text (:string) - Defaults to nil.
  • is_live (:boolean) - Show the LIVE pill (animated green dot) in the header. Defaults to false.
  • live_text (:string) - Defaults to "LIVE".
  • footer_text (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • pane - One pane per tab. When present, the tab strip is rendered. Accepts attributes:
    • id (:string) (required)
    • label_text (:string) (required)
    • tab_class (:string)
    • class (:string)
    • is_active (:boolean)
  • inner_block - Tile content when not using tabs — wrapped in a single pa-kpi-terminal__grid--2col.
  • header_controls - Extra controls between the title and the LIVE pill (e.g. custom toolbars).
  • footer - Footer override.