@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/hierarchy/IcicleZoom.js

@@ -0,0 +1,91 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { HierarchySort, TreeDirection, ZoomStart } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { ZoomAdjacencyChart } from "./ZoomAdjacencyChart.js";
+import { partition } from "d3";
+// src/charts/hierarchy/IcicleZoom.ts
+var CRUMB = 22;
+var PARENT = .07;
+/** Icicle that drills in on click: for hierarchies too deep to read at once. */
+var IcicleZoom = class extends ZoomAdjacencyChart {
+	focusedBranch = null;
+	static meta = {
+		id: "icicle-zoom",
+		name: "Zoomable icicle",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Shows a moving window of levels and drills into any block on click, for hierarchies too deep to read at once.",
+		tags: [
+			"drill down",
+			"zoomable partition",
+			"breadcrumb"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 4, 3),
+		variants: {
+			direction: [TreeDirection.LeftRight, TreeDirection.TopDown],
+			window: [
+				3,
+				2,
+				4
+			],
+			zoomStart: Object.values(ZoomStart),
+			breadcrumb: [true, false],
+			sort: [HierarchySort.ValueDescending, HierarchySort.ValueAscending]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			direction: TreeDirection.LeftRight,
+			window: 3,
+			zoomStart: ZoomStart.Root,
+			breadcrumb: true
+		};
+	}
+	legendItems() {
+		const branch = this.focusedBranch;
+		return super.legendItems().filter((item) => branch === null || item.key === branch);
+	}
+	drawTree(ctx) {
+		const { direction, window, breadcrumb } = this.options;
+		const root = partition().size([1, 1])(this.tree());
+		const focus = this.focusOf(root);
+		this.focusedBranch = focus.depth ? focus.data.branch : null;
+		const plot = {
+			...ctx.plot,
+			y: 0,
+			height: ctx.plot.height - (breadcrumb ? CRUMB : 0)
+		};
+		const stage = ctx.nest(`translate(0,${breadcrumb ? CRUMB : 0})`, "stage");
+		const back = !breadcrumb && focus.parent ? PARENT : 0;
+		const levels = window;
+		const edge = (depth) => back + (1 - back) * (depth - focus.depth) / levels;
+		const span = focus.x1 - focus.x0;
+		const blocks = focus.descendants().filter((node) => node.depth < focus.depth + levels).map((node) => this.block(direction, plot, node, (node.x0 - focus.x0) / span, (node.x1 - focus.x0) / span, edge(node.depth), edge(node.depth + 1)));
+		if (back) blocks.push(this.block(direction, plot, focus.parent, 0, 1, 0, back));
+		this.paintBlocks(stage, blocks, this.zoom, direction === TreeDirection.LeftRight ? "width" : "height");
+		this.paintTrail(ctx, breadcrumb ? focus.ancestors().reverse() : [], ctx.plot.width);
+	}
+	paintTrail(ctx, trail, width) {
+		let x = 2;
+		const items = trail.map((node, i) => {
+			const last = i === trail.length - 1;
+			const text = `${TreeStyle.fit(node.data.name, 90)}${last ? "" : " ›"}`;
+			const at = {
+				node,
+				text,
+				x,
+				last
+			};
+			x += TreeStyle.width(text) + 8;
+			return at;
+		}).filter((item) => item.x + TreeStyle.width(item.text) < width);
+		const crumbs = ctx.marks("trail", "text", items, (item) => item.node.data.id).text((item) => item.text).attr("y", 13);
+		ctx.text(crumbs, 11, "secondary").attr("font-weight", (item) => item.last ? 600 : null).attr("fill", (item) => item.last ? this.theme.ink : this.theme.inkSecondary);
+		ctx.set(crumbs, { x: (item) => item.x }, {});
+		this.interact(ctx, crumbs, (item) => item.node, this.zoom);
+	}
+};
+export { IcicleZoom };

package/dist/charts/hierarchy/IndentedTreeChart.js

