prographs 0.12.0 → 0.13.0

package/dist/charts/doecharts/SipocDiagram.js

@@ -0,0 +1,453 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FrameworkText } from "../frameworks/FrameworkText.js";
+import { DoeRows } from "./DoeRows.js";
+import { DoeSamples } from "./DoeSamples.js";
+import { mean } from "d3";
+// src/charts/doecharts/SipocDiagram.ts
+/** Five columns side by side with the process running down the middle one, or five bands with the process running across. */
+var SipocLayout = /* @__PURE__ */ function(SipocLayout) {
+	SipocLayout["Columns"] = "columns";
+	SipocLayout["Rows"] = "rows";
+	return SipocLayout;
+}({});
+/** Lines from each supplier to its inputs and from each output to its customers: curved, straight, or left out. */
+var SipocLink = /* @__PURE__ */ function(SipocLink) {
+	SipocLink["Curved"] = "curved";
+	SipocLink["Straight"] = "straight";
+	SipocLink["None"] = "none";
+	return SipocLink;
+}({});
+/** Process steps as chevrons that point at the next step, or as boxes joined by arrows. */
+var SipocStep = /* @__PURE__ */ function(SipocStep) {
+	SipocStep["Chevron"] = "chevron";
+	SipocStep["Box"] = "box";
+	return SipocStep;
+}({});
+/** Items in the order given, or with inputs and customers moved beside what they link to, so fewer lines cross. */
+var SipocOrder = /* @__PURE__ */ function(SipocOrder) {
+	SipocOrder["Data"] = "data-order";
+	SipocOrder["Linked"] = "linked";
+	return SipocOrder;
+}({});
+var STAGES = [
+	"Suppliers",
+	"Inputs",
+	"Process",
+	"Outputs",
+	"Customers"
+];
+/** What a card's partners are to it, by stage. */
+var PARTNERS = [
+	"Supplies",
+	"From",
+	"",
+	"To",
+	"Receives"
+];
+var PROCESS = 2;
+var HEAD = 24;
+var NOTE = 10.5;
+var LEAD = 13;
+/** Least wrap width at which a card prints its text. */
+var LEGIBLE = 24;
+var MIN_STEP = 16;
+/** Least width of a step in the process band, which then prints its number. */
+var MIN_STEP_WIDE = 24;
+var MIN_CELL = 50;
+/** How much wider bold text runs than the estimate for regular text. */
+var HEAVY = 1.06;
+var MAX_CELL = 150;
+var MORE = 76;
+var n = (value) => +value.toFixed(2);
+var id = (stage, name) => `${stage}\u0000${name}`;
+var rect = (x, y, width, height, r = 4) => {
+	const w = Math.max(0, width), h = Math.max(0, height), c = Math.min(r, w / 2, h / 2);
+	return `M${n(x + c)},${n(y)}h${n(w - 2 * c)}a${n(c)},${n(c)} 0 0 1 ${n(c)},${n(c)}v${n(h - 2 * c)}a${n(c)},${n(c)} 0 0 1 ${n(-c)},${n(c)}h${n(-(w - 2 * c))}a${n(c)},${n(c)} 0 0 1 ${n(-c)},${n(-c)}v${n(-(h - 2 * c))}a${n(c)},${n(c)} 0 0 1 ${n(c)},${n(-c)}Z`;
+};
+var polygon = (points) => `M${points.map(([x, y]) => `${n(x)},${n(y)}`).join("L")}Z`;
+/**
+* Scope a process before improving it (SIPOC, from six sigma's define phase): who supplies it, what goes in, the
+* handful of steps it takes, what comes out and who receives it, read left to right on one page.
+*/
+var SipocDiagram = class SipocDiagram extends Chart2D {
+	static meta = {
+		id: "sipoc-diagram",
+		name: "SIPOC diagram",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Sets out suppliers, inputs, process steps, outputs and customers in five columns, with the process as a chain of steps and links from suppliers to inputs and outputs to customers. The sample coating line is invented.",
+		tags: [
+			"sipoc",
+			"six sigma",
+			"dmaic",
+			"define",
+			"process scope",
+			"suppliers",
+			"customers",
+			"lean"
+		],
+		sample: (seed) => DoeSamples.sipoc(seed),
+		variants: {
+			layout: Object.values(SipocLayout),
+			link: Object.values(SipocLink),
+			step: Object.values(SipocStep),
+			order: Object.values(SipocOrder)
+		},
+		valid: ({ link, order }) => link !== "none" || order === "data-order"
+	};
+	defaults() {
+		return {
+			stage: "stage",
+			item: "item",
+			partner: "partner",
+			layout: "columns",
+			link: "curved",
+			step: "chevron",
+			order: "data-order"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 16,
+			bottom: 10,
+			left: 16
+		};
+	}
+	legendItems() {
+		return [];
+	}
+	/** Which of the five stages a cell names, 0 for suppliers to 4 for customers, or null: its name, plural or not, or its initial. `Step` reads as process. */
+	static stage(cell) {
+		const text = DoeRows.name(cell).toLowerCase();
+		if (text.startsWith("step")) return PROCESS;
+		const at = text.length === 1 ? "sipoc".indexOf(text) : [
+			"sup",
+			"in",
+			"pro",
+			"out",
+			"cus"
+		].findIndex((start) => text.startsWith(start));
+		return at < 0 ? null : at;
+	}
+	/** The items of each stage in drawn order, and the links between suppliers and inputs and between outputs and customers. */
+	get model() {
+		const { stage, item, partner, order } = this.options;
+		const columns = STAGES.map(() => []), ties = [];
+		const rows = DoeRows.list(this.options.data).flatMap((row) => {
+			const at = SipocDiagram.stage(row[stage]), name = DoeRows.name(row[item]);
+			return at === null || !name ? [] : [{
+				at,
+				name,
+				other: DoeRows.name(row[partner])
+			}];
+		});
+		const add = (at, name) => {
+			if (!columns[at].includes(name)) columns[at].push(name);
+		};
+		for (const { at, name } of rows) add(at, name);
+		for (const { at, name, other } of rows) {
+			if (!other || at === PROCESS) continue;
+			const side = at < PROCESS ? 0 : 3, [from, to] = at === side ? [name, other] : [other, name];
+			add(side, from);
+			add(side + 1, to);
+			if (!ties.some((tie) => tie.side === side && tie.from === from && tie.to === to)) ties.push({
+				side,
+				from,
+				to
+			});
+		}
+		if (order === "linked") for (const side of [0, 3]) {
+			const from = columns[side], to = columns[side + 1];
+			const score = new Map(to.map((name, i) => [name, mean(ties.filter((tie) => tie.side === side && tie.to === name), (tie) => from.indexOf(tie.from)) ?? (i + .5) * from.length / to.length - .5]));
+			to.sort((a, b) => score.get(a) - score.get(b));
+		}
+		return {
+			columns,
+			ties
+		};
+	}
+	/** How many links cross another on the same seam, given the order of the items on both sides. */
+	static crossings({ columns, ties }) {
+		const ends = ties.map((tie) => [
+			tie.side,
+			columns[tie.side].indexOf(tie.from),
+			columns[tie.side + 1].indexOf(tie.to)
+		]);
+		return ends.reduce((total, a, i) => total + ends.slice(i + 1).filter((b) => a[0] === b[0] && (a[1] - b[1]) * (a[2] - b[2]) < 0).length, 0);
+	}
+	/**
+	* The wrapped lines of each card in a stack `room` px tall, three lines at most. When the stack is too tall the
+	* tallest cards give up lines first; when it still is, the cards that fit stay and leave room for a count of the rest.
+	*/
+	static stack(items, room, wrap) {
+		const cut = (text, most) => wrap < LEGIBLE ? [] : FrameworkText.clamp(FrameworkText.wrap(text, wrap, NOTE), most, wrap, NOTE);
+		const most = items.map((text) => Math.max(1, cut(text, 3).length)), tall = (lines) => lines * LEAD + 9;
+		const total = () => most.reduce((sum, lines) => sum + tall(lines) + 5, -5);
+		while (total() > room && most.some((lines) => lines > 1)) {
+			const at = most.lastIndexOf(Math.max(...most));
+			most[at] = most[at] - 1;
+		}
+		const all = total() <= room;
+		let used = 0, shown = 0;
+		for (const lines of most) {
+			if (!all && used + tall(lines) > room - 14) break;
+			used += tall(lines) + 5;
+			shown++;
+		}
+		return items.slice(0, shown).map((text, i) => cut(text, most[i]));
+	}
+	/** The size of the five columns or bands along `length`, and where each starts: the two seams that links cross get `seam` px, the other two gaps `plain`. */
+	static spans(length, seam, plain) {
+		const size = Math.max(4, (length - 2 * seam - 2 * plain) / 5), gaps = [
+			seam,
+			plain,
+			plain,
+			seam
+		];
+		return {
+			size,
+			starts: STAGES.map((_, i) => i * size + gaps.slice(0, i).reduce((sum, gap) => sum + gap, 0))
+		};
+	}
+	/** A step's name on up to `most` lines, or its number where the name has no room. */
+	static #step(text, index, wrap, most) {
+		return wrap < 30 ? [`${index + 1}`] : FrameworkText.clamp(FrameworkText.wrap(text, wrap, NOTE), Math.max(1, most), wrap, NOTE);
+	}
+	#rows(model, stage, name) {
+		const partners = model.ties.filter((tie) => tie.side === (stage < PROCESS ? 0 : 3)).flatMap((tie) => stage === tie.side && tie.from === name ? [tie.to] : stage === tie.side + 1 && tie.to === name ? [tie.from] : []);
+		if (stage === PROCESS) return [["Step", `${model.columns[PROCESS].indexOf(name) + 1} of ${model.columns[PROCESS].length}`]];
+		return [["Column", STAGES[stage]], ...partners.length ? [[PARTNERS[stage], partners.join(", ")]] : []];
+	}
+	/** A stage's header. Every header prints its initial when one of the five names has no room, so they read S, I, P, O, C. */
+	#head(ctx, model, stage, place, short) {
+		const name = STAGES[stage];
+		return {
+			key: `head/${stage}`,
+			sort: "head",
+			title: name,
+			d: rect(place.left, place.top, place.width, place.height),
+			fill: ctx.palette.color(name),
+			anchor: "middle",
+			lines: [short ? name[0] : name],
+			x: place.left + place.width / 2,
+			y: place.top + place.height / 2 + 4,
+			lead: LEAD,
+			rows: [["Items", model.columns[stage].length]]
+		};
+	}
+	#columns(ctx, model) {
+		const { step, link } = this.options, { palette, plot: { width, height } } = ctx;
+		const plain = Math.max(6, Math.min(12, width * .02)), { size: wide, starts } = SipocDiagram.spans(width, link === "none" ? plain : Math.max(14, Math.min(34, width * .06)), plain);
+		const wrap = wide - 14, top = 32, room = Math.max(0, height - top), short = STAGES.some((name) => FrameworkText.width(name, 11) * HEAVY > wide - 8);
+		const scene = {
+			boxes: [],
+			notes: [],
+			arrows: [],
+			places: /* @__PURE__ */ new Map()
+		};
+		const more = (stage, hidden, y) => {
+			if (hidden.length) scene.notes.push({
+				key: `more/${stage}`,
+				text: FrameworkText.fit(`+${hidden.length} more`, wide, NOTE),
+				title: hidden.join("; "),
+				x: starts[stage] + 2,
+				y: Math.min(height - 3, y + NOTE)
+			});
+		};
+		STAGES.forEach((name, stage) => {
+			const left = starts[stage], names = model.columns[stage], fill = palette.color(name);
+			scene.boxes.push(this.#head(ctx, model, stage, {
+				left,
+				top: 0,
+				width: wide,
+				height: HEAD
+			}, short));
+			if (stage !== PROCESS) {
+				const stack = SipocDiagram.stack(names, room, wrap);
+				let y = top;
+				stack.forEach((lines, i) => {
+					const tall = Math.max(1, lines.length) * LEAD + 9;
+					scene.boxes.push({
+						key: id(stage, names[i]),
+						sort: "card",
+						title: names[i],
+						d: rect(left, y, wide, tall),
+						fill,
+						anchor: "start",
+						lines,
+						x: left + 7,
+						y: y + 5 + NOTE - 1,
+						lead: LEAD,
+						rows: this.#rows(model, stage, names[i])
+					});
+					scene.places.set(id(stage, names[i]), {
+						left,
+						top: y,
+						width: wide,
+						height: tall
+					});
+					y += tall + 5;
+				});
+				return more(stage, names.slice(stack.length), y);
+			}
+			const chevron = step === "chevron", between = chevron ? 3 : 12, tip = chevron ? 7 : 0;
+			const fits = (count, footer) => (room - footer - tip - (count - 1) * between) / Math.max(1, count);
+			const shown = fits(names.length, 0) >= MIN_STEP ? names.length : Math.max(1, Math.floor((room - 14 - tip + between) / (MIN_STEP + between)));
+			const tall = Math.max(4, Math.min(48, fits(shown, shown < names.length ? 14 : 0))), point = Math.min(tip, tall * .3), middle = left + wide / 2;
+			names.slice(0, shown).forEach((text, i) => {
+				const y = top + i * (tall + between), notch = i ? point : 0, lines = SipocDiagram.#step(text, i, wrap, Math.floor((tall - notch - 4) / LEAD));
+				const d = chevron ? polygon([
+					[left, y],
+					...i ? [[middle, y + point]] : [],
+					[left + wide, y],
+					[left + wide, y + tall],
+					[middle, y + tall + point],
+					[left, y + tall]
+				]) : rect(left, y, wide, tall);
+				scene.boxes.push({
+					key: id(stage, text),
+					sort: "step",
+					title: text,
+					d,
+					fill,
+					anchor: "middle",
+					lines,
+					x: middle,
+					y: y + (tall + point + notch) / 2 - (lines.length - 1) * LEAD / 2 + 4,
+					lead: LEAD,
+					rows: this.#rows(model, stage, text)
+				});
+				if (!chevron && i) scene.arrows.push(`M${n(middle)},${n(y - between + 2)}V${n(y - 6)}M${n(middle - 3.5)},${n(y - 7)}L${n(middle)},${n(y - 1.5)}L${n(middle + 3.5)},${n(y - 7)}Z`);
+			});
+			more(stage, names.slice(shown), top + shown * (tall + between) + point - between + 4);
+		});
+		return scene;
+	}
+	#bands(ctx, model) {
+		const { step, link } = this.options, { palette, plot: { width, height } } = ctx;
+		const plain = Math.max(6, Math.min(12, height * .03)), { size: tall, starts } = SipocDiagram.spans(height, link === "none" ? plain : Math.max(12, Math.min(30, height * .09)), plain);
+		const full = Math.max(...STAGES.map((name) => FrameworkText.width(name, 11))) * HEAVY + 16, short = width * .22 < full;
+		const head = short ? 26 : full, start = head + 8, room = Math.max(0, width - start), most = Math.max(1, Math.floor((tall - 6) / LEAD));
+		const scene = {
+			boxes: [],
+			notes: [],
+			arrows: [],
+			places: /* @__PURE__ */ new Map()
+		};
+		STAGES.forEach((name, stage) => {
+			const top = starts[stage], names = model.columns[stage], fill = palette.color(name), centre = top + tall / 2;
+			scene.boxes.push(this.#head(ctx, model, stage, {
+				left: 0,
+				top,
+				width: head,
+				height: tall
+			}, short));
+			if (!names.length) return;
+			const process = stage === PROCESS, chevron = process && step === "chevron", between = !process ? 6 : chevron ? 3 : 16, point = chevron ? Math.min(10, tall * .3) : 0, least = process ? MIN_STEP_WIDE : MIN_CELL;
+			const fits = (count, footer) => (room - footer - point - (count - 1) * between) / count;
+			const shown = fits(names.length, 0) >= least ? names.length : Math.max(1, Math.floor((room - MORE - point + between) / (least + between)));
+			const wide = Math.max(4, Math.min(process ? 200 : MAX_CELL, fits(shown, shown < names.length ? MORE : 0)));
+			names.slice(0, shown).forEach((text, i) => {
+				const left = start + i * (wide + between), notch = i ? point : 0, wrap = wide - 14 - point;
+				const lines = process ? SipocDiagram.#step(text, i, wrap, most) : wrap < LEGIBLE ? [] : FrameworkText.clamp(FrameworkText.wrap(text, wrap, NOTE), most, wrap, NOTE);
+				const d = chevron ? polygon([
+					[left, top],
+					[left + wide, top],
+					[left + wide + point, centre],
+					[left + wide, top + tall],
+					[left, top + tall],
+					...i ? [[left + point, centre]] : []
+				]) : rect(left, top, wide, tall);
+				scene.boxes.push({
+					key: id(stage, text),
+					sort: process ? "step" : "card",
+					title: text,
+					d,
+					fill,
+					anchor: "middle",
+					lines,
+					x: left + (wide + point + notch) / 2,
+					y: centre - (lines.length - 1) * LEAD / 2 + 4,
+					lead: LEAD,
+					rows: this.#rows(model, stage, text)
+				});
+				scene.places.set(id(stage, text), {
+					left,
+					top,
+					width: wide,
+					height: tall
+				});
+				if (process && !chevron && i) scene.arrows.push(`M${n(left - between + 2)},${n(centre)}H${n(left - 6)}M${n(left - 7)},${n(centre - 3.5)}L${n(left - 1.5)},${n(centre)}L${n(left - 7)},${n(centre + 3.5)}Z`);
+			});
+			const hidden = names.slice(shown);
+			if (hidden.length) scene.notes.push({
+				key: `more/${stage}`,
+				text: FrameworkText.fit(`+${hidden.length} more`, 58, NOTE),
+				title: hidden.join("; "),
+				x: start + shown * (wide + between) + point + 4,
+				y: centre + 4
+			});
+		});
+		return scene;
+	}
+	draw(ctx) {
+		const { layout, link } = this.options, { theme, palette } = ctx;
+		const model = this.model, across = layout === "columns";
+		for (const name of STAGES) palette.color(name);
+		const filled = model.columns.some((column) => column.length);
+		DoeRows.empty(ctx, filled ? null : "No items");
+		const scene = !filled ? {
+			boxes: [],
+			notes: [],
+			arrows: [],
+			places: /* @__PURE__ */ new Map()
+		} : across ? this.#columns(ctx, model) : this.#bands(ctx, model);
+		const lines = link === "none" ? [] : model.ties.flatMap(({ side, from, to }) => {
+			const a = scene.places.get(id(side, from)), b = scene.places.get(id(side + 1, to));
+			if (!a || !b) return [];
+			const [x0, y0, x1, y1] = across ? [
+				a.left + a.width + 1,
+				a.top + a.height / 2,
+				b.left - 1,
+				b.top + b.height / 2
+			] : [
+				a.left + a.width / 2,
+				a.top + a.height + 1,
+				b.left + b.width / 2,
+				b.top - 1
+			];
+			const bend = across ? `C${n((x0 + x1) / 2)},${n(y0)} ${n((x0 + x1) / 2)},${n(y1)} ` : `C${n(x0)},${n((y0 + y1) / 2)} ${n(x1)},${n((y0 + y1) / 2)} `;
+			return [{
+				key: `${side}/${from}\u0000${to}`,
+				from,
+				to,
+				color: palette.color(STAGES[side]),
+				d: `M${n(x0)},${n(y0)}${link === "curved" ? bend : "L"}${n(x1)},${n(y1)}`
+			}];
+		});
+		const ties = ctx.marks("links", "path", lines, (d) => d.key).attr("fill", "none").attr("stroke", (d) => d.color).attr("stroke-width", 1.6).attr("stroke-opacity", .75).attr("stroke-linecap", "round");
+		ctx.set(ties, { d: (d) => d.d });
+		ctx.hover(ties, (d) => ({
+			title: `${d.from} → ${d.to}`,
+			color: d.color
+		}));
+		const arrows = ctx.marks("axis-arrows", "path", scene.arrows).attr("fill", theme.axis).attr("stroke", theme.axis).attr("stroke-width", 1.5).attr("stroke-linejoin", "round");
+		ctx.set(arrows, { d: (d) => d });
+		const boxes = ctx.marks("cards", "g", scene.boxes, (d) => d.key);
+		const plates = boxes.selectAll("path").data((d) => [d]).join("path").attr("fill", (d) => d.fill).attr("fill-opacity", (d) => d.sort === "card" ? .16 : 1);
+		ctx.set(plates, { d: (d) => d.d });
+		const words = boxes.selectAll("text").data((d) => [d]).join("text").attr("font-size", (d) => d.sort === "head" ? 11 : NOTE).attr("font-weight", (d) => d.sort === "card" ? 400 : 600).attr("font-family", theme.fontFamily).attr("text-anchor", (d) => d.anchor).attr("pointer-events", "none").attr("fill", (d) => d.sort === "card" ? theme.ink : palette.inkOn(d.fill));
+		FrameworkText.write(ctx, words);
+		ctx.hover(boxes, (d) => FrameworkText.tip(d.title, d.rows, d.fill));
+		const notes = ctx.text(ctx.marks("more", "text", scene.notes, (d) => d.key), NOTE, "muted").text((d) => d.text);
+		ctx.set(notes, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		ctx.hover(notes, (d) => FrameworkText.tip(d.title, []));
+	}
+};
+export { SipocDiagram, SipocLayout, SipocLink, SipocOrder, SipocStep };

package/dist/charts/doecharts/index.js

@@ -10,6 +10,7 @@ import { HouseOfQuality, HouseOfQualityMark, HouseOfQualityPriority } from "./Ho
 import { MainEffectsError, MainEffectsOrder, MainEffectsPlot } from "./MainEffectsPlot.js";
 import { CapabilityCurves, ProcessCapabilityChart } from "./ProcessCapabilityChart.js";
 import { PughMark, PughMatrix, PughScoring, PughSort, PughSummary } from "./PughMatrix.js";
+import { SipocDiagram, SipocLayout, SipocLink, SipocOrder, SipocStep } from "./SipocDiagram.js";
 import { SpaghettiDiagram, SpaghettiRouting, SpaghettiTrace } from "./SpaghettiDiagram.js";
 import { VelocityAverage, VelocityChart, VelocityForm } from "./VelocityChart.js";
 import { YamazumiChart, YamazumiKind, YamazumiOrder } from "./YamazumiChart.js";
@@ -25,6 +26,7 @@ var doechartsCatalog = [
 	YamazumiChart,
 	VelocityChart,
 	GageRRChart,
-	ProcessCapabilityChart
+	ProcessCapabilityChart,
+	SipocDiagram
 ];
-export { AffinityDiagram, AffinityLayout, AffinityLink, AffinitySort, CapabilityCurves, CubePlot, CubePlotCorner, CubePlotDesign, CubePlotProjection, DoeMath, DoePanel, DoeRows, DoeSamples, GageRRChart, GageRRMetric, GageRRPartLines, GageRRView, HalfNormalForm, HalfNormalLabels, HalfNormalLimit, HalfNormalPlot, HouseOfQuality, HouseOfQualityMark, HouseOfQualityPriority, MainEffectsError, MainEffectsOrder, MainEffectsPlot, ProcessCapabilityChart, PughMark, PughMatrix, PughScoring, PughSort, PughSummary, SpaghettiDiagram, SpaghettiRouting, SpaghettiTrace, VelocityAverage, VelocityChart, VelocityForm, YamazumiChart, YamazumiKind, YamazumiOrder, doechartsCatalog };
+export { AffinityDiagram, AffinityLayout, AffinityLink, AffinitySort, CapabilityCurves, CubePlot, CubePlotCorner, CubePlotDesign, CubePlotProjection, DoeMath, DoePanel, DoeRows, DoeSamples, GageRRChart, GageRRMetric, GageRRPartLines, GageRRView, HalfNormalForm, HalfNormalLabels, HalfNormalLimit, HalfNormalPlot, HouseOfQuality, HouseOfQualityMark, HouseOfQualityPriority, MainEffectsError, MainEffectsOrder, MainEffectsPlot, ProcessCapabilityChart, PughMark, PughMatrix, PughScoring, PughSort, PughSummary, SipocDiagram, SipocLayout, SipocLink, SipocOrder, SipocStep, SpaghettiDiagram, SpaghettiRouting, SpaghettiTrace, VelocityAverage, VelocityChart, VelocityForm, YamazumiChart, YamazumiKind, YamazumiOrder, doechartsCatalog };