@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/indicators/RatingStars.js

@@ -0,0 +1,257 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { RatingGlyph, RatingLayout, RatingPrecision } from "./IndicatorEnums.js";
+import { mean, range } from "d3";
+// src/charts/indicators/RatingStars.ts
+var star = range(10).map((i) => {
+	const r = i % 2 ? .44 : 1, a = i / 10 * 2 * Math.PI;
+	return `${(r * Math.sin(a)).toFixed(3)} ${(-r * Math.cos(a) + .08).toFixed(3)}`;
+}).join("L");
+var GLYPHS = {
+	[RatingGlyph.Star]: `M${star}Z`,
+	[RatingGlyph.Heart]: "M0 .9C-.4 .55 -1 .15 -1 -.32C-1 -.72 -.7 -.9 -.46 -.9C-.24 -.9 -.08 -.76 0 -.58C.08 -.76 .24 -.9 .46 -.9C.7 -.9 1 -.72 1 -.32C1 .15 .4 .55 0 .9Z",
+	[RatingGlyph.Circle]: "M0 -.92A.92 .92 0 1 1 0 .92A.92 .92 0 1 1 0 -.92Z",
+	[RatingGlyph.Diamond]: "M0 -1L.8 0L0 1L-.8 0Z"
+};
+var clips = 0;
+/** Ratings as filled symbols, from a single score to a full review breakdown. */
+var RatingStars = class extends IndicatorChart {
+	static meta = {
+		id: "rating-stars",
+		name: "Rating stars",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows review scores as partly filled symbols, as a list, a headline average or a breakdown by score.",
+		tags: [
+			"reviews",
+			"score",
+			"stars",
+			"feedback"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 3).map((row) => ({
+			...row,
+			value: +(+row.value / 20).toFixed(1)
+		})),
+		variants: {
+			layout: [
+				RatingLayout.List,
+				RatingLayout.Hero,
+				RatingLayout.Breakdown
+			],
+			glyph: [
+				RatingGlyph.Star,
+				RatingGlyph.Heart,
+				RatingGlyph.Circle,
+				RatingGlyph.Diamond
+			],
+			count: [
+				5,
+				10,
+				3
+			],
+			precision: [
+				RatingPrecision.Exact,
+				RatingPrecision.Half,
+				RatingPrecision.Whole
+			]
+		},
+		valid: (v) => (v.layout !== RatingLayout.Breakdown || v.precision === RatingPrecision.Exact && v.count !== 10) && (v.layout !== RatingLayout.Hero || v.precision !== RatingPrecision.Whole)
+	};
+	clipId = `rating-${++clips}`;
+	defaults() {
+		return {
+			...super.defaults(),
+			min: 0,
+			max: 5,
+			glyph: RatingGlyph.Star,
+			count: 5,
+			layout: RatingLayout.List,
+			precision: RatingPrecision.Exact
+		};
+	}
+	score(fraction) {
+		const { count, precision } = this.options;
+		const raw = fraction * count;
+		return precision === RatingPrecision.Whole ? Math.round(raw) : precision === RatingPrecision.Half ? Math.round(raw * 2) / 2 : raw;
+	}
+	drawReadings(ctx, readings) {
+		const { layout } = this.options;
+		const strips = layout === RatingLayout.List ? this.list(ctx, readings) : layout === RatingLayout.Hero ? this.hero(ctx, readings) : this.breakdown(ctx, readings);
+		this.symbols(ctx, strips);
+	}
+	/** Empty symbols with filled ones clipped to the exact score. */
+	symbols(ctx, strips) {
+		const { count, glyph } = this.options;
+		const gapOf = (d) => d.size * .28;
+		const cellOf = (d, i) => d.x + i * (d.size * 2 + gapOf(d)) + d.size;
+		const cells = strips.flatMap((strip) => range(count).map((i) => ({
+			strip,
+			i,
+			key: `${strip.key}/${i}`
+		})));
+		const pose = (d) => `translate(${cellOf(d.strip, d.i)},${d.strip.y}) scale(${d.strip.size})`;
+		const color = this.accent(ctx);
+		const shapes = ctx.marks("empty", "path", cells, (d) => d.key).attr("d", GLYPHS[glyph]).attr("fill", ctx.theme.grid).attr("transform", pose);
+		ctx.hover(shapes, (d) => d.strip.reading ? this.tooltip(d.strip.reading, color) : {
+			title: "Average",
+			color
+		});
+		const clipEdge = (d) => {
+			const whole = Math.floor(d.score);
+			return d.x + whole * (d.size * 2 + gapOf(d)) + (d.score - whole) * d.size * 2;
+		};
+		const rects = ctx.marks("clips", "clipPath", strips, (d) => d.key).attr("id", (_, i) => `${this.clipId}-${i}`).selectAll("rect").data((d) => [d]).join("rect").attr("y", (d) => d.y - d.size * 1.2).attr("height", (d) => d.size * 2.4).attr("x", (d) => d.x - 1);
+		ctx.set(rects, { width: (d) => Math.max(0, clipEdge(d) - d.x + 1) }, { width: 0 });
+		const fills = ctx.marks("filled", "g", strips, (d) => d.key).attr("clip-path", (_, i) => `url(#${this.clipId}-${i})`).selectAll("path").data((strip) => range(count).map((i) => ({
+			strip,
+			i,
+			key: `${strip.key}/${i}`
+		}))).join("path").attr("d", GLYPHS[glyph]).attr("fill", color).attr("transform", pose);
+		ctx.hover(fills, (d) => d.strip.reading ? this.tooltip(d.strip.reading, color) : {
+			title: "Average",
+			color
+		});
+	}
+	stripWidth(size) {
+		return this.options.count * (size * 2 + size * .28) - size * .28;
+	}
+	list(ctx, readings) {
+		const rows = this.averaged(readings);
+		const { width, height } = ctx.plot;
+		const shown = rows.slice(0, Math.max(1, Math.floor(height / 22)));
+		const line = Math.min(36, height / Math.max(1, shown.length)), top = (height - line * shown.length) / 2;
+		const gutter = Math.min(width * .3, Math.max(...shown.map((r) => this.textWidth(r.label)), 20) + 12);
+		const room = width - gutter - 34;
+		const size = Math.max(5, Math.min(10, line * .34, room / (this.options.count * 2.28)));
+		this.texts(ctx, "text", shown.flatMap((r, i) => [{
+			key: `${r.id}n`,
+			text: this.fit(r.label, gutter - 10),
+			x: 0,
+			y: top + (i + .5) * line,
+			anchor: "start"
+		}, {
+			key: `${r.id}v`,
+			text: this.scoreText(r.value),
+			x: width,
+			y: top + (i + .5) * line,
+			anchor: "end",
+			tone: "ink",
+			weight: 600
+		}]));
+		return shown.map((reading, i) => ({
+			key: reading.id,
+			x: gutter,
+			y: top + (i + .5) * line,
+			size,
+			score: this.score(reading.fraction),
+			reading
+		}));
+	}
+	scoreText(value) {
+		const { format, count, max } = this.options;
+		return format?.(value) ?? (count === max ? value.toFixed(1) : `${value.toFixed(1)} / ${max}`);
+	}
+	hero(ctx, readings) {
+		if (!readings.length) {
+			this.texts(ctx, "text", []);
+			return [];
+		}
+		const { width, height } = ctx.plot;
+		const average = mean(readings, (r) => r.value), fraction = mean(readings, (r) => r.fraction);
+		const size = Math.max(6, Math.min(16, width * .8 / (this.options.count * 2.28)));
+		const big = Math.min(54, height * .32), top = (height - (big + size * 2 + 34)) / 2;
+		this.texts(ctx, "text", [{
+			key: "value",
+			text: this.scoreText(average),
+			x: width / 2,
+			y: top + big / 2,
+			size: big,
+			tone: "ink",
+			weight: 600,
+			count: [average, (v) => this.scoreText(v)]
+		}, {
+			key: "count",
+			text: `${readings.length} ratings`,
+			x: width / 2,
+			y: top + big + size * 2 + 22,
+			size: 12
+		}]);
+		return [{
+			key: "hero",
+			x: (width - this.stripWidth(size)) / 2,
+			y: top + big + 8 + size,
+			size,
+			score: this.score(fraction)
+		}];
+	}
+	breakdown(ctx, readings) {
+		const { count } = this.options;
+		const { width, height } = ctx.plot;
+		const levels = range(count, 0, -1);
+		const tally = levels.map((level) => ({
+			level,
+			n: readings.filter((r) => Math.max(1, Math.round(r.fraction * count)) === level).length
+		}));
+		const most = Math.max(1, ...tally.map((d) => d.n)), line = Math.min(30, height / levels.length), top = (height - line * levels.length) / 2;
+		const left = Math.min(120, width * .34), rail = left + 22, length = Math.max(10, width - rail - 26);
+		const thick = Math.min(12, line * .5);
+		const yOf = (i) => top + (i + .5) * line;
+		const tracks = ctx.marks("tracks", "rect", tally, (d) => d.level).attr("x", rail).attr("y", (_, i) => yOf(i) - thick / 2).attr("width", length).attr("height", thick).attr("rx", Math.min(4, thick / 2)).attr("fill", ctx.theme.grid);
+		const color = this.accent(ctx);
+		const tip = (d) => ({
+			title: `${d.level} of ${count}`,
+			color,
+			rows: [["Ratings", d.n]]
+		});
+		ctx.hover(tracks, tip);
+		const bars = ctx.marks("bars", "rect", tally, (d) => d.level).attr("x", rail).attr("y", (_, i) => yOf(i) - thick / 2).attr("height", thick).attr("rx", Math.min(4, thick / 2)).attr("fill", color);
+		ctx.set(bars, { width: (d) => d.n / most * length }, { width: 0 }, 40);
+		ctx.hover(bars, tip);
+		const average = readings.length ? mean(readings, (r) => r.value) : 0;
+		const big = Math.min(38, left * .36), size = Math.max(5, Math.min(9, (left - 10) / (count * 2.28)));
+		this.texts(ctx, "text", [
+			{
+				key: "value",
+				text: this.scoreText(average),
+				x: 0,
+				y: height / 2 - 24,
+				size: big,
+				tone: "ink",
+				weight: 600,
+				anchor: "start"
+			},
+			{
+				key: "count",
+				text: `${readings.length} ratings`,
+				x: 0,
+				y: height / 2 + 30,
+				anchor: "start"
+			},
+			...tally.flatMap((d, i) => [{
+				key: `l${d.level}`,
+				text: `${d.level}`,
+				x: rail - 8,
+				y: yOf(i),
+				anchor: "end"
+			}, {
+				key: `n${d.level}`,
+				text: `${d.n}`,
+				x: width,
+				y: yOf(i),
+				anchor: "end",
+				tone: "ink",
+				weight: 600
+			}])
+		]);
+		return readings.length ? [{
+			key: "summary",
+			x: 0,
+			y: height / 2 + 10,
+			size,
+			score: this.score(mean(readings, (r) => r.fraction))
+		}] : [];
+	}
+};
+export { RatingStars };

package/dist/charts/indicators/ScoreCard.js

@@ -0,0 +1,172 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { ScoreDensity, ScoreGauge, ScoreSort, ScoreStatus } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+import { ascending } from "d3";
+// src/charts/indicators/ScoreCard.ts
+/** A balanced scorecard: each metric's actual, target, attainment and status on one row. */
+var ScoreCard = class extends IndicatorChart {
+	static meta = {
+		id: "scorecard",
+		name: "Score card",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Lists metrics with actual, target, an in-row gauge and a named status for management reviews.",
+		tags: [
+			"balanced scorecard",
+			"kpi table",
+			"report card"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 5),
+		variants: {
+			gauge: [
+				ScoreGauge.Bullet,
+				ScoreGauge.Bar,
+				ScoreGauge.Dot
+			],
+			statusStyle: [ScoreStatus.Pill, ScoreStatus.Icon],
+			density: [ScoreDensity.Comfortable, ScoreDensity.Compact],
+			sort: [ScoreSort.Data, ScoreSort.Worst],
+			trend: [true, false],
+			header: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			gauge: ScoreGauge.Bullet,
+			statusStyle: ScoreStatus.Pill,
+			density: ScoreDensity.Comfortable,
+			sort: ScoreSort.Data,
+			trend: true,
+			header: true
+		};
+	}
+	drawReadings(ctx, readings) {
+		const { sort, density, header, trend, statusStyle } = this.options;
+		const { width, height } = ctx.plot;
+		const sorted = sort === ScoreSort.Worst ? [...readings].sort((a, b) => ascending(a.attainment, b.attainment)) : readings;
+		const headerRow = header ? 20 : 0;
+		const wanted = density === ScoreDensity.Compact ? 24 : 36;
+		const count = Math.min(sorted.length, Math.max(1, Math.floor((height - headerRow) / Math.min(wanted, 22))));
+		const rowH = Math.min(wanted, (height - headerRow) / Math.max(1, count));
+		const lines = sorted.slice(0, count).map((reading, i) => ({
+			reading,
+			y: headerRow + i * rowH,
+			height: rowH
+		}));
+		const pill = statusStyle === ScoreStatus.Pill;
+		const statusW = pill && width > 300 ? 74 : 20;
+		const statusX = width - statusW;
+		const showTarget = width > 340;
+		const actualX = statusX - (trend ? 26 : 12);
+		const targetX = actualX - 42;
+		const columnEnd = showTarget ? targetX - 38 : actualX - 40;
+		const nameW = Math.min(width * .24, Math.max(40, ...lines.map((l) => this.textWidth(l.reading.label))) + 8);
+		const gaugeX = nameW + 6, gaugeW = Math.max(20, columnEnd - gaugeX);
+		ctx.marks("rules", "line", lines, (d) => d.reading.id).attr("x1", 0).attr("x2", width).attr("y1", (d) => d.y).attr("y2", (d) => d.y).attr("stroke", ctx.theme.grid).attr("stroke-width", 1);
+		this.texts(ctx, "head", header && lines.length ? [
+			{
+				key: "metric",
+				text: "Metric",
+				x: 0,
+				y: 8,
+				size: 10,
+				tone: "muted",
+				anchor: "start"
+			},
+			{
+				key: "progress",
+				text: "Progress",
+				x: gaugeX,
+				y: 8,
+				size: 10,
+				tone: "muted",
+				anchor: "start"
+			},
+			...showTarget ? [{
+				key: "target",
+				text: "Target",
+				x: targetX,
+				y: 8,
+				size: 10,
+				tone: "muted",
+				anchor: "end"
+			}] : [],
+			{
+				key: "actual",
+				text: "Actual",
+				x: actualX,
+				y: 8,
+				size: 10,
+				tone: "muted",
+				anchor: "end"
+			}
+		] : []);
+		this.texts(ctx, "cells", lines.flatMap((l) => {
+			const y = l.y + l.height / 2, r = l.reading;
+			return [
+				{
+					key: `${r.id}n`,
+					text: this.fit(r.label, nameW - 2),
+					x: 0,
+					y,
+					anchor: "start",
+					tone: "ink"
+				},
+				...showTarget && r.target !== null ? [{
+					key: `${r.id}t`,
+					text: this.formatted(r.target),
+					x: targetX,
+					y,
+					anchor: "end",
+					tone: "muted"
+				}] : [],
+				{
+					key: `${r.id}a`,
+					text: this.formatted(r.value),
+					x: actualX,
+					y,
+					anchor: "end",
+					tone: "ink",
+					weight: 600
+				}
+			];
+		}));
+		this.gauges(ctx, lines, gaugeX, gaugeW);
+		const arrows = ctx.marks("trend", "path", trend ? lines.filter((l) => l.reading.previous !== null) : [], (d) => d.reading.id).attr("d", (d) => d.reading.value >= d.reading.previous ? "M0 -4.5L4.5 3H-4.5Z" : "M0 4.5L4.5 -3H-4.5Z").attr("fill", ctx.theme.inkSecondary).attr("transform", (d) => `translate(${actualX + 11},${d.y + d.height / 2})`);
+		ctx.hover(arrows, (d) => ({
+			title: d.reading.label,
+			rows: [["Previous", this.formatted(d.reading.previous)], ["Now", this.formatted(d.reading.value)]]
+		}));
+		const pills = ctx.marks("pills", "rect", pill && statusW > 20 ? lines : [], (d) => d.reading.id).attr("x", statusX).attr("width", statusW).attr("height", 18).attr("rx", 9).attr("y", (d) => d.y + d.height / 2 - 9).attr("fill", (d) => this.status(d.reading).color).attr("fill-opacity", .15);
+		ctx.hover(pills, (d) => this.tooltip(d.reading, this.status(d.reading).color));
+		this.chips(ctx, "status", lines.map((l) => ({
+			key: l.reading.id,
+			x: statusX + (statusW > 20 ? 3 : 2),
+			y: l.y + l.height / 2,
+			status: this.status(l.reading),
+			text: statusW > 20 ? this.status(l.reading).label : "",
+			size: statusW > 20 ? 6 : 7
+		})));
+	}
+	gauges(ctx, lines, x, width) {
+		const { gauge } = this.options;
+		const color = this.accent(ctx);
+		const thick = gauge === ScoreGauge.Dot ? 2 : 8;
+		const y = (d) => d.y + d.height / 2 - thick / 2;
+		const tracks = ctx.marks("tracks", "rect", lines, (d) => d.reading.id).attr("x", x).attr("width", width).attr("height", thick).attr("rx", Math.min(4, thick / 2)).attr("fill", ctx.theme.grid).attr("y", y);
+		ctx.hover(tracks, (d) => this.tooltip(d.reading, color));
+		const bars = ctx.marks("bars", "rect", gauge === ScoreGauge.Dot ? [] : lines, (d) => d.reading.id).attr("x", x).attr("height", thick).attr("rx", 4).attr("fill", color).attr("y", y);
+		ctx.set(bars, { width: (d) => d.reading.fraction * width }, { width: 0 }, 30);
+		ctx.hover(bars, (d) => this.tooltip(d.reading, color));
+		const dots = ctx.marks("dots", "circle", gauge === ScoreGauge.Dot ? lines : [], (d) => d.reading.id).attr("r", 5.5).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("cy", (d) => d.y + d.height / 2);
+		ctx.set(dots, { cx: (d) => x + d.reading.fraction * width }, { cx: x });
+		ctx.hover(dots, (d) => this.tooltip(d.reading, color));
+		const marks = gauge === ScoreGauge.Bar ? [] : lines.filter((d) => d.reading.targetFraction !== null);
+		const goals = ctx.marks("goals", "rect", marks, (d) => d.reading.id).attr("width", 2).attr("height", 14).attr("fill", ctx.theme.ink).attr("rx", 1).attr("x", (d) => x + d.reading.targetFraction * width - 1).attr("y", (d) => d.y + d.height / 2 - 7);
+		ctx.hover(goals, (d) => this.tooltip(d.reading, color));
+	}
+};
+export { ScoreCard };

package/dist/charts/indicators/SegmentedGauge.js

@@ -0,0 +1,133 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { DialChart } from "./DialChart.js";
+import { GaugeSweep, SegmentLit, SegmentMark } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+import { range } from "d3";
+// src/charts/indicators/SegmentedGauge.ts
+/** A dial read in discrete steps, for scores and levels where exact precision would mislead. */
+var SegmentedGauge = class extends DialChart {
+	static meta = {
+		id: "segmented-gauge",
+		name: "Segmented gauge",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows a score as lit steps around an arc, so the reading lands on a level rather than a precise value.",
+		tags: [
+			"dial",
+			"steps",
+			"levels",
+			"score"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 1),
+		variants: {
+			sweep: [
+				GaugeSweep.Semi,
+				GaugeSweep.Horseshoe,
+				GaugeSweep.Full
+			],
+			segments: [
+				10,
+				5,
+				24
+			],
+			mark: [
+				SegmentMark.Block,
+				SegmentMark.Tick,
+				SegmentMark.Dot,
+				SegmentMark.Wedge
+			],
+			lit: [
+				SegmentLit.Cumulative,
+				SegmentLit.Single,
+				SegmentLit.Partial
+			]
+		},
+		valid: (v) => v.lit !== SegmentLit.Partial || v.mark === SegmentMark.Block || v.mark === SegmentMark.Wedge
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sweep: GaugeSweep.Semi,
+			segments: 10,
+			mark: SegmentMark.Block,
+			lit: SegmentLit.Cumulative
+		};
+	}
+	drawReadings(ctx, readings) {
+		this.facets(ctx, readings, 1.5, (cell, reading) => this.dial(cell, reading), 96);
+	}
+	level(reading, index, count) {
+		const { lit } = this.options, steps = reading.fraction * count;
+		if (lit === SegmentLit.Partial) return Math.max(0, Math.min(1, steps - index));
+		const current = Math.min(count - 1, Math.ceil(steps) - 1);
+		return lit === SegmentLit.Single ? +(index === current) : +(index <= current);
+	}
+	dial(ctx, reading) {
+		const { mark } = this.options;
+		const count = Math.max(1, Math.round(this.options.segments));
+		const frame = this.frame(ctx.plot, { foot: this.frame(ctx.plot).closed ? 0 : 6 });
+		const { radius, cx, cy } = frame;
+		const dial = ctx.nest(`translate(${cx},${cy})`, "dial");
+		const span = frame.end - frame.start, step = span / count;
+		const gap = Math.min(step * .3, 3 / radius);
+		const parts = range(count).map((index) => ({
+			index,
+			from: frame.start + index * step + gap,
+			to: frame.start + (index + 1) * step - gap,
+			level: this.level(reading, index, count)
+		}));
+		const thick = radius * .2, inner = radius - thick;
+		const outerOf = (d) => mark === SegmentMark.Wedge ? inner + thick * (.3 + .7 * ((d.index + 1) / count)) : radius;
+		const shade = (d) => ctx.palette.sequential(.3 + .6 * ((d.index + 1) / count));
+		const tooltip = (d) => ({
+			...this.tooltip(reading, shade(d)),
+			title: `Step ${d.index + 1} of ${count}`
+		});
+		if (mark === SegmentMark.Dot) {
+			const mid = radius - 9, size = Math.max(4, Math.min(9, span / count * mid / 2 - 2));
+			const place = (d, axis) => {
+				const a = (d.from + d.to) / 2;
+				return axis === "x" ? mid * Math.sin(a) : -mid * Math.cos(a);
+			};
+			const dots = ctx.marks("dots", "circle", parts, (d) => d.index, dial.root).attr("fill", (d) => d.level ? shade(d) : ctx.theme.grid);
+			ctx.set(dots, {
+				cx: (d) => place(d, "x"),
+				cy: (d) => place(d, "y"),
+				r: (d) => d.level ? size : size * .6
+			}, {
+				cx: (d) => place(d, "x"),
+				cy: (d) => place(d, "y"),
+				r: 0
+			}, 18);
+			ctx.hover(dots, tooltip);
+		} else {
+			const width = mark === SegmentMark.Tick ? .32 : 1;
+			const trim = (d) => (d.to - d.from) * (1 - width) / 2;
+			const corner = mark === SegmentMark.Tick ? 1.5 : 3;
+			const base = ctx.marks("bases", "path", parts, (d) => d.index, dial.root).attr("fill", ctx.theme.grid).attr("d", (d) => this.ring(inner, outerOf(d), d.from + trim(d), d.to - trim(d), corner));
+			ctx.hover(base, tooltip);
+			const lit = ctx.marks("lit", "path", parts.filter((d) => d.level > 0), (d) => d.index, dial.root).attr("fill", shade);
+			this.sweep(lit, (d) => d.level, (d, f) => this.ring(inner, outerOf(d), d.from + trim(d), d.from + trim(d) + (d.to - d.from - 2 * trim(d)) * f, corner));
+			ctx.hover(lit, tooltip);
+		}
+		const size = Math.max(16, Math.min(40, inner * .42));
+		const y = frame.closed ? cy - size * .1 : cy - size * .6;
+		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: "label",
+			text: this.fit(reading.label, inner * 1.6),
+			x: cx,
+			y: y + size * .5 + 10
+		}]);
+	}
+};
+export { SegmentedGauge };