Dashboard

Dashboard view

A generated dashboard from one serializable object: StatCard KPIs, Panel + PanelChart series, Panel + DataTable tracker. Values arrive pre-formatted and deltas are plain objects, so the whole surface stores, validates and revises as JSON. The data cannot ask for a layout the registry does not already have.

Install

npx shadcn@latest add @alix/dashboardView

Preview

Run-rate EBITDA£46m

+8%Post-programme

Cash released£9.4m

Utilisation83%

+5pts

Days to first cash61 days

-12

Utilisation vs target

Usage

<DashboardView
  kpis={[
    { label: "Run-rate EBITDA", value: "£46m", delta: { value: "+8%", direction: "up", intent: "positive" } },
    { label: "Cash released", value: "£9.4m" },
  ]}
  panels={[
    {
      title: "Utilisation vs target",
      unit: "%",
      type: "line",
      series: [{ name: "Utilisation", points: [{ label: "Q1", value: 71 }, { label: "Q2", value: 78 }] }],
    },
  ]}
  table={{
    title: "Initiative tracker",
    columns: ["Initiative", "Owner", "Value"],
    rows: [["Procurement reset", "J. Hale", "£3.2m"]],
  }}
/>

Examples

With the tracker table

The optional table is plain columns and pre-formatted string rows: DataTable owns the typography, the data owns nothing.

Run-rate EBITDA£46m

+8%Post-programme

Cash released£9.4m

Initiative tracker

Initiative tracker
Initiative	Owner	Status	Value
Procurement reset	J. Hale	On track	£3.2m
Working capital	R. Osei	On track	£4.1m
Footprint review	M. Kaur	At risk	£2.1m

<DashboardView
  kpis={kpis}
  panels={[]}
  table={{
    title: "Initiative tracker",
    columns: ["Initiative", "Owner", "Status", "Value"],
    rows: [
      ["Procurement reset", "J. Hale", "On track", "£3.2m"],
      ["Working capital", "R. Osei", "On track", "£4.1m"],
    ],
  }}
/>

When to use it

Use it for

Pack dashboards and any surface whose content arrives as stored or generated JSON.
KPI values formatted once by the caller's formatter, so the same fact reads identically on every surface it appears on.
Two to six KPIs and up to four panels: the generating contract's own caps.

Reach for something else

A hand-composed product dashboard with controls and navigation. Compose DashboardShell, Panel and StatCard directly.
One metric on its own. Use Stat or StatCard.
Charts that need their own axes or formatting: this surface only speaks PanelChart.

Props

Prop	Type	Default	Description
kpis	DashboardKpi[]	–	Resolved KPI tiles: { label, value, caption?, delta? } with the value pre-formatted and the delta a plain { value, direction, intent } object. Serializable, never a node.
panels	DashboardPanelData[]	–	Charted panels: the PanelChart contract plus the frame's title and unit. One panel spans the full row; two tile side by side.
table	DashboardTableData	–	Optional tracker: { title, columns, rows } with string cells, rendered flush in a Panel via DataTable.