@mstone6969/graph 0.1.0 → 0.2.0

package/dist/charts/frameworks/AnsoffMatrix.js

@@ -0,0 +1,523 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { FrameworkText } from "./FrameworkText.js";
+import { PositioningSamples } from "./PositioningSamples.js";
+import { max, packEnclose, packSiblings, sum } from "d3";
+// src/charts/frameworks/AnsoffMatrix.ts
+var AnsoffStrategy = /* @__PURE__ */ function(AnsoffStrategy) {
+	AnsoffStrategy["MarketPenetration"] = "Market Penetration";
+	AnsoffStrategy["ProductDevelopment"] = "Product Development";
+	AnsoffStrategy["MarketDevelopment"] = "Market Development";
+	AnsoffStrategy["Diversification"] = "Diversification";
+	return AnsoffStrategy;
+}({});
+var AnsoffDisplay = /* @__PURE__ */ function(AnsoffDisplay) {
+	AnsoffDisplay["List"] = "list";
+	AnsoffDisplay["Bars"] = "bars";
+	AnsoffDisplay["Bubbles"] = "bubbles";
+	return AnsoffDisplay;
+}({});
+var AnsoffMarketOrder = /* @__PURE__ */ function(AnsoffMarketOrder) {
+	AnsoffMarketOrder["ExistingTop"] = "existing-top";
+	AnsoffMarketOrder["ExistingBottom"] = "existing-bottom";
+	return AnsoffMarketOrder;
+}({});
+var AnsoffStage = /* @__PURE__ */ function(AnsoffStage) {
+	AnsoffStage["Existing"] = "Existing";
+	AnsoffStage["New"] = "New";
+	return AnsoffStage;
+}({});
+var GUTTER_LEFT = 38;
+var GUTTER_TOP = 36;
+var GAP = 2;
+var PAD = 8;
+var HEAD = 40;
+var COMPACT_HEAD = 24;
+var ROW = 18;
+var CHAR = 6.2;
+var PIP = {
+	width: 11,
+	height: 7,
+	gap: 2
+};
+var MIN_RADIUS = 5;
+var QUADRANTS = [
+	{
+		strategy: "Market Penetration",
+		market: "Existing",
+		product: "Existing",
+		risk: 1
+	},
+	{
+		strategy: "Product Development",
+		market: "Existing",
+		product: "New",
+		risk: 2
+	},
+	{
+		strategy: "Market Development",
+		market: "New",
+		product: "Existing",
+		risk: 2
+	},
+	{
+		strategy: "Diversification",
+		market: "New",
+		product: "New",
+		risk: 3
+	}
+];
+var RISK_NAME = [
+	"",
+	"Lowest risk",
+	"Medium risk",
+	"Highest risk"
+];
+var RISK_SHADE = [
+	0,
+	.08,
+	.2,
+	.36
+];
+var EXISTING = /^(existing|present|current)\b/;
+var NEW = /^new\b/;
+var clip = (text, room) => FrameworkText.fit(text, room, 11);
+/**
+* Sorts growth initiatives by Ansoff's product-market matrix (Ansoff, Strategies for Diversification, HBR 1957): market penetration,
+* product development, market development and diversification. Choose it to see where a growth plan's bets sit and how far they stray
+* from the present business. Risk rises with distance from it: penetration lowest, diversification highest, the other two between.
+*/
+var AnsoffMatrix = class AnsoffMatrix extends Chart2D {
+	static meta = {
+		id: "ansoff-matrix",
+		name: "Ansoff matrix",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Places growth initiatives in the four product-market strategies, from market penetration to diversification.",
+		tags: [
+			"strategy",
+			"growth",
+			"product market",
+			"2x2",
+			"diversification"
+		],
+		sample: (seed) => PositioningSamples.initiatives(seed),
+		variants: {
+			display: [
+				"list",
+				"bars",
+				"bubbles"
+			],
+			marketOrder: ["existing-top", "existing-bottom"],
+			risk: [false, true]
+		}
+	};
+	/** Assigns rows to quadrants, largest first when values exist. Rows naming neither stage are left out. */
+	static classify(rows, columns) {
+		const stage = (cell) => {
+			const word = String(cell ?? "").trim().toLowerCase();
+			return EXISTING.test(word) ? "Existing" : NEW.test(word) ? "New" : null;
+		};
+		const clean = rows.filter((row) => row !== null && typeof row === "object");
+		return QUADRANTS.map((quadrant) => {
+			const items = clean.filter((row) => stage(row[columns.market]) === quadrant.market && stage(row[columns.product]) === quadrant.product).map((row) => {
+				const raw = row[columns.value];
+				const value = typeof raw === "number" ? raw : typeof raw === "string" && raw.trim() ? Number(raw) : NaN;
+				return {
+					name: String(row[columns.item] ?? "Unnamed"),
+					value: Number.isFinite(value) ? value : null,
+					row
+				};
+			});
+			const ranked = items.map((item, i) => [item, i]).sort(([a, i], [b, j]) => (b.value ?? -Infinity) - (a.value ?? -Infinity) || i - j).map(([item]) => item);
+			return {
+				...quadrant,
+				items: ranked,
+				total: sum(items, (item) => item.value ?? 0)
+			};
+		});
+	}
+	defaults() {
+		return {
+			item: "initiative",
+			market: "market",
+			product: "product",
+			value: "value",
+			display: "list",
+			marketOrder: "existing-top",
+			risk: false
+		};
+	}
+	plotMargin() {
+		return {
+			top: 6,
+			right: 12,
+			bottom: 8,
+			left: 8
+		};
+	}
+	/** Quadrant headers name the colours directly. */
+	legendItems() {
+		return [];
+	}
+	#cells(ctx) {
+		const { data, item, market, product, value, marketOrder, risk } = this.options;
+		const { width, height } = ctx.plot;
+		const cellWidth = (width - GUTTER_LEFT - GAP) / 2, cellHeight = (height - GUTTER_TOP - GAP) / 2;
+		const existingRow = marketOrder === "existing-top" ? 0 : 1;
+		return AnsoffMatrix.classify(Array.isArray(data) ? data : [], {
+			item,
+			market,
+			product,
+			value
+		}).map((quadrant) => {
+			const row = quadrant.market === "Existing" ? existingRow : 1 - existingRow;
+			const fill = risk ? ctx.palette.sequential(RISK_SHADE[quadrant.risk]) : ctx.theme.grid;
+			return {
+				...quadrant,
+				x: GUTTER_LEFT + (quadrant.product === "New" ? cellWidth + GAP : 0),
+				y: GUTTER_TOP + row * (cellHeight + GAP),
+				width: cellWidth,
+				height: cellHeight,
+				fill,
+				ink: risk ? ctx.palette.inkOn(fill) : ctx.theme.ink
+			};
+		});
+	}
+	draw(ctx) {
+		const cells = this.#cells(ctx);
+		const quadrants = ctx.marks("quadrants", "rect", cells, (cell) => cell.strategy).attr("rx", 4).attr("fill", (cell) => cell.fill).attr("fill-opacity", this.options.risk ? 1 : .45);
+		const place = {
+			x: (d) => d.x,
+			y: (d) => d.y,
+			width: (d) => d.width,
+			height: (d) => d.height
+		};
+		ctx.set(quadrants, place, place);
+		ctx.hover(quadrants, (cell) => ({
+			title: cell.strategy,
+			rows: [
+				["Markets", cell.market],
+				["Products", cell.product],
+				["Items", cell.items.length],
+				...this.#valued(cells) ? [["Total", +cell.total.toFixed(2)]] : [],
+				...this.options.risk ? [["Risk", RISK_NAME[cell.risk]]] : []
+			]
+		}));
+		const words = [...this.#frameWords(ctx, cells), ...cells.flatMap((cell) => this.#headWords(ctx, cell, cells))];
+		words.push(...this.#drawItems(ctx, cells));
+		const texts = ctx.marks("words", "text", words, (word) => word.key).attr("text-anchor", (word) => word.anchor).attr("dy", "0.32em").attr("font-size", (word) => word.size).attr("font-weight", (word) => word.weight).attr("font-family", ctx.theme.fontFamily).attr("fill", (word) => word.fill).text((word) => word.text);
+		const at = (word) => `translate(${word.x},${word.y})${word.rotate ? " rotate(-90)" : ""}`;
+		ctx.set(texts, { transform: at }, { transform: at });
+		this.#drawPips(ctx, cells);
+	}
+	#valued(cells) {
+		return cells.some((cell) => cell.items.some((item) => item.value !== null));
+	}
+	#frameWords(ctx, cells) {
+		const { inkSecondary: fill, ink } = ctx.theme;
+		const left = cells.find((cell) => cell.product === "Existing");
+		const stages = [...new Map(cells.map((cell) => [cell.market, cell])).values()];
+		const columns = [...new Map(cells.map((cell) => [cell.product, cell])).values()];
+		const midHeight = left.height + GAP / 2 + GUTTER_TOP;
+		return [
+			{
+				key: "products",
+				text: "Products",
+				x: left.width + GAP / 2 + GUTTER_LEFT,
+				y: 8,
+				anchor: "middle",
+				size: 11,
+				weight: 600,
+				fill: ink
+			},
+			{
+				key: "markets",
+				text: "Markets",
+				x: 8,
+				y: midHeight,
+				anchor: "middle",
+				size: 11,
+				weight: 600,
+				fill: ink,
+				rotate: true
+			},
+			...columns.map((cell) => ({
+				key: `product/${cell.product}`,
+				text: cell.product,
+				x: cell.x + cell.width / 2,
+				y: 25,
+				anchor: "middle",
+				size: 11,
+				weight: 400,
+				fill
+			})),
+			...stages.map((cell) => ({
+				key: `market/${cell.market}`,
+				text: cell.market,
+				x: 25,
+				y: cell.y + cell.height / 2,
+				anchor: "middle",
+				size: 11,
+				weight: 400,
+				fill,
+				rotate: true
+			}))
+		];
+	}
+	#headWords(ctx, cell, cells) {
+		const room = cell.width - 16 - (this.options.risk ? PIP.width * 3 + PIP.gap * 2 + PAD : 0);
+		const count = `${cell.items.length} ${cell.items.length === 1 ? "item" : "items"}`;
+		const total = this.#valued(cells) ? ` · ${Scales.format(cell.total, max(cells, (other) => other.total) ?? 0)}` : "";
+		const note = this.options.risk ? `${RISK_NAME[cell.risk]} · ${count}` : `${count}${total}`;
+		const words = [{
+			key: `head/${cell.strategy}`,
+			text: clip(cell.strategy, room / 1.1),
+			x: cell.x + PAD,
+			y: cell.y + 14,
+			anchor: "start",
+			size: 12,
+			weight: 600,
+			fill: cell.ink
+		}];
+		if (this.#roomy(cell)) words.push({
+			key: `note/${cell.strategy}`,
+			text: clip(note, cell.width - 16),
+			x: cell.x + PAD,
+			y: cell.y + 29,
+			anchor: "start",
+			size: 11,
+			weight: 400,
+			fill: this.options.risk ? cell.ink : ctx.theme.inkSecondary
+		});
+		return words;
+	}
+	#drawPips(ctx, cells) {
+		const pips = !this.options.risk ? [] : cells.flatMap((cell) => [
+			1,
+			2,
+			3
+		].map((step) => ({
+			key: `${cell.strategy}/${step}`,
+			x: cell.x + cell.width - PAD - (4 - step) * PIP.width - (3 - step) * PIP.gap,
+			y: cell.y + 11,
+			on: step <= cell.risk,
+			cell
+		})));
+		const marks = ctx.marks("risk-meter", "rect", pips, (pip) => pip.key).attr("rx", 2).attr("fill", (pip) => pip.cell.ink).attr("fill-opacity", (pip) => pip.on ? .85 : .2);
+		const place = {
+			x: (d) => d.x,
+			y: (d) => d.y,
+			width: PIP.width,
+			height: PIP.height
+		};
+		ctx.set(marks, place, place);
+	}
+	/** A short quadrant gives its second header line to the items. */
+	#roomy(cell) {
+		return cell.height >= 94;
+	}
+	#stack(cell) {
+		const head = this.#roomy(cell) ? HEAD : COMPACT_HEAD;
+		return {
+			x: cell.x + PAD,
+			y: cell.y + head,
+			width: cell.width - 16,
+			rows: Math.max(0, Math.floor((cell.height - head - 2) / ROW))
+		};
+	}
+	/** The rows that fit, with a final line counting the rest. */
+	#rows(cells) {
+		const rows = [], words = [];
+		for (const cell of cells) {
+			const stack = this.#stack(cell);
+			const overflow = cell.items.length > stack.rows;
+			const shown = overflow ? Math.max(0, stack.rows - 1) : cell.items.length;
+			cell.items.slice(0, shown).forEach((item, i) => rows.push({
+				key: `${cell.strategy}/${i}`,
+				cell,
+				item,
+				x: stack.x,
+				y: stack.y + i * ROW + ROW / 2,
+				width: stack.width
+			}));
+			if (overflow && stack.rows) words.push({
+				key: `more/${cell.strategy}`,
+				text: `+${cell.items.length - shown} more`,
+				x: stack.x,
+				y: stack.y + shown * ROW + ROW / 2,
+				anchor: "start",
+				size: 11,
+				weight: 400,
+				fill: cell.ink
+			});
+		}
+		return {
+			rows,
+			words
+		};
+	}
+	#drawItems(ctx, cells) {
+		const { display } = this.options;
+		if (display === "bubbles") return this.#drawBubbles(ctx, cells);
+		return display === "bars" ? this.#drawBars(ctx, cells) : this.#drawList(ctx, cells);
+	}
+	#tip(ctx, cell, item) {
+		return {
+			title: item.name,
+			color: ctx.palette.color(cell.strategy),
+			rows: [["Strategy", cell.strategy], ...item.value === null ? [] : [[this.options.value, item.value]]]
+		};
+	}
+	#drawList(ctx, cells) {
+		const { rows, words } = this.#rows(cells);
+		const reach = max(cells, (cell) => max(cell.items, (item) => Math.abs(item.value ?? 0)) ?? 0) ?? 0;
+		const dots = ctx.marks("item-dots", "circle", rows, (row) => row.key).attr("fill", (row) => ctx.palette.color(row.cell.strategy));
+		ctx.set(dots, {
+			cx: (row) => row.x + 4,
+			cy: (row) => row.y,
+			r: 4
+		}, { r: 0 }, 20);
+		ctx.hover(dots, (row) => this.#tip(ctx, row.cell, row.item));
+		return [...words, ...rows.flatMap((row) => {
+			const text = row.item.value === null ? "" : Scales.format(row.item.value, reach);
+			const room = row.width - 14 - (text ? text.length * CHAR + 8 : 0);
+			return [{
+				key: `name/${row.key}`,
+				text: clip(row.item.name, room),
+				x: row.x + 14,
+				y: row.y,
+				anchor: "start",
+				size: 11,
+				weight: 400,
+				fill: row.cell.ink
+			}, ...text && room > 48 ? [{
+				key: `amount/${row.key}`,
+				text,
+				x: row.x + row.width,
+				y: row.y,
+				anchor: "end",
+				size: 11,
+				weight: 400,
+				fill: row.cell.ink
+			}] : []];
+		})];
+	}
+	#drawBars(ctx, cells) {
+		const { rows, words } = this.#rows(cells);
+		const top = max(rows, (row) => Math.max(0, row.item.value ?? 0)) ?? 0;
+		const labelRoom = (row) => Math.min(row.width * .5, 110);
+		const barRoom = (row) => Math.max(0, row.width - labelRoom(row) - 4);
+		const length = (row, share = 1) => top ? barRoom(row) * Math.max(0, row.item.value ?? 0) * share / top : 0;
+		const bar = (row, width) => {
+			const x = row.x + labelRoom(row) + 4, y = row.y - 6, h = 12, r = Math.min(4, width);
+			return `M${x},${y}h${width - r}a${r},${r} 0 0 1 ${r},${r}v${h - 2 * r}a${r},${r} 0 0 1 ${-r},${r}h${r - width}z`;
+		};
+		const bars = ctx.marks("item-bars", "path", rows, (row) => row.key).attr("fill", (row) => ctx.palette.color(row.cell.strategy));
+		ctx.set(bars, { d: (row) => bar(row, length(row)) }, { d: (row) => bar(row, 0) }, 20);
+		ctx.hover(bars, (row) => this.#tip(ctx, row.cell, row.item));
+		return [...words, ...rows.map((row) => ({
+			key: `name/${row.key}`,
+			text: clip(row.item.name, labelRoom(row)),
+			x: row.x,
+			y: row.y,
+			anchor: "start",
+			size: 11,
+			weight: 400,
+			fill: row.cell.ink
+		}))];
+	}
+	#pack(cell, scale, counted) {
+		const circles = counted.map((item) => ({
+			item,
+			x: 0,
+			y: 0,
+			r: Math.max(MIN_RADIUS, scale * Math.sqrt(Math.max(0, item.value ?? 0))) + GAP / 2
+		}));
+		if (!circles.length) return {
+			circles: [],
+			reach: 0
+		};
+		packSiblings(circles);
+		return {
+			circles,
+			reach: packEnclose(circles).r
+		};
+	}
+	/** One area scale spans all four quadrants, so a bubble compares with any other. */
+	#drawBubbles(ctx, cells) {
+		const valued = this.#valued(cells);
+		const lists = cells.map((cell) => valued ? cell.items : cell.items.map((item) => ({
+			...item,
+			value: 1
+		})));
+		const region = (cell) => {
+			const y = this.#stack(cell).y;
+			return {
+				x: cell.x,
+				y,
+				width: cell.width,
+				height: cell.y + cell.height - y - 4
+			};
+		};
+		const limit = (cell) => {
+			const { width, height } = region(cell);
+			return Math.min(width, height) / 2 - 2;
+		};
+		const shown = cells.map((cell, i) => lists[i].slice(0, Math.max(1, Math.floor((limit(cell) / 6) ** 2 * .55))));
+		const top = max(shown, (list) => max(list, (item) => Math.max(0, item.value ?? 0)) ?? 0) ?? 0;
+		let scale = top ? Math.max(...cells.map(limit)) / Math.sqrt(top) : 0;
+		while (cells.some((cell, i) => this.#pack(cell, scale, shown[i]).reach > limit(cell)) && scale > .01) scale *= .94;
+		const bubbles = [], words = [];
+		cells.forEach((cell, i) => {
+			const { x, y, width, height } = region(cell);
+			const packed = this.#pack(cell, scale, shown[i]);
+			const center = packed.circles.length ? packEnclose(packed.circles) : {
+				x: 0,
+				y: 0
+			};
+			for (const [j, circle] of packed.circles.entries()) bubbles.push({
+				key: `${cell.strategy}/${j}`,
+				cell,
+				item: circle.item,
+				x: x + width / 2 + circle.x - center.x,
+				y: y + height / 2 + circle.y - center.y,
+				r: circle.r - GAP / 2
+			});
+			const hidden = cell.items.length - shown[i].length;
+			if (hidden > 0) words.push({
+				key: `more/${cell.strategy}`,
+				text: `+${hidden} more`,
+				x: cell.x + cell.width - PAD,
+				y: cell.y + cell.height - 10,
+				anchor: "end",
+				size: 11,
+				weight: 400,
+				fill: cell.ink
+			});
+		});
+		const circles = ctx.marks("item-bubbles", "circle", bubbles, (bubble) => bubble.key).attr("fill", (bubble) => ctx.palette.color(bubble.cell.strategy));
+		ctx.set(circles, {
+			cx: (bubble) => bubble.x,
+			cy: (bubble) => bubble.y,
+			r: (bubble) => bubble.r
+		}, { r: 0 }, 20);
+		ctx.hover(circles, (bubble) => this.#tip(ctx, bubble.cell, bubble.item));
+		return [...words, ...bubbles.flatMap((bubble) => {
+			const text = clip(bubble.item.name, bubble.r * 2 - 6);
+			return text && !text.endsWith("…") ? [{
+				key: `name/${bubble.key}`,
+				text,
+				x: bubble.x,
+				y: bubble.y,
+				anchor: "middle",
+				size: 10.5,
+				weight: 400,
+				fill: ctx.palette.inkOn(ctx.palette.color(bubble.cell.strategy))
+			}] : [];
+		})];
+	}
+};
+export { AnsoffDisplay, AnsoffMarketOrder, AnsoffMatrix, AnsoffStage, AnsoffStrategy };

package/dist/charts/frameworks/FrameworkText.js

@@ -0,0 +1,98 @@
+// src/charts/frameworks/FrameworkText.ts
+var NARROW = /[fijlrtI.,:;'’!|()[\] ]/;
+var WIDE = /[mwMW@%—]/;
+var TALL = /[A-Z0-9&#+]/;
+var FULL = /[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︰-﹯＀-｠]|\p{Extended_Pictographic}/u;
+var ELLIPSIS = "…";
+var TIP_WIDTH = 320;
+/** Word-wraps text for framework layouts, whose text is the data. Widths are estimates by character class, so they work without a layout engine. */
+var FrameworkText = class FrameworkText {
+	static width(text, size) {
+		let em = 0;
+		for (const char of text) em += FULL.test(char) ? 1 : WIDE.test(char) ? .9 : TALL.test(char) ? .68 : NARROW.test(char) ? .34 : .59;
+		return em * size;
+	}
+	/** Collapses whitespace; null, undefined and blank text become ''. */
+	static clean(value) {
+		if (value === null || value === void 0) return "";
+		return String(value).replace(/\s+/g, " ").trim();
+	}
+	/** Greedy word wrap. A word wider than the line breaks at a hyphen, so no line is ever wider than `width`. */
+	static wrap(text, width, size) {
+		const lines = [];
+		let line = "";
+		for (const word of FrameworkText.clean(text).split(" ").filter(Boolean)) {
+			const joined = line ? `${line} ${word}` : word;
+			if (FrameworkText.width(joined, size) <= width) {
+				line = joined;
+				continue;
+			}
+			if (line) lines.push(line);
+			line = "";
+			if (FrameworkText.width(word, size) <= width) {
+				line = word;
+				continue;
+			}
+			const pieces = FrameworkText.#split(word, width, size);
+			line = pieces.pop();
+			lines.push(...pieces);
+		}
+		if (line) lines.push(line);
+		return lines;
+	}
+	/** At least one character per piece, so a line narrower than a letter still ends. */
+	static #split(word, width, size) {
+		const pieces = [];
+		let piece = "";
+		for (const char of word) {
+			if (piece && FrameworkText.width(`${piece}${char}-`, size) > width) {
+				pieces.push(`${piece}-`);
+				piece = "";
+			}
+			piece += char;
+		}
+		pieces.push(piece);
+		return pieces;
+	}
+	/** The largest prefix of `text` that fits on one line, ending in an ellipsis if anything was cut. */
+	static fit(text, width, size) {
+		if (FrameworkText.width(text, size) <= width) return text;
+		let kept = "";
+		for (const char of text) {
+			if (FrameworkText.width(`${kept}${char}${ELLIPSIS}`, size) > width) break;
+			kept += char;
+		}
+		return kept ? `${kept.trimEnd()}${ELLIPSIS}` : "";
+	}
+	/** Keeps the first `count` lines, marking the last with an ellipsis when lines were dropped. */
+	static clamp(lines, count, width, size) {
+		if (lines.length <= count) return [...lines];
+		const kept = lines.slice(0, Math.max(0, count));
+		if (kept.length) kept[kept.length - 1] = FrameworkText.fit(`${kept.at(-1).replace(/-$/, "")}${ELLIPSIS}`, width, size);
+		return kept;
+	}
+	/** Sets a `<text>` per block's tspans, one per line. */
+	static write(ctx, selection) {
+		const spans = selection.selectAll("tspan").data((block) => block.lines.map((text, i) => ({
+			text,
+			x: block.x,
+			y: block.y + i * block.lead
+		}))).join("tspan");
+		const place = {
+			x: (line) => line.x,
+			y: (line) => line.y
+		};
+		ctx.set(spans, place, place).text((line) => line.text);
+		return selection;
+	}
+	/** Tooltip with long text on several lines: the tooltip box itself never wraps. */
+	static tip(text, rows, color) {
+		const [title, ...rest] = FrameworkText.wrap(text, TIP_WIDTH, 12);
+		return {
+			title,
+			color,
+			rows: [...rest.map((line) => [line, ""]), ...rows]
+		};
+	}
+};
+export { FrameworkText };