@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/flow/DecisionTreeChart.js

@@ -0,0 +1,332 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FlowChart } from "./FlowChart.js";
+import { FlowRibbon, FlowRouter } from "./flowEnums.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowSamples } from "./FlowSamples.js";
+import { FlowTable } from "./FlowTable.js";
+import { cluster, hierarchy, tree } from "d3";
+// src/charts/flow/DecisionTreeChart.ts
+var TreeGrowth = /* @__PURE__ */ function(TreeGrowth) {
+	TreeGrowth["Right"] = "right";
+	TreeGrowth["Left"] = "left";
+	TreeGrowth["Down"] = "down";
+	TreeGrowth["Up"] = "up";
+	return TreeGrowth;
+}({});
+/** `Tidy` packs nodes; `Cluster` aligns outcomes; `Weighted` gives each branch breadth in proportion to its value. */
+var DecisionLayout = /* @__PURE__ */ function(DecisionLayout) {
+	DecisionLayout["Tidy"] = "tidy";
+	DecisionLayout["Cluster"] = "cluster";
+	DecisionLayout["Weighted"] = "weighted";
+	return DecisionLayout;
+}({});
+var DecisionLinkWidth = /* @__PURE__ */ function(DecisionLinkWidth) {
+	DecisionLinkWidth["Uniform"] = "uniform";
+	DecisionLinkWidth["Proportional"] = "proportional";
+	return DecisionLinkWidth;
+}({});
+var DecisionNode = /* @__PURE__ */ function(DecisionNode) {
+	DecisionNode["Box"] = "box";
+	DecisionNode["Dot"] = "dot";
+	return DecisionNode;
+}({});
+var key = (node) => node.ancestors().map((a) => a.data.name).join("/");
+var RIBBON = {
+	[FlowRouter.Orthogonal]: FlowRibbon.Shoulder,
+	[FlowRouter.Curved]: FlowRibbon.Curved,
+	[FlowRouter.Straight]: FlowRibbon.Angular
+};
+/** Walk through a sequence of choices to their outcomes, reading classification trees, decision analyses or triage rules. */
+var DecisionTreeChart = class extends FlowChart {
+	static meta = {
+		id: "decision-tree",
+		name: "Decision tree",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Follows branching choices from a root to outcomes, with branch width optionally showing how much takes each path.",
+		tags: [
+			"tree",
+			"classification",
+			"cart",
+			"branching"
+		],
+		sample: (seed) => FlowSamples.namedTree(seed),
+		variants: {
+			growth: [
+				"right",
+				"left",
+				"down",
+				"up"
+			],
+			layout: [
+				"tidy",
+				"cluster",
+				"weighted"
+			],
+			router: [
+				FlowRouter.Curved,
+				FlowRouter.Orthogonal,
+				FlowRouter.Straight
+			],
+			linkWidth: ["uniform", "proportional"],
+			node: ["box", "dot"]
+		},
+		valid: (v) => v.layout !== "weighted" || v.linkWidth === "proportional" && v.node === "box"
+	};
+	defaults() {
+		return {
+			rule: "rule",
+			growth: "right",
+			layout: "tidy",
+			router: FlowRouter.Curved,
+			linkWidth: "uniform",
+			node: "box"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 10,
+			bottom: 8,
+			left: 10
+		};
+	}
+	table() {
+		if (!this.options.data) return {
+			columns: [],
+			rows: []
+		};
+		return {
+			columns: ["path", "value"],
+			rows: hierarchy(this.options.data).leaves().map((leaf) => [leaf.ancestors().reverse().map((a) => a.data.name).join(" / "), leaf.data.value ?? 0])
+		};
+	}
+	frame(ctx) {
+		const { width, height } = ctx.plot;
+		const growth = this.options.growth;
+		if (growth === "right") return {
+			to: (u, v) => [u, v],
+			length: width,
+			breadth: height,
+			sideways: true
+		};
+		if (growth === "left") return {
+			to: (u, v) => [width - u, v],
+			length: width,
+			breadth: height,
+			sideways: true
+		};
+		if (growth === "down") return {
+			to: (u, v) => [v, u],
+			length: height,
+			breadth: width,
+			sideways: false
+		};
+		return {
+			to: (u, v) => [v, height - u],
+			length: height,
+			breadth: width,
+			sideways: false
+		};
+	}
+	/** Breadth of every node, in value order, for the weighted layout. */
+	weighted(root, breadth, step, start) {
+		const items = [];
+		const unit = (b) => b / (root.value || 1);
+		const gap = 6;
+		const leaves = root.leaves().length;
+		const scale = unit(breadth - gap * (leaves - 1));
+		const visit = (node, top) => {
+			const kids = node.children ?? [];
+			if (!kids.length) {
+				const v1 = top + (node.value ?? 0) * scale;
+				items.push(this.item(node, start + node.depth * step, top, v1));
+				return v1;
+			}
+			const first = items.length;
+			let cursor = top;
+			kids.forEach((kid, i) => {
+				cursor = visit(kid, cursor) + (i < kids.length - 1 ? gap : 0);
+			});
+			const own = (node.value ?? 0) * scale;
+			const center = (top + cursor) / 2;
+			items.splice(first, 0, this.item(node, start + node.depth * step, center - own / 2, center + own / 2));
+			return cursor;
+		};
+		visit(root, 0);
+		return items;
+	}
+	item(node, u, v0, v1) {
+		const parent = node.parent;
+		return {
+			node,
+			id: key(node),
+			u,
+			v0,
+			v1,
+			value: node.value ?? 0,
+			depth: node.depth,
+			leaf: !node.children?.length,
+			branch: parent?.children?.[0] && String(node.data[this.options.rule] ?? "") || ""
+		};
+	}
+	draw(ctx) {
+		const { data, layout, router, linkWidth, node: nodeStyle } = this.options;
+		const { to, length, breadth, sideways } = this.frame(ctx);
+		const root = data && !Array.isArray(data) ? hierarchy(data).sum((d) => d.children?.length ? 0 : Math.max(0, Number(d.value) || 1)) : null;
+		const levels = root?.height ?? 0;
+		const dotted = nodeStyle === "dot";
+		const weightedLayout = layout === "weighted";
+		const leafRoom = sideways ? Math.min(length * .16, 12 + Math.max(0, ...(root?.leaves() ?? []).map((leaf) => FlowTable.width(leaf.data.name)))) : 16;
+		const boxLong = sideways ? Math.min(62, length / Math.max(1, levels + 1) * .6) : 22;
+		const nodeLong = weightedLayout ? 12 : dotted ? 12 : boxLong;
+		const start = nodeLong / 2 + 2;
+		const usable = length - (dotted || weightedLayout ? leafRoom : 0) - nodeLong;
+		const step = usable / Math.max(1, levels);
+		const items = !root ? [] : weightedLayout ? this.weighted(root, breadth, step, start) : (() => {
+			return (layout === "cluster" ? cluster() : tree()).size([breadth - 16, usable])(root).descendants().map((node) => this.item(node, start + node.y, node.x + 8, node.x + 8));
+		})();
+		const rows = items.filter((item) => item.depth === (root?.height ?? 0) || item.leaf).map((item) => item.v0).sort((a, b) => a - b);
+		const crowd = rows.slice(1).reduce((least, v, i) => v - rows[i] > .5 ? Math.min(least, v - rows[i]) : least, breadth);
+		const boxWide = sideways ? Math.min(22, crowd - 2) : Math.min(62, crowd * .92);
+		const byNode = new Map(items.map((item) => [item.node, item]));
+		const color = (item) => ctx.palette.color(item.depth === 0 ? item.node.children?.[0]?.data.name ?? item.node.data.name : item.node.ancestors().slice(-2)[0].data.name);
+		for (const item of items) if (item.depth === 1) color(item);
+		const total = root?.value || 1;
+		const widest = 20;
+		const pairs = items.filter((item) => item.node.parent).map((item) => ({
+			child: item,
+			parent: byNode.get(item.node.parent)
+		}));
+		const proportional = linkWidth === "proportional";
+		const seats = /* @__PURE__ */ new Map();
+		const thick = (item) => Math.max(1.5, item.value / total * widest);
+		const reachOf = (item, side) => item.u + side * (dotted ? 0 : nodeLong / 2);
+		const ribbons = proportional ? pairs.map(({ child, parent }) => {
+			const center = (parent.v0 + parent.v1) / 2;
+			const span = weightedLayout ? (parent.value ? child.value / parent.value : 0) * (parent.v1 - parent.v0) : thick(child);
+			const seated = seats.get(parent) ?? (weightedLayout ? parent.v0 : center - thick(parent) / 2);
+			seats.set(parent, seated + span);
+			const end = weightedLayout ? [child.v0, child.v1] : [child.v0 - span / 2, child.v0 + span / 2];
+			return {
+				key: child.id,
+				from: color(child),
+				datum: child,
+				d: FlowGeometry.ribbon({
+					u: reachOf(parent, 1),
+					v0: seated,
+					v1: seated + span
+				}, {
+					u: reachOf(child, -1),
+					v0: end[0],
+					v1: end[1]
+				}, RIBBON[router], to)
+			};
+		}) : [];
+		this.bands(ctx, "ribbons", ribbons, (item) => ({
+			title: item.node.data.name,
+			color: color(item),
+			rows: [["Value", item.value], ["Share", `${Math.round(item.value / total * 100)}%`]]
+		}), .5);
+		const route = ({ child, parent }) => {
+			const leave = parent.u + (dotted ? 0 : nodeLong / 2), arrive = child.u - (dotted ? 0 : nodeLong / 2);
+			const stops = [[leave, (parent.v0 + parent.v1) / 2], [arrive, (child.v0 + child.v1) / 2]];
+			return FlowGeometry.route(stops, router, to);
+		};
+		const links = ctx.marks("links", "path", proportional ? [] : pairs, (d) => d.child.id).attr("fill", "none").attr("stroke", (d) => color(d.child)).attr("stroke-opacity", .65).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		this.stroke(ctx, links, route);
+		ctx.hover(links, (d) => ({
+			title: `${d.parent.node.data.name} → ${d.child.node.data.name}`,
+			color: color(d.child),
+			rows: [["Value", d.child.value], ["Of parent", `${Math.round(d.child.value / (d.parent.value || 1) * 100)}%`]]
+		}));
+		const body = (item) => {
+			const half = (weightedLayout ? nodeLong : boxLong) / 2;
+			const across = weightedLayout ? [item.v0, Math.max(item.v1, item.v0 + 1)] : [item.v0 - boxWide / 2, item.v0 + boxWide / 2];
+			return FlowGeometry.polygon([
+				to(item.u - half, across[0]),
+				to(item.u + half, across[0]),
+				to(item.u + half, across[1]),
+				to(item.u - half, across[1])
+			]);
+		};
+		const inner = !dotted || weightedLayout;
+		const fill = (item) => item.depth === 0 ? ctx.theme.inkSecondary : color(item);
+		const boxes = ctx.marks("boxes", "path", inner ? items : [], (d) => d.id).attr("fill", fill).attr("stroke", "none");
+		ctx.set(boxes, { d: body }, { d: body }, 6);
+		ctx.hover(boxes, (d) => ({
+			title: d.node.data.name,
+			color: fill(d),
+			rows: [["Value", d.value], ["Share", `${Math.round(d.value / total * 100)}%`]]
+		}));
+		const dots = ctx.marks("dots", "circle", inner ? [] : items, (d) => d.id).attr("fill", fill).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		const point = (item) => to(item.u, item.v0);
+		ctx.set(dots, {
+			cx: (d) => point(d)[0],
+			cy: (d) => point(d)[1],
+			r: (d) => d.leaf ? 5 : 6
+		}, {
+			cx: (d) => point(d)[0],
+			cy: (d) => point(d)[1],
+			r: 0
+		}, 6);
+		ctx.hover(dots, (d) => ({
+			title: d.node.data.name,
+			color: fill(d),
+			rows: [["Value", d.value], ["Share", `${Math.round(d.value / total * 100)}%`]]
+		}));
+		const outside = dotted || weightedLayout;
+		this.labels(ctx, "names", items.flatMap((item) => {
+			const middle = (item.v0 + item.v1) / 2;
+			if (!outside) {
+				const [x, y] = to(item.u, middle);
+				if ((sideways ? boxWide : boxLong) < 13) return [];
+				return [{
+					key: item.id,
+					x,
+					y,
+					text: FlowTable.fit(item.node.data.name, (sideways ? boxLong : boxWide) - 6, 10),
+					anchor: "middle",
+					size: 10,
+					fill: ctx.palette.inkOn(fill(item))
+				}];
+			}
+			if (!item.leaf && item.depth !== 0) return [];
+			const [x, y] = to(item.u + (item.leaf ? nodeLong / 2 + 6 : 0), middle);
+			const flipped = this.options.growth === "left";
+			if (item.depth === 0 && weightedLayout) return [];
+			if (item.depth === 0) return [sideways ? {
+				key: item.id,
+				x,
+				y: y - 14,
+				text: item.node.data.name,
+				anchor: "middle",
+				halo: true
+			} : {
+				key: item.id,
+				x: x + 10,
+				y,
+				text: item.node.data.name,
+				halo: true
+			}];
+			return sideways ? [{
+				key: item.id,
+				x,
+				y,
+				text: item.node.data.name,
+				anchor: flipped ? "end" : "start",
+				halo: true
+			}] : [{
+				key: item.id,
+				x,
+				y: y + (this.options.growth === "up" ? -2 : 2),
+				text: item.node.data.name,
+				anchor: "middle",
+				halo: true,
+				size: 10
+			}];
+		}));
+	}
+};
+export { DecisionLayout, DecisionLinkWidth, DecisionNode, DecisionTreeChart, TreeGrowth };