@@ -0,0 +1,130 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { HierarchyChart } from "./HierarchyChart.js";
+import { HierarchySort, IndentedBars } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { max } from "d3";
+// src/charts/hierarchy/IndentedTreeChart.ts
+var ROW_MIN = 14;
+var ROW_MAX = 20;
+var VALUE = 44;
+/** File-browser layout, one row per node with click to fold: the most readable tree for many labelled nodes. */
+var IndentedTreeChart = class extends HierarchyChart {
+	static meta = {
+		id: "indented-tree",
+		name: "Indented tree",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Lists one row per node, indented by depth like a file browser, with value bars and click to fold.",
+		tags: [
+			"file tree",
+			"outline",
+			"tree table",
+			"explorer"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 2, 3),
+		variants: {
+			bars: Object.values(IndentedBars),
+			guides: [true, false],
+			indent: [14, 22],
+			sort: [
+				HierarchySort.ValueDescending,
+				HierarchySort.ValueAscending,
+				HierarchySort.Input
+			]
+		},
+		valid: ({ bars, sort }) => bars !== IndentedBars.None || sort === HierarchySort.ValueDescending
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			bars: IndentedBars.Aligned,
+			guides: true,
+			indent: 14
+		};
+	}
+	/** Deepest level whose rows all fit, so a big tree opens summarised rather than clipped. */
+	fitted(height) {
+		const room = Math.max(1, Math.floor(height / ROW_MIN));
+		let limit = this.tree({ limit: Infinity }).height;
+		let root = this.tree({ limit });
+		while (limit > 1 && root.descendants().length > room) root = this.tree({ limit: --limit });
+		return root;
+	}
+	drawTree(ctx) {
+		const { bars, guides, indent } = this.options;
+		const { width, height } = ctx.plot;
+		const root = this.fitted(height);
+		const rows = [];
+		root.eachBefore((node) => rows.push(node));
+		const shown = rows.slice(0, Math.max(1, Math.floor(height / ROW_MIN)));
+		const row = Math.min(ROW_MAX, height / Math.max(1, shown.length));
+		const index = new Map(shown.map((node, i) => [node, i]));
+		const y = (node) => (index.get(node) ?? 0) * row + row / 2;
+		const x = (node) => 6 + node.depth * indent;
+		const peak = max(shown.filter((node) => node.depth > 0), (node) => node.value) || 1;
+		const label = (node) => x(node) + 10;
+		const column = width * .56, barRoom = Math.max(20, width - column - VALUE);
+		const nameRoom = (node) => bars === IndentedBars.Aligned ? column - label(node) - 8 : width - label(node) - VALUE - (bars === IndentedBars.Inline ? barRoom * .6 : 0);
+		const texts = new Map(shown.map((node) => [node, TreeStyle.fit(node.data.name, nameRoom(node))]));
+		const barX = (node) => bars === IndentedBars.Aligned ? column : label(node) + TreeStyle.width(texts.get(node)) + 8;
+		const barLength = (node) => Math.max(2, (node.value ?? 0) / peak * (bars === IndentedBars.Aligned ? barRoom : barRoom * .6));
+		const hits = ctx.marks("rows", "rect", shown, (node) => node.data.id).attr("fill", "transparent");
+		ctx.set(hits, {
+			x: 0,
+			y: (node) => y(node) - row / 2,
+			width,
+			height: row
+		}, {});
+		this.interact(ctx, hits, (node) => node, this.toggle);
+		const elbows = ctx.marks("guides", "path", guides ? shown.filter((node) => node.parent) : [], (node) => node.data.id).attr("fill", "none").attr("stroke", this.theme.axis).attr("stroke-width", 1).style("pointer-events", "none");
+		ctx.set(elbows, { d: (node) => `M${x(node.parent)},${y(node.parent) + 4}V${y(node)}H${x(node) - 4}` }, {}, this.stagger(elbows, 3));
+		const dots = ctx.marks("dots", "circle", shown, (node) => node.data.id).style("pointer-events", "none").attr("fill", (node) => this.folded.has(node.data.id) ? this.theme.surface : this.style.branch(node)).attr("stroke", (node) => this.folded.has(node.data.id) ? this.style.branch(node) : this.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: x,
+			cy: y,
+			r: 4
+		}, {
+			cx: x,
+			cy: y,
+			r: 0
+		}, this.stagger(dots, 3));
+		const lengths = ctx.marks("bars", "rect", bars === IndentedBars.None ? [] : shown.filter((node) => node.depth > 0), (node) => node.data.id).attr("fill", (node) => this.style.fill(node)).attr("rx", 2).style("pointer-events", "none");
+		const thick = Math.min(10, row - 4);
+		ctx.set(lengths, {
+			x: barX,
+			y: (node) => y(node) - thick / 2,
+			width: barLength,
+			height: thick
+		}, {
+			x: barX,
+			y: (node) => y(node) - thick / 2,
+			width: 0,
+			height: thick
+		}, this.stagger(lengths, 6));
+		this.labels(ctx, "names", shown.flatMap((node) => [{
+			key: node.data.id,
+			text: texts.get(node),
+			x: label(node),
+			y: y(node),
+			dy: ".35em",
+			fill: node.children ? this.theme.ink : this.theme.inkSecondary,
+			weight: node.children ? 500 : void 0
+		}, {
+			key: `${node.data.id}/value`,
+			text: this.style.format(node.value ?? 0),
+			x: width - 2,
+			y: y(node),
+			dy: ".35em",
+			anchor: "end",
+			size: 10
+		}]));
+	}
+	toggle = (node) => {
+		if (!node.children && !this.folded.has(node.data.id)) return;
+		if (!this.folded.delete(node.data.id)) this.folded.add(node.data.id);
+		this.render();
+	};
+};
+export { IndentedTreeChart };

