@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/radial/RadialGantt.js

@@ -0,0 +1,153 @@
+import { ChartFamily, DataShape } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar, TAU } from "./Polar.js";
+import { PolarBase, polarMeta } from "./PolarBase.js";
+import { PolarSpan, RadialGanttLayout, RadialGanttSort } from "./radialEnums.js";
+import { scaleLinear, scaleUtc, utcFormat } from "d3";
+// src/charts/radial/RadialGantt.ts
+var SWEEPS = {
+	[PolarSpan.Full]: TAU * .97,
+	[PolarSpan.Gauge]: TAU * .75,
+	[PolarSpan.Half]: Math.PI
+};
+var HOLE = .26;
+var stamp = utcFormat("%b %-d");
+/** A schedule on a dial: tasks as arcs against a circular time axis, for cyclic programmes and rotas. */
+var RadialGantt = class extends PolarBase {
+	static meta = {
+		...polarMeta,
+		family: ChartFamily.Project,
+		id: "radial-gantt",
+		name: "Radial Gantt chart",
+		shape: DataShape.Table,
+		description: "Draws tasks as arcs on rings around a time dial, compressing a long schedule into a single circle.",
+		tags: [
+			"schedule",
+			"timeline",
+			"project"
+		],
+		sample: (seed) => SampleData.tasks(seed, 14),
+		variants: {
+			layout: [RadialGanttLayout.Rows, RadialGanttLayout.Packed],
+			showProgress: [true, false],
+			sort: [
+				RadialGanttSort.Start,
+				RadialGanttSort.Group,
+				RadialGanttSort.Duration
+			],
+			span: [PolarSpan.Gauge, PolarSpan.Full]
+		}
+	};
+	defaults() {
+		return {
+			task: "task",
+			start: "start",
+			end: "end",
+			group: "group",
+			progress: "progress",
+			layout: RadialGanttLayout.Rows,
+			showProgress: true,
+			sort: RadialGanttSort.Start,
+			span: PolarSpan.Gauge
+		};
+	}
+	tasks() {
+		const { data, task, start, end, group, progress, sort } = this.options;
+		const clean = Polar.rows(data).flatMap((row, i) => {
+			const from = Polar.time(row[start]), to = Polar.time(row[end]);
+			if (from === null || to === null) return [];
+			return [{
+				name: String(row[task] ?? `Task ${i + 1}`),
+				start: Math.min(from, to),
+				end: Math.max(from, to),
+				group: String(row[group] ?? "Tasks"),
+				progress: Math.min(1, Math.max(0, Polar.number(row[progress]) ?? 0)),
+				lane: 0
+			}];
+		});
+		if (sort === RadialGanttSort.Start) clean.sort((a, b) => a.start - b.start);
+		if (sort === RadialGanttSort.Duration) clean.sort((a, b) => b.end - b.start - (a.end - a.start));
+		if (sort === RadialGanttSort.Group) clean.sort((a, b) => a.group.localeCompare(b.group) || a.start - b.start);
+		return clean;
+	}
+	/** First-fit lanes: a task goes on the innermost ring it does not overlap. */
+	pack(tasks) {
+		const packed = this.options.layout === RadialGanttLayout.Packed;
+		const ends = [];
+		tasks.forEach((task, i) => {
+			if (!packed) {
+				task.lane = i;
+				return;
+			}
+			const free = ends.findIndex((end) => end <= task.start);
+			task.lane = free < 0 ? ends.length : free;
+			ends[task.lane] = task.end;
+		});
+		return packed ? ends.length : tasks.length;
+	}
+	drawRadial(ctx, frame) {
+		const disc = this.disc(ctx, frame);
+		const { layout, showProgress, span } = this.options;
+		const tasks = this.tasks(), lanes = Math.max(1, this.pack(tasks));
+		if (!tasks.length) return;
+		Polar.rows(this.data).forEach((row) => ctx.palette.color(String(row[this.options.group] ?? "Tasks")));
+		const from = Math.min(...tasks.map((d) => d.start)), to = Math.max(...tasks.map((d) => d.end));
+		const sweep = SWEEPS[span];
+		const angle = scaleLinear([from, to > from ? to : from + 1], [0, sweep]);
+		const inner = disc.radius * HOLE, thick = (disc.radius - inner) / lanes;
+		const ticks = scaleUtc([from, to], [0, 1]).ticks(6).map(Number);
+		this.spokes(disc, ticks.map((tick) => angle(tick)), inner, disc.radius);
+		this.rimLabels(disc, ticks.map((tick) => ({
+			key: `${tick}`,
+			angle: angle(tick),
+			text: stamp(new Date(tick))
+		})), "rim-labels", "muted");
+		const ring = (d) => disc.radius - (d.lane + 1) * thick;
+		const wedges = tasks.flatMap((d) => {
+			const color = ctx.palette.color(d.group), a0 = angle(d.start), a1 = angle(d.end);
+			const days = Math.round((d.end - d.start) / 864e5);
+			const tip = {
+				title: d.name,
+				color,
+				rows: [
+					["Start", stamp(new Date(d.start))],
+					["End", stamp(new Date(d.end))],
+					["Days", days],
+					["Done", `${Math.round(d.progress * 100)}%`]
+				]
+			};
+			const base = {
+				key: d.name,
+				a0,
+				a1,
+				r0: ring(d) + 1,
+				r1: ring(d) + thick - 1,
+				fill: color,
+				sweep: true,
+				tip
+			};
+			if (!showProgress) return [base];
+			const middle = a0 + (a1 - a0) * d.progress;
+			return [{
+				...base,
+				a0: middle,
+				opacity: .32,
+				key: `${d.name}/rest`
+			}, ...d.progress ? [{
+				...base,
+				a1: middle,
+				key: `${d.name}/done`
+			}] : []];
+		});
+		this.wedges(disc, wedges, { stagger: 16 });
+		const named = span === PolarSpan.Gauge && layout === RadialGanttLayout.Rows && thick >= 12 ? tasks : [];
+		const names = ctx.marks("names", "text", named, (d) => d.name).attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3);
+		ctx.text(names, 11).attr("text-anchor", "end").attr("dy", ".35em").text((d) => Polar.fit(d.name, -disc.x0 - 8));
+		const at = {
+			x: -6,
+			y: (d) => -(ring(d) + thick / 2)
+		};
+		ctx.set(names, at, at);
+	}
+};
+export { RadialGantt };

