KPI drilldown
ProKPI cards that expand into a full detail chart with period comparison and a breakdown table, then fold back.
Live block · sample data
- An analytics or finance overview where each number deserves a closer look.
- Executive dashboards that compare the current period with the previous one.
- Use metric-explorer to compare many metrics on one chart.
- Use metrics-dashboard for a static summary without drill down.
- Avoid it for real time monitoring where values change every second.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this as the overview of an analytics or finance dashboard. Load each metric's series and breakdowns from your warehouse and keep the range in your URL.
example.tsx
import { KpiDrilldown } from "@/components/arc/blocks/kpi-drilldown/kpi-drilldown"; export function Overview({ metrics }: { metrics: Kpi[] }) { const [metric, setMetric] = useQueryState("metric"); return <KpiDrilldown kpis={metrics} selected={metric} onSelectedChange={setMetric} />;}KpiDrilldown
A KPI overview where each card expands into a full detail view on one spring: the label and value stay put while the chart, period comparison, and breakdown table are revealed around them. Ranges morph every sparkline in place.
PropTypeDefaultDescription
kpisKpi[]kpisMetrics: id, label, format, kind (total or rate), lowerIsBetter, daily series, breakdowns by dimension, and a description.dimensions{ value: string; label: string }[]breakdownDimensionsBreakdown dimensions; values match keys in each metric's breakdowns.endstring"2026-09-24"ISO date of the last value in every series.defaultRange"7" | "30" | "90""30"Initial range in days.selectedstring | null–Controlled open metric id, or null for the grid.onSelectedChange(id: string | null) => void–Called when a metric opens or closes. Use it to keep the selection in the URL.titlestring"Overview"Heading.classNamestring–Class on the root.- EnterorSpace on a card
- Opens the metric; focus moves to the close button.
- Escape
- Folds the detail back into its card and returns focus to it.
- Arrow leftorArrow right
- Moves the chart cursor one day while the chart has focus.
- Cards are buttons whose name includes the value and the change.
- The detail is a labeled region; the grid behind it is hidden from assistive technology while it is open.
- The chart has a spoken summary and a keyboard cursor; changes pair an arrow and sign with color.
- Breakdowns are real tables with row headers.
- The card grows into the detail on one spring, and the detail folds back into the same card.
- Every range is resampled to the same number of points, so sparklines and the detail line morph instead of redrawing.
- Values roll digit by digit when the range changes.
- The previous period line fades in and out with Compare; breakdown rows crossfade and their share bars fill with a small stagger.
- Reduced motion jumps between grid and detail and keeps short fades.
- Three columns above 760px, two down to 520px, then one.
- Below 520px the share column hides and Compare becomes an icon button.
- The detail scrolls inside its panel when it is taller than the grid.
- Sparklines use a fixed 100 by 32 viewBox with non scaling strokes, so resizing never re measures them.
- The detail chart measures its width once per resize and animates only path data.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Give each metric at least twice the longest range of daily values so the comparison period exists.
- Use kind rate for percentages so changes read in points, and set lowerIsBetter for churn or latency.
- Keep selected in the URL with onSelectedChange so a detail can be shared.
- Six metrics fit best; more belong in metric-explorer.
The full library index for assistants is at /llms.txt.