@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/proportion/PyramidChart.js

@@ -0,0 +1,154 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareChart } from "./ShareChart.js";
+import { ShareData } from "./ShareData.js";
+import { ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/PyramidChart.ts
+var PyramidApex = /* @__PURE__ */ function(PyramidApex) {
+	PyramidApex["Up"] = "apex-up";
+	PyramidApex["Down"] = "apex-down";
+	return PyramidApex;
+}({});
+/** Which measure of a band follows its value. `Area` is the honest default for a triangle. */
+var PyramidSizing = /* @__PURE__ */ function(PyramidSizing) {
+	PyramidSizing["Area"] = "by-area";
+	PyramidSizing["Height"] = "by-height";
+	PyramidSizing["Equal"] = "equal-height";
+	return PyramidSizing;
+}({});
+var PyramidForm = /* @__PURE__ */ function(PyramidForm) {
+	PyramidForm["Triangle"] = "triangle";
+	PyramidForm["Stepped"] = "stepped";
+	return PyramidForm;
+}({});
+var PyramidLabel = /* @__PURE__ */ function(PyramidLabel) {
+	PyramidLabel["Side"] = "side";
+	PyramidLabel["Inside"] = "inside";
+	PyramidLabel["None"] = "unlabelled";
+	return PyramidLabel;
+}({});
+var RAIL = 112;
+/** Parts of a whole with a natural rank: foundation at the base, the few at the tip. */
+var PyramidChart = class extends ShareChart {
+	static meta = {
+		id: "pyramid",
+		name: "Pyramid chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Slices a triangle into ranked layers so each part of a whole sits at its level in a hierarchy.",
+		tags: [
+			"triangle",
+			"hierarchy of needs",
+			"ranked share"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 1),
+		variants: {
+			apex: ["apex-up", "apex-down"],
+			sizing: [
+				"by-area",
+				"by-height",
+				"equal-height"
+			],
+			form: ["triangle", "stepped"],
+			labels: [
+				"side",
+				"inside",
+				"unlabelled"
+			],
+			sort: [
+				ShareSort.Descending,
+				ShareSort.Data,
+				ShareSort.Ascending
+			]
+		},
+		valid: (values) => values.sizing !== "equal-height" || values.sort === ShareSort.Descending
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			apex: "apex-up",
+			sizing: "by-area",
+			form: "triangle",
+			labels: "side"
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? (this.options.labels === "side" ? LegendPosition.None : LegendPosition.Top);
+	}
+	/** Layers from the tip (0) to the base (1). In `Area` mode a layer's share of the triangle equals its share of the whole. */
+	layers(shares) {
+		const { sizing } = this.options;
+		const fromTip = [...shares].reverse();
+		let area = 0;
+		return fromTip.map((share, i) => {
+			const before = area;
+			area += sizing === "equal-height" ? 1 / shares.length : share.fraction;
+			const at = (mass) => sizing === "by-area" ? Math.sqrt(mass) : mass;
+			return {
+				share,
+				from: at(before),
+				to: i === fromTip.length - 1 ? 1 : at(area)
+			};
+		});
+	}
+	drawShares(ctx, shares) {
+		const { apex, form, labels, value } = this.options;
+		const { height } = ctx.plot, side = labels === "side";
+		const width = ctx.plot.width - (side ? RAIL : 0);
+		const up = apex === "apex-up", cx = width / 2;
+		const fromTop = (t) => (up ? t : 1 - t) * height;
+		const half = (t) => t * width / 2;
+		const layers = this.layers(shares);
+		const yOf = (t, shift) => fromTop(t) + (up ? shift : -shift);
+		const outline = (d, scale = 1) => {
+			const gap = d.from > 0 ? 1 : 0, y0 = yOf(d.from, gap), y1 = yOf(d.to, -1);
+			const stepped = form === "stepped";
+			const w0 = half(stepped ? (d.from + d.to) / 2 : d.from) * scale, w1 = half(stepped ? (d.from + d.to) / 2 : d.to) * scale;
+			return `M${(cx - w0).toFixed(2)},${y0.toFixed(2)}L${(cx + w0).toFixed(2)},${y0.toFixed(2)}L${(cx + w1).toFixed(2)},${y1.toFixed(2)}L${(cx - w1).toFixed(2)},${y1.toFixed(2)}Z`;
+		};
+		const paths = ctx.marks("layers", "path", layers, (d) => d.share.name).attr("fill", (d) => ShareData.fill(ctx, d.share));
+		ctx.set(paths, { d: (d) => outline(d) }, { d: (d) => outline(d, 0) }, 50);
+		ctx.hover(paths, (d) => ({
+			title: d.share.name,
+			color: ShareData.fill(ctx, d.share),
+			rows: [[value, d.share.value], ["Share", ShareData.percent(d.share.fraction)]]
+		}));
+		const centre = (d) => (fromTop(d.from) + fromTop(d.to)) / 2;
+		const inner = (labels === "inside" ? layers : []).flatMap((d) => {
+			const text = ShareData.percent(d.share.fraction), room = form === "stepped" ? half((d.from + d.to) / 2) * 2 : half(Math.min(d.from, d.to) + (d.to - d.from) / 2) * 2;
+			if (ShareData.width(text) > room - 8 || Math.abs(fromTop(d.to) - fromTop(d.from)) < 15) return [];
+			return [{
+				key: d.share.name,
+				text,
+				y: centre(d) + 4,
+				fill: ShareData.ink(ctx, ShareData.fill(ctx, d.share))
+			}];
+		});
+		const written = ctx.text(ctx.marks("inside", "text", inner, (d) => d.key)).attr("fill", (d) => d.fill).attr("text-anchor", "middle").attr("font-weight", 600).attr("pointer-events", "none").text((d) => d.text);
+		ctx.set(written, {
+			x: cx,
+			y: (d) => d.y
+		});
+		const ordered = (side ? [...layers] : []).sort((a, b) => centre(a) - centre(b));
+		const rails = ShareData.dodge(ordered.map(centre), 15, 8, height - 4);
+		const notes = ordered.map((d, i) => {
+			const y = rails[i], wall = cx + half((d.from + d.to) / 2) + 1, end = width + 6;
+			return {
+				key: d.share.name,
+				y,
+				path: `M${wall.toFixed(1)},${centre(d).toFixed(1)}L${(end - 8).toFixed(1)},${y.toFixed(1)}L${end.toFixed(1)},${y.toFixed(1)}`,
+				text: `${ShareData.fit(d.share.name, 68)}  ${ShareData.percent(d.share.fraction)}`,
+				x: end + 4
+			};
+		});
+		ctx.set(ctx.marks("leaders", "path", notes, (d) => d.key).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1), { d: (d) => d.path });
+		const names = ctx.text(ctx.marks("notes", "text", notes, (d) => d.key)).attr("dy", 4).text((d) => d.text);
+		ctx.set(names, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { PyramidApex, PyramidChart, PyramidForm, PyramidLabel, PyramidSizing };

package/dist/charts/proportion/SemiDonutChart.js

@@ -0,0 +1,106 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PieBase } from "./PieBase.js";
+import { ShareData } from "./ShareData.js";
+import { PieLabel, ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/SemiDonutChart.ts
+var SemiOpening = /* @__PURE__ */ function(SemiOpening) {
+	SemiOpening["Down"] = "opens-down";
+	SemiOpening["Up"] = "opens-up";
+	SemiOpening["Left"] = "opens-left";
+	SemiOpening["Right"] = "opens-right";
+	return SemiOpening;
+}({});
+var CENTRE = {
+	["opens-down"]: 0,
+	["opens-right"]: -Math.PI / 2,
+	["opens-up"]: Math.PI,
+	["opens-left"]: Math.PI / 2
+};
+/** A share split on a shallow arc: compact in dashboards, and the ends read like a scale. */
+var SemiDonutChart = class extends PieBase {
+	static meta = {
+		id: "semi-donut",
+		name: "Semi donut",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Lays parts of a whole along a half ring or horseshoe, using less height than a full donut.",
+		tags: [
+			"half donut",
+			"horseshoe",
+			"semicircle"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 1),
+		variants: {
+			arc: [
+				180,
+				240,
+				120
+			],
+			opening: [
+				"opens-down",
+				"opens-up",
+				"opens-left",
+				"opens-right"
+			],
+			hole: [.6, .78],
+			labels: [
+				PieLabel.Callout,
+				PieLabel.Inside,
+				PieLabel.None
+			],
+			sort: [ShareSort.Descending, ShareSort.Data]
+		},
+		valid: (values) => !(values.labels === PieLabel.Inside && values.hole === .78)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			arc: 180,
+			opening: "opens-down",
+			hole: .6
+		};
+	}
+	hole() {
+		return this.options.hole;
+	}
+	span() {
+		return this.options.arc * Math.PI / 180;
+	}
+	origin() {
+		return CENTRE[this.options.opening] - this.span() / 2;
+	}
+	stage(plot, shares) {
+		const start = this.origin(), steps = 72;
+		const rim = Array.from({ length: 73 }, (_, i) => start + this.span() * i / steps);
+		const xs = rim.flatMap((angle) => [Math.sin(angle), Math.sin(angle) * this.hole()]), ys = rim.flatMap((angle) => [-Math.cos(angle), -Math.cos(angle) * this.hole()]);
+		const [x0, x1, y0, y1] = [
+			Math.min(...xs),
+			Math.max(...xs),
+			Math.min(...ys),
+			Math.max(...ys)
+		];
+		const side = this.outside ? Math.min(96, Math.max(...shares.map((share) => ShareData.width(`${share.name}  00%`))) + 26) : 0;
+		const pad = this.outside ? 12 : 0;
+		const radius = Math.max(32, Math.min((plot.width - side * 2) / (x1 - x0), (plot.height - pad * 2) / (y1 - y0)));
+		const x = -(x0 + x1) / 2 * radius, y = -(y0 + y1) / 2 * radius;
+		return {
+			x,
+			y,
+			radius,
+			left: -plot.width / 2 - x,
+			right: plot.width / 2 - x,
+			top: -plot.height / 2 - y,
+			bottom: plot.height / 2 - y
+		};
+	}
+	decorate(ctx, shares, stage) {
+		const lead = shares.reduce((top, share) => share.value > top.value ? share : top);
+		const room = this.options.arc >= 180 && this.options.hole * stage.radius > 44;
+		const text = ctx.marks("lead", "text", room ? [lead] : [], (d) => d.name).attr("text-anchor", "middle").attr("font-family", ctx.theme.fontFamily).attr("fill", ctx.theme.ink).attr("font-size", 22).attr("font-weight", 600).text((d) => ShareData.percent(d.fraction));
+		ctx.set(text, { y: Math.cos(CENTRE[this.options.opening]) > .5 ? -4 : Math.cos(CENTRE[this.options.opening]) < -.5 ? 18 : 8 });
+	}
+};
+export { SemiDonutChart, SemiOpening };

package/dist/charts/proportion/SetData.js

@@ -0,0 +1,56 @@
+import { SampleData } from "../../data/SampleData.js";
+// src/charts/proportion/SetData.ts
+var degreeOf = (mask) => {
+	let count = 0;
+	for (let m = mask; m; m &= m - 1) count++;
+	return count;
+};
+/** Parses set-membership rows such as `{ sets: 'A&B', value: 12 }`, where each row is an exclusive combination. */
+var SetData = class {
+	static collect(rows, field, value, separator, limit) {
+		const parsed = (Array.isArray(rows) ? rows : []).flatMap((row) => {
+			const amount = Number(row?.[value]), names = [...new Set(String(row?.[field] ?? "").split(separator).map((name) => name.trim()).filter(Boolean))];
+			return Number.isFinite(amount) && amount > 0 && names.length ? [{
+				names,
+				amount
+			}] : [];
+		});
+		const sizes = /* @__PURE__ */ new Map();
+		for (const { names, amount } of parsed) for (const name of names) sizes.set(name, (sizes.get(name) ?? 0) + amount);
+		const kept = new Set([...sizes].sort((a, b) => b[1] - a[1]).slice(0, Math.min(limit, 30)).map(([name]) => name));
+		const names = [...sizes.keys()].filter((name) => kept.has(name));
+		const merged = /* @__PURE__ */ new Map();
+		for (const row of parsed) {
+			const mask = row.names.reduce((bits, name) => kept.has(name) ? bits | 1 << names.indexOf(name) : bits, 0);
+			if (mask) merged.set(mask, (merged.get(mask) ?? 0) + row.amount);
+		}
+		const regions = [...merged].map(([mask, amount]) => ({
+			mask,
+			names: this.members(mask, names),
+			degree: degreeOf(mask),
+			value: amount
+		}));
+		return {
+			names,
+			regions,
+			total: regions.reduce((sum, region) => sum + region.value, 0),
+			sizes: names.map((_, i) => regions.reduce((sum, region) => sum + (region.mask & 1 << i ? region.value : 0), 0))
+		};
+	}
+	static members(mask, names) {
+		return names.filter((_, i) => mask & 1 << i);
+	}
+	/** Six named sets over `SampleData.categories`, thinning as combinations get wider. */
+	static sample(seed, sets = 6) {
+		const rows = SampleData.categories(seed, 12, 8);
+		const names = [...new Set(rows.map((row) => String(row.series)))].slice(0, sets);
+		return Array.from({ length: 2 ** names.length - 1 }, (_, i) => {
+			const mask = i + 1, degree = degreeOf(mask);
+			return {
+				sets: this.members(mask, names).join("&"),
+				value: Math.max(1, Math.round(Number(rows[i].value) * (1.4 - i / 90) * 4 / 2 ** degree))
+			};
+		});
+	}
+};
+export { SetData };

package/dist/charts/proportion/SetDiagram.js

@@ -0,0 +1,94 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { Scales } from "../../core/Scales.js";
+import { SetData } from "./SetData.js";
+import { SetRegions } from "./SetRegions.js";
+import { ShareData } from "./ShareData.js";
+import { color, mean, rgb } from "d3";
+// src/charts/proportion/SetDiagram.ts
+/** `Identity` blends the colours of the sets a region belongs to; `Magnitude` shades regions by value. */
+var SetFill = /* @__PURE__ */ function(SetFill) {
+	SetFill["Identity"] = "set-colours";
+	SetFill["Magnitude"] = "by-value";
+	return SetFill;
+}({});
+var SetLabel = /* @__PURE__ */ function(SetLabel) {
+	SetLabel["Values"] = "values";
+	SetLabel["Names"] = "set-names";
+	SetLabel["None"] = "unlabelled";
+	return SetLabel;
+}({});
+/** Region-based set diagram. Subclasses place the shapes; tracing, colour and labels are shared. */
+var SetDiagram = class extends Chart2D {
+	defaults() {
+		return {
+			sets: "sets",
+			value: "value",
+			separator: "&",
+			limit: 3,
+			labels: "values",
+			fill: "set-colours"
+		};
+	}
+	/** Called with the regions that have data but no drawable area. */
+	missing(_ctx, _count) {}
+	draw(ctx) {
+		const { data, sets, value, separator, limit, labels, fill } = this.options;
+		const table = SetData.collect(data, sets, value, separator, limit);
+		for (const name of table.names) ctx.palette.color(name);
+		if (ShareData.noData(ctx, !table.regions.length, ctx.plot.width / 2, ctx.plot.height / 2)) return;
+		const values = new Map(table.regions.map((region) => [region.mask, region]));
+		const biggest = Math.max(...table.regions.map((region) => region.value));
+		const traced = SetRegions.trace(this.shapes(ctx, table), ctx.plot.width, ctx.plot.height);
+		const regions = traced.map((path) => ({
+			path,
+			region: values.get(path.mask) ?? {
+				mask: path.mask,
+				names: SetData.members(path.mask, table.names),
+				degree: 0,
+				value: 0
+			}
+		}));
+		const blend = (names) => {
+			const colours = names.map((name) => rgb(ctx.palette.color(name)));
+			return rgb(mean(colours, (c) => c.r), mean(colours, (c) => c.g), mean(colours, (c) => c.b)).formatHex();
+		};
+		const paint = (region) => {
+			if (!region.value) return ctx.theme.grid;
+			return fill === "by-value" ? color(ctx.palette.sequential(.2 + .8 * region.value / biggest)).formatHex() : blend(region.names);
+		};
+		const paths = ctx.marks("regions", "path", regions, (d) => d.path.mask).attr("fill", (d) => paint(d.region)).attr("fill-rule", "evenodd");
+		ctx.set(paths, { d: (d) => d.path.d });
+		ctx.hover(paths, (d) => ({
+			title: d.region.names.join(" ∩ "),
+			color: paint(d.region),
+			rows: [[value, d.region.value], ["Share", ShareData.percent(d.region.value / table.total)]]
+		}));
+		const written = (labels === "unlabelled" ? [] : regions).flatMap(({ path, region }) => {
+			if (!region.value) return [];
+			const amount = Scales.format(region.value, biggest);
+			if (path.room * 1.9 < ShareData.width(amount) || path.room < 7) return [];
+			const name = labels === "set-names" && region.degree === 1 ? ShareData.fit(region.names[0], path.room * 2.2) : "";
+			return [{
+				key: path.mask,
+				amount,
+				name,
+				x: path.x,
+				y: path.y,
+				fill: ShareData.ink(ctx, paint(region))
+			}];
+		});
+		const titles = ctx.text(ctx.marks("names", "text", written.filter((d) => d.name), (d) => d.key)).attr("fill", (d) => d.fill).attr("text-anchor", "middle").attr("font-weight", 600).attr("pointer-events", "none").text((d) => d.name);
+		ctx.set(titles, {
+			x: (d) => d.x,
+			y: (d) => d.y - 3
+		});
+		const amounts = ctx.text(ctx.marks("values", "text", written, (d) => d.key)).attr("fill", (d) => d.fill).attr("text-anchor", "middle").attr("pointer-events", "none").text((d) => d.amount);
+		ctx.set(amounts, {
+			x: (d) => d.x,
+			y: (d) => d.y + (d.name ? 11 : 4)
+		});
+		const drawn = new Set(traced.map((path) => path.mask));
+		this.missing(ctx, table.regions.filter((region) => !drawn.has(region.mask)).length);
+	}
+};
+export { SetDiagram, SetFill, SetLabel };

package/dist/charts/proportion/SetRegions.js

@@ -0,0 +1,52 @@
+import { contours } from "d3";
+// src/charts/proportion/SetRegions.ts
+var STEP = 3;
+var GAP = 1;
+/**
+* Traces exclusive regions of overlapping shapes. Each region is the zero contour of
+* `min(±distance to each shape)`, so any overlap arrangement works without polygon booleans.
+*/
+var SetRegions = class {
+	static field(shape, columns, rows) {
+		const { cx, cy, rx, ry, angle } = shape;
+		const cos = Math.cos(angle), sin = Math.sin(angle), reach = Math.min(rx, ry);
+		const values = new Float64Array(columns * rows);
+		for (let j = 0; j < rows; j++) for (let i = 0; i < columns; i++) {
+			const px = (i - 1) * STEP - cx, py = (j - 1) * STEP - cy;
+			const u = (px * cos + py * sin) / rx, v = (-px * sin + py * cos) / ry;
+			values[i + j * columns] = (1 - Math.hypot(u, v)) * reach;
+		}
+		return values;
+	}
+	static trace(shapes, width, height) {
+		const columns = Math.ceil(width / STEP) + 3, rows = Math.ceil(height / STEP) + 3;
+		const fields = shapes.map((shape) => this.field(shape, columns, rows));
+		const regions = [];
+		const values = new Float64Array(columns * rows);
+		const plot = (x, y) => `${((x - 1.5) * STEP).toFixed(1)},${((y - 1.5) * STEP).toFixed(1)}`;
+		const tracer = contours().size([columns, rows]).thresholds([GAP]);
+		for (let mask = 1; mask < 2 ** shapes.length; mask++) {
+			let best = -Infinity, at = 0;
+			for (let k = 0; k < values.length; k++) {
+				let low = Infinity;
+				for (let s = 0; s < fields.length; s++) low = Math.min(low, mask & 1 << s ? fields[s][k] : -fields[s][k]);
+				values[k] = low;
+				if (low > best) {
+					best = low;
+					at = k;
+				}
+			}
+			if (best <= GAP) continue;
+			const d = tracer(values)[0].coordinates.flatMap((polygon) => polygon.map((ring) => `M${ring.map(([x, y]) => plot(x, y)).join("L")}Z`)).join("");
+			regions.push({
+				mask,
+				d,
+				x: (at % columns - 1) * STEP,
+				y: (Math.floor(at / columns) - 1) * STEP,
+				room: best
+			});
+		}
+		return regions;
+	}
+};
+export { SetRegions };

package/dist/charts/proportion/ShareChart.js

@@ -0,0 +1,22 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ShareData } from "./ShareData.js";
+import { ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/ShareChart.ts
+/** Part-to-whole chart over one category and one amount. Subclasses receive clean, sorted shares. */
+var ShareChart = class extends Chart2D {
+	defaults() {
+		return {
+			category: "category",
+			value: "value",
+			sort: ShareSort.Data,
+			limit: 8
+		};
+	}
+	draw(ctx) {
+		const { data, category, value, sort, limit } = this.options;
+		const shares = ShareData.collect(data, category, value, sort, limit);
+		ShareData.register(ctx, shares);
+		if (!ShareData.noData(ctx, !shares.length, ctx.plot.width / 2, ctx.plot.height / 2)) this.drawShares(ctx, shares);
+	}
+};
+export { ShareChart };

package/dist/charts/proportion/ShareData.js

@@ -0,0 +1,94 @@
+import { ShareSort } from "./ShareEnums.js";
+import { arc, color, sum } from "d3";
+// src/charts/proportion/ShareData.ts
+var REST = "Other";
+var CHAR = 6.2 / 11;
+/** Turns rows into honest parts of a whole, and holds the small helpers every proportion chart shares. */
+var ShareData = class {
+	/**
+	* Sums duplicate keys, drops null and non-positive amounts (a part of a whole cannot be negative)
+	* and folds everything past `limit` into "Other", so the palette never has to cycle.
+	*/
+	static collect(rows, category, value, sort = ShareSort.Data, limit = 8) {
+		const totals = /* @__PURE__ */ new Map();
+		for (const row of Array.isArray(rows) ? rows : []) {
+			const amount = Number(row?.[value]);
+			if (!Number.isFinite(amount) || amount <= 0) continue;
+			const name = String(row[category] ?? "Unknown");
+			totals.set(name, (totals.get(name) ?? 0) + amount);
+		}
+		const entries = [...totals].map(([name, amount], index) => ({
+			name,
+			value: amount,
+			index,
+			rest: false
+		}));
+		const whole = sum(entries, (entry) => entry.value);
+		const parts = (rows) => rows.map((entry) => ({
+			...entry,
+			fraction: entry.value / whole
+		}));
+		if (entries.length <= limit) return this.order(parts(entries), sort);
+		const kept = new Set([...entries].sort((a, b) => b.value - a.value).slice(0, Math.max(1, limit - 1)));
+		const dropped = entries.filter((entry) => !kept.has(entry));
+		return this.order(parts([...entries.filter((entry) => kept.has(entry)), {
+			name: REST,
+			value: sum(dropped, (entry) => entry.value),
+			index: entries.length,
+			rest: true
+		}]), sort);
+	}
+	static order(shares, sort) {
+		const rank = (share) => sort === ShareSort.Data ? share.index : sort === ShareSort.Descending ? -share.value : share.value;
+		return [...shares].sort((a, b) => Number(a.rest) - Number(b.rest) || rank(a) - rank(b));
+	}
+	/** Assigns identity colours in data order, so a slice keeps its colour whatever the sort. */
+	static register(ctx, shares) {
+		for (const share of [...shares].sort((a, b) => a.index - b.index)) if (!share.rest) ctx.palette.color(share.name);
+	}
+	static fill(ctx, share) {
+		return share.rest ? ctx.theme.inkMuted : ctx.palette.color(share.name);
+	}
+	/** Ink for text on any fill, including the `rgb()` strings the sequential ramp returns. */
+	static ink(ctx, fill) {
+		return ctx.palette.inkOn(color(fill)?.formatHex() ?? fill);
+	}
+	/** Whole-number units that sum exactly to `units`, by the largest remainder method. */
+	static allocate(shares, units) {
+		const exact = shares.map((share) => share.fraction * units);
+		const counts = exact.map(Math.floor);
+		const order = exact.map((value, i) => [value - Math.floor(value), i]).sort((a, b) => b[0] - a[0]);
+		for (let left = units - sum(counts), i = 0; left > 0 && i < order.length; left--, i++) counts[order[i][1]] += 1;
+		return counts;
+	}
+	static percent(fraction) {
+		return fraction > 0 && fraction < .01 ? "<1%" : `${Math.round(fraction * 100)}%`;
+	}
+	static width(text, size = 11) {
+		return text.length * size * CHAR;
+	}
+	/** Truncates to `room` px with an ellipsis; empty when not even three letters fit. */
+	static fit(text, room, size = 11) {
+		if (this.width(text, size) <= room) return text;
+		const keep = Math.floor(room / (size * CHAR)) - 1;
+		return keep >= 3 ? `${text.slice(0, keep).trimEnd()}…` : "";
+	}
+	/** Spreads ascending positions at least `gap` apart inside `[low, high]`, moving each as little as it can. */
+	static dodge(wanted, gap, low, high) {
+		const placed = [...wanted];
+		for (let i = 0; i < placed.length; i++) placed[i] = Math.max(placed[i], i ? placed[i - 1] + gap : low);
+		for (let i = placed.length - 1; i >= 0; i--) placed[i] = Math.min(placed[i], i < placed.length - 1 ? placed[i + 1] - gap : high);
+		return placed;
+	}
+	/** Arc generator with a constant 2px gap, whatever the radius. */
+	static arcs(inner, outer, pad, gap = 2) {
+		return arc().innerRadius(inner).outerRadius(outer).padRadius(pad).padAngle(gap / Math.max(1, pad)).cornerRadius(3);
+	}
+	/** Shows an empty state at `(x, y)` and clears stale marks. Returns true when there is nothing to draw. */
+	static noData(ctx, empty, x, y) {
+		if (empty) ctx.root.selectAll(":scope > g:not(.m-no-data)").remove();
+		ctx.text(ctx.marks("no-data", "text", empty ? ["No data"] : []).text((d) => d).attr("x", x).attr("y", y).attr("text-anchor", "middle"), 12, "muted");
+		return empty;
+	}
+};
+export { ShareData };

package/dist/charts/proportion/ShareEnums.js

@@ -0,0 +1,34 @@
+// src/charts/proportion/ShareEnums.ts
+/** Order of parts inside a part-to-whole chart. "Other" always stays last. */
+var ShareSort = /* @__PURE__ */ function(ShareSort) {
+	ShareSort["Data"] = "data-order";
+	ShareSort["Descending"] = "descending";
+	ShareSort["Ascending"] = "ascending";
+	return ShareSort;
+}({});
+/** Where a pie names its slices. */
+var PieLabel = /* @__PURE__ */ function(PieLabel) {
+	PieLabel["Callout"] = "callout";
+	PieLabel["Spider"] = "spider";
+	PieLabel["Inside"] = "inside";
+	PieLabel["None"] = "unlabelled";
+	return PieLabel;
+}({});
+var PieSweep = /* @__PURE__ */ function(PieSweep) {
+	PieSweep["Clockwise"] = "clockwise";
+	PieSweep["CounterClockwise"] = "counter-clockwise";
+	return PieSweep;
+}({});
+/** `Top` starts the first slice at 12 o'clock; `Balanced` centres it there. */
+var PieAnchor = /* @__PURE__ */ function(PieAnchor) {
+	PieAnchor["Top"] = "top-anchored";
+	PieAnchor["Balanced"] = "balanced";
+	return PieAnchor;
+}({});
+var MarkShape = /* @__PURE__ */ function(MarkShape) {
+	MarkShape["Square"] = "square";
+	MarkShape["Circle"] = "circle";
+	MarkShape["Diamond"] = "diamond";
+	return MarkShape;
+}({});
+export { MarkShape, PieAnchor, PieLabel, PieSweep, ShareSort };