Linked KPI Board

When to reach for it

A board of KPIs read in isolation hides the relationships between them. Use the Linked KPI Board when the cross-reading is the insight — revenue is up but cash shortened the same month. Hover any panel and a guide plus the shown value move across all of them, and a single meta-narrative reads the whole board at once.

How it thinks

• Shared selection — every panel reads one useSelection() context. Hovering a month sets activeX (via Recharts' activeLabel), and all panels mark it and switch their headline to that month's value. That's linked brushing, with no per-panel wiring.
• Meta-narrative — summarizeBoard() reads the per-KPI delta insights and synthesizes one sentence: "2 of 3 KPIs improved MoM — Revenue led (+8.1%)." It reasons across widgets, not within one.

The selection-kit provider follows the same no-op-safe discipline as Studio: outside a provider the hook returns inert defaults, so a panel renders standalone with zero overhead.

Good to know

• Pass any number of aligned monthly KPIs (format: "currency" | "percent" | "number"); they just need to share the months axis.
• The cross-filter is a hover enhancement; the accessible representation is the data table (months × KPIs), and the meta-narrative is the figure's label.
• selection-kit is reusable on its own — wrap any group of time-aligned widgets to make them cross-filter.

Use it with your data

import { ChartLinkedBoard } from "@/components/blocks/chart-linked-board/chart-linked-board";

<ChartLinkedBoard data={myData} />

const { data, isLoading, error } = useSWR("/api/metric", fetcher);
// route isLoading/error through <ChartStates>, then:
<ChartLinkedBoard data={data} />

const data = await fetch(url, {
  next: { revalidate: 3600 },
}).then((r) => r.json());

<ChartLinkedBoard data={data} />

import { mapRows } from "@/lib/sextant/column-map";

const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <ChartLinkedBoard data={out.data} />;

Make it yours

Every customization below is an optional prop — omit them all and you get the defaults shown above. Recolor, reformat, restyle, or drop the card chrome without forking the component.

const eur = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
  notation: "compact",
});

<ChartLinkedBoard valueFormatter={(n) => eur.format(n)} />

<ChartLinkedBoard narrative="Your own one-liner." />

// …or hide it entirely:
<ChartLinkedBoard narrative={false} />

<ChartLinkedBoard
  className="max-w-xl"
  classNames={{ body: "bg-muted/20" }}
/>

import { ChartLinkedBoardPlot } from "@/components/blocks/chart-linked-board/chart-linked-board";

// Just the chart body — bring your own card/layout:
<ChartLinkedBoardPlot data={data} config={config} />