@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/hierarchy/FishboneDiagram.js

@@ -0,0 +1,138 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FishboneHead, FishboneRibs, HierarchySort } from "./hierarchyEnums.js";
+import { HierarchyChart } from "./HierarchyChart.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+// src/charts/hierarchy/FishboneDiagram.ts
+var HEAD = 62;
+/** Ishikawa cause and effect: categories as ribs on a spine, causes as bones on each rib. */
+var FishboneDiagram = class extends HierarchyChart {
+	static meta = {
+		id: "fishbone",
+		name: "Fishbone diagram",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Organises the causes of an effect as bones on category ribs along a spine, for root-cause analysis.",
+		tags: [
+			"ishikawa",
+			"cause and effect",
+			"root cause"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 2, 4),
+		variants: {
+			head: Object.values(FishboneHead),
+			ribs: Object.values(FishboneRibs),
+			lean: [
+				28,
+				12,
+				44
+			],
+			sort: [HierarchySort.ValueDescending, HierarchySort.ValueAscending]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			head: FishboneHead.Right,
+			ribs: FishboneRibs.Alternate,
+			lean: 28,
+			maxDepth: 2
+		};
+	}
+	drawTree(ctx) {
+		const { width, height } = ctx.plot;
+		const { head, ribs, lean } = this.options;
+		const root = this.tree();
+		const toward = head === FishboneHead.Right ? 1 : -1;
+		const both = ribs === FishboneRibs.Alternate;
+		const spineY = both ? height / 2 : height - 6;
+		const tip = head === FishboneHead.Right ? width - HEAD : HEAD;
+		const tail = head === FishboneHead.Right ? 8 : width - 8;
+		const branches = root.children ?? [];
+		const seats = both ? Math.ceil(branches.length / 2) : branches.length;
+		const span = Math.abs(tip - tail);
+		const rib = (both ? height / 2 : height) - 20;
+		const slope = Math.min(span * .35, Math.tan((lean ?? 28) * Math.PI / 180) * rib);
+		const pitch = (span - 6 - slope) / Math.max(.8, seats - .2);
+		const notes = [];
+		const bones = [];
+		branches.forEach((branch, i) => {
+			const seat = both ? Math.floor(i / 2) : i;
+			const up = !both || i % 2 === 0 ? -1 : 1;
+			const foot = tip - toward * (seat * pitch + 6);
+			const crown = foot - toward * slope;
+			const crownY = spineY + up * rib;
+			bones.push({
+				node: branch,
+				x0: crown,
+				y0: crownY,
+				x1: foot,
+				y1: spineY
+			});
+			const top = up < 0 ? crownY - 4 : crownY + 12;
+			const title = TreeStyle.fit(branch.data.name, pitch);
+			const half = TreeStyle.width(title) / 2 + 2;
+			notes.push({
+				key: branch.data.id,
+				text: title,
+				x: Math.max(half, Math.min(width - half, crown)),
+				y: top,
+				anchor: "middle",
+				weight: 600,
+				fill: this.theme.ink,
+				halo: true
+			});
+			const kids = branch.children ?? [];
+			const room = Math.max(20, Math.min(120, pitch * .78));
+			kids.forEach((node, k) => {
+				const t = (k + .7) / (kids.length + .4);
+				const x = crown + (foot - crown) * t, y = crownY + (spineY - crownY) * t;
+				bones.push({
+					node,
+					x0: x - toward * room,
+					y0: y,
+					x1: x,
+					y1: y
+				});
+				if (rib * .9 / Math.max(1, kids.length) >= 11) notes.push({
+					key: node.data.id,
+					text: TreeStyle.fit(node.data.name, room - 2, 10),
+					x: x - toward * (room - 1),
+					y: y - 3,
+					anchor: head === FishboneHead.Right ? "start" : "end",
+					size: 10
+				});
+			});
+		});
+		const spine = ctx.marks("spine", "path", [root], (node) => node.data.id).attr("fill", "none").attr("stroke", this.theme.inkMuted).attr("stroke-width", 3).attr("stroke-linecap", "round");
+		ctx.set(spine, { d: `M${tail},${spineY}L${tip},${spineY}` }, {});
+		this.interact(ctx, spine, (node) => node);
+		ctx.drawOn(spine);
+		const lines = ctx.marks("bones", "path", bones, (bone) => bone.node.data.id).attr("fill", "none").attr("stroke-linecap", "round").attr("stroke", (bone) => this.style.branch(bone.node)).attr("stroke-width", 2).attr("stroke-opacity", (bone) => bone.node.depth === 1 ? 1 : .6);
+		ctx.set(lines, { d: (bone) => `M${bone.x0},${bone.y0}L${bone.x1},${bone.y1}` }, {});
+		this.interact(ctx, lines, (bone) => bone.node);
+		const boxLeft = head === FishboneHead.Right ? tip + 2 : 0;
+		const box = ctx.marks("effect", "rect", [root], (node) => node.data.id).attr("fill", this.style.fill(root)).attr("rx", 6);
+		const boxHeight = Math.min(46, height * .5);
+		ctx.set(box, {
+			x: boxLeft,
+			y: Math.max(0, Math.min(height - boxHeight, spineY - boxHeight / 2)),
+			width: 60,
+			height: boxHeight
+		}, {});
+		this.interact(ctx, box, (node) => node);
+		notes.push({
+			key: "/effect",
+			text: TreeStyle.fit(root.data.name, 52),
+			x: boxLeft + 30,
+			y: Math.max(boxHeight / 2, Math.min(height - boxHeight / 2, spineY)),
+			anchor: "middle",
+			dy: ".35em",
+			weight: 600,
+			fill: this.style.ink(this.style.fill(root))
+		});
+		this.labels(ctx, "names", notes);
+	}
+};
+export { FishboneDiagram };