package/dist/charts/hierarchy/MindMap.js

@@ -0,0 +1,143 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { MindMapNode, MindMapSides, TreeLinkShape } from "./hierarchyEnums.js";
+import { TreeNodeLinkChart } from "./TreeNodeLinkChart.js";
+import { TreeLinks } from "./TreeLinks.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { sum } from "d3";
+// src/charts/hierarchy/MindMap.ts
+var PILL = 18;
+/** Central topic with branches radiating to both sides: for brainstorms, outlines and concept breakdowns. */
+var MindMap = class extends TreeNodeLinkChart {
+	static meta = {
+		id: "mind-map",
+		name: "Mind map",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Branches topics out from a central idea to both sides, for outlines, brainstorms and concept breakdowns.",
+		tags: [
+			"concept map",
+			"outline",
+			"brainstorm"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 2, 4),
+		variants: {
+			sides: Object.values(MindMapSides),
+			link: Object.values(TreeLinkShape),
+			node: Object.values(MindMapNode)
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sides: MindMapSides.Both,
+			link: TreeLinkShape.Bump,
+			node: MindMapNode.Underline
+		};
+	}
+	/** Balances first-level branches between sides by leaf count. */
+	split(root) {
+		const branches = root.children ?? [];
+		if (this.options.sides === MindMapSides.Right) return [{
+			side: 1,
+			branches
+		}];
+		const right = [], left = [];
+		const size = (list) => sum(list, (node) => node.leaves().length);
+		for (const branch of branches) (size(right) <= size(left) ? right : left).push(branch);
+		return [{
+			side: 1,
+			branches: right
+		}, {
+			side: -1,
+			branches: left
+		}];
+	}
+	drawTree(ctx) {
+		const { width, height } = ctx.plot;
+		const { sides, link, node: style } = this.options;
+		const root = this.tree();
+		const both = sides === MindMapSides.Both;
+		const levels = Math.max(1, root.height);
+		const centerX = both ? width / 2 : 34;
+		const lane = ((both ? width / 2 : width - centerX) - 4) / levels;
+		const topics = [];
+		const measure = (name, room) => {
+			const text = TreeStyle.fit(name, room - 6);
+			return {
+				text,
+				width: TreeStyle.width(text) + (style === MindMapNode.Pill ? 12 : 0)
+			};
+		};
+		topics.push({
+			node: root,
+			x: centerX,
+			y: height / 2,
+			side: 0,
+			...measure(root.data.name, 60)
+		});
+		for (const { side, branches } of this.split(root)) {
+			const total = sum(branches, (branch) => branch.leaves().length);
+			const row = height / Math.max(1, total);
+			let slot = 0;
+			const place = (node) => {
+				const y = node.children ? node.children.map(place).reduce((all, at, _, list) => all + at / list.length, 0) : row * (slot++ + .5);
+				const near = lane * (node.depth - 1) + 30;
+				topics.push({
+					node,
+					x: centerX + side * near,
+					y,
+					side,
+					...measure(node.data.name, lane - 34)
+				});
+				return y;
+			};
+			branches.forEach(place);
+		}
+		const byNode = new Map(topics.map((topic) => [topic.node, topic]));
+		const spot = (topic) => ({
+			node: topic.node,
+			x: topic.x,
+			y: topic.y,
+			r: style === MindMapNode.Dot && topic.node.depth > 0 ? 4 : 0
+		});
+		const spots = topics.map(spot);
+		const edge = (from, to) => {
+			const a = byNode.get(from.node), b = byNode.get(to.node);
+			if (a === b) return `M${a.x},${a.y}L${a.x},${a.y}`;
+			const exit = a.side === 0 ? a.x + b.side * (a.width / 2 + 7) : a.x + a.side * (a.width + 6);
+			return TreeLinks.cartesian(link, [exit, a.y + this.rise(a)], [b.x - b.side * (style === MindMapNode.Dot ? 0 : 2), b.y + this.rise(b)], true);
+		};
+		this.paintTree(ctx, spots, edge);
+		const pills = ctx.marks("pills", "rect", topics.filter((t) => style === MindMapNode.Pill || t.side === 0), (t) => t.node.data.id).attr("rx", PILL / 2).attr("fill", (t) => t.side === 0 ? this.style.fill(t.node) : this.style.tint(this.style.branch(t.node), .8)).style("pointer-events", "none");
+		const pillLeft = (t) => t.side === 0 ? t.x - t.width / 2 - 6 : t.side > 0 ? t.x : t.x - t.width;
+		ctx.set(pills, {
+			x: pillLeft,
+			y: (t) => t.y - PILL / 2,
+			width: (t) => t.width + (t.side === 0 ? 12 : 0),
+			height: PILL
+		}, {});
+		const rules = ctx.marks("rules", "path", style === MindMapNode.Underline ? topics.filter((t) => t.side !== 0) : [], (t) => t.node.data.id).attr("fill", "none").attr("stroke", (t) => this.style.branch(t.node)).attr("stroke-width", 2).attr("stroke-linecap", "round").style("pointer-events", "none");
+		ctx.set(rules, { d: (t) => `M${t.x},${t.y + 3}h${t.side * (t.width + 4)}` }, {});
+		this.labels(ctx, "topics", topics.map((t) => {
+			const pad = style === MindMapNode.Pill ? 6 : style === MindMapNode.Dot ? 7 : 2;
+			const onPill = t.side === 0 || style === MindMapNode.Pill;
+			const fill = t.side === 0 ? this.style.ink(this.style.fill(t.node)) : onPill ? this.style.ink(this.style.tint(this.style.branch(t.node), .8)) : void 0;
+			return {
+				key: t.node.data.id,
+				text: t.text,
+				x: t.side === 0 ? t.x : t.x + t.side * pad,
+				y: t.y + (style === MindMapNode.Underline && t.side !== 0 ? -2 : 0),
+				dy: style === MindMapNode.Underline && t.side !== 0 ? void 0 : ".35em",
+				anchor: t.side === 0 ? "middle" : t.side > 0 ? "start" : "end",
+				fill,
+				weight: t.node.depth <= 1 ? 600 : void 0
+			};
+		}));
+	}
+	rise(topic) {
+		return this.options.node === MindMapNode.Underline && topic.side !== 0 ? 3 : 0;
+	}
+};
+export { MindMap };

