prographs 0.12.0 → 0.13.0

package/dist/charts/strategycharts/KanbanBoard.js

@@ -0,0 +1,324 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FrameworkText } from "../frameworks/FrameworkText.js";
+import { StrategyRows } from "./StrategyRows.js";
+import { StrategySamples } from "./StrategySamples.js";
+import { StrategyWords } from "./StrategyWords.js";
+import { max, sum, symbol, symbolTriangle } from "d3";
+// src/charts/strategycharts/KanbanBoard.ts
+/** Cards showing their title alone, or the title over who holds the card. */
+var KanbanCardDetail = /* @__PURE__ */ function(KanbanCardDetail) {
+	KanbanCardDetail["Title"] = "title";
+	KanbanCardDetail["Full"] = "full";
+	return KanbanCardDetail;
+}({});
+var GAP = 6;
+var HEAD = 20;
+var HEAD_LIMITS = 42;
+var METER = 21;
+var OVER = 33;
+var RAIL = 18;
+var PAD = 4;
+var CARD_GAP = 3;
+var INSET = 5;
+var EDGE = 4;
+var LEAD = 12;
+var SIZE = 10.5;
+/** Least height of a cell that can say how many cards it could not show. */
+var MORE = 11;
+var NARROWEST = 28;
+/**
+* A kanban board: a column for each stage of a workflow holding its task cards, with the work-in-progress limit of
+* each stage and a mark on the stages that hold more than their limit. Use it to show where work sits and where it
+* is piling up. Cards are one size across the board, so a fuller column is a taller stack.
+*/
+var KanbanBoard = class KanbanBoard extends Chart2D {
+	static meta = {
+		id: "kanban-board",
+		name: "Kanban board",
+		family: ChartFamily.Project,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Sets task cards in a column per workflow stage, with each stage's work-in-progress limit on a meter and breached stages marked.",
+		tags: [
+			"kanban",
+			"workflow",
+			"wip limit",
+			"task board",
+			"swimlanes",
+			"agile"
+		],
+		sample: (seed) => StrategySamples.kanban(seed),
+		variants: {
+			swimlanes: [false, true],
+			cardDetail: ["title", "full"],
+			limits: [true, false]
+		}
+	};
+	/** How many of `count` cards, each `card` px tall, stack in `room` px. */
+	static capacity(room, card, count) {
+		return Math.max(0, Math.min(count, Math.floor((room + CARD_GAP) / (card + CARD_GAP))));
+	}
+	defaults() {
+		return {
+			task: "task",
+			stage: "stage",
+			limit: "limit",
+			lane: "lane",
+			group: "kind",
+			owner: "owner",
+			swimlanes: false,
+			cardDetail: "title",
+			limits: true
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 12,
+			bottom: 8,
+			left: 12
+		};
+	}
+	/** The stages in workflow order with their cards and limits, and the lanes in the order first seen. */
+	get board() {
+		const { task, stage, limit, lane, group, owner } = this.options;
+		const stages = /* @__PURE__ */ new Map(), lanes = /* @__PURE__ */ new Set();
+		for (const row of StrategyRows.of(this.options.data)) {
+			const name = FrameworkText.clean(row[stage]), title = FrameworkText.clean(row[task]), cap = StrategyRows.number(row[limit]);
+			if (!name) continue;
+			const held = stages.get(name) ?? {
+				name,
+				limit: null,
+				cards: [],
+				over: 0
+			};
+			stages.set(name, held);
+			if (held.limit === null && cap !== null && cap >= 0) held.limit = cap;
+			if (!title) continue;
+			const card = {
+				task: title,
+				stage: name,
+				lane: FrameworkText.clean(row[lane]) || "No lane",
+				group: FrameworkText.clean(row[group]) || "Card",
+				owner: FrameworkText.clean(row[owner])
+			};
+			lanes.add(card.lane);
+			held.cards.push(card);
+		}
+		for (const held of stages.values()) held.over = held.limit === null ? 0 : Math.max(0, held.cards.length - held.limit);
+		return {
+			stages: [...stages.values()],
+			lanes: [...lanes]
+		};
+	}
+	/**
+	* The card height in use and the height of each lane. Cards take the tallest of `sizes` at which every lane holds its
+	* fullest stack, and lanes grow with their stacks. When no size fits, each lane is first given room for one card.
+	*/
+	static lanes(stacks, sizes, free) {
+		const need = (card) => stacks.map((stack) => Math.max(1, stack) * (card + CARD_GAP) - CARD_GAP + 8);
+		const card = sizes.find((size) => sum(need(size)) <= free) ?? sizes.at(-1) ?? 0, wanted = need(card), all = sum(wanted);
+		if (all <= free) return {
+			card,
+			heights: wanted.map((height) => free * height / all)
+		};
+		const least = Math.min(card + 8, free / Math.max(1, stacks.length)), spare = free - least * stacks.length, short = all - least * stacks.length;
+		return {
+			card,
+			heights: wanted.map((height) => least + (short > 0 ? spare * (height - least) / short : 0))
+		};
+	}
+	draw(ctx) {
+		const { swimlanes, cardDetail, limits } = this.options, { plot, theme, palette } = ctx;
+		const { stages, lanes } = this.board;
+		const rows = swimlanes && lanes.length ? lanes : [null];
+		const rail = rows[0] === null ? 0 : RAIL, head = limits ? HEAD_LIMITS : HEAD, full = cardDetail === "full";
+		const wide = Math.max(0, plot.width - rail - GAP * (stages.length - 1)) / Math.max(1, stages.length);
+		const held = (stage, lane) => stage.cards.filter((card) => lane === null || card.lane === lane);
+		const size = (lines) => 10 + lines * LEAD + (full ? LEAD : 0);
+		const { card: height, heights } = KanbanBoard.lanes(rows.map((lane) => max(stages, (stage) => held(stage, lane).length) ?? 0), [size(2), size(1)], Math.max(0, plot.height - head - GAP * (rows.length - 1)));
+		const tops = heights.map((_, j) => head + sum(heights.slice(0, j)) + GAP * j), lines = height === size(2) ? 2 : 1;
+		const cells = stages.flatMap((stage, i) => rows.map((lane, j) => ({
+			key: `${i}/${j}`,
+			stage,
+			lane,
+			x: rail + i * (wide + GAP),
+			y: tops[j],
+			width: wide,
+			height: heights[j],
+			cards: held(stage, lane)
+		})));
+		for (const stage of stages) for (const card of stage.cards) palette.color(card.group);
+		const breached = (stage) => !!limits && stage.over > 0;
+		const panels = ctx.marks("columns", "rect", cells, (cell) => cell.key).attr("rx", 4).attr("fill", (cell) => breached(cell.stage) ? theme.critical : theme.grid).attr("fill-opacity", (cell) => breached(cell.stage) ? .12 : .6);
+		ctx.set(panels, {
+			x: (cell) => cell.x,
+			y: (cell) => cell.y,
+			width: (cell) => cell.width,
+			height: (cell) => cell.height
+		});
+		ctx.hover(panels, ({ stage, lane, cards }) => ({
+			title: lane === null ? stage.name : `${stage.name}, ${lane}`,
+			rows: [
+				["Cards here", cards.length],
+				["Cards in stage", stage.cards.length],
+				["Limit", stage.limit ?? "None"],
+				...stage.over ? [["Over the limit by", stage.over]] : []
+			]
+		}));
+		const tally = (stage) => limits && stage.limit !== null ? `${stage.cards.length} / ${stage.limit}` : `${stage.cards.length}`;
+		const metered = limits ? stages.map((stage, i) => ({
+			stage,
+			x: rail + i * (wide + GAP) + 4,
+			width: Math.max(0, wide - 14 - FrameworkText.width(tally(stage), SIZE))
+		})).filter((meter) => meter.stage.limit !== null && meter.width >= 12) : [];
+		const tracks = ctx.marks("axis-limits", "rect", metered, (meter) => meter.stage.name).attr("rx", 2.5).attr("fill", theme.grid);
+		ctx.set(tracks, {
+			x: (meter) => meter.x,
+			y: 18.5,
+			width: (meter) => meter.width,
+			height: 5
+		});
+		const filled = ctx.marks("load", "rect", metered, (meter) => meter.stage.name).attr("rx", 2.5).attr("fill", (meter) => meter.stage.over ? theme.critical : theme.inkSecondary);
+		const load = ({ stage, width }) => width * (stage.limit ? Math.min(1, stage.cards.length / stage.limit) : stage.cards.length ? 1 : 0);
+		ctx.set(filled, {
+			x: (meter) => meter.x,
+			y: 18.5,
+			width: load,
+			height: 5
+		}, { width: 0 }, 30);
+		const flagged = limits ? stages.map((stage, i) => ({
+			stage,
+			x: rail + i * (wide + GAP) + 8
+		})).filter((flag) => flag.stage.over && wide >= 16) : [];
+		const flags = ctx.marks("breaches", "path", flagged, (flag) => flag.stage.name).attr("fill", theme.critical);
+		ctx.set(flags, {
+			d: symbol(symbolTriangle, 40)() ?? "",
+			transform: (flag) => `translate(${flag.x},${OVER})`
+		});
+		const across = wide - 8, room = across - EDGE - 9;
+		const words = [], more = [], hidden = /* @__PURE__ */ new Map();
+		const placed = across < NARROWEST ? [] : cells.flatMap((cell) => {
+			const inner = cell.height - 8, shown = KanbanBoard.capacity(inner, height, cell.cards.length), left = cell.x + PAD, rest = cell.cards.slice(shown);
+			const tag = rest.length ? `+${rest.length}` : "", taken = tag ? FrameworkText.width(tag, 9.5) + 5 : 0;
+			if (rest.length) hidden.set(cell.key, rest);
+			if (rest.length && !shown && inner >= MORE) more.push({
+				key: cell.key,
+				text: FrameworkText.fit(`${tag} more`, across, 9.5),
+				x: left + 2,
+				y: cell.y + cell.height / 2,
+				size: 9.5
+			});
+			return cell.cards.slice(0, shown).map((card, k) => {
+				const top = cell.y + PAD + k * (height + CARD_GAP), last = k === shown - 1 && !!tag, span = room - (last && !full ? taken : 0);
+				const text = lines > 1 ? FrameworkText.clamp(FrameworkText.wrap(card.task, span, SIZE), lines, span, SIZE) : [FrameworkText.fit(card.task, span, SIZE)];
+				if (full && card.owner) words.push({
+					key: `owner/${cell.key}/${k}`,
+					text: FrameworkText.fit(card.owner, room - (last ? taken : 0), 9.5),
+					full: card.owner,
+					x: left + EDGE + 5,
+					y: top + height - INSET - 5,
+					size: 9.5
+				});
+				if (last) more.push({
+					key: cell.key,
+					text: tag,
+					x: left + across - 4,
+					y: full ? top + height - INSET - 5 : top + INSET + (lines - 1) * LEAD + 5.5,
+					anchor: "end",
+					size: 9.5,
+					weight: 600
+				});
+				return {
+					key: `${cell.key}/${k}`,
+					card,
+					left,
+					top,
+					width: across,
+					height,
+					color: palette.color(card.group),
+					lines: text,
+					x: left + EDGE + 5,
+					y: top + INSET + 9,
+					lead: LEAD
+				};
+			});
+		});
+		const cards = ctx.marks("cards", "g", placed, (card) => card.key);
+		ctx.hover(cards, ({ card }) => FrameworkText.tip(card.task, [
+			["Stage", card.stage],
+			["Lane", card.lane],
+			["Kind", card.group],
+			...card.owner ? [["Owner", card.owner]] : []
+		], palette.color(card.group)));
+		const faces = cards.selectAll("rect.face").data((card) => [card]).join("rect").attr("class", "face").attr("rx", 3).attr("fill", theme.surface);
+		ctx.set(faces, {
+			x: (card) => card.left,
+			y: (card) => card.top,
+			width: (card) => card.width,
+			height: (card) => card.height
+		});
+		const edges = cards.selectAll("rect.kind").data((card) => [card]).join("rect").attr("class", "kind").attr("rx", 2).attr("fill", (card) => card.color);
+		ctx.set(edges, {
+			x: (card) => card.left,
+			y: (card) => card.top,
+			width: EDGE,
+			height: (card) => card.height
+		});
+		const titles = ctx.text(cards.selectAll("text").data((card) => [card]).join("text"), SIZE, "ink").attr("pointer-events", "none");
+		FrameworkText.write(ctx, titles);
+		const beside = (stage) => FrameworkText.width(tally(stage), SIZE) + 8;
+		const counted = stages.every((stage) => limits ? wide >= beside(stage) : FrameworkText.width(stage.name, 11) + beside(stage) + 8 <= wide);
+		for (const [i, stage] of stages.entries()) {
+			const left = rail + i * (wide + GAP), count = tally(stage);
+			if (counted) words.push({
+				key: `count/${i}`,
+				text: count,
+				x: left + wide - 4,
+				y: limits ? METER : 8,
+				anchor: "end",
+				size: SIZE,
+				weight: breached(stage) ? 600 : 400,
+				tone: breached(stage) ? "ink" : "secondary"
+			});
+			words.push({
+				key: `stage/${i}`,
+				text: FrameworkText.fit(stage.name, wide - 8, 11),
+				full: stage.name,
+				x: left + 4,
+				y: 8,
+				size: 11,
+				weight: 600,
+				tone: "ink"
+			});
+			const over = [`Over by ${stage.over}`, `+${stage.over}`].find((text) => FrameworkText.width(text, 10) <= wide - 18);
+			if (breached(stage) && over) words.push({
+				key: `over/${i}`,
+				text: over,
+				x: left + 15,
+				y: OVER,
+				size: 10,
+				weight: 600,
+				tone: "ink"
+			});
+		}
+		words.push(...rows.flatMap((lane, j) => lane === null ? [] : [{
+			key: `lane/${j}`,
+			text: FrameworkText.fit(lane, heights[j], SIZE),
+			full: lane,
+			x: RAIL / 2 - 3,
+			y: tops[j] + heights[j] / 2,
+			anchor: "middle",
+			size: SIZE,
+			weight: 600,
+			turned: true
+		}]));
+		StrategyWords.draw(ctx, "words", words);
+		ctx.hover(StrategyWords.draw(ctx, "more", more), (word) => ({
+			title: `${hidden.get(word.key)?.length ?? 0} more cards`,
+			rows: (hidden.get(word.key) ?? []).map((card) => [FrameworkText.fit(card.task, 260, 12), card.owner])
+		}));
+	}
+};
+export { KanbanBoard, KanbanCardDetail };

package/dist/charts/strategycharts/OkrTree.js

@@ -0,0 +1,339 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FrameworkText } from "../frameworks/FrameworkText.js";
+import { StrategyRows } from "./StrategyRows.js";
+import { StrategySamples } from "./StrategySamples.js";
+import { StrategyWords } from "./StrategyWords.js";
+import { max, mean, min, sum } from "d3";
+// src/charts/strategycharts/OkrTree.ts
+/** Objectives as nodes linked to their key results, or as an indented list with the bars in one column. */
+var OkrTreeLayout = /* @__PURE__ */ function(OkrTreeLayout) {
+	OkrTreeLayout["Tree"] = "tree";
+	OkrTreeLayout["List"] = "list";
+	return OkrTreeLayout;
+}({});
+/** How an objective is scored from its key results: their mean, or the weakest of them. */
+var OkrTreeRollup = /* @__PURE__ */ function(OkrTreeRollup) {
+	OkrTreeRollup["Mean"] = "mean";
+	OkrTreeRollup["Weakest"] = "weakest";
+	return OkrTreeRollup;
+}({});
+var BAR = 6;
+var GROUP = 10;
+var INDENT = 18;
+var SIZE = 10.5;
+var FIGURE = 30;
+var PIP = 34;
+var LEVELS = [
+	[
+		.7,
+		"On track",
+		"good"
+	],
+	[
+		.4,
+		"At risk",
+		"warning"
+	],
+	[
+		-Infinity,
+		"Off track",
+		"critical"
+	]
+];
+/**
+* Objectives and key results: each objective with its key results beneath, a progress bar on every key result, and
+* the objective scored by rolling its key results up. Use it to show how a quarter's goals stand and which key result
+* is holding an objective back.
+*/
+var OkrTree = class OkrTree extends Chart2D {
+	static meta = {
+		id: "okr-tree",
+		name: "OKR tree",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Lists objectives over their key results with a progress bar and confidence on each, and scores every objective from its key results.",
+		tags: [
+			"okr",
+			"objectives",
+			"key results",
+			"goals",
+			"progress",
+			"planning"
+		],
+		sample: (seed) => StrategySamples.okr(seed),
+		variants: {
+			layout: ["tree", "list"],
+			rollup: ["mean", "weakest"],
+			confidenceMarks: [true, false]
+		}
+	};
+	/** One score for several: their mean, or the lowest. Null when there are none. */
+	static rollup(values, how = "mean") {
+		return (how === "weakest" ? min(values) : mean(values)) ?? null;
+	}
+	/** What a confidence from 0 to 1 is called: on track from 0.7, at risk from 0.4, off track below. */
+	static status(confidence) {
+		return LEVELS.find(([floor]) => confidence >= floor)[1];
+	}
+	defaults() {
+		return {
+			objective: "objective",
+			keyResult: "keyResult",
+			progress: "progress",
+			confidence: "confidence",
+			layout: "tree",
+			rollup: "mean",
+			confidenceMarks: true
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 12,
+			bottom: 8,
+			left: 12
+		};
+	}
+	/** Every objective is named where it is drawn. */
+	legendItems() {
+		return [];
+	}
+	/** The objectives in order, each scored from its key results. */
+	get objectives() {
+		const { objective, keyResult, progress, confidence, rollup } = this.options, rows = StrategyRows.of(this.options.data);
+		const most = max(rows, (row) => StrategyRows.number(row[confidence]) ?? 0) ?? 0, unit = most <= 1 ? 1 : most <= 10 ? 10 : 100;
+		const held = /* @__PURE__ */ new Map();
+		for (const row of rows) {
+			const name = FrameworkText.clean(row[objective]), done = StrategyRows.number(row[progress]), sure = StrategyRows.number(row[confidence]);
+			if (!name || done === null) continue;
+			held.set(name, [...held.get(name) ?? [], {
+				name: FrameworkText.clean(row[keyResult]) || "Unnamed",
+				progress: StrategyRows.clamp(done, 0, 100),
+				confidence: sure === null ? null : StrategyRows.clamp(sure / unit, 0, 1)
+			}]);
+		}
+		return [...held].map(([name, keyResults]) => ({
+			name,
+			keyResults,
+			progress: OkrTree.rollup(keyResults.map((result) => result.progress), rollup) ?? 0,
+			confidence: OkrTree.rollup(keyResults.flatMap((result) => result.confidence ?? []), rollup)
+		}));
+	}
+	draw(ctx) {
+		const { theme } = ctx, parts = this.options.layout === "list" ? this.#list(ctx) : this.#tree(ctx);
+		const cards = ctx.marks("objectives", "rect", parts.cards, (card) => card.key).attr("rx", 4).attr("fill", (card) => card.color).attr("fill-opacity", .14);
+		ctx.set(cards, {
+			x: (card) => card.x,
+			y: (card) => card.y,
+			width: (card) => card.width,
+			height: (card) => card.height
+		});
+		const links = ctx.marks("links", "path", parts.links, (link) => link.key).attr("fill", "none").attr("stroke", theme.axis).attr("stroke-width", 1.5);
+		ctx.set(links, { d: (link) => link.d });
+		const guides = ctx.marks("axis-guides", "path", parts.guides, (guide) => guide.key).attr("fill", "none").attr("stroke", theme.axis);
+		ctx.set(guides, { d: (guide) => guide.d });
+		const meters = ctx.marks("meters", "g", parts.meters, (meter) => meter.key);
+		ctx.hover(meters, (meter) => meter.tip);
+		const tracks = meters.selectAll("rect.track").data((meter) => [meter]).join("rect").attr("class", "track").attr("rx", BAR / 2).attr("fill", theme.grid);
+		ctx.set(tracks, {
+			x: (meter) => meter.x,
+			y: (meter) => meter.y,
+			width: (meter) => meter.width,
+			height: BAR
+		});
+		const fills = meters.selectAll("rect.done").data((meter) => [meter]).join("rect").attr("class", "done").attr("rx", BAR / 2).attr("fill", (meter) => meter.color);
+		ctx.set(fills, {
+			x: (meter) => meter.x,
+			y: (meter) => meter.y,
+			width: (meter) => meter.width * meter.share,
+			height: BAR
+		}, { width: 0 }, 25);
+		const pips = ctx.marks("confidence", "circle", parts.pips, (pip) => pip.key).attr("fill", (pip) => pip.color).attr("stroke", theme.surface).attr("stroke-width", 2);
+		ctx.set(pips, {
+			cx: (pip) => pip.x,
+			cy: (pip) => pip.y,
+			r: 4.5
+		}, { r: 0 }, 15);
+		StrategyWords.draw(ctx, "words", parts.words);
+	}
+	/** Room after a bar for its percentage and, with confidence shown, its dot and figure. */
+	get #trail() {
+		return FIGURE + (this.options.confidenceMarks ? PIP : 0);
+	}
+	/** A bar from `x` across `width`, centred on `y`, with what follows it. */
+	#meter(ctx, parts, key, item, color, x, y, width, tip, bold) {
+		const { theme } = ctx, after = x + width + 6;
+		parts.meters.push({
+			key,
+			x,
+			y: y - BAR / 2,
+			width,
+			height: BAR,
+			share: item.progress / 100,
+			color,
+			tip
+		});
+		parts.words.push({
+			key: `done/${key}`,
+			text: `${Math.round(item.progress)}%`,
+			x: after,
+			y,
+			size: SIZE,
+			weight: bold ? 600 : 400,
+			tone: "ink"
+		});
+		if (!this.options.confidenceMarks || item.confidence === null) return;
+		const level = LEVELS.find(([floor]) => item.confidence >= floor);
+		parts.pips.push({
+			key,
+			x: after + FIGURE + 3,
+			y,
+			color: theme[level[2]]
+		});
+		parts.words.push({
+			key: `sure/${key}`,
+			text: item.confidence.toFixed(1),
+			x: after + FIGURE + 11,
+			y,
+			size: SIZE
+		});
+	}
+	#tips(objective, color) {
+		const sure = (item) => item.confidence === null ? [] : [["Confidence", `${item.confidence.toFixed(2)}, ${OkrTree.status(item.confidence).toLowerCase()}`]];
+		const how = this.options.rollup === "weakest" ? "weakest key result" : "mean of key results";
+		return {
+			own: FrameworkText.tip(objective.name, [
+				["Key results", objective.keyResults.length],
+				[`Progress, ${how}`, `${Math.round(objective.progress)}%`],
+				...sure(objective)
+			], color),
+			of: (result) => FrameworkText.tip(result.name, [["Progress", `${Math.round(result.progress)}%`], ...sure(result)], color)
+		};
+	}
+	/** The objectives and the height of a row: with their key results while a row gets `least` px, and alone, as a list, in a plot too short for that. */
+	#fitted(least, height) {
+		const all = this.objectives, bare = all.map((objective) => ({
+			...objective,
+			keyResults: []
+		}));
+		const rowOf = (list, units) => Math.max(0, height - GROUP * (list.length - 1)) / Math.max(1, sum(list, units));
+		const units = this.options.layout === "list" ? (objective) => objective.keyResults.length + 1 : (objective) => Math.max(1.4, objective.keyResults.length);
+		const row = rowOf(all, units);
+		return row >= least ? {
+			shown: all,
+			row
+		} : {
+			shown: bare,
+			row: rowOf(bare, units)
+		};
+	}
+	#tree(ctx) {
+		const { plot, palette } = ctx, parts = {
+			cards: [],
+			links: [],
+			guides: [],
+			meters: [],
+			pips: [],
+			words: []
+		};
+		const { shown, row: free } = this.#fitted(12, plot.height), row = Math.min(46, free), trail = this.#trail;
+		if (!shown.some((objective) => objective.keyResults.length)) return this.#list(ctx);
+		const left = Math.min(250, plot.width * .37), reach = Math.max(18, plot.width * .06), start = left + reach, across = Math.max(0, plot.width - start - trail - 6);
+		let top = 0;
+		shown.forEach((objective, i) => {
+			const color = palette.color(objective.name), tips = this.#tips(objective, color), tall = Math.max(1.4, objective.keyResults.length) * row;
+			const card = {
+				key: `${i}`,
+				color,
+				x: 0,
+				y: top + 2,
+				width: left,
+				height: Math.max(0, tall - 4)
+			}, middle = top + tall / 2, room = left - 16;
+			parts.cards.push(card);
+			const barred = card.height >= 20 && room - trail >= 24, lines = Math.floor((card.height - 8 - (barred ? 14 : 0)) / 13);
+			const name = FrameworkText.clamp(FrameworkText.wrap(objective.name, room, 11), Math.max(0, lines), room, 11), from = middle - (name.length * 13 + (barred ? 14 : 0)) / 2 + 6;
+			parts.words.push(...name.map((text, line) => ({
+				key: `objective/${i}/${line}`,
+				text,
+				full: objective.name,
+				x: 8,
+				y: from + line * 13,
+				size: 11,
+				weight: 600,
+				tone: "ink"
+			})));
+			if (barred) this.#meter(ctx, parts, `${i}`, objective, color, 8, from + name.length * 13 + 2, room - trail, tips.own, true);
+			const first = top + (tall - objective.keyResults.length * row) / 2;
+			objective.keyResults.forEach((result, k) => {
+				const centre = first + (k + .5) * row, over = row >= 25, beside = over ? 0 : Math.round(across * .5), key = `${i}/${k}`;
+				parts.links.push({
+					key,
+					d: `M${left},${middle}C${left + reach * .55},${middle} ${left + reach * .45},${centre} ${start - 4},${centre}`
+				});
+				parts.words.push({
+					key: `result/${key}`,
+					text: FrameworkText.fit(result.name, over ? plot.width - start : beside - 6, SIZE),
+					full: result.name,
+					x: start,
+					y: centre - (over ? 7 : 0),
+					size: SIZE,
+					tone: "ink"
+				});
+				this.#meter(ctx, parts, key, result, color, start + beside, centre + (over ? 7 : 0), across - beside, tips.of(result), false);
+			});
+			top += tall + GROUP;
+		});
+		return parts;
+	}
+	#list(ctx) {
+		const { plot, palette } = ctx, parts = {
+			cards: [],
+			links: [],
+			guides: [],
+			meters: [],
+			pips: [],
+			words: []
+		};
+		const { shown, row: free } = this.#fitted(13, plot.height), row = Math.min(32, free), trail = this.#trail;
+		const bar = Math.max(40, Math.min(220, plot.width * .3)), at = Math.max(0, plot.width - trail - 6 - bar), named = row >= 12;
+		let top = 0;
+		shown.forEach((objective, i) => {
+			const color = palette.color(objective.name), tips = this.#tips(objective, color), head = top + row / 2;
+			if (named) parts.words.push({
+				key: `objective/${i}`,
+				text: FrameworkText.fit(objective.name, at - 10, 11.5),
+				full: objective.name,
+				x: 0,
+				y: head,
+				size: 11.5,
+				weight: 600,
+				tone: "ink"
+			});
+			this.#meter(ctx, parts, `${i}`, objective, color, at, head, bar, tips.own, true);
+			const centres = objective.keyResults.map((_, k) => top + (k + 1.5) * row);
+			if (centres.length) parts.guides.push({
+				key: `${i}`,
+				d: `M6,${head + Math.min(9, row / 2)}V${centres.at(-1)}${centres.map((centre) => `M6,${centre}H13`).join("")}`
+			});
+			objective.keyResults.forEach((result, k) => {
+				const key = `${i}/${k}`;
+				parts.words.push({
+					key: `result/${key}`,
+					text: FrameworkText.fit(result.name, at - INDENT - 10, SIZE),
+					full: result.name,
+					x: INDENT,
+					y: centres[k],
+					size: SIZE,
+					tone: "ink"
+				});
+				this.#meter(ctx, parts, key, result, color, at, centres[k], bar, tips.of(result), false);
+			});
+			top += (objective.keyResults.length + 1) * row + GROUP;
+		});
+		return parts;
+	}
+};
+export { OkrTree, OkrTreeLayout, OkrTreeRollup };

package/dist/charts/strategycharts/StrategyPane.js

@@ -0,0 +1,27 @@
+// src/charts/strategycharts/StrategyPane.ts
+/** A second value axis inside a cartesian plot, for a pane with a scale of its own: grid lines across and tick labels at the left. */
+var StrategyPane = class {
+	static axis(ctx, name, scale, count, format) {
+		const ticks = scale.ticks(count);
+		const grid = ctx.marks(`axis-${name}-grid`, "line", ticks, (tick) => tick).attr("stroke", (tick) => tick === 0 ? ctx.theme.axis : ctx.theme.grid).attr("stroke-width", 1);
+		ctx.set(grid, {
+			x1: 0,
+			x2: ctx.plot.width,
+			y1: (tick) => scale(tick),
+			y2: (tick) => scale(tick)
+		});
+		const labels = ctx.text(ctx.marks(`axis-${name}-ticks`, "text", ticks, (tick) => tick)).attr("dy", "0.32em").attr("text-anchor", "end").text(format);
+		ctx.set(labels, {
+			x: -3,
+			y: (tick) => scale(tick)
+		});
+	}
+	/** Short figures for pane ticks and notes: 261K, 2.1M. */
+	static compact(value) {
+		return Intl.NumberFormat("en", {
+			notation: "compact",
+			maximumFractionDigits: 1
+		}).format(value);
+	}
+};
+export { StrategyPane };