@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/indicators/GaugeChart.js

@@ -0,0 +1,170 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { DialChart } from "./DialChart.js";
+import { GaugeMarker, GaugeScale, GaugeSweep, NeedleStyle } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+// src/charts/indicators/GaugeChart.ts
+/** One reading on a dial, for "how far along the scale are we" at a glance. */
+var GaugeChart = class extends DialChart {
+	static meta = {
+		id: "gauge",
+		name: "Gauge",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Places a single measure on an arc scale, with optional status zones, needle and target.",
+		tags: [
+			"dial",
+			"kpi",
+			"arc",
+			"needle"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 1),
+		variants: {
+			sweep: [
+				GaugeSweep.Semi,
+				GaugeSweep.Horseshoe,
+				GaugeSweep.ThreeQuarter,
+				GaugeSweep.Fan,
+				GaugeSweep.Full
+			],
+			marker: [
+				GaugeMarker.Fill,
+				GaugeMarker.Needle,
+				GaugeMarker.Dot
+			],
+			bands: [false, true],
+			scale: [
+				GaugeScale.None,
+				GaugeScale.Ends,
+				GaugeScale.Full
+			],
+			thickness: [.2, .1]
+		},
+		valid: (v) => v.sweep !== GaugeSweep.Full || v.marker !== GaugeMarker.Needle && v.scale !== GaugeScale.Ends
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sweep: GaugeSweep.Semi,
+			marker: GaugeMarker.Fill,
+			bands: false,
+			scale: GaugeScale.None,
+			thickness: .2
+		};
+	}
+	drawReadings(ctx, readings) {
+		this.facets(ctx, readings, 1.5, (cell, reading) => this.gauge(cell, reading), 96);
+	}
+	gauge(ctx, reading) {
+		const { marker, bands, scale, thickness } = this.options;
+		const needle = marker === GaugeMarker.Needle;
+		const foot = this.frame(ctx.plot).closed ? needle ? bands ? 36 : 26 : scale === GaugeScale.Ends ? 14 : 0 : needle ? bands ? 74 : 56 : scale === GaugeScale.Ends ? 16 : 4;
+		const frame = this.frame(ctx.plot, {
+			pad: scale === GaugeScale.Full ? 20 : 2,
+			foot
+		});
+		const dial = ctx.nest(`translate(${frame.cx},${frame.cy})`, "dial");
+		const { radius } = frame;
+		const outer = bands ? radius - 9 : radius, inner = outer - radius * thickness;
+		const status = this.status(reading);
+		const color = bands ? status.color : this.accent(ctx);
+		const corner = (outer - inner) / 2;
+		const track = ctx.marks("track", "path", [reading], (d) => d.id, dial.root).attr("fill", ctx.theme.grid).attr("d", this.ring(inner, outer, frame.start, frame.end, marker === GaugeMarker.Dot || corner < 12 ? corner : 12));
+		ctx.hover(track, (d) => this.tooltip(d, color));
+		const zones = bands ? this.zones(reading) : [];
+		const gap = 2 / radius;
+		const zoneArcs = ctx.marks("zones", "path", zones, (d) => d.status.key, dial.root).attr("fill", (d) => d.status.color).attr("d", (d) => this.ring(radius - 5, radius, frame.angle(d.from) + (d.from ? gap : 0), frame.angle(d.to) - (d.to < 1 ? gap : 0), 2));
+		ctx.hover(zoneArcs, (d) => ({
+			title: d.status.label,
+			color: d.status.color,
+			rows: [["From", this.formatted(this.at(d.from))], ["To", this.formatted(this.at(d.to))]]
+		}));
+		const fill = ctx.marks("fill", "path", marker === GaugeMarker.Dot ? [] : [reading], (d) => d.id, dial.root).attr("fill", color);
+		this.sweep(fill, (d) => d.fraction, (_, f) => this.ring(inner, outer, frame.start, frame.angle(f), Math.min(corner, 12)));
+		ctx.hover(fill, (d) => this.tooltip(d, color));
+		const mid = (inner + outer) / 2;
+		const knob = ctx.marks("knob", "circle", marker === GaugeMarker.Dot ? [reading] : [], (d) => d.id, dial.root).attr("r", Math.max(7, Math.min(11, (outer - inner) * .72))).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		const spot = (f) => ({
+			cx: mid * Math.sin(frame.angle(f)),
+			cy: -mid * Math.cos(frame.angle(f))
+		});
+		ctx.set(knob, {
+			cx: (d) => spot(d.fraction).cx,
+			cy: (d) => spot(d.fraction).cy
+		}, spot(0));
+		ctx.hover(knob, (d) => this.tooltip(d, color));
+		if (needle) this.needle(ctx, frame, reading, NeedleStyle.Taper, inner + (outer - inner) * .4);
+		const goal = reading.targetFraction;
+		const goalLine = ctx.marks("goal", "line", goal === null ? [] : [goal], (_, i) => i, dial.root).attr("stroke", ctx.theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		const polar = (f, r) => [r * Math.sin(frame.angle(f)), -r * Math.cos(frame.angle(f))];
+		goalLine.attr("x1", (f) => polar(f, inner - 3)[0]).attr("y1", (f) => polar(f, inner - 3)[1]).attr("x2", (f) => polar(f, outer + 3)[0]).attr("y2", (f) => polar(f, outer + 3)[1]);
+		ctx.hover(goalLine, () => this.tooltip(reading, color));
+		this.scaleMarks(ctx, frame, (outer + inner) / 2);
+		this.readout(ctx, frame, reading, inner, needle, bands);
+	}
+	at(fraction) {
+		const [low, high] = this.domain();
+		return low + fraction * (high - low);
+	}
+	scaleMarks(ctx, frame, mid) {
+		const { scale, sweep } = this.options;
+		const outer = frame.radius;
+		const steps = scale === GaugeScale.Full ? this.scaleTicks(5).filter((f) => sweep !== GaugeSweep.Full || f < 1) : [];
+		ctx.marks("ticks", "line", steps, (f) => f).attr("stroke", ctx.theme.axis).attr("stroke-width", 1.5).attr("x1", (f) => frame.point(f, outer + 2)[0]).attr("y1", (f) => frame.point(f, outer + 2)[1]).attr("x2", (f) => frame.point(f, outer + 7)[0]).attr("y2", (f) => frame.point(f, outer + 7)[1]);
+		const around = steps.map((f) => {
+			const [x, y] = frame.point(f, outer + 16);
+			return {
+				key: f,
+				text: this.formatted(this.at(f)),
+				x,
+				y,
+				size: 10,
+				tone: "muted"
+			};
+		});
+		const ends = scale === GaugeScale.Ends ? [0, 1].map((f) => {
+			const [x, y] = frame.point(f, mid);
+			return {
+				key: `end${f}`,
+				text: this.formatted(this.at(f)),
+				x,
+				y: y + 15,
+				size: 11,
+				tone: "muted"
+			};
+		}) : [];
+		this.texts(ctx, "scale", [...around, ...ends]);
+	}
+	readout(ctx, frame, reading, inner, needle, chip) {
+		const { cx, cy, radius, closed } = frame;
+		const size = Math.max(16, Math.min(needle ? 26 : 42, inner * .42));
+		const y = !closed ? needle ? cy + 14 + size / 2 : cy - size * (chip ? .95 : .6) : needle ? cy + radius * .46 : cy - size * (chip ? .45 : .15);
+		const roomy = inner > 56;
+		const note = reading.target === null ? reading.label : `${reading.label ? `${reading.label} · ` : ""}target ${this.formatted(reading.target)}`;
+		const wide = needle || !closed ? ctx.plot.width : inner * 1.8;
+		this.texts(ctx, "readout", [{
+			key: "value",
+			text: this.formatted(reading.value),
+			x: cx,
+			y,
+			size,
+			tone: "ink",
+			weight: 600,
+			count: [reading.value, (v) => this.formatted(v)]
+		}, {
+			key: "note",
+			text: roomy ? this.fit(note, wide, 11) : "",
+			x: cx,
+			y: y + size * .5 + 10
+		}]);
+		this.chips(ctx, "chip", chip ? [{
+			key: "status",
+			x: cx,
+			y: y + size * .5 + 26,
+			status: this.status(reading),
+			text: roomy ? this.status(reading).label : "",
+			anchor: "middle"
+		}] : []);
+	}
+};
+export { GaugeChart };

package/dist/charts/indicators/HarveyBalls.js

@@ -0,0 +1,182 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { HarveyForm, HarveyLayout, RingDirection } from "./IndicatorEnums.js";
+import { mean, range } from "d3";
+// src/charts/indicators/HarveyBalls.ts
+/** Coarse qualitative scores as part-filled circles, the staple of comparison tables. */
+var HarveyBalls = class extends IndicatorChart {
+	static meta = {
+		id: "harvey-balls",
+		name: "Harvey balls",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Scores options against criteria with part-filled circles, for comparison tables and capability grids.",
+		tags: [
+			"qualitative",
+			"comparison table",
+			"capability",
+			"maturity"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 4),
+		variants: {
+			layout: [HarveyLayout.Matrix, HarveyLayout.List],
+			form: [
+				HarveyForm.Pie,
+				HarveyForm.Level,
+				HarveyForm.Ring
+			],
+			steps: [
+				4,
+				8,
+				2
+			],
+			direction: [RingDirection.Clockwise, RingDirection.Counter],
+			scaleKey: [true, false]
+		},
+		valid: (v) => v.form !== HarveyForm.Level || v.direction === RingDirection.Clockwise
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			series: "series",
+			steps: 4,
+			form: HarveyForm.Pie,
+			layout: HarveyLayout.Matrix,
+			direction: RingDirection.Clockwise,
+			scaleKey: true
+		};
+	}
+	/** Reading quantised to the nearest step, 0..1. */
+	level(fraction) {
+		const { steps } = this.options;
+		return Math.round(fraction * steps) / steps;
+	}
+	shape(ball) {
+		const { form, direction } = this.options;
+		const { r, level } = ball, inner = r - 2.5;
+		if (level <= 0) return "";
+		const sign = direction === RingDirection.Clockwise ? 1 : -1;
+		if (form === HarveyForm.Ring) return this.ring(inner * .5, inner, 0, sign * level * 2 * Math.PI);
+		if (form === HarveyForm.Pie) return this.ring(0, inner, 0, sign * level * 2 * Math.PI);
+		if (level >= 1) return this.ring(0, inner, 0, 2 * Math.PI);
+		const y = inner - 2 * inner * level, half = Math.sqrt(Math.max(0, inner * inner - y * y));
+		return `M${-half} ${y}A${inner} ${inner} 0 ${level > .5 ? 1 : 0} 0 ${half} ${y}Z`;
+	}
+	drawReadings(ctx, readings) {
+		const { layout, scaleKey, steps } = this.options;
+		const { width, height } = ctx.plot;
+		const foot = scaleKey ? 26 : 0;
+		const balls = layout === HarveyLayout.Matrix ? this.matrix(ctx, readings, height - foot) : this.list(ctx, readings, height - foot);
+		const key = scaleKey ? range(steps + 1).map((i) => ({
+			key: `key${i}`,
+			x: width - (steps - i) * 19 - 42,
+			y: height - 8,
+			r: 7.5,
+			level: i / steps
+		})) : [];
+		this.texts(ctx, "key", scaleKey && width - steps * 19 - 56 > 24 ? [{
+			key: "low",
+			text: "Low",
+			x: width - steps * 19 - 56,
+			y: height - 8,
+			size: 10,
+			tone: "muted",
+			anchor: "end"
+		}, {
+			key: "high",
+			text: "High",
+			x: width - 28,
+			y: height - 8,
+			size: 10,
+			tone: "muted",
+			anchor: "start"
+		}] : []);
+		const all = [...balls, ...key];
+		const color = this.accent(ctx);
+		const rims = ctx.marks("rims", "circle", all, (d) => d.key).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1.5).attr("cx", (d) => d.x).attr("cy", (d) => d.y).attr("r", (d) => d.r - .75);
+		const fills = ctx.marks("fills", "path", all, (d) => d.key).attr("fill", color).attr("transform", (d) => `translate(${d.x},${d.y})`);
+		this.sweep(fills, (d) => d.level, (d, f) => this.shape({
+			...d,
+			level: f
+		}));
+		const tip = (d) => d.reading ? this.tooltip(d.reading, color) : {
+			title: `Level ${this.percent(d.level)}`,
+			color
+		};
+		ctx.hover(rims, tip);
+		ctx.hover(fills, tip);
+	}
+	matrix(ctx, readings, height) {
+		const { series } = this.options;
+		const { width } = ctx.plot;
+		const rowsAll = [...new Set(readings.map((r) => r.label))];
+		const columnsAll = [...new Set(readings.map((r) => String(r.row[series] ?? "")))];
+		const gutter = Math.min(width * .3, Math.max(20, ...rowsAll.map((n) => this.textWidth(n))) + 12);
+		const header = 22;
+		const rows = rowsAll.slice(0, Math.max(1, Math.floor((height - header) / 22)));
+		const columns = columnsAll.slice(0, Math.max(1, Math.floor((width - gutter) / 34)));
+		const cellW = (width - gutter) / Math.max(1, columns.length), cellH = (height - header) / Math.max(1, rows.length);
+		const r = Math.max(7, Math.min(15, cellH * .38, cellW * .38));
+		const xOf = (i) => gutter + (i + .5) * cellW, yOf = (i) => header + (i + .5) * cellH;
+		this.texts(ctx, "heads", readings.length ? [...columns.map((c, i) => ({
+			key: `c${c}`,
+			text: this.fit(c, cellW - 4, 10.5),
+			x: xOf(i),
+			y: 8,
+			size: 10.5
+		})), ...rows.map((n, i) => ({
+			key: `r${n}`,
+			text: this.fit(n, gutter - 10),
+			x: 0,
+			y: yOf(i),
+			anchor: "start",
+			tone: "ink"
+		}))] : []);
+		return rows.flatMap((name, i) => columns.flatMap((column, j) => {
+			const own = readings.filter((d) => d.label === name && String(d.row[series] ?? "") === column);
+			if (!own.length) return [];
+			return [{
+				key: `${name}/${column}`,
+				x: xOf(j),
+				y: yOf(i),
+				r,
+				level: this.level(mean(own, (d) => d.fraction)),
+				reading: own[0]
+			}];
+		}));
+	}
+	list(ctx, readings, height) {
+		const { width } = ctx.plot;
+		const shown = this.averaged(readings).slice(0, Math.max(1, Math.floor(height / 24)));
+		const slot = height / Math.max(1, shown.length);
+		const r = Math.max(7, Math.min(14, slot * .38));
+		const left = 2;
+		this.texts(ctx, "heads", shown.flatMap((d, i) => [{
+			key: `${d.id}n`,
+			text: this.fit(d.label, width - left - 2 * r - 56),
+			x: left + 2 * r + 12,
+			y: (i + .5) * slot,
+			anchor: "start",
+			tone: "ink"
+		}, {
+			key: `${d.id}v`,
+			text: this.formatted(d.value),
+			x: width,
+			y: (i + .5) * slot,
+			anchor: "end",
+			tone: "ink",
+			weight: 600
+		}]));
+		return shown.map((reading, i) => ({
+			key: reading.id,
+			x: left + r,
+			y: (i + .5) * slot,
+			r,
+			level: this.level(reading.fraction),
+			reading
+		}));
+	}
+};
+export { HarveyBalls };

package/dist/charts/indicators/IndicatorChart.js

@@ -0,0 +1,293 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { LegendPosition } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { IndicatorStatus } from "./IndicatorEnums.js";
+import { arc, easeCubicOut, interrupt, mean, scaleLinear, select } from "d3";
+// src/charts/indicators/IndicatorChart.ts
+var GLYPHS = {
+	[IndicatorStatus.Good]: "M-3.4 .3 L-1 2.7 L3.6 -2.6",
+	[IndicatorStatus.Warning]: "M0 -3.4 V.9 M0 3.5 V3.51",
+	[IndicatorStatus.Critical]: "M-2.8 -2.8 L2.8 2.8 M2.8 -2.8 L-2.8 2.8"
+};
+var LABELS = {
+	[IndicatorStatus.Good]: "On track",
+	[IndicatorStatus.Warning]: "At risk",
+	[IndicatorStatus.Critical]: "Off track"
+};
+var finite = (cell) => cell === null || cell === void 0 || cell === "" || !Number.isFinite(+cell) ? null : +cell;
+/**
+* Base of every indicator: turns rows into readings on a shared scale, derives status with its
+* label and icon, and lays several readings out as small multiples.
+*/
+var IndicatorChart = class extends Chart2D {
+	defaults() {
+		return {
+			label: "category",
+			value: "value",
+			target: "target",
+			previous: "previous",
+			thresholds: [.5, .8],
+			higherIsBetter: true,
+			legend: LegendPosition.None
+		};
+	}
+	plotMargin() {
+		return {
+			top: 10,
+			right: 16,
+			bottom: 10,
+			left: 16
+		};
+	}
+	draw(ctx) {
+		const readings = this.readings();
+		this.texts(ctx, "empty", readings.length ? [] : [{
+			text: "No data",
+			x: ctx.plot.width / 2,
+			y: ctx.plot.height / 2,
+			size: 13,
+			tone: "muted"
+		}]);
+		this.drawReadings(ctx, readings);
+	}
+	/** Scale ends shared by all readings. */
+	domain(rows = this.options.data ?? []) {
+		const { min, max, value, target } = this.options;
+		const numbers = rows.flatMap((row) => [finite(row[value]), finite(row[target])]).filter((n) => n !== null);
+		const low = min ?? Math.min(0, ...numbers);
+		const high = max ?? scaleLinear().domain([low, Math.max(low + 1, ...numbers)]).nice(5).domain()[1];
+		return [low, high > low ? high : low + 1];
+	}
+	/** Rows with a usable value. Rows without one are dropped; duplicate labels stay separate. */
+	readings(rows = this.options.data ?? [], [low, high] = this.domain(rows)) {
+		const { label, value, target, previous } = this.options;
+		const place = (n) => Math.max(0, Math.min(1, (n - low) / (high - low)));
+		return rows.flatMap((row, index) => {
+			const measure = finite(row[value]);
+			if (measure === null) return [];
+			const goal = finite(row[target]);
+			const reach = goal === null || goal === low ? null : (measure - low) / (goal - low);
+			return [{
+				id: `${String(row[label] ?? "")}#${index}`,
+				label: String(row[label] ?? ""),
+				value: measure,
+				target: goal,
+				previous: finite(row[previous]),
+				fraction: place(measure),
+				targetFraction: goal === null ? null : place(goal),
+				attainment: reach ?? place(measure),
+				row
+			}];
+		});
+	}
+	/** Mean reading per label, for long-form rows that carry several series per category. */
+	averaged(readings) {
+		const { label, value, target } = this.options;
+		const labels = [...new Set(readings.map((r) => r.label))];
+		return this.readings(labels.map((name) => {
+			const own = readings.filter((r) => r.label === name);
+			const goals = own.flatMap((r) => r.target === null ? [] : [r.target]);
+			return {
+				[label]: name,
+				[value]: mean(own, (r) => r.value),
+				[target]: goals.length ? mean(goals) : null
+			};
+		}), this.domain());
+	}
+	status(reading) {
+		const { thresholds, higherIsBetter } = this.options;
+		const [low, high] = thresholds, a = reading.attainment;
+		const key = higherIsBetter ? a >= high ? IndicatorStatus.Good : a >= low ? IndicatorStatus.Warning : IndicatorStatus.Critical : a <= low ? IndicatorStatus.Good : a <= high ? IndicatorStatus.Warning : IndicatorStatus.Critical;
+		return this.statusView(key);
+	}
+	statusView(key) {
+		return {
+			key,
+			label: this.options.statusLabels?.[key] ?? LABELS[key],
+			color: this.theme[key === IndicatorStatus.Critical ? "critical" : key === IndicatorStatus.Warning ? "warning" : "good"],
+			glyph: GLYPHS[key]
+		};
+	}
+	/** Status bands along the scale, ending at the reading's target when it has one. */
+	zones(reading) {
+		const { thresholds, higherIsBetter } = this.options;
+		const span = reading.targetFraction ?? 1;
+		const [a, b] = thresholds.map((t) => Math.min(1, t * span));
+		const order = higherIsBetter ? [
+			IndicatorStatus.Critical,
+			IndicatorStatus.Warning,
+			IndicatorStatus.Good
+		] : [
+			IndicatorStatus.Good,
+			IndicatorStatus.Warning,
+			IndicatorStatus.Critical
+		];
+		return [
+			[0, a],
+			[a, b],
+			[b, 1]
+		].map(([from, to], i) => ({
+			from,
+			to,
+			status: this.statusView(order[i])
+		})).filter((zone) => zone.to > zone.from);
+	}
+	formatted(value) {
+		const { format, unit } = this.options;
+		if (format) return format(value);
+		const [low, high] = this.domain();
+		return `${Scales.format(value, high - low)}${unit ?? ""}`;
+	}
+	/** Round values on the scale, as fractions of it. */
+	scaleTicks(count) {
+		const [low, high] = this.domain();
+		return scaleLinear().domain([low, high]).ticks(count).map((v) => (v - low) / (high - low));
+	}
+	percent(fraction) {
+		return `${Math.round(fraction * 100)}%`;
+	}
+	tooltip(reading, color) {
+		const status = this.status(reading);
+		return {
+			title: reading.label || this.meta.name,
+			color,
+			rows: [
+				["Value", this.formatted(reading.value)],
+				...reading.target === null ? [] : [["Target", this.formatted(reading.target)]],
+				["Status", status.label]
+			]
+		};
+	}
+	accent(ctx) {
+		return ctx.palette.color(this.options.value);
+	}
+	/** Estimated width of a text run. */
+	textWidth(text, size = 11) {
+		return text.length * size * .564;
+	}
+	/** Shortens text to fit, or empties it when not even a few characters would. */
+	fit(text, width, size = 11) {
+		if (this.textWidth(text, size) <= width) return text;
+		const keep = Math.floor(width / (size * .564)) - 1;
+		return keep < 3 ? "" : `${text.slice(0, keep).trimEnd()}…`;
+	}
+	/** Grid of `count` cells close to `aspect` (width / height), last row centred. */
+	cells(plot, count, aspect, gap = 14) {
+		let best = {
+			columns: 1,
+			score: -1
+		};
+		for (let columns = 1; columns <= count; columns++) {
+			const rows = Math.ceil(count / columns);
+			const w = (plot.width - gap * (columns - 1)) / columns, h = (plot.height - gap * (rows - 1)) / rows;
+			const score = Math.min(w / aspect, h);
+			if (score > best.score) best = {
+				columns,
+				score
+			};
+		}
+		const rows = Math.ceil(count / best.columns);
+		const w = (plot.width - gap * (best.columns - 1)) / best.columns, h = (plot.height - gap * (rows - 1)) / rows;
+		return Array.from({ length: count }, (_, i) => {
+			const row = Math.floor(i / best.columns), inRow = row === rows - 1 ? count - row * best.columns : best.columns;
+			return {
+				x: (best.columns - inRow) * (w + gap) / 2 + i % best.columns * (w + gap),
+				y: row * (h + gap),
+				width: w,
+				height: h
+			};
+		});
+	}
+	/** Draws each reading into its own cell, keeping as many as stay legible. */
+	facets(ctx, readings, aspect, paint, smallest = 72) {
+		const fits = (n) => {
+			const c = this.cells(ctx.plot, n, aspect)[0];
+			return c !== void 0 && Math.min(c.width / aspect, c.height) >= smallest;
+		};
+		let shown = readings.length;
+		while (shown > 1 && !fits(shown)) shown--;
+		const hidden = readings.length - shown;
+		const plot = hidden ? {
+			...ctx.plot,
+			height: ctx.plot.height - 16
+		} : ctx.plot;
+		const cells = this.cells(plot, shown, aspect);
+		readings.slice(0, shown).forEach((reading, i) => {
+			const box = cells[i], cell = ctx.nest(`translate(${box.x},${box.y})`, `cell-${i}`);
+			Object.defineProperty(cell, "plot", { value: {
+				...box,
+				x: 0,
+				y: 0
+			} });
+			paint(cell, reading, i);
+		});
+		ctx.root.selectAll(":scope > g").filter(function() {
+			const match = /m-cell-(\d+)/.exec(this.getAttribute("class") ?? "");
+			return !!match && +match[1] >= shown;
+		}).remove();
+		this.texts(ctx, "more", hidden ? [{
+			text: `+${hidden} more`,
+			x: ctx.plot.width,
+			y: ctx.plot.height - 6,
+			tone: "muted",
+			anchor: "end"
+		}] : []);
+	}
+	/** Layer of text, one element per item. */
+	texts(ctx, name, items) {
+		const { animated } = this;
+		const layer = ctx.marks(name, "text", items.filter((item) => item.text), (d, i) => d.key ?? i);
+		ctx.text(layer).attr("x", (d) => d.x).attr("y", (d) => d.y).attr("dominant-baseline", "central").attr("pointer-events", "none").attr("text-anchor", (d) => d.anchor ?? "middle").attr("font-size", (d) => d.size ?? 11).attr("font-weight", (d) => d.weight ?? 400).attr("fill", (d) => ({
+			ink: ctx.theme.ink,
+			secondary: ctx.theme.inkSecondary,
+			muted: ctx.theme.inkMuted
+		})[d.tone ?? "secondary"]).style("font-variant-numeric", "tabular-nums");
+		layer.each(function(d) {
+			const node = this, text = select(node);
+			if (!animated || !d.count) {
+				text.text(d.text);
+				return;
+			}
+			const [to, format] = d.count, from = node.counted ?? 0;
+			node.counted = to;
+			text.transition().duration(900).ease(easeCubicOut).textTween(() => (t) => format(from + (to - from) * t));
+		});
+		return layer;
+	}
+	/** Status icon on a coloured disc, with its name beside it unless `text` is empty. */
+	chips(ctx, name, items) {
+		const chips = ctx.marks(name, "g", items, (d) => d.key).attr("pointer-events", "none").attr("transform", (d) => {
+			const size = d.size ?? 7, wide = 2 * size + (d.text ? 4 + this.textWidth(d.text, size + 4) : 0);
+			return `translate(${(d.anchor === "end" ? d.x - wide : d.anchor === "middle" ? d.x - wide / 2 : d.x) + size},${d.y})`;
+		});
+		chips.selectAll("circle").data((d) => [d]).join("circle").attr("r", (d) => d.size ?? 7).attr("fill", (d) => d.status.color);
+		chips.selectAll("path").data((d) => [d]).join("path").attr("d", (d) => d.status.glyph).attr("fill", "none").attr("transform", (d) => `scale(${(d.size ?? 7) / 7})`).attr("stroke", (d) => ctx.palette.inkOn(d.status.color)).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		const labels = chips.selectAll("text").data((d) => d.text ? [d] : []).join("text");
+		ctx.text(labels, 11, "secondary").attr("x", (d) => (d.size ?? 7) + 4).attr("dominant-baseline", "central").attr("font-size", (d) => (d.size ?? 7) + 4).text((d) => d.text ?? "");
+	}
+	/** Sets `d` as a function of a fraction, tweening the fraction so arcs and fills sweep. */
+	sweep(selection, fraction, path) {
+		const { animated } = this;
+		selection.each(function(datum) {
+			const node = this, from = node.swept ?? 0, to = fraction(datum);
+			node.swept = to;
+			interrupt(node);
+			if (!animated) {
+				select(node).attr("d", path(datum, to));
+				return;
+			}
+			select(node).transition().duration(900).ease(easeCubicOut).attrTween("d", () => (t) => path(datum, from + (to - from) * t));
+		});
+	}
+	/** Filled annular sector, angles in radians clockwise from 12 o'clock. */
+	ring(inner, outer, start, end, corner = 0) {
+		if (Math.abs(end - start) < 1e-4 || outer <= inner) return "";
+		return arc().cornerRadius(corner)({
+			innerRadius: Math.max(0, inner),
+			outerRadius: outer,
+			startAngle: start,
+			endAngle: end
+		}) ?? "";
+	}
+};
+export { IndicatorChart };