package/dist/charts/flow/EnergyBalanceChart.js

@@ -0,0 +1,287 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FlowChart } from "./FlowChart.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowTable } from "./FlowTable.js";
+// src/charts/flow/EnergyBalanceChart.ts
+var EnergyLossSide = /* @__PURE__ */ function(EnergyLossSide) {
+	EnergyLossSide["Below"] = "below";
+	EnergyLossSide["Above"] = "above";
+	EnergyLossSide["Alternate"] = "alternate";
+	return EnergyLossSide;
+}({});
+var EnergyBranch = /* @__PURE__ */ function(EnergyBranch) {
+	EnergyBranch["Curved"] = "curved";
+	EnergyBranch["Angular"] = "angular";
+	return EnergyBranch;
+}({});
+var EnergyTip = /* @__PURE__ */ function(EnergyTip) {
+	EnergyTip["Arrow"] = "arrow";
+	EnergyTip["Blunt"] = "blunt";
+	return EnergyTip;
+}({});
+/** Audit a process as a Grassmann diagram: a trunk carries the running balance while losses peel off and gains join at each stage. */
+var EnergyBalanceChart = class extends FlowChart {
+	static meta = {
+		id: "energy-balance",
+		name: "Energy balance",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "A Grassmann diagram: a trunk of running balance narrows as each stage bleeds off losses.",
+		tags: [
+			"grassmann",
+			"exergy",
+			"heat balance",
+			"mass balance",
+			"efficiency"
+		],
+		sample: (seed) => SampleData.categories(seed, 7, 1).map((row, i) => ({
+			stage: row.category,
+			value: i === 0 ? 400 + +row.value : (i === 3 ? .6 : -1) * +row.value
+		})),
+		variants: {
+			lossSide: [
+				"below",
+				"above",
+				"alternate"
+			],
+			branch: ["curved", "angular"],
+			tip: ["arrow", "blunt"],
+			orientation: [Orientation.Horizontal, Orientation.Vertical]
+		}
+	};
+	defaults() {
+		return {
+			stage: "stage",
+			y: "value",
+			orientation: Orientation.Horizontal,
+			lossSide: "below",
+			branch: "curved",
+			tip: "arrow"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 12,
+			bottom: 8,
+			left: 12
+		};
+	}
+	tapPath(to, u, inner, outer, sign, reach, joins, radius) {
+		const { branch, tip } = this.options;
+		const w = Math.abs(outer - inner);
+		const dir = joins ? -1 : 1;
+		const away = inner + sign * reach;
+		const curved = branch === "curved";
+		const p = (a, b) => to(a, b);
+		const c = (a, control, b) => {
+			const blend = (s, e) => [s[0] + (e[0] - s[0]) * .55, s[1] + (e[1] - s[1]) * .55];
+			const [c0, c1] = [blend(a, control), blend(b, control)];
+			return curved ? `C${c0[0]},${c0[1]} ${c1[0]},${c1[1]} ${b[0]},${b[1]}` : `L${b[0]},${b[1]}`;
+		};
+		const endInner = u + dir * radius, endOuter = u + dir * (radius + w);
+		const shoulder = inner + sign * radius;
+		const point = tip === "arrow" && !joins ? `L${p((endInner + endOuter) / 2, away + sign * Math.min(10, w * .5)).join(",")}` : "";
+		return [
+			`M${p(u, outer).join(",")}`,
+			c(p(u, outer), p(endOuter, outer), p(endOuter, shoulder)),
+			`L${p(endOuter, away).join(",")}`,
+			point,
+			`L${p(endInner, away).join(",")}`,
+			`L${p(endInner, shoulder).join(",")}`,
+			c(p(endInner, shoulder), p(endInner, inner), p(u, inner)),
+			"Z"
+		].join("");
+	}
+	draw(ctx) {
+		const { data, stage, y, orientation, lossSide, tip } = this.options;
+		const vertical = orientation === Orientation.Vertical;
+		const to = FlowGeometry.project(orientation);
+		const [length, breadth] = vertical ? [ctx.plot.height, ctx.plot.width] : [ctx.plot.width, ctx.plot.height];
+		const rows = (data ?? []).filter((row) => Number.isFinite(Number(row?.[y])) && row?.[y] !== null);
+		const feed = rows[0];
+		const start = Math.max(0, Number(feed?.[y] ?? 0));
+		const taps = [];
+		let balance = start;
+		for (const row of rows.slice(1)) {
+			const value = Math.max(Number(row[y]), -balance);
+			if (!value) continue;
+			taps.push({
+				name: String(row[stage] ?? ""),
+				value,
+				before: balance,
+				after: balance + value
+			});
+			balance += value;
+		}
+		const sides = taps.map((_, i) => lossSide === "below" ? 1 : lossSide === "above" ? -1 : i % 2 ? -1 : 1);
+		let low = 0, high = start, floor = 0, ceil = start;
+		const walk = taps.map((tap, i) => {
+			const side = sides[i];
+			const [l0, h0] = [low, high];
+			if (tap.value < 0) {
+				if (side > 0) high += tap.value;
+				else low -= tap.value;
+			} else if (side > 0) high += tap.value;
+			else low -= tap.value;
+			floor = Math.min(floor, low);
+			ceil = Math.max(ceil, high);
+			return {
+				l0,
+				h0,
+				l1: low,
+				h1: high
+			};
+		});
+		const hasBelow = sides.includes(1), hasAbove = sides.includes(-1);
+		const reach = Math.min(46, breadth * .16);
+		const caption = vertical ? 8 : 32;
+		const [over, under] = [hasAbove ? reach + caption : 0, hasBelow ? reach + caption : 0];
+		const radius = 7;
+		const step = length / (taps.length + 1.35);
+		const widest = Math.max(1e-9, ...taps.map((tap) => Math.abs(tap.value)));
+		const k = Math.min((breadth - over - under) / Math.max(1e-9, ceil - floor), (step - radius - 6) * .8 / widest);
+		const v0 = over + (breadth - over - under - (ceil - floor) * k) / 2 - floor * k;
+		const v = (amount) => v0 + amount * k;
+		const tapU = taps.map((_, i) => (i + 1) * step);
+		const color = (kind) => ctx.palette.color(kind);
+		const trunk = [];
+		let cursor = 0, lo = 0, hi = start;
+		taps.forEach((tap, i) => {
+			trunk.push({
+				key: `trunk${i}`,
+				from: color("Balance"),
+				datum: {
+					key: `trunk${i}`,
+					name: i ? taps[i - 1].name : String(feed?.[stage] ?? ""),
+					kind: "Balance",
+					value: tap.before,
+					before: tap.before
+				},
+				d: FlowGeometry.polygon([
+					to(cursor, v(lo)),
+					to(tapU[i] + .5, v(lo)),
+					to(tapU[i] + .5, v(hi)),
+					to(cursor, v(hi))
+				])
+			});
+			cursor = tapU[i];
+			lo = walk[i].l1;
+			hi = walk[i].h1;
+		});
+		const endV = (v(lo) + v(hi)) / 2, last = taps[taps.length - 1];
+		const finish = length - (tip === "arrow" ? Math.min(14, (v(hi) - v(lo)) / 2) : 0);
+		if (start > 0) trunk.push({
+			key: "output",
+			from: color("Balance"),
+			datum: {
+				key: "output",
+				name: "Output",
+				kind: "Balance",
+				value: balance,
+				before: balance
+			},
+			d: FlowGeometry.polygon(tip === "arrow" ? [
+				to(cursor, v(lo)),
+				to(finish, v(lo)),
+				to(length, endV),
+				to(finish, v(hi)),
+				to(cursor, v(hi))
+			] : [
+				to(cursor, v(lo)),
+				to(length, v(lo)),
+				to(length, v(hi)),
+				to(cursor, v(hi))
+			])
+		});
+		const pieces = taps.map((tap, i) => {
+			const side = sides[i], joins = tap.value > 0, w = walk[i], u = tapU[i];
+			const kind = joins ? "Gains" : "Losses";
+			const edgeOuter = side > 0 ? v(joins ? w.h1 : w.h0) : v(joins ? w.l1 : w.l0);
+			const edgeInner = side > 0 ? v(joins ? w.h0 : w.h1) : v(joins ? w.l0 : w.l1);
+			return {
+				key: `tap${i}`,
+				from: color(kind),
+				datum: {
+					key: `tap${i}`,
+					name: tap.name,
+					kind,
+					value: tap.value,
+					before: tap.before
+				},
+				d: this.tapPath(to, u, edgeOuter, edgeInner, side, reach, joins, radius)
+			};
+		});
+		this.bands(ctx, "trunk", trunk, (d) => ({
+			title: d.name,
+			color: color("Balance"),
+			rows: [["Balance", Math.round(d.value)], ["Of feed", `${Math.round(d.value / (start || 1) * 100)}%`]]
+		}), 1);
+		this.bands(ctx, "taps", pieces, (d) => ({
+			title: d.name,
+			color: color(d.kind),
+			rows: [[d.kind, Math.round(d.value)], ["Of balance", `${Math.round(Math.abs(d.value) / (d.before || 1) * 100)}%`]]
+		}), .8);
+		const labels = taps.flatMap((tap, i) => {
+			const side = sides[i], w = walk[i];
+			const outer = side > 0 ? v(Math.max(w.h0, w.h1)) + reach + 16 : v(Math.min(w.l0, w.l1)) - reach - 16;
+			const u = tapU[i] + (tap.value > 0 ? -1 : 1) * (radius + Math.abs(tap.value) * k / 2);
+			const percent = `${Math.round(Math.abs(tap.value) / (start || 1) * 100)}%`;
+			const [x, yy] = to(u, outer);
+			return vertical ? [{
+				key: `t${i}`,
+				x,
+				y: yy,
+				text: `${FlowTable.fit(tap.name, 62)} ${percent}`,
+				anchor: side > 0 ? "start" : "end"
+			}] : [{
+				key: `p${i}`,
+				x,
+				y: yy,
+				text: percent,
+				anchor: "middle",
+				tone: "ink",
+				weight: 600
+			}, {
+				key: `t${i}`,
+				x,
+				y: yy + side * 13,
+				text: FlowTable.fit(tap.name, step - 4),
+				anchor: "middle"
+			}];
+		});
+		const middle = (a, b) => (v(a) + v(b)) / 2;
+		const feedText = `${String(feed?.[stage] ?? "")} ${Math.round(start).toLocaleString("en")}`;
+		const [fx, fy] = vertical ? to(10, v(0) - 6) : to(8, middle(0, start));
+		if (start > 0) labels.push(vertical ? {
+			key: "feed",
+			x: fx,
+			y: fy,
+			text: feedText,
+			anchor: "end",
+			tone: "ink",
+			weight: 600
+		} : {
+			key: "feed",
+			x: fx,
+			y: fy,
+			text: feedText,
+			fill: ctx.palette.inkOn(color("Balance")),
+			weight: 600
+		});
+		const [ox, oy] = to(length - Math.min(step * .5, 40), endV);
+		if (last && Math.abs(v(hi) - v(lo)) > (vertical ? 32 : 15)) labels.push({
+			key: "out",
+			x: ox,
+			y: oy,
+			text: `${Math.round(balance / (start || 1) * 100)}%`,
+			anchor: "middle",
+			fill: ctx.palette.inkOn(color("Balance")),
+			weight: 600
+		});
+		this.labels(ctx, "names", labels);
+	}
+};
+export { EnergyBalanceChart, EnergyBranch, EnergyLossSide, EnergyTip };