@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/brush-chart/brush-chart.js

@@ -0,0 +1,1056 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SMOOTH, live, retarget, tween } from "../lib/spring-tween.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/brush-chart/brush-chart.tsx
+const DAY = 864e5;
+/** Room above the top gridline, the gap between a point and its tooltip, and how close to an edge a press grabs it. */
+const TOP = 28;
+const GAP = 14;
+const GRIP = 14;
+/** Width of an edge handle's hit area. */
+const HANDLE = 28;
+const COMPACT = new Intl.NumberFormat("en-US", {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+const GROUPED = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+const utc = (options) => new Intl.DateTimeFormat("en-US", {
+	timeZone: "UTC",
+	...options
+});
+const FULL_DATE = utc({
+	weekday: "short",
+	month: "short",
+	day: "numeric",
+	year: "numeric"
+});
+const DAY_TICK = utc({
+	month: "short",
+	day: "numeric"
+});
+const MONTH_TICK = utc({ month: "short" });
+const YEAR_TICK = utc({ year: "numeric" });
+const SHORT_DATE = utc({
+	month: "short",
+	day: "numeric",
+	year: "numeric"
+});
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const time = (date) => typeof date === "number" ? date : date.getTime();
+const clean = (value) => Number(value.toPrecision(12));
+/** Clean gridlines from zero: the smallest step of 1, 2, 2.5 or 5 that covers the data in four rows or fewer. */
+function niceTop(high) {
+	const hi = Math.max(high, 1);
+	const magnitude = 10 ** Math.floor(Math.log10(hi / 4));
+	for (const factor of [
+		1,
+		2,
+		2.5,
+		5,
+		10
+	]) {
+		const step = factor * magnitude;
+		const top = Math.ceil(hi / step) * step;
+		if (top / step <= 4 + 1e-9) return {
+			top: clean(top),
+			step: clean(step)
+		};
+	}
+	return {
+		top: hi,
+		step: hi / 4
+	};
+}
+/** Calendar ticks that fit the width: days, weeks, then months, quarters and years, each landing on a real boundary. */
+function timeTicks(start, end, width) {
+	const room = Math.max(2, Math.floor(width / 76));
+	const span = end - start;
+	for (const days of [
+		1,
+		2,
+		7,
+		14
+	]) {
+		if (span / (days * DAY) > room) continue;
+		const ticks = [];
+		let t = Math.ceil(start / DAY) * DAY;
+		if (days >= 7) while (new Date(t).getUTCDay() !== 1) t += DAY;
+		for (; t <= end; t += days * DAY) ticks.push({
+			t,
+			label: DAY_TICK.format(t)
+		});
+		return ticks;
+	}
+	for (const months of [
+		1,
+		2,
+		3,
+		6,
+		12
+	]) {
+		if (span / (months * 30.44 * DAY) > room) continue;
+		const ticks = [];
+		const first = new Date(start);
+		let y = first.getUTCFullYear();
+		let m = first.getUTCMonth() + (first.getUTCDate() > 1 || first.getUTCHours() > 0 ? 1 : 0);
+		for (;;) {
+			y += Math.floor(m / 12);
+			m %= 12;
+			const t = Date.UTC(y, m, 1);
+			if (t > end) break;
+			if (m % months === 0) ticks.push({
+				t,
+				label: m === 0 ? YEAR_TICK.format(t) : MONTH_TICK.format(t)
+			});
+			m += 1;
+		}
+		return ticks;
+	}
+	const ticks = [];
+	for (let y = new Date(start).getUTCFullYear() + 1; Date.UTC(y, 0, 1) <= end; y++) ticks.push({
+		t: Date.UTC(y, 0, 1),
+		label: String(y)
+	});
+	return ticks;
+}
+/** First index at or after t. */
+function lowerBound(points, t) {
+	let low = 0;
+	let high = points.length;
+	while (low < high) {
+		const middle = low + high >> 1;
+		if (points[middle].t < t) low = middle + 1;
+		else high = middle;
+	}
+	return low;
+}
+/** A line through the points in view. Past two points per pixel, each pixel column keeps only its low and high so spikes survive. */
+function linePath(points, from, to, x, y, width) {
+	const slice = points.slice(Math.max(0, from), Math.min(points.length, to));
+	if (!slice.length) return "";
+	const parts = [];
+	const add = (point) => parts.push(`${x(point.t).toFixed(1)},${y(point.value).toFixed(1)}`);
+	if (slice.length <= width * 2) for (const point of slice) add(point);
+	else {
+		let column = NaN;
+		let low = null;
+		let high = null;
+		const flush = () => {
+			if (!low || !high) return;
+			for (const point of low.t < high.t ? [low, high] : [high, low]) add(point);
+		};
+		for (const point of slice) {
+			const at = Math.floor(x(point.t));
+			if (at !== column) {
+				flush();
+				column = at;
+				low = high = point;
+				continue;
+			}
+			if (point.value < low.value) low = point;
+			if (point.value > high.value) high = point;
+		}
+		flush();
+	}
+	return `M${parts.join("L")}`;
+}
+/** A centred seven point average and its low to high band, each averaged once more so the edges ease instead of stepping. */
+function smoothed(points) {
+	const around = (index, read) => {
+		const out = [];
+		for (let at = Math.max(0, index - 3); at <= Math.min(points.length - 1, index + 3); at++) out.push(read(at));
+		return out;
+	};
+	const raw = points.map((_, index) => {
+		const values = around(index, (at) => points[at].value);
+		return {
+			value: values.reduce((sum, value) => sum + value, 0) / values.length,
+			low: Math.min(...values),
+			high: Math.max(...values)
+		};
+	});
+	return points.map((point, index) => {
+		const near = around(index, (at) => raw[at]);
+		return {
+			t: point.t,
+			value: raw[index].value,
+			low: near.reduce((sum, item) => sum + item.low, 0) / near.length,
+			high: near.reduce((sum, item) => sum + item.high, 0) / near.length
+		};
+	});
+}
+const BrushChart = forwardRef(function BrushChart({ data, label, unit = "", formatValue = (value) => GROUPED.format(value), formatTick = (value) => COMPACT.format(value), formatDate = (date) => FULL_DATE.format(date), annotations, range, defaultRange, onRangeChange, minSpan = 7 * DAY, height = 240, overviewHeight = 52, emptyLabel = "No data yet", className }, ref) {
+	const uid = `brush${useId().replace(/[^a-zA-Z0-9-]/g, "")}`;
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const plot = useRef(null);
+	const plotSvg = useRef(null);
+	const strip = useRef(null);
+	const tip = useRef(null);
+	const gutter = useRef(null);
+	const axis = useRef(null);
+	const points = useMemo(() => data.map((item) => ({
+		t: time(item.date),
+		value: item.value
+	})), [data]);
+	const smooth = useMemo(() => smoothed(points), [points]);
+	const events = useMemo(() => (annotations ?? []).map((item) => ({
+		...item,
+		t: time(item.date)
+	})).sort((a, b) => a.t - b.t), [annotations]);
+	const empty = points.length < 2;
+	const first = points[0]?.t ?? 0;
+	const lastT = points[points.length - 1]?.t ?? 1;
+	const whole = [first, lastT];
+	const fit = ([start, end]) => {
+		const span = clamp(end - start, Math.min(minSpan, lastT - first), lastT - first);
+		const s = clamp(start, first, lastT - span);
+		return [s, s + span];
+	};
+	const view = useRef(range ?? defaultRange ?? whole);
+	const [shown, setShown] = useState(view.current);
+	const touched = useRef(false);
+	const settleTimer = useRef(0);
+	const flight = useRef(null);
+	const flush = useCallback(() => {
+		window.clearTimeout(settleTimer.current);
+		settleTimer.current = 0;
+		setShown((now) => now[0] === view.current[0] && now[1] === view.current[1] ? now : [...view.current]);
+	}, []);
+	const settleSoon = useCallback(() => {
+		if (!settleTimer.current) settleTimer.current = window.setTimeout(flush, 100);
+	}, [flush]);
+	const latest = useRef({
+		points,
+		smooth,
+		events,
+		first,
+		lastT,
+		height,
+		overviewHeight,
+		empty
+	});
+	const activeRef = useRef({
+		index: null,
+		event: null
+	});
+	const plotW = useRef(0);
+	const stripW = useRef(0);
+	const topLive = useRef(live(0));
+	const aimed = useRef(null);
+	const paintRef = useRef(() => {});
+	const [plotWidth, setPlotWidth] = useState(0);
+	const [stripWidth, setStripWidth] = useState(0);
+	/** One writer: the window, every path, the axes, the markers, the crosshair and the tooltip, straight onto the elements. */
+	const paint = useCallback(() => {
+		const L = latest.current;
+		const w = plotW.current;
+		const root = plotSvg.current;
+		const sw = stripW.current;
+		if (!root || L.empty) return;
+		const [start, end] = view.current;
+		const span = Math.max(1, end - start);
+		const P = L.points;
+		const x = (t) => (t - start) / span * w;
+		const from = Math.max(0, lowerBound(P, start) - 1);
+		const to = Math.min(P.length, lowerBound(P, end) + 1);
+		let peak = 0;
+		for (let index = from; index < to; index++) peak = Math.max(peak, P[index].value);
+		const want = niceTop(peak * 1.04).top;
+		if (aimed.current === null) {
+			aimed.current = want;
+			topLive.current.value = want;
+		} else if (aimed.current !== want) {
+			aimed.current = want;
+			retarget(topLive.current, want, SMOOTH, () => paintRef.current());
+		}
+		const top = topLive.current.value || want;
+		const H = L.height;
+		const y = (value) => TOP + (1 - value / (top || 1)) * (H - TOP);
+		const pxPerPoint = w && P.length > 1 ? w * (L.lastT - L.first) / (P.length - 1) / span : w;
+		const detail = clamp((pxPerPoint - 2.75) / 1.5, 0, 1);
+		if (w) {
+			const line = linePath(P, from, to, x, y, w);
+			const area = line ? `${line}L${x(P[to - 1].t).toFixed(1)},${H}L${x(P[from].t).toFixed(1)},${H}Z` : "";
+			const S = L.smooth;
+			const trend = linePath(S, from, to, x, y, w * 4);
+			const upper = linePath(S.map((point) => ({
+				t: point.t,
+				value: point.high
+			})), from, to, x, y, w * 4);
+			const lower = linePath(S.map((point) => ({
+				t: point.t,
+				value: point.low
+			})), from, to, x, y, w * 4);
+			const band = trend ? `${upper}L${lower.slice(1).split("L").reverse().join("L")}Z` : "";
+			const set = (part, d, opacity) => {
+				const node = root.querySelector(`[data-part=${part}]`);
+				node?.setAttribute("d", d);
+				if (node) node.style.opacity = String(opacity);
+			};
+			set("line", line, detail);
+			set("area", area, detail);
+			set("trend", trend, 1 - detail);
+			set("band", band, 1 - detail);
+		}
+		for (const node of root.querySelectorAll("[data-grid]")) {
+			const value = Number(node.dataset.grid);
+			const yy = String(Math.round(y(value)) + .5);
+			node.setAttribute("y1", yy);
+			node.setAttribute("y2", yy);
+			node.style.visibility = value > top * 1.001 ? "hidden" : "visible";
+		}
+		for (const node of gutter.current?.querySelectorAll("[data-tick]") ?? []) {
+			const value = Number(node.dataset.tick);
+			node.style.translate = `0 ${Math.round(y(value))}px`;
+			node.style.visibility = value > top * 1.001 ? "hidden" : "visible";
+		}
+		for (const node of axis.current?.querySelectorAll("[data-t]") ?? []) {
+			const px = x(Number(node.dataset.t));
+			node.style.left = `${px}px`;
+			node.style.translate = `${px < 24 ? 0 : px > w - 24 ? -100 : -50}% 0`;
+		}
+		const marks = [...plot.current?.querySelectorAll("[data-event]") ?? []];
+		const inside = marks.filter((node) => {
+			const t = L.events[Number(node.dataset.event)].t;
+			return t >= start && t <= end;
+		});
+		marks.forEach((node) => {
+			const index = Number(node.dataset.event);
+			const t = L.events[index].t;
+			const visible = inside.includes(node);
+			node.toggleAttribute("data-out", !visible);
+			const px = x(t);
+			node.style.left = `${px}px`;
+			const rule = root.querySelector(`[data-rule="${index}"]`);
+			rule?.toggleAttribute("data-out", !visible);
+			rule?.setAttribute("x1", String(Math.round(px) + .5));
+			rule?.setAttribute("x2", String(Math.round(px) + .5));
+			node.removeAttribute("data-labelled");
+			node.removeAttribute("data-flip");
+		});
+		let edge = -Infinity;
+		inside.forEach((node, at) => {
+			const index = Number(node.dataset.event);
+			const px = x(L.events[index].t);
+			const text = L.events[index].label.length * 6.2 + 4;
+			const next = at + 1 < inside.length ? x(L.events[Number(inside[at + 1].dataset.event)].t) - 10 : w;
+			if (px + 14 >= edge && px + 14 + text <= next) {
+				node.setAttribute("data-labelled", "");
+				edge = px + 14 + text + 8;
+				return;
+			}
+			const before = at === 0 ? -Infinity : x(L.events[Number(inside[at - 1].dataset.event)].t);
+			if (px - 14 - text >= Math.max(0, edge) && (at === 0 || px - 14 - text >= before + 12)) {
+				node.setAttribute("data-labelled", "");
+				node.setAttribute("data-flip", "");
+				edge = px + 12;
+				return;
+			}
+			edge = Math.max(edge, px + 12);
+		});
+		const { index, event } = activeRef.current;
+		const at = index !== null && index >= from && index < to ? index : null;
+		const cx = at === null ? 0 : x(P[at].t);
+		const cy = at === null ? 0 : y(L.smooth[at].value + (P[at].value - L.smooth[at].value) * detail);
+		const crossX = String(Math.round(cx) + .5);
+		const cross = root.querySelector("[data-part=crosshair]");
+		cross?.setAttribute("x1", crossX);
+		cross?.setAttribute("x2", crossX);
+		if (cross) cross.style.opacity = at === null ? "0" : "";
+		const dot = root.querySelector("[data-part=dot]");
+		dot?.setAttribute("cx", String(cx));
+		dot?.setAttribute("cy", String(cy));
+		if (dot) dot.style.opacity = at === null ? "0" : "";
+		const bubble = tip.current;
+		if (bubble) {
+			const ax = event !== null ? x(L.events[event].t) : cx;
+			const ay = event !== null ? TOP : cy;
+			const tw = bubble.offsetWidth;
+			const th = bubble.offsetHeight;
+			let left = ax + GAP;
+			if (left + tw > w) left = ax - GAP - tw;
+			let topY = ay - th - GAP;
+			if (topY < 0) topY = ay + GAP;
+			bubble.style.translate = `${clamp(left, 0, Math.max(0, w - tw))}px ${clamp(topY, 0, Math.max(0, H - th))}px`;
+		}
+		const ox = (t) => (t - L.first) / (L.lastT - L.first || 1) * sw;
+		const wx0 = ox(start);
+		const wx1 = ox(end);
+		const box = strip.current;
+		if (box) {
+			const place = (selector, css) => {
+				const node = box.querySelector(selector);
+				if (node) Object.assign(node.style, css);
+			};
+			place("[data-part=window-box]", {
+				left: `${wx0}px`,
+				width: `${Math.max(0, wx1 - wx0)}px`
+			});
+			const inward = wx0 < HANDLE;
+			place("[data-handle=start]", { left: `${inward ? wx0 : wx0 - HANDLE}px` });
+			box.querySelector("[data-handle=start]")?.toggleAttribute("data-inward", inward);
+			place("[data-handle=end]", { left: `${wx1}px` });
+			place("[data-edge=start]", {
+				left: "0px",
+				width: `${Math.max(0, wx0)}px`
+			});
+			place("[data-edge=end]", {
+				left: `${wx1}px`,
+				right: "0px"
+			});
+			const clip = box.querySelector("[data-part=window-clip]");
+			clip?.setAttribute("x", String(wx0));
+			clip?.setAttribute("width", String(Math.max(0, wx1 - wx0)));
+			const text = `${SHORT_DATE.format(start)} to ${SHORT_DATE.format(end)}`;
+			const slider = (selector, min, max, now, valuetext) => {
+				const node = box.querySelector(selector);
+				if (!node) return;
+				node.setAttribute("aria-valuemin", String(Math.round(min)));
+				node.setAttribute("aria-valuemax", String(Math.round(max)));
+				node.setAttribute("aria-valuenow", String(Math.round(now)));
+				node.setAttribute("aria-valuetext", valuetext);
+			};
+			slider("[data-part=window]", L.first, L.lastT, start, text);
+			slider("[data-handle=start]", L.first, end, start, SHORT_DATE.format(start));
+			slider("[data-handle=end]", start, L.lastT, end, SHORT_DATE.format(end));
+		}
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		latest.current = {
+			points,
+			smooth,
+			events,
+			first,
+			lastT,
+			height,
+			overviewHeight,
+			empty
+		};
+		paintRef.current = paint;
+		paint();
+	});
+	const setView = (next) => {
+		view.current = next;
+		paint();
+		settleSoon();
+	};
+	const glideTo = (next) => {
+		flight.current?.();
+		const from = view.current;
+		flight.current = tween(SMOOTH, (p) => setView([from[0] + (next[0] - from[0]) * p, from[1] + (next[1] - from[1]) * p]), flush);
+	};
+	const commit = (next, smoothly) => {
+		const target = fit(next);
+		touched.current = true;
+		if (smoothly) glideTo(target);
+		else {
+			flight.current?.();
+			setView(target);
+		}
+		onRangeChange?.(target);
+	};
+	const rangeKey = range ? `${range[0]}:${range[1]}` : "";
+	useEffect(() => {
+		if (!range || empty) return;
+		const target = fit(range);
+		const now = view.current;
+		if (Math.abs(target[0] - now[0]) + Math.abs(target[1] - now[1]) > 1e3) glideTo(target);
+	}, [rangeKey, empty]);
+	useEffect(() => {
+		if (empty) return;
+		const target = touched.current || range || defaultRange ? fit(view.current) : whole;
+		if (target[0] !== view.current[0] || target[1] !== view.current[1]) {
+			view.current = target;
+			paint();
+			flush();
+		}
+	}, [
+		first,
+		lastT,
+		empty
+	]);
+	useEffect(() => () => {
+		flight.current?.();
+		topLive.current.stop();
+		window.clearTimeout(settleTimer.current);
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		const nodes = [[
+			plot.current,
+			plotW,
+			setPlotWidth
+		], [
+			strip.current,
+			stripW,
+			setStripWidth
+		]];
+		const stops = [];
+		for (const [node, store, setter] of nodes) {
+			if (!node) continue;
+			const read = () => {
+				store.current = node.clientWidth;
+				setter(node.clientWidth);
+				paintRef.current();
+			};
+			read();
+			if (typeof ResizeObserver === "undefined") continue;
+			const observer = new ResizeObserver(read);
+			observer.observe(node);
+			stops.push(() => observer.disconnect());
+		}
+		return () => stops.forEach((stop) => stop());
+	}, []);
+	const [drawn, setDrawn] = useState(false);
+	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 [active, setActive] = useState(null);
+	const [hoverEvent, setHoverEvent] = useState(null);
+	const [start, end] = shown;
+	const from = Math.max(0, lowerBound(points, start) - 1);
+	const to = Math.min(points.length, lowerBound(points, end) + 1);
+	const index = active !== null && active >= from && active < to ? active : null;
+	const eventAt = index === null ? null : events.find((item) => Math.abs(item.t - points[index].t) < DAY / 2) ?? null;
+	const shownEvent = hoverEvent !== null ? events[hoverEvent] ?? null : null;
+	const tipOn = index !== null || shownEvent !== null;
+	useIsomorphicLayoutEffect(() => {
+		activeRef.current = {
+			index,
+			event: shownEvent ? events.indexOf(shownEvent) : null
+		};
+		paint();
+	});
+	const nearest = (clientX) => {
+		const rect = plot.current?.getBoundingClientRect();
+		if (!rect?.width || empty) return null;
+		const [s, e] = view.current;
+		const t = s + (clientX - rect.left) / rect.width * (e - s);
+		const at = clamp(lowerBound(points, t), 1, points.length - 1);
+		const lo = Math.max(0, lowerBound(points, s) - 1);
+		const hi = Math.min(points.length, lowerBound(points, e) + 1);
+		return clamp(t - points[at - 1].t < points[at].t - t ? at - 1 : at, lo, hi - 1);
+	};
+	const windowBounds = () => {
+		const [s, e] = view.current;
+		return [Math.max(0, lowerBound(points, s) - 1), Math.min(points.length, lowerBound(points, e) + 1)];
+	};
+	const onPlotKey = (event) => {
+		if (empty) return;
+		if (event.key === "Escape" && index !== null) {
+			event.preventDefault();
+			setActive(null);
+			return;
+		}
+		const [lo, hi] = windowBounds();
+		const current = index ?? hi - 1;
+		const page = Math.max(1, Math.round((hi - lo) / 8));
+		const next = {
+			ArrowLeft: current - 1,
+			ArrowRight: index === null ? hi - 1 : current + 1,
+			PageDown: current - page,
+			PageUp: current + page,
+			Home: lo,
+			End: hi - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		setActive(clamp(next, lo, hi - 1));
+	};
+	const drag = useRef(null);
+	const toTime = (clientX) => {
+		const rect = strip.current?.getBoundingClientRect();
+		return rect?.width ? first + clamp((clientX - rect.left) / rect.width, 0, 1) * (lastT - first) : first;
+	};
+	const onStripDown = (event) => {
+		if (empty || event.button > 0) return;
+		const rect = strip.current.getBoundingClientRect();
+		const px = event.clientX - rect.left;
+		const [s, e] = view.current;
+		const wx0 = (s - first) / (lastT - first) * rect.width;
+		const wx1 = (e - first) / (lastT - first) * rect.width;
+		const mode = Math.abs(px - wx0) <= GRIP && px <= (wx0 + wx1) / 2 ? "start" : Math.abs(px - wx1) <= GRIP ? "end" : px > wx0 && px < wx1 ? "pan" : "new";
+		drag.current = {
+			mode,
+			pointerX: event.clientX,
+			from: view.current,
+			anchor: toTime(event.clientX),
+			moved: false
+		};
+		try {
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+		} catch {}
+		flight.current?.();
+	};
+	const onStripMove = (event) => {
+		const current = drag.current;
+		if (!current) return;
+		if (!current.moved && Math.abs(event.clientX - current.pointerX) < 3) return;
+		current.moved = true;
+		const t = toTime(event.clientX);
+		const shift = t - current.anchor;
+		const [s, e] = current.from;
+		const least = Math.min(minSpan, lastT - first);
+		const next = current.mode === "pan" ? [s + shift, e + shift] : current.mode === "start" ? [clamp(t, first, e - least), e] : current.mode === "end" ? [s, clamp(t, s + least, lastT)] : [Math.min(current.anchor, t), Math.max(current.anchor, t)];
+		if (current.mode === "new" && next[1] - next[0] < least) {
+			if (t >= current.anchor) next[1] = next[0] + least;
+			else next[0] = next[1] - least;
+		}
+		commit(next, false);
+	};
+	const onStripUp = () => {
+		const current = drag.current;
+		drag.current = null;
+		if (current?.moved) flush();
+		if (!current || current.moved || current.mode !== "new") return;
+		const half = (view.current[1] - view.current[0]) / 2;
+		commit([current.anchor - half, current.anchor + half], true);
+	};
+	const reset = () => commit(whole, true);
+	const stepSize = Math.max(DAY, (lastT - first) / Math.max(1, points.length - 1));
+	const onHandleKey = (event, edge) => {
+		const [s, e] = view.current;
+		const win = e - s;
+		const big = event.shiftKey || event.key.startsWith("Page");
+		const delta = {
+			ArrowLeft: -1,
+			ArrowDown: -1,
+			PageDown: -1,
+			ArrowRight: 1,
+			ArrowUp: 1,
+			PageUp: 1
+		}[event.key];
+		let next = null;
+		if (event.key === "Escape" || event.key === "0") next = whole;
+		else if (edge === "window" && (event.key === "+" || event.key === "=")) next = [s + win / 4, e - win / 4];
+		else if (edge === "window" && (event.key === "-" || event.key === "_")) next = [s - win / 2, e + win / 2];
+		else if (event.key === "Home") next = edge === "end" ? [s, s + Math.min(minSpan, lastT - first)] : [first, edge === "window" ? first + win : e];
+		else if (event.key === "End") next = edge === "start" ? [e - Math.min(minSpan, lastT - first), e] : [edge === "window" ? lastT - win : s, lastT];
+		else if (delta) {
+			const move = delta * (edge === "window" ? win * (big ? .5 : .1) : stepSize * (big ? 10 : 1));
+			next = edge === "window" ? [s + move, e + move] : edge === "start" ? [Math.min(s + move, e - minSpan), e] : [s, Math.max(e + move, s + minSpan)];
+		}
+		if (!next) return;
+		event.preventDefault();
+		commit(next, false);
+		flush();
+	};
+	const scale = niceTop(useMemo(() => {
+		let high = 0;
+		for (let at = from; at < to; at++) high = Math.max(high, points[at].value);
+		return high;
+	}, [
+		points,
+		from,
+		to
+	]) * 1.04);
+	const detailShown = clamp(((plotWidth && points.length > 1 ? plotWidth * (lastT - first) / (points.length - 1) / Math.max(1, end - start) : plotWidth) - 2.75) / 1.5, 0, 1);
+	const ticks = scale.top > 0 ? Array.from({ length: Math.round(scale.top / scale.step) + 1 }, (_, at) => clean(at * scale.step)) : [];
+	const xTicks = plotWidth && !empty ? timeTicks(start, end, plotWidth) : [];
+	const overview = useMemo(() => {
+		if (!stripWidth || empty) return {
+			line: "",
+			area: "",
+			marks: []
+		};
+		const ox = (t) => (t - first) / (lastT - first || 1) * stripWidth;
+		const max = niceTop(smooth.reduce((m, point) => Math.max(m, point.value), 0)).top || 1;
+		const oy = (value) => 4 + (1 - value / max) * (overviewHeight - 4);
+		const path = linePath(smooth, 0, smooth.length, ox, oy, stripWidth * 4);
+		const marks = events.map((item) => {
+			const at = clamp(lowerBound(smooth, item.t), 0, smooth.length - 1);
+			return {
+				t: item.t,
+				x: ox(item.t),
+				y: oy(smooth[at].value)
+			};
+		});
+		return {
+			line: path,
+			area: `${path}L${stripWidth},${overviewHeight}L0,${overviewHeight}Z`,
+			marks
+		};
+	}, [
+		smooth,
+		events,
+		stripWidth,
+		overviewHeight,
+		empty,
+		first,
+		lastT
+	]);
+	const format = (value) => `${formatValue(value)}${unit ? ` ${unit}` : ""}`;
+	const reading = index === null ? null : points[index];
+	const previous = index !== null && index >= 7 ? points[index - 7] : null;
+	const change = reading && previous && previous.value ? (reading.value - previous.value) / previous.value : null;
+	const windowText = `${SHORT_DATE.format(start)} to ${SHORT_DATE.format(end)}`;
+	const announce = reading ? `${formatDate(new Date(reading.t))}, ${format(reading.value)}${eventAt ? `. ${eventAt.label}` : ""}` : "";
+	const summary = empty ? `${label}. ${emptyLabel}.` : `${label}, ${SHORT_DATE.format(first)} to ${SHORT_DATE.format(lastT)}. Showing ${windowText}.`;
+	const rows = empty ? [] : points.slice(lowerBound(points, start), lowerBound(points, end + 1));
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		"data-slot": "brush-chart",
+		"aria-label": label,
+		className: cn("brush-chart", className),
+		style: { "--series": "var(--color-chart-1)" },
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "brush-chart-chart",
+				"data-scrubbing": tipOn || void 0,
+				className: "brush-chart-frame",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						ref: plot,
+						"data-slot": "brush-chart-plot",
+						role: "slider",
+						tabIndex: empty ? -1 : 0,
+						"aria-label": `${label}, ${windowText}. Use left and right arrows to read values.`,
+						"aria-orientation": "horizontal",
+						"aria-valuemin": 1,
+						"aria-valuemax": Math.max(1, points.length),
+						"aria-valuenow": (index ?? Math.max(0, to - 1)) + 1,
+						"aria-valuetext": reading ? announce : summary,
+						onPointerMove: (event) => {
+							if (event.pointerType === "mouse" || event.buttons) setActive(nearest(event.clientX));
+						},
+						onPointerDown: (event) => {
+							if (event.pointerType === "mouse") return;
+							event.currentTarget.setPointerCapture?.(event.pointerId);
+							setActive(nearest(event.clientX));
+						},
+						onPointerUp: (event) => {
+							if (event.pointerType !== "mouse") setActive(null);
+						},
+						onPointerCancel: () => setActive(null),
+						onPointerLeave: (event) => {
+							if (event.pointerType === "mouse") setActive(null);
+						},
+						onKeyDown: onPlotKey,
+						onBlur: () => setActive(null),
+						onDoubleClick: reset,
+						onFocus: (event) => {
+							if (event.currentTarget.matches(":focus-visible") && !empty) setActive((current) => current ?? windowBounds()[1] - 1);
+						},
+						className: "line-chart-plot",
+						style: { height },
+						children: [
+							/* @__PURE__ */ jsxs("svg", {
+								ref: plotSvg,
+								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 }
+										})
+									}) }),
+									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
+									}),
+									events.map((item, at) => /* @__PURE__ */ jsx("line", {
+										"data-rule": at,
+										"data-active": shownEvent === item || eventAt === item || void 0,
+										className: "brush-chart-rule",
+										y1: 18,
+										y2: height
+									}, item.t)),
+									/* @__PURE__ */ jsxs("g", {
+										clipPath: `url(#${uid}-draw)`,
+										children: [
+											/* @__PURE__ */ jsx("path", {
+												"data-part": "band",
+												className: "brush-chart-band"
+											}),
+											/* @__PURE__ */ jsx("path", {
+												"data-part": "area",
+												className: "line-chart-area"
+											}),
+											/* @__PURE__ */ jsx("path", {
+												"data-part": "trend",
+												className: "brush-chart-trend"
+											}),
+											/* @__PURE__ */ jsx("path", {
+												"data-part": "line",
+												className: "line-chart-line"
+											})
+										]
+									}),
+									/* @__PURE__ */ jsx("line", {
+										"data-part": "crosshair",
+										className: "line-chart-crosshair",
+										y1: 18,
+										y2: height
+									}),
+									/* @__PURE__ */ jsx("circle", {
+										"data-part": "dot",
+										r: 4,
+										className: "line-chart-dot"
+									})
+								]
+							}),
+							events.map((item, at) => /* @__PURE__ */ jsxs("span", {
+								"data-event": at,
+								"data-active": shownEvent === item || eventAt === item || void 0,
+								"aria-hidden": "true",
+								className: "brush-chart-event",
+								onPointerEnter: () => setHoverEvent(at),
+								onPointerLeave: () => setHoverEvent(null),
+								onPointerDown: (event) => event.stopPropagation(),
+								children: [/* @__PURE__ */ jsx("span", { className: "brush-chart-event-dot" }), /* @__PURE__ */ jsx("span", {
+									className: "brush-chart-event-label",
+									children: item.label
+								})]
+							}, item.t)),
+							/* @__PURE__ */ jsx("div", {
+								ref: tip,
+								"aria-hidden": "true",
+								"data-slot": "brush-chart-tooltip",
+								className: "line-chart-tooltip",
+								children: shownEvent ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+									/* @__PURE__ */ jsx("p", {
+										className: "m-0 mb-0.5 whitespace-nowrap text-xs tabular-nums text-text-secondary",
+										children: formatDate(new Date(shownEvent.t))
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "m-0 text-base font-medium tabular-nums text-foreground",
+										children: shownEvent.label
+									}),
+									shownEvent.description ? /* @__PURE__ */ jsx("p", {
+										className: "m-0 text-xs text-text-secondary",
+										children: shownEvent.description
+									}) : null
+								] }) : reading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+									/* @__PURE__ */ jsx("p", {
+										className: "m-0 mb-0.5 whitespace-nowrap text-xs tabular-nums text-text-secondary",
+										children: formatDate(new Date(reading.t))
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "m-0 text-base font-medium tabular-nums text-foreground",
+										children: format(reading.value)
+									}),
+									index !== null && detailShown < 1 && smooth[index] ? /* @__PURE__ */ jsx("p", {
+										className: "m-0 text-xs tabular-nums text-text-secondary",
+										children: `${formatValue(Math.round(smooth[index].value))} seven day average`
+									}) : null,
+									change !== null ? /* @__PURE__ */ jsx("p", {
+										className: "m-0 text-xs tabular-nums text-text-secondary",
+										children: `${change >= 0 ? "+" : "−"}${Math.abs(change * 100).toFixed(1)}% vs a week earlier`
+									}) : null,
+									eventAt ? /* @__PURE__ */ jsxs("p", {
+										className: "m-0 mt-1 flex items-center gap-1.5 text-xs text-foreground",
+										children: [/* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											className: "brush-chart-tip-dot"
+										}), eventAt.label]
+									}) : null
+								] }) : null
+							}),
+							empty ? /* @__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: emptyLabel
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: gutter,
+						"aria-hidden": "true",
+						className: "relative min-w-0 [grid-area:1/2]",
+						children: 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", {
+						ref: axis,
+						"aria-hidden": "true",
+						className: "relative min-w-0 [grid-area:2/1]",
+						children: xTicks.map((tick) => /* @__PURE__ */ jsx("span", {
+							"data-t": tick.t,
+							className: "absolute top-2 whitespace-nowrap text-xs leading-none tabular-nums text-muted-foreground",
+							children: tick.label
+						}, tick.t))
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						ref: strip,
+						"data-slot": "brush-chart-overview",
+						className: "brush-chart-strip",
+						style: { height: overviewHeight },
+						onPointerDown: onStripDown,
+						onPointerMove: onStripMove,
+						onPointerUp: onStripUp,
+						onPointerCancel: () => {
+							drag.current = null;
+						},
+						onDoubleClick: reset,
+						children: [/* @__PURE__ */ jsxs("svg", {
+							width: "100%",
+							height: overviewHeight,
+							"aria-hidden": "true",
+							focusable: "false",
+							className: "brush-chart-overview-svg",
+							children: [
+								/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+									id: `${uid}-window`,
+									children: /* @__PURE__ */ jsx("rect", {
+										"data-part": "window-clip",
+										y: -2,
+										height: overviewHeight + 4
+									})
+								}) }),
+								/* @__PURE__ */ jsx("path", {
+									d: overview.area,
+									className: "brush-chart-overview-area"
+								}),
+								/* @__PURE__ */ jsx("path", {
+									d: overview.line,
+									className: "brush-chart-overview-line"
+								}),
+								/* @__PURE__ */ jsxs("g", {
+									clipPath: `url(#${uid}-window)`,
+									children: [/* @__PURE__ */ jsx("path", {
+										d: overview.area,
+										className: "brush-chart-overview-area-in"
+									}), /* @__PURE__ */ jsx("path", {
+										d: overview.line,
+										className: "brush-chart-overview-line-in"
+									})]
+								}),
+								overview.marks.map((mark) => /* @__PURE__ */ jsx("circle", {
+									cx: mark.x,
+									cy: mark.y,
+									r: 2.5,
+									className: "brush-chart-overview-event"
+								}, mark.t))
+							]
+						}), empty ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							/* @__PURE__ */ jsx("div", {
+								"data-edge": "start",
+								className: "brush-chart-shade"
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-edge": "end",
+								className: "brush-chart-shade"
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-part": "window",
+								role: "slider",
+								tabIndex: 0,
+								"aria-label": `${label} window`,
+								"aria-roledescription": "range window",
+								onKeyDown: (event) => onHandleKey(event, "window"),
+								className: "brush-chart-window-key"
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-part": "window-box",
+								"aria-hidden": "true",
+								className: "brush-chart-window"
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-handle": "start",
+								role: "slider",
+								tabIndex: 0,
+								"aria-label": "Window start",
+								onKeyDown: (event) => onHandleKey(event, "start"),
+								className: "brush-chart-handle",
+								children: /* @__PURE__ */ jsx("span", { className: "brush-chart-grip" })
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-handle": "end",
+								role: "slider",
+								tabIndex: 0,
+								"aria-label": "Window end",
+								onKeyDown: (event) => onHandleKey(event, "end"),
+								className: "brush-chart-handle",
+								children: /* @__PURE__ */ jsx("span", { className: "brush-chart-grip" })
+							})
+						] })]
+					})
+				]
+			}),
+			/* @__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}, ${windowText}` }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Date"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: label
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Event"
+						})
+					] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: rows.map((point) => {
+						const event = events.find((item) => Math.abs(item.t - point.t) < DAY / 2);
+						return /* @__PURE__ */ jsxs("tr", { children: [
+							/* @__PURE__ */ jsx("th", {
+								scope: "row",
+								children: SHORT_DATE.format(point.t)
+							}),
+							/* @__PURE__ */ jsx("td", { children: format(point.value) }),
+							/* @__PURE__ */ jsx("td", { children: event ? `${event.label}${event.description ? `. ${event.description}` : ""}` : "" })
+						] }, point.t);
+					}) })
+				] })
+			})
+		]
+	});
+});
+//#endregion
+export { BrushChart };
+
+//# sourceMappingURL=brush-chart.js.map