@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/indicators/BulletChart.js

@@ -0,0 +1,216 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { BulletMeasure, BulletScale, BulletTarget } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+import { range, scaleLinear } from "d3";
+// src/charts/indicators/BulletChart.ts
+/** Stephen Few's bullet graph: measure, target and qualitative ranges in a compact bar. */
+var BulletChart = class extends IndicatorChart {
+	static meta = {
+		id: "bullet",
+		name: "Bullet chart",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Compares each measure to its target over qualitative ranges in far less room than a gauge.",
+		tags: [
+			"few",
+			"target",
+			"kpi",
+			"performance"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 4),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			measure: [BulletMeasure.Bar, BulletMeasure.Dot],
+			bands: [
+				3,
+				2,
+				4
+			],
+			targetMark: [
+				BulletTarget.Tick,
+				BulletTarget.Triangle,
+				BulletTarget.None
+			],
+			scale: [BulletScale.Shared, BulletScale.Relative],
+			comparison: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			measure: BulletMeasure.Bar,
+			bands: 3,
+			targetMark: BulletTarget.Tick,
+			scale: BulletScale.Shared,
+			comparison: false
+		};
+	}
+	/** Band edges as multiples of the target, the last band running to the scale end. */
+	edges() {
+		const count = Math.max(2, this.options.bands);
+		return range(1, count).map((i) => count === 2 ? 1 : .4 + .6 * (i - 1) / (count - 2));
+	}
+	drawReadings(ctx, readings) {
+		const vertical = this.options.orientation === Orientation.Vertical;
+		const { width, height } = ctx.plot;
+		const relative = this.options.scale === BulletScale.Relative;
+		const room = vertical ? width : height - 22;
+		const rows = readings.slice(0, Math.max(1, Math.floor(room / (vertical ? 40 : 28))));
+		const [low, top] = this.domain();
+		const baseOf = (reading) => reading.target || reading.value || 1;
+		const ceiling = relative ? Math.max(1.3, ...rows.flatMap((r) => [r.value, r.previous ?? 0].map((v) => v / baseOf(r)))) : top, floor = relative ? 0 : low;
+		const gutter = vertical ? 28 : Math.min(width * .26, Math.max(30, ...rows.map((r) => this.textWidth(r.label))) + 10);
+		const length = vertical ? height - 40 : width - gutter - 8;
+		const slot = room / Math.max(1, rows.length);
+		const thick = Math.max(10, Math.min(vertical ? 30 : 26, slot * .62));
+		const axisAt = vertical ? gutter : 0;
+		const lanes = rows.map((reading, i) => {
+			const base = relative ? baseOf(reading) : 1;
+			const at = scaleLinear().domain([floor, ceiling]).range([0, length]).clamp(true);
+			return {
+				reading,
+				top: (vertical ? axisAt + i * ((width - axisAt) / rows.length) : i * slot) + ((vertical ? (width - axisAt) / rows.length : slot) - thick) / 2,
+				thick,
+				at: (value) => at(value / base),
+				length,
+				floor,
+				ceiling,
+				unit: base
+			};
+		});
+		const box = (lane, a, b, inset) => {
+			const from = Math.min(a, b), to = Math.max(a, b);
+			return vertical ? {
+				x: lane.top + inset,
+				y: 6 + length - to,
+				width: lane.thick - 2 * inset,
+				height: to - from
+			} : {
+				x: gutter + from,
+				y: lane.top + inset,
+				width: to - from,
+				height: lane.thick - 2 * inset
+			};
+		};
+		const bands = lanes.flatMap((lane) => {
+			const goal = lane.reading.target ?? lane.ceiling * lane.unit * .8;
+			const stops = [.../* @__PURE__ */ new Set([
+				0,
+				...this.edges().map((edge) => lane.at(edge * goal)),
+				length
+			])].sort((a, b) => a - b);
+			return stops.slice(0, -1).map((from, i) => ({
+				key: `${lane.reading.id}/${i}`,
+				lane,
+				from,
+				to: stops[i + 1],
+				depth: stops.length - 2 - i
+			}));
+		}).filter((band) => band.to > band.from);
+		const fields = ctx.marks("bands", "rect", bands, (d) => d.key).attr("fill", ctx.theme.inkMuted).attr("fill-opacity", (d) => .1 + d.depth * .1);
+		const fieldBox = (d) => box(d.lane, d.from, d.to, 0);
+		fields.attr("x", (d) => fieldBox(d).x).attr("y", (d) => fieldBox(d).y).attr("width", (d) => fieldBox(d).width).attr("height", (d) => fieldBox(d).height);
+		ctx.hover(fields, (d) => this.tooltip(d.lane.reading));
+		const color = this.accent(ctx);
+		const asBar = this.options.measure === BulletMeasure.Bar;
+		const bars = ctx.marks("measures", "rect", asBar ? lanes : [], (d) => d.reading.id).attr("fill", color);
+		const inset = (d) => this.options.comparison ? d.thick * .2 : d.thick * .32;
+		const barBox = (d) => box(d, d.at(0), d.at(d.reading.value), inset(d));
+		const zero = (d) => box(d, d.at(0), d.at(0), inset(d));
+		ctx.set(bars, {
+			x: (d) => barBox(d).x,
+			y: (d) => barBox(d).y,
+			width: (d) => barBox(d).width,
+			height: (d) => barBox(d).height
+		}, {
+			x: (d) => zero(d).x,
+			y: (d) => zero(d).y,
+			width: (d) => zero(d).width,
+			height: (d) => zero(d).height
+		}, 40);
+		ctx.hover(bars, (d) => this.tooltip(d.reading, color));
+		const compared = this.options.comparison ? lanes.filter((d) => d.reading.previous !== null) : [];
+		const prior = ctx.marks("comparison", "rect", compared, (d) => d.reading.id).attr("fill", ctx.theme.inkSecondary);
+		const priorBox = (d) => box(d, d.at(0), d.at(d.reading.previous), d.thick * .42);
+		prior.attr("x", (d) => priorBox(d).x).attr("y", (d) => priorBox(d).y).attr("width", (d) => priorBox(d).width).attr("height", (d) => priorBox(d).height);
+		ctx.hover(prior, (d) => ({
+			title: d.reading.label,
+			rows: [["Previous", this.formatted(d.reading.previous)]]
+		}));
+		const dotSpot = (d) => {
+			const b = box(d, d.at(d.reading.value), d.at(d.reading.value), 0);
+			return {
+				cx: b.x + b.width / 2,
+				cy: b.y + b.height / 2
+			};
+		};
+		const dots = ctx.marks("dots", "circle", asBar ? [] : lanes, (d) => d.reading.id).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("r", (d) => Math.max(5, d.thick * .28));
+		dots.attr("cx", (d) => dotSpot(d).cx).attr("cy", (d) => dotSpot(d).cy);
+		ctx.hover(dots, (d) => this.tooltip(d.reading, color));
+		this.targets(ctx, lanes, vertical, gutter, length);
+		this.axis(ctx, lanes[0], vertical, gutter, length);
+		this.texts(ctx, "names", lanes.map((d) => {
+			const text = this.fit(d.reading.label, vertical ? (width - gutter) / lanes.length - 2 : gutter - 8);
+			return vertical ? {
+				key: d.reading.id,
+				text,
+				x: d.top + d.thick / 2,
+				y: height - 8
+			} : {
+				key: d.reading.id,
+				text,
+				x: gutter - 8,
+				y: d.top + d.thick / 2,
+				anchor: "end",
+				tone: "ink"
+			};
+		}));
+	}
+	targets(ctx, lanes, vertical, gutter, length) {
+		const { targetMark } = this.options;
+		const marked = targetMark === BulletTarget.None ? [] : lanes.filter((d) => d.reading.target !== null);
+		const position = (d) => d.at(d.reading.target);
+		const tick = ctx.marks("target-ticks", "rect", targetMark === BulletTarget.Tick ? marked : [], (d) => d.reading.id).attr("fill", ctx.theme.ink);
+		const tickBox = (d) => vertical ? {
+			x: d.top + d.thick * .12,
+			y: 6 + length - position(d) - 1,
+			width: d.thick * .76,
+			height: 2.5
+		} : {
+			x: gutter + position(d) - 1,
+			y: d.top + d.thick * .12,
+			width: 2.5,
+			height: d.thick * .76
+		};
+		tick.attr("x", (d) => tickBox(d).x).attr("y", (d) => tickBox(d).y).attr("width", (d) => tickBox(d).width).attr("height", (d) => tickBox(d).height);
+		ctx.hover(tick, (d) => this.tooltip(d.reading));
+		const size = 5;
+		const shape = vertical ? `M6 -5 L1 0 L6 ${size} Z` : `M-5 -6 L0 -1 L${size} -6 Z`;
+		const arrow = ctx.marks("target-arrows", "path", targetMark === BulletTarget.Triangle ? marked : [], (d) => d.reading.id).attr("d", shape).attr("fill", ctx.theme.ink).attr("transform", (d) => vertical ? `translate(${d.top + d.thick},${6 + length - position(d)})` : `translate(${gutter + position(d)},${d.top})`);
+		ctx.hover(arrow, (d) => this.tooltip(d.reading));
+	}
+	axis(ctx, lane, vertical, gutter, length) {
+		const relative = this.options.scale === BulletScale.Relative;
+		const steps = lane ? scaleLinear().domain([lane.floor, lane.ceiling]).ticks(vertical ? 4 : 5) : [];
+		const place = (v) => lane ? (v - lane.floor) / (lane.ceiling - lane.floor) * length : 0;
+		const baseline = ctx.plot.height - 8;
+		this.texts(ctx, "axis", steps.map((v) => ({
+			key: v,
+			text: relative ? this.percent(v) : this.formatted(v),
+			size: 10,
+			tone: "muted",
+			...vertical ? {
+				x: gutter - 6,
+				y: 6 + length - place(v),
+				anchor: "end"
+			} : {
+				x: gutter + place(v),
+				y: baseline
+			}
+		})));
+	}
+};
+export { BulletChart };

package/dist/charts/indicators/DeltaIndicator.js

@@ -0,0 +1,254 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { DeltaForm, DeltaLayout, DeltaMode, DeltaSort, IndicatorStatus } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+import { descending, range, scaleLinear } from "d3";
+// src/charts/indicators/DeltaIndicator.ts
+/** How each value moved from its previous reading, for period-over-period dashboards. */
+var DeltaIndicator = class extends IndicatorChart {
+	static meta = {
+		id: "delta-indicator",
+		name: "Delta indicator",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows direction and size of change against a previous value, with polarity read from the sign, not just colour.",
+		tags: [
+			"change",
+			"variance",
+			"period over period",
+			"trend arrow"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 5),
+		variants: {
+			form: [
+				DeltaForm.Triangle,
+				DeltaForm.Chevrons,
+				DeltaForm.Bar,
+				DeltaForm.Slope,
+				DeltaForm.Dumbbell
+			],
+			layout: [DeltaLayout.List, DeltaLayout.Tiles],
+			mode: [DeltaMode.Percent, DeltaMode.Absolute],
+			sort: [DeltaSort.Data, DeltaSort.Magnitude]
+		},
+		valid: (v) => v.mode === DeltaMode.Percent || v.form === DeltaForm.Bar
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			form: DeltaForm.Triangle,
+			layout: DeltaLayout.List,
+			mode: DeltaMode.Percent,
+			sort: DeltaSort.Data
+		};
+	}
+	changes(readings) {
+		const { mode, sort, higherIsBetter } = this.options;
+		const rows = readings.filter((r) => r.previous !== null).map((reading) => {
+			const change = reading.value - reading.previous, percent = reading.previous ? change / Math.abs(reading.previous) : 0;
+			const up = change >= 0, good = change === 0 || up === higherIsBetter;
+			return {
+				reading,
+				change,
+				percent,
+				size: mode === DeltaMode.Percent ? percent : change,
+				up,
+				view: this.statusView(good ? IndicatorStatus.Good : IndicatorStatus.Critical)
+			};
+		});
+		return sort === DeltaSort.Magnitude ? rows.sort((a, b) => descending(Math.abs(a.size), Math.abs(b.size))) : rows;
+	}
+	caption(d) {
+		const percent = `${d.percent >= 0 ? "+" : ""}${(d.percent * 100).toFixed(1)}%`;
+		return this.options.mode === DeltaMode.Absolute ? `${d.change >= 0 ? "+" : ""}${this.formatted(d.change)}` : percent;
+	}
+	drawReadings(ctx, readings) {
+		const rows = this.changes(readings);
+		const { height } = ctx.plot;
+		const tiles = this.options.layout === DeltaLayout.Tiles;
+		const shown = tiles ? rows.slice(0, 12) : rows.slice(0, Math.max(1, Math.floor(height / 26)));
+		const biggest = Math.max(1e-9, ...shown.map((d) => Math.abs(d.size)));
+		const boxes = tiles ? this.tiles(ctx, shown) : this.list(ctx, shown);
+		const low = Math.min(...shown.flatMap((d) => [d.reading.value, d.reading.previous])), high = Math.max(...shown.flatMap((d) => [d.reading.value, d.reading.previous]));
+		this.triangles(ctx, shown, boxes);
+		this.chevrons(ctx, shown, boxes, biggest);
+		this.bars(ctx, shown, boxes, biggest);
+		this.slopes(ctx, shown, boxes, low, high);
+		this.dumbbells(ctx, shown, boxes, low, high);
+	}
+	list(ctx, rows) {
+		const { width, height } = ctx.plot;
+		const slot = Math.min(44, height / Math.max(1, rows.length)), top = (height - slot * rows.length) / 2;
+		const gutter = Math.min(width * .26, Math.max(20, ...rows.map((d) => this.textWidth(d.reading.label))) + 10);
+		const tail = 112;
+		this.texts(ctx, "text", rows.flatMap((d, i) => {
+			const y = top + (i + .5) * slot;
+			return [
+				{
+					key: `${d.reading.id}n`,
+					text: this.fit(d.reading.label, gutter - 8),
+					x: 0,
+					y,
+					anchor: "start"
+				},
+				{
+					key: `${d.reading.id}v`,
+					text: this.formatted(d.reading.value),
+					x: width - 60,
+					y,
+					anchor: "end",
+					tone: "ink",
+					weight: 600,
+					count: [d.reading.value, (v) => this.formatted(v)]
+				},
+				{
+					key: `${d.reading.id}c`,
+					text: this.caption(d),
+					x: width,
+					y,
+					anchor: "end"
+				}
+			];
+		}));
+		return rows.map((_, i) => ({
+			x: gutter,
+			y: top + i * slot + 4,
+			width: width - gutter - tail,
+			height: slot - 8
+		}));
+	}
+	tiles(ctx, rows) {
+		const cells = this.cells(ctx.plot, rows.length, 1.5, 14);
+		this.texts(ctx, "text", rows.flatMap((d, i) => {
+			const c = cells[i], size = Math.min(26, c.height * .2, c.width * .2);
+			return [
+				{
+					key: `${d.reading.id}n`,
+					text: this.fit(d.reading.label, c.width),
+					x: c.x,
+					y: c.y + 7,
+					anchor: "start"
+				},
+				{
+					key: `${d.reading.id}v`,
+					text: this.formatted(d.reading.value),
+					x: c.x,
+					y: c.y + 16 + size / 2,
+					size,
+					anchor: "start",
+					tone: "ink",
+					weight: 600,
+					count: [d.reading.value, (v) => this.formatted(v)]
+				},
+				{
+					key: `${d.reading.id}c`,
+					text: this.caption(d),
+					x: c.x + c.width,
+					y: c.y + 7,
+					anchor: "end"
+				}
+			];
+		}));
+		return cells.map((c) => {
+			const used = 22 + Math.min(26, c.height * .2, c.width * .2);
+			return {
+				x: c.x,
+				y: c.y + used,
+				width: c.width,
+				height: Math.max(12, c.height - used)
+			};
+		});
+	}
+	triangles(ctx, rows, boxes) {
+		const active = this.options.form === DeltaForm.Triangle ? rows : [];
+		const size = (b) => Math.max(5, Math.min(8, b.height * .42));
+		const marks = ctx.marks("triangles", "path", active, (d) => d.reading.id).attr("fill", (d) => d.view.color).attr("d", (d, i) => {
+			const s = size(boxes[rows.indexOf(d)] ?? boxes[i]);
+			return d.up ? `M0 ${-s}L${s * 1.15} ${s * .8}H${-s * 1.15}Z` : `M0 ${s}L${s * 1.15} ${-s * .8}H${-s * 1.15}Z`;
+		}).attr("transform", (d) => {
+			const b = boxes[rows.indexOf(d)];
+			return `translate(${b.x + b.width - size(b) * 1.2},${b.y + b.height / 2})`;
+		});
+		ctx.hover(marks, (d) => this.tooltip(d.reading, d.view.color));
+	}
+	chevrons(ctx, rows, boxes, biggest) {
+		const units = (this.options.form === DeltaForm.Chevrons ? rows : []).flatMap((d) => {
+			const b = boxes[rows.indexOf(d)], count = Math.max(1, Math.ceil(Math.abs(d.size) / biggest * 3));
+			return range(count).map((i) => ({
+				key: `${d.reading.id}/${i}`,
+				d,
+				x: b.x + b.width - 8 - i * 13,
+				y: b.y + b.height / 2
+			}));
+		});
+		const marks = ctx.marks("chevrons", "path", units, (u) => u.key).attr("fill", "none").attr("stroke", (u) => u.d.view.color).attr("stroke-width", 2.5).attr("stroke-linecap", "round").attr("stroke-linejoin", "round").attr("d", (u) => u.d.up ? "M-5 3L0 -3L5 3" : "M-5 -3L0 3L5 -3").attr("transform", (u) => `translate(${u.x},${u.y})`);
+		ctx.hover(marks, (u) => this.tooltip(u.d.reading, u.d.view.color));
+	}
+	bars(ctx, rows, boxes, biggest) {
+		const active = this.options.form === DeltaForm.Bar ? rows : [];
+		const part = (d) => {
+			const b = boxes[rows.indexOf(d)], axis = b.x + b.width / 2, length = Math.abs(d.size) / biggest * (b.width / 2 - 2);
+			return {
+				axis,
+				x: d.size >= 0 ? axis + 1 : axis - 1 - length,
+				width: length,
+				y: b.y + b.height * .14,
+				height: Math.max(6, Math.min(16, b.height * .72))
+			};
+		};
+		const zero = ctx.marks("zero", "line", active, (d) => d.reading.id).attr("stroke", ctx.theme.axis).attr("stroke-width", 1.5).attr("x1", (d) => part(d).axis).attr("x2", (d) => part(d).axis).attr("y1", (d) => boxes[rows.indexOf(d)].y - 2).attr("y2", (d) => {
+			const b = boxes[rows.indexOf(d)];
+			return b.y + b.height + 2;
+		});
+		ctx.hover(zero, (d) => this.tooltip(d.reading));
+		const marks = ctx.marks("bars", "rect", active, (d) => d.reading.id).attr("fill", (d) => d.view.color).attr("rx", 3).attr("y", (d) => part(d).y).attr("height", (d) => part(d).height);
+		ctx.set(marks, {
+			x: (d) => part(d).x,
+			width: (d) => part(d).width
+		}, {
+			x: (d) => part(d).axis,
+			width: 0
+		}, 30);
+		ctx.hover(marks, (d) => this.tooltip(d.reading, d.view.color));
+	}
+	slopes(ctx, rows, boxes, low, high) {
+		const active = this.options.form === DeltaForm.Slope ? rows : [];
+		const place = (d) => {
+			const b = boxes[rows.indexOf(d)], wide = Math.min(b.width - 8, 90);
+			const y = scaleLinear().domain([low, high === low ? low + 1 : high]).range([b.y + b.height - 4, b.y + 4]);
+			return {
+				x1: b.x + 5,
+				x2: b.x + 5 + wide,
+				y1: y(d.reading.previous),
+				y2: y(d.reading.value)
+			};
+		};
+		const lines = ctx.marks("slopes", "line", active, (d) => d.reading.id).attr("stroke", (d) => d.view.color).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("x1", (d) => place(d).x1).attr("x2", (d) => place(d).x2).attr("y1", (d) => place(d).y1).attr("y2", (d) => place(d).y2);
+		ctx.hover(lines, (d) => this.tooltip(d.reading, d.view.color));
+		const starts = ctx.marks("slope-from", "circle", active, (d) => d.reading.id).attr("r", 3).attr("fill", ctx.theme.inkMuted).attr("cx", (d) => place(d).x1).attr("cy", (d) => place(d).y1);
+		ctx.hover(starts, (d) => this.tooltip(d.reading));
+		const ends = ctx.marks("slope-to", "circle", active, (d) => d.reading.id).attr("r", 4.5).attr("fill", (d) => d.view.color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("cx", (d) => place(d).x2).attr("cy", (d) => place(d).y2);
+		ctx.hover(ends, (d) => this.tooltip(d.reading, d.view.color));
+	}
+	dumbbells(ctx, rows, boxes, low, high) {
+		const active = this.options.form === DeltaForm.Dumbbell ? rows : [];
+		const place = (d) => {
+			const b = boxes[rows.indexOf(d)];
+			const x = scaleLinear().domain([low, high === low ? low + 1 : high]).range([b.x + 7, b.x + b.width - 7]);
+			return {
+				from: x(d.reading.previous),
+				to: x(d.reading.value),
+				y: b.y + b.height / 2
+			};
+		};
+		const bars = ctx.marks("bells", "line", active, (d) => d.reading.id).attr("stroke", ctx.theme.axis).attr("stroke-width", 2).attr("x1", (d) => place(d).from).attr("x2", (d) => place(d).to).attr("y1", (d) => place(d).y).attr("y2", (d) => place(d).y);
+		ctx.hover(bars, (d) => this.tooltip(d.reading));
+		const from = ctx.marks("bell-from", "circle", active, (d) => d.reading.id).attr("r", 4).attr("fill", ctx.theme.inkMuted).attr("cx", (d) => place(d).from).attr("cy", (d) => place(d).y);
+		ctx.hover(from, (d) => this.tooltip(d.reading));
+		const to = ctx.marks("bell-to", "circle", active, (d) => d.reading.id).attr("r", 5.5).attr("fill", (d) => d.view.color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("cy", (d) => place(d).y);
+		ctx.set(to, { cx: (d) => place(d).to }, { cx: (d) => place(d).from }, 30);
+		ctx.hover(to, (d) => this.tooltip(d.reading, d.view.color));
+	}
+};
+export { DeltaIndicator };

package/dist/charts/indicators/DialChart.js

@@ -0,0 +1,66 @@
+import { GaugeSweep, NeedleStyle } from "./IndicatorEnums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+// src/charts/indicators/DialChart.ts
+var DEGREES = {
+	[GaugeSweep.Fan]: 100,
+	[GaugeSweep.Semi]: 180,
+	[GaugeSweep.Horseshoe]: 240,
+	[GaugeSweep.ThreeQuarter]: 270,
+	[GaugeSweep.Full]: 360
+};
+/** Charts read off a circular scale: fits the arc to its cell and draws needles and ticks. */
+var DialChart = class extends IndicatorChart {
+	/** Largest arc fitting `plot`, leaving `pad` around it and `foot` below. */
+	frame(plot, { pad = 2, foot = 0 } = {}) {
+		const sweep = this.options.sweep ?? GaugeSweep.Semi;
+		const span = DEGREES[sweep] * Math.PI / 180;
+		const start = sweep === GaugeSweep.Full ? 0 : -span / 2, end = start + span;
+		const edges = [
+			start,
+			end,
+			...[
+				-Math.PI,
+				-Math.PI / 2,
+				0,
+				Math.PI / 2,
+				Math.PI,
+				1.5 * Math.PI,
+				2 * Math.PI
+			].filter((a) => a > start && a < end)
+		];
+		const top = Math.min(...edges.map((a) => -Math.cos(a))), bottom = Math.max(0, ...edges.map((a) => -Math.cos(a)));
+		const side = Math.max(...edges.map((a) => Math.abs(Math.sin(a))));
+		const radius = Math.max(8, Math.min((plot.width - 2 * pad) / (2 * side), (plot.height - 2 * pad - foot) / (bottom - top)));
+		const cy = (plot.height - foot - radius * (bottom - top)) / 2 - top * radius;
+		const angle = (fraction) => start + fraction * span;
+		return {
+			cx: plot.width / 2,
+			cy,
+			radius,
+			start,
+			end,
+			closed: DEGREES[sweep] > 180,
+			angle,
+			point: (fraction, r) => [plot.width / 2 + r * Math.sin(angle(fraction)), cy - r * Math.cos(angle(fraction))]
+		};
+	}
+	degrees(frame, fraction) {
+		return frame.angle(fraction) * 180 / Math.PI;
+	}
+	needle(ctx, frame, reading, style, length) {
+		const { cx, cy, radius } = frame;
+		const base = Math.max(3, radius * .035);
+		const shape = {
+			[NeedleStyle.Taper]: `M${-base} 0 L0 ${-length} L${base} 0 L0 ${base * 2.4} Z`,
+			[NeedleStyle.Line]: `M-1 ${base * 2.4} V${-length} H1 V${base * 2.4} Z`,
+			[NeedleStyle.Arrow]: `M-1.2 0 V${-length + 13} H-6 L0 ${-length} L6 ${-length + 13} H1.2 V0 Z`
+		}[style];
+		const pose = (fraction) => `translate(${cx},${cy}) rotate(${this.degrees(frame, fraction)})`;
+		const hand = ctx.marks("needle", "path", [reading], (d) => d.id).attr("d", shape).attr("fill", ctx.theme.ink);
+		ctx.set(hand, { transform: (d) => pose(d.fraction) }, { transform: pose(0) });
+		ctx.hover(hand, (d) => this.tooltip(d));
+		const hub = ctx.marks("hub", "circle", [reading], (d) => d.id).attr("cx", cx).attr("cy", cy).attr("r", base * 2).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.hover(hub, (d) => this.tooltip(d));
+	}
+};
+export { DialChart };