@voila.dev/ui-chart 1.1.9

package/package.json

@@ -0,0 +1,57 @@
+{
+	"name": "@voila.dev/ui-chart",
+	"version": "1.1.9",
+	"type": "module",
+	"description": "Charts with zero charting library. SVG you can read, scales included.",
+	"license": "MIT",
+	"homepage": "https://ui.voila.dev",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/voila-voila-dev/ui.git",
+		"directory": "packages/ui-chart"
+	},
+	"keywords": [
+		"react",
+		"charts",
+		"svg",
+		"dataviz",
+		"tailwindcss"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"src",
+		"!src/**/*.test.ts",
+		"!src/**/*.test.tsx",
+		"!src/**/*.stories.ts",
+		"!src/**/*.stories.tsx"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"exports": {
+		"./styles.css": "./src/styles.css",
+		"./components/*": "./src/components/*.tsx",
+		"./core/*": "./src/core/*.ts",
+		"./hooks/*": "./src/hooks/*.ts"
+	},
+	"imports": {
+		"#/*": "./src/*"
+	},
+	"scripts": {
+		"check": "biome check",
+		"check-types": "tsc --noEmit",
+		"format": "biome format",
+		"lint": "biome lint",
+		"test": "vitest run"
+	},
+	"dependencies": {
+		"@voila.dev/ui": "0.0.0"
+	},
+	"peerDependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"tailwindcss": "^4.0.0"
+	}
+}

package/src/components/chart-area.tsx

@@ -0,0 +1,124 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+import type * as React from "react";
+
+import { useChartContext } from "#/context/chart-context.tsx";
+import { seriesColor } from "#/core/config.ts";
+import { areaPath, linePath } from "#/core/geometry.ts";
+import { seriesPoints, stackBases } from "#/core/series.ts";
+import type { ChartCurve } from "#/core/types.ts";
+
+/**
+ * A filled band under each series, with the same outline the line mark would
+ * draw. Stacked areas sit on the running total of the series below them, so the
+ * top edge reads as the total rather than as the last series.
+ */
+
+export interface ChartAreaProps extends React.ComponentProps<"g"> {
+	readonly keys?: ReadonlyArray<string>;
+	readonly curve?: ChartCurve;
+	readonly stacked?: boolean;
+	readonly fillOpacity?: number;
+	readonly strokeWidth?: number;
+	/** Fade the fill towards the baseline instead of filling flat. */
+	readonly gradient?: boolean;
+}
+
+function ChartArea({
+	className,
+	keys,
+	curve = "monotone",
+	stacked,
+	fillOpacity = 0.25,
+	strokeWidth = 2,
+	gradient = true,
+	...props
+}: ChartAreaProps) {
+	const {
+		chartId,
+		data,
+		categories,
+		categoryScale,
+		valueScale,
+		orientation,
+		valueKeys,
+		config,
+		value,
+	} = useChartContext();
+
+	const drawnKeys = keys ?? valueKeys;
+	const isStacked = stacked ?? value?.stacked ?? false;
+	const bases = isStacked ? stackBases(data, drawnKeys) : undefined;
+	const baseline = valueScale.scale(valueScale.domain[0]);
+
+	return (
+		<g data-slot="chart-area" className={cn(className)} {...props}>
+			{drawnKeys.map((key, seriesIndex) => {
+				const base = bases?.get(key);
+				const points = seriesPoints({
+					data,
+					categories,
+					categoryScale,
+					valueScale,
+					orientation,
+					key,
+					base,
+				});
+				const color = seriesColor(config, key, seriesIndex);
+				const gradientId = `${chartId}-fill-${key}`;
+				// A stacked band closes onto the series below it rather than onto the
+				// baseline, so its lower edge is the same curve run backwards. The
+				// empty key contributes nothing, leaving just the running total.
+				const lowerPoints = base
+					? seriesPoints({
+							data,
+							categories,
+							categoryScale,
+							valueScale,
+							orientation,
+							key: "",
+							base,
+						})
+					: undefined;
+				return (
+					<g key={key} data-slot="chart-area-series" data-series={key}>
+						{gradient ? (
+							<defs>
+								<linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+									<stop offset="5%" stopColor={color} stopOpacity={0.7} />
+									<stop offset="95%" stopColor={color} stopOpacity={0.05} />
+								</linearGradient>
+							</defs>
+						) : null}
+						<path
+							data-slot="chart-area-path"
+							data-chart-animate=""
+							d={
+								lowerPoints === undefined
+									? areaPath(points, baseline, curve)
+									: `${linePath(points, curve)}${linePath(
+											[...lowerPoints].reverse(),
+											curve,
+										).replace(/^M/, "L")}Z`
+							}
+							fill={gradient ? `url(#${gradientId})` : color}
+							fillOpacity={gradient ? 1 : fillOpacity}
+							stroke="none"
+						/>
+						<path
+							data-slot="chart-area-line"
+							data-chart-animate=""
+							d={linePath(points, curve)}
+							fill="none"
+							stroke={color}
+							strokeWidth={strokeWidth}
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						/>
+					</g>
+				);
+			})}
+		</g>
+	);
+}
+
+export { ChartArea };

