@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/flow/FlowPathKit.js

@@ -0,0 +1,114 @@
+import { Orientation } from "../../core/enums.js";
+import { FlowRibbon, FlowRouter } from "./flowEnums.js";
+// src/charts/flow/FlowPathKit.ts
+var round = (value) => Math.round(value * 100) / 100;
+var at = ([x, y]) => `${round(x)},${round(y)}`;
+/** Path builders shared by the flow charts. Everything is written in flow space, then projected. */
+var FlowGeometry = class {
+	static project(orientation = Orientation.Horizontal) {
+		return orientation === Orientation.Vertical ? (u, v) => [v, u] : (u, v) => [u, v];
+	}
+	/** Filled band joining two edges. */
+	static ribbon(a, b, form, to) {
+		const span = b.u - a.u;
+		const side = (from, end, start, finish) => {
+			if (form === FlowRibbon.Angular) return `L${at(to(finish, end))}`;
+			if (form === FlowRibbon.Shoulder) return `L${at(to(start + (finish - start) * .3, from))}L${at(to(start + (finish - start) * .7, end))}L${at(to(finish, end))}`;
+			const mid = (start + finish) / 2;
+			return `C${at(to(mid, from))} ${at(to(mid, end))} ${at(to(finish, end))}`;
+		};
+		return span === 0 ? `M${at(to(a.u, a.v0))}L${at(to(a.u, a.v1))}Z` : `M${at(to(a.u, a.v0))}${side(a.v0, b.v0, a.u, b.u)}L${at(to(b.u, b.v1))}${side(b.v1, a.v1, b.u, a.u)}Z`;
+	}
+	/** Closed polygon. */
+	static polygon(points) {
+		return points.length ? `M${points.map(at).join("L")}Z` : "";
+	}
+	/** Open polyline. */
+	static polyline(points) {
+		return points.length ? `M${points.map(at).join("L")}` : "";
+	}
+	/** Polyline with its corners rounded to `radius`. */
+	static rounded(points, radius) {
+		const stops = points.filter((point, i) => i === 0 || Math.hypot(point[0] - points[i - 1][0], point[1] - points[i - 1][1]) > .01);
+		if (stops.length < 3) return this.polyline(stops);
+		let path = `M${at(stops[0])}`;
+		for (let i = 1; i < stops.length - 1; i++) {
+			const [before, corner, after] = [
+				stops[i - 1],
+				stops[i],
+				stops[i + 1]
+			];
+			const toward = (target) => {
+				const length = Math.hypot(target[0] - corner[0], target[1] - corner[1]);
+				const step = Math.min(radius, length / 2) / length;
+				return [corner[0] + (target[0] - corner[0]) * step, corner[1] + (target[1] - corner[1]) * step];
+			};
+			path += `L${at(toward(before))}Q${at(corner)} ${at(toward(after))}`;
+		}
+		return `${path}L${at(stops[stops.length - 1])}`;
+	}
+	/** Connector through flow-space stops, leaving and entering each along the flow. */
+	static route(stops, router, to, radius = 6) {
+		if (router === FlowRouter.Straight) return this.polyline(stops.map(([u, v]) => to(u, v)));
+		if (router === FlowRouter.Orthogonal) return this.rounded(this.elbows(stops).map(([u, v]) => to(u, v)), radius);
+		return stops.slice(1).reduce((path, [u, v], i) => {
+			const [pu, pv] = stops[i];
+			const mid = (pu + u) / 2;
+			return `${path}C${at(to(mid, pv))} ${at(to(mid, v))} ${at(to(u, v))}`;
+		}, `M${at(to(...stops[0]))}`);
+	}
+	/** Inserts a jog halfway along every segment that changes lane. */
+	static elbows(stops) {
+		return stops.slice(1).reduce((all, [u, v], i) => {
+			const [pu, pv] = stops[i];
+			if (Math.abs(pv - v) < .5) return [...all, [u, v]];
+			const mid = (pu + u) / 2;
+			return [
+				...all,
+				[mid, pv],
+				[mid, v],
+				[u, v]
+			];
+		}, [stops[0]]);
+	}
+	/** Solid arrowhead with its tip at `tip`, pointing along `angle`. */
+	static arrow(tip, angle, size = 8) {
+		const wing = (turn) => [tip[0] - size * Math.cos(angle + turn), tip[1] - size * Math.sin(angle + turn)];
+		return this.polygon([
+			tip,
+			wing(.48),
+			wing(-.48)
+		]);
+	}
+	/** Samples a quadratic curve. */
+	static quadratic(from, control, to, steps = 24) {
+		return Array.from({ length: steps + 1 }, (_, i) => {
+			const t = i / steps, r = 1 - t;
+			return [r * r * from[0] + 2 * r * t * control[0] + t * t * to[0], r * r * from[1] + 2 * r * t * control[1] + t * t * to[1]];
+		});
+	}
+	/** Drops the part of a sampled curve that sits inside the circles around its two ends. */
+	static trim(points, start, end) {
+		const first = points[0], last = points[points.length - 1];
+		const kept = points.filter((p) => Math.hypot(p[0] - first[0], p[1] - first[1]) >= start && Math.hypot(p[0] - last[0], p[1] - last[1]) >= end);
+		return kept.length >= 2 ? kept : [...points];
+	}
+	/** Band along a sampled curve whose width moves from `from` at the start to `to` at the end. */
+	static taper(points, from, to) {
+		const left = [], right = [];
+		points.forEach((point, i) => {
+			const before = points[Math.max(0, i - 1)], after = points[Math.min(points.length - 1, i + 1)];
+			const angle = Math.atan2(after[1] - before[1], after[0] - before[0]) + Math.PI / 2;
+			const half = (from + (to - from) * (i / (points.length - 1))) / 2;
+			left.push([point[0] + half * Math.cos(angle), point[1] + half * Math.sin(angle)]);
+			right.push([point[0] - half * Math.cos(angle), point[1] - half * Math.sin(angle)]);
+		});
+		return this.polygon([...left, ...right.reverse()]);
+	}
+	/** Direction of travel at the end of a sampled curve. */
+	static heading(points) {
+		const a = points[points.length - 2], b = points[points.length - 1];
+		return Math.atan2(b[1] - a[1], b[0] - a[0]);
+	}
+};
+export { FlowGeometry };

package/dist/charts/flow/FlowSamples.js

@@ -0,0 +1,109 @@
+import { SampleData } from "../../data/SampleData.js";
+import { ascending, quantile } from "d3";
+// src/charts/flow/FlowSamples.ts
+var LANES = [
+	"North",
+	"South",
+	"East",
+	"West"
+];
+var title = (word) => word[0].toUpperCase() + word.slice(1);
+var tier = (values, labels) => {
+	const sorted = [...values].sort(ascending);
+	const cuts = labels.slice(1).map((_, i) => quantile(sorted, (i + 1) / labels.length));
+	return (value) => labels[cuts.filter((cut) => value > cut).length];
+};
+/** Reshapes `SampleData` into the forms flow charts read. */
+var FlowSamples = class {
+	/** Layered flow with readable names, grouped by lane, with one early exit and one late entry. */
+	static layered(seed, layers = 4, width = 4) {
+		const flow = SampleData.flow(seed, layers, width);
+		const lane = (id) => +id.split("-")[1];
+		const stage = (id) => +id.split("-")[0].slice(1);
+		const nodes = flow.nodes.map((node) => ({
+			...node,
+			label: `${LANES[lane(node.id) % LANES.length]} ${stage(node.id) + 1}`,
+			group: LANES[lane(node.id) % LANES.length]
+		}));
+		const exit = `L1-${Math.min(2, width - 1)}`, entry = `L${layers - 2}-${width - 1}`;
+		return {
+			nodes,
+			links: flow.links.filter((link) => link.source !== exit && link.target !== entry)
+		};
+	}
+	/** The layered flow, with feedback from later stages to earlier ones. */
+	static cyclic(seed) {
+		const flow = this.layered(seed, 4, 3);
+		return {
+			...flow,
+			links: [
+				...flow.links,
+				{
+					source: "L3-0",
+					target: "L1-0",
+					value: 14
+				},
+				{
+					source: "L2-1",
+					target: "L0-1",
+					value: 9
+				},
+				{
+					source: "L3-1",
+					target: "L3-1",
+					value: 6
+				}
+			]
+		};
+	}
+	/** Clusters of nodes that exchange flow, named from the sample vocabulary. */
+	static network(seed, count, groups) {
+		const words = SampleData.words(seed);
+		const graph = SampleData.graph(seed, count, groups);
+		const name = new Map(graph.nodes.map((node, i) => [node.id, title(String(words[i % words.length].text))]));
+		return {
+			nodes: graph.nodes.map((node) => ({
+				...node,
+				label: name.get(node.id)
+			})),
+			links: graph.links
+		};
+	}
+	/** A tree whose nodes are named from the sample vocabulary. */
+	static namedTree(seed) {
+		const words = SampleData.words(seed);
+		let next = 0;
+		const rename = (node) => ({
+			...node,
+			name: title(String(words[next++ % words.length].text)),
+			children: node.children?.map(rename)
+		});
+		return {
+			...rename(SampleData.tree(seed, 3, 3)),
+			name: "Start"
+		};
+	}
+	/** Categorical rows: one record per observation, weighted by `value`. */
+	static records(seed) {
+		const points = SampleData.points(seed, 240, 3);
+		const channel = tier(points.map((p) => +p.x), [
+			"Direct",
+			"Partner",
+			"Online"
+		]);
+		const plan = tier(points.map((p) => +p.y - +p.x * .8), [
+			"Basic",
+			"Plus",
+			"Pro"
+		]);
+		const outcome = tier(points.map((p) => +p.size), ["Lapsed", "Renewed"]);
+		return points.map((p) => ({
+			Segment: p.group,
+			Channel: channel(+p.x),
+			Plan: plan(+p.y - +p.x * .8),
+			Outcome: outcome(+p.size),
+			value: p.size
+		}));
+	}
+};
+export { FlowSamples };

package/dist/charts/flow/FlowTable.js

@@ -0,0 +1,57 @@
+import { FlowSort } from "./flowEnums.js";
+import { sum } from "d3";
+// src/charts/flow/FlowTable.ts
+var stamp = (cell) => cell instanceof Date ? +cell : cell;
+var short = (cell) => cell instanceof Date ? cell.toLocaleDateString("en", {
+	month: "short",
+	day: "numeric",
+	timeZone: "UTC"
+}) : String(cell ?? "");
+/** Reads long-form rows. Duplicate pairs sum, and non-numeric values count as 0. */
+var FlowTable = class {
+	static pivot(rows, x, series, value) {
+		const cells = /* @__PURE__ */ new Map();
+		const names = /* @__PURE__ */ new Set();
+		for (const row of rows ?? []) {
+			const cell = row?.[x];
+			if (cell === null || cell === void 0) continue;
+			const key = stamp(cell), name = String(row[series] ?? "Total");
+			if (!cells.has(key)) cells.set(key, {
+				cell,
+				values: /* @__PURE__ */ new Map()
+			});
+			const amount = Number(row[value]);
+			const values = cells.get(key).values;
+			names.add(name);
+			values.set(name, (values.get(name) ?? 0) + (Number.isFinite(amount) ? amount : 0));
+		}
+		const ordered = [...cells.values()];
+		if (ordered[0] && typeof ordered[0].cell !== "string") ordered.sort((a, b) => +a.cell - +b.cell);
+		return {
+			columns: ordered.map(({ cell }) => cell),
+			series: [...names],
+			labels: ordered.map(({ cell }) => short(cell)),
+			at: (column, name) => ordered[column]?.values.get(name) ?? 0,
+			total: (column) => sum([...ordered[column]?.values.values() ?? []])
+		};
+	}
+	/** Items in the requested order; `Input` keeps them as given. */
+	static sorted(items, sort, size, name = String) {
+		const list = [...items];
+		if (sort === FlowSort.Descending) list.sort((a, b) => size(b) - size(a));
+		if (sort === FlowSort.Ascending) list.sort((a, b) => size(a) - size(b));
+		if (sort === FlowSort.Alpha) list.sort((a, b) => name(a).localeCompare(name(b)));
+		return list;
+	}
+	/** Text that fits `room` px at `size` px type, or nothing. */
+	static fit(text, room, size = 11) {
+		const char = size * .565;
+		if (text.length * char <= room) return text;
+		const keep = Math.floor(room / char) - 1;
+		return keep >= 3 ? `${text.slice(0, keep)}…` : "";
+	}
+	static width(text, size = 11) {
+		return text.length * size * .565;
+	}
+};
+export { FlowTable };

package/dist/charts/flow/LayeredLayout.js

@@ -0,0 +1,106 @@
+import { mean } from "d3";
+// src/charts/flow/LayeredLayout.ts
+/** Sugiyama-style drawing: cycles reversed, longest-path ranks, barycentre ordering, aligned positions. */
+var LayeredLayout = class {
+	/** Rank of every node; edges closing a cycle do not push ranks. */
+	static ranks(graph) {
+		const forward = graph.acyclic().arcs.filter((arc) => arc.source !== arc.target);
+		const rank = new Map(graph.vertices.map(({ id }) => [id, 0]));
+		const waiting = new Map(graph.vertices.map(({ id }) => [id, 0]));
+		for (const arc of forward) waiting.set(arc.target, waiting.get(arc.target) + 1);
+		const queue = graph.vertices.map(({ id }) => id).filter((id) => waiting.get(id) === 0);
+		for (const id of queue) for (const arc of forward) {
+			if (arc.source !== id) continue;
+			rank.set(arc.target, Math.max(rank.get(arc.target), rank.get(id) + 1));
+			waiting.set(arc.target, waiting.get(arc.target) - 1);
+			if (waiting.get(arc.target) === 0) queue.push(arc.target);
+		}
+		return rank;
+	}
+	static place(graph, { extent, node, lane = node * .4 }, ranked = this.ranks(graph)) {
+		const ranks = Math.max(0, ...ranked.values()) + 1;
+		const rows = Array.from({ length: ranks }, () => []);
+		for (const { id } of graph.vertices) rows[ranked.get(id)].push(id);
+		const dummy = /* @__PURE__ */ new Set();
+		const up = /* @__PURE__ */ new Map(), down = /* @__PURE__ */ new Map();
+		const join = (a, b) => {
+			down.set(a, [...down.get(a) ?? [], b]);
+			up.set(b, [...up.get(b) ?? [], a]);
+		};
+		const chains = graph.arcs.map((arc, i) => {
+			const reversed = ranked.get(arc.source) > ranked.get(arc.target);
+			const [head, tail] = reversed ? [arc.target, arc.source] : [arc.source, arc.target];
+			const chain = [head];
+			for (let r = ranked.get(head) + 1; r < ranked.get(tail); r++) {
+				const id = `\u0000${i}:${r}`;
+				dummy.add(id);
+				rows[r].push(id);
+				chain.push(id);
+			}
+			if (head !== tail) chain.push(tail);
+			chain.slice(1).forEach((id, c) => join(chain[c], id));
+			return {
+				arc,
+				reversed,
+				chain
+			};
+		});
+		for (let sweep = 0; sweep < 12; sweep++) {
+			const downward = sweep % 2 === 0;
+			const order = new Map(rows.flatMap((row) => row.map((id, i) => [id, i])));
+			const neighbours = downward ? up : down;
+			const sequence = downward ? rows : [...rows].reverse();
+			for (const row of sequence) row.map((id, i) => ({
+				id,
+				score: mean(neighbours.get(id) ?? [], (other) => order.get(other)) ?? i
+			})).sort((a, b) => a.score - b.score).forEach(({ id }, i) => {
+				row[i] = id;
+				order.set(id, i);
+			});
+		}
+		const size = (id) => dummy.has(id) ? lane : node;
+		const demand = Math.max(1, ...rows.map((row) => row.reduce((total, id) => total + size(id), 0)));
+		const fit = Math.min(1, extent / demand);
+		const cross = /* @__PURE__ */ new Map();
+		for (const row of rows) {
+			let cursor = (extent - row.reduce((total, id) => total + size(id) * fit, 0)) / 2;
+			for (const id of row) {
+				cross.set(id, cursor + size(id) * fit / 2);
+				cursor += size(id) * fit;
+			}
+		}
+		for (let pass = 0; pass < 10; pass++) {
+			const neighbours = pass % 2 === 0 ? up : down;
+			for (const row of pass % 2 === 0 ? rows : [...rows].reverse()) {
+				const wanted = row.map((id) => mean(neighbours.get(id) ?? [], (other) => cross.get(other)) ?? cross.get(id));
+				const gap = (i) => (size(row[i]) + size(row[i - 1])) * fit / 2;
+				for (let i = 1; i < row.length; i++) wanted[i] = Math.max(wanted[i], wanted[i - 1] + gap(i));
+				const last = row.length - 1;
+				if (last >= 0) wanted[last] = Math.min(wanted[last], extent - size(row[last]) * fit / 2);
+				for (let i = last; i > 0; i--) wanted[i - 1] = Math.min(wanted[i - 1], wanted[i] - gap(i));
+				row.forEach((id, i) => cross.set(id, wanted[i]));
+			}
+		}
+		const real = rows.flat().filter((id) => !dummy.has(id)).map((id) => cross.get(id));
+		const shift = real.length ? (extent - Math.max(...real) - Math.min(...real)) / 2 : 0;
+		for (const [id, value] of cross) cross.set(id, value + shift);
+		const routes = chains.map(({ arc, reversed, chain }) => {
+			const stops = chain.map((id) => ({
+				rank: dummy.has(id) ? +id.split(":")[1] : ranked.get(id),
+				cross: cross.get(id)
+			}));
+			return {
+				arc,
+				reversed,
+				stops: reversed ? stops.reverse() : stops
+			};
+		});
+		return {
+			ranks,
+			rank: ranked,
+			cross: new Map([...cross].filter(([id]) => !dummy.has(id))),
+			routes
+		};
+	}
+};
+export { LayeredLayout };

