KQ-1726 · CHART/RECIPE

Chart Recipe

A report wizard whose preview is a record of the choices: four steps — Source, Chart, Filters, Notes — sit beside a chart that builds one layer per step. Choosing a source sweeps the axes in through a clip, the chart type draws its series on through a sweeping clip (bars grow on springs.glide a cascade apart), filters thin the series they leave out and crop the window while every point glides to the new scale on glide, and notes land last, the peak pin on springs.recoil. Back peels the layers off in reverse, newest first, a beat apart, and going forward lays them down again; a slow source shows a layer skeleton. The step rail is a tablist that follows the arrow keys, sources and chart types are native radio groups, and filters and notes are native checkboxes.

KQ-1726 · CHART/RECIPE

step 2 of 4 · chart · pump pressure · line

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/chart-recipe

Props

sources: RecipeSource[]; default defaultRecipeSources; The data sources: { id, label, unit, note, x, series?, target? }. A source without inline series is fetched through loadSource.
chartTypes: RecipeChartType[]; default defaultRecipeChartTypes; The chart types offered: { id: "line" | "area" | "bars" | "steps", label, note }.
filters: RecipeFilter[]; default defaultRecipeFilters; Series toggles on the Filters step: { id, label }, ids matching the sources' series. Unchecked series are thinned to a ghost, not removed.
windows: RecipeWindow[]; default defaultRecipeWindows; Time windows on the Filters step, each the last N points: { id, label, points }.
annotations: RecipeAnnotation[]; default defaultRecipeAnnotations; Notes on the last step: { id: "peak" | "average" | "target" | "last", label, note }.
value / defaultValue: ChartRecipeValue; default — / nothing chosen; The recipe, controlled or initial: { source, chartType, series, window, annotations, name }. A partial defaultValue fills the rest with defaults.
onValueChange: (value: ChartRecipeValue) => void; default —; Fires from the choice that changed the recipe.
step / defaultStep: number; default — / 0; The open step, 0 to 3, controlled or initial.
onStepChange: (step: number, id: "source" | "chart" | "filters" | "notes") => void; default —; Fires from the tab, arrow key, Next or Back that changed the step.
loadSource: (source: RecipeSource) => RecipeSeries[] | Promise<RecipeSeries[]>; default —; Fetches the series of a source that has none inline; the preview shows a layer skeleton until it answers, and a rejection offers Retry.
onCreate: (recipe: ChartRecipeResult) => void; default —; Create report was pressed on the last step, with the whole recipe.
onCancel: () => void; default —; Cancel was pressed on the first step.
previewStyle: "paper" | "grid" | "blueprint"; default "paper"; The preview's paper: a clean card, dotted graph paper, or a tinted blueprint with fine rules.
density: "compact" | "cozy" | "roomy"; default "cozy"; Option heights and spacing.
palette: "cobalt" | "earth" | "mono" | "spectrum"; default "cobalt"; The series colours, derived from the theme tokens so both themes read.
title: string; default "New report"; The wizard's heading.
subtitle: string; default "Gaugeworks · Harbour line"; One line under the heading.
status: "ready" | "loading" | "error"; default "ready"; Whether the sources have loaded: loading shows skeleton rows, error a message with Try again.
onReload: () => void; default —; Try again was pressed after the sources failed to load.
disabled: boolean; default false; Read-only: choices and steps are locked.
className: string; default —; Classes for the outer container.

Prop	Type	Default	Description
sources	RecipeSource[]	defaultRecipeSources	The data sources: { id, label, unit, note, x, series?, target? }. A source without inline series is fetched through loadSource.
chartTypes	RecipeChartType[]	defaultRecipeChartTypes	The chart types offered: { id: "line" \| "area" \| "bars" \| "steps", label, note }.
filters	RecipeFilter[]	defaultRecipeFilters	Series toggles on the Filters step: { id, label }, ids matching the sources' series. Unchecked series are thinned to a ghost, not removed.
windows	RecipeWindow[]	defaultRecipeWindows	Time windows on the Filters step, each the last N points: { id, label, points }.
annotations	RecipeAnnotation[]	defaultRecipeAnnotations	Notes on the last step: { id: "peak" \| "average" \| "target" \| "last", label, note }.
value / defaultValue	ChartRecipeValue	— / nothing chosen	The recipe, controlled or initial: { source, chartType, series, window, annotations, name }. A partial defaultValue fills the rest with defaults.
onValueChange	(value: ChartRecipeValue) => void	—	Fires from the choice that changed the recipe.
step / defaultStep	number	— / 0	The open step, 0 to 3, controlled or initial.
onStepChange	(step: number, id: "source" \| "chart" \| "filters" \| "notes") => void	—	Fires from the tab, arrow key, Next or Back that changed the step.
loadSource	(source: RecipeSource) => RecipeSeries[] \| Promise<RecipeSeries[]>	—	Fetches the series of a source that has none inline; the preview shows a layer skeleton until it answers, and a rejection offers Retry.
onCreate	(recipe: ChartRecipeResult) => void	—	Create report was pressed on the last step, with the whole recipe.
onCancel	() => void	—	Cancel was pressed on the first step.
previewStyle	"paper" \| "grid" \| "blueprint"	"paper"	The preview's paper: a clean card, dotted graph paper, or a tinted blueprint with fine rules.
density	"compact" \| "cozy" \| "roomy"	"cozy"	Option heights and spacing.
palette	"cobalt" \| "earth" \| "mono" \| "spectrum"	"cobalt"	The series colours, derived from the theme tokens so both themes read.
title	string	"New report"	The wizard's heading.
subtitle	string	"Gaugeworks · Harbour line"	One line under the heading.
status	"ready" \| "loading" \| "error"	"ready"	Whether the sources have loaded: loading shows skeleton rows, error a message with Try again.
onReload	() => void	—	Try again was pressed after the sources failed to load.
disabled	boolean	false	Read-only: choices and steps are locked.
className	string	—	Classes for the outer container.