@tangle-network/charts 0.10.0 → 0.11.0

package/README.md

@@ -302,6 +302,12 @@ Selection is controlled by bucket ID. Hover, focus, click, Enter, Space and touc
 
 **Provenance and extraction boundary.** Sparkline comes from `tangle-network/agent-app`, `src/web-react/sparkline.tsx` and its tests at `a8947683a050394d13848bb7e4cbbe7cf08d208e`. Stacked SVG rendering and select-never-toggle regressions come from merged ADC [PR #8746](https://github.com/tangle-network/agent-dev-container/pull/8746), `products/platform/web/src/client/components/UsageChartSvg.tsx` and `UsageChart.test.tsx` at `a1c3958fd73a3894d4515f9dc476dae9ace30ce0`. Platform's aggregation, currency/product/category functions, legend composition and portal-tooltip positioning are **not** copied. The persistent readout and native pointer popover avoid a new React DOM peer. This is not a new universal usage-chart API, a zero-baseline replacement for SpendCard's sparkline, or a consumer migration; Platform and Agent App are not edited.
 
+### Thousands of dots: `DotMap` and `unitDotLayout`
+
+`unitDotLayout(groups, width, height)` places one dot per item in a rectangle per group, the rectangles a squarified treemap sized by count, so a fleet of 6,000 runs reads as its groups first and its items second with no item hidden in an aggregate. It returns the rectangles, every item's `x, y` (interleaved, groups in input order) and a radius per item from its group's cell.
+
+`DotMap` draws those positions, or a semantic map's `x, y`, on one canvas: wheel or pinch zooms about the pointer, drag pans, a click selects, double-click or `0` fits, and `+ - ←→↑↓` work from the keyboard. Colours are palette indexes (`colors: Uint8Array` into `palette`, CSS colours or custom properties), so a lens change repaints without a new layout; `dimmed` greys filtered points, `radii` may vary per point (a dot sized by its run's hours inside its cell), and `labels` name clusters without overlapping. Hit tests use a uniform grid, one path is filled per colour, and the canvas records its last frame's draw time in `data-frame-ms`. The caller owns hover text (`describe`), selection, the legend and the details.
+
 ### React and package-boundary checks
 
 ```sh

package/dist/index.d.ts

@@ -301,4 +301,47 @@ interface SmallMultiplesOptions {
 }
 export declare function smallMultiples(panels: MultiplePanel[], o: SmallMultiplesOptions): Figure | Refusal;
 //#endregion
-export { type BandKind, type BreakdownInput, type BreakdownOptions, CHECKER_HUES, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type Estimate, type Exclusion, type Figure, type HeatmapCell, type HeatmapColumn, type HeatmapOptions, type HeatmapRow, type HeatmapStatus, type Interval, type IntervalMethod, type LatencyRangeOptions, type LatencyRangeRow, type MarkKind, type MarkVerdict, type MatrixCell, type MetricBarsOptions, type MetricRow, type MultiplePanel, OUTCOME_COLORS, OUTCOME_ORDER, type Observations, type PhaseWaterfallOptions, type PointFields, type PointGlyph, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type Setup, type SmallMultiplesOptions, type TaskMatrixOptions, type TickOutcome, type Tier, type TierCounts, type TimePoint, type TimeSeriesOptions, type TimeSeriesRow, type TimelineLane, type TimelineOptions, type TimelineSpan, type TimelineTick, type WaterfallPhase, type XCategory, type YScale, type YTarget, type YTick, checkerColor, isRefusal, timeline };
+//#region src/unit-dots.d.ts
+/**
+ * Unit dots: one dot per item, packed in a rectangle per group, the rectangles laid out as a squarified treemap sized
+ * by count. A fleet of 6,000 runs reads as its groups first and its items second, with no item hidden in an
+ * aggregate. Positions are in layout units (the `width` and `height` given); a canvas scales them to its pixels.
+ */
+interface DotGroup {
+  id: string;
+  label: string;
+  /** Items in this group; their positions come out in group order, then item order within the group. */
+  count: number;
+}
+interface DotGroupRect {
+  id: string;
+  label: string;
+  count: number;
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+}
+interface UnitDotLayout {
+  rects: DotGroupRect[];
+  /** x, y of every item, interleaved, groups in input order. */
+  positions: Float32Array;
+  /** Each item's dot radius in layout units: one size per group, from its cell. */
+  radii: Float32Array;
+}
+interface UnitDotOptions {
+  /** Space between rectangles. Default 6. */
+  gap?: number;
+  /** Space above each rectangle's dots for its label. Default 16. */
+  header?: number;
+  /** The largest dot radius, so a group of three is not three giant discs. Default 6. */
+  maxRadius?: number;
+}
+/**
+ * Lays out `groups` in a `width` × `height` box: a treemap rectangle per group with a header for its label, and its
+ * items on a grid of square cells inside it, filled row by row. Groups keep their input order in `positions`; the
+ * treemap places larger groups first.
+ */
+export declare function unitDotLayout(groups: DotGroup[], width: number, height: number, o?: UnitDotOptions): UnitDotLayout;
+//#endregion
+export { type BandKind, type BreakdownInput, type BreakdownOptions, CHECKER_HUES, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type DotGroup, type DotGroupRect, type Estimate, type Exclusion, type Figure, type HeatmapCell, type HeatmapColumn, type HeatmapOptions, type HeatmapRow, type HeatmapStatus, type Interval, type IntervalMethod, type LatencyRangeOptions, type LatencyRangeRow, type MarkKind, type MarkVerdict, type MatrixCell, type MetricBarsOptions, type MetricRow, type MultiplePanel, OUTCOME_COLORS, OUTCOME_ORDER, type Observations, type PhaseWaterfallOptions, type PointFields, type PointGlyph, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type Setup, type SmallMultiplesOptions, type TaskMatrixOptions, type TickOutcome, type Tier, type TierCounts, type TimePoint, type TimeSeriesOptions, type TimeSeriesRow, type TimelineLane, type TimelineOptions, type TimelineSpan, type TimelineTick, type UnitDotLayout, type UnitDotOptions, type WaterfallPhase, type XCategory, type YScale, type YTarget, type YTick, checkerColor, isRefusal, timeline };

package/dist/index.js

@@ -3183,4 +3183,139 @@ function draw(panels, o, width, xLabel, yLabelOf, marksOf) {
 	return svgRoot(width, height + key.height, body + key.svg);
 }
 //#endregion
-export { CHECKER_HUES, OUTCOME_COLORS, OUTCOME_ORDER, breakdown, chartTokensCss, checkerColor, comparisonIntervals, costFrontier, figureCss, heatmap, isRefusal, latencyRange, metricBars, phaseWaterfall, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, smallMultiples, taskMatrix, timeSeries, timeline };
+//#region src/unit-dots.ts
+/** Squarified treemap (Bruls, Huizing and van Wijk) of positive values, largest first, into the rectangle. */
+function squarify(values, x, y, w, h) {
+	const out = new Array(values.length);
+	const total = values.reduce((sum, value) => sum + value, 0);
+	if (!total) return values.map(() => [
+		x,
+		y,
+		0,
+		0
+	]);
+	const scale = w * h / total;
+	let i = 0;
+	while (i < values.length) {
+		const side = Math.min(w, h);
+		let row = [i];
+		let rowSum = values[i] * scale;
+		const worst = (sum, items) => {
+			const areas = items.map((k) => values[k] * scale);
+			const max = Math.max(...areas), min = Math.min(...areas);
+			return Math.max(side * side * max / (sum * sum), sum * sum / (side * side * min));
+		};
+		let j = i + 1;
+		while (j < values.length) {
+			const next = rowSum + values[j] * scale;
+			if (worst(next, [...row, j]) > worst(rowSum, row)) break;
+			row = [...row, j];
+			rowSum = next;
+			j++;
+		}
+		const thickness = rowSum / side;
+		let offset = 0;
+		for (const k of row) {
+			const length = values[k] * scale / thickness;
+			out[k] = w >= h ? [
+				x,
+				y + offset,
+				thickness,
+				length
+			] : [
+				x + offset,
+				y,
+				length,
+				thickness
+			];
+			offset += length;
+		}
+		if (w >= h) {
+			x += thickness;
+			w -= thickness;
+		} else {
+			y += thickness;
+			h -= thickness;
+		}
+		i = j;
+	}
+	return out;
+}
+/**
+* Lays out `groups` in a `width` × `height` box: a treemap rectangle per group with a header for its label, and its
+* items on a grid of square cells inside it, filled row by row. Groups keep their input order in `positions`; the
+* treemap places larger groups first.
+*/
+function unitDotLayout(groups, width, height, o = {}) {
+	const gap = o.gap ?? 6, header = o.header ?? 16, maxRadius = o.maxRadius ?? 6;
+	const order = groups.map((group, index) => ({
+		group,
+		index
+	})).filter(({ group }) => group.count > 0).sort((a, b) => b.group.count - a.group.count);
+	const totalItems = order.reduce((sum, item) => sum + item.group.count, 0) || 1;
+	const headerShare = header * width * .25 / (width * height) * totalItems;
+	const boxes = squarify(order.map(({ group }) => group.count + headerShare), 0, 0, width, height);
+	const rects = new Array(groups.length);
+	const total = groups.reduce((sum, group) => sum + Math.max(0, group.count), 0);
+	const positions = new Float32Array(total * 2);
+	const radii = new Float32Array(total);
+	const startOf = [];
+	let start = 0;
+	for (const group of groups) {
+		startOf.push(start);
+		start += Math.max(0, group.count);
+	}
+	order.forEach(({ group, index }, k) => {
+		const [bx, by, bw, bh] = boxes[k];
+		const x0 = bx + gap / 2, y0 = by + gap / 2, x1 = bx + bw - gap / 2, y1 = by + bh - gap / 2;
+		rects[index] = {
+			id: group.id,
+			label: group.label,
+			count: group.count,
+			x0,
+			y0,
+			x1,
+			y1
+		};
+		const innerW = Math.max(1, x1 - x0 - 4), innerH = Math.max(1, y1 - y0 - header - 2);
+		let best = {
+			cols: 1,
+			cell: 0
+		};
+		const ideal = Math.max(1, Math.round(Math.sqrt(group.count * innerW / innerH)));
+		for (let cols = Math.max(1, ideal - 2); cols <= ideal + 2; cols++) {
+			const rows = Math.ceil(group.count / cols);
+			const cell = Math.min(innerW / cols, innerH / rows);
+			if (cell > best.cell) best = {
+				cols,
+				cell
+			};
+		}
+		const r = Math.min(maxRadius, best.cell * .4);
+		for (let item = 0; item < group.count; item++) {
+			const col = item % best.cols, row = Math.floor(item / best.cols);
+			const p = startOf[index] + item;
+			positions[p * 2] = x0 + 2 + (col + .5) * best.cell;
+			positions[p * 2 + 1] = y0 + header + (row + .5) * best.cell;
+			radii[p] = r;
+		}
+	});
+	groups.forEach((group, index) => {
+		if (!rects[index]) rects[index] = {
+			id: group.id,
+			label: group.label,
+			count: 0,
+			x0: 0,
+			y0: 0,
+			x1: 0,
+			y1: 0
+		};
+	});
+	return {
+		rects,
+		positions,
+		radii
+	};
+}
+//#endregion
+export { CHECKER_HUES, OUTCOME_COLORS, OUTCOME_ORDER, breakdown, chartTokensCss, checkerColor, comparisonIntervals, costFrontier, figureCss, heatmap, isRefusal, latencyRange, metricBars, phaseWaterfall, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, smallMultiples, taskMatrix, timeSeries, timeline, unitDotLayout };

package/dist/react/index.d.ts

@@ -272,4 +272,50 @@ interface TimelineViewProps {
 }
 export declare function TimelineView({ lanes, options, defaultCollapsed, presentation }: TimelineViewProps): import("react").JSX.Element;
 //#endregion
-export type { BandKind, ChartBand, ChartMark, Figure, FigureAtWidth, FigureViewProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };
+//#region src/react/dot-map.d.ts
+interface DotMapRect {
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+  label: string;
+  /** Shown after the label, such as the group's count. */
+  note?: string;
+}
+interface DotMapLabel {
+  x: number;
+  y: number;
+  text: string;
+}
+interface DotMapProps {
+  /** x and y of every point in layout units, interleaved. */
+  positions: Float32Array;
+  /** Each point's radius in layout units, or one radius for all. */
+  radii: Float32Array | number;
+  /** Each point's palette index. */
+  colors: Uint8Array;
+  /** CSS colours (custom properties allowed) by palette index. */
+  palette: readonly string[];
+  /** The box the positions are laid out in: [x0, y0, x1, y1]. The map fits it on first draw and on reset. */
+  extent: readonly [number, number, number, number];
+  /** Group rectangles drawn under the points, labelled at their top left. */
+  rects?: readonly DotMapRect[];
+  /** Labels drawn over the points, such as cluster names at their centroids. */
+  labels?: readonly DotMapLabel[];
+  /** 1 dims a point (filtered out); dimmed points draw first and faint. */
+  dimmed?: Uint8Array | null;
+  selected?: number | null;
+  /** Radius floor in screen pixels, so a dense semantic map stays visible zoomed out. Default 1.2. */
+  minPixelRadius?: number;
+  onHover?: (index: number | null) => void;
+  onSelect?: (index: number | null) => void;
+  /** Text for a point's hover card. */
+  describe?: (index: number) => string;
+  height?: number;
+  ariaLabel: string;
+}
+/** The categorical lens colours, in slot order, then "other": the palette a DotMap lens indexes. */
+export declare const DOT_MAP_CATEGORIES: readonly string[];
+export declare function DotMap({ positions, radii, colors, palette, extent, rects, labels, dimmed, selected, minPixelRadius, onHover, onSelect, describe, height, ariaLabel }: DotMapProps): import("react").JSX.Element;
+//#endregion
+export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };

package/dist/react/index.js

@@ -1,6 +1,6 @@
 import { K as markerPath, U as hatchPath, _ as markName, c as MARK_HEADS, p as eventsGap, t as timeline, v as isRefusal } from "../timeline-ApeJgFac.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 //#region src/react/sparkline.tsx
 const DEFAULT_SPARKLINE_WIDTH = 96;
 const DEFAULT_SPARKLINE_HEIGHT = 24;
@@ -1736,4 +1736,435 @@ function TimelineView({ lanes, options, defaultCollapsed = [], presentation }) {
 	});
 }
 //#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, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };
+//#region src/react/dot-map.tsx
+/**
+* A canvas of many dots (thousands of runs or agents) that pans and zooms at 60 fps: unit dots in group rectangles
+* (`unitDotLayout`) or a semantic map's x/y. Colours are palette indexes, so a lens change repaints without a new
+* layout; the caller owns hover and selection and draws its own legend and details.
+*/
+/** The categorical lens colours, in slot order, then "other": the palette a DotMap lens indexes. */
+const DOT_MAP_CATEGORIES = Object.freeze([
+	"var(--chart-category-1)",
+	"var(--chart-category-2)",
+	"var(--chart-category-3)",
+	"var(--chart-category-other)"
+]);
+/** Resolves CSS colours (including custom properties and light-dark()) to what the page computes, for the canvas. */
+function resolveColors(host, palette) {
+	const probe = document.createElement("span");
+	probe.style.display = "none";
+	host.appendChild(probe);
+	const out = palette.map((color) => {
+		probe.style.color = "";
+		probe.style.color = color;
+		return getComputedStyle(probe).color || color;
+	});
+	probe.remove();
+	return out;
+}
+/** A uniform grid over the layout, for hit tests in constant time per pointer move. */
+function gridIndex(positions, extent, cell) {
+	const [x0, y0, x1, y1] = extent;
+	const cols = Math.max(1, Math.ceil((x1 - x0) / cell));
+	const rows = Math.max(1, Math.ceil((y1 - y0) / cell));
+	const cells = /* @__PURE__ */ new Map();
+	for (let i = 0; i < positions.length / 2; i++) {
+		const c = Math.min(cols - 1, Math.max(0, Math.floor((positions[i * 2] - x0) / cell)));
+		const key = Math.min(rows - 1, Math.max(0, Math.floor((positions[i * 2 + 1] - y0) / cell))) * cols + c;
+		const list = cells.get(key);
+		if (list) list.push(i);
+		else cells.set(key, [i]);
+	}
+	return {
+		cols,
+		rows,
+		cell,
+		cells,
+		x0,
+		y0
+	};
+}
+function DotMap({ positions, radii, colors, palette, extent, rects, labels, dimmed, selected, minPixelRadius = 1.2, onHover, onSelect, describe, height = 560, ariaLabel }) {
+	const box = useRef(null);
+	const canvas = useRef(null);
+	const [size, setSize] = useState({
+		width: 0,
+		height
+	});
+	const view = useRef({
+		scale: 1,
+		tx: 0,
+		ty: 0
+	});
+	const fitted = useRef("");
+	const frame = useRef(0);
+	const [hover, setHover] = useState(null);
+	const colorsResolved = useRef([]);
+	const count = positions.length / 2;
+	const maxRadius = useMemo(() => typeof radii === "number" ? radii : radii.reduce((max, r) => r > max ? r : max, 0), [radii]);
+	const index = useMemo(() => gridIndex(positions, extent, Math.max(maxRadius * 2, (extent[2] - extent[0]) / 200)), [
+		positions,
+		extent,
+		maxRadius
+	]);
+	useEffect(() => {
+		if (!box.current) return;
+		const observer = new ResizeObserver(([entry]) => setSize({
+			width: Math.floor(entry.contentRect.width),
+			height
+		}));
+		observer.observe(box.current);
+		return () => observer.disconnect();
+	}, [height]);
+	const fit = useCallback(() => {
+		const [x0, y0, x1, y1] = extent;
+		const pad = 8;
+		const scale = Math.min((size.width - 16) / Math.max(1e-9, x1 - x0), (size.height - 16) / Math.max(1e-9, y1 - y0));
+		view.current = {
+			scale,
+			tx: pad - x0 * scale + (size.width - 16 - (x1 - x0) * scale) / 2,
+			ty: pad - y0 * scale + (size.height - 16 - (y1 - y0) * scale) / 2
+		};
+	}, [extent, size]);
+	const draw = useCallback(() => {
+		frame.current = 0;
+		const element = canvas.current;
+		if (!element || !size.width) return;
+		const started = performance.now();
+		const dpr = window.devicePixelRatio || 1;
+		if (element.width !== Math.round(size.width * dpr) || element.height !== Math.round(size.height * dpr)) {
+			element.width = Math.round(size.width * dpr);
+			element.height = Math.round(size.height * dpr);
+		}
+		const ctx = element.getContext("2d");
+		if (!ctx) return;
+		if (!colorsResolved.current.length && box.current) colorsResolved.current = resolveColors(box.current, palette);
+		const { scale, tx, ty } = view.current;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		ctx.clearRect(0, 0, size.width, size.height);
+		const style = box.current ? getComputedStyle(box.current) : null;
+		const ink = style?.color || "#888";
+		if (rects?.length) {
+			ctx.lineWidth = 1;
+			ctx.font = "11px ui-sans-serif, system-ui, sans-serif";
+			for (const rect of rects) {
+				if (rect.x1 <= rect.x0) continue;
+				const x = rect.x0 * scale + tx, y = rect.y0 * scale + ty, w = (rect.x1 - rect.x0) * scale, h = (rect.y1 - rect.y0) * scale;
+				if (x > size.width || y > size.height || x + w < 0 || y + h < 0) continue;
+				ctx.globalAlpha = .35;
+				ctx.strokeStyle = ink;
+				ctx.strokeRect(x + .5, y + .5, w, h);
+				if (w > 36) {
+					ctx.globalAlpha = .8;
+					ctx.fillStyle = ink;
+					const text = rect.note ? `${rect.label} · ${rect.note}` : rect.label;
+					ctx.save();
+					ctx.beginPath();
+					ctx.rect(x, y, w - 4, 16);
+					ctx.clip();
+					ctx.fillText(text, x + 4, y + 12);
+					ctx.restore();
+				}
+			}
+			ctx.globalAlpha = 1;
+		}
+		const paths = /* @__PURE__ */ new Map();
+		const faint = new Path2D();
+		const r0 = typeof radii === "number" ? radii : 0;
+		for (let i = 0; i < count; i++) {
+			const x = positions[i * 2] * scale + tx;
+			const y = positions[i * 2 + 1] * scale + ty;
+			if (x < -8 || y < -8 || x > size.width + 8 || y > size.height + 8) continue;
+			const r = Math.max(minPixelRadius, (typeof radii === "number" ? r0 : radii[i]) * scale);
+			const path = dimmed?.[i] ? faint : paths.get(colors[i]) ?? paths.set(colors[i], new Path2D()).get(colors[i]);
+			path.moveTo(x + r, y);
+			path.arc(x, y, r, 0, Math.PI * 2);
+		}
+		ctx.globalAlpha = .18;
+		ctx.fillStyle = ink;
+		ctx.fill(faint);
+		ctx.globalAlpha = .92;
+		for (const [color, path] of paths) {
+			ctx.fillStyle = colorsResolved.current[color] ?? ink;
+			ctx.fill(path);
+		}
+		ctx.globalAlpha = 1;
+		if (selected !== null && selected !== void 0 && selected < count) {
+			const x = positions[selected * 2] * scale + tx, y = positions[selected * 2 + 1] * scale + ty;
+			const r = Math.max(4, (typeof radii === "number" ? r0 : radii[selected]) * scale + 3);
+			ctx.lineWidth = 2;
+			ctx.strokeStyle = ink;
+			ctx.beginPath();
+			ctx.arc(x, y, r, 0, Math.PI * 2);
+			ctx.stroke();
+		}
+		if (labels?.length) {
+			ctx.font = "600 12px ui-sans-serif, system-ui, sans-serif";
+			ctx.textAlign = "center";
+			ctx.lineWidth = 3;
+			const surface = style?.getPropertyValue("--dot-map-surface").trim() || style?.backgroundColor || "#161616";
+			const taken = [];
+			for (const label of labels) {
+				const x = label.x * scale + tx, y = label.y * scale + ty;
+				if (x < 0 || y < 0 || x > size.width || y > size.height) continue;
+				const w = ctx.measureText(label.text).width;
+				const box4 = [
+					x - w / 2 - 2,
+					y - 10,
+					x + w / 2 + 2,
+					y + 4
+				];
+				if (taken.some(([a, b, c, d]) => box4[0] < c && box4[2] > a && box4[1] < d && box4[3] > b)) continue;
+				taken.push(box4);
+				ctx.strokeStyle = surface;
+				ctx.strokeText(label.text, x, y);
+				ctx.fillStyle = ink;
+				ctx.fillText(label.text, x, y);
+			}
+			ctx.textAlign = "start";
+		}
+		element.dataset.frameMs = (performance.now() - started).toFixed(2);
+	}, [
+		size,
+		positions,
+		radii,
+		colors,
+		palette,
+		rects,
+		labels,
+		dimmed,
+		selected,
+		count,
+		minPixelRadius
+	]);
+	const schedule = useCallback(() => {
+		if (!frame.current) frame.current = requestAnimationFrame(draw);
+	}, [draw]);
+	useEffect(() => {
+		colorsResolved.current = [];
+	}, [palette]);
+	useEffect(() => {
+		if (!size.width) return;
+		const key = `${extent.join(",")}:${size.width}x${size.height}`;
+		if (fitted.current !== key) {
+			fit();
+			fitted.current = key;
+		}
+		schedule();
+	}, [
+		size,
+		extent,
+		fit,
+		schedule
+	]);
+	useEffect(() => schedule(), [schedule]);
+	useEffect(() => () => cancelAnimationFrame(frame.current), []);
+	const pick = useCallback((clientX, clientY) => {
+		const element = canvas.current;
+		if (!element) return null;
+		const bounds = element.getBoundingClientRect();
+		const { scale, tx, ty } = view.current;
+		const lx = (clientX - bounds.left - tx) / scale;
+		const ly = (clientY - bounds.top - ty) / scale;
+		const c = Math.floor((lx - index.x0) / index.cell);
+		const r = Math.floor((ly - index.y0) / index.cell);
+		let best = null;
+		let bestD = Infinity;
+		const reach = Math.max(1, Math.ceil(6 / (scale * index.cell)));
+		for (let dr = -reach; dr <= reach; dr++) for (let dc = -reach; dc <= reach; dc++) {
+			if (c + dc < 0 || r + dr < 0 || c + dc >= index.cols || r + dr >= index.rows) continue;
+			for (const i of index.cells.get((r + dr) * index.cols + (c + dc)) ?? []) {
+				const dx = positions[i * 2] - lx, dy = positions[i * 2 + 1] - ly;
+				const d = dx * dx + dy * dy;
+				const hit = Math.max(6 / scale, typeof radii === "number" ? radii : radii[i]);
+				if (d < bestD && d <= hit * hit) {
+					bestD = d;
+					best = i;
+				}
+			}
+		}
+		return best;
+	}, [
+		index,
+		positions,
+		radii
+	]);
+	const drag = useRef(null);
+	const touches = useRef(/* @__PURE__ */ new Map());
+	const pinch = useRef(null);
+	useEffect(() => {
+		const element = canvas.current;
+		if (!element) return;
+		const wheel = (event) => {
+			event.preventDefault();
+			const bounds = element.getBoundingClientRect();
+			const px = event.clientX - bounds.left, py = event.clientY - bounds.top;
+			const factor = Math.exp(-event.deltaY * .0015);
+			const v = view.current;
+			const scale = Math.min(v.scale * 400, Math.max(v.scale * .0025, v.scale * factor));
+			view.current = {
+				scale,
+				tx: px - (px - v.tx) / v.scale * scale,
+				ty: py - (py - v.ty) / v.scale * scale
+			};
+			schedule();
+		};
+		element.addEventListener("wheel", wheel, { passive: false });
+		return () => element.removeEventListener("wheel", wheel);
+	}, [schedule]);
+	const hovered = hover ? describe?.(hover.index) ?? null : null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: box,
+		className: "tgc-dot-map",
+		style: {
+			position: "relative",
+			height
+		},
+		"data-points": count,
+		children: [/* @__PURE__ */ jsx("canvas", {
+			ref: canvas,
+			role: "img",
+			"aria-label": ariaLabel,
+			tabIndex: 0,
+			style: {
+				width: "100%",
+				height,
+				display: "block",
+				touchAction: "none",
+				cursor: hover ? "pointer" : "grab"
+			},
+			onPointerDown: (event) => {
+				touches.current.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				if (touches.current.size === 2) {
+					const [a, b] = [...touches.current.values()];
+					pinch.current = {
+						distance: Math.hypot(a.x - b.x, a.y - b.y) || 1,
+						view: { ...view.current }
+					};
+					drag.current = null;
+				} else drag.current = {
+					x: event.clientX,
+					y: event.clientY,
+					moved: false
+				};
+				event.currentTarget.setPointerCapture(event.pointerId);
+			},
+			onPointerMove: (event) => {
+				if (touches.current.has(event.pointerId)) touches.current.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				const p = pinch.current;
+				if (p && touches.current.size === 2) {
+					const [a, b] = [...touches.current.values()];
+					const bounds = event.currentTarget.getBoundingClientRect();
+					const mx = (a.x + b.x) / 2 - bounds.left, my = (a.y + b.y) / 2 - bounds.top;
+					const scale = p.view.scale * ((Math.hypot(a.x - b.x, a.y - b.y) || 1) / p.distance);
+					view.current = {
+						scale,
+						tx: mx - (mx - p.view.tx) / p.view.scale * scale,
+						ty: my - (my - p.view.ty) / p.view.scale * scale
+					};
+					schedule();
+					return;
+				}
+				const d = drag.current;
+				if (d) {
+					const dx = event.clientX - d.x, dy = event.clientY - d.y;
+					if (d.moved || Math.abs(dx) + Math.abs(dy) > 3) {
+						d.moved = true;
+						view.current = {
+							...view.current,
+							tx: view.current.tx + dx,
+							ty: view.current.ty + dy
+						};
+						d.x = event.clientX;
+						d.y = event.clientY;
+						schedule();
+						return;
+					}
+				}
+				const i = pick(event.clientX, event.clientY);
+				const bounds = event.currentTarget.getBoundingClientRect();
+				setHover(i === null ? null : {
+					index: i,
+					x: event.clientX - bounds.left,
+					y: event.clientY - bounds.top
+				});
+				onHover?.(i);
+			},
+			onPointerUp: (event) => {
+				touches.current.delete(event.pointerId);
+				if (pinch.current) {
+					if (touches.current.size < 2) pinch.current = null;
+					drag.current = null;
+					return;
+				}
+				const d = drag.current;
+				drag.current = null;
+				if (d && !d.moved) onSelect?.(pick(event.clientX, event.clientY));
+			},
+			onPointerCancel: (event) => {
+				touches.current.delete(event.pointerId);
+				if (touches.current.size < 2) pinch.current = null;
+				drag.current = null;
+			},
+			onPointerLeave: () => {
+				setHover(null);
+				onHover?.(null);
+			},
+			onDoubleClick: () => {
+				fit();
+				schedule();
+			},
+			onKeyDown: (event) => {
+				const v = view.current;
+				const zoom = (factor) => {
+					const cx = size.width / 2, cy = size.height / 2;
+					view.current = {
+						scale: v.scale * factor,
+						tx: cx - (cx - v.tx) / v.scale * v.scale * factor,
+						ty: cy - (cy - v.ty) / v.scale * v.scale * factor
+					};
+				};
+				if (event.key === "+" || event.key === "=") zoom(1.4);
+				else if (event.key === "-") zoom(1 / 1.4);
+				else if (event.key === "0") fit();
+				else if (event.key === "ArrowLeft") view.current = {
+					...v,
+					tx: v.tx + 60
+				};
+				else if (event.key === "ArrowRight") view.current = {
+					...v,
+					tx: v.tx - 60
+				};
+				else if (event.key === "ArrowUp") view.current = {
+					...v,
+					ty: v.ty + 60
+				};
+				else if (event.key === "ArrowDown") view.current = {
+					...v,
+					ty: v.ty - 60
+				};
+				else return;
+				event.preventDefault();
+				schedule();
+			}
+		}), hover && hovered && /* @__PURE__ */ jsx("div", {
+			className: "tgc-dot-map-tip",
+			role: "tooltip",
+			style: {
+				position: "absolute",
+				left: Math.min(hover.x + 12, Math.max(0, size.width - 300)),
+				top: hover.y + 12,
+				pointerEvents: "none"
+			},
+			children: hovered
+		})]
+	});
+}
+//#endregion
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, FigureView, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };

package/dist/react/live.css

@@ -73,3 +73,18 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-event-idle { background: var(--chart-live-hover, var(--chart-shade)); }
 .ov-event-missing { background: repeating-linear-gradient(135deg, var(--chart-live-faint, var(--chart-muted)) 0 1px, transparent 1px 4px); }
 .ov-refusal { margin: 0; color: var(--chart-live-muted, var(--chart-ink-muted)); font-size: .9em; }
+
+/*
+ * DotMap: thousands of dots on one canvas. A categorical lens names at most three categories in colour, the first
+ * three slots of the dataviz reference palette, which pass its all-pairs colour-vision checks in both themes (a
+ * scatter puts every pair side by side); every other category is the neutral "other". :where() keeps them overridable.
+ */
+:where(:root) {
+  --chart-category-1: light-dark(#2a78d6, #3987e5);
+  --chart-category-2: light-dark(#eb6834, #d95926);
+  --chart-category-3: light-dark(#1baf7a, #199e70);
+  --chart-category-other: #898781;
+}
+.tgc-dot-map { color: var(--chart-live-muted, #8a8a8a); }
+.tgc-dot-map canvas:focus-visible { outline: 2px solid var(--chart-accent, #7760bd); outline-offset: 2px; }
+.tgc-dot-map-tip { z-index: 2; max-width: 300px; padding: 6px 9px; border-radius: 6px; background: var(--chart-tip-bg, #262626); color: var(--chart-tip-ink, #eee); font: 12px/1.4 ui-sans-serif, system-ui, sans-serif; white-space: pre-line; box-shadow: 0 4px 14px rgb(0 0 0 / .3); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
   "type": "module",
   "license": "MIT",