package/dist/charts/flow/MarimekkoFlow.js

@@ -0,0 +1,199 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FlowChart } from "./FlowChart.js";
+import { FlowRibbon, FlowRouter, FlowSort } from "./flowEnums.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowTable } from "./FlowTable.js";
+// src/charts/flow/MarimekkoFlow.ts
+var MekkoConnector = /* @__PURE__ */ function(MekkoConnector) {
+	MekkoConnector["Ribbon"] = "ribbon";
+	MekkoConnector["Line"] = "line";
+	MekkoConnector["None"] = "none";
+	return MekkoConnector;
+}({});
+/** `Fixed` keeps one series order; `Ranked` re-sorts every column largest first. */
+var MekkoSeriesOrder = /* @__PURE__ */ function(MekkoSeriesOrder) {
+	MekkoSeriesOrder["Fixed"] = "fixed";
+	MekkoSeriesOrder["Ranked"] = "ranked";
+	MekkoSeriesOrder["BySize"] = "by-size";
+	return MekkoSeriesOrder;
+}({});
+/** Compare market shape across segments: column width is segment size, height is share, and connectors track each series between columns. */
+var MarimekkoFlow = class extends FlowChart {
+	static meta = {
+		id: "marimekko-flow",
+		name: "Marimekko flow",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "A mosaic whose column widths show totals and heights show shares, joined so each series reads across columns.",
+		tags: [
+			"mekko",
+			"mosaic",
+			"market map",
+			"share"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 4),
+		variants: {
+			connector: [
+				"ribbon",
+				"line",
+				"none"
+			],
+			ribbon: [
+				FlowRibbon.Curved,
+				FlowRibbon.Angular,
+				FlowRibbon.Shoulder
+			],
+			seriesOrder: [
+				"fixed",
+				"ranked",
+				"by-size"
+			],
+			columnOrder: [
+				FlowSort.Input,
+				FlowSort.Descending,
+				FlowSort.Ascending
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical]
+		},
+		valid: (v) => v.connector !== "none" || v.ribbon === FlowRibbon.Curved
+	};
+	defaults() {
+		return {
+			x: "category",
+			series: "series",
+			y: "value",
+			columnOrder: FlowSort.Input,
+			seriesOrder: "fixed",
+			connector: "ribbon",
+			ribbon: FlowRibbon.Curved,
+			orientation: Orientation.Horizontal,
+			gap: 26
+		};
+	}
+	plotMargin() {
+		return this.options.orientation === Orientation.Vertical ? {
+			top: 8,
+			right: 8,
+			bottom: 8,
+			left: 58
+		} : {
+			top: 8,
+			right: 8,
+			bottom: 26,
+			left: 8
+		};
+	}
+	draw(ctx) {
+		const { data, x, series, y, columnOrder, seriesOrder, connector, ribbon, orientation, gap } = this.options;
+		const vertical = orientation === Orientation.Vertical;
+		const to = FlowGeometry.project(orientation);
+		const [length, breadth] = vertical ? [ctx.plot.height, ctx.plot.width] : [ctx.plot.width, ctx.plot.height];
+		const table = FlowTable.pivot(data, x, series, y);
+		const size = (c) => table.series.reduce((sum, name) => sum + Math.max(0, table.at(c, name)), 0);
+		const order = FlowTable.sorted(table.columns.map((_, c) => c).filter((c) => size(c) > 0), columnOrder, size);
+		const grand = order.reduce((sum, c) => sum + size(c), 0) || 1;
+		const room = Math.max(10, length - gap * Math.max(0, order.length - 1));
+		const overall = (name) => table.columns.reduce((sum, _, c) => sum + Math.max(0, table.at(c, name)), 0);
+		const global = seriesOrder === "by-size" ? FlowTable.sorted(table.series, FlowSort.Descending, overall) : table.series;
+		let cursor = 0;
+		const columns = order.map((c, index) => {
+			const u0 = cursor, u1 = u0 + size(c) / grand * room;
+			cursor = u1 + gap;
+			const names = (seriesOrder === "ranked" ? FlowTable.sorted(global, FlowSort.Descending, (name) => table.at(c, name)) : global).filter((name) => table.at(c, name) > 0);
+			const free = breadth - 2 * Math.max(0, names.length - 1);
+			let v = 0;
+			const tiles = names.map((name) => {
+				const share = table.at(c, name) / size(c), v0 = v, v1 = v0 + share * free;
+				v = v1 + 2;
+				return {
+					column: table.labels[c],
+					series: name,
+					value: table.at(c, name),
+					share,
+					u0,
+					u1,
+					v0,
+					v1,
+					index
+				};
+			});
+			return {
+				label: table.labels[c],
+				u0,
+				u1,
+				tiles
+			};
+		});
+		const color = (name) => ctx.palette.color(name);
+		for (const name of table.series) color(name);
+		const links = connector === "none" ? [] : columns.slice(1).flatMap((column, i) => column.tiles.flatMap((tile) => {
+			const prior = columns[i].tiles.find((other) => other.series === tile.series);
+			return prior ? [{
+				key: `${tile.series}#${i}`,
+				a: prior,
+				b: tile
+			}] : [];
+		}));
+		const edge = (tile, side) => ({
+			u: tile[side],
+			v0: tile.v0,
+			v1: tile.v1
+		});
+		const tip = ({ a, b }) => ({
+			title: a.series,
+			color: color(a.series),
+			rows: [[a.column, `${(a.share * 100).toFixed(1)}%`], [b.column, `${(b.share * 100).toFixed(1)}%`]]
+		});
+		this.bands(ctx, "ribbons", connector === "ribbon" ? links.map((link) => ({
+			key: link.key,
+			from: color(link.a.series),
+			datum: link,
+			d: FlowGeometry.ribbon(edge(link.a, "u1"), edge(link.b, "u0"), ribbon, to)
+		})) : [], tip, .35);
+		const lines = ctx.marks("lines", "path", connector === "line" ? links : [], (d) => d.key).attr("fill", "none").attr("stroke", (d) => color(d.a.series)).attr("stroke-width", 2).attr("stroke-opacity", .75);
+		const middle = (tile) => (tile.v0 + tile.v1) / 2;
+		this.stroke(ctx, lines, (d) => FlowGeometry.route([[d.a.u1, middle(d.a)], [d.b.u0, middle(d.b)]], ribbon === FlowRibbon.Curved ? FlowRouter.Curved : ribbon === FlowRibbon.Angular ? FlowRouter.Straight : FlowRouter.Orthogonal, to));
+		const tiles = columns.flatMap((column) => column.tiles);
+		const shape = (d) => FlowGeometry.polygon([
+			to(d.u0, d.v0),
+			to(d.u1, d.v0),
+			to(d.u1, d.v1),
+			to(d.u0, d.v1)
+		]);
+		const marks = ctx.marks("tiles", "path", tiles, (d) => `${d.column}/${d.series}`).attr("fill", (d) => color(d.series));
+		ctx.set(marks, { d: shape }, { d: shape }, 5);
+		ctx.hover(marks, (d) => ({
+			title: d.column,
+			color: color(d.series),
+			rows: [[d.series, d.value], ["Share of column", `${(d.share * 100).toFixed(1)}%`]]
+		}));
+		this.ticks(ctx, "columns", columns.map((column) => vertical ? {
+			key: column.label,
+			x: -6,
+			y: (column.u0 + column.u1) / 2,
+			text: column.label,
+			anchor: "end"
+		} : {
+			key: column.label,
+			x: (column.u0 + column.u1) / 2,
+			y: 0,
+			text: FlowTable.fit(column.label, column.u1 - column.u0 + gap - 4),
+			anchor: "middle"
+		}), vertical ? "left" : "bottom");
+		this.labels(ctx, "shares", tiles.flatMap((tile) => {
+			const [x0, y0] = to(tile.u0, tile.v0), [x1, y1] = to(tile.u1, tile.v1);
+			const text = `${Math.round(tile.share * 100)}%`;
+			return Math.abs(x1 - x0) >= FlowTable.width(text) + 6 && Math.abs(y1 - y0) >= 15 ? [{
+				key: `${tile.column}/${tile.series}`,
+				x: (x0 + x1) / 2,
+				y: (y0 + y1) / 2,
+				text,
+				anchor: "middle",
+				fill: ctx.palette.inkOn(color(tile.series))
+			}] : [];
+		}));
+	}
+};
+export { MarimekkoFlow, MekkoConnector, MekkoSeriesOrder };

package/dist/charts/flow/MaxFlow.js

@@ -0,0 +1,76 @@
+// src/charts/flow/MaxFlow.ts
+var SOURCE = "\0source";
+var SINK = "\0sink";
+/** Edmonds-Karp maximum flow over a graph's arc values, treated as capacities. */
+var MaxFlow = class {
+	static solve(graph, entry, exit) {
+		const inbound = new Set(graph.arcs.map((arc) => arc.target)), outbound = new Set(graph.arcs.map((arc) => arc.source));
+		const known = (ids) => ids?.filter((id) => graph.vertices.some((vertex) => vertex.id === id));
+		const entries = known(entry) ?? graph.vertices.filter(({ id }) => !inbound.has(id) && outbound.has(id)).map(({ id }) => id);
+		const exits = known(exit) ?? graph.vertices.filter(({ id }) => !outbound.has(id) && inbound.has(id)).map(({ id }) => id);
+		const edges = /* @__PURE__ */ new Map();
+		const add = (from, to, capacity) => {
+			const forward = {
+				to,
+				capacity,
+				flow: 0,
+				reverse: null
+			}, back = {
+				to: from,
+				capacity: 0,
+				flow: 0,
+				reverse: forward
+			};
+			forward.reverse = back;
+			edges.set(from, [...edges.get(from) ?? [], forward]);
+			edges.set(to, [...edges.get(to) ?? [], back]);
+			return forward;
+		};
+		const owned = new Map(graph.arcs.filter((arc) => arc.source !== arc.target).map((arc) => [arc, add(arc.source, arc.target, arc.value)]));
+		for (const id of entries) add(SOURCE, id, Infinity);
+		for (const id of exits) add(id, SINK, Infinity);
+		const reach = () => {
+			const parent = /* @__PURE__ */ new Map([[SOURCE, null]]);
+			const queue = [SOURCE];
+			for (const id of queue) for (const edge of edges.get(id) ?? []) {
+				if (parent.has(edge.to) || edge.capacity - edge.flow <= 1e-9) continue;
+				parent.set(edge.to, edge);
+				queue.push(edge.to);
+			}
+			return parent;
+		};
+		let total = 0;
+		for (;;) {
+			const parent = reach();
+			if (!parent.has(SINK)) break;
+			let room = Infinity;
+			for (let edge = parent.get(SINK); edge;) {
+				room = Math.min(room, edge.capacity - edge.flow);
+				edge = parent.get(edge.reverse.to);
+			}
+			for (let edge = parent.get(SINK); edge;) {
+				edge.flow += room;
+				edge.reverse.flow -= room;
+				edge = parent.get(edge.reverse.to);
+			}
+			total += room;
+		}
+		const side = reach();
+		const flow = new Map([...owned].map(([arc, edge]) => [arc, Math.max(0, edge.flow)]));
+		const cut = new Set([...owned.keys()].filter((arc) => side.has(arc.source) && !side.has(arc.target)));
+		const through = /* @__PURE__ */ new Map();
+		for (const [arc, amount] of flow) {
+			through.set(arc.source, (through.get(arc.source) ?? 0) + amount);
+			if (exits.includes(arc.target)) through.set(arc.target, (through.get(arc.target) ?? 0) + amount);
+		}
+		return {
+			total: Number.isFinite(total) ? total : 0,
+			flow,
+			cut,
+			through,
+			entries,
+			exits
+		};
+	}
+};
+export { MaxFlow };