@tangle-network/charts 0.3.1 → 0.6.0

package/dist/react/index.js

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment, useId, useRef, useState } from "react";
+import { d as hatchPath, i as eventsGap, m as markerPath, o as isRefusal } from "../events-Cw6abvgR.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useEffect, useId, useRef, useState } from "react";
 //#region src/react/sparkline.tsx
 const DEFAULT_SPARKLINE_WIDTH = 96;
 const DEFAULT_SPARKLINE_HEIGHT = 24;
@@ -515,7 +516,7 @@ function StackedBarChart(props) {
 						children: "Value"
 					})
 				] }) }),
-				/* @__PURE__ */ jsx("tbody", { children: buckets.map((bucket) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("tbody", { children: buckets.map((bucket) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("tr", { children: [
 					/* @__PURE__ */ jsx("th", {
 						scope: "row",
 						children: bucket.label
@@ -755,4 +756,930 @@ function WaterfallHeader({ label = "Span", attribution, durationLabel = "Duratio
 	});
 }
 //#endregion
-export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, Sparkline, StackedBarChart, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };
+//#region src/react/live.tsx
+/** Reusable, em-scaled charts for live operational series. Values, labels and status colors belong to callers. */
+const LIVE_SERIES = [
+	"#8b7cf6",
+	"#0ea5a0",
+	"#c98500",
+	"#e2508f",
+	"#4a90e2"
+];
+const formatCompact = (value) => value === null || value === void 0 || !Number.isFinite(value) ? "—" : new Intl.NumberFormat("en-US", {
+	notation: "compact",
+	maximumFractionDigits: 1
+}).format(value);
+const formatShare = (value) => value === null || !Number.isFinite(value) ? "—" : `${Math.round(value * 100)}%`;
+/** The rendered width and font size of an element, so an SVG chart draws at its real size and its geometry follows
+* the page's type. */
+function useWidth() {
+	const [element, ref] = useState(null);
+	const [size, setSize] = useState({
+		width: 0,
+		em: 16
+	});
+	useEffect(() => {
+		if (!element) return;
+		const observer = new ResizeObserver(([entry]) => setSize({
+			width: Math.floor(entry.contentRect.width),
+			em: parseFloat(getComputedStyle(element).fontSize) || 16
+		}));
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [element]);
+	return [
+		ref,
+		size.width,
+		size.em
+	];
+}
+/** A nice ceiling for an axis and its three gridline values. */
+function ticksFor(max) {
+	if (!(max > 0)) return {
+		top: 1,
+		ticks: [
+			0,
+			.5,
+			1
+		]
+	};
+	const power = 10 ** Math.floor(Math.log10(max));
+	const step = [
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].map((m) => m * power).find((s) => s * 4 >= max) ?? power * 10;
+	const top = Math.ceil(max / step) * step;
+	return {
+		top,
+		ticks: [
+			0,
+			top / 2,
+			top
+		]
+	};
+}
+function Tooltip({ tip }) {
+	if (!tip) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ov-tip",
+		role: "tooltip",
+		style: {
+			left: tip.x,
+			top: tip.y
+		},
+		children: [/* @__PURE__ */ jsx("strong", { children: tip.title }), tip.lines.map((line) => /* @__PURE__ */ jsxs("span", {
+			className: "ov-tip-line",
+			children: [
+				line.color && /* @__PURE__ */ jsx("i", { style: { background: line.color } }),
+				/* @__PURE__ */ jsx("span", { children: line.label }),
+				/* @__PURE__ */ jsx("b", { children: line.value })
+			]
+		}, line.label))]
+	});
+}
+/** Bars per day (or per any label: `tick` shortens it on the axis), stacked by series, on one axis; hovering a bar lists
+* every series' value for it, and `onOpen` makes a bar a link. */
+function DayBars({ days, series, format = formatCompact, rows = 13, missing = "No runs started", tick = (day) => day.slice(5), onOpen }) {
+	const [ref, width, em] = useWidth();
+	const height = Math.round(rows * em);
+	const [tip, setTip] = useState(null);
+	const totals = days.map((_, i) => series.reduce((sum, s) => sum + (s.values[i] ?? 0), 0));
+	const { top, ticks } = ticksFor(Math.max(...totals));
+	const left = Math.round(3.4 * em);
+	const bottom = Math.round(1.8 * em);
+	const plotW = Math.max(0, width - left - 8);
+	const plotH = height - bottom - 8;
+	const slot = days.length ? plotW / days.length : 0;
+	const bar = Math.max(3, slot * .72);
+	const labelEvery = Math.max(1, Math.ceil(days.length / Math.max(1, Math.floor(plotW / (4.5 * em)))));
+	const labelGap = Math.ceil(4.5 * em / Math.max(slot, 1));
+	const y = (v) => 8 + plotH - v / top * plotH;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "ov-plot",
+		onMouseLeave: () => setTip(null),
+		children: [width > 0 && /* @__PURE__ */ jsxs("svg", {
+			width,
+			height,
+			role: "img",
+			"aria-label": `${series.map((s) => s.name).join(", ")} per day`,
+			children: [ticks.map((t) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				x1: left,
+				x2: width - 8,
+				y1: y(t),
+				y2: y(t),
+				className: "ov-gridline"
+			}), /* @__PURE__ */ jsx("text", {
+				x: left - em * .4,
+				y: y(t),
+				dominantBaseline: "middle",
+				className: "ov-axis",
+				textAnchor: "end",
+				children: format(t)
+			})] }, t)), days.map((day, i) => {
+				let base = 0;
+				const x = left + i * slot + (slot - bar) / 2;
+				const showTip = () => setTip({
+					x: Math.min(left + i * slot + slot + 8, width - em * 14),
+					y: 8,
+					title: `${day} · ${series.every((s) => s.values[i] === null) ? missing : format(totals[i] ?? 0)}`,
+					lines: series.map((s) => ({
+						label: s.name,
+						value: s.values[i] === null ? missing : format(s.values[i] ?? 0),
+						color: s.color
+					}))
+				});
+				return /* @__PURE__ */ jsxs("g", {
+					role: onOpen ? "button" : void 0,
+					tabIndex: onOpen ? 0 : void 0,
+					"aria-label": onOpen ? `Open ${day}` : void 0,
+					onFocus: onOpen ? showTip : void 0,
+					onBlur: onOpen ? () => setTip(null) : void 0,
+					onKeyDown: onOpen ? (event) => {
+						if (event.key === "Enter" || event.key === " ") {
+							event.preventDefault();
+							onOpen(i);
+						}
+					} : void 0,
+					children: [
+						series.map((s) => {
+							const v = s.values[i] ?? 0;
+							if (!v) return null;
+							const y0 = y(base);
+							base += v;
+							const y1 = y(base);
+							return /* @__PURE__ */ jsx("rect", {
+								x,
+								y: y1,
+								width: bar,
+								height: Math.max(2, y0 - y1 - 2),
+								rx: 2,
+								fill: s.color
+							}, s.name);
+						}),
+						(i === days.length - 1 || i % labelEvery === 0 && i + labelGap <= days.length - 1) && /* @__PURE__ */ jsx("text", {
+							x: x + bar / 2,
+							y: height - em * .35,
+							className: "ov-axis",
+							textAnchor: "middle",
+							children: tick(day)
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: left + i * slot,
+							y: 8,
+							width: slot,
+							height: plotH,
+							fill: "transparent",
+							style: onOpen ? { cursor: "pointer" } : void 0,
+							onClick: onOpen ? () => onOpen(i) : void 0,
+							onMouseEnter: showTip
+						})
+					]
+				}, day);
+			})]
+		}), /* @__PURE__ */ jsx(Tooltip, { tip })]
+	});
+}
+/** Ranked horizontal bars with the value and an optional note on each row; past `limit` rows the rest are counted. */
+function HBars({ rows, format = formatCompact, color = LIVE_SERIES[0], max, limit = 8 }) {
+	const top = max ?? Math.max(1, ...rows.map((row) => row.value));
+	if (!rows.length) return /* @__PURE__ */ jsx("p", {
+		className: "ov-empty",
+		children: "Nothing recorded."
+	});
+	const rest = rows.slice(limit);
+	return /* @__PURE__ */ jsxs("ol", {
+		className: "ov-hbars",
+		children: [rows.slice(0, limit).map((row) => {
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "ov-hbar-label",
+					title: row.label,
+					children: row.label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ov-hbar-track",
+					children: /* @__PURE__ */ jsx("span", { style: {
+						width: `${Math.max(1, row.value / top * 100)}%`,
+						background: row.color ?? color
+					} })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ov-hbar-value",
+					children: format(row.value)
+				}),
+				row.note && /* @__PURE__ */ jsx("span", {
+					className: "ov-hbar-note",
+					children: row.note
+				})
+			] });
+			return /* @__PURE__ */ jsx("li", { children: row.href ? /* @__PURE__ */ jsx("a", {
+				href: row.href,
+				children: content
+			}) : /* @__PURE__ */ jsx("div", { children: content }) }, row.label);
+		}), rest.length > 0 && /* @__PURE__ */ jsxs("li", {
+			className: "ov-hbars-more",
+			children: [
+				"+",
+				rest.length,
+				" more · ",
+				format(rest.reduce((a, row) => a + row.value, 0))
+			]
+		})]
+	});
+}
+/** A histogram of counts per bin; each bar's tooltip names its range and count. */
+function Histogram({ bins, format = formatCompact, color = LIVE_SERIES[0], unit, rows = 12 }) {
+	const [ref, width, em] = useWidth();
+	const height = Math.round(rows * em);
+	const [tip, setTip] = useState(null);
+	const first = bins.findIndex((b) => b.n > 0);
+	const last = bins.length - 1 - [...bins].reverse().findIndex((b) => b.n > 0);
+	const shown = first < 0 ? [] : bins.slice(first, last + 1);
+	const { top, ticks } = ticksFor(Math.max(...shown.map((b) => b.n), 1));
+	const left = Math.round(3 * em);
+	const bottom = Math.round(1.8 * em);
+	const plotW = Math.max(0, width - left - 8);
+	const plotH = height - bottom - 8;
+	const slot = shown.length ? plotW / shown.length : 0;
+	const y = (v) => 8 + plotH - v / top * plotH;
+	if (!shown.length) return /* @__PURE__ */ jsx("p", {
+		className: "ov-empty",
+		children: "Nothing recorded."
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "ov-plot",
+		onMouseLeave: () => setTip(null),
+		children: [width > 0 && /* @__PURE__ */ jsxs("svg", {
+			width,
+			height,
+			role: "img",
+			"aria-label": `Distribution of ${unit}`,
+			children: [ticks.map((t) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				x1: left,
+				x2: width - 8,
+				y1: y(t),
+				y2: y(t),
+				className: "ov-gridline"
+			}), /* @__PURE__ */ jsx("text", {
+				x: left - em * .4,
+				y: y(t),
+				dominantBaseline: "middle",
+				className: "ov-axis",
+				textAnchor: "end",
+				children: formatCompact(t)
+			})] }, t)), shown.map((bin, i) => /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("rect", {
+					x: left + i * slot + 2,
+					y: y(bin.n),
+					width: Math.max(3, slot - 4),
+					height: Math.max(bin.n ? 2 : 0, 8 + plotH - y(bin.n)),
+					rx: 2,
+					fill: color
+				}),
+				(i % Math.max(1, Math.ceil(shown.length / 6)) === 0 || i === shown.length - 1) && /* @__PURE__ */ jsx("text", {
+					x: left + i * slot + slot / 2,
+					y: height - em * .35,
+					className: "ov-axis",
+					textAnchor: "middle",
+					children: format(bin.lo)
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: left + i * slot,
+					y: 8,
+					width: slot,
+					height: plotH,
+					fill: "transparent",
+					onMouseEnter: () => setTip({
+						x: Math.min(left + i * slot + slot + 6, width - em * 14),
+						y: 8,
+						title: `${format(bin.lo)} to ${format(bin.hi)} ${unit}`,
+						lines: [{
+							label: "count",
+							value: String(bin.n)
+						}]
+					})
+				})
+			] }, i))]
+		}), /* @__PURE__ */ jsx(Tooltip, { tip })]
+	});
+}
+/** Lines over time on one axis (at most four series); the crosshair readout lists each series at the nearest time. A
+* `dots` series draws its points as marks (checkpoints) instead of a line; `axis` labels the time axis (default MM-DD). */
+function Lines({ series, format = formatCompact, rows = 13, axis, marks = [], bands = [] }) {
+	const [ref, width, em] = useWidth();
+	const height = Math.round(rows * em);
+	const [hover, setHover] = useState(null);
+	const gap = eventsGap(marks, bands);
+	if (gap) throw new RangeError(gap);
+	const all = series.flatMap((s) => s.points);
+	if (!all.length) return /* @__PURE__ */ jsx("p", {
+		className: "ov-empty",
+		children: "No history yet."
+	});
+	const times = [
+		...all.map((p) => p[0]),
+		...marks.map((m) => m.at),
+		...bands.flatMap((b) => [b.from, b.to])
+	];
+	const t0 = Math.min(...times);
+	const t1 = Math.max(...times);
+	const { top, ticks } = ticksFor(Math.max(...all.map((p) => p[1])));
+	const left = Math.round(3.4 * em);
+	const bottom = Math.round(1.8 * em);
+	const plotW = Math.max(0, width - left - 10);
+	const plotH = height - bottom - 8;
+	const x = (t) => left + (t1 > t0 ? (t - t0) / (t1 - t0) * plotW : 0);
+	const y = (v) => 8 + plotH - v / top * plotH;
+	const nearest = (points, t) => points.reduce((best, p) => Math.abs(p[0] - t) < Math.abs(best[0] - t) ? p : best, points[0]);
+	const day = (t) => new Date(t).toISOString().slice(5, 16).replace("T", " ");
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "ov-plot",
+		onMouseMove: (event) => {
+			const box = event.currentTarget.getBoundingClientRect();
+			const px = event.clientX - box.left;
+			setHover(px >= left ? t0 + (px - left) / Math.max(1, plotW) * (t1 - t0) : null);
+		},
+		onMouseLeave: () => setHover(null),
+		children: [
+			width > 0 && /* @__PURE__ */ jsxs("svg", {
+				width,
+				height,
+				role: "img",
+				"aria-label": series.map((s) => s.name).join(", "),
+				children: [
+					ticks.map((t) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+						x1: left,
+						x2: width - 10,
+						y1: y(t),
+						y2: y(t),
+						className: "ov-gridline"
+					}), /* @__PURE__ */ jsx("text", {
+						x: left - em * .4,
+						y: y(t),
+						dominantBaseline: "middle",
+						className: "ov-axis",
+						textAnchor: "end",
+						children: format(t)
+					})] }, t)),
+					[
+						t0,
+						(t0 + t1) / 2,
+						t1
+					].map((t, i) => /* @__PURE__ */ jsx("text", {
+						x: x(t),
+						y: height - em * .35,
+						className: "ov-axis",
+						textAnchor: i === 0 ? "start" : i === 2 ? "end" : "middle",
+						children: axis ? axis(t) : day(t).slice(0, 5)
+					}, i)),
+					bands.map((band, i) => /* @__PURE__ */ jsx(Band, {
+						band,
+						x: x(band.from),
+						y: 8,
+						width: x(band.to) - x(band.from),
+						height: plotH
+					}, `band-${i}`)),
+					series.map((s) => s.dots ? /* @__PURE__ */ jsx("g", { children: s.points.map((p) => /* @__PURE__ */ jsx("circle", {
+						cx: x(p[0]),
+						cy: y(p[1]),
+						r: Math.max(3, em / 5),
+						fill: s.color,
+						stroke: "var(--chart-live-surface, #fff)",
+						strokeWidth: 1.5
+					}, p[0])) }, s.name) : /* @__PURE__ */ jsxs("g", {
+						"data-series": s.name,
+						"data-dash": s.dash ?? "solid",
+						"data-marker": s.marker,
+						children: [/* @__PURE__ */ jsx("polyline", {
+							fill: "none",
+							stroke: s.color,
+							strokeWidth: Math.max(2, em / 8),
+							strokeLinejoin: "round",
+							strokeLinecap: s.dash === "dot" ? "round" : void 0,
+							strokeDasharray: dashArray(s.dash, em),
+							points: s.points.map((p) => `${x(p[0])},${y(p[1])}`).join(" ")
+						}), s.marker && (s.points.length <= 30 ? s.points : s.points.slice(-1)).map((p) => /* @__PURE__ */ jsx("path", {
+							d: markerPath(s.marker, x(p[0]), y(p[1]), Math.max(3, em / 5)),
+							fill: s.color,
+							stroke: "var(--chart-live-surface, var(--chart-canvas))",
+							strokeWidth: 1.5
+						}, p[0]))]
+					}, s.name)),
+					[...marks].sort((a, b) => a.at - b.at).map((mark, i) => /* @__PURE__ */ jsx(Mark, {
+						mark,
+						x: x(mark.at),
+						top: 8,
+						bottom: 8 + plotH,
+						row: i % 3,
+						em,
+						flip: x(mark.at) > left + plotW * .62
+					}, `mark-${i}`)),
+					hover !== null && /* @__PURE__ */ jsx("line", {
+						x1: x(hover),
+						x2: x(hover),
+						y1: 8,
+						y2: 8 + plotH,
+						className: "ov-crosshair"
+					}),
+					hover !== null && series.map((s) => {
+						const p = s.points.length ? nearest(s.points, hover) : null;
+						return p ? /* @__PURE__ */ jsx("circle", {
+							cx: x(p[0]),
+							cy: y(p[1]),
+							r: Math.max(4, em / 4),
+							fill: s.color,
+							stroke: "var(--chart-live-surface, #fff)",
+							strokeWidth: 2
+						}, s.name) : null;
+					})
+				]
+			}),
+			hover !== null && /* @__PURE__ */ jsx(Tooltip, { tip: {
+				x: Math.min(x(hover) + 10, width - em * 14),
+				y: 8,
+				title: day(hover),
+				lines: series.filter((s) => s.points.length).map((s) => {
+					const p = nearest(s.points, hover);
+					return {
+						label: s.label ? s.label(p[0]) : s.name,
+						value: format(p[1]),
+						color: s.color
+					};
+				})
+			} }),
+			series.length > 1 && series.some((s) => s.dash || s.marker) && /* @__PURE__ */ jsx("ul", {
+				className: "ov-key",
+				"aria-label": "Series",
+				children: series.map((s) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("svg", {
+					width: em * 2,
+					height: em,
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ jsx("line", {
+						x1: 0,
+						x2: em * 2,
+						y1: em / 2,
+						y2: em / 2,
+						stroke: s.color,
+						strokeWidth: Math.max(2, em / 8),
+						strokeDasharray: dashArray(s.dash, em),
+						strokeLinecap: s.dash === "dot" ? "round" : void 0
+					}), s.marker && /* @__PURE__ */ jsx("path", {
+						d: markerPath(s.marker, em, em / 2, Math.max(3, em / 5)),
+						fill: s.color
+					})]
+				}), s.name] }, s.name))
+			}),
+			/* @__PURE__ */ jsx(EventList, {
+				marks,
+				bands,
+				format: axis ?? ((t) => day(t))
+			})
+		]
+	});
+}
+function dashArray(dash, em) {
+	return dash === "dash" ? `${Math.round(em * .55)} ${Math.round(em * .3)}` : dash === "dot" ? `0.1 ${Math.round(em * .35)}` : void 0;
+}
+/** A shaded span under the data; a `missing` span is hatched because it has no data. */
+function Band({ band, x, y, width, height }) {
+	return /* @__PURE__ */ jsxs("g", {
+		"data-band": band.kind,
+		"data-hatched": band.kind === "missing" ? "true" : void 0,
+		children: [
+			/* @__PURE__ */ jsx("title", { children: band.label }),
+			/* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width: Math.max(0, width),
+				height,
+				className: band.kind === "missing" ? "ov-hatch-bg" : `ov-band ov-band-${band.kind}`
+			}),
+			band.kind === "missing" && /* @__PURE__ */ jsx("path", {
+				d: hatchPath(x, y, width, height),
+				className: "ov-hatch"
+			})
+		]
+	});
+}
+/** A vertical event rule with its label; kinds differ by stroke pattern and the died cross as well as colour. */
+function Mark({ mark, x, top, bottom, row, em, flip }) {
+	const s = Math.max(3, em / 4);
+	return /* @__PURE__ */ jsxs("g", {
+		"data-mark": mark.kind,
+		children: [
+			/* @__PURE__ */ jsx("title", { children: mark.label }),
+			/* @__PURE__ */ jsx("line", {
+				x1: x,
+				x2: x,
+				y1: top,
+				y2: bottom,
+				className: `ov-mark ov-mark-${mark.kind}`
+			}),
+			mark.kind === "died" && /* @__PURE__ */ jsx("path", {
+				d: `M${x - s} ${bottom - 2 * s}L${x + s} ${bottom}M${x - s} ${bottom}L${x + s} ${bottom - 2 * s}`,
+				className: "ov-mark ov-mark-died"
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: flip ? x - em * .3 : x + em * .3,
+				y: top + em * (.9 + row),
+				textAnchor: flip ? "end" : "start",
+				className: "ov-mark-label",
+				children: mark.label
+			})
+		]
+	});
+}
+/** Every mark and band as text, in time order: the table form of the events drawn on the plot. */
+function EventList({ marks, bands, format }) {
+	if (!marks.length && !bands.length) return null;
+	const items = [...marks.map((m) => ({
+		at: m.at,
+		kind: m.kind,
+		text: `${m.label} · ${format(m.at)}`
+	})), ...bands.map((b) => ({
+		at: b.from,
+		kind: b.kind,
+		text: `${b.label} · ${format(b.from)} to ${format(b.to)}${b.kind === "missing" ? " · no data" : ""}`
+	}))].sort((a, b) => a.at - b.at);
+	return /* @__PURE__ */ jsx("ul", {
+		className: "ov-events",
+		"aria-label": "Recorded events",
+		children: items.map((item, i) => /* @__PURE__ */ jsxs("li", {
+			"data-kind": item.kind,
+			children: [/* @__PURE__ */ jsx("i", {
+				className: `ov-event-swatch ov-event-${item.kind}`,
+				"aria-hidden": "true"
+			}), item.text]
+		}, i))
+	});
+}
+const SEGMENT_TONES = [
+	"var(--chart-accent)",
+	"var(--chart-tier-c)",
+	"var(--chart-muted)"
+];
+/** A used-of-total meter with its numbers. With `segments` it is a part-of-whole bar: the remainder of `total` that no
+* segment accounts for is drawn hatched and labelled `untraced`, and a missing total hatches the whole track. */
+function Meter({ used, total, format = formatCompact, tone, text, segments, untraced = "untraced" }) {
+	if (segments) return /* @__PURE__ */ jsx(SegmentMeter, {
+		segments,
+		total,
+		format,
+		text,
+		untraced
+	});
+	const share = used !== null && used !== void 0 && total ? Math.min(1, used / total) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ov-meter",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "ov-meter-track",
+			children: /* @__PURE__ */ jsx("span", { style: {
+				width: `${(share ?? 0) * 100}%`,
+				background: tone ?? (share !== null && share > .9 ? "var(--chart-live-danger, #d85050)" : share !== null && share > .7 ? "var(--chart-live-warning, #c98500)" : LIVE_SERIES[0])
+			} })
+		}), /* @__PURE__ */ jsx("span", {
+			className: "ov-meter-text",
+			children: text ?? `${format(used ?? NaN)} of ${format(total ?? NaN)} · ${formatShare(share)}`
+		})]
+	});
+}
+function SegmentMeter({ segments, total, format, text, untraced }) {
+	for (const segment of segments) if (segment.value !== null && (!Number.isFinite(segment.value) || segment.value < 0)) throw new RangeError(`${segment.label}: a segment value must be a nonnegative finite number or null.`);
+	const known = segments.reduce((sum, segment) => sum + (segment.value ?? 0), 0);
+	const whole = total !== null && total !== void 0 && Number.isFinite(total) && total > 0 ? total : null;
+	if (whole !== null && known > whole * (1 + 1e-9)) throw new RangeError(`Segments sum to ${known}, more than the total ${whole}.`);
+	const remainder = whole === null ? 0 : whole - known;
+	const parts = [...segments.map((segment, i) => ({
+		...segment,
+		color: segment.color ?? SEGMENT_TONES[i % SEGMENT_TONES.length],
+		remainder: false
+	})), ...remainder > whole * 1e-9 ? [{
+		label: untraced,
+		value: remainder,
+		kind: "untraced",
+		color: void 0,
+		remainder: true
+	}] : []];
+	const share = (value) => whole === null ? null : value / whole;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ov-meter",
+		"data-segmented": "true",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: `ov-meter-track${whole === null ? " ov-hatched" : ""}`,
+				"data-hatched": whole === null ? "true" : void 0,
+				"aria-hidden": "true",
+				children: whole !== null && parts.filter((part) => part.value !== null && part.value > 0).map((part) => /* @__PURE__ */ jsx("span", {
+					"data-segment": part.label,
+					"data-hatched": part.kind === "untraced" ? "true" : void 0,
+					className: part.kind === "untraced" ? "ov-hatched" : void 0,
+					style: {
+						width: `${part.value / whole * 100}%`,
+						background: part.kind === "untraced" ? void 0 : part.color
+					}
+				}, part.label))
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "ov-meter-key",
+				children: parts.map((part) => /* @__PURE__ */ jsxs("li", {
+					"data-segment": part.label,
+					children: [
+						/* @__PURE__ */ jsx("i", {
+							className: part.kind === "untraced" || part.value === null ? "ov-hatched" : void 0,
+							style: part.kind === "untraced" || part.value === null ? void 0 : { background: part.color },
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ jsx("span", { children: part.label }),
+						/* @__PURE__ */ jsx("b", { children: part.value === null ? "not recorded" : `${format(part.value)}${whole === null ? "" : ` · ${formatShare(share(part.value))}`}` })
+					]
+				}, part.label))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "ov-meter-text",
+				children: text ?? (whole === null ? "total not recorded" : `${format(known)} of ${format(whole)} accounted · ${formatShare(known / whole)}`)
+			})
+		]
+	});
+}
+/** A small line of one series for a row in a list (one hue; the row's label carries identity). */
+function Spark({ points, max = 1, color = LIVE_SERIES[0] }) {
+	if (points.length < 2) return /* @__PURE__ */ jsx("span", {
+		className: "ov-spark-empty",
+		children: "collecting"
+	});
+	const t0 = points[0][0];
+	const t1 = points.at(-1)[0];
+	const w = 160;
+	const h = 32;
+	const domain = Math.max(1, max);
+	const d = points.map((p) => `${(p[0] - t0) / Math.max(1, t1 - t0) * w},${30 - Math.min(domain, p[1]) / domain * 28}`).join(" ");
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: `0 0 ${w} ${h}`,
+		className: "ov-spark",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("polyline", {
+			fill: "none",
+			stroke: color,
+			strokeWidth: 1.6,
+			points: d
+		})
+	});
+}
+/** One bar per row on a shared time axis (who worked when): each row's bar spans its start to its end, coloured by its
+* state; hovering a span names it, its state and its span. Times are epoch ms; `axis` labels the time axis.
+* `lanes` give a row several spans (the same shape as the static `timeline`); a span with `end: null` is open and runs
+* to `now`. `marks` draw recorded events across every lane, and states in `hatch` are drawn hatched (no data). */
+function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, hatch = ["missing", "untraced"] }) {
+	const [ref, width, em] = useWidth();
+	const [tip, setTip] = useState(null);
+	const lanes = laneInput ?? (rows ?? []).map((row, i) => ({
+		id: `${row.label}-${i}`,
+		label: row.label,
+		spans: [{
+			start: row.start,
+			end: row.end,
+			state: row.state,
+			note: row.note
+		}]
+	}));
+	const gap = eventsGap(marks);
+	if (gap) throw new RangeError(gap);
+	if (now !== void 0 && !Number.isFinite(now)) throw new RangeError("now must be a finite time.");
+	if (laneInput) for (const lane of lanes) for (const s of lane.spans) {
+		if (!Number.isFinite(s.start) || s.end !== null && (!Number.isFinite(s.end) || s.end < s.start)) throw new RangeError(`${lane.label}: span times must be finite and end at or after their start.`);
+		if (s.end === null && (now === void 0 || now < s.start)) throw new RangeError(`${lane.label}: an open span needs a now at or after its start.`);
+	}
+	const spans = lanes.flatMap((lane) => lane.spans);
+	if (!spans.length) return /* @__PURE__ */ jsx("p", {
+		className: "ov-empty",
+		children: "No agent has started."
+	});
+	const ends = (s) => s.end ?? now;
+	const rowH = Math.round(1.25 * em);
+	const labelW = Math.min(Math.round(13 * em), Math.round(width * .32));
+	const top = marks.length ? 4 + Math.round(Math.min(3, marks.length) * em + .3 * em) : 4;
+	const bottom = Math.round(1.8 * em);
+	const height = top + lanes.length * rowH + bottom;
+	const times = [
+		...spans.flatMap((s) => [s.start, ends(s)]),
+		...marks.map((m) => m.at),
+		...now === void 0 ? [] : [now]
+	];
+	const t0 = Math.min(...times);
+	const t1 = Math.max(...times, t0 + 6e4);
+	const plotW = Math.max(0, width - labelW - 10);
+	const x = (t) => labelW + (t - t0) / (t1 - t0) * plotW;
+	const fallback = colors.unknown ?? "var(--chart-live-faint, var(--chart-muted))";
+	const hatched = new Set(hatch);
+	const plotBottom = top + lanes.length * rowH;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "ov-plot",
+		onMouseLeave: () => setTip(null),
+		children: [
+			width > 0 && /* @__PURE__ */ jsxs("svg", {
+				width,
+				height,
+				role: "img",
+				"aria-label": `${lanes.length} ${laneInput ? "lanes" : "agents"} over time`,
+				children: [
+					[
+						0,
+						.25,
+						.5,
+						.75,
+						1
+					].map((f) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+						x1: labelW + f * plotW,
+						x2: labelW + f * plotW,
+						y1: top,
+						y2: plotBottom,
+						className: "ov-gridline"
+					}), /* @__PURE__ */ jsx("text", {
+						x: labelW + f * plotW,
+						y: height - em * .35,
+						className: "ov-axis",
+						textAnchor: f === 0 ? "start" : f === 1 ? "end" : "middle",
+						children: axis(t0 + f * (t1 - t0))
+					})] }, f)),
+					lanes.map((lane, i) => {
+						const y = top + i * rowH;
+						return /* @__PURE__ */ jsxs("g", {
+							"data-lane": lane.id,
+							children: [
+								/* @__PURE__ */ jsx("rect", {
+									x: 0,
+									y,
+									width,
+									height: rowH,
+									fill: "transparent",
+									onMouseEnter: () => setTip({
+										x: Math.min(x(ends(lane.spans.at(-1) ?? { end: t1 })) + 8, width - em * 16),
+										y: Math.max(0, y - em),
+										title: lane.label,
+										lines: lane.spans.flatMap((s) => [{
+											label: s.end === null ? `${s.state} (open)` : s.state,
+											value: span(s.start, ends(s)),
+											color: hatched.has(s.state) ? void 0 : colors[s.state] ?? fallback
+										}, ...s.note ? [{
+											label: s.note,
+											value: ""
+										}] : []])
+									})
+								}),
+								/* @__PURE__ */ jsx("text", {
+									x: labelW - em * .5,
+									y: y + rowH / 2,
+									dominantBaseline: "middle",
+									textAnchor: "end",
+									className: "ov-axis ov-gantt-label",
+									children: lane.label.length > 26 ? `${lane.label.slice(0, 25)}…` : lane.label
+								}),
+								lane.spans.map((s, j) => {
+									const color = colors[s.state] ?? fallback;
+									const bx = x(s.start), bw = Math.max(2, x(ends(s)) - bx), by = y + rowH * .18, bh = rowH * .64;
+									const open = s.end === null;
+									return /* @__PURE__ */ jsx("g", {
+										"data-state": s.state,
+										"data-open": open ? "true" : void 0,
+										"data-hatched": hatched.has(s.state) ? "true" : void 0,
+										onMouseEnter: () => setTip({
+											x: Math.min(bx + bw + 8, width - em * 16),
+											y: Math.max(0, y - em),
+											title: lane.label,
+											lines: [{
+												label: open ? `${s.state} (open)` : s.state,
+												value: span(s.start, ends(s)),
+												color: hatched.has(s.state) ? void 0 : color
+											}, ...s.note ? [{
+												label: s.note,
+												value: ""
+											}] : []]
+										}),
+										children: hatched.has(s.state) ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+											x: bx,
+											y: by,
+											width: bw,
+											height: bh,
+											className: "ov-hatch-bg"
+										}), /* @__PURE__ */ jsx("path", {
+											d: hatchPath(bx, by, bw, bh, 4),
+											className: "ov-hatch"
+										})] }) : /* @__PURE__ */ jsx("rect", {
+											x: bx,
+											y: by,
+											width: bw,
+											height: bh,
+											rx: 2,
+											fill: color,
+											className: open ? "ov-gantt-open" : void 0
+										})
+									}, j);
+								})
+							]
+						}, lane.id);
+					}),
+					now !== void 0 && /* @__PURE__ */ jsx("line", {
+						x1: x(now),
+						x2: x(now),
+						y1: top,
+						y2: plotBottom,
+						className: "ov-now",
+						"data-now": "true"
+					}),
+					[...marks].sort((a, b) => a.at - b.at).map((mark, i) => /* @__PURE__ */ jsx(Mark, {
+						mark,
+						x: x(mark.at),
+						top: 4,
+						bottom: plotBottom,
+						row: i % 3,
+						em,
+						flip: x(mark.at) > labelW + plotW * .62
+					}, `mark-${i}`))
+				]
+			}),
+			/* @__PURE__ */ jsx(Tooltip, { tip }),
+			/* @__PURE__ */ jsx(EventList, {
+				marks,
+				bands: [],
+				format: axis
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/figure-view.tsx
+/** Embeds a static Figure or Refusal in React: the wide or phone render chosen by the container's width, the data
+* table in a disclosure. The SVG and table strings come from this library's figure functions, which escape input. */
+function FigureView({ figure, presentation = "chart" }) {
+	const [ref, width] = useWidth();
+	if (isRefusal(figure)) return /* @__PURE__ */ jsx("p", {
+		className: "ov-refusal",
+		role: "note",
+		"data-refused": figure.id,
+		children: figure.refused
+	});
+	const layout = width > 0 && width < 720 ? figure.svg.narrow ? "narrow" : "table" : "wide";
+	const plot = layout === "wide" ? figure.svg.wide : layout === "narrow" ? figure.svg.narrow : figure.table;
+	const method = [
+		figure.note.method,
+		figure.note.n,
+		...figure.note.exclusions
+	].join(" ");
+	return /* @__PURE__ */ jsxs("figure", {
+		ref,
+		className: "tgc-figure tgc-figure-chart tgc-figure-view",
+		"data-figure": figure.id,
+		"data-layout": layout,
+		"aria-label": figure.finding,
+		children: [
+			presentation === "report" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("h3", {
+				className: "tgc-finding",
+				children: figure.finding
+			}), /* @__PURE__ */ jsx("p", {
+				className: "tgc-lede",
+				children: figure.lede
+			})] }),
+			/* @__PURE__ */ jsx("div", {
+				className: `tgc-view-plot tgc-view-${layout}`,
+				role: figure.svg.interactive ? "group" : "img",
+				"aria-label": `${figure.finding} ${figure.lede}`,
+				style: layout === "narrow" ? { maxWidth: 358 } : void 0,
+				dangerouslySetInnerHTML: { __html: plot }
+			}),
+			/* @__PURE__ */ jsxs("details", {
+				className: "tgc-data",
+				children: [
+					/* @__PURE__ */ jsx("summary", { children: "Data and method" }),
+					/* @__PURE__ */ jsx("p", {
+						className: "tgc-lede",
+						children: figure.lede
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "tgc-read",
+						children: figure.read
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "tgc-read",
+						children: method
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "tgc-scroll",
+						role: "region",
+						"aria-label": `${figure.finding} data`,
+						tabIndex: 0,
+						dangerouslySetInnerHTML: { __html: figure.table }
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DayBars, FigureView, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };