prographs 0.12.0 → 0.13.0

package/dist/charts/strategycharts/BurnRunwayChart.js

@@ -0,0 +1,284 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { ZoomAxis } from "../../core/ChartViewport.js";
+import { BarFrame } from "../bars/BarFrame.js";
+import { FrameworkText } from "../frameworks/FrameworkText.js";
+import { StrategyPane } from "./StrategyPane.js";
+import { StrategyRows } from "./StrategyRows.js";
+import { StrategySamples } from "./StrategySamples.js";
+import { StrategyWords } from "./StrategyWords.js";
+import { area, line, max, mean, min, range, scaleBand, scaleLinear } from "d3";
+// src/charts/strategycharts/BurnRunwayChart.ts
+/** The balance as a filled area, or as a line with a dot on each month. */
+var BurnRunwayBalance = /* @__PURE__ */ function(BurnRunwayBalance) {
+	BurnRunwayBalance["Area"] = "area";
+	BurnRunwayBalance["Line"] = "line";
+	return BurnRunwayBalance;
+}({});
+/** Net burn in a pane of its own under the balance, or as bars on the balance's own scale. */
+var BurnRunwayLayout = /* @__PURE__ */ function(BurnRunwayLayout) {
+	BurnRunwayLayout["Panels"] = "panels";
+	BurnRunwayLayout["Overlay"] = "overlay";
+	return BurnRunwayLayout;
+}({});
+var CASH = "Cash balance";
+var BURN = "Net burn";
+var SHARE = .64;
+var PANE_GAP = 18;
+var THICK = 28;
+var TICK = 42;
+var MONTH = new Intl.DateTimeFormat("en", {
+	month: "short",
+	year: "2-digit"
+});
+var figure = (value) => value.toLocaleString("en", { maximumFractionDigits: 1 });
+var lasting = (value) => `${figure(value)} ${figure(value) === "1" ? "month" : "months"}`;
+/**
+* Cash balance by month with the net burn behind it, and the balance carried on at the recent burn rate to the month
+* it would reach zero. Use it to read runway off recorded figures. The projection is arithmetic on the rows given,
+* a straight line at the mean burn of the latest months, and not a forecast of what will be spent or raised.
+*/
+var BurnRunwayChart = class BurnRunwayChart extends CartesianChart {
+	static meta = {
+		id: "burn-runway",
+		name: "Burn and runway chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots month-end cash and monthly net burn, then extends the balance as a dashed line at the mean burn of the latest months to where it reaches zero.",
+		tags: [
+			"cash",
+			"burn rate",
+			"runway",
+			"start-up",
+			"projection",
+			"finance"
+		],
+		sample: (seed) => StrategySamples.burn(seed),
+		variants: {
+			balanceMark: ["area", "line"],
+			layout: ["panels", "overlay"],
+			window: [3, 6]
+		}
+	};
+	/** Months until `balance` reaches zero at `rate` a month: 0 when it already has, null when the rate is not a burn. */
+	static runway(balance, rate) {
+		if (balance <= 0) return 0;
+		return rate !== null && rate > 0 ? balance / rate : null;
+	}
+	static #date(cell) {
+		if (cell instanceof Date) return Number.isNaN(+cell) ? null : cell;
+		const parts = /^(\d{4})-(\d{1,2})(?:-\d{1,2})?$/.exec(String(cell ?? "").trim());
+		return parts && +parts[2] >= 1 && +parts[2] <= 12 ? new Date(+parts[1], +parts[2] - 1, 1) : null;
+	}
+	/** `high` rounded up to a tick, leaving the low end of the axis where the data puts it: a month of net inflow should not open a whole step under zero. */
+	static #rounded(high, ticks) {
+		return high > 0 ? scaleLinear().domain([0, high]).nice(ticks).domain()[1] : high;
+	}
+	#every = 1;
+	#ticks = 6;
+	defaults() {
+		return {
+			month: "month",
+			balance: "balance",
+			burn: "burn",
+			balanceMark: "area",
+			layout: "panels",
+			window: 3
+		};
+	}
+	yTicks() {
+		return this.options.yTicks ?? this.#ticks;
+	}
+	/** The pane under the balance has its own scale, so only the months can zoom. */
+	zoomAxes() {
+		return ZoomAxis.X;
+	}
+	/** The recorded months in order, each with its net burn where one is stated or can be worked out. */
+	get months() {
+		const { month, balance, burn } = this.options;
+		let before = null;
+		return StrategyRows.of(this.options.data).flatMap((row, i) => {
+			const cash = StrategyRows.number(row[balance]);
+			if (cash === null) return [];
+			const date = BurnRunwayChart.#date(row[month]), fall = before === null ? null : before - cash;
+			before = cash;
+			return [{
+				label: date ? MONTH.format(date) : FrameworkText.clean(row[month]) || `${i + 1}`,
+				date,
+				balance: cash,
+				burn: StrategyRows.number(row[burn]) ?? fall
+			}];
+		});
+	}
+	get outlook() {
+		const recorded = this.months, last = recorded.at(-1), { window } = this.options;
+		const recent = recorded.slice(-(Number.isFinite(window) ? Math.max(1, Math.round(window)) : 3)).flatMap((month) => month.burn ?? []), rate = mean(recent) ?? null;
+		const runway = last ? BurnRunwayChart.runway(last.balance, rate) : null;
+		const reach = runway === null || rate === null ? 0 : Math.min(runway, Math.max(6, recorded.length * 2));
+		const ahead = reach > 0 ? [...range(0, Math.floor(reach) + 1), ...Number.isInteger(reach) ? [] : [reach]] : [];
+		return {
+			rate,
+			averaged: recent.length,
+			months: runway,
+			path: ahead.map((step) => ({
+				ahead: step,
+				balance: step === runway ? 0 : last.balance - rate * step
+			}))
+		};
+	}
+	/** A label per band: the recorded months, then the months of the projection. */
+	#labels(recorded, { path }) {
+		const from = recorded.at(-1)?.date;
+		return [...recorded.map((month) => month.label), ...range(1, Math.ceil(path.at(-1)?.ahead ?? 0) + 1).map((step) => from ? MONTH.format(new Date(from.getFullYear(), from.getMonth() + step, 1)) : `+${step}`)];
+	}
+	tickFormat(scale) {
+		if (!("bandwidth" in scale)) return super.tickFormat(scale);
+		const labels = this.#labels(this.months, this.outlook);
+		return (key) => +key % this.#every ? "" : FrameworkText.fit(labels[+key] ?? "", TICK * this.#every, 11);
+	}
+	#pane(height, recorded, rate) {
+		const burns = recorded.flatMap((month) => month.burn ?? []), low = Math.min(0, min(burns) ?? 0), high = Math.max(0, max(burns) ?? 0, rate ?? 0);
+		return scaleLinear([low, BurnRunwayChart.#rounded(high > low ? high : low + 1, 4)], [height, Math.round(height * SHARE) + PANE_GAP]);
+	}
+	scales(ctx) {
+		const recorded = this.months, outlook = this.outlook, overlay = this.options.layout === "overlay";
+		const x = scaleBand(this.#labels(recorded, outlook).map((_, i) => `${i}`), [0, ctx.plot.width]).paddingInner(.3).paddingOuter(.2);
+		this.#every = Math.max(1, Math.ceil(TICK / Math.max(1, x.step())));
+		const values = [...recorded.map((month) => month.balance), ...overlay ? recorded.flatMap((month) => month.burn ?? []) : []];
+		const low = Math.min(0, min(values) ?? 0), high = max(values) ?? 1, base = overlay ? ctx.plot.height : Math.round(ctx.plot.height * SHARE);
+		this.#ticks = Math.max(2, Math.min(6, Math.floor(base / 24)));
+		return {
+			x,
+			y: scaleLinear([low, BurnRunwayChart.#rounded(high > low ? high : low + 1, this.#ticks)], [base, 0])
+		};
+	}
+	plotMarks(ctx, { x, y }) {
+		const { balanceMark, layout } = this.options, { palette, theme, plot } = ctx;
+		const recorded = this.months, outlook = this.outlook, { rate, path } = outlook, labels = this.#labels(recorded, outlook);
+		const cash = palette.color(CASH), spend = palette.color(BURN), latest = recorded.length - 1;
+		const pane = layout === "overlay" ? y : this.#pane(plot.height, recorded, rate);
+		const centre = (index) => (x(`${Math.floor(index)}`) ?? 0) + x.bandwidth() / 2 + (index - Math.floor(index)) * x.step();
+		const told = (month) => ({
+			title: month.label,
+			rows: [[CASH, StrategyPane.compact(month.balance)], ...month.burn === null ? [] : [[BURN, StrategyPane.compact(month.burn)]]]
+		});
+		if (pane !== y) StrategyPane.axis(ctx, "burn", pane, 2, StrategyPane.compact);
+		const edge = path.length ? [centre(latest) + x.step() / 2] : [];
+		const divider = ctx.marks("axis-now", "line", edge).attr("stroke", theme.axis).attr("stroke-dasharray", "2 3");
+		ctx.set(divider, {
+			x1: (at) => at,
+			x2: (at) => at,
+			y1: 0,
+			y2: plot.height
+		});
+		const frame = new BarFrame(true, pane, x), thick = Math.min(x.bandwidth(), THICK);
+		const spent = recorded.flatMap((month, i) => month.burn === null ? [] : [{
+			key: `${i}`,
+			month,
+			burn: month.burn
+		}]);
+		const bars = ctx.marks("burn", "path", spent, (bar) => bar.key).attr("fill", spend);
+		ctx.set(bars, { d: (bar) => frame.bar(centre(+bar.key) - thick / 2, thick, 0, bar.burn, 3) }, { d: (bar) => frame.bar(centre(+bar.key) - thick / 2, thick, 0, 0, 0) }, 10);
+		ctx.hover(bars, (bar) => ({
+			...told(bar.month),
+			color: spend
+		}));
+		const averaged = rate === null ? [] : [{
+			from: centre(Math.max(0, recorded.length - outlook.averaged)) - x.step() / 2,
+			to: path.length ? centre(latest + path.at(-1).ahead) : centre(latest) + x.step() / 2
+		}];
+		const level = ctx.marks("burn-rate", "line", averaged).attr("stroke", spend).attr("stroke-width", 1.5).attr("stroke-dasharray", "5 4");
+		ctx.set(level, {
+			x1: (span) => span.from,
+			x2: (span) => span.to,
+			y1: pane(rate ?? 0),
+			y2: pane(rate ?? 0)
+		});
+		ctx.hover(level, () => ({
+			title: "Recent burn rate",
+			color: spend,
+			rows: [["Mean net burn", `${StrategyPane.compact(rate ?? 0)} a month`], ["Months averaged", outlook.averaged]]
+		}));
+		const past = recorded.map((month, i) => [centre(i), y(month.balance)]), ahead = path.map((step) => [centre(latest + step.ahead), y(step.balance)]);
+		const under = area().x((point) => point[0]).y0(y(0)).y1((point) => point[1]);
+		const filled = balanceMark === "area" ? [{
+			key: "recorded",
+			points: past,
+			opacity: .2
+		}, {
+			key: "projected",
+			points: ahead,
+			opacity: .08
+		}].filter((part) => part.points.length > 1) : [];
+		const fills = ctx.marks("balance-area", "path", filled, (part) => part.key).attr("fill", cash).attr("fill-opacity", (part) => part.opacity);
+		ctx.set(fills, { d: (part) => under(part.points) ?? "" });
+		const traced = ctx.marks("balance", "path", past.length > 1 ? [past] : []).attr("fill", "none").attr("stroke", cash).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(traced, { d: (points) => line()(points) ?? "" });
+		ctx.drawOn(traced);
+		ctx.hover(traced, () => ({
+			title: CASH,
+			color: cash,
+			rows: [["Latest", StrategyPane.compact(recorded[latest].balance)], ["Months recorded", recorded.length]]
+		}));
+		const runway = outlook.months === null ? "None at this rate" : lasting(outlook.months);
+		const dashed = ctx.marks("projection", "path", ahead.length > 1 ? [ahead] : []).attr("fill", "none").attr("stroke", cash).attr("stroke-width", 2).attr("stroke-dasharray", "6 4");
+		ctx.set(dashed, { d: (points) => line()(points) ?? "" });
+		ctx.hover(dashed, () => ({
+			title: "Balance at the recent burn rate",
+			color: cash,
+			rows: [["Burn rate", `${StrategyPane.compact(rate ?? 0)} a month`], ["Runway", runway]]
+		}));
+		const dotted = recorded.map((month, i) => ({
+			key: `${i}`,
+			month,
+			at: past[i]
+		})).filter((dot, i) => i === latest || balanceMark === "line" && x.step() >= 12);
+		const dots = ctx.marks("months", "circle", dotted, (dot) => dot.key).attr("fill", cash).attr("stroke", theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (dot) => dot.at[0],
+			cy: (dot) => dot.at[1],
+			r: 4
+		}, { r: 0 }, 10);
+		ctx.hover(dots, (dot) => ({
+			...told(dot.month),
+			color: cash
+		}));
+		const spentOut = path.length && path.at(-1).ahead === outlook.months ? [ahead.at(-1)] : [];
+		const end = ctx.marks("cash-out", "circle", spentOut).attr("fill", theme.surface).attr("stroke", cash).attr("stroke-width", 2);
+		ctx.set(end, {
+			cx: (point) => point[0],
+			cy: (point) => point[1],
+			r: 4.5
+		}, { r: 0 });
+		ctx.hover(end, () => ({
+			title: `Reaches zero in ${labels.at(-1)}`,
+			color: cash,
+			rows: [["Runway", runway], ["Burn rate", `${StrategyPane.compact(rate ?? 0)} a month`]]
+		}));
+		StrategyWords.draw(ctx, "notes", this.#notes(recorded, outlook, plot.width));
+	}
+	/** The runway in words: at the right over the projection, or at the left when there is none to draw. */
+	#notes(recorded, { rate, averaged, months: runway, path }, width) {
+		if (!recorded.length) return [];
+		const span = averaged === 1 ? "month" : `${averaged} months`, room = Math.min(width - 8, width * .6);
+		const rated = (lead, burn) => [
+			`, the mean of the last ${span}`,
+			` (${averaged}-month mean)`,
+			""
+		].map((tail) => `${lead} ${StrategyPane.compact(burn)} a month${tail}`).filter((text) => FrameworkText.width(text, 10.5) <= room).slice(0, 1);
+		return (path.length ? [`Runway ${lasting(runway)}`, ...rated("at", rate)] : runway === 0 ? ["Balance is at or below zero"] : rate === null ? ["No net burn recorded to project from"] : ["Cash is not falling at the recent rate", ...rated("net burn", rate)]).map((text, row) => ({
+			key: `note/${row}`,
+			text: FrameworkText.fit(text, width - 8, 11),
+			full: text,
+			x: path.length ? width - 2 : 4,
+			y: 7 + row * 14,
+			anchor: path.length ? "end" : "start",
+			size: row ? 10.5 : 11.5,
+			weight: row ? 400 : 600,
+			tone: row ? "secondary" : "ink",
+			halo: true
+		}));
+	}
+};
+export { BurnRunwayBalance, BurnRunwayChart, BurnRunwayLayout };

package/dist/charts/strategycharts/CapTableChart.js

@@ -0,0 +1,366 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { BarFrame } from "../bars/BarFrame.js";
+import { FrameworkText } from "../frameworks/FrameworkText.js";
+import { StrategyRows } from "./StrategyRows.js";
+import { StrategySamples } from "./StrategySamples.js";
+import { StrategyWords } from "./StrategyWords.js";
+import { max, scaleBand, scaleLinear, sum } from "d3";
+// src/charts/strategycharts/CapTableChart.ts
+/** Every round as a stacked bar, one round as a single bar, or one holder's ownership stepping from round to round. */
+var CapTableView = /* @__PURE__ */ function(CapTableView) {
+	CapTableView["Rounds"] = "rounds";
+	CapTableView["Single"] = "single-round";
+	CapTableView["Dilution"] = "dilution";
+	return CapTableView;
+}({});
+/** Bars as shares of the fully diluted total, or as share counts so the growing total shows. */
+var CapTableBasis = /* @__PURE__ */ function(CapTableBasis) {
+	CapTableBasis["Percent"] = "percent";
+	CapTableBasis["Shares"] = "shares";
+	return CapTableBasis;
+}({});
+var LATEST = "Latest";
+var SINGLE = 84;
+var SIZE = 10.5;
+var HEAD = 14;
+var figure = (value, digits = 1) => value.toLocaleString("en", { maximumFractionDigits: digits });
+var percent = (share, digits = 1) => `${figure(share * 100, digits)}%`;
+var points = (change) => `${change > 0 ? "+" : change < 0 ? "−" : ""}${figure(Math.abs(change) * 100)} pts`;
+var count = (shares) => Intl.NumberFormat("en", {
+	notation: "compact",
+	maximumFractionDigits: 1
+}).format(shares);
+/**
+* A capitalisation table across funding rounds: who holds what share of a company after each round, stacked to the
+* fully diluted total, with ribbons that narrow as new shares dilute the earlier holders. Use it to show how ownership
+* moved from round to round, how one round split, or how far one holder was diluted.
+*/
+var CapTableChart = class CapTableChart extends CartesianChart {
+	static meta = {
+		id: "cap-table",
+		name: "Cap table chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Stacks each holder's share of the fully diluted total for every funding round, with ribbons that show dilution from one round to the next.",
+		tags: [
+			"capitalisation table",
+			"ownership",
+			"dilution",
+			"funding rounds",
+			"equity",
+			"start-up"
+		],
+		sample: (seed) => StrategySamples.capTable(seed),
+		variants: {
+			view: [
+				"rounds",
+				"single-round",
+				"dilution"
+			],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			basis: ["percent", "shares"],
+			ribbons: [true, false]
+		},
+		/** One bar has no neighbour to join and the same proportions on either basis, and the waterfall is in points of ownership. */
+		valid: (values) => values.view === "rounds" || values.basis === "percent" && values.ribbons === true
+	};
+	/** The waterfall of `holder`'s ownership: its share after the first round it holds in, the change at each later round, and where it stands. */
+	static dilution(rounds, holder) {
+		const shares = rounds.map((round) => round.stakes.find((stake) => stake.holder === holder)?.share ?? 0), first = shares.findIndex((share) => share > 0);
+		if (first < 0) return [];
+		const steps = shares.slice(first).map((share, i) => ({
+			label: rounds[first + i].round,
+			from: i ? shares[first + i - 1] : 0,
+			to: share,
+			total: !i
+		}));
+		return steps.length > 1 ? [...steps, {
+			label: LATEST,
+			from: 0,
+			to: shares.at(-1),
+			total: true
+		}] : steps;
+	}
+	#room = 84;
+	defaults() {
+		return {
+			round: "round",
+			holder: "holder",
+			shares: "shares",
+			view: "rounds",
+			orientation: Orientation.Vertical,
+			basis: "percent",
+			ribbons: true
+		};
+	}
+	get #vertical() {
+		return this.options.orientation !== Orientation.Horizontal;
+	}
+	#ledger() {
+		const { round, holder, shares } = this.options;
+		const held = /* @__PURE__ */ new Map(), holders = /* @__PURE__ */ new Set();
+		for (const row of StrategyRows.of(this.options.data)) {
+			const name = FrameworkText.clean(row[round]), who = FrameworkText.clean(row[holder]), amount = StrategyRows.number(row[shares]);
+			if (!name || !who || amount === null || amount < 0) continue;
+			holders.add(who);
+			const stakes = held.get(name) ?? /* @__PURE__ */ new Map();
+			held.set(name, stakes.set(who, (stakes.get(who) ?? 0) + amount));
+		}
+		let earlier = null;
+		return {
+			rounds: [...held].map(([name, stakes]) => {
+				const total = sum(stakes.values()), before = earlier;
+				const listed = [...holders].filter((who) => stakes.get(who)).map((who) => ({
+					round: name,
+					holder: who,
+					shares: stakes.get(who),
+					share: stakes.get(who) / total,
+					before: before ? before.get(who) ?? 0 : null
+				}));
+				earlier = new Map(listed.map((stake) => [stake.holder, stake.share]));
+				return {
+					round: name,
+					total,
+					stakes: listed
+				};
+			}),
+			holders: [...holders]
+		};
+	}
+	/** Each round in order, with every holder's stake in it. */
+	get rounds() {
+		return this.#ledger().rounds;
+	}
+	/** What the view draws: the stacked slices of the rounds shown, or the steps of the followed holder's waterfall. */
+	#plan() {
+		const { view, basis, focusRound, focusHolder } = this.options, { rounds, holders } = this.#ledger();
+		const holder = holders.includes(focusHolder ?? "") ? focusHolder : holders[0] ?? "";
+		if (view === "dilution") return {
+			rounds,
+			holders,
+			holder,
+			shown: [],
+			slices: [],
+			steps: CapTableChart.dilution(rounds, holder).map((step, i) => ({
+				...step,
+				key: `${i}`
+			}))
+		};
+		const shown = view === "single-round" ? rounds.filter((round, i) => rounds.some((other) => other.round === focusRound) ? round.round === focusRound : i === rounds.length - 1) : rounds;
+		return {
+			rounds,
+			holders,
+			holder,
+			shown,
+			slices: shown.flatMap((round) => {
+				let at = 0;
+				return round.stakes.map((stake, i) => {
+					const from = at;
+					at += basis === "shares" ? stake.shares : stake.share * 100;
+					return {
+						key: `${stake.round}/${stake.holder}`,
+						stake,
+						from,
+						to: at,
+						outer: i === round.stakes.length - 1
+					};
+				});
+			}),
+			steps: []
+		};
+	}
+	get #stepped() {
+		return this.options.view === "dilution";
+	}
+	/** The followed holder is named over the waterfall, where a legend of one entry would not show. */
+	plotMargin() {
+		const base = super.plotMargin();
+		return {
+			...base,
+			top: base.top + (this.#stepped ? HEAD : 0)
+		};
+	}
+	legendItems() {
+		return this.#stepped ? [] : super.legendItems();
+	}
+	tickFormat(scale) {
+		if ("bandwidth" in scale) {
+			const steps = this.#stepped ? this.#plan().steps : null;
+			return (name) => FrameworkText.fit(steps ? steps[+name]?.label ?? "" : String(name), this.#room, 11);
+		}
+		return this.#stepped || this.options.basis !== "shares" ? (value) => `${figure(+value)}%` : super.tickFormat(scale);
+	}
+	scales(ctx) {
+		const { view, basis, ribbons } = this.options, vertical = this.#vertical, { width, height } = ctx.plot;
+		const { steps, shown } = this.#plan();
+		const names = this.#stepped ? steps.map((step) => step.key) : shown.map((round) => round.round);
+		const top = this.#stepped ? (max(steps, (step) => Math.max(step.from, step.to)) ?? 1) * 125 : basis === "shares" ? max(shown, (round) => round.total) || 1 : 100;
+		const band = scaleBand(names, [0, vertical ? width : height]).padding(view === "rounds" && ribbons ? .45 : .3);
+		const value = scaleLinear([0, top], vertical ? [height, 0] : [0, width]);
+		this.#room = vertical ? Math.max(12, band.step() - 6) : 84;
+		return vertical ? {
+			x: band,
+			y: value
+		} : {
+			x: value,
+			y: band
+		};
+	}
+	plotMarks(ctx, { x, y }) {
+		const { view, basis, ribbons } = this.options, { palette, theme, plot } = ctx;
+		const vertical = this.#vertical, frame = new BarFrame(vertical, vertical ? y : x, vertical ? x : y);
+		const { rounds, holders, holder, slices, steps } = this.#plan();
+		for (const name of holders) palette.color(name);
+		const thick = view === "single-round" ? Math.min(frame.thick, SINGLE) : frame.thick;
+		const at = (name) => (frame.band(name) ?? 0) + (frame.thick - thick) / 2;
+		const joins = view === "rounds" && ribbons ? slices.flatMap((left) => {
+			const next = rounds[rounds.findIndex((round) => round.round === left.stake.round) + 1];
+			const right = next && slices.find((slice) => slice.stake.round === next.round && slice.stake.holder === left.stake.holder);
+			return right ? [{
+				key: left.key,
+				holder: left.stake.holder,
+				left,
+				right
+			}] : [];
+		}) : [];
+		const ribbon = ({ left, right }) => {
+			const near = at(left.stake.round) + thick, far = at(right.stake.round);
+			return `M${frame.point(near, left.from)}L${frame.point(near, left.to)}L${frame.point(far, right.to)}L${frame.point(far, right.from)}Z`;
+		};
+		const bands = ctx.marks("ribbons", "path", joins, (join) => join.key).attr("fill", (join) => palette.color(join.holder)).attr("fill-opacity", .22);
+		ctx.set(bands, { d: ribbon });
+		ctx.hover(bands, ({ left, right }) => ({
+			title: left.stake.holder,
+			color: palette.color(left.stake.holder),
+			rows: [
+				[left.stake.round, percent(left.stake.share)],
+				[right.stake.round, percent(right.stake.share)],
+				["Change", points(right.stake.share - left.stake.share)]
+			]
+		}));
+		const bars = ctx.marks("stakes", "path", slices, (slice) => slice.key).attr("fill", (slice) => palette.color(slice.stake.holder));
+		const shape = (slice, to) => frame.bar(at(slice.stake.round), thick, slice.from, to, slice.outer ? 4 : 0, slice.from ? 2 : 0);
+		ctx.set(bars, { d: (slice) => shape(slice, slice.to) }, { d: (slice) => shape(slice, slice.from) }, 12);
+		ctx.hover(bars, ({ stake }) => ({
+			title: stake.holder,
+			color: palette.color(stake.holder),
+			rows: [
+				["Round", stake.round],
+				["Shares", stake.shares.toLocaleString("en")],
+				["Ownership", percent(stake.share, 2)],
+				...stake.before === null ? [] : [["Since last round", points(stake.share - stake.before)]]
+			]
+		}));
+		const words = slices.flatMap((slice) => {
+			const { stake } = slice, across = Math.abs(frame.value(slice.to) - frame.value(slice.from)), start = at(stake.round);
+			if (view === "single-round") return CapTableChart.#named(slice, frame, start, thick, across, plot);
+			const text = basis === "shares" ? count(stake.shares) : percent(stake.share, 0), wide = FrameworkText.width(text, SIZE) + 6;
+			if (vertical ? across < 14 || thick < wide : across < wide || thick < 14) return [];
+			const [px, py] = frame.point(start + thick / 2, (slice.from + slice.to) / 2);
+			return [{
+				key: slice.key,
+				text,
+				x: px,
+				y: py,
+				anchor: "middle",
+				size: SIZE,
+				weight: 600,
+				fill: palette.inkOn(palette.color(stake.holder))
+			}];
+		});
+		const fill = (step) => step.total ? palette.color(holder) : palette.diverging(step.to < step.from ? .9 : -.9);
+		const rules = steps.slice(0, -1).map((step, i) => ({
+			key: step.key,
+			...frame.rule(step.to * 100, at(step.key) + thick, at(steps[i + 1].key))
+		}));
+		const links = ctx.marks("connectors", "line", rules, (rule) => rule.key).attr("stroke", theme.axis).attr("stroke-width", 1);
+		ctx.set(links, {
+			x1: (rule) => rule.x1,
+			x2: (rule) => rule.x2,
+			y1: (rule) => rule.y1,
+			y2: (rule) => rule.y2
+		});
+		const falls = ctx.marks("steps", "path", steps, (step) => step.key).attr("fill", fill);
+		ctx.set(falls, { d: (step) => frame.bar(at(step.key), thick, step.from * 100, step.to * 100, 4) }, { d: (step) => frame.bar(at(step.key), thick, step.from * 100, step.from * 100, 0) }, 30);
+		ctx.hover(falls, (step) => ({
+			title: step.label,
+			color: fill(step),
+			rows: step.total ? [[holder, percent(step.to, 2)]] : [
+				["Before", percent(step.from, 2)],
+				["After", percent(step.to, 2)],
+				["Change", points(step.to - step.from)]
+			]
+		}));
+		words.push(...steps.flatMap((step) => {
+			const end = Math.max(step.from, step.to) * 100, room = vertical ? frame.band.step() - 4 : plot.width - frame.value(end) - 5;
+			const text = (step.total ? [percent(step.to), percent(step.to, 0)] : [points(step.to - step.from), points(step.to - step.from).replace(" pts", "")]).find((option) => FrameworkText.width(option, SIZE) <= room);
+			if (!text) return [];
+			const [px, py] = frame.point(at(step.key) + thick / 2, end, vertical ? -9 : 5);
+			return [{
+				key: `step/${step.key}`,
+				text,
+				x: px,
+				y: py,
+				anchor: vertical ? "middle" : "start",
+				size: SIZE,
+				weight: step.total ? 600 : 400,
+				tone: "ink"
+			}];
+		}));
+		if (steps.length) words.push({
+			key: "followed",
+			text: FrameworkText.fit(`${holder}: ownership after each round`, plot.width, 11),
+			x: 0,
+			y: -11,
+			weight: 600,
+			tone: "ink"
+		});
+		StrategyWords.draw(ctx, "labels", words);
+	}
+	/** The single bar names each slice outside it: its share before a column and its holder after, or both under a bar. Slices too thin for a line of text go unnamed. */
+	static #named(slice, frame, start, thick, across, plot) {
+		const { stake } = slice, [px, py] = frame.point(start + thick, (slice.from + slice.to) / 2), share = percent(stake.share);
+		if (frame.vertical) {
+			const name = FrameworkText.fit(stake.holder, plot.width - px - 8, SIZE);
+			if (across < 13) return [];
+			return [...start - 8 >= FrameworkText.width(share, SIZE) ? [{
+				key: slice.key,
+				text: share,
+				x: start - 8,
+				y: py,
+				anchor: "end",
+				size: SIZE
+			}] : [], ...name.length >= 4 ? [{
+				key: `${slice.key}/name`,
+				text: name,
+				full: stake.holder,
+				x: px + 8,
+				y: py,
+				size: SIZE,
+				tone: "ink"
+			}] : []];
+		}
+		const name = FrameworkText.fit(stake.holder, across - 4, SIZE), named = name.length >= 4;
+		if (py + 28 > plot.height || FrameworkText.width(share, SIZE) > across - 4) return [];
+		return [...named ? [{
+			key: `${slice.key}/name`,
+			text: name,
+			full: stake.holder,
+			x: px,
+			y: py + 11,
+			anchor: "middle",
+			size: SIZE,
+			tone: "ink"
+		}] : [], {
+			key: slice.key,
+			text: share,
+			x: px,
+			y: py + (named ? 24 : 11),
+			anchor: "middle",
+			size: SIZE
+		}];
+	}
+};
+export { CapTableBasis, CapTableChart, CapTableView };