@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/proportion/FunnelChart.js

@@ -0,0 +1,204 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareChart } from "./ShareChart.js";
+import { ShareData } from "./ShareData.js";
+import { pairs } from "d3";
+// src/charts/proportion/FunnelChart.ts
+var FunnelForm = /* @__PURE__ */ function(FunnelForm) {
+	FunnelForm["Trapezoid"] = "trapezoid";
+	FunnelForm["Stepped"] = "stepped";
+	FunnelForm["Curved"] = "curved";
+	return FunnelForm;
+}({});
+var FunnelAlign = /* @__PURE__ */ function(FunnelAlign) {
+	FunnelAlign["Centred"] = "centred";
+	FunnelAlign["Leading"] = "leading-edge";
+	return FunnelAlign;
+}({});
+/** `Equal` gives every stage the same depth; `Proportional` also scales depth by value. */
+var FunnelDepth = /* @__PURE__ */ function(FunnelDepth) {
+	FunnelDepth["Equal"] = "equal-depth";
+	FunnelDepth["Proportional"] = "proportional-depth";
+	return FunnelDepth;
+}({});
+var FunnelNote = /* @__PURE__ */ function(FunnelNote) {
+	FunnelNote["Rails"] = "rails";
+	FunnelNote["Inside"] = "inside";
+	FunnelNote["None"] = "unlabelled";
+	return FunnelNote;
+}({});
+var STAGES = [
+	"Visited",
+	"Signed up",
+	"Activated",
+	"Subscribed",
+	"Renewed",
+	"Referred"
+];
+var NAME = 88;
+var RATE = 54;
+var MIN_DEPTH = 16;
+/** Stage-by-stage drop-off through a process, in the order the rows arrive. */
+var FunnelChart = class extends ShareChart {
+	static meta = {
+		id: "funnel",
+		name: "Funnel chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows how a quantity shrinks through ordered stages, making the biggest drop-off easy to find.",
+		tags: [
+			"conversion",
+			"pipeline",
+			"drop-off"
+		],
+		sample: (seed) => {
+			const rates = SampleData.categories(seed, STAGES.length, 1).map((row) => .5 + Number(row.value) / 220);
+			let value = 12e3;
+			return STAGES.map((category, i) => ({
+				category,
+				value: i ? value = Math.round(value * rates[i]) : value
+			}));
+		},
+		variants: {
+			form: [
+				"trapezoid",
+				"stepped",
+				"curved"
+			],
+			align: ["centred", "leading-edge"],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			depth: ["equal-depth", "proportional-depth"],
+			notes: [
+				"rails",
+				"inside",
+				"unlabelled"
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			limit: 12,
+			form: "trapezoid",
+			align: "centred",
+			orientation: Orientation.Vertical,
+			depth: "equal-depth",
+			notes: "rails"
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? LegendPosition.None;
+	}
+	bands(shares, length, breadth) {
+		const top = Math.max(...shares.map((share) => share.value));
+		const free = Math.max(0, length - 2 * (shares.length - 1));
+		const whole = shares.reduce((total, share) => total + share.value, 0);
+		const floor = Math.min(MIN_DEPTH, free / shares.length);
+		const depths = shares.map((share) => this.options.depth === "equal-depth" ? free / shares.length : floor + (free - floor * shares.length) * share.value / whole);
+		let cursor = 0;
+		return shares.map((share, i) => {
+			const start = cursor, end = start + depths[i];
+			cursor = end + 2;
+			const open = breadth * share.value / top, next = shares[i + 1];
+			return {
+				share,
+				start,
+				end,
+				open,
+				close: this.options.form === "stepped" ? open : next ? breadth * next.value / top : open
+			};
+		});
+	}
+	path(band, breadth) {
+		const vertical = this.options.orientation === Orientation.Vertical, centred = this.options.align === "centred";
+		const place = (along, cross) => vertical ? `${cross.toFixed(2)},${along.toFixed(2)}` : `${along.toFixed(2)},${cross.toFixed(2)}`;
+		const low = (width) => centred ? (breadth - width) / 2 : 0, high = (width) => low(width) + width;
+		const { start, end, open, close } = band, midpoint = (start + end) / 2;
+		if (this.options.form !== "curved") return `M${place(start, low(open))}L${place(start, high(open))}L${place(end, high(close))}L${place(end, low(close))}Z`;
+		return `M${place(start, low(open))}L${place(start, high(open))}C${place(midpoint, high(open))} ${place(midpoint, high(close))} ${place(end, high(close))}L${place(end, low(close))}C${place(midpoint, low(close))} ${place(midpoint, low(open))} ${place(start, low(open))}Z`;
+	}
+	drawShares(ctx, shares) {
+		const { orientation, notes, value, align } = this.options;
+		const vertical = orientation === Orientation.Vertical, rails = notes === "rails";
+		const { width, height } = ctx.plot;
+		const before = rails ? vertical ? NAME : 22 : 0, after = rails ? vertical ? RATE : 18 : 0;
+		const length = vertical ? height : width, breadth = (vertical ? width : height) - before - after;
+		const bands = this.bands(shares, length, breadth);
+		const top = Math.max(...shares.map((share) => share.value));
+		const stage = ctx.nest(vertical ? `translate(${before},0)` : `translate(0,${before})`, "funnel");
+		const fill = (d) => ctx.palette.sequential(.38 + .56 * (d.share.value / top));
+		const paths = stage.marks("bands", "path", bands, (d) => d.share.name, stage.root).attr("fill", fill);
+		const collapsed = (d) => this.path({
+			...d,
+			open: 0,
+			close: 0
+		}, breadth);
+		ctx.set(paths, { d: (d) => this.path(d, breadth) }, { d: collapsed }, 50);
+		const rate = (d, i) => i ? d.share.value / bands[i - 1].share.value : 1;
+		ctx.hover(paths, (d, i) => ({
+			title: d.share.name,
+			color: fill(d),
+			rows: [
+				[value, d.share.value],
+				["Of first stage", ShareData.percent(d.share.value / bands[0].share.value)],
+				["Of previous", ShareData.percent(rate(d, i))]
+			]
+		}));
+		const offsetOf = (band) => align === "centred" ? breadth / 2 : Math.max(band.open, band.close) / 2;
+		const inside = bands.flatMap((band) => {
+			const room = vertical ? (band.open + band.close) / 2 - 8 : band.end - band.start - 8;
+			const depth = vertical ? band.end - band.start : Math.min(band.open, band.close);
+			const amount = Scales.format(band.share.value, top);
+			const line = notes === "inside" ? ShareData.fit(`${band.share.name}  ${amount}`, room) : rails ? amount : "";
+			if (!line || ShareData.width(line) > room || depth < 15) return [];
+			const along = (band.start + band.end) / 2, cross = offsetOf(band);
+			return [{
+				key: band.share.name,
+				text: line,
+				x: vertical ? cross : along,
+				y: (vertical ? along : cross) + 4,
+				fill: ShareData.ink(ctx, fill(band))
+			}];
+		});
+		const written = stage.text(stage.marks("values", "text", inside, (d) => d.key, stage.root)).attr("fill", (d) => d.fill).attr("text-anchor", "middle").attr("pointer-events", "none").text((d) => d.text);
+		ctx.set(written, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const heads = (rails ? bands : []).flatMap((band) => {
+			const along = (band.start + band.end) / 2;
+			if (vertical) return [{
+				key: band.share.name,
+				text: ShareData.fit(band.share.name, 78),
+				x: 78,
+				y: along + 4,
+				anchor: "end"
+			}];
+			return [{
+				key: band.share.name,
+				text: ShareData.fit(band.share.name, band.end - band.start - 4),
+				x: along,
+				y: 13,
+				anchor: "middle"
+			}];
+		});
+		const names = ctx.text(ctx.marks("names", "text", heads, (d) => d.key)).attr("text-anchor", (d) => d.anchor).text((d) => d.text);
+		ctx.set(names, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const steps = (rails ? pairs(bands) : []).map(([from, to]) => ({
+			key: to.share.name,
+			text: ShareData.percent(to.share.value / from.share.value),
+			along: (from.end + to.start) / 2
+		}));
+		const conversion = ctx.text(ctx.marks("rates", "text", steps, (d) => d.key), 10.5, "muted").attr("text-anchor", vertical ? "end" : "middle").text((d) => d.text);
+		ctx.set(conversion, {
+			x: (d) => vertical ? width : d.along,
+			y: (d) => vertical ? d.along + 4 : height - 3
+		});
+	}
+};
+export { FunnelAlign, FunnelChart, FunnelDepth, FunnelForm, FunnelNote };

package/dist/charts/proportion/MosaicChart.js

@@ -0,0 +1,224 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareData } from "./ShareData.js";
+import { ShareSort } from "./ShareEnums.js";
+import { format, scaleLinear, sum } from "d3";
+// src/charts/proportion/MosaicChart.ts
+/**
+* `Marimekko`: width by category total, height by share within it. `BarMekko`: width by total, height in
+* absolute units. `Spine`: equal widths, height by share.
+*/
+var MosaicMode = /* @__PURE__ */ function(MosaicMode) {
+	MosaicMode["Marimekko"] = "marimekko";
+	MosaicMode["BarMekko"] = "bar-mekko";
+	MosaicMode["Spine"] = "spine";
+	return MosaicMode;
+}({});
+var MosaicLabel = /* @__PURE__ */ function(MosaicLabel) {
+	MosaicLabel["Cells"] = "cell-values";
+	MosaicLabel["Headers"] = "headers-only";
+	MosaicLabel["None"] = "unlabelled";
+	return MosaicLabel;
+}({});
+var percent = format(".0%");
+/** Two-way part-to-whole: how big each market is, and who holds it. */
+var MosaicChart = class extends CartesianChart {
+	static meta = {
+		id: "mosaic",
+		name: "Mosaic chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Divides a rectangle by two categorical variables so cell area shows each combination of the whole.",
+		tags: [
+			"marimekko",
+			"mekko",
+			"spine plot",
+			"variable width"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 4),
+		variants: {
+			mode: [
+				"marimekko",
+				"bar-mekko",
+				"spine"
+			],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			sort: [
+				ShareSort.Descending,
+				ShareSort.Data,
+				ShareSort.Ascending
+			],
+			seriesSort: [ShareSort.Data, ShareSort.Descending],
+			labels: [
+				"cell-values",
+				"headers-only",
+				"unlabelled"
+			]
+		}
+	};
+	percentScale = null;
+	defaults() {
+		return {
+			x: "category",
+			series: "series",
+			y: "value",
+			grid: false,
+			mode: "marimekko",
+			orientation: Orientation.Vertical,
+			sort: ShareSort.Descending,
+			seriesSort: ShareSort.Data,
+			labels: "cell-values"
+		};
+	}
+	get vertical() {
+		return this.options.orientation === Orientation.Vertical;
+	}
+	get equal() {
+		return this.options.mode === "spine";
+	}
+	get headers() {
+		return this.options.labels !== "unlabelled";
+	}
+	plotMargin() {
+		const base = super.plotMargin();
+		return {
+			...base,
+			top: this.vertical && this.headers ? 26 : base.top,
+			right: !this.vertical && this.headers ? 64 : base.right
+		};
+	}
+	xTicks() {
+		return this.vertical && this.equal ? 0 : 5;
+	}
+	yTicks() {
+		return !this.vertical && this.equal ? 0 : 5;
+	}
+	tickFormat(scale) {
+		return scale === this.percentScale ? (value) => percent(+value) : super.tickFormat(scale);
+	}
+	spans() {
+		const { data, x, y, series, sort, seriesSort } = this.options;
+		const rows = Array.isArray(data) ? data : [];
+		let cursor = 0;
+		return ShareData.collect(rows, x, y, sort, Number.MAX_SAFE_INTEGER).map((share) => {
+			const width = this.equal ? 1 : share.value, start = cursor;
+			cursor += width;
+			const parts = ShareData.collect(rows.filter((row) => String(row[x] ?? "Unknown") === share.name), series, y, seriesSort);
+			return {
+				name: share.name,
+				total: share.value,
+				start,
+				end: cursor,
+				parts
+			};
+		});
+	}
+	scales(ctx) {
+		const spans = this.spans();
+		const along = spans.at(-1)?.end ?? 1;
+		const depth = this.options.mode === "bar-mekko" ? Math.max(1, ...spans.map((span) => span.total)) : 1;
+		const value = scaleLinear([0, depth], this.vertical ? [ctx.plot.height, 0] : [0, ctx.plot.width]);
+		const span = scaleLinear([0, along], this.vertical ? [0, ctx.plot.width] : [0, ctx.plot.height]);
+		this.percentScale = depth === 1 ? value : null;
+		return this.vertical ? {
+			x: span,
+			y: value
+		} : {
+			x: value,
+			y: span
+		};
+	}
+	plotMarks(ctx, axes) {
+		const spans = this.spans();
+		const series = sum(spans, (span) => span.parts.length);
+		for (const name of new Set((Array.isArray(this.options.data) ? this.options.data : []).map((row) => String(row[this.options.series] ?? "Unknown")))) ctx.palette.color(name);
+		if (ShareData.noData(ctx, !series, ctx.plot.width / 2, ctx.plot.height / 2)) return;
+		const vertical = this.vertical, absolute = this.options.mode === "bar-mekko";
+		const spanScale = vertical ? axes.x : axes.y, valueScale = vertical ? axes.y : axes.x;
+		const cells = spans.flatMap((span) => {
+			let cursor = 0;
+			return span.parts.map((part) => {
+				const amount = absolute ? part.value : part.fraction, from = cursor;
+				cursor += amount;
+				return {
+					span,
+					part,
+					from,
+					to: cursor
+				};
+			});
+		});
+		const box = (d) => {
+			const a = spanScale(d.span.start), b = spanScale(d.span.end), c = valueScale(d.from), e = valueScale(d.to);
+			const spanLow = Math.min(a, b), spanSize = Math.max(1, Math.abs(b - a) - 2), valueLow = Math.min(c, e), valueSize = Math.max(1, Math.abs(e - c) - 2);
+			return vertical ? {
+				x: spanLow + 1,
+				y: valueLow + 1,
+				width: spanSize,
+				height: valueSize
+			} : {
+				x: valueLow + 1,
+				y: spanLow + 1,
+				width: valueSize,
+				height: spanSize
+			};
+		};
+		const round = (value) => +value.toFixed(2);
+		const rects = ctx.marks("cells", "rect", cells, (d) => `${d.span.name}/${d.part.name}`).attr("fill", (d) => ShareData.fill(ctx, d.part)).attr("rx", 3);
+		ctx.set(rects, {
+			x: (d) => round(box(d).x),
+			y: (d) => round(box(d).y),
+			width: (d) => round(box(d).width),
+			height: (d) => round(box(d).height)
+		}, vertical ? {
+			y: ctx.plot.height,
+			height: 0
+		} : {
+			x: 0,
+			width: 0
+		}, 8);
+		ctx.hover(rects, (d) => ({
+			title: `${d.span.name} · ${d.part.name}`,
+			color: ShareData.fill(ctx, d.part),
+			rows: [
+				[this.options.y, d.part.value],
+				["Of span", ShareData.percent(d.part.fraction)],
+				["Span total", d.span.total]
+			]
+		}));
+		const written = (this.options.labels === "cell-values" ? cells : []).flatMap((d) => {
+			const rect = box(d), text = ShareData.percent(d.part.fraction);
+			if (ShareData.width(text) > rect.width - 6 || rect.height < 15) return [];
+			return [{
+				key: `${d.span.name}/${d.part.name}`,
+				text,
+				x: rect.x + rect.width / 2,
+				y: rect.y + rect.height / 2 + 4,
+				fill: ShareData.ink(ctx, ShareData.fill(ctx, d.part))
+			}];
+		});
+		const values = 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.text);
+		ctx.set(values, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const heads = (this.headers ? spans : []).flatMap((span) => {
+			const start = spanScale(span.start), end = spanScale(span.end), size = Math.abs(end - start), centre = (start + end) / 2;
+			const text = vertical ? ShareData.fit(span.name, size - 4) : size >= 13 ? ShareData.fit(span.name, 58) : "";
+			return text ? [{
+				key: span.name,
+				text,
+				x: vertical ? centre : ctx.plot.width + 6,
+				y: vertical ? -8 : centre + 4
+			}] : [];
+		});
+		const names = ctx.text(ctx.marks("headers", "text", heads, (d) => d.key)).attr("text-anchor", vertical ? "middle" : "start").text((d) => d.text);
+		ctx.set(names, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { MosaicChart, MosaicLabel, MosaicMode };

package/dist/charts/proportion/NestedDonut.js

@@ -0,0 +1,182 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { RadialChart } from "../../core/RadialChart.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareData } from "./ShareData.js";
+import { ShareSort } from "./ShareEnums.js";
+import { interpolateRgb, pie } from "d3";
+// src/charts/proportion/NestedDonut.ts
+/** `Rings` compares the same categories across series; `Hierarchy` breaks each category into its series. */
+var NestedMode = /* @__PURE__ */ function(NestedMode) {
+	NestedMode["Rings"] = "rings";
+	NestedMode["Hierarchy"] = "hierarchy";
+	return NestedMode;
+}({});
+var RingSizing = /* @__PURE__ */ function(RingSizing) {
+	RingSizing["EqualWidth"] = "equal-width";
+	RingSizing["EqualArea"] = "equal-area";
+	return RingSizing;
+}({});
+/** How much of the circle a ring sweeps. `Proportional` scales each ring's sweep by its total. */
+var RingSweep = /* @__PURE__ */ function(RingSweep) {
+	RingSweep["Full"] = "full-circle";
+	RingSweep["Open"] = "open-quarter";
+	RingSweep["Proportional"] = "proportional-sweep";
+	return RingSweep;
+}({});
+var TAU = Math.PI * 2;
+var OPEN = TAU * .75;
+/** Compare two or three part-to-whole splits, or read a two-level breakdown, in one figure. */
+var NestedDonut = class extends RadialChart {
+	static meta = {
+		id: "nested-donut",
+		name: "Nested donut",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Stacks donut rings to compare the same split across series, or to break categories into sub-parts.",
+		tags: [
+			"multi-level pie",
+			"concentric donut",
+			"multi-ring"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 3),
+		variants: {
+			mode: ["rings", "hierarchy"],
+			sizing: ["equal-width", "equal-area"],
+			sweep: [
+				"full-circle",
+				"open-quarter",
+				"proportional-sweep"
+			],
+			sort: [ShareSort.Data, ShareSort.Descending],
+			hole: [.34, .54],
+			values: [true, false]
+		},
+		valid: (values) => values.mode === "rings" || values.sweep === "full-circle"
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			mode: "rings",
+			sizing: "equal-width",
+			sweep: "full-circle",
+			sort: ShareSort.Data,
+			hole: .34,
+			values: true
+		};
+	}
+	rows() {
+		return Array.isArray(this.options.data) ? this.options.data : [];
+	}
+	seriesNames() {
+		return [...new Set(this.rows().map((row) => String(row[this.options.series] ?? "Unknown")))];
+	}
+	part(series) {
+		return series === void 0 ? this.rows() : this.rows().filter((row) => String(row[this.options.series] ?? "Unknown") === series);
+	}
+	radii(count, radius) {
+		const hole = this.options.hole * radius;
+		const edge = (i) => this.options.sizing === "equal-area" ? Math.sqrt(hole ** 2 + (radius ** 2 - hole ** 2) * i / count) : hole + (radius - hole) * i / count;
+		return Array.from({ length: count }, (_, i) => [edge(i), edge(i + 1)]);
+	}
+	rings(radius) {
+		const { category, value, sort, sweep, mode } = this.options;
+		const slicer = (shares, from, to) => pie().value((share) => share.value).sort(null).startAngle(from).endAngle(to)(shares);
+		if (mode === "hierarchy") {
+			const parents = slicer(ShareData.collect(this.rows(), category, value, sort), 0, TAU);
+			const bands = this.radii(2, radius);
+			const outer = parents.flatMap((parent) => {
+				const rows = this.rows().filter((row) => String(row[category] ?? "Unknown") === parent.data.name);
+				return slicer(ShareData.collect(rows, this.options.series, value, sort), parent.startAngle, parent.endAngle).map((slice, i, all) => ({
+					...slice,
+					parent,
+					i,
+					count: all.length
+				}));
+			});
+			return [{
+				name: "Categories",
+				slices: parents,
+				inner: bands[0][0],
+				outer: bands[0][1]
+			}, {
+				name: "Parts",
+				slices: outer,
+				inner: bands[1][0],
+				outer: bands[1][1]
+			}];
+		}
+		const names = this.seriesNames().slice(0, 5);
+		const rings = names.map((name) => ({
+			name,
+			shares: ShareData.collect(this.part(name), category, value, sort)
+		}));
+		const totals = rings.map((ring) => ring.shares.reduce((total, share) => total + share.value, 0));
+		const biggest = Math.max(...totals, 1);
+		const bands = this.radii(names.length, radius);
+		return rings.map((ring, i) => {
+			const end = sweep === "full-circle" ? TAU : sweep === "open-quarter" ? OPEN : OPEN * totals[i] / biggest;
+			return {
+				name: ring.name,
+				slices: slicer(ring.shares, 0, end),
+				inner: bands[i][0],
+				outer: bands[i][1]
+			};
+		});
+	}
+	drawRadial(ctx, { radius }) {
+		const { category, value, sort, mode, sweep, values } = this.options;
+		const parents = ShareData.collect(this.rows(), category, value, sort);
+		ShareData.register(ctx, parents);
+		if (ShareData.noData(ctx, !parents.length, 0, 0)) return;
+		const rings = this.rings(radius);
+		const tint = (slice) => {
+			const child = slice;
+			if (!child.parent) return ShareData.fill(ctx, slice.data);
+			return interpolateRgb(ShareData.fill(ctx, child.parent.data), ctx.theme.surface)(.12 + .55 * child.i / Math.max(1, child.count - 1 || 1));
+		};
+		const segments = rings.flatMap((ring) => ring.slices.map((slice) => ({
+			ring,
+			slice,
+			shape: ShareData.arcs(() => ring.inner + 1, () => ring.outer - 1, ring.outer, 2)
+		})));
+		const key = (d) => `${d.ring.name}/${d.slice.parent?.data.name ?? ""}/${d.slice.data.name}`;
+		const paths = ctx.marks("segments", "path", segments, key).attr("fill", (d) => tint(d.slice));
+		ctx.set(paths, { d: (d) => d.shape(d.slice) ?? "" }, { d: (d) => d.shape({
+			...d.slice,
+			endAngle: d.slice.startAngle
+		}) ?? "" }, 10);
+		ctx.hover(paths, (d) => ({
+			title: mode === "rings" ? `${d.slice.data.name} · ${d.ring.name}` : d.slice.data.name,
+			color: tint(d.slice),
+			rows: [[value, d.slice.data.value], ["Share", ShareData.percent(d.slice.data.fraction)]]
+		}));
+		const labels = (values ? segments : []).flatMap((d) => {
+			const at = (d.ring.inner + d.ring.outer) / 2, angle = (d.slice.startAngle + d.slice.endAngle) / 2;
+			const text = ShareData.percent(d.slice.data.fraction);
+			const room = Math.min(d.ring.outer - d.ring.inner - 2, (d.slice.endAngle - d.slice.startAngle) * at);
+			if (Math.hypot(ShareData.width(text, 10), 11) > room * 1.05) return [];
+			return [{
+				key: key(d),
+				text,
+				x: Math.sin(angle) * at,
+				y: -Math.cos(angle) * at,
+				fill: ShareData.ink(ctx, tint(d.slice))
+			}];
+		});
+		const percent = ctx.text(ctx.marks("values", "text", labels, (d) => d.key), 10).attr("fill", (d) => d.fill).attr("text-anchor", "middle").attr("pointer-events", "none").text((d) => d.text);
+		ctx.set(percent, {
+			x: (d) => d.x,
+			y: (d) => d.y + 3.5
+		});
+		const named = mode === "rings" && sweep !== "full-circle" ? rings : [];
+		const names = ctx.text(ctx.marks("ring-names", "text", named, (d) => d.name), 10.5).attr("text-anchor", "end").text((d) => ShareData.fit(d.name, radius));
+		ctx.set(names, {
+			x: -6,
+			y: (d) => -(d.inner + d.outer) / 2 + 3.5
+		});
+	}
+};
+export { NestedDonut, NestedMode, RingSizing, RingSweep };