@seekalfred/primitives 0.6.0 → 0.7.3

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

@@ -0,0 +1,740 @@
+"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;
+}
+/** Fills each missing value straight between its present neighbours (or with the nearest one at the ends), so a gapped line still has a shape to morph. */
+function fillGaps(values) {
+	const present = values.flatMap((value, index) => value === null ? [] : [index]);
+	if (!present.length) return values.map(() => 0);
+	return values.map((value, index) => {
+		if (value !== null) return value;
+		const after = present.find((at) => at > index);
+		const before = [...present].reverse().find((at) => at < index);
+		if (before === void 0) return values[after];
+		if (after === void 0) return values[before];
+		return values[before] + (values[after] - values[before]) * (index - before) / (after - before);
+	});
+}
+/** Where a line with missing values is not drawn: before its first value, after its last, and between two values with missing ones between them. */
+function breaksFor(values) {
+	const present = values.flatMap((value, index) => value === null ? [] : [index]);
+	if (!present.length) return values.length ? [[-Infinity, Infinity]] : [];
+	const last = values.length - 1;
+	if (last === 0) return [];
+	const breaks = [];
+	if (present[0] > 0) breaks.push([-Infinity, present[0] / last]);
+	for (let at = 1; at < present.length; at++) if (present[at] - present[at - 1] > 1) breaks.push([present[at - 1] / last, present[at] / last]);
+	if (present[present.length - 1] < last) breaks.push([present[present.length - 1] / last, Infinity]);
+	return breaks;
+}
+const EDGE = 1e-9;
+/** Radius of a lone point's dot, inside its 2px stroke. */
+const DOT = 1.5;
+const inBreak = (breaks, x) => breaks.some(([from, to]) => x > from + EDGE && x < to - EDGE);
+/** The drawn runs of a line, split at its gaps. A run of one point is a dot: a small closed circle the stroke fills out to about 5px. */
+function pathsFor(shape, breaks, toX, toY, bottom) {
+	const runs = [];
+	let run = null;
+	for (const [x, value] of shape) {
+		if (breaks.length && inBreak(breaks, x)) {
+			run = null;
+			continue;
+		}
+		if (!run) runs.push(run = []);
+		run.push(`${toX(x).toFixed(1)},${toY(value).toFixed(1)}`);
+	}
+	return {
+		line: runs.map((points) => {
+			if (points.length > 1) return `M${points.join("L")}`;
+			const [x, y] = points[0].split(",").map(Number);
+			return `M${(x - DOT).toFixed(1)},${y.toFixed(1)}a${DOT},${DOT} 0 1,0 ${DOT * 2},0a${DOT},${DOT} 0 1,0 -3,0`;
+		}).join(""),
+		area: runs.map((points) => {
+			const first = points[0].split(",")[0];
+			const lastX = points[points.length - 1].split(",")[0];
+			return `M${points.join("L")}L${lastX},${bottom}L${first},${bottom}Z`;
+		}).join("")
+	};
+}
+const isFiniteValue = (reference) => typeof reference.value === "number" && Number.isFinite(reference.value);
+/** 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", missing = "zero", missingLabel = "No data", references, 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 gaps = missing === "gap";
+	const read = (item, key) => {
+		const value = item.values[key];
+		if (!gaps) return value ?? 0;
+		return typeof value === "number" && Number.isFinite(value) ? value : null;
+	};
+	const signature = `${curve}|${missing}|${series.map((line) => line.key).join(",")}|${data.map((item) => `${item.key}:${series.map((line) => read(item, line.key)).join(",")}`).join(";")}`;
+	const targets = useMemo(() => new Map(series.map((line) => {
+		const values = data.map((item) => read(item, line.key));
+		return [line.key, {
+			shape: curveFor(fillGaps(values), curve === "smooth"),
+			breaks: breaksFor(values)
+		}];
+	})), [signature]);
+	let low = Infinity;
+	let high = -Infinity;
+	for (const line of visible) for (const item of data) {
+		const value = read(item, line.key);
+		if (value === null) continue;
+		low = Math.min(low, value);
+		high = Math.max(high, value);
+	}
+	for (const reference of references ?? []) {
+		if (!isFiniteValue(reference)) continue;
+		low = Math.min(low, reference.value);
+		high = Math.max(high, reference.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 referenceAt = (reference) => {
+		if (typeof reference.value === "number") return isFiniteValue(reference) ? null : void 0;
+		const at = data.findIndex((item) => item.key === reference.at);
+		return at < 0 ? void 0 : last > 0 ? at / last : .5;
+	};
+	const drawnReferences = (references ?? []).filter((reference) => referenceAt(reference) !== void 0);
+	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 group = root.querySelector(`[data-series="${CSS.escape(line.key)}"]`);
+			if (track.breaks.length) {
+				const paths = pathsFor(track.shape, track.breaks, (x) => x * w, y, height);
+				group?.querySelector("[data-part=line]")?.setAttribute("d", paths.line);
+				group?.querySelector("[data-part=area]")?.setAttribute("d", paths.area);
+			} else {
+				const path = track.shape.length ? `M${track.shape.map(([x, value]) => `${(x * w).toFixed(1)},${y(value).toFixed(1)}`).join("L")}` : "";
+				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 gap = inBreak(track.breaks, at);
+				const cy = y(valueAt(track.shape, at));
+				dot.setAttribute("cx", (at * w).toFixed(1));
+				dot.setAttribute("cy", cy.toFixed(1));
+				if (gap) dot.setAttribute("data-gap", "");
+				else dot.removeAttribute("data-gap");
+				if (p > .5 && !gap) 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`;
+		for (const node of root.querySelectorAll("[data-reference-value]")) {
+			const yy = String(Math.round(toY(Number(node.dataset.referenceValue))) + .5);
+			node.setAttribute("y1", yy);
+			node.setAttribute("y2", yy);
+		}
+		for (const node of root.querySelectorAll("[data-reference-at]")) {
+			const xx = String(Math.round(Number(node.dataset.referenceAt) * w) + .5);
+			node.setAttribute("x1", xx);
+			node.setAttribute("x2", xx);
+		}
+		for (const node of plot.current?.querySelectorAll("[data-reference-label]") ?? []) {
+			const { referenceValue, referenceAt } = node.dataset;
+			node.style.translate = referenceValue !== void 0 ? `0 ${Math.round(toY(Number(referenceValue)))}px` : `${Math.round(Number(referenceAt) * w)}px 0`;
+		}
+		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, { shape: target, breaks }] of targets) {
+			const track = tracks.current.get(key);
+			if (!track) {
+				tracks.current.set(key, {
+					shape: target,
+					breaks,
+					presence: live.current.hidden.includes(key) ? 0 : 1,
+					stop: null
+				});
+				continue;
+			}
+			track.breaks = breaks;
+			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 formatNumber = (value, line) => `${formatValue ? formatValue(value, line) : GROUPED.format(value)}${unit ? ` ${unit}` : ""}`;
+	const format = (value, line) => value === null ? missingLabel : formatNumber(value, line);
+	const formatReference = (value) => series[0] ? formatNumber(value, series[0]) : `${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(read(reading, line.key), 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(read(data[last], line.key), line)}`).join(". ")}.${drawnReferences.map((reference) => typeof reference.value === "number" ? ` ${reference.label}: ${formatReference(reference.value)}.` : ` ${reference.label}: ${data.find((item) => item.key === reference.at).label}.`).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
+									}),
+									drawnReferences.map((reference) => typeof reference.value === "number" ? /* @__PURE__ */ jsx("line", {
+										"data-reference": reference.key,
+										"data-reference-value": reference.value,
+										className: "line-chart-reference",
+										x1: 0,
+										x2: "100%"
+									}, reference.key) : /* @__PURE__ */ jsx("line", {
+										"data-reference": reference.key,
+										"data-reference-at": referenceAt(reference),
+										className: "line-chart-reference",
+										y1: 8,
+										y2: height
+									}, reference.key)),
+									/* @__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))
+								]
+							}),
+							drawnReferences.map((reference) => /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-slot": "line-chart-reference-label",
+								"data-reference-label": reference.key,
+								"data-reference-value": typeof reference.value === "number" ? reference.value : void 0,
+								"data-reference-at": typeof reference.value === "number" ? void 0 : referenceAt(reference),
+								"data-axis": typeof reference.value === "number" ? "value" : "category",
+								className: "line-chart-reference-label",
+								children: reference.label
+							}, reference.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: shown ? format(read(shown, line.key), line) : format(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(read(item, line.key), 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