package/src/components/chart-bars.tsx

@@ -0,0 +1,105 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+import type * as React from "react";
+
+import { useChartContext } from "#/context/chart-context.tsx";
+import { barRects } from "#/core/bars.ts";
+import { seriesColor } from "#/core/config.ts";
+import { roundedBarPath } from "#/core/geometry.ts";
+
+/**
+ * The bar mark. Grouped by default, stacked on request, and upright or on its
+ * side depending on the root's orientation — one component rather than three,
+ * because the only thing that changes between them is where the geometry lands.
+ */
+
+export interface ChartBarsProps
+	extends Omit<React.ComponentProps<"g">, "fill"> {
+	/** Series to draw. Defaults to the root's value keys. */
+	readonly keys?: ReadonlyArray<string>;
+	readonly stacked?: boolean;
+	readonly radius?: number;
+	/** Pixels between two bars of the same category. */
+	readonly gap?: number;
+	/** Per-datum fill, for charts coloured by row rather than by series. */
+	readonly fill?: (datum: Record<string, unknown>, index: number) => string;
+}
+
+/** Milliseconds each bar waits behind the one before it, on entry. */
+const STAGGER_MS = 24;
+
+function ChartBars({
+	className,
+	keys,
+	stacked,
+	radius = 4,
+	gap,
+	fill,
+	...props
+}: ChartBarsProps) {
+	const {
+		data,
+		categories,
+		categoryScale,
+		valueScale,
+		orientation,
+		valueKeys,
+		config,
+		active,
+		value,
+	} = useChartContext();
+
+	const drawnKeys = keys ?? valueKeys;
+	const rects = barRects({
+		data,
+		keys: drawnKeys,
+		categories,
+		categoryScale,
+		valueScale,
+		orientation,
+		stacked: stacked ?? value?.stacked ?? false,
+		radius,
+		gap,
+	});
+
+	return (
+		<g data-slot="chart-bars" className={cn(className)} {...props}>
+			{rects.map((rect) => {
+				const path = roundedBarPath(rect);
+				if (path === "") {
+					return null;
+				}
+				// Dimming the rest is how the active bar stands out; with nothing
+				// active every bar is at full strength.
+				const state =
+					active === null
+						? "idle"
+						: active.index === rect.index
+							? "active"
+							: "muted";
+				return (
+					<path
+						key={`${rect.key}-${rect.index}`}
+						data-slot="chart-bar"
+						data-series={rect.key}
+						data-index={rect.index}
+						data-state={state}
+						data-chart-animate=""
+						d={path}
+						fill={
+							fill?.(data[rect.index] ?? {}, rect.index) ??
+							seriesColor(config, rect.key, drawnKeys.indexOf(rect.key))
+						}
+						className="transition-opacity duration-150 data-[state=muted]:opacity-50"
+						style={
+							{
+								"--chart-enter-delay": `${rect.index * STAGGER_MS}ms`,
+							} as React.CSSProperties
+						}
+					/>
+				);
+			})}
+		</g>
+	);
+}
+
+export { ChartBars };

package/src/components/chart-cursor.tsx

@@ -0,0 +1,105 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+import type * as React from "react";
+
+import { useChartContext } from "#/context/chart-context.tsx";
+import type { ChartOrientation } from "#/core/types.ts";
+
+/**
+ * The mark under the reader's finger: a shaded band over the whole category on
+ * a bar chart, a single line through it on a line chart. Drawn behind the marks
+ * if you place it before them, which is usually what you want.
+ */
+
+export interface ChartCursorProps extends React.ComponentProps<"g"> {
+	readonly variant?: "band" | "line";
+}
+
+/** Where the cursor sits and how far it reaches, in plotting-area pixels. */
+interface CursorGeometry {
+	readonly offset: number;
+	readonly thickness: number;
+	readonly innerWidth: number;
+	readonly innerHeight: number;
+	readonly orientation: ChartOrientation;
+}
+
+function CursorBand({
+	geometry,
+	className,
+}: {
+	readonly geometry: CursorGeometry;
+	readonly className: string | undefined;
+}) {
+	const isVertical = geometry.orientation === "vertical";
+	return (
+		<rect
+			x={isVertical ? geometry.offset : 0}
+			y={isVertical ? 0 : geometry.offset}
+			width={isVertical ? geometry.thickness : geometry.innerWidth}
+			height={isVertical ? geometry.innerHeight : geometry.thickness}
+			className={cn("fill-muted/60", className)}
+		/>
+	);
+}
+
+function CursorLine({
+	geometry,
+	className,
+}: {
+	readonly geometry: CursorGeometry;
+	readonly className: string | undefined;
+}) {
+	const isVertical = geometry.orientation === "vertical";
+	return (
+		<line
+			x1={isVertical ? geometry.offset : 0}
+			x2={isVertical ? geometry.offset : geometry.innerWidth}
+			y1={isVertical ? 0 : geometry.offset}
+			y2={isVertical ? geometry.innerHeight : geometry.offset}
+			strokeDasharray="4 4"
+			className={cn("stroke-border", className)}
+		/>
+	);
+}
+
+function ChartCursor({ className, variant, ...props }: ChartCursorProps) {
+	const {
+		active,
+		categories,
+		categoryScale,
+		orientation,
+		innerWidth,
+		innerHeight,
+	} = useChartContext();
+
+	const category = active === null ? undefined : categories[active.index];
+	if (category === undefined) {
+		return null;
+	}
+
+	// A band scale has slots wide enough to shade; a point scale does not, so it
+	// gets a line through the point instead.
+	const shape = variant ?? (categoryScale.kind === "band" ? "band" : "line");
+	const geometry: CursorGeometry = {
+		offset:
+			shape === "band"
+				? categoryScale.scale(category)
+				: categoryScale.center(category),
+		thickness: shape === "band" ? categoryScale.bandwidth : 0,
+		innerWidth,
+		innerHeight,
+		orientation,
+	};
+
+	return (
+		<g data-slot="chart-cursor" data-variant={shape} {...props}>
+			{shape === "band" ? (
+				<CursorBand geometry={geometry} className={className} />
+			) : (
+				<CursorLine geometry={geometry} className={className} />
+			)}
+		</g>
+	);
+}
+
+export { ChartCursor };

package/src/components/chart-data-table.tsx

@@ -0,0 +1,55 @@
+import { readNumber } from "#/core/chart-model.ts";
+import { type ChartConfig, seriesLabelText } from "#/core/config.ts";
+import { formatTickValue } from "#/core/format.ts";
+import type { ChartDatum } from "#/core/types.ts";
+
+/**
+ * The chart's content, as a table, for anyone who cannot read the picture.
+ * Visually hidden but present in the accessibility tree, so a screen reader
+ * gets the actual numbers rather than a one-line summary of them.
+ */
+export function ChartDataTable({
+	caption,
+	categoryLabel,
+	categories,
+	valueKeys,
+	data,
+	config,
+}: {
+	readonly caption: string;
+	readonly categoryLabel: string;
+	readonly categories: ReadonlyArray<string>;
+	readonly valueKeys: ReadonlyArray<string>;
+	readonly data: ReadonlyArray<ChartDatum>;
+	readonly config: ChartConfig;
+}) {
+	if (data.length === 0 || valueKeys.length === 0) {
+		return null;
+	}
+
+	return (
+		<table data-slot="chart-data-table" className="sr-only">
+			<caption>{caption}</caption>
+			<thead>
+				<tr>
+					<th scope="col">{categoryLabel}</th>
+					{valueKeys.map((key) => (
+						<th key={key} scope="col">
+							{seriesLabelText(config, key)}
+						</th>
+					))}
+				</tr>
+			</thead>
+			<tbody>
+				{data.map((datum, index) => (
+					<tr key={`${categories[index]}-${index}`}>
+						<th scope="row">{categories[index]}</th>
+						{valueKeys.map((key) => (
+							<td key={key}>{formatTickValue(readNumber(datum, key))}</td>
+						))}
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+}

package/src/components/chart-empty.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+import type * as React from "react";
+
+/**
+ * Rendered in place of a chart when there is no data. Defaults to the root's
+ * aspect-video box — size it like the chart it stands in for. Pass localized
+ * content as children (plain text, or an `Empty` block).
+ */
+function ChartEmpty({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="chart-empty"
+			className={cn(
+				"flex aspect-video w-full flex-col items-center justify-center gap-1 rounded-lg border border-dashed text-balance text-muted-foreground text-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { ChartEmpty };

package/src/components/chart-grid.tsx

@@ -0,0 +1,81 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+import type * as React from "react";
+
+import { useChartContext } from "#/context/chart-context.tsx";
+
+/**
+ * Reference lines behind the marks. `horizontal` and `vertical` name the
+ * direction the lines run, not the axis they come from, so a vertical bar chart
+ * with `horizontal` grid lines reads the way it looks.
+ */
+
+export interface ChartGridProps extends React.ComponentProps<"g"> {
+	readonly horizontal?: boolean;
+	readonly vertical?: boolean;
+	readonly tickCount?: number;
+	/** Dash pattern for the lines. Pass `undefined` for solid. */
+	readonly strokeDasharray?: string;
+}
+
+function ChartGrid({
+	className,
+	horizontal = true,
+	vertical = false,
+	tickCount = 5,
+	strokeDasharray = "3 3",
+	...props
+}: ChartGridProps) {
+	const { categoryScale, valueScale, orientation, innerWidth, innerHeight } =
+		useChartContext();
+	const isVertical = orientation === "vertical";
+
+	// The value axis contributes evenly spaced lines; the category axis
+	// contributes one line per slot centre.
+	const valueOffsets = valueScale
+		.ticks(tickCount)
+		.map((tick) => valueScale.scale(tick));
+	const categoryOffsets = categoryScale.domain.map((category) =>
+		categoryScale.center(category),
+	);
+
+	const horizontalOffsets = isVertical ? valueOffsets : categoryOffsets;
+	const verticalOffsets = isVertical ? categoryOffsets : valueOffsets;
+
+	return (
+		<g
+			data-slot="chart-grid"
+			className={cn("stroke-border/60", className)}
+			strokeDasharray={strokeDasharray}
+			{...props}
+		>
+			{horizontal
+				? horizontalOffsets.map((offset) => (
+						<line
+							key={`horizontal-${offset}`}
+							data-slot="chart-grid-line"
+							data-direction="horizontal"
+							x1={0}
+							x2={innerWidth}
+							y1={offset}
+							y2={offset}
+						/>
+					))
+				: null}
+			{vertical
+				? verticalOffsets.map((offset) => (
+						<line
+							key={`vertical-${offset}`}
+							data-slot="chart-grid-line"
+							data-direction="vertical"
+							x1={offset}
+							x2={offset}
+							y1={0}
+							y2={innerHeight}
+						/>
+					))
+				: null}
+		</g>
+	);
+}
+
+export { ChartGrid };