@tangle-network/charts 0.4.0 → 0.7.0

package/dist/react/index.js

@@ -1,3 +1,4 @@
+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
@@ -246,7 +247,7 @@ function StackedBarChart(props) {
 	validate(props);
 	const bySeries = new Map(series.map((entry) => [entry.id, entry]));
 	const formatted = (value) => isValue(value) ? formatValue(value) : unavailableLabel;
-	const summary = (bucket) => `${bucket.label}: total ${formatted(bucket.total)}` + (hasGap(bucket) ? ` — ${unavailableLabel}` : "") + (bucket.segments.length ? ` — ${bucket.segments.map((segment) => `${bySeries.get(segment.seriesId).label} ${formatted(segment.value)}`).join(", ")}` : "");
+	const summary = (bucket) => `${bucket.label}: total ${formatted(bucket.total)}` + (hasGap(bucket) ? ` — ${unavailableLabel}` : "") + (bucket.segments.length ? ` — ${bucket.segments.map((segment) => `${bySeries.get(segment.seriesId).label} ${formatted(segment.value)}`).join(", ")}` : "") + (bucket.description ? ` — ${bucket.description}` : "");
 	const activeIndex = selectedBucketId === null ? -1 : buckets.findIndex(({ id }) => id === selectedBucketId);
 	const activeBucket = activeIndex >= 0 ? buckets[activeIndex] : null, marginTop = 12, marginRight = 16, marginLeft = 56;
 	const chartHeight = 220;
@@ -489,7 +490,8 @@ function StackedBarChart(props) {
 						bySeries.get(segment.seriesId).label,
 						": ",
 						formatted(segment.value)
-					] }, segment.seriesId))
+					] }, segment.seriesId)),
+					activeBucket.description && /* @__PURE__ */ jsx("div", { children: activeBucket.description })
 				]
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -1069,17 +1071,24 @@ function Histogram({ bins, format = formatCompact, color = LIVE_SERIES[0], unit,
 }
 /** 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 }) {
+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 t0 = Math.min(...all.map((p) => p[0]));
-	const t1 = Math.max(...all.map((p) => p[0]));
+	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);
@@ -1098,87 +1107,234 @@ function Lines({ series, format = formatCompact, rows = 13, axis }) {
 			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)),
-				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__ */ jsx("polyline", {
-					fill: "none",
-					stroke: s.color,
-					strokeWidth: Math.max(2, em / 8),
-					strokeLinejoin: "round",
-					points: s.points.map((p) => `${x(p[0])},${y(p[1])}`).join(" ")
-				}, s.name)),
-				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", {
+		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(4, em / 4),
+						r: Math.max(3, em / 5),
 						fill: s.color,
 						stroke: "var(--chart-live-surface, #fff)",
-						strokeWidth: 2
-					}, s.name) : null;
+						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
+					};
 				})
-			]
-		}), 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 used-of-total meter with its numbers. */
-function Meter({ used, total, format = formatCompact, tone, text }) {
+/** 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",
@@ -1194,6 +1350,64 @@ function Meter({ used, total, format = formatCompact, tone, text }) {
 		})]
 	});
 }
+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", {
@@ -1219,97 +1433,254 @@ function Spark({ points, max = 1, color = LIVE_SERIES[0] }) {
 	});
 }
 /** 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 row names it, its state and its span. Times are epoch ms; `axis` labels the time axis. */
-function Gantt({ rows, colors, axis, span }) {
+* 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);
-	if (!rows.length) return /* @__PURE__ */ jsx("p", {
+	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 = 4;
+	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 + rows.length * rowH + bottom;
-	const t0 = Math.min(...rows.map((row) => row.start));
-	const t1 = Math.max(...rows.map((row) => row.end), t0 + 6e4);
+	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 ?? "#8e8e8e";
+	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": `${rows.length} 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: top + rows.length * rowH,
-				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)), rows.map((row, i) => {
-				const y = top + i * rowH;
-				const color = colors[row.state] ?? fallback;
-				return /* @__PURE__ */ jsxs("g", {
-					onMouseEnter: () => setTip({
-						x: Math.min(x(row.end) + 8, width - em * 16),
-						y: Math.max(0, y - em),
-						title: row.label,
-						lines: [{
-							label: row.state,
-							value: span(row.start, row.end),
-							color
-						}, ...row.note ? [{
-							label: row.note,
-							value: ""
-						}] : []]
+		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);
 					}),
-					children: [
-						/* @__PURE__ */ jsx("rect", {
-							x: 0,
-							y,
-							width,
-							height: rowH,
-							fill: "transparent"
-						}),
-						/* @__PURE__ */ jsx("text", {
-							x: labelW - em * .5,
-							y: y + rowH / 2,
-							dominantBaseline: "middle",
-							textAnchor: "end",
-							className: "ov-axis ov-gantt-label",
-							children: row.label.length > 26 ? `${row.label.slice(0, 25)}…` : row.label
-						}),
-						/* @__PURE__ */ jsx("rect", {
-							x: x(row.start),
-							y: y + rowH * .18,
-							width: Math.max(2, x(row.end) - x(row.start)),
-							height: rowH * .64,
-							rx: 2,
-							fill: color
-						})
-					]
-				}, `${row.label}-${i}`);
-			})]
-		}), /* @__PURE__ */ jsx(Tooltip, { tip })]
+					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, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };
+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 };