package/dist/charts/hierarchy/FlameGraph.js

@@ -0,0 +1,66 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FlameFlow, HierarchySort } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { ZoomAdjacencyChart } from "./ZoomAdjacencyChart.js";
+import { partition, scaleLinear } from "d3";
+// src/charts/hierarchy/FlameGraph.ts
+var ROW = 34;
+/** Profiler call stacks: frame width is inclusive cost. Click a frame to zoom into it, and click it again to step out. */
+var FlameGraph = class extends ZoomAdjacencyChart {
+	static meta = {
+		id: "flame-graph",
+		name: "Flame graph",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Stacks profiler frames so width is inclusive cost and hot call paths stand out; click to zoom into a frame.",
+		tags: [
+			"profiler",
+			"call stack",
+			"performance",
+			"icicle"
+		],
+		sample: (seed) => TreeSamples.callStacks(seed),
+		variants: {
+			flow: Object.values(FlameFlow),
+			sort: [
+				HierarchySort.Name,
+				HierarchySort.ValueDescending,
+				HierarchySort.ValueAscending
+			],
+			selfTime: [true, false],
+			minShare: [
+				0,
+				.015,
+				.04
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			flow: FlameFlow.Flame,
+			sort: HierarchySort.Name,
+			selfTime: true,
+			minShare: 0
+		};
+	}
+	drawTree(ctx) {
+		const { flow, selfTime, minShare } = this.options;
+		const { width, height } = ctx.plot;
+		const root = partition().size([1, 1])(this.tree({ self: selfTime }));
+		const focus = this.focusOf(root);
+		const across = scaleLinear([focus.x0, focus.x1], [0, width]).clamp(true);
+		const row = Math.min(ROW, height / (root.height + 1));
+		const top = (depth) => flow === FlameFlow.Flame ? height - (depth + 1) * row : depth * row;
+		const blocks = root.descendants().map((node) => ({
+			node,
+			x: across(node.x0),
+			y: top(node.depth),
+			width: across(node.x1) - across(node.x0),
+			height: row
+		})).filter((block) => block.width >= Math.max(.5, minShare * width));
+		this.paintBlocks(ctx, blocks, this.zoom, "width");
+	}
+};
+export { FlameGraph };

package/dist/charts/hierarchy/HierarchyChart.js

@@ -0,0 +1,83 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { HierarchyColor } from "./hierarchyEnums.js";
+import { TreeModel, treeFieldDefaults } from "./TreeModel.js";
+import { TreeStyle } from "./TreeStyle.js";
+// src/charts/hierarchy/HierarchyChart.ts
+/** Base of every 2D hierarchy chart: resolves the data into a sized tree and exposes its colour and tooltip rules. */
+var HierarchyChart = class extends Chart2D {
+	cached = null;
+	/** Node ids whose children are hidden. Only stateful charts write to it. */
+	folded = /* @__PURE__ */ new Set();
+	style;
+	defaults() {
+		return {
+			...treeFieldDefaults,
+			color: HierarchyColor.Branch
+		};
+	}
+	get model() {
+		const { data, name, value, children, id, parent, sort, measure, maxDepth } = this.options;
+		const fields = JSON.stringify([
+			name,
+			value,
+			children,
+			id,
+			parent,
+			sort,
+			measure,
+			maxDepth
+		]);
+		const hit = this.cached;
+		if (hit && hit.data === data && hit.fields === fields) return hit.model;
+		const model = new TreeModel(data, this.options);
+		this.cached = {
+			data,
+			fields,
+			model
+		};
+		return model;
+	}
+	draw(ctx) {
+		if (this.model.empty) ctx.root.selectAll("*").remove();
+		else this.drawTree(ctx);
+	}
+	/** Per-mark entrance delay, shortened so large trees still finish within half a second. */
+	stagger(marks, each) {
+		return Math.min(each, 500 / Math.max(1, marks.size()));
+	}
+	/** The sized tree this render draws, with `style` bound to it. */
+	tree(options = {}) {
+		const root = this.model.root({
+			folded: this.folded,
+			...options
+		});
+		this.style = new TreeStyle(this.palette, this.theme, this.options.color, root, this.options.valueFormat);
+		return root;
+	}
+	legendItems() {
+		return TreeStyle.legend(this.palette.items(), this.theme.inkMuted);
+	}
+	/** Tooltip, hover dimming and selection. Selecting passes the caller's original node; `act` adds chart behaviour. */
+	interact(ctx, marks, nodeOf, act, content) {
+		ctx.hover(marks, (datum) => content?.(datum) ?? this.style.tooltip(nodeOf(datum)));
+		marks.on("click", (_, datum) => {
+			const node = nodeOf(datum);
+			this.options.onSelect?.(node.data.source);
+			act?.(node);
+		});
+	}
+	/** One keyed layer of text. Labels never take pointer events, and those with `halo` stay legible across links. */
+	labels(ctx, name, items, parent) {
+		const text = ctx.marks(name, "text", items.filter((item) => item.text), (item) => item.key, parent).text((item) => item.text).attr("text-anchor", (item) => item.anchor ?? "start").attr("dy", (item) => item.dy ?? null).attr("font-size", (item) => item.size ?? 11).attr("font-weight", (item) => item.weight ?? null).attr("font-family", this.theme.fontFamily).attr("fill", (item) => item.fill ?? this.theme.inkSecondary).style("pointer-events", "none").attr("stroke", (item) => item.halo ? this.theme.surface : null).attr("stroke-width", (item) => item.halo ? 3 : null).attr("stroke-linejoin", "round").attr("paint-order", "stroke");
+		return ctx.set(text, {
+			x: (item) => item.x,
+			y: (item) => item.y,
+			transform: (item) => item.transform ?? null,
+			opacity: 1
+		}, { opacity: 0 });
+	}
+	table() {
+		return this.model.table();
+	}
+};
+export { HierarchyChart };

package/dist/charts/hierarchy/IcicleChart.js

@@ -0,0 +1,56 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { AdjacencyChart } from "./AdjacencyChart.js";
+import { HierarchyMeasure, HierarchySort, IcicleBands, TreeDirection, countsKeepDefaultSort } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { partition } from "d3";
+// src/charts/hierarchy/IcicleChart.ts
+/** Adjacent bands per level: a rectangular sunburst whose labels stay horizontal, for deep trees that need reading. */
+var IcicleChart = class extends AdjacencyChart {
+	static meta = {
+		id: "icicle",
+		name: "Icicle",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Stacks one band per hierarchy level with each child beside its parent, so sizes and depth read along straight axes.",
+		tags: [
+			"partition",
+			"adjacency diagram",
+			"rectangular sunburst"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 3, 3),
+		variants: {
+			direction: Object.values(TreeDirection),
+			bands: Object.values(IcicleBands),
+			rootBand: [true, false],
+			sort: [
+				HierarchySort.ValueDescending,
+				HierarchySort.ValueAscending,
+				HierarchySort.Input
+			],
+			measure: [HierarchyMeasure.Value, HierarchyMeasure.LeafCount]
+		},
+		valid: countsKeepDefaultSort
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			direction: TreeDirection.LeftRight,
+			bands: IcicleBands.Even,
+			rootBand: true
+		};
+	}
+	drawTree(ctx) {
+		const { direction, bands, rootBand } = this.options;
+		const root = partition().size([1, 1])(this.tree());
+		const first = rootBand || !root.height ? 0 : 1;
+		const weights = Array.from({ length: root.height - first + 1 }, (_, i) => bands === IcicleBands.Tapered ? .72 ** i : 1);
+		const total = weights.reduce((all, weight) => all + weight, 0);
+		let run = 0;
+		const edges = [0, ...weights.map((weight) => run += weight / total)];
+		const blocks = root.descendants().filter((node) => node.depth >= first).map((node) => this.block(direction, ctx.plot, node, node.x0, node.x1, edges[node.depth - first], edges[node.depth - first + 1]));
+		const across = direction === TreeDirection.LeftRight || direction === TreeDirection.RightLeft;
+		this.paintBlocks(ctx, blocks, void 0, across ? "width" : "height");
+	}
+};
+export { IcicleChart };

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 };