package/dist/charts/hierarchy/NestedTreemap.js

@@ -0,0 +1,121 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { HierarchyChart } from "./HierarchyChart.js";
+import { HierarchySort, TreemapHeader, TreemapTile } from "./hierarchyEnums.js";
+import { treemapTiling } from "./TreemapTiling.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { treemap } from "d3";
+// src/charts/hierarchy/NestedTreemap.ts
+var HEAD = 17;
+/** Treemap that keeps every parent visible as a labelled container: for reading group totals and members together. */
+var NestedTreemap = class extends HierarchyChart {
+	static meta = {
+		id: "nested-treemap",
+		name: "Nested treemap",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Draws every level of a hierarchy as a labelled container around its children, so group totals stay readable beside their members.",
+		tags: [
+			"cushion",
+			"grouped treemap",
+			"containers"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 3, 3),
+		variants: {
+			tile: [
+				TreemapTile.Squarify,
+				TreemapTile.Binary,
+				TreemapTile.SliceDice,
+				TreemapTile.Slice
+			],
+			header: Object.values(TreemapHeader),
+			maxDepth: [3, 2],
+			inset: [
+				2,
+				4,
+				8
+			],
+			sort: [HierarchySort.ValueDescending, HierarchySort.ValueAscending]
+		},
+		valid: ({ tile, maxDepth }) => maxDepth === 3 || tile !== TreemapTile.Binary
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			tile: TreemapTile.Squarify,
+			header: TreemapHeader.Top,
+			inset: 2,
+			maxDepth: 3
+		};
+	}
+	drawTree(ctx) {
+		const { tile, header, inset } = this.options;
+		const band = (side) => (node) => node.depth > 0 && node.children ? header === side ? HEAD : inset : inset;
+		const root = this.tree();
+		const nodes = treemap().size([ctx.plot.width, ctx.plot.height]).round(true).tile(treemapTiling(tile)).paddingInner(inset).paddingRight(inset).paddingBottom(inset).paddingTop(band(TreemapHeader.Top)).paddingLeft(band(TreemapHeader.Left))(root).descendants().filter((node) => node.depth > 0 && node.x1 - node.x0 > 1 && node.y1 - node.y0 > 1);
+		const fill = (node) => node.children ? this.style.tint(this.style.branch(node), .86 - .16 * (node.depth - 1)) : this.style.fill(node);
+		const rects = ctx.marks("cells", "rect", nodes, (node) => node.data.id).attr("fill", fill).attr("rx", (node) => node.children ? 4 : Math.min(3, (node.x1 - node.x0) / 2, (node.y1 - node.y0) / 2));
+		ctx.set(rects, {
+			x: (node) => node.x0,
+			y: (node) => node.y0,
+			width: (node) => node.x1 - node.x0,
+			height: (node) => node.y1 - node.y0
+		}, {
+			x: (node) => node.x0,
+			y: (node) => node.y0,
+			width: (node) => node.x1 - node.x0,
+			height: 0
+		}, this.stagger(rects, 3));
+		this.interact(ctx, rects, (node) => node);
+		this.labels(ctx, "names", nodes.flatMap((node) => this.cellLabel(node, fill(node))));
+	}
+	cellLabel(node, fill) {
+		const width = node.x1 - node.x0, height = node.y1 - node.y0;
+		const key = node.data.id, ink = this.style.ink(fill);
+		if (!node.children) return height < 16 ? [] : [{
+			key,
+			text: TreeStyle.fit(node.data.name, width - 8, 10),
+			x: node.x0 + 4,
+			y: node.y0 + 12,
+			fill: ink,
+			size: 10
+		}];
+		if (this.options.header === TreemapHeader.Top && height > HEAD) {
+			const value = this.style.format(node.value ?? 0);
+			const room = width - 10 - TreeStyle.width(value, 10) - 8;
+			const name = TreeStyle.fit(node.data.name, room);
+			return [{
+				key,
+				text: name || TreeStyle.fit(node.data.name, width - 10),
+				x: node.x0 + 5,
+				y: node.y0 + 12.5,
+				fill: ink,
+				weight: 600
+			}, {
+				key: `${key}/value`,
+				text: name ? value : "",
+				x: node.x1 - 5,
+				y: node.y0 + 12.5,
+				anchor: "end",
+				fill: ink,
+				size: 10
+			}];
+		}
+		if (this.options.header === TreemapHeader.Left && width > HEAD) {
+			const x = node.x0 + 12.5, y = node.y0 + height / 2;
+			return [{
+				key,
+				text: TreeStyle.fit(node.data.name, height - 8),
+				x,
+				y,
+				anchor: "middle",
+				fill: ink,
+				weight: 600,
+				transform: `rotate(-90 ${x} ${y})`
+			}];
+		}
+		return [];
+	}
+};
+export { NestedTreemap };