package/dist/charts/radial/RadialHistogram.js

@@ -0,0 +1,179 @@
+import { CurveKind, DataShape, StackMode } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar, TAU } from "./Polar.js";
+import { PolarBase, polarMeta } from "./PolarBase.js";
+import { PolarSpan, RadialHistogramBinning, RadialHistogramMark } from "./radialEnums.js";
+import { bin, deviation, extent, lineRadial, max, quantile, scaleLinear, thresholdScott, thresholdSturges } from "d3";
+// src/charts/radial/RadialHistogram.ts
+var COUNTS = {
+	[RadialHistogramBinning.Sturges]: (values) => thresholdSturges(values),
+	[RadialHistogramBinning.Scott]: (values, low, high) => thresholdScott(values, low, high),
+	[RadialHistogramBinning.SquareRoot]: (values) => Math.ceil(Math.sqrt(values.length))
+};
+/** Exact equal-width edges: d3's own thresholds round to nice ticks, which merges neighbouring rules. */
+var evenly = (rule) => (values, low, high) => {
+	const count = Math.max(2, rule(values, low, high));
+	return Array.from({ length: count - 1 }, (_, i) => low + (high - low) * (i + 1) / count);
+};
+var HOLE = .16;
+var KDE_POINTS = 72;
+/** The distribution of a measure bent round a circle: compact, and natural when the measure itself is cyclic. */
+var RadialHistogram = class extends PolarBase {
+	static meta = {
+		...polarMeta,
+		id: "radial-histogram",
+		name: "Radial histogram",
+		shape: DataShape.Table,
+		description: "Bins a numeric column and maps each bin to a sector, so the shape of a distribution reads as a silhouette.",
+		tags: ["circular histogram", "distribution"],
+		sample: (seed) => SampleData.distribution(seed, 160, 3),
+		variants: {
+			binning: [
+				RadialHistogramBinning.Sturges,
+				RadialHistogramBinning.Scott,
+				RadialHistogramBinning.SquareRoot
+			],
+			mark: [
+				RadialHistogramMark.Wedge,
+				RadialHistogramMark.Rose,
+				RadialHistogramMark.Outline
+			],
+			stack: [StackMode.Stacked, StackMode.None],
+			density: [false, true],
+			span: [PolarSpan.Full, PolarSpan.Gauge]
+		}
+	};
+	defaults() {
+		return {
+			value: "value",
+			group: "group",
+			binning: RadialHistogramBinning.SquareRoot,
+			mark: RadialHistogramMark.Wedge,
+			stack: StackMode.Stacked,
+			density: false,
+			span: PolarSpan.Full
+		};
+	}
+	points() {
+		const { data, value, group } = this.options;
+		return Polar.rows(data).flatMap((row) => {
+			const v = Polar.number(row[value]);
+			return v === null ? [] : [{
+				value: v,
+				group: String(row[group] ?? "All")
+			}];
+		});
+	}
+	drawRadial(ctx, frame) {
+		const disc = this.dial(ctx, frame, this.options.span);
+		const { binning, mark, stack, density, span, value } = this.options;
+		const points = this.points(), groups = [...new Set(points.map((d) => d.group))];
+		const [low = 0, high = 1] = extent(points, (d) => d.value);
+		const bins = bin().value((d) => d.value).domain([low, high > low ? high : low + 1]).thresholds(evenly(COUNTS[binning]))(points);
+		const stacked = stack === StackMode.Stacked;
+		const [start, end] = span === PolarSpan.Full ? [0, TAU * .97] : Polar.span(span);
+		const domain = [bins[0]?.x0 ?? low, bins[bins.length - 1]?.x1 ?? high];
+		const angle = scaleLinear(domain, [start, end]);
+		const slices = bins.flatMap((b) => {
+			let cursor = 0;
+			return groups.map((group) => {
+				const count = b.filter((d) => d.group === group).length, slice = {
+					group,
+					x0: b.x0,
+					x1: b.x1,
+					count,
+					low: stacked ? cursor : 0,
+					high: stacked ? cursor + count : count
+				};
+				cursor += count;
+				return slice;
+			});
+		});
+		const { top, ticks } = Polar.magnitude(max(slices, (d) => d.high) ?? 1);
+		const inner = disc.radius * HOLE;
+		const radius = mark === RadialHistogramMark.Rose ? Polar.areaRadius(inner, disc.radius, top) : scaleLinear([0, top], [inner, disc.radius]);
+		this.rings(disc, ticks.map((tick) => ({
+			r: radius(tick),
+			text: `${tick}`
+		})), span === PolarSpan.Full ? {} : { sweep: [start, end] });
+		const axis = angle.ticks(6).filter((tick) => angle(tick) < TAU * .97);
+		this.spokes(disc, axis.map((tick) => angle(tick)), inner, disc.radius);
+		this.rimLabels(disc, axis.map((tick) => ({
+			key: `${tick}`,
+			angle: angle(tick),
+			text: Polar.label(tick)
+		})));
+		const outline = mark === RadialHistogramMark.Outline;
+		const tip = (d) => ({
+			title: `${Polar.label(d.x0)} – ${Polar.label(d.x1)}`,
+			color: ctx.palette.color(d.group),
+			rows: [[d.group, d.count]]
+		});
+		this.wedges(disc, outline ? [] : (stacked ? slices : [...slices].sort((a, b) => b.count - a.count)).flatMap((d) => !d.count ? [] : [{
+			key: `${d.x0}/${d.group}`,
+			a0: angle(d.x0),
+			a1: angle(d.x1),
+			r0: radius(d.low) + (d.low ? 1 : 0),
+			r1: radius(d.high) - (stacked ? 1 : 0),
+			fill: ctx.palette.color(d.group),
+			ring: !stacked,
+			tip: tip(d)
+		}]), { corner: 2 });
+		const contours = outline ? groups.map((group) => ({
+			group,
+			slices: slices.filter((d) => d.group === group)
+		})) : [];
+		const contour = (list) => list.reduce((path, d, i) => {
+			const r = radius(d.high), [x0, y0] = Polar.point(angle(d.x0), r), [x1, y1] = Polar.point(angle(d.x1), r);
+			return `${path}${i ? "L" : "M"}${x0},${y0}A${r},${r} 0 0 1 ${x1},${y1}`;
+		}, "");
+		const steps = ctx.marks("contours", "path", contours, (d) => d.group).attr("fill", "none").attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke", (d) => ctx.palette.color(d.group));
+		ctx.set(steps, { d: (d) => contour(d.slices) }, { d: (d) => contour(d.slices) });
+		ctx.drawOn(steps);
+		ctx.hover(steps, (d) => ({
+			title: d.group,
+			color: ctx.palette.color(d.group),
+			rows: [["Count", d.slices.reduce((sum, s) => sum + s.count, 0)]]
+		}));
+		const width = (domain[1] - domain[0]) / Math.max(1, bins.length);
+		this.densityLines(disc, density ? points : [], groups, stacked, width, angle, (count) => radius(Math.min(count, top)), domain, value);
+	}
+	/** Gaussian KDE per group, or of everything when stacked, expressed in counts per bin. */
+	densityLines(disc, points, groups, pooled, width, angle, radius, [from, to], label) {
+		const { ctx } = disc;
+		const sets = pooled ? [{
+			key: "density",
+			own: points,
+			stroke: ctx.theme.ink
+		}] : groups.map((group) => ({
+			key: group,
+			own: points.filter((d) => d.group === group),
+			stroke: ctx.palette.color(group)
+		}));
+		const curves = (points.length ? sets : []).map(({ key, own, stroke }) => {
+			const sorted = own.map((d) => d.value).sort((a, b) => a - b);
+			const spread = Math.min(deviation(sorted) ?? 1, ((quantile(sorted, .75) ?? 0) - (quantile(sorted, .25) ?? 0)) / 1.34 || 1);
+			const h = Math.max(1e-6, .9 * spread * own.length ** -.2), norm = 1 / (h * Math.sqrt(TAU));
+			return {
+				key,
+				line: Array.from({ length: KDE_POINTS }, (_, i) => {
+					const x = from + (to - from) * i / 71;
+					return {
+						x,
+						count: sorted.reduce((sum, v) => sum + norm * Math.exp(-.5 * ((x - v) / h) ** 2), 0) * width
+					};
+				}),
+				stroke
+			};
+		});
+		const shape = lineRadial().angle((d) => angle(d.x)).radius((d) => radius(d.count)).curve(Polar.curve(CurveKind.CatmullRom));
+		const lines = ctx.marks("density", "path", curves, (d) => d.key).attr("fill", "none").attr("stroke-width", 2).attr("stroke", (d) => d.stroke);
+		ctx.set(lines, { d: (d) => shape(d.line) }, { d: (d) => shape(d.line) });
+		ctx.drawOn(lines);
+		ctx.hover(lines, (d) => ({
+			title: `${label} density`,
+			rows: [["Peak", +(max(d.line, (p) => p.count) ?? 0).toFixed(1)]]
+		}));
+	}
+};
+export { RadialHistogram };

package/dist/charts/radial/RadialLineChart.js

@@ -0,0 +1,84 @@
+import { CurveKind, DataShape } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar } from "./Polar.js";
+import { polarMeta } from "./PolarBase.js";
+import { PolarLayout } from "./radialEnums.js";
+import { TemporalPolar } from "./TemporalPolar.js";
+import { lineRadial } from "d3";
+// src/charts/radial/RadialLineChart.ts
+/** A periodic series where the wrap-around is the point: one lap of a season, cycle or day. */
+var RadialLineChart = class extends TemporalPolar {
+	static meta = {
+		...polarMeta,
+		id: "radial-line",
+		name: "Radial line chart",
+		shape: DataShape.Table,
+		description: "Runs a time series once round a circle, so that the start and end of a cycle sit side by side.",
+		tags: ["polar line", "time series"],
+		sample: (seed) => SampleData.timeSeries(seed, 90, 3),
+		variants: {
+			curve: [
+				CurveKind.CatmullRom,
+				CurveKind.Linear,
+				CurveKind.Cardinal,
+				CurveKind.Basis
+			],
+			endpoints: [true, false],
+			fit: [true, false],
+			layout: [PolarLayout.Overlay, PolarLayout.Concentric]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			curve: CurveKind.CatmullRom,
+			endpoints: true,
+			fit: true,
+			layout: PolarLayout.Overlay
+		};
+	}
+	drawRadial(ctx, frame) {
+		const disc = this.disc(ctx, frame);
+		const { curve, endpoints, fit, layout } = this.options;
+		const line = this.timeline();
+		const hole = disc.radius * .2;
+		const lanes = this.lanes(line.tracks, hole, disc.radius, layout, !fit);
+		if (layout === PolarLayout.Overlay && lanes[0]) {
+			const { radius } = lanes[0];
+			this.rings(disc, Polar.ticks(radius).map((tick) => ({
+				r: radius(tick),
+				text: Polar.label(tick)
+			})));
+		} else this.rings(disc, lanes.map((lane) => ({
+			r: lane.radius(0) < lane.inner ? lane.inner : lane.radius(0),
+			text: lane.track.name
+		})), { labels: false });
+		this.timeAxis(disc, line, hole, disc.radius);
+		const path = (lane, flat) => lineRadial().defined((d) => d.value !== null).angle((d) => line.angle(d.t)).radius((d) => lane.radius(flat ? lane.radius.domain()[0] : d.value)).curve(Polar.curve(curve))(lane.track.points);
+		const paths = ctx.marks("lines", "path", lanes, (d) => d.track.name).attr("fill", "none").attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke", (d) => ctx.palette.color(d.track.name));
+		ctx.set(paths, { d: (d) => path(d, false) }, { d: (d) => path(d, false) });
+		ctx.drawOn(paths);
+		const ends = endpoints ? lanes.flatMap((lane) => {
+			const last = [...lane.track.points].reverse().find((point) => point.value !== null);
+			return last ? [{
+				name: lane.track.name,
+				...last,
+				at: Polar.point(line.angle(last.t), lane.radius(last.value))
+			}] : [];
+		}) : [];
+		const dots = ctx.marks("ends", "circle", ends, (d) => d.name).attr("fill", (d) => ctx.palette.color(d.name));
+		this.ringed(ctx, dots);
+		ctx.set(dots, {
+			cx: (d) => d.at[0],
+			cy: (d) => d.at[1],
+			r: 5
+		}, {
+			cx: (d) => d.at[0],
+			cy: (d) => d.at[1],
+			r: 0
+		});
+		this.laneLabels(disc, lanes);
+		this.timeHits(disc, line, hole, disc.radius);
+	}
+};
+export { RadialLineChart };

package/dist/charts/radial/RadialStackedArea.js

@@ -0,0 +1,89 @@
+import { CurveKind, DataShape } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar } from "./Polar.js";
+import { polarMeta } from "./PolarBase.js";
+import { RadialStackOffset, RadialStackOrder } from "./radialEnums.js";
+import { TemporalPolar } from "./TemporalPolar.js";
+import { areaRadial, max, min, scaleLinear, stack, stackOffsetExpand, stackOffsetNone, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAscending, stackOrderInsideOut, stackOrderNone } from "d3";
+// src/charts/radial/RadialStackedArea.ts
+var OFFSETS = {
+	[RadialStackOffset.None]: stackOffsetNone,
+	[RadialStackOffset.Expand]: stackOffsetExpand,
+	[RadialStackOffset.Silhouette]: stackOffsetSilhouette,
+	[RadialStackOffset.Wiggle]: stackOffsetWiggle
+};
+var ORDERS = {
+	[RadialStackOrder.Data]: stackOrderNone,
+	[RadialStackOrder.Ascending]: stackOrderAscending,
+	[RadialStackOrder.InsideOut]: stackOrderInsideOut
+};
+/** Composition round a cycle: stacked layers, a share-of-total ring, or a radial streamgraph. */
+var RadialStackedArea = class extends TemporalPolar {
+	static meta = {
+		...polarMeta,
+		id: "radial-stacked-area",
+		name: "Radial stacked area",
+		shape: DataShape.Table,
+		description: "Stacks series into bands round a ring, to show how a total and its mix change through a cycle.",
+		tags: ["radial streamgraph", "share of total"],
+		sample: (seed) => SampleData.timeSeries(seed, 60, 5),
+		variants: {
+			offset: [
+				RadialStackOffset.None,
+				RadialStackOffset.Expand,
+				RadialStackOffset.Silhouette,
+				RadialStackOffset.Wiggle
+			],
+			order: [
+				RadialStackOrder.Data,
+				RadialStackOrder.Ascending,
+				RadialStackOrder.InsideOut
+			],
+			curve: [
+				CurveKind.CatmullRom,
+				CurveKind.Linear,
+				CurveKind.Basis
+			],
+			hole: [.25, .45]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			offset: RadialStackOffset.None,
+			order: RadialStackOrder.Data,
+			curve: CurveKind.CatmullRom,
+			hole: .25
+		};
+	}
+	drawRadial(ctx, frame) {
+		const disc = this.disc(ctx, frame);
+		const { offset, order, curve, hole } = this.options;
+		const line = this.timeline();
+		const names = line.tracks.map((track) => track.name);
+		const lookup = new Map(line.tracks.map((track) => [track.name, new Map(track.points.map((point) => [point.t, point.value]))]));
+		const columns = line.times.map((t) => {
+			const column = { t };
+			for (const name of names) column[name] = Math.max(0, lookup.get(name)?.get(t) ?? 0);
+			return column;
+		});
+		const layers = stack().keys(names).offset(OFFSETS[offset]).order(ORDERS[order])(columns);
+		const low = min(layers, (layer) => min(layer, (d) => d[0])) ?? 0, high = max(layers, (layer) => max(layer, (d) => d[1])) ?? 1;
+		const inner = disc.radius * hole;
+		const radius = scaleLinear([low, high > low ? high : low + 1], [inner, disc.radius]);
+		const expand = offset === RadialStackOffset.Expand, flowing = !expand && offset !== RadialStackOffset.None;
+		if (!flowing) radius.nice();
+		this.rings(disc, Polar.ticks(radius).map((tick) => ({
+			r: radius(tick),
+			text: expand ? `${Math.round(tick * 100)}%` : Polar.label(tick)
+		})), { labels: !flowing });
+		this.timeAxis(disc, line, inner, disc.radius);
+		const angleOf = (d) => line.angle(d.data.t);
+		const area = areaRadial().angle(angleOf).innerRadius((d) => radius(d[0]) + 1).outerRadius((d) => Math.max(radius(d[0]) + 1, radius(d[1]) - 1)).curve(Polar.curve(curve));
+		const flat = areaRadial().angle(angleOf).innerRadius((d) => radius(d[0]) + 1).outerRadius((d) => radius(d[0]) + 1.5).curve(Polar.curve(curve));
+		const bands = ctx.marks("bands", "path", layers, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.key));
+		ctx.set(bands, { d: (d) => area(d) }, { d: (d) => flat(d) }, 40);
+		this.timeHits(disc, line, inner, disc.radius);
+	}
+};
+export { RadialStackedArea };

package/dist/charts/radial/RoseChart.js

@@ -0,0 +1,113 @@
+import { DataShape, StackMode } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar, TAU } from "./Polar.js";
+import { PolarBase, polarMeta } from "./PolarBase.js";
+import { PolarSort } from "./radialEnums.js";
+import { max } from "d3";
+// src/charts/radial/RoseChart.ts
+/** Nightingale rose: compare composition across categories arranged round a cycle. */
+var RoseChart = class extends PolarBase {
+	static meta = {
+		...polarMeta,
+		id: "rose",
+		name: "Nightingale rose chart",
+		shape: DataShape.Table,
+		description: "Splits equal-angle wedges by series so that the size and make-up of each category can be read together.",
+		tags: [
+			"nightingale",
+			"stacked",
+			"polar"
+		],
+		sample: (seed) => SampleData.categories(seed, 9, 3),
+		variants: {
+			stack: [
+				StackMode.Stacked,
+				StackMode.None,
+				StackMode.Normalized
+			],
+			hole: [
+				.12,
+				0,
+				.35
+			],
+			sort: [PolarSort.Data, PolarSort.Descending],
+			labels: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			stack: StackMode.Stacked,
+			hole: .12,
+			sort: PolarSort.Data,
+			labels: true
+		};
+	}
+	drawRadial(ctx, frame) {
+		const { category, series, value, stack, hole, sort, labels } = this.options;
+		const disc = this.disc(ctx, frame);
+		const pivot = Polar.pivot(this.data, category, series, value);
+		const amount = (c, s) => Math.max(0, pivot.at(c, s) ?? 0);
+		const total = (c) => pivot.series.reduce((sum, s) => sum + amount(c, s), 0);
+		const categories = Polar.sorted(pivot.categories, total, sort);
+		const step = TAU / Math.max(1, categories.length);
+		const inner = disc.radius * hole, normalized = stack === StackMode.Normalized, grouped = stack === StackMode.None;
+		const { top, ticks } = normalized ? {
+			top: 1,
+			ticks: [
+				.25,
+				.5,
+				.75,
+				1
+			]
+		} : Polar.magnitude((grouped ? max(pivot.values) : max(categories, total)) ?? 1);
+		const radius = Polar.areaRadius(inner, disc.radius, top);
+		this.rings(disc, ticks.map((tick) => ({
+			r: radius(tick),
+			text: normalized ? `${tick * 100}%` : Polar.label(tick)
+		})));
+		const wedges = categories.flatMap((c, i) => {
+			let cursor = 0;
+			const share = normalized ? total(c) || 1 : 1;
+			return pivot.series.map((s, slot) => {
+				const v = amount(c, s) / share, color = ctx.palette.color(s);
+				const base = {
+					key: `${c}/${s}`,
+					fill: color,
+					tip: {
+						title: c,
+						color,
+						rows: [[s, pivot.at(c, s) ?? 0]]
+					}
+				};
+				if (grouped) {
+					const width = step / pivot.series.length;
+					return {
+						...base,
+						a0: i * step + slot * width,
+						a1: i * step + (slot + 1) * width,
+						r0: inner,
+						r1: radius(v)
+					};
+				}
+				const r0 = radius(cursor) + (cursor ? 1 : 0);
+				cursor += v;
+				return {
+					...base,
+					a0: i * step,
+					a1: (i + 1) * step,
+					r0,
+					r1: radius(cursor) - 1
+				};
+			});
+		});
+		this.wedges(disc, wedges);
+		this.rimLabels(disc, labels ? categories.map((c, i) => ({
+			angle: (i + .5) * step,
+			text: c
+		})) : []);
+	}
+};
+export { RoseChart };