admin: draw the overview charts with visx

the hand-written scale, tick, stacking and arc math is replaced by visx 4.0.0
primitives; rendering, colours and themes stay the app's own. all four charts
share one hover treatment: the client chart gains the tooltip and dimming the
query timeline had, the donuts gain both, an open tooltip follows a data
refresh instead of going stale, and it retires when the window rolls. the
timeline's third series is named allowed instead of other, and the client
chart's other aggregate disappears from a window where it counted nothing.
licenses gain the isc text for the bundled d3 modules.

admin/src/features/overview/ClientChart.tsx

@@ -2,56 +2,42 @@
  * Client activity over the same window as the query-volume chart: one stacked
  * series per named client, plus everything outside the top eight as "Other".
  *
- * The x-axis is the timeseries endpoint's own bucket alignment, so the two
- * charts stack directly above one another and a spike in one is at the same
- * horizontal position in the other. Colour keys on the client string, so a
- * client that changes rank between polls keeps its colour.
+ * The x-axis is derived from this response's own `since` and `bucket_seconds`,
+ * which the API aligns with the timeseries endpoint's buckets, so the two charts
+ * stack directly above one another and a spike in one is at the same horizontal
+ * position in the other. Colour keys on the client string, so a client that
+ * changes rank between polls keeps its colour.
  */
 
-import { useEffect, useRef, useState } from "react";
 import * as stylex from "@stylexjs/stylex";
+import { Group } from "@visx/group";
+import { BarStack } from "@visx/shape";
 import { formatTime } from "@/lib/format";
 import type { StatsClients } from "@/lib/types";
 import { styles as shared } from "@/ui/styles";
 import { colors } from "@/ui/tokens.stylex";
-import { layoutStacked } from "./chartLayout";
 import { clientLabel, useClientNames, type ClientNames } from "@/features/clients/clientNames";
+import {
+	BucketOverlay,
+	CHART_HEIGHT,
+	ChartFrame,
+	ChartRoot,
+	ChartTooltip,
+	EmptyChart,
+	StackSegment,
+	bandScale,
+	labelTickValues,
+	plotArea,
+	slotCenter,
+	useActiveIndex,
+	useMeasuredWidth,
+	valueScale,
+	valueTicks,
+	type TooltipContent,
+} from "./chartKit";
 import { OTHER_KEY, clientKey, seriesColor } from "./seriesColors";
 
-const CHART_HEIGHT = 240;
-const FALLBACK_WIDTH = 640;
-
 const styles = stylex.create({
-	empty: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		height: CHART_HEIGHT,
-		borderRadius: "0.25rem",
-		borderWidth: 1,
-		borderStyle: "dashed",
-		borderColor: colors.borderStrong,
-		fontSize: "0.875rem",
-		lineHeight: "1.25rem",
-		color: colors.textMuted,
-	},
-	root: {
-		position: "relative",
-	},
-	gridLine: {
-		stroke: colors.border,
-	},
-	axisLine: {
-		stroke: colors.borderStrong,
-	},
-	axisLabel: {
-		fill: colors.textMuted,
-		fontSize: "10px",
-	},
-	/** The hairline separating touching segments is the page ground, not a colour. */
-	segment: {
-		stroke: colors.surface,
-	},
 	legend: {
 		marginTop: "0.5rem",
 		display: "flex",
@@ -80,31 +66,6 @@ const styles = stylex.create({
 	swatchColor: (color: string) => ({ backgroundColor: color }),
 });
 
-function useContainerWidth(): [React.RefObject<HTMLDivElement | null>, number] {
-	const ref = useRef<HTMLDivElement>(null);
-	const [width, setWidth] = useState(0);
-	useEffect(() => {
-		const el = ref.current;
-		if (el === null) return;
-		setWidth(el.clientWidth);
-		if (typeof ResizeObserver === "undefined") return;
-		const observer = new ResizeObserver(() => setWidth(el.clientWidth));
-		observer.observe(el);
-		return () => observer.disconnect();
-	}, []);
-	return [ref, width];
-}
-
-const compact = new Intl.NumberFormat(undefined, { notation: "compact" });
-
-function formatTick(ts: number, bucketSeconds: number): string {
-	const date = new Date(ts * 1000);
-	if (bucketSeconds >= 86_400) {
-		return new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" }).format(date);
-	}
-	return new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit" }).format(date);
-}
-
 interface Series {
 	key: string;
 	label: string;
@@ -115,10 +76,11 @@ interface Series {
 }
 
 /**
- * "Other" last, so it sits at the top of every column rather than under a
- * client, and always present: the response always carries the series, and a
- * legend that dropped it on a quiet period would make the reader think the
- * chart's clients were all of them.
+ * "Other" last, so it sits at the top of every column rather than under a client,
+ * and dropped entirely when it counted nothing across the window: an aggregation
+ * bucket that aggregated nothing is a legend entry, a stack key, a tooltip row
+ * and a table column all saying zero. The named clients stay at zero, because a
+ * client that went quiet is something the reader wants to see.
  */
 function seriesOf(data: StatsClients, names: ClientNames): Series[] {
 	const named = data.clients.map((client) => ({
@@ -131,119 +93,119 @@ function seriesOf(data: StatsClients, names: ClientNames): Series[] {
 		color: seriesColor(clientKey(client.client)),
 		buckets: client.buckets,
 	}));
+	if (data.other.every((count) => count === 0)) return named;
 	return [
 		...named,
 		{ key: OTHER_KEY, label: "Other", address: null, color: seriesColor(OTHER_KEY), buckets: data.other },
 	];
 }
 
+/** One column: the timestamp plus one entry per series, keyed by the series key. */
+type Column = { ts: number } & Record<string, number>;
+
 export default function ClientChart({ data }: { data: StatsClients }) {
-	const [containerRef, measuredWidth] = useContainerWidth();
+	const [containerRef, width] = useMeasuredWidth();
+	// A hover survives a re-render only while it still names the same bucket at
+	// the same place: a poll that rolls the window, or a resize, retires it.
+	const hovered = useActiveIndex(`${data.since}:${data.bucket_seconds}:${data.other.length}:${width}`);
 	const names = useClientNames();
-	const width = measuredWidth > 0 ? measuredWidth : FALLBACK_WIDTH;
+
 	const series = seriesOf(data, names);
 	const bucketCount = data.other.length;
+	const columns: Column[] = Array.from({ length: bucketCount }, (_, i) => {
+		const column: Column = { ts: data.since + i * data.bucket_seconds };
+		for (const one of series) column[one.key] = one.buckets[i] ?? 0;
+		return column;
+	});
 
-	if (bucketCount === 0) {
-		return (
-			<div ref={containerRef} {...stylex.props(styles.empty)}>
-				No queries in this period.
-			</div>
-		);
+	if (bucketCount === 0 || columns.every((column) => series.every((one) => column[one.key] === 0))) {
+		return <EmptyChart containerRef={containerRef} />;
 	}
 
-	const columns = Array.from({ length: bucketCount }, (_, i) => ({
-		ts: data.since + i * data.bucket_seconds,
-		values: series.map((one) => one.buckets[i] ?? 0),
-	}));
-	if (columns.every((column) => column.values.every((value) => value === 0))) {
-		return (
-			<div ref={containerRef} {...stylex.props(styles.empty)}>
-				No queries in this period.
-			</div>
-		);
-	}
+	const timestamps = columns.map((column) => column.ts);
+	const totals = columns.map((column) => series.reduce((sum, one) => sum + column[one.key], 0));
+	const plot = plotArea(width);
+	const xScale = bandScale(timestamps, plot);
+	// Every series here is a disjoint part of the whole rather than a highlighted
+	// subset of a separately reported total, so the tallest column's own sum is
+	// the scale.
+	const yScale = valueScale(Math.max(...totals), [plot.bottom, plot.y]);
+	const yTicks = valueTicks(yScale);
+	const colorOf = new Map(series.map((one) => [one.key, one.color]));
 
-	const layout = layoutStacked(columns, width, CHART_HEIGHT);
-	const baseline = layout.plot.y + layout.plot.height;
+	function tooltipOf(index: number): TooltipContent {
+		return {
+			title: formatTime(columns[index].ts),
+			rows: [
+				{ key: "queries", label: "Queries", value: String(totals[index]) },
+				...series.map((one) => ({
+					key: one.key,
+					label: one.label,
+					color: one.color,
+					value: String(columns[index][one.key]),
+				})),
+			],
+		};
+	}
 
 	return (
-		<div ref={containerRef} {...stylex.props(styles.root)}>
+		<ChartRoot containerRef={containerRef}>
 			<svg
 				role="img"
 				aria-label={`Client activity over time, ${bucketCount} buckets, ${series.length} series`}
 				width="100%"
 				height={CHART_HEIGHT}
 				viewBox={`0 0 ${width} ${CHART_HEIGHT}`}
+				onMouseLeave={hovered.clear}
 			>
-				{layout.yTicks.map((tick) => (
-					<g key={tick.value}>
-						<line
-							x1={layout.plot.x}
-							x2={layout.plot.x + layout.plot.width}
-							y1={tick.y}
-							y2={tick.y}
-							{...stylex.props(styles.gridLine)}
-						/>
-						<text
-							x={layout.plot.x - 6}
-							y={tick.y}
-							textAnchor="end"
-							dominantBaseline="middle"
-							{...stylex.props(styles.axisLabel, shared.tabularNums)}
-						>
-							{compact.format(tick.value)}
-						</text>
-					</g>
-				))}
-				<line
-					x1={layout.plot.x}
-					x2={layout.plot.x + layout.plot.width}
-					y1={baseline}
-					y2={baseline}
-					{...stylex.props(styles.axisLine)}
+				<ChartFrame
+					plot={plot}
+					yScale={yScale}
+					yTicks={yTicks}
+					xScale={xScale}
+					xTickValues={labelTickValues(timestamps, plot.width)}
+					bucketSeconds={data.bucket_seconds}
 				/>
-				{layout.xTicks.map((tick) => (
-					<text
-						key={tick.ts}
-						x={tick.x}
-						y={baseline + 14}
-						textAnchor="middle"
-						{...stylex.props(styles.axisLabel)}
-					>
-						{formatTick(tick.ts, data.bucket_seconds)}
-					</text>
-				))}
-				{layout.columns.map((column) => (
-					<g key={column.ts}>
-						{column.segments.map((rect, index) =>
-							rect.height <= 0 ? null : (
-								<rect
-									key={series[index].key}
-									x={rect.x}
-									y={rect.y}
-									width={rect.width}
-									height={rect.height}
-									fill={series[index].color}
-									strokeWidth={rect.width > 3 ? 1 : 0}
-									{...stylex.props(styles.segment)}
-								/>
-							),
-						)}
-						<rect
-							x={column.slot.x}
-							y={column.slot.y}
-							width={column.slot.width}
-							height={column.slot.height}
-							fill="transparent"
-						>
-							<title>
-								{`${formatTime(column.ts)}: ${column.total} ${column.total === 1 ? "query" : "queries"}`}
-							</title>
-						</rect>
-					</g>
-				))}
+				<BarStack<Column, string>
+					data={columns}
+					keys={series.map((one) => one.key)}
+					x={(column) => column.ts}
+					xScale={xScale}
+					yScale={yScale}
+					color={(key) => colorOf.get(key) ?? seriesColor(key)}
+				>
+					{(stacks) =>
+						columns.map((column, index) => (
+							<Group
+								key={column.ts}
+								opacity={hovered.index === null || hovered.index === index ? 1 : 0.55}
+							>
+								{stacks.map((stack) => {
+									const bar = stack.bars[index];
+									return (
+										<StackSegment
+											key={stack.key}
+											x={bar.x}
+											y={bar.y}
+											width={bar.width}
+											height={bar.height}
+											fill={bar.color}
+										/>
+									);
+								})}
+							</Group>
+						))
+					}
+				</BarStack>
+				<BucketOverlay plot={plot} values={timestamps} xScale={xScale} onEnter={hovered.show} />
 			</svg>
+			{hovered.index !== null && (
+				<ChartTooltip
+					index={hovered.index}
+					content={tooltipOf(hovered.index)}
+					left={slotCenter(xScale, timestamps[hovered.index], plot)}
+				/>
+			)}
 			<ul {...stylex.props(styles.legend)}>
 				{series.map((one) => (
 					<li key={one.key} title={one.address ?? undefined} {...stylex.props(styles.legendItem)}>
@@ -269,14 +231,14 @@ export default function ClientChart({ data }: { data: StatsClients }) {
 						{columns.map((column) => (
 							<tr key={column.ts}>
 								<th scope="row">{formatTime(column.ts)}</th>
-								{column.values.map((value, index) => (
-									<td key={series[index].key}>{value}</td>
+								{series.map((one) => (
+									<td key={one.key}>{column[one.key]}</td>
 								))}
 							</tr>
 						))}
 					</tbody>
 				</table>
 			</div>
-		</div>
+		</ChartRoot>
 	);
 }