@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/indicators/TargetChart.js

@@ -0,0 +1,160 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { TargetMark, TargetPlacement, TargetRingScale, TargetRingStyle } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+import { ascending, max, range, scaleLinear, scaleSqrt } from "d3";
+// src/charts/indicators/TargetChart.ts
+/** A bullseye: distance from the centre is distance from target, so a glance shows what is off. */
+var TargetChart = class extends IndicatorChart {
+	static meta = {
+		id: "target-bullseye",
+		name: "Target chart",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots how far each measure landed from its target, with the bullseye meaning exactly on goal.",
+		tags: [
+			"bullseye",
+			"deviation",
+			"accuracy",
+			"goal"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 9),
+		variants: {
+			rings: [
+				4,
+				3,
+				5
+			],
+			ringScale: [TargetRingScale.Linear, TargetRingScale.EqualArea],
+			placement: [
+				TargetPlacement.Even,
+				TargetPlacement.Spiral,
+				TargetPlacement.Sides
+			],
+			mark: [TargetMark.Dot, TargetMark.Stem],
+			ringStyle: [TargetRingStyle.Filled, TargetRingStyle.Reticle],
+			callouts: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			rings: 4,
+			ringScale: TargetRingScale.Linear,
+			placement: TargetPlacement.Even,
+			mark: TargetMark.Dot,
+			ringStyle: TargetRingStyle.Filled,
+			callouts: true
+		};
+	}
+	drawReadings(ctx, readings) {
+		const { rings, ringScale, placement, mark, ringStyle, callouts } = this.options;
+		const { width, height } = ctx.plot;
+		const radius = Math.min(height / 2 - 2, callouts ? width / 2 - 60 : width / 2 - 2);
+		const scored = readings.filter((r) => r.target !== null && r.target !== 0).map((reading) => ({
+			reading,
+			signed: (reading.value - reading.target) / Math.abs(reading.target)
+		}));
+		const worst = max(scored, (d) => Math.abs(d.signed)) ?? 0;
+		const reach = scaleLinear().domain([0, Math.max(.01, worst)]).nice(4).domain()[1];
+		const place = (ringScale === TargetRingScale.EqualArea ? scaleSqrt() : scaleLinear()).domain([0, reach]).range([0, radius]);
+		const count = Math.max(2, rings);
+		const stage = ctx.nest(`translate(${width / 2},${height / 2})`, "stage");
+		const circles = range(count, 0, -1).map((i) => ({
+			i,
+			r: place(reach * i / count)
+		}));
+		const filled = ringStyle === TargetRingStyle.Filled;
+		const disks = ctx.marks("rings", "circle", circles, (d) => d.i, stage.root).attr("fill", filled ? ctx.theme.inkMuted : "none").attr("fill-opacity", filled ? .11 : 0).attr("stroke", filled ? "none" : ctx.theme.grid).attr("stroke-width", 1.5);
+		ctx.set(disks, { r: (d) => d.r }, { r: 0 }, 30);
+		ctx.marks("crosshair", "line", filled ? [] : [0, 1], (d) => d, stage.root).attr("stroke", ctx.theme.grid).attr("stroke-width", 1.5).attr("x1", (d) => d ? -radius : 0).attr("x2", (d) => d ? radius : 0).attr("y1", (d) => d ? 0 : -radius).attr("y2", (d) => d ? 0 : radius).attr("pointer-events", "none");
+		ctx.marks("eye", "circle", [0], (d) => d, stage.root).attr("r", 3).attr("fill", ctx.theme.ink).attr("cx", 0).attr("cy", 0);
+		const ordered = placement === TargetPlacement.Spiral ? [...scored].sort((a, b) => ascending(Math.abs(a.signed), Math.abs(b.signed))) : scored;
+		const left = ordered.filter((d) => d.signed < 0), right = ordered.filter((d) => d.signed >= 0);
+		const angleOf = (d, i) => {
+			if (placement === TargetPlacement.Spiral) return .35 + i / Math.max(1, ordered.length) * 2 * Math.PI * .9;
+			if (placement === TargetPlacement.Even) return (i + .5) / Math.max(1, ordered.length) * 2 * Math.PI;
+			const side = d.signed < 0 ? left : right, slot = (side.indexOf(d) + .5) / side.length;
+			return (d.signed < 0 ? -1 : 1) * (.15 + slot * .7) * Math.PI;
+		};
+		const shots = ordered.map((d, i) => {
+			const angle = angleOf(d, i), r = place(Math.abs(d.signed));
+			return {
+				reading: d.reading,
+				miss: Math.abs(d.signed),
+				signed: d.signed,
+				angle,
+				radius: r,
+				x: r * Math.sin(angle),
+				y: -r * Math.cos(angle)
+			};
+		});
+		const color = this.accent(ctx);
+		const tip = (d) => ({
+			...this.tooltip(d.reading, color),
+			rows: [...this.tooltip(d.reading).rows, ["Off target", `${d.signed >= 0 ? "+" : ""}${(d.signed * 100).toFixed(1)}%`]]
+		});
+		const stems = ctx.marks("stems", "line", mark === TargetMark.Stem ? shots : [], (d) => d.reading.id, stage.root).attr("stroke", color).attr("stroke-width", 2).attr("x1", 0).attr("y1", 0);
+		ctx.set(stems, {
+			x2: (d) => d.x,
+			y2: (d) => d.y
+		}, {
+			x2: 0,
+			y2: 0
+		}, 25);
+		ctx.hover(stems, tip);
+		const dots = ctx.marks("shots", "circle", shots, (d) => d.reading.id, stage.root).attr("r", 6).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.x,
+			cy: (d) => d.y
+		}, {
+			cx: 0,
+			cy: 0
+		}, 25);
+		ctx.hover(dots, tip);
+		const ticks = circles.filter((d) => d.r >= 20);
+		this.texts(stage, "ring-labels", ticks.map((d) => ({
+			key: d.i,
+			text: `${Math.round(reach * d.i * 100 / count)}%`,
+			x: 0,
+			y: -d.r + 7,
+			size: 9,
+			tone: "muted"
+		})));
+		const sides = placement === TargetPlacement.Sides;
+		this.texts(stage, "sides", sides ? [{
+			key: "under",
+			text: "Under",
+			x: -radius - 6,
+			y: -radius + 6,
+			size: 10,
+			tone: "muted",
+			anchor: "end"
+		}, {
+			key: "over",
+			text: "Over",
+			x: radius + 6,
+			y: -radius + 6,
+			size: 10,
+			tone: "muted",
+			anchor: "start"
+		}] : []);
+		const worstShots = (callouts ? [...shots].sort((a, b) => b.miss - a.miss) : []).reduce((kept, d) => {
+			const clear = kept.every((other) => other.x >= 0 !== d.x >= 0 || Math.abs(other.y - d.y) >= 14);
+			return kept.length < 3 && clear ? [...kept, d] : kept;
+		}, []);
+		this.texts(stage, "callouts", worstShots.map((d) => {
+			const east = d.x >= 0, room = width / 2 - radius - 8;
+			return {
+				key: d.reading.id,
+				text: this.fit(d.reading.label, room + (radius - Math.abs(d.x)) - 8),
+				x: d.x + (east ? 10 : -10),
+				y: d.y,
+				tone: "ink",
+				anchor: east ? "start" : "end"
+			};
+		}));
+	}
+};
+export { TargetChart };

package/dist/charts/indicators/ThermometerChart.js

@@ -0,0 +1,144 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { ThermometerBase, ThermometerScale, ThermometerSide } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+// src/charts/indicators/ThermometerChart.ts
+/** Fill level in a tube, for temperatures and fundraising totals against a goal. */
+var ThermometerChart = class extends IndicatorChart {
+	static meta = {
+		id: "thermometer",
+		name: "Thermometer",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Fills a graduated tube to the current value, the classic form for temperature and fundraising goals.",
+		tags: [
+			"fundraising",
+			"temperature",
+			"goal",
+			"tube"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 3),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			base: [ThermometerBase.Bulb, ThermometerBase.Flat],
+			graduation: [
+				ThermometerScale.Major,
+				ThermometerScale.Fine,
+				ThermometerScale.None
+			],
+			side: [
+				ThermometerSide.Right,
+				ThermometerSide.Left,
+				ThermometerSide.Both
+			],
+			showTarget: [true, false]
+		},
+		valid: (v) => v.graduation !== ThermometerScale.None || v.side === ThermometerSide.Right
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Vertical,
+			base: ThermometerBase.Bulb,
+			graduation: ThermometerScale.Major,
+			side: ThermometerSide.Right,
+			showTarget: true
+		};
+	}
+	drawReadings(ctx, readings) {
+		const vertical = this.options.orientation === Orientation.Vertical;
+		this.facets(ctx, readings, vertical ? .7 : 3.4, (cell, reading) => this.tube(cell, reading), vertical ? 110 : 52);
+	}
+	body(half, bulb, inset, top) {
+		const t = half - inset, r = bulb - inset;
+		if (this.options.base === ThermometerBase.Flat) return `M${-t} ${-top + t}A${t} ${t} 0 0 1 ${t} ${-top + t}V${-t}A${t} ${t} 0 0 1 ${-t} ${-t}Z`;
+		const join = -Math.sqrt(Math.max(0, r * r - t * t));
+		return `M${-t} ${-top + t}A${t} ${t} 0 0 1 ${t} ${-top + t}V${join}A${r} ${r} 0 1 1 ${-t} ${join}Z`;
+	}
+	tube(ctx, reading) {
+		const { orientation, base, graduation, side, showTarget } = this.options;
+		const vertical = orientation === Orientation.Vertical;
+		const { width, height } = ctx.plot;
+		const along = vertical ? height - 48 : width - 92;
+		const half = Math.max(5, Math.min(11, along * .05)), bulbbed = base === ThermometerBase.Bulb;
+		const bulb = bulbbed ? half * 1.9 : half;
+		const length = along - bulb - half;
+		const fromBase = bulbbed ? bulb * .9 : half;
+		const span = length - fromBase + half;
+		const at = (fraction) => fromBase + fraction * (span - half);
+		const shift = vertical ? side === ThermometerSide.Left ? 12 : side === ThermometerSide.Right ? -12 : 0 : 0;
+		const ox = vertical ? width / 2 + shift : bulb + 2;
+		const oy = vertical ? 26 + length + half : (height - 12) / 2 - (side === ThermometerSide.Both ? 0 : side === ThermometerSide.Left ? -6 : 6);
+		const pose = vertical ? `translate(${ox},${oy})` : `translate(${ox},${oy}) rotate(90)`;
+		const overlay = (u, v) => vertical ? [ox + v, oy - u] : [ox + u, oy + v];
+		const glass = ctx.nest(pose, "glass");
+		const color = this.accent(ctx);
+		const top = length + half;
+		const shell = ctx.marks("shell", "path", [reading], (d) => d.id, glass.root).attr("fill", ctx.theme.grid).attr("d", this.body(half, bulb, 0, top));
+		ctx.hover(shell, (d) => this.tooltip(d, color));
+		const liquid = ctx.marks("liquid", "path", [reading], (d) => d.id, glass.root).attr("fill", color);
+		this.sweep(liquid, (d) => d.fraction, (_, f) => this.body(half, bulb, 3, Math.max(fromBase * .6, at(f) + half - 3)));
+		ctx.hover(liquid, (d) => this.tooltip(d, color));
+		const signs = side === ThermometerSide.Both ? [-1, 1] : side === ThermometerSide.Left ? [-1] : [1];
+		const fine = graduation === ThermometerScale.Fine;
+		const steps = graduation === ThermometerScale.None ? 0 : fine ? 20 : 4;
+		const major = new Set(this.scaleTicks(4).map((f) => f.toFixed(4)));
+		const ticks = steps ? signs.flatMap((sign) => this.scaleTicks(steps).map((fraction, i) => ({
+			key: `${sign}/${i}`,
+			fraction,
+			major: major.has(fraction.toFixed(4)),
+			sign
+		}))) : [];
+		const marks = ctx.marks("axis-ticks", "line", ticks, (d) => d.key).attr("stroke", (d) => d.major ? ctx.theme.inkSecondary : ctx.theme.axis).attr("stroke-width", 1.5);
+		const end = (d, off) => overlay(at(d.fraction), d.sign * off);
+		marks.attr("x1", (d) => end(d, half + 3)[0]).attr("y1", (d) => end(d, half + 3)[1]).attr("x2", (d) => end(d, half + (d.major ? 9 : 6))[0]).attr("y2", (d) => end(d, half + (d.major ? 9 : 6))[1]);
+		const [low, high] = this.domain();
+		this.texts(ctx, "numbers", ticks.filter((d) => d.major && d.sign === signs[signs.length - 1]).map((d) => {
+			const [x, y] = overlay(at(d.fraction), d.sign * (half + 12));
+			return {
+				key: d.key,
+				text: this.formatted(low + d.fraction * (high - low)),
+				x,
+				y: vertical ? y : y + (d.sign > 0 ? 5 : -5),
+				size: 10,
+				tone: "muted",
+				anchor: vertical ? d.sign > 0 ? "start" : "end" : "middle"
+			};
+		}));
+		const goal = showTarget && reading.targetFraction !== null ? [reading.targetFraction] : [];
+		const flag = ctx.marks("goal", "line", goal, (_, i) => i).attr("stroke", ctx.theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		flag.attr("x1", (f) => overlay(at(f), -half - 4)[0]).attr("y1", (f) => overlay(at(f), -half - 4)[1]).attr("x2", (f) => overlay(at(f), half + 4)[0]).attr("y2", (f) => overlay(at(f), half + 4)[1]);
+		ctx.hover(flag, () => this.tooltip(reading, color));
+		const value = {
+			key: "value",
+			text: this.formatted(reading.value),
+			size: 18,
+			tone: "ink",
+			weight: 600,
+			count: [reading.value, (v) => this.formatted(v)]
+		};
+		this.texts(ctx, "readout", vertical ? [{
+			...value,
+			x: width / 2,
+			y: 10
+		}, {
+			key: "label",
+			text: this.fit(reading.label, width),
+			x: width / 2,
+			y: height - 6
+		}] : [{
+			...value,
+			x: width,
+			y: oy - 8,
+			anchor: "end"
+		}, {
+			key: "label",
+			text: this.fit(reading.label, 76),
+			x: width,
+			y: oy + 10,
+			anchor: "end"
+		}]);
+	}
+};
+export { ThermometerChart };

package/dist/charts/indicators/TrafficLightChart.js

@@ -0,0 +1,235 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { IndicatorStatus, TrafficHousing, TrafficLayout } from "./IndicatorEnums.js";
+// src/charts/indicators/TrafficLightChart.ts
+/** RAG status: which of a few states each item is in, always named so colour is never the only signal. */
+var TrafficLightChart = class extends IndicatorChart {
+	static meta = {
+		id: "traffic-light",
+		name: "Traffic light",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows the red, amber or green state of each item, each lamp named so status never rests on colour alone.",
+		tags: [
+			"rag",
+			"status",
+			"red amber green",
+			"health"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 3).map((row) => ({
+			...row,
+			value: Math.round(+row.value * .9)
+		})),
+		variants: {
+			layout: [
+				TrafficLayout.Housing,
+				TrafficLayout.List,
+				TrafficLayout.Matrix
+			],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			housing: [
+				TrafficHousing.Pill,
+				TrafficHousing.Box,
+				TrafficHousing.Bare
+			],
+			lamps: [3, 2],
+			glyph: [true, false]
+		},
+		valid: (v) => v.layout === TrafficLayout.Housing || v.orientation === Orientation.Vertical && v.housing === TrafficHousing.Pill && v.glyph === true && (v.layout === TrafficLayout.List || v.lamps === 3)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			series: "series",
+			layout: TrafficLayout.Housing,
+			orientation: Orientation.Vertical,
+			housing: TrafficHousing.Pill,
+			lamps: 3,
+			glyph: true
+		};
+	}
+	/** The status shown, with two lamps folding "at risk" into a fail. */
+	state(reading) {
+		const status = this.status(reading);
+		return this.options.lamps === 2 && status.key === IndicatorStatus.Warning ? this.statusView(IndicatorStatus.Critical) : status;
+	}
+	order() {
+		return (this.options.lamps === 2 ? [IndicatorStatus.Critical, IndicatorStatus.Good] : [
+			IndicatorStatus.Critical,
+			IndicatorStatus.Warning,
+			IndicatorStatus.Good
+		]).map((key) => this.statusView(key));
+	}
+	drawReadings(ctx, readings) {
+		const { layout } = this.options;
+		const lamps = layout === TrafficLayout.Housing ? this.housings(ctx, readings) : layout === TrafficLayout.List ? this.list(ctx, readings) : this.matrix(ctx, readings);
+		const lit = lamps.filter((d) => d.lit);
+		const shapes = ctx.marks("lamps", "circle", lamps, (d) => d.key).attr("cx", (d) => d.x).attr("cy", (d) => d.y).attr("fill", (d) => d.lit ? d.status.color : ctx.theme.axis).attr("fill-opacity", (d) => d.lit ? 1 : .45);
+		ctx.set(shapes, { r: (d) => d.r }, { r: 0 }, 14);
+		ctx.hover(shapes, (d) => this.tooltip(d.reading, d.status.color));
+		ctx.marks("icons", "path", this.options.glyph ? lit.filter((d) => d.r >= 6) : [], (d) => d.key).attr("d", (d) => d.status.glyph).attr("fill", "none").attr("stroke", (d) => ctx.palette.inkOn(d.status.color)).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round").attr("pointer-events", "none").attr("transform", (d) => `translate(${d.x},${d.y}) scale(${Math.min(1.8, d.r / 7)})`).attr("vector-effect", "non-scaling-stroke");
+	}
+	housings(ctx, readings) {
+		const { orientation, housing } = this.options;
+		const vertical = orientation === Orientation.Vertical;
+		const { width, height } = ctx.plot;
+		const rows = this.averaged(readings);
+		const stops = this.order();
+		const ratio = (stops.length - 1) * 2.56 + 2.36;
+		const texts = [];
+		const boxes = [];
+		const aspect = vertical ? .5 : 2.1;
+		const shown = rows.slice(0, 12);
+		const cells = this.cells({
+			width,
+			height
+		}, shown.length || 1, aspect, 10);
+		const words = [];
+		shown.forEach((reading, i) => {
+			const cell = cells[i];
+			const state = this.state(reading);
+			const free = cell.height - 32;
+			const r = Math.max(5, vertical ? Math.min(free / ratio, cell.width / 2.72) : Math.min(free / 2.72, cell.width / ratio));
+			const long = r * ratio, thin = r * 2.72;
+			const w = vertical ? thin : long, h = vertical ? long : thin;
+			const x0 = cell.x + (cell.width - w) / 2, y0 = cell.y + (free - h) / 2;
+			boxes.push({
+				key: reading.id,
+				x: x0,
+				y: y0,
+				width: w,
+				height: h,
+				rx: housing === TrafficHousing.Pill ? thin / 2 : 6,
+				reading
+			});
+			stops.forEach((status, s) => {
+				const along = r * 1.18 + s * r * 2.56;
+				texts.push({
+					key: `${reading.id}/${s}`,
+					x: vertical ? x0 + w / 2 : x0 + along,
+					y: vertical ? y0 + along : y0 + h / 2,
+					r,
+					status,
+					lit: status.key === state.key,
+					reading
+				});
+			});
+			words.push({
+				key: `${reading.id}n`,
+				text: this.fit(reading.label, cell.width, 11),
+				x: cell.x + cell.width / 2,
+				y: cell.y + free + 9,
+				tone: "ink"
+			});
+			words.push({
+				key: `${reading.id}s`,
+				text: this.fit(state.label, cell.width + 8, 10),
+				x: cell.x + cell.width / 2,
+				y: cell.y + free + 22,
+				size: 10
+			});
+		});
+		const shells = ctx.marks("housings", "rect", housing === TrafficHousing.Bare ? [] : boxes, (d) => d.key).attr("x", (d) => d.x).attr("y", (d) => d.y).attr("width", (d) => d.width).attr("height", (d) => d.height).attr("rx", (d) => d.rx).attr("fill", ctx.theme.grid);
+		ctx.hover(shells, (d) => this.tooltip(d.reading));
+		this.texts(ctx, "words", words);
+		return texts;
+	}
+	list(ctx, readings) {
+		const { width, height } = ctx.plot;
+		const shown = this.averaged(readings).slice(0, Math.max(1, Math.floor(height / 24)));
+		const slot = Math.min(38, height / Math.max(1, shown.length)), top = (height - slot * shown.length) / 2, r = Math.min(10, slot * .3);
+		const yOf = (i) => top + (i + .5) * slot;
+		this.marksRules(ctx, shown.slice(1).map((d, i) => ({
+			key: d.id,
+			y: top + (i + 1) * slot
+		})), width);
+		this.texts(ctx, "words", shown.flatMap((d, i) => [
+			{
+				key: `${d.id}n`,
+				text: this.fit(d.label, width * .42),
+				x: 2 * r + 10,
+				y: yOf(i),
+				anchor: "start",
+				tone: "ink"
+			},
+			{
+				key: `${d.id}v`,
+				text: this.formatted(d.value),
+				x: width * .66,
+				y: yOf(i),
+				anchor: "end",
+				tone: "ink",
+				weight: 600
+			},
+			{
+				key: `${d.id}s`,
+				text: this.fit(this.state(d).label, width * .3),
+				x: width,
+				y: yOf(i),
+				anchor: "end"
+			}
+		]));
+		return shown.map((reading, i) => ({
+			key: reading.id,
+			x: r,
+			y: yOf(i),
+			r,
+			status: this.state(reading),
+			lit: true,
+			reading
+		}));
+	}
+	marksRules(ctx, rules, width) {
+		ctx.marks("rules", "line", rules, (d) => d.key).attr("x1", 0).attr("x2", width).attr("y1", (d) => d.y).attr("y2", (d) => d.y).attr("stroke", ctx.theme.grid);
+	}
+	matrix(ctx, readings) {
+		const { series } = this.options;
+		const { width, height } = ctx.plot;
+		const labels = [...new Set(readings.map((r) => r.label))];
+		const columns = [...new Set(readings.map((r) => String(r.row[series] ?? "")))].slice(0, Math.max(1, Math.floor((width - 60) / 40)));
+		const gutter = Math.min(width * .28, Math.max(20, ...labels.map((n) => this.textWidth(n))) + 12);
+		const header = 20, foot = 22;
+		const rows = labels.slice(0, Math.max(1, Math.floor((height - header - foot) / 22)));
+		const w = (width - gutter) / Math.max(1, columns.length), h = (height - header - foot) / Math.max(1, rows.length);
+		const r = Math.max(7, Math.min(11, h * .36, w * .3));
+		const key = readings.length ? this.order() : [];
+		const step = width / Math.max(1, key.length);
+		this.chips(ctx, "legend", key.map((status, i) => ({
+			key: status.key,
+			x: i * step,
+			y: height - 7,
+			status,
+			text: status.label,
+			size: 6
+		})));
+		this.texts(ctx, "words", readings.length ? [...columns.map((c, i) => ({
+			key: `c${c}`,
+			text: this.fit(c, w - 4),
+			x: gutter + (i + .5) * w,
+			y: 7,
+			size: 10.5
+		})), ...rows.map((n, i) => ({
+			key: `r${n}`,
+			text: this.fit(n, gutter - 8),
+			x: 0,
+			y: header + (i + .5) * h,
+			anchor: "start",
+			tone: "ink"
+		}))] : []);
+		return rows.flatMap((name, i) => columns.flatMap((column, j) => {
+			const reading = readings.find((d) => d.label === name && String(d.row[series] ?? "") === column);
+			return reading ? [{
+				key: `${name}/${column}`,
+				x: gutter + (j + .5) * w,
+				y: header + (i + .5) * h,
+				r,
+				status: this.state(reading),
+				lit: true,
+				reading
+			}] : [];
+		}));
+	}
+};
+export { TrafficLightChart };

package/dist/charts/indicators/VuMeterChart.js

@@ -0,0 +1,155 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { VuResponse } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+import { range, scaleBand } from "d3";
+// src/charts/indicators/VuMeterChart.ts
+var FLOOR = -48;
+/** LED ladders for live levels, with optional peak hold and a decibel response. */
+var VuMeterChart = class extends IndicatorChart {
+	static meta = {
+		id: "vu-meter",
+		name: "VU meter",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows live channel levels as LED ladders, with peak hold and a linear or decibel response.",
+		tags: [
+			"audio",
+			"level",
+			"led",
+			"peak"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 4),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			segments: [
+				24,
+				12,
+				40
+			],
+			response: [VuResponse.Linear, VuResponse.Decibel],
+			mirror: [false, true],
+			peak: [true, false],
+			ruler: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Vertical,
+			segments: 24,
+			response: VuResponse.Linear,
+			mirror: false,
+			peak: true,
+			ruler: true
+		};
+	}
+	level(fraction) {
+		if (this.options.response === VuResponse.Linear) return fraction;
+		return fraction <= 0 ? 0 : Math.max(0, 1 - 20 * Math.log10(fraction) / FLOOR);
+	}
+	drawReadings(ctx, readings) {
+		const { orientation, segments, mirror, peak, ruler, response } = this.options;
+		const vertical = orientation === Orientation.Vertical;
+		const { width, height } = ctx.plot;
+		const gutter = ruler ? vertical ? 34 : 18 : 0;
+		const labelRoom = vertical ? 20 : Math.min(width * .24, Math.max(20, ...readings.map((r) => this.textWidth(r.label))) + 10);
+		const length = vertical ? height - labelRoom - 4 : width - labelRoom - 8;
+		const across = vertical ? width - gutter : height - gutter;
+		const shown = readings.slice(0, Math.max(1, Math.floor(across / 16)));
+		const band = scaleBand(shown.map((r) => r.id), [vertical ? gutter : 0, vertical ? width : across]).padding(.28);
+		const count = Math.max(4, Math.round(segments));
+		const half = mirror ? Math.ceil(count / 2) : count;
+		const step = length / count, cell = Math.max(1.5, step - 2);
+		const leds = shown.flatMap((reading) => {
+			const level = this.level(reading.fraction), held = peak && reading.targetFraction !== null ? Math.ceil(this.level(reading.targetFraction) * half) - 1 : -1;
+			return (mirror ? [-1, 1] : [1]).flatMap((side) => range(half).map((index) => ({
+				key: `${reading.id}/${side}/${index}`,
+				reading,
+				index,
+				side,
+				level: (index + 1) / half,
+				band: band(reading.id),
+				slot: band.bandwidth(),
+				lit: (index + .5) / half <= level,
+				peak: index === held
+			})));
+		});
+		const origin = (d) => mirror ? length / 2 + (d.side > 0 ? d.index * step + 1 : -(d.index + 1) * step + 1) : d.index * step;
+		const box = (d) => {
+			const inset = d.lit || d.peak ? 0 : d.slot * .18;
+			return vertical ? {
+				x: d.band + inset,
+				y: 2 + length - origin(d) - cell,
+				width: d.slot - 2 * inset,
+				height: cell
+			} : {
+				x: labelRoom + origin(d),
+				y: d.band + inset,
+				width: cell,
+				height: d.slot - 2 * inset
+			};
+		};
+		const fill = (d) => d.lit ? ctx.palette.sequential(.25 + .7 * d.level) : ctx.theme.grid;
+		const cells = ctx.marks("leds", "rect", leds, (d) => d.key).attr("fill", fill).attr("rx", Math.min(2, cell / 2)).attr("x", (d) => box(d).x).attr("y", (d) => box(d).y).attr("width", (d) => box(d).width).attr("height", (d) => box(d).height);
+		ctx.hover(cells, (d) => this.tooltip(d.reading));
+		const held = ctx.marks("peaks", "rect", leds.filter((d) => d.peak), (d) => d.key).attr("fill", ctx.theme.ink).attr("rx", Math.min(2, cell / 2)).attr("x", (d) => box(d).x).attr("y", (d) => box(d).y).attr("width", (d) => box(d).width).attr("height", (d) => box(d).height);
+		ctx.hover(held, (d) => ({
+			title: d.reading.label,
+			rows: [["Peak", this.formatted(d.reading.target)]]
+		}));
+		const marks = ruler ? response === VuResponse.Decibel ? [
+			0,
+			-6,
+			-12,
+			-24,
+			-48
+		] : [
+			0,
+			25,
+			50,
+			75,
+			100
+		] : [];
+		const rulerSpot = (m) => {
+			const f = response === VuResponse.Decibel ? 1 - m / FLOOR : m / 100;
+			const up = mirror ? length / 2 + f * length / 2 : f * length;
+			return vertical ? {
+				x: gutter - 6,
+				y: Math.max(6, Math.min(length - 4, 2 + length - up))
+			} : {
+				x: labelRoom + Math.max(6, Math.min(length - 6, up)),
+				y: height - 6
+			};
+		};
+		let lastAt = -Infinity;
+		const roomy = marks.filter((m) => {
+			const spot = rulerSpot(m), at = vertical ? spot.y : spot.x;
+			if (Math.abs(at - lastAt) < (vertical ? 11 : 28)) return false;
+			lastAt = at;
+			return true;
+		});
+		this.texts(ctx, "ruler", roomy.map((m) => ({
+			key: m,
+			text: response === VuResponse.Decibel ? `${m}` : `${m}%`,
+			size: 9.5,
+			tone: "muted",
+			...rulerSpot(m),
+			anchor: vertical ? "end" : "middle"
+		})));
+		this.texts(ctx, "names", shown.map((r) => vertical ? {
+			key: r.id,
+			text: this.fit(r.label, band.step()),
+			x: band(r.id) + band.bandwidth() / 2,
+			y: height - 7
+		} : {
+			key: r.id,
+			text: this.fit(r.label, labelRoom - 8),
+			x: 0,
+			y: band(r.id) + band.bandwidth() / 2,
+			anchor: "start"
+		}));
+	}
+};
+export { VuMeterChart };