@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/line-chart/line-chart.d.ts

@@ -0,0 +1,76 @@
+//#region src/line-chart/line-chart.d.ts
+/**
+ * LineChart: one or more measures over time, when the shape of the trend
+ * matters more than any single value.
+ *
+ * The lines draw left to right the first time the chart is seen. New data
+ * morphs every line from the shape on screen, and the value axis slides to its
+ * new range while gridlines fade in and out. Hiding a series flattens it into
+ * the baseline as it fades and the rest rescale. Hover, drag or the arrow keys
+ * scrub: a crosshair glides between points with a dot on each line and a
+ * tooltip that follows on its own spring and flips before it leaves the plot.
+ * `loading` keeps the current lines on screen, dimmed and breathing.
+ *
+ * Plain SVG and CSS; one small spring tween drives the shapes, the scale and
+ * the crosshair. A visually hidden table carries every value for assistive
+ * technology, and the plot itself is a slider.
+ */
+export interface LineChartSeries {
+  /** Stable identity. A series keeps its line across data changes, so switching ranges morphs it. */
+  key: string;
+  /** Name in the legend, the tooltip and the data table. */
+  label: string;
+  /** Any CSS colour. Defaults to chart-1 for the first series, then quieter neutral steps. */
+  color?: string;
+  /** A dashed stroke, for a previous period or a target. */
+  dashed?: boolean;
+  /** A faint fill under the line. Defaults to true for the first series. */
+  area?: boolean;
+}
+export interface LineChartDatum {
+  /** Stable identity, such as an ISO date. */
+  key: string;
+  /** Full label for the tooltip and screen readers, such as "Tue, Sep 15". */
+  label: string;
+  /** Short label on the x axis. Leave it out to keep the axis quiet at that point. */
+  axisLabel?: string;
+  /** One value per series key. A missing value counts as zero. */
+  values: Record<string, number | undefined>;
+}
+export interface LineChartProps {
+  data: LineChartDatum[];
+  series: LineChartSeries[];
+  /** What is measured, such as "Signups". Names the chart for assistive technology. */
+  label: string;
+  /** Unit after each value in the tooltip, such as "ms". */
+  unit?: string;
+  /** Plot height in pixels. The width follows the container. @default 220 */
+  height?: number;
+  /** Formats values in the tooltip and data table. */
+  formatValue?: (value: number, series: LineChartSeries) => string;
+  /** Formats the value axis. Defaults to a compact number, such as 1.2K. */
+  formatTick?: (value: number) => string;
+  /** Controlled hidden series keys. */
+  hiddenSeries?: string[];
+  defaultHiddenSeries?: string[];
+  onHiddenSeriesChange?: (hidden: string[]) => void;
+  /** Called as the crosshair moves, and with null when it leaves. */
+  onActiveChange?: (index: number | null, datum: LineChartDatum | null) => void;
+  /** Keeps the current lines on screen, dimmed, while the next range loads. */
+  loading?: boolean;
+  /** Shown when there are no points. @default "No data for this range" */
+  emptyLabel?: string;
+  /** Series toggles above the plot. Shown by default when there is more than one series. */
+  legend?: boolean;
+  /** Header of the first column in the data table read by screen readers. @default "Date" */
+  categoryLabel?: string;
+  /** Smooth monotone curves that never swing past the data, or straight segments. @default "smooth" */
+  curve?: "smooth" | "linear";
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+/** The first draw: 480ms x 1.75, slow at both ends. */
+export declare const LINE_CHART_DRAW_MS = 840;
+export declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=line-chart.d.ts.map

package/dist/line-chart/line-chart.js

@@ -0,0 +1,611 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SMOOTH, SNAPPY, tween } from "../lib/spring-tween.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/line-chart/line-chart.tsx
+/** Room above the top gridline, and the gap between the crosshair and its tooltip. */
+const TOP = 12;
+const GAP = 14;
+/** The first draw: 480ms x 1.75, slow at both ends. */
+const LINE_CHART_DRAW_MS = 840;
+const PALETTE = [
+	"var(--color-chart-1)",
+	"color-mix(in oklab, var(--color-foreground) 46%, var(--color-surface))",
+	"color-mix(in oklab, var(--color-foreground) 26%, var(--color-surface))"
+];
+const GROUPED = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+const COMPACT = new Intl.NumberFormat("en-US", {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+const GRID = Array.from({ length: 241 }, (_, index) => index / 240);
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const colorOf = (line, index) => line.color ?? PALETTE[Math.min(index, PALETTE.length - 1)];
+const clean = (value) => Number(value.toPrecision(12));
+/** Clean gridlines: the smallest step of 1, 2, 2.5 or 5 that covers the data in four rows or fewer, from zero unless the data dips below it. */
+function niceScale(low, high) {
+	const lo = Math.min(0, low);
+	const hi = Math.max(high, lo + 1);
+	const magnitude = 10 ** Math.floor(Math.log10((hi - lo) / 4));
+	for (const factor of [
+		1,
+		2,
+		2.5,
+		5,
+		10
+	]) {
+		const step = factor * magnitude;
+		const bottom = Math.floor(lo / step) * step;
+		const top = Math.ceil(hi / step) * step;
+		if ((top - bottom) / step <= 4 + 1e-9) {
+			const ticks = [];
+			for (let value = bottom; value <= top + step / 2; value += step) ticks.push(clean(value));
+			return {
+				min: clean(bottom),
+				max: clean(top),
+				ticks
+			};
+		}
+	}
+	return {
+		min: lo,
+		max: hi,
+		ticks: [lo, hi]
+	};
+}
+/** The line through every value, sampled densely on x from 0 to 1 in data units. Monotone tangents keep a smooth curve from swinging past the data. */
+function curveFor(values, smooth) {
+	if (values.length === 0) return [];
+	if (values.length === 1) return [[0, values[0]], [1, values[0]]];
+	const last = values.length - 1;
+	const step = 1 / last;
+	if (!smooth) return values.map((value, index) => [index * step, value]);
+	const slopes = values.slice(1).map((value, index) => (value - values[index]) / step);
+	const tangents = values.map((_, index) => index === 0 || index === last ? 0 : (Math.sign(slopes[index - 1]) + Math.sign(slopes[index])) * Math.min(Math.abs(slopes[index - 1]), Math.abs(slopes[index]), Math.abs(slopes[index - 1] + slopes[index]) / 4) || 0);
+	if (last > 1) {
+		tangents[0] = (3 * slopes[0] - tangents[1]) / 2;
+		tangents[last] = (3 * slopes[last - 1] - tangents[last - 1]) / 2;
+	} else {
+		tangents[0] = slopes[0];
+		tangents[1] = slopes[0];
+	}
+	const samples = Math.max(1, Math.min(16, Math.round(192 / last)));
+	const points = [];
+	for (let index = 0; index < last; index++) {
+		const low = Math.min(values[index], values[index + 1]);
+		const high = Math.max(values[index], values[index + 1]);
+		for (let sample = 0; sample < samples; sample++) {
+			const t = sample / samples;
+			const t2 = t * t;
+			const t3 = t2 * t;
+			const value = (2 * t3 - 3 * t2 + 1) * values[index] + (t3 - 2 * t2 + t) * step * tangents[index] + (3 * t2 - 2 * t3) * values[index + 1] + (t3 - t2) * step * tangents[index + 1];
+			points.push([(index + t) * step, clamp(value, low, high)]);
+		}
+	}
+	points.push([1, values[last]]);
+	return points;
+}
+/** Value of a sampled line at x, straight between samples. */
+function valueAt(shape, x) {
+	if (!shape.length) return 0;
+	let low = 0;
+	let high = shape.length - 1;
+	if (x <= shape[low][0]) return shape[low][1];
+	if (x >= shape[high][0]) return shape[high][1];
+	while (high - low > 1) {
+		const middle = low + high >> 1;
+		if (shape[middle][0] < x) low = middle;
+		else high = middle;
+	}
+	const [x0, y0] = shape[low];
+	const [x1, y1] = shape[high];
+	return x1 === x0 ? y1 : y0 + (y1 - y0) * (x - x0) / (x1 - x0);
+}
+/** Axis labels that fit: at most one per 76 pixels, counted back from the latest so the newest always shows. */
+function axisPicks(data, width) {
+	const labeled = data.flatMap((item, index) => item.axisLabel ? [index] : []);
+	if (!width || !labeled.length) return [];
+	const room = Math.max(2, Math.floor(width / 76));
+	const stride = Math.ceil(labeled.length / room);
+	return labeled.reverse().filter((_, rank) => rank % stride === 0).reverse();
+}
+const LineChart = forwardRef(function LineChart({ data, series, label, unit = "", height = 220, formatValue, formatTick = (value) => COMPACT.format(value), hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, onActiveChange, loading = false, emptyLabel = "No data for this range", legend, categoryLabel = "Date", curve = "smooth", className }, ref) {
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const plot = useRef(null);
+	const svg = useRef(null);
+	const tip = useRef(null);
+	const gutter = useRef(null);
+	const uid = `line${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const last = data.length - 1;
+	const empty = data.length === 0;
+	const [ownHidden, setOwnHidden] = useState(defaultHiddenSeries ?? []);
+	const hidden = hiddenSeries ?? ownHidden;
+	const toggle = (key) => {
+		const next = hidden.includes(key) ? hidden.filter((item) => item !== key) : [...hidden, key];
+		if (hiddenSeries === void 0) setOwnHidden(next);
+		onHiddenSeriesChange?.(next);
+	};
+	const visible = series.filter((line) => !hidden.includes(line.key));
+	const showLegend = legend ?? series.length > 1;
+	const signature = `${curve}|${series.map((line) => line.key).join(",")}|${data.map((item) => `${item.key}:${series.map((line) => item.values[line.key] ?? 0).join(",")}`).join(";")}`;
+	const targets = useMemo(() => new Map(series.map((line) => [line.key, curveFor(data.map((item) => item.values[line.key] ?? 0), curve === "smooth")])), [signature]);
+	let low = Infinity;
+	let high = -Infinity;
+	for (const line of visible) for (const item of data) {
+		const value = item.values[line.key] ?? 0;
+		low = Math.min(low, value);
+		high = Math.max(high, value);
+	}
+	const range = Number.isFinite(low) ? niceScale(low, high) : null;
+	const [steady, setSteady] = useState(() => range ?? niceScale(0, 100));
+	if (range && (range.min !== steady.min || range.max !== steady.max)) setSteady(range);
+	const [active, setActive] = useState(null);
+	const [seen, setSeen] = useState(signature);
+	if (seen !== signature) {
+		setSeen(signature);
+		setActive(null);
+	}
+	const index = active === null || empty ? null : Math.min(active, last);
+	const scrubbing = index !== null;
+	const width = useRef(0);
+	const [plotWidth, setPlotWidth] = useState(0);
+	const [drawn, setDrawn] = useState(false);
+	const tracks = useRef(/* @__PURE__ */ new Map());
+	const scale = useRef({
+		min: steady.min,
+		max: steady.max
+	});
+	const cursor = useRef(1);
+	const live = useRef({
+		series,
+		hidden
+	});
+	useIsomorphicLayoutEffect(() => {
+		live.current = {
+			series,
+			hidden
+		};
+	});
+	/** One writer for every drawn attribute: morphs, toggles, the scale, the crosshair and the size all repaint through here. */
+	const paint = useCallback(() => {
+		const w = width.current;
+		const root = svg.current;
+		if (!w || !root) return;
+		const lo = scale.current.min;
+		const span = scale.current.max - lo || 1;
+		const toY = (value) => TOP + (1 - (value - lo) / span) * (height - TOP);
+		const at = cursor.current;
+		const dotYs = [];
+		for (const line of live.current.series) {
+			const track = tracks.current.get(line.key);
+			if (!track) continue;
+			const p = track.presence;
+			const y = (value) => toY(lo + (value - lo) * p);
+			const path = track.shape.length ? `M${track.shape.map(([x, value]) => `${(x * w).toFixed(1)},${y(value).toFixed(1)}`).join("L")}` : "";
+			const group = root.querySelector(`[data-series="${CSS.escape(line.key)}"]`);
+			group?.querySelector("[data-part=line]")?.setAttribute("d", path);
+			group?.querySelector("[data-part=area]")?.setAttribute("d", path ? `${path}L${w},${height}L0,${height}Z` : "");
+			if (group) group.style.opacity = String(p);
+			const dot = root.querySelector(`[data-dot="${CSS.escape(line.key)}"]`);
+			if (dot && track.shape.length) {
+				const cy = y(valueAt(track.shape, at));
+				dot.setAttribute("cx", (at * w).toFixed(1));
+				dot.setAttribute("cy", cy.toFixed(1));
+				if (p > .5) dotYs.push(cy);
+			}
+		}
+		for (const node of root.querySelectorAll("[data-grid]")) {
+			const yy = String(Math.round(toY(Number(node.dataset.grid))) + .5);
+			node.setAttribute("y1", yy);
+			node.setAttribute("y2", yy);
+		}
+		for (const node of gutter.current?.querySelectorAll("[data-tick]") ?? []) node.style.translate = `0 ${Math.round(toY(Number(node.dataset.tick)))}px`;
+		const cx = Math.round(at * w) + .5;
+		const cross = root.querySelector("[data-part=crosshair]");
+		cross?.setAttribute("x1", String(cx));
+		cross?.setAttribute("x2", String(cx));
+		const bubble = tip.current;
+		if (bubble) {
+			const tw = bubble.offsetWidth;
+			const th = bubble.offsetHeight;
+			let x = cx + GAP;
+			if (x + tw > w) x = cx - GAP - tw;
+			const middle = dotYs.length ? dotYs.reduce((sum, value) => sum + value, 0) / dotYs.length : height / 2;
+			bubble.style.translate = `${clamp(x, 0, Math.max(0, w - tw))}px ${clamp(middle - th / 2, 0, Math.max(0, height - th))}px`;
+		}
+	}, [height]);
+	useIsomorphicLayoutEffect(() => {
+		const node = plot.current;
+		if (!node) return;
+		const read = () => {
+			width.current = node.clientWidth;
+			setPlotWidth(node.clientWidth);
+			paint();
+		};
+		read();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(read);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [paint]);
+	useIsomorphicLayoutEffect(paint);
+	useEffect(() => {
+		const moves = [];
+		for (const [key, target] of targets) {
+			const track = tracks.current.get(key);
+			if (!track) {
+				tracks.current.set(key, {
+					shape: target,
+					presence: live.current.hidden.includes(key) ? 0 : 1,
+					stop: null
+				});
+				continue;
+			}
+			if (!track.shape.length || !target.length) {
+				track.shape = target;
+				continue;
+			}
+			const xs = [.../* @__PURE__ */ new Set([...GRID, ...target.map(([x]) => x)])].sort((a, b) => a - b);
+			moves.push({
+				track,
+				xs,
+				from: xs.map((x) => valueAt(track.shape, x)),
+				to: xs.map((x) => valueAt(target, x)),
+				target
+			});
+		}
+		if (!moves.length) {
+			paint();
+			return;
+		}
+		return tween(SMOOTH, (p) => {
+			for (const move of moves) move.track.shape = move.xs.map((x, at) => [x, move.from[at] + (move.to[at] - move.from[at]) * p]);
+			paint();
+		}, () => {
+			for (const move of moves) move.track.shape = move.target;
+			paint();
+		});
+	}, [paint, targets]);
+	const hiddenKey = hidden.join("|");
+	useEffect(() => {
+		for (const [key, track] of tracks.current) {
+			const to = hidden.includes(key) ? 0 : 1;
+			if (track.presence === to) continue;
+			track.stop?.();
+			const from = track.presence;
+			track.stop = tween(SMOOTH, (p) => {
+				track.presence = from + (to - from) * p;
+				paint();
+			});
+		}
+		paint();
+	}, [hiddenKey, paint]);
+	useEffect(() => {
+		const from = { ...scale.current };
+		if (from.min === steady.min && from.max === steady.max) return;
+		return tween(SMOOTH, (p) => {
+			scale.current = {
+				min: from.min + (steady.min - from.min) * p,
+				max: from.max + (steady.max - from.max) * p
+			};
+			paint();
+		});
+	}, [paint, steady]);
+	useEffect(() => {
+		if (empty || drawn) return;
+		const node = figure.current;
+		if (!node || prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setDrawn(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setDrawn(true);
+		}, { threshold: .3 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [drawn, empty]);
+	const wasScrubbing = useRef(false);
+	useEffect(() => {
+		if (index === null) {
+			wasScrubbing.current = false;
+			return;
+		}
+		const to = last > 0 ? index / last : .5;
+		const from = cursor.current;
+		if (!wasScrubbing.current) {
+			wasScrubbing.current = true;
+			cursor.current = to;
+			paint();
+			return;
+		}
+		return tween(SNAPPY, (p) => {
+			cursor.current = from + (to - from) * p;
+			paint();
+		});
+	}, [
+		index,
+		last,
+		paint
+	]);
+	const onActive = useRef(onActiveChange);
+	useIsomorphicLayoutEffect(() => {
+		onActive.current = onActiveChange;
+	});
+	useEffect(() => {
+		onActive.current?.(index, index === null ? null : data[index] ?? null);
+	}, [index]);
+	const pointAt = (clientX) => {
+		const rect = plot.current?.getBoundingClientRect();
+		if (!rect?.width || last < 1) return Math.max(0, last);
+		return clamp(Math.round((clientX - rect.left) / rect.width * last), 0, last);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape" && scrubbing) {
+			event.preventDefault();
+			setActive(null);
+			return;
+		}
+		const from = index ?? last + 1;
+		const page = Math.max(1, Math.round(data.length / 6));
+		const next = {
+			ArrowLeft: from - 1,
+			ArrowDown: from - 1,
+			ArrowRight: index === null ? last : from + 1,
+			ArrowUp: index === null ? last : from + 1,
+			PageDown: from - page,
+			PageUp: from + page,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (next === void 0 || empty) return;
+		event.preventDefault();
+		setActive(clamp(next, 0, last));
+	};
+	const onPointerDown = (event) => {
+		if (empty) return;
+		if (event.pointerType !== "mouse") event.currentTarget.setPointerCapture?.(event.pointerId);
+		setActive(pointAt(event.clientX));
+	};
+	const onPointerMove = (event) => {
+		if (!empty && (event.pointerType === "mouse" || event.buttons)) setActive(pointAt(event.clientX));
+	};
+	const format = (value, line) => `${formatValue ? formatValue(value, line) : GROUPED.format(value)}${unit ? ` ${unit}` : ""}`;
+	const reading = index === null ? null : data[index];
+	const shown = reading ?? data[last];
+	const valueText = reading ? `${reading.label}: ${visible.map((line) => `${line.label} ${format(reading.values[line.key] ?? 0, line)}`).join(", ")}` : empty ? emptyLabel : `${visible.length} of ${series.length} series shown`;
+	const summary = empty ? `${label}. ${emptyLabel}.` : `${label}, ${data[0].label} to ${data[last].label}. ${visible.map((line) => `${line.label}, latest ${format(data[last].values[line.key] ?? 0, line)}`).join(". ")}.`;
+	const picks = axisPicks(data, plotWidth);
+	const allHidden = !empty && visible.length === 0;
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		"data-slot": "line-chart",
+		"aria-label": label,
+		"aria-busy": loading || void 0,
+		className: cn("m-0 grid min-w-0 gap-4 box-border font-sans text-foreground", className),
+		children: [
+			showLegend ? /* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-label": `${label} series`,
+				className: "-mx-2 flex min-w-0 flex-wrap gap-x-1 gap-y-0.5",
+				children: series.map((line, at) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"data-slot": "line-chart-toggle",
+					"aria-pressed": !hidden.includes(line.key),
+					onClick: () => toggle(line.key),
+					style: { "--series": colorOf(line, at) },
+					className: "chart-legend-toggle",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-dashed": line.dashed || void 0,
+						className: "chart-swatch"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "chart-toggle-label",
+						children: line.label
+					})]
+				}, line.key))
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "line-chart-chart",
+				"data-scrubbing": scrubbing || void 0,
+				"data-loading": loading || void 0,
+				"data-drawn": drawn || void 0,
+				className: "line-chart-frame",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						ref: plot,
+						"data-slot": "line-chart-plot",
+						role: "slider",
+						tabIndex: empty ? -1 : 0,
+						"aria-label": `${label}, explore by ${categoryLabel.toLowerCase()}`,
+						"aria-orientation": "horizontal",
+						"aria-valuemin": 1,
+						"aria-valuemax": Math.max(1, data.length),
+						"aria-valuenow": (index ?? last) + 1,
+						"aria-valuetext": valueText,
+						onPointerDown,
+						onPointerMove,
+						onPointerUp: (event) => {
+							if (event.pointerType !== "mouse") setActive(null);
+						},
+						onPointerCancel: () => setActive(null),
+						onPointerLeave: (event) => {
+							if (event.pointerType === "mouse") setActive(null);
+						},
+						onKeyDown,
+						onBlur: () => setActive(null),
+						onFocus: (event) => {
+							if (event.currentTarget.matches(":focus-visible") && !empty) setActive((current) => current ?? last);
+						},
+						className: "line-chart-plot",
+						style: { height },
+						children: [
+							/* @__PURE__ */ jsxs("svg", {
+								ref: svg,
+								width: "100%",
+								height,
+								"aria-hidden": "true",
+								focusable: "false",
+								className: "block overflow-visible",
+								children: [
+									/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+										id: `${uid}-draw`,
+										clipPathUnits: "userSpaceOnUse",
+										children: /* @__PURE__ */ jsx("rect", {
+											className: "line-chart-reveal",
+											x: -8,
+											y: -16,
+											height: height + 32,
+											style: { width: drawn ? plotWidth + 16 : 0 }
+										})
+									}) }),
+									steady.ticks.slice(1).map((value) => /* @__PURE__ */ jsx("line", {
+										"data-grid": value,
+										className: "line-chart-grid",
+										x1: 0,
+										x2: "100%"
+									}, value)),
+									/* @__PURE__ */ jsx("line", {
+										className: "line-chart-baseline",
+										x1: 0,
+										x2: "100%",
+										y1: height - .5,
+										y2: height - .5
+									}),
+									/* @__PURE__ */ jsx("line", {
+										"data-part": "crosshair",
+										className: "line-chart-crosshair",
+										y1: 8,
+										y2: height
+									}),
+									/* @__PURE__ */ jsx("g", {
+										className: "line-chart-series",
+										clipPath: `url(#${uid}-draw)`,
+										children: series.map((line, at) => /* @__PURE__ */ jsxs("g", {
+											"data-series": line.key,
+											style: { "--series": colorOf(line, at) },
+											children: [line.area ?? at === 0 ? /* @__PURE__ */ jsx("path", {
+												"data-part": "area",
+												className: "line-chart-area"
+											}) : null, /* @__PURE__ */ jsx("path", {
+												"data-part": "line",
+												"data-dashed": line.dashed || void 0,
+												className: "line-chart-line"
+											})]
+										}, line.key))
+									}),
+									series.map((line, at) => /* @__PURE__ */ jsx("circle", {
+										"data-dot": line.key,
+										"data-hidden": hidden.includes(line.key) || void 0,
+										r: 4,
+										className: "line-chart-dot",
+										style: { "--series": colorOf(line, at) }
+									}, line.key))
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								ref: tip,
+								"aria-hidden": "true",
+								"data-slot": "line-chart-tooltip",
+								className: "line-chart-tooltip",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "m-0 mb-0.5 whitespace-nowrap text-xs tabular-nums text-text-secondary",
+									children: shown?.label ?? ""
+								}), visible.map((line) => /* @__PURE__ */ jsxs("p", {
+									className: "m-0 flex min-w-0 items-center gap-2 text-sm",
+									style: { "--series": colorOf(line, series.indexOf(line)) },
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											"data-dashed": line.dashed || void 0,
+											className: "chart-tip-swatch"
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "min-w-0 flex-1 truncate text-text-secondary",
+											children: line.label
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "ms-2 flex-none whitespace-nowrap font-medium tabular-nums text-foreground",
+											children: format(shown?.values[line.key] ?? 0, line)
+										})
+									]
+								}, line.key))]
+							}),
+							(empty || allHidden) && !loading ? /* @__PURE__ */ jsx("p", {
+								className: "absolute inset-0 m-0 grid place-items-center text-sm text-muted-foreground pointer-events-none motion-safe:animate-fade-in",
+								children: empty ? emptyLabel : "Choose a series to show"
+							}) : null,
+							loading && empty ? /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "chart-skeleton"
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: gutter,
+						"aria-hidden": "true",
+						className: "relative min-w-0 [grid-area:1/2]",
+						children: steady.ticks.map((value) => /* @__PURE__ */ jsx("span", {
+							"data-tick": value,
+							className: "line-chart-tick motion-safe:animate-fade-in",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "block -translate-y-1/2 text-xs leading-none tabular-nums text-muted-foreground",
+								children: formatTick(value)
+							})
+						}, value))
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "relative min-w-0 [grid-area:2/1]",
+						children: picks.map((at) => {
+							const share = last > 0 ? at / last : .5;
+							return /* @__PURE__ */ jsx("span", {
+								className: "absolute top-2 whitespace-nowrap text-xs leading-none tabular-nums text-muted-foreground motion-safe:animate-fade-in",
+								style: {
+									left: `${share * 100}%`,
+									translate: `${-share * 100}% 0`
+								},
+								children: data[at].axisLabel
+							}, `${data[at].key}:${data[at].axisLabel}`);
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				children: summary
+			}),
+			empty ? null : /* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				children: /* @__PURE__ */ jsxs("table", { children: [
+					/* @__PURE__ */ jsx("caption", { children: label }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: categoryLabel
+					}), series.map((line) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: line.label
+					}, line.key))] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: data.map((item) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+						scope: "row",
+						children: item.label
+					}), series.map((line) => /* @__PURE__ */ jsx("td", { children: format(item.values[line.key] ?? 0, line) }, line.key))] }, item.key)) })
+				] })
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: loading ? "Loading" : ""
+			})
+		]
+	});
+});
+//#endregion
+export { LINE_CHART_DRAW_MS, LineChart };
+
+//# sourceMappingURL=line-chart.js.map