KQ-1312 · PULSE/DASHBOARD

Pulse Dashboard

A KPI dashboard where everything reads one window of days, and a change of window moves it all in one beat: the four tiles' digits roll on snap, units first and the tiles in cascade, while the chart's window glides on glide, so a longer period is a real zoom out — the area is rebuilt every frame from the window, a day per point while they fit and the mean of each sample's share past that — and the y scale and the donut's slices glide with it. Dragging across the chart draws a brush that follows the finger 1:1 and rubber-bands past the ends, and letting go zooms into it as the brush opens out to the plot's edges; pointing at a donut slice pulls it out along its own middle on snap while the hub cross-fades to it. The period is a radio group, the tiles a tablist whose panel is the chart, and the chart a slider over its days: arrows step a day, Page keys a week, Shift with an arrow stretches a brush, Enter zooms to it and Escape lets go of the brush, then the zoom.

KQ-1312 · PULSE/DASHBOARD

Fernworks Supply

Waylight Pay · Sep 1 – Sep 30

Revenue · daily

$1k$2k$3k$4k$5k

Sep 1Sep 11Sep 20Sep 30

Revenue by

Total$62.56k

30 days · revenue $62,562 · +4.5% vs previous

Open it on the Studio stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/pulse-dashboard

Props

range / defaultRange: "7d" | "30d" | "90d" | "1y"; default "30d"; The period: the last 7, 30 or 90 days, or the last year, up to now. Changing it glides the chart's window, so it zooms out or in. Controlled or uncontrolled.
onRangeChange: (range: "7d" | "30d" | "90d" | "1y") => void; default —; Fires from the period switch with the new period.
smooth: number; default 0.6; How much the chart's line curves, 0 to 1: straight segments at 0, monotone curves at 1 that never overshoot a reading.
donut / defaultDonut: string; default "channel"; Which breakdown the donut splits revenue by (an id from breakdowns). A new breakdown sweeps its ring in clockwise. Controlled or uncontrolled.
onDonutChange: (id: string) => void; default —; Fires from the breakdown switch with the new breakdown's id.
metric / defaultMetric: string; default the first metric; The tile the chart draws. A new metric grows out of the old one's shape. Controlled or uncontrolled.
onMetricChange: (id: string) => void; default —; Fires from the tile press or arrow key that chose a metric.
onWindowChange: (window: { from: string; to: string; custom: boolean }) => void; default —; Fires whenever the window changes — a period, a zoom or a reset — with both dates included, as YYYY-MM-DD.
metrics: PulseMetric[]; default defaultPulseMetrics; The tiles in order (four fit a row): id, label, kind (money, count or percent as a fraction), aggregate (sum or mean), goodWhen (up or down) and one value per day, oldest first. The default is 730 seeded days of a small store.
breakdowns: PulseBreakdown[]; default defaultPulseBreakdowns; The donut's splits of revenue: each an id, a label and segments with a daily series aligned with the metrics and an optional colour.
now: number | Date; default defaultPulseNow; The date of the last value in every series. Dates are counted back from it.
locale: string; default "en-US"; The locale for numbers and money.
currency: string; default "USD"; The currency for money metrics.
format: (value: number, kind: "money" | "count" | "percent") => string; default —; Formats a value for the tiles, the chart's readout and the spoken sentences. Defaults to whole currency, grouped counts and percentages to two places.
status: "ready" | "loading" | "error"; default "ready"; Whether the numbers have arrived: loading shows the dashboard's skeleton, error a retry.
onRetry: () => void; default —; Try again was pressed after the numbers failed to load.
title: string; default "Pulse"; The dashboard's heading.
subtitle: string; default —; A quieter line under the heading, before the window's dates.
label: string; default —; The dashboard's accessible name. Defaults to the title.
sound: boolean; default false; Play a tick for a period, tile or slice chosen and each week the keyboard crosses, and a swish when a zoom lands or resets.
disabled: boolean; default false; Shows the numbers but refuses period, metric, breakdown and zoom changes.
className: string; default —; Classes for the outer panel.

Prop	Type	Default	Description
range / defaultRange	"7d" \| "30d" \| "90d" \| "1y"	"30d"	The period: the last 7, 30 or 90 days, or the last year, up to now. Changing it glides the chart's window, so it zooms out or in. Controlled or uncontrolled.
onRangeChange	(range: "7d" \| "30d" \| "90d" \| "1y") => void	—	Fires from the period switch with the new period.
smooth	number	0.6	How much the chart's line curves, 0 to 1: straight segments at 0, monotone curves at 1 that never overshoot a reading.
donut / defaultDonut	string	"channel"	Which breakdown the donut splits revenue by (an id from breakdowns). A new breakdown sweeps its ring in clockwise. Controlled or uncontrolled.
onDonutChange	(id: string) => void	—	Fires from the breakdown switch with the new breakdown's id.
metric / defaultMetric	string	the first metric	The tile the chart draws. A new metric grows out of the old one's shape. Controlled or uncontrolled.
onMetricChange	(id: string) => void	—	Fires from the tile press or arrow key that chose a metric.
onWindowChange	(window: { from: string; to: string; custom: boolean }) => void	—	Fires whenever the window changes — a period, a zoom or a reset — with both dates included, as YYYY-MM-DD.
metrics	PulseMetric[]	defaultPulseMetrics	The tiles in order (four fit a row): id, label, kind (money, count or percent as a fraction), aggregate (sum or mean), goodWhen (up or down) and one value per day, oldest first. The default is 730 seeded days of a small store.
breakdowns	PulseBreakdown[]	defaultPulseBreakdowns	The donut's splits of revenue: each an id, a label and segments with a daily series aligned with the metrics and an optional colour.
now	number \| Date	defaultPulseNow	The date of the last value in every series. Dates are counted back from it.
locale	string	"en-US"	The locale for numbers and money.
currency	string	"USD"	The currency for money metrics.
format	(value: number, kind: "money" \| "count" \| "percent") => string	—	Formats a value for the tiles, the chart's readout and the spoken sentences. Defaults to whole currency, grouped counts and percentages to two places.
status	"ready" \| "loading" \| "error"	"ready"	Whether the numbers have arrived: loading shows the dashboard's skeleton, error a retry.
onRetry	() => void	—	Try again was pressed after the numbers failed to load.
title	string	"Pulse"	The dashboard's heading.
subtitle	string	—	A quieter line under the heading, before the window's dates.
label	string	—	The dashboard's accessible name. Defaults to the title.
sound	boolean	false	Play a tick for a period, tile or slice chosen and each week the keyboard crosses, and a swish when a zoom lands or resets.
disabled	boolean	false	Shows the numbers but refuses period, metric, breakdown and zoom changes.
className	string	—	Classes for the outer panel.