@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/streamgraph/streamgraph.js

@@ -0,0 +1,613 @@
+"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, SWELL, live, retarget, tween } from "../lib/spring-tween.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/streamgraph/streamgraph.tsx
+/** Samples across the plot: every layer is resampled onto the same grid, so datasets of any length morph into each other. */
+const N = 161;
+/** Room above and below the stream, and the gap between the crosshair and its tooltip, in pixels. */
+const PAD = 10;
+const GAP = 14;
+/** The first four layers take chart-1 to chart-4; later layers fall back to neutral steps that alternate in lightness. */
+const SHADES = [
+	30,
+	18,
+	24,
+	14
+];
+const colorOf = (item, index) => item.color ?? (index < 4 ? `var(--color-chart-${index + 1})` : `color-mix(in oklab, var(--color-foreground) ${SHADES[(index - 4) % SHADES.length]}%, var(--color-surface))`);
+const GROUPED = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+/** The first layer sits in the middle of the stream and the rest alternate above and below it; a flat baseline stacks them in order. */
+function stackOrder(count, mode) {
+	const order = Array.from({ length: count }, (_, index) => index);
+	if (mode === "zero") return order;
+	return order.reduce((list, index) => index === 0 ? [0] : index % 2 ? [...list, index] : [index, ...list], []);
+}
+/** Resamples values onto the shared grid with monotone cubic tangents, so curves never swing past the data or below zero. */
+function resample(raw) {
+	const values = raw.map((value) => Math.max(0, value || 0));
+	const out = new Array(N);
+	if (!values.length) return out.fill(0);
+	if (values.length === 1) return out.fill(values[0]);
+	const last = values.length - 1;
+	const slopes = values.slice(1).map((value, index) => value - values[index]);
+	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] = tangents[1] = slopes[0];
+	for (let k = 0; k < N; k++) {
+		const at = k / 160 * last;
+		const seg = Math.min(last - 1, Math.floor(at));
+		const t = at - seg;
+		const t2 = t * t;
+		const t3 = t2 * t;
+		const a = values[seg];
+		const b = values[seg + 1];
+		const value = (2 * t3 - 3 * t2 + 1) * a + (t3 - 2 * t2 + t) * tangents[seg] + (3 * t2 - 2 * t3) * b + (t3 - t2) * tangents[seg + 1];
+		out[k] = clamp(value, Math.min(a, b), Math.max(a, b));
+	}
+	return out;
+}
+/** The baseline under the stack. Wiggle follows Byron and Wattenberg, then removes its linear drift so the stream stays level. */
+function baseline(layers, mode) {
+	const g = new Array(N).fill(0);
+	const totals = g.map((_, j) => layers.reduce((sum, layer) => sum + layer[j], 0));
+	if (mode === "zero" || !layers.length) return g;
+	if (mode === "silhouette") return totals.map((total) => -total / 2);
+	for (let j = 1; j < N; j++) {
+		let s1 = 0;
+		let s2 = 0;
+		let below = 0;
+		for (const layer of layers) {
+			const change = layer[j] - layer[j - 1];
+			s1 += layer[j];
+			s2 += (below + change / 2) * layer[j];
+			below += change;
+		}
+		g[j] = g[j - 1] - (s1 ? s2 / s1 : 0);
+	}
+	const centers = g.map((value, j) => value + totals[j] / 2);
+	const mx = 80;
+	const my = centers.reduce((sum, value) => sum + value, 0) / N;
+	let num = 0;
+	let den = 0;
+	centers.forEach((value, j) => {
+		num += (j - mx) * (value - my);
+		den += (j - mx) ** 2;
+	});
+	const slope = den ? num / den : 0;
+	return g.map((value, j) => value - (my + slope * (j - mx)));
+}
+/** Axis labels that fit: at most one per 72 pixels, counted back from the latest. */
+function axisPicks(data, width) {
+	const labeled = data.flatMap((item, index) => item.axisLabel ? [index] : []);
+	if (!width || !labeled.length) return [];
+	const stride = Math.ceil(labeled.length / Math.max(2, Math.floor(width / 72)));
+	return labeled.reverse().filter((_, rank) => rank % stride === 0).reverse();
+}
+const Streamgraph = forwardRef(function Streamgraph({ data, series, label, unit = "", height = 260, offset = "wiggle", formatValue, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, onActiveChange, legend = true, directLabels = true, categoryLabel = "Date", emptyLabel = "No data for this range", 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 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((item) => !hidden.includes(item.key));
+	const signature = `${series.map((item) => item.key).join(",")}|${data.map((item) => series.map((line) => item.values[line.key] ?? 0).join(",")).join(";")}`;
+	const targets = useMemo(() => new Map(series.map((line) => [line.key, resample(data.map((item) => item.values[line.key] ?? 0))])), [signature]);
+	const [hover, setHover] = useState(null);
+	const [seenSignature, setSeenSignature] = useState(signature);
+	if (seenSignature !== signature) {
+		setSeenSignature(signature);
+		setHover(null);
+	}
+	const index = hover && !empty ? Math.min(hover.index, last) : null;
+	const [legendKey, setLegendKey] = useState(null);
+	const wanted = hover?.key ?? legendKey;
+	const activeKey = wanted && visible.some((item) => item.key === wanted) ? wanted : null;
+	const width = useRef(0);
+	const [plotWidth, setPlotWidth] = useState(0);
+	const shapes = useRef(/* @__PURE__ */ new Map());
+	const presence = useRef(/* @__PURE__ */ new Map());
+	const frame = useRef(null);
+	const spots = useRef(/* @__PURE__ */ new Map());
+	const grow = useRef(live(0));
+	const cursor = useRef(live(1));
+	const current = useRef({
+		series,
+		offset,
+		height
+	});
+	useIsomorphicLayoutEffect(() => {
+		current.current = {
+			series,
+			offset,
+			height
+		};
+	});
+	/** One writer for every drawn attribute: morphs, toggles, the first swell, the crosshair and resizes all repaint through here. */
+	const paint = useCallback(() => {
+		const root = svg.current;
+		const w = width.current;
+		if (!root || !w) return;
+		const { series: order, offset: mode, height: h } = current.current;
+		const layers = order.map((line) => {
+			const shape = shapes.current.get(line.key);
+			const p = presence.current.get(line.key)?.value ?? 1;
+			return shape ? shape.map((value) => value * p) : new Array(N).fill(0);
+		});
+		const stack = stackOrder(order.length, mode);
+		const g = baseline(stack.map((i) => layers[i]), mode);
+		const lower = new Array(order.length);
+		const upper = new Array(order.length);
+		let running = g.slice();
+		for (const i of stack) {
+			const layer = layers[i];
+			lower[i] = running;
+			running = running.map((value, j) => value + layer[j]);
+			upper[i] = running;
+		}
+		let lo = Infinity;
+		let hi = -Infinity;
+		for (let j = 0; j < N; j++) {
+			lo = Math.min(lo, g[j]);
+			hi = Math.max(hi, running[j]);
+		}
+		if (!Number.isFinite(lo) || hi - lo < 1e-9) {
+			lo = -1;
+			hi = 1;
+		}
+		const span = hi - lo;
+		const s = grow.current.value;
+		const center = g.map((value, j) => (value + running[j]) / 2);
+		const toY = (value) => PAD + (1 - (value - lo) / span) * (h - 20);
+		const yAt = (value, j) => toY(center[j] + (value - center[j]) * s);
+		frame.current = {
+			lower,
+			upper,
+			toY
+		};
+		const xs = Array.from({ length: N }, (_, j) => j / 160 * w);
+		order.forEach((line, i) => {
+			const top = upper[i];
+			const bottom = lower[i];
+			const node = root.querySelector(`[data-layer="${CSS.escape(line.key)}"]`);
+			if (node) {
+				let d = "";
+				for (let j = 0; j < N; j++) d += `${j ? "L" : "M"}${xs[j].toFixed(1)},${yAt(top[j], j).toFixed(1)}`;
+				for (let j = 160; j >= 0; j--) d += `L${xs[j].toFixed(1)},${yAt(bottom[j], j).toFixed(1)}`;
+				node.setAttribute("d", `${d}Z`);
+			}
+			const text = root.querySelector(`[data-name="${CSS.escape(line.key)}"]`);
+			if (!text) return;
+			let best = 4;
+			for (let j = 4; j < 157; j++) if (top[j] - bottom[j] > top[best] - bottom[best]) best = j;
+			const held = spots.current.get(line.key);
+			const j = held !== void 0 && top[held] - bottom[held] >= (top[best] - bottom[best]) * .8 ? held : best;
+			spots.current.set(line.key, j);
+			const thickness = (top[j] - bottom[j]) / span * (h - 20) * s;
+			const room = text.getComputedTextLength?.() ?? 60;
+			text.setAttribute("x", clamp(xs[j], room / 2 + 6, w - room / 2 - 6).toFixed(1));
+			text.setAttribute("y", yAt((top[j] + bottom[j]) / 2, j).toFixed(1));
+			text.style.opacity = thickness >= 19 && room + 16 < w ? "1" : "0";
+		});
+		const x = cursor.current.value * w;
+		const cross = root.querySelector("[data-part=crosshair]");
+		cross?.setAttribute("x1", x.toFixed(1));
+		cross?.setAttribute("x2", x.toFixed(1));
+	}, []);
+	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, [
+		height,
+		offset,
+		paint,
+		series
+	]);
+	const mounted = useRef(false);
+	useEffect(() => {
+		const moves = [];
+		for (const [key, to] of targets) {
+			const from = shapes.current.get(key);
+			if (!from) {
+				shapes.current.set(key, to);
+				if (mounted.current) {
+					const entering = live(0);
+					presence.current.set(key, entering);
+					retarget(entering, hidden.includes(key) ? 0 : 1, SMOOTH, paint);
+				}
+				continue;
+			}
+			moves.push({
+				key,
+				from,
+				to
+			});
+		}
+		for (const key of [...shapes.current.keys()]) if (!targets.has(key)) shapes.current.delete(key);
+		mounted.current = true;
+		if (!moves.length) {
+			paint();
+			return;
+		}
+		return tween(SMOOTH, (p) => {
+			for (const move of moves) shapes.current.set(move.key, move.from.map((value, j) => value + (move.to[j] - value) * p));
+			paint();
+		}, () => {
+			for (const move of moves) shapes.current.set(move.key, move.to);
+			paint();
+		});
+	}, [paint, targets]);
+	const hiddenKey = hidden.join("|");
+	useEffect(() => {
+		for (const line of series) {
+			const to = hidden.includes(line.key) ? 0 : 1;
+			const track = presence.current.get(line.key);
+			if (!track) presence.current.set(line.key, live(to));
+			else retarget(track, to, SMOOTH, paint);
+		}
+		paint();
+	}, [
+		hiddenKey,
+		paint,
+		series.length
+	]);
+	useEffect(() => () => {
+		grow.current.stop();
+		cursor.current.stop();
+		for (const track of presence.current.values()) track.stop();
+	}, []);
+	useEffect(() => {
+		const node = figure.current;
+		if (empty || !node) return;
+		if (prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			grow.current.value = 1;
+			paint();
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			retarget(grow.current, 1, SWELL, paint);
+		}, { threshold: .3 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [empty, paint]);
+	const shownBefore = useRef(false);
+	useIsomorphicLayoutEffect(() => {
+		const bubble = tip.current;
+		const w = width.current;
+		if (index === null || !bubble || !w) {
+			shownBefore.current = false;
+			return;
+		}
+		const share = last > 0 ? index / last : .5;
+		const x = share * w;
+		if (!shownBefore.current) {
+			cursor.current.stop();
+			cursor.current.value = share;
+			paint();
+		} else retarget(cursor.current, share, SNAPPY, paint);
+		let y = hover?.y ?? null;
+		const f = frame.current;
+		if (y === null && f && activeKey) {
+			const i = series.findIndex((line) => line.key === activeKey);
+			const j = Math.round(share * 160);
+			if (i >= 0) y = f.toY((f.upper[i][j] + f.lower[i][j]) / 2);
+		}
+		const tw = bubble.offsetWidth;
+		const th = bubble.offsetHeight;
+		let left = x + GAP;
+		if (left + tw > w) left = x - GAP - tw;
+		if (!shownBefore.current) bubble.style.transition = "none";
+		bubble.style.translate = `${clamp(left, 0, Math.max(0, w - tw))}px ${clamp((y ?? height / 2) - th / 2, 0, Math.max(0, height - th))}px`;
+		if (!shownBefore.current) {
+			bubble.offsetWidth;
+			bubble.style.transition = "";
+		}
+		shownBefore.current = true;
+	});
+	const onActive = useRef(onActiveChange);
+	useIsomorphicLayoutEffect(() => {
+		onActive.current = onActiveChange;
+	});
+	useEffect(() => {
+		onActive.current?.(index, activeKey);
+	}, [index, activeKey]);
+	const read = (clientX, clientY) => {
+		const rect = plot.current?.getBoundingClientRect();
+		const f = frame.current;
+		if (!rect?.width || empty) return null;
+		const share = clamp((clientX - rect.left) / rect.width, 0, 1);
+		const y = clientY - rect.top;
+		const at = last > 0 ? Math.round(share * last) : 0;
+		const j = Math.round(share * 160);
+		let key = null;
+		if (f) series.forEach((line, i) => {
+			if (hidden.includes(line.key)) return;
+			const top = f.toY(f.upper[i][j]);
+			const bottom = f.toY(f.lower[i][j]);
+			if (y >= top - 1 && y <= bottom + 1) key = line.key;
+		});
+		return {
+			index: at,
+			key,
+			y
+		};
+	};
+	const onKeyDown = (event) => {
+		if (empty) return;
+		if (event.key === "Escape" && hover) {
+			event.preventDefault();
+			setHover(null);
+			return;
+		}
+		const from = index ?? last;
+		const keys = visible.map((line) => line.key);
+		const at = activeKey ? keys.indexOf(activeKey) : -1;
+		const page = Math.max(1, Math.round(data.length / 6));
+		const move = {
+			ArrowLeft: () => ({
+				index: clamp(from - 1, 0, last),
+				key: activeKey,
+				y: null
+			}),
+			ArrowRight: () => ({
+				index: clamp(index === null ? last : from + 1, 0, last),
+				key: activeKey,
+				y: null
+			}),
+			PageDown: () => ({
+				index: clamp(from - page, 0, last),
+				key: activeKey,
+				y: null
+			}),
+			PageUp: () => ({
+				index: clamp(from + page, 0, last),
+				key: activeKey,
+				y: null
+			}),
+			Home: () => ({
+				index: 0,
+				key: activeKey,
+				y: null
+			}),
+			End: () => ({
+				index: last,
+				key: activeKey,
+				y: null
+			}),
+			ArrowUp: () => ({
+				index: from,
+				key: keys[at < 0 ? keys.length - 1 : Math.min(keys.length - 1, at + 1)] ?? null,
+				y: null
+			}),
+			ArrowDown: () => ({
+				index: from,
+				key: keys[at < 0 ? 0 : Math.max(0, at - 1)] ?? null,
+				y: null
+			})
+		}[event.key];
+		if (!move) return;
+		event.preventDefault();
+		setHover(move());
+	};
+	const suffix = unit ? ` ${unit}` : "";
+	const format = (value, line) => `${formatValue ? formatValue(value, line) : GROUPED.format(value)}${suffix}`;
+	const reading = index === null ? null : data[index];
+	const total = (datum) => visible.reduce((sum, line) => sum + Math.max(0, datum.values[line.key] ?? 0), 0);
+	const activeLine = series.find((line) => line.key === activeKey);
+	const announce = reading ? `${reading.label}. ${activeLine && activeKey ? `${activeLine.label} ${format(reading.values[activeKey] ?? 0, activeLine)}, ` : ""}${visible.length} layers, ${GROUPED.format(total(reading))}${suffix} in total` : "";
+	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);
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		"data-slot": "streamgraph",
+		"aria-label": label,
+		className: cn("streamgraph box-border font-sans text-foreground", className),
+		children: [
+			legend && series.length > 1 ? /* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-label": `${label} layers`,
+				onPointerLeave: () => setLegendKey(null),
+				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": "streamgraph-toggle",
+					"aria-pressed": !hidden.includes(line.key),
+					onClick: () => toggle(line.key),
+					onPointerEnter: (event) => {
+						if (event.pointerType === "mouse") setLegendKey(line.key);
+					},
+					onFocus: (event) => {
+						if (event.currentTarget.matches(":focus-visible")) setLegendKey(line.key);
+					},
+					onBlur: () => setLegendKey(null),
+					style: { "--series": colorOf(line, at) },
+					className: "chart-legend-toggle",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "chart-layer-swatch"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "chart-toggle-label",
+						children: line.label
+					})]
+				}, line.key))
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "streamgraph-chart",
+				"data-scrubbing": index !== null || void 0,
+				"data-focus": activeKey ? "" : void 0,
+				className: "streamgraph-frame",
+				children: [/* @__PURE__ */ jsxs("div", {
+					ref: 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": reading ? announce : summary,
+					className: "line-chart-plot streamgraph-plot",
+					style: { height },
+					onPointerMove: (event) => {
+						if (event.pointerType === "mouse" || event.buttons) setHover(read(event.clientX, event.clientY));
+					},
+					onPointerDown: (event) => {
+						if (event.pointerType !== "mouse") event.currentTarget.setPointerCapture?.(event.pointerId);
+						setHover(read(event.clientX, event.clientY));
+					},
+					onPointerUp: (event) => {
+						if (event.pointerType !== "mouse") setHover(null);
+					},
+					onPointerCancel: () => setHover(null),
+					onPointerLeave: (event) => {
+						if (event.pointerType === "mouse") setHover(null);
+					},
+					onKeyDown,
+					onBlur: () => setHover(null),
+					onFocus: (event) => {
+						if (event.currentTarget.matches(":focus-visible") && !empty) setHover((now) => now ?? {
+							index: last,
+							key: null,
+							y: null
+						});
+					},
+					children: [
+						/* @__PURE__ */ jsxs("svg", {
+							ref: svg,
+							width: "100%",
+							height,
+							"aria-hidden": "true",
+							focusable: "false",
+							className: "block overflow-visible",
+							children: [
+								series.map((line, at) => /* @__PURE__ */ jsx("path", {
+									"data-layer": line.key,
+									"data-active": activeKey === line.key || void 0,
+									className: "streamgraph-layer",
+									style: { "--series": colorOf(line, at) }
+								}, line.key)),
+								/* @__PURE__ */ jsx("line", {
+									"data-part": "crosshair",
+									className: "line-chart-crosshair",
+									y1: 0,
+									y2: height
+								}),
+								directLabels ? series.map((line) => /* @__PURE__ */ jsx("text", {
+									"data-name": line.key,
+									"data-hidden": hidden.includes(line.key) || void 0,
+									"data-dim": activeKey !== null && activeKey !== line.key || void 0,
+									textAnchor: "middle",
+									dominantBaseline: "central",
+									className: "streamgraph-name",
+									children: line.label
+								}, line.key)) : null
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							ref: tip,
+							"aria-hidden": "true",
+							"data-slot": "streamgraph-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: reading?.label ?? ""
+							}), stackOrder(series.length, offset).reverse().map((at) => series[at]).filter((line) => !hidden.includes(line.key)).map((line) => /* @__PURE__ */ jsxs("p", {
+								"data-active": activeKey === line.key || void 0,
+								className: "streamgraph-tip-row",
+								style: { "--series": colorOf(line, series.indexOf(line)) },
+								children: [
+									/* @__PURE__ */ jsx("span", { className: "chart-tip-swatch" }),
+									/* @__PURE__ */ jsx("span", {
+										className: "streamgraph-tip-name",
+										children: line.label
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "ms-2 flex-none whitespace-nowrap font-medium tabular-nums text-foreground",
+										children: reading ? format(reading.values[line.key] ?? 0, line) : ""
+									})
+								]
+							}, line.key))]
+						}),
+						empty || visible.length === 0 ? /* @__PURE__ */ jsx("p", {
+							className: "pointer-events-none absolute inset-0 m-0 grid place-items-center text-sm text-muted-foreground motion-safe:animate-fade-in",
+							children: empty ? emptyLabel : "Choose a layer to show"
+						}) : null
+					]
+				}), /* @__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);
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: announce
+			}),
+			/* @__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)) })
+				] })
+			})
+		]
+	});
+});
+//#endregion
+export { Streamgraph };
+
+//# sourceMappingURL=streamgraph.js.map