@mstone6969/graph 0.0.0-stage → 0.1.0

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 };

package/dist/charts/proportion/TreemapBar.js

@@ -0,0 +1,155 @@
+import { ChartFamily, DataShape, Dimension, Orientation } 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";
+import { hierarchy, treemap, treemapBinary, treemapDice, treemapSlice, treemapSquarify } from "d3";
+// src/charts/proportion/TreemapBar.ts
+/** How the bar is divided: one strip, or a compact treemap so thin parts stay legible. */
+var BarTile = /* @__PURE__ */ function(BarTile) {
+	BarTile["Strip"] = "strip";
+	BarTile["Squarify"] = "squarified";
+	BarTile["Binary"] = "binary-split";
+	return BarTile;
+}({});
+var BarThickness = /* @__PURE__ */ function(BarThickness) {
+	BarThickness["Slim"] = "slim";
+	BarThickness["Full"] = "full-bleed";
+	return BarThickness;
+}({});
+var BarLabel = /* @__PURE__ */ function(BarLabel) {
+	BarLabel["Inside"] = "inside";
+	BarLabel["Above"] = "bracketed";
+	BarLabel["None"] = "unlabelled";
+	return BarLabel;
+}({});
+var SLIM = 72;
+var BRACKET = 34;
+/** One whole in one bar: the compact part-to-whole mark for headers and tight tiles. */
+var TreemapBar = class extends ShareChart {
+	static meta = {
+		id: "treemap-bar",
+		name: "Treemap bar",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Packs every part of one whole into a single bar, as a strip or a compact treemap.",
+		tags: [
+			"stacked bar",
+			"100% bar",
+			"single bar",
+			"share bar"
+		],
+		sample: (seed) => SampleData.categories(seed, 7, 1),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			tile: [
+				"strip",
+				"squarified",
+				"binary-split"
+			],
+			thickness: ["slim", "full-bleed"],
+			labels: [
+				"inside",
+				"bracketed",
+				"unlabelled"
+			],
+			sort: [
+				ShareSort.Descending,
+				ShareSort.Data,
+				ShareSort.Ascending
+			]
+		},
+		valid: (values) => {
+			const strip = values.tile === "strip", slim = values.thickness === "slim", horizontal = values.orientation === Orientation.Horizontal;
+			if (values.labels === "bracketed") return strip && slim && horizontal;
+			return strip || !slim && horizontal;
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			orientation: Orientation.Horizontal,
+			tile: "strip",
+			thickness: "slim",
+			labels: "inside"
+		};
+	}
+	tiler() {
+		const { tile, orientation } = this.options;
+		if (tile === "squarified") return treemapSquarify;
+		if (tile === "binary-split") return treemapBinary;
+		return orientation === Orientation.Horizontal ? treemapDice : treemapSlice;
+	}
+	drawShares(ctx, shares) {
+		const { orientation, thickness, labels, value } = this.options;
+		const { width, height } = ctx.plot;
+		const horizontal = orientation === Orientation.Horizontal, slim = thickness === "slim";
+		const boxW = horizontal || !slim ? width : Math.min(width, 112), boxH = !horizontal || !slim ? height : Math.min(height, SLIM);
+		const originX = (width - boxW) / 2, originY = (height - boxH) / 2 + (labels === "bracketed" ? BRACKET / 2 : 0);
+		const root = hierarchy({ children: shares.map((share) => ({ share })) }).sum((d) => d.share?.value ?? 0);
+		const leaves = treemap().tile(this.tiler()).size([boxW, boxH]).paddingInner(2).round(false)(root).leaves();
+		const stage = ctx.nest(`translate(${originX},${originY})`, "bar");
+		const share = (d) => d.data.share;
+		const rects = stage.marks("cells", "rect", leaves, (d) => share(d).name, stage.root).attr("fill", (d) => ShareData.fill(ctx, share(d))).attr("rx", 4);
+		const round = (n) => +n.toFixed(2);
+		ctx.set(rects, {
+			x: (d) => round(d.x0),
+			y: (d) => round(d.y0),
+			width: (d) => round(Math.max(1, d.x1 - d.x0)),
+			height: (d) => round(Math.max(1, d.y1 - d.y0))
+		}, horizontal ? { width: 0 } : { height: 0 }, 30);
+		ctx.hover(rects, (d) => ({
+			title: share(d).name,
+			color: ShareData.fill(ctx, share(d)),
+			rows: [[value, share(d).value], ["Share", ShareData.percent(share(d).fraction)]]
+		}));
+		const inside = (labels === "inside" ? leaves : []).flatMap((d) => {
+			const wide = d.x1 - d.x0 - 10, tall = d.y1 - d.y0, percent = ShareData.percent(share(d).fraction);
+			if (ShareData.width(percent) > wide || tall < 16) return [];
+			const name = ShareData.fit(share(d).name, wide), lines = tall >= 32 && name ? [name, percent] : [percent];
+			return [{
+				key: share(d).name,
+				lines,
+				x: d.x0 + 6,
+				y: d.y0 + 15,
+				fill: ShareData.ink(ctx, ShareData.fill(ctx, share(d)))
+			}];
+		});
+		const written = stage.marks("inside", "text", inside, (d) => d.key, stage.root);
+		stage.text(written).attr("fill", (d) => d.fill).attr("pointer-events", "none");
+		written.selectAll("tspan").data((d) => d.lines.map((line, i, all) => ({
+			line,
+			x: d.x,
+			dy: i ? 14 : 0,
+			last: i === all.length - 1
+		}))).join("tspan").attr("x", (d) => d.x).attr("dy", (d) => d.dy).attr("font-weight", (d) => d.last ? 600 : 400).text((d) => d.line);
+		ctx.set(written, { y: (d) => d.y });
+		const above = labels === "bracketed" ? leaves : [];
+		const notes = ctx.nest(`translate(${originX},${originY})`, "notes");
+		let reach = -Infinity, upper = -Infinity;
+		const marks = above.flatMap((d) => {
+			const name = `${share(d).name} ${ShareData.percent(share(d).fraction)}`, x = d.x0;
+			const bump = x < reach ? -15 : 0;
+			if (bump && x < upper) return [];
+			const end = x + ShareData.width(name) + 8;
+			if (bump) upper = end;
+			else reach = end;
+			return [{
+				key: share(d).name,
+				x,
+				x1: d.x1,
+				y: -8 + bump,
+				text: x + ShareData.width(name) > boxW ? ShareData.fit(name, boxW - x) : name
+			}];
+		});
+		ctx.set(notes.marks("brackets", "path", marks, (d) => d.key, notes.root).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1), { d: (d) => `M${d.x.toFixed(1)},-2V${(d.y + 3).toFixed(1)}` });
+		const heads = notes.text(notes.marks("heads", "text", marks, (d) => d.key, notes.root)).text((d) => d.text);
+		ctx.set(heads, {
+			x: (d) => d.x + 3,
+			y: (d) => d.y
+		});
+	}
+};
+export { BarLabel, BarThickness, BarTile, TreemapBar };