@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/indicators/LiquidFillGauge.js

@@ -0,0 +1,180 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { LiquidLevel, LiquidShape, LiquidWave } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+import { curveLinearClosed, easeCubicOut, line, range, timer } from "d3";
+// src/charts/indicators/LiquidFillGauge.ts
+var TURN = 2 * Math.PI;
+var circle = (x, y, n = 96) => range(n).map((i) => [x * Math.sin(i / n * TURN), -y * Math.cos(i / n * TURN)]);
+var rounded = (w, h, r) => [
+	[1, 1],
+	[-1, 1],
+	[-1, -1],
+	[1, -1]
+].flatMap(([sx, sy], corner) => range(9).map((i) => {
+	const a = (corner + i / 8) * Math.PI / 2;
+	return [sx * (w - r) + r * Math.cos(a), sy * (h - r) + r * Math.sin(a)];
+}));
+var VESSELS = {
+	[LiquidShape.Circle]: circle(1, 1),
+	[LiquidShape.Rounded]: rounded(1, 1, .24),
+	[LiquidShape.Hexagon]: range(6).map((i) => [Math.sin(i / 6 * TURN), -Math.cos(i / 6 * TURN)]),
+	[LiquidShape.Drop]: range(96).map((i) => {
+		const t = i / 96 * TURN;
+		return [.82 * Math.sin(t) * Math.sin(t / 2) ** 1.5, -Math.cos(t)];
+	}),
+	[LiquidShape.Tank]: rounded(.62, 1, .16)
+};
+/** Width of a closed outline along a horizontal line. */
+function chord$1(points, y) {
+	const hits = points.flatMap(([ax, ay], i) => {
+		const [bx, by] = points[(i + 1) % points.length];
+		return ay <= y !== by <= y ? [ax + (y - ay) / (by - ay) * (bx - ax)] : [];
+	}).sort((a, b) => a - b);
+	return hits.reduce((sum, x, i) => sum + (i % 2 ? x - hits[i - 1] : 0), 0);
+}
+var clips = 0;
+/** A value as a vessel filling with animated liquid, for a friendly single-number reading. */
+var LiquidFillGauge = class extends IndicatorChart {
+	static meta = {
+		id: "liquid-fill",
+		name: "Liquid fill gauge",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Fills a vessel with rolling liquid up to the value, with the level honest by height or by area.",
+		tags: [
+			"water",
+			"tank",
+			"wave",
+			"percent"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 2),
+		variants: {
+			shape: [
+				LiquidShape.Circle,
+				LiquidShape.Rounded,
+				LiquidShape.Hexagon,
+				LiquidShape.Drop,
+				LiquidShape.Tank
+			],
+			level: [LiquidLevel.Height, LiquidLevel.Area],
+			wave: [
+				LiquidWave.Gentle,
+				LiquidWave.Choppy,
+				LiquidWave.Flat
+			],
+			backWave: [true, false],
+			rim: [true, false]
+		},
+		valid: (v) => (v.wave !== LiquidWave.Flat || v.backWave === false) && (v.level !== LiquidLevel.Area || v.shape !== LiquidShape.Rounded && v.shape !== LiquidShape.Tank)
+	};
+	timers = [];
+	clipId = `liquid-${++clips}`;
+	defaults() {
+		return {
+			...super.defaults(),
+			shape: LiquidShape.Circle,
+			level: LiquidLevel.Height,
+			wave: LiquidWave.Gentle,
+			backWave: true,
+			rim: true
+		};
+	}
+	get looping() {
+		return this.timers.length > 0;
+	}
+	teardown() {
+		this.halt();
+		super.teardown();
+	}
+	halt() {
+		this.timers.forEach((t) => t.stop());
+		this.timers = [];
+	}
+	drawReadings(ctx, readings) {
+		this.halt();
+		this.facets(ctx, readings, .92, (cell, reading, i) => this.vessel(cell, reading, i));
+	}
+	/** Unit-space surface height for a fraction filled. */
+	surface(points, fraction) {
+		const ys = points.map((p) => p[1]), top = Math.min(...ys), bottom = Math.max(...ys);
+		if (this.options.level === LiquidLevel.Height) return bottom - fraction * (bottom - top);
+		const rows = 160, step = (bottom - top) / rows;
+		const widths = range(rows).map((i) => chord$1(points, bottom - (i + .5) * step));
+		const whole = widths.reduce((sum, w) => sum + w, 0);
+		let wet = 0;
+		for (let i = 0; i < rows; i++) {
+			if ((wet + widths[i]) / whole >= fraction) return bottom - (i + (fraction * whole - wet) / (widths[i] || 1)) * step;
+			wet += widths[i];
+		}
+		return top;
+	}
+	vessel(ctx, reading, index) {
+		const { shape, wave, backWave, rim } = this.options;
+		const { width, height } = ctx.plot;
+		const label = reading.label ? 18 : 0;
+		const outer = Math.max(16, Math.min(width, height - label) / 2 - 2);
+		const scale = rim ? outer - 7 : outer;
+		const points = VESSELS[shape];
+		const cy = (height - label - 2 * outer) / 2 + outer;
+		const stage = ctx.nest(`translate(${width / 2},${cy})`, "stage");
+		const outline = (r) => line((p) => p[0] * r, (p) => p[1] * r).curve(curveLinearClosed)(points) ?? "";
+		const color = this.accent(ctx);
+		const clip = `${this.clipId}-${index}`;
+		const ring = ctx.marks("rim", "path", rim ? [reading] : [], (d) => d.id, stage.root).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).attr("d", outline(outer - 1));
+		ctx.hover(ring, (d) => this.tooltip(d, color));
+		const glass = ctx.marks("glass", "path", [reading], (d) => d.id, stage.root).attr("fill", ctx.theme.grid).attr("d", outline(scale));
+		ctx.hover(glass, (d) => this.tooltip(d, color));
+		ctx.marks("vessel-clip", "clipPath", [reading], (d) => d.id, stage.root).attr("id", clip).selectAll("path").data([0]).join("path").attr("d", outline(scale));
+		const amplitude = {
+			[LiquidWave.Gentle]: .05,
+			[LiquidWave.Choppy]: .1,
+			[LiquidWave.Flat]: 0
+		}[wave] * scale;
+		const length = (wave === LiquidWave.Choppy ? .9 : 1.6) * scale;
+		const crest = (fraction, phase) => {
+			const level = this.surface(points, fraction) * scale;
+			const edge = range(0, 2.4 * scale + 8, 6).map((d) => `${(d - 1.2 * scale - 4).toFixed(1)} ${(level + amplitude * Math.sin((d - 1.2 * scale) / length * TURN + phase)).toFixed(1)}`);
+			return `M${-1.2 * scale - 4} ${scale * 1.2}L${edge.join("L")}L${1.2 * scale + 4} ${scale * 1.2}Z`;
+		};
+		const liquid = stage.group("liquid").attr("clip-path", `url(#${clip})`);
+		const back = ctx.marks("back", "path", backWave ? [reading] : [], (d) => d.id, liquid).attr("fill", color).attr("fill-opacity", .35);
+		const front = ctx.marks("front", "path", [reading], (d) => d.id, liquid).attr("fill", color);
+		ctx.hover(front, (d) => this.tooltip(d, color));
+		ctx.hover(back, (d) => this.tooltip(d, color));
+		const clipWave = ctx.marks("wave-clip", "clipPath", [reading], (d) => d.id, stage.root).attr("id", `${clip}-wave`).selectAll("path").data([0]).join("path");
+		const size = Math.max(13, Math.min(36, scale * .42));
+		const y = shape === LiquidShape.Drop ? size * .5 : 0;
+		const value = (name, fill, parent = stage.root) => {
+			return ctx.marks(name, "text", [reading], (d) => d.id, parent).attr("x", 0).attr("y", y).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", size).attr("font-weight", 600).attr("font-family", ctx.theme.fontFamily).attr("fill", fill).attr("pointer-events", "none").text((d) => this.percent(d.fraction));
+		};
+		value("over-text", ctx.theme.ink);
+		value("under-text", ctx.palette.inkOn(color), stage.group("wet").attr("clip-path", `url(#${clip}-wave)`));
+		this.texts(ctx, "label", [{
+			key: "label",
+			text: this.fit(reading.label, width),
+			x: width / 2,
+			y: cy + outer + 11
+		}]);
+		const paint = (fraction, phase) => {
+			front.attr("d", crest(fraction, phase));
+			clipWave.attr("d", crest(fraction, phase));
+			back.attr("d", crest(Math.min(1, fraction + .02), phase * .7 + 2));
+		};
+		const node = front.node();
+		const from = node?.swept ?? 0;
+		if (node) node.swept = reading.fraction;
+		if (!this.animated) {
+			paint(reading.fraction, 0);
+			return;
+		}
+		paint(from, 0);
+		this.timers.push(timer((elapsed) => {
+			const rise = easeCubicOut(Math.min(1, elapsed / 1200));
+			paint(from + (reading.fraction - from) * rise, wave === LiquidWave.Flat ? 0 : elapsed / 700);
+			if (wave === LiquidWave.Flat && rise === 1) this.halt();
+		}));
+	}
+};
+export { LiquidFillGauge };

package/dist/charts/indicators/MeterChart.js

@@ -0,0 +1,244 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { IndicatorCap, MeterForm, MeterLabel, MeterZones } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+// src/charts/indicators/MeterChart.ts
+/** Level bars on a fixed scale, for capacity, quota and usage readings. */
+var MeterChart = class extends IndicatorChart {
+	static meta = {
+		id: "meter",
+		name: "Meter",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows how full each measure is against a fixed scale, as a solid, stepped or dotted level bar.",
+		tags: [
+			"progress bar",
+			"level",
+			"capacity",
+			"quota"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 4),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			form: [
+				MeterForm.Bar,
+				MeterForm.Blocks,
+				MeterForm.Dots
+			],
+			zones: [
+				MeterZones.None,
+				MeterZones.Ticks,
+				MeterZones.Strip
+			],
+			labels: [MeterLabel.Above, MeterLabel.Side],
+			cap: [IndicatorCap.Round, IndicatorCap.Flat]
+		},
+		valid: (v) => (v.form === MeterForm.Bar || v.cap === IndicatorCap.Round) && (v.orientation === Orientation.Horizontal || v.labels === MeterLabel.Above)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			form: MeterForm.Bar,
+			zones: MeterZones.None,
+			labels: MeterLabel.Above,
+			cap: IndicatorCap.Round
+		};
+	}
+	drawReadings(ctx, readings) {
+		const vertical = this.options.orientation === Orientation.Vertical;
+		const lanes = vertical ? this.columns(ctx, readings) : this.rows(ctx, readings);
+		const box = (u, size, v, thick, lane) => vertical ? {
+			x: v,
+			y: lane.start + lane.length - u - size,
+			width: thick,
+			height: size
+		} : {
+			x: lane.start + u,
+			y: v,
+			width: size,
+			height: thick
+		};
+		const { form, zones, cap } = this.options;
+		const round = (lane) => cap === IndicatorCap.Round ? Math.min(4, lane.thick / 2) : 0;
+		const bars = form === MeterForm.Bar ? lanes : [];
+		const tracks = ctx.marks("tracks", "rect", bars, (d) => d.reading.id).attr("fill", ctx.theme.grid).attr("rx", round);
+		const within = (d) => box(0, d.length, d.across, d.thick, d);
+		tracks.attr("x", (d) => within(d).x).attr("y", (d) => within(d).y).attr("width", (d) => within(d).width).attr("height", (d) => within(d).height);
+		ctx.hover(tracks, (d) => this.tooltip(d.reading, d.color));
+		const fills = ctx.marks("fills", "rect", bars, (d) => d.reading.id).attr("fill", (d) => d.color).attr("rx", round);
+		const level = (d) => box(0, d.reading.fraction * d.length, d.across, d.thick, d);
+		const empty = (d) => box(0, 0, d.across, d.thick, d);
+		ctx.set(fills, {
+			x: (d) => level(d).x,
+			y: (d) => level(d).y,
+			width: (d) => level(d).width,
+			height: (d) => level(d).height
+		}, {
+			x: (d) => empty(d).x,
+			y: (d) => empty(d).y,
+			width: (d) => empty(d).width,
+			height: (d) => empty(d).height
+		}, 40);
+		ctx.hover(fills, (d) => this.tooltip(d.reading, d.color));
+		const units = form === MeterForm.Bar ? [] : lanes.flatMap((lane) => this.units(lane));
+		const blocks = ctx.marks("blocks", "rect", form === MeterForm.Blocks ? units : [], (d) => d.key).attr("fill", (d) => d.lit ? d.lane.color : ctx.theme.grid).attr("rx", 2);
+		const rect = (d) => box(d.from, d.size, d.lane.across, d.lane.thick, d.lane);
+		blocks.attr("x", (d) => rect(d).x).attr("y", (d) => rect(d).y).attr("width", (d) => rect(d).width).attr("height", (d) => rect(d).height);
+		ctx.hover(blocks, (d) => this.tooltip(d.lane.reading, d.lane.color));
+		const dots = ctx.marks("dots", "circle", form === MeterForm.Dots ? units : [], (d) => d.key).attr("fill", (d) => d.lit ? d.lane.color : ctx.theme.grid).attr("r", (d) => d.lane.thick / 2);
+		dots.attr("cx", (d) => rect(d).x + rect(d).width / 2).attr("cy", (d) => rect(d).y + rect(d).height / 2);
+		ctx.hover(dots, (d) => this.tooltip(d.lane.reading, d.lane.color));
+		const stripped = zones === MeterZones.Strip ? lanes.flatMap((lane) => this.zones(lane.reading).map((zone) => ({
+			lane,
+			zone
+		}))) : [];
+		const strip = ctx.marks("strip", "rect", stripped, (d) => `${d.lane.reading.id}/${d.zone.status.key}`).attr("fill", (d) => d.zone.status.color).attr("rx", 1.5);
+		const stripBox = (d) => box(d.zone.from * d.lane.length + (d.zone.from ? 1 : 0), Math.max(1, (d.zone.to - d.zone.from) * d.lane.length - (d.zone.from ? 1 : 0)), d.lane.across + d.lane.thick + 3, 3, d.lane);
+		strip.attr("x", (d) => stripBox(d).x).attr("y", (d) => stripBox(d).y).attr("width", (d) => stripBox(d).width).attr("height", (d) => stripBox(d).height);
+		ctx.hover(strip, (d) => ({
+			title: d.zone.status.label,
+			color: d.zone.status.color,
+			rows: [["Reading", d.lane.reading.label]]
+		}));
+		const edges = zones === MeterZones.Ticks ? lanes.flatMap((lane) => this.zones(lane.reading).slice(1).map((zone) => ({
+			lane,
+			at: zone.from
+		}))) : [];
+		const ticks = ctx.marks("edges", "rect", edges, (d, i) => `${d.lane.reading.id}/${i}`).attr("fill", ctx.theme.ink);
+		const tick = (d) => box(d.at * d.lane.length - 1, 2, d.lane.across - 3, d.lane.thick + 6, d.lane);
+		ticks.attr("x", (d) => tick(d).x).attr("y", (d) => tick(d).y).attr("width", (d) => tick(d).width).attr("height", (d) => tick(d).height);
+		this.annotate(ctx, lanes, vertical);
+	}
+	units(lane) {
+		const dotted = this.options.form === MeterForm.Dots;
+		const pitch = dotted ? lane.thick + 3 : Math.max(lane.thick * .7, 9);
+		const count = Math.max(4, Math.floor((lane.length + 2) / pitch)), step = (lane.length + 2) / count;
+		return Array.from({ length: count }, (_, i) => ({
+			key: `${lane.reading.id}/${i}`,
+			lane,
+			from: dotted ? i * step + (step - 2 - lane.thick) / 2 : i * step,
+			size: dotted ? lane.thick : step - 2,
+			lit: (i + .5) / count <= lane.reading.fraction
+		}));
+	}
+	laneColor(ctx, reading) {
+		return this.options.zones === MeterZones.None ? this.accent(ctx) : this.status(reading).color;
+	}
+	rows(ctx, readings) {
+		const { labels, zones } = this.options;
+		const { width, height } = ctx.plot;
+		const shown = readings.slice(0, Math.max(1, Math.floor(height / 26)));
+		const slot = height / Math.max(1, shown.length);
+		const side = labels === MeterLabel.Side;
+		const widest = Math.max(0, ...shown.map((r) => this.textWidth(r.label)));
+		const gutter = side ? Math.min(width * .3, widest + 10) : 0;
+		const tail = side ? 70 : 0;
+		const room = side ? slot - 8 : slot - 26;
+		const thick = Math.max(6, Math.min(14, room));
+		return shown.map((reading, i) => {
+			const block = (side ? thick : thick + 18) + (zones === MeterZones.Strip ? 5 : 0);
+			const top = i * slot + (slot - block) / 2;
+			return {
+				reading,
+				start: gutter,
+				length: width - gutter - tail,
+				across: side ? top : top + 18,
+				thick,
+				color: this.laneColor(ctx, reading)
+			};
+		});
+	}
+	columns(ctx, readings) {
+		const { width, height } = ctx.plot;
+		const shown = readings.slice(0, Math.max(1, Math.floor(width / 44)));
+		const slot = width / Math.max(1, shown.length);
+		const thick = Math.max(8, Math.min(18, slot * .3));
+		return shown.map((reading, i) => ({
+			reading,
+			start: 20,
+			length: height - 40,
+			across: i * slot + (slot - thick) / 2,
+			thick,
+			color: this.laneColor(ctx, reading)
+		}));
+	}
+	annotate(ctx, lanes, vertical) {
+		const { labels, zones } = this.options;
+		const flagged = zones !== MeterZones.None;
+		const { width, height } = ctx.plot;
+		const side = labels === MeterLabel.Side;
+		this.texts(ctx, "names", lanes.map((lane) => {
+			const { reading, across, thick } = lane, slot = width / lanes.length;
+			if (vertical) return {
+				key: reading.id,
+				text: this.fit(reading.label, slot - 4),
+				x: across + thick / 2,
+				y: height - 7
+			};
+			return side ? {
+				key: reading.id,
+				text: this.fit(reading.label, lane.start - 8),
+				x: 0,
+				y: across + thick / 2,
+				anchor: "start"
+			} : {
+				key: reading.id,
+				text: this.fit(reading.label, width * .5),
+				x: 0,
+				y: across - 10,
+				anchor: "start"
+			};
+		}));
+		this.texts(ctx, "values", lanes.map((lane) => {
+			const { reading, across, thick } = lane, text = this.formatted(reading.value);
+			const count = [reading.value, (v) => this.formatted(v)];
+			if (vertical) return {
+				key: reading.id,
+				text,
+				x: across + thick / 2 + (flagged ? 8 : 0),
+				y: 8,
+				tone: "ink",
+				weight: 600,
+				count
+			};
+			return side ? {
+				key: reading.id,
+				text,
+				x: width - (flagged ? 20 : 0),
+				y: across + thick / 2,
+				tone: "ink",
+				weight: 600,
+				anchor: "end",
+				count
+			} : {
+				key: reading.id,
+				text,
+				x: width - (flagged ? 20 : 0),
+				y: across - 10,
+				tone: "ink",
+				weight: 600,
+				anchor: "end",
+				count
+			};
+		}));
+		this.chips(ctx, "flags", flagged ? lanes.map((lane) => {
+			const { reading, across, thick } = lane;
+			const place = vertical ? {
+				x: across + thick / 2 - this.textWidth(this.formatted(reading.value)) / 2 - 15,
+				y: 8
+			} : {
+				x: width - 12,
+				y: side ? across + thick / 2 : across - 10
+			};
+			return {
+				key: reading.id,
+				...place,
+				status: this.status(reading),
+				size: 6
+			};
+		}) : []);
+	}
+};
+export { MeterChart };

package/dist/charts/indicators/ProgressRing.js

@@ -0,0 +1,107 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { IndicatorCap, RingDirection, RingStart, RingTrack } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+import { range } from "d3";
+// src/charts/indicators/ProgressRing.ts
+var ORIGIN = {
+	[RingStart.Top]: 0,
+	[RingStart.Left]: -Math.PI / 2,
+	[RingStart.Bottom]: Math.PI
+};
+/** Percent complete as a closed ring, for a single goal or a row of them. */
+var ProgressRing = class extends IndicatorChart {
+	static meta = {
+		id: "progress-ring",
+		name: "Progress ring",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows percent complete toward the top of a scale as a closed ring with the number at its centre.",
+		tags: [
+			"donut",
+			"percent",
+			"completion"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 3),
+		variants: {
+			start: [
+				RingStart.Top,
+				RingStart.Left,
+				RingStart.Bottom
+			],
+			direction: [RingDirection.Clockwise, RingDirection.Counter],
+			cap: [IndicatorCap.Round, IndicatorCap.Flat],
+			track: [
+				RingTrack.Solid,
+				RingTrack.Ticks,
+				RingTrack.None
+			],
+			knob: [false, true],
+			thickness: [.16, .3]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			start: RingStart.Top,
+			direction: RingDirection.Clockwise,
+			cap: IndicatorCap.Round,
+			track: RingTrack.Solid,
+			knob: false,
+			thickness: .16
+		};
+	}
+	drawReadings(ctx, readings) {
+		this.facets(ctx, readings, .95, (cell, reading) => this.dial(cell, reading));
+	}
+	dial(ctx, reading) {
+		const { start, direction, cap, track, knob, thickness } = this.options;
+		const { width, height } = ctx.plot;
+		const label = reading.label ? 18 : 0;
+		const outer = Math.min(width, height - label) / 2 - 2;
+		const inner = outer * (1 - thickness);
+		const cy = (height - label - 2 * outer) / 2 + outer;
+		const sign = direction === RingDirection.Clockwise ? 1 : -1, origin = ORIGIN[start];
+		const ring = ctx.nest(`translate(${width / 2},${cy})`, "ring");
+		const color = this.accent(ctx);
+		const solid = ctx.marks("track", "path", track === RingTrack.Solid ? [reading] : [], (d) => d.id, ring.root).attr("fill", ctx.theme.grid).attr("d", this.ring(inner, outer, 0, 2 * Math.PI));
+		ctx.hover(solid, (d) => this.tooltip(d, color));
+		const ticks = ctx.marks("ticks", "line", track === RingTrack.Ticks ? range(40) : [], (i) => i, ring.root).attr("stroke", ctx.theme.axis).attr("stroke-width", 1.5);
+		const polar = (i, r) => [r * Math.sin(i / 40 * 2 * Math.PI), -r * Math.cos(i / 40 * 2 * Math.PI)];
+		ticks.attr("x1", (i) => polar(i, inner)[0]).attr("y1", (i) => polar(i, inner)[1]).attr("x2", (i) => polar(i, outer)[0]).attr("y2", (i) => polar(i, outer)[1]);
+		const corner = cap === IndicatorCap.Round ? (outer - inner) / 2 : 0;
+		const fill = ctx.marks("fill", "path", [reading], (d) => d.id, ring.root).attr("fill", color);
+		this.sweep(fill, (d) => d.fraction, (_, f) => this.ring(inner, outer, origin, origin + sign * f * 2 * Math.PI, f < 1 ? corner : 0));
+		ctx.hover(fill, (d) => this.tooltip(d, color));
+		const head = origin + sign * reading.fraction * 2 * Math.PI, mid = (inner + outer) / 2;
+		const dot = ctx.marks("knob", "circle", knob ? [reading] : [], (d) => d.id, ring.root).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dot, {
+			cx: mid * Math.sin(head),
+			cy: -mid * Math.cos(head),
+			r: Math.max(7, Math.min(10, (outer - inner) * .72))
+		}, {
+			cx: mid * Math.sin(origin),
+			cy: -mid * Math.cos(origin),
+			r: 0
+		});
+		ctx.hover(dot, (d) => this.tooltip(d, color));
+		const size = Math.max(13, Math.min(34, inner * .46));
+		this.texts(ctx, "value", [{
+			key: "value",
+			text: this.percent(reading.fraction),
+			x: width / 2,
+			y: cy,
+			size,
+			tone: "ink",
+			weight: 600,
+			count: [reading.fraction, (f) => this.percent(f)]
+		}, {
+			key: "label",
+			text: this.fit(reading.label, width),
+			x: width / 2,
+			y: cy + outer + 12
+		}]);
+	}
+};
+export { ProgressRing };

package/dist/charts/indicators/RadialProgress.js

@@ -0,0 +1,114 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { GaugeSweep, IndicatorCap, RadialLabel, RadialOrder } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+import { ascending, descending } from "d3";
+// src/charts/indicators/RadialProgress.ts
+var SPANS = {
+	[GaugeSweep.ThreeQuarter]: 1.5 * Math.PI,
+	[GaugeSweep.Full]: 2 * Math.PI,
+	[GaugeSweep.Semi]: Math.PI
+};
+/** Several percentages as concentric bars, for comparing a few goals in a compact dial. */
+var RadialProgress = class extends IndicatorChart {
+	static meta = {
+		id: "radial-progress",
+		name: "Radial progress",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Compares progress on several goals as concentric arcs, each directly labelled by name and percent.",
+		tags: [
+			"radial bar",
+			"concentric",
+			"multi-ring"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 5),
+		variants: {
+			sweep: [
+				GaugeSweep.ThreeQuarter,
+				GaugeSweep.Full,
+				GaugeSweep.Semi
+			],
+			order: [
+				RadialOrder.Descending,
+				RadialOrder.Data,
+				RadialOrder.Ascending
+			],
+			labels: [RadialLabel.Start, RadialLabel.Key],
+			cap: [IndicatorCap.Round, IndicatorCap.Flat],
+			track: [true, false],
+			density: [.72, .5]
+		},
+		valid: (v) => v.sweep === GaugeSweep.ThreeQuarter || v.labels === RadialLabel.Key
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sweep: GaugeSweep.ThreeQuarter,
+			order: RadialOrder.Descending,
+			labels: RadialLabel.Start,
+			cap: IndicatorCap.Round,
+			track: true,
+			density: .72
+		};
+	}
+	drawReadings(ctx, readings) {
+		const { sweep, order, labels, cap, track, density } = this.options;
+		const sorted = order === RadialOrder.Data ? readings : [...readings].sort((a, b) => (order === RadialOrder.Descending ? descending : ascending)(a.fraction, b.fraction));
+		const { width, height } = ctx.plot;
+		const keyed = labels === RadialLabel.Key;
+		const span = SPANS[sweep] ?? 1.5 * Math.PI;
+		const semi = sweep === GaugeSweep.Semi;
+		const room = width - (keyed ? Math.min(width * .42, 150) : 0);
+		const radius = Math.max(16, Math.min(semi ? Math.min(room / 2, height) : Math.min(room, height) / 2, 200));
+		const cx = keyed ? radius + Math.max(0, (room - radius * 2) / 2) : width / 2;
+		const cy = semi ? (height + radius) / 2 : height / 2;
+		const hole = radius * .22;
+		const rows = sorted.slice(0, Math.max(1, Math.min(8, Math.floor((radius - hole) / 8))));
+		const slot = (radius - hole) / Math.max(1, rows.length);
+		const start = semi ? -Math.PI / 2 : 0;
+		const group = ctx.nest(`translate(${cx},${cy})`, "dial");
+		const outerOf = (i) => radius - i * slot, innerOf = (i) => outerOf(i) - slot * density;
+		const corner = cap === IndicatorCap.Round ? slot * density / 2 : 0;
+		const color = (d) => ctx.palette.color(d.label);
+		const tracks = ctx.marks("tracks", "path", track ? rows : [], (d) => d.id, group.root).attr("fill", ctx.theme.grid).attr("d", (d) => this.ring(innerOf(rows.indexOf(d)), outerOf(rows.indexOf(d)), start, start + span, span < 6 ? corner : 0));
+		ctx.hover(tracks, (d) => this.tooltip(d, color(d)));
+		const arcs = ctx.marks("arcs", "path", rows, (d) => d.id, group.root).attr("fill", color);
+		this.sweep(arcs, (d) => d.fraction, (d, f) => this.ring(innerOf(rows.indexOf(d)), outerOf(rows.indexOf(d)), start, start + f * span, corner));
+		ctx.hover(arcs, (d) => this.tooltip(d, color(d)));
+		const size = Math.min(11, Math.max(9, slot * .9));
+		const starts = keyed ? [] : rows.flatMap((d, i) => slot >= 8 ? [{
+			key: d.id,
+			text: this.fit(`${d.label} ${this.percent(d.fraction)}`, cx - 6, size),
+			x: cx - 6,
+			y: cy - outerOf(i) + slot * density * .5,
+			size,
+			anchor: "end"
+		}] : []);
+		this.texts(ctx, "starts", starts);
+		const line = Math.min(22, (height - 8) / Math.max(1, rows.length));
+		const top = (height - line * rows.length) / 2 + line / 2;
+		const x = cx + radius + 22;
+		const entries = keyed ? rows : [];
+		const swatches = ctx.marks("swatches", "rect", entries, (d) => d.id).attr("width", 10).attr("height", 10).attr("rx", 3).attr("fill", color).attr("x", x).attr("y", (_, i) => top + i * line - 5);
+		ctx.hover(swatches, (d) => this.tooltip(d, color(d)));
+		const edge = width;
+		this.texts(ctx, "key", entries.flatMap((d, i) => [{
+			key: `${d.id}n`,
+			text: this.fit(d.label, edge - x - 54),
+			x: x + 16,
+			y: top + i * line,
+			anchor: "start"
+		}, {
+			key: `${d.id}p`,
+			text: this.percent(d.fraction),
+			x: edge,
+			y: top + i * line,
+			tone: "ink",
+			weight: 600,
+			anchor: "end"
+		}]));
+	}
+};
+export { RadialProgress };