ngwr 15.0.1 → 15.2.0

package/fesm2022/ngwr-charts-treemap-chart.mjs

@@ -0,0 +1,535 @@
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, LOCALE_ID, ViewEncapsulation, afterNextRender, computed, effect, inject, input, isDevMode, signal, viewChild, viewChildren } from "@angular/core";
+import { coerceBooleanProperty, coerceNumberProperty } from "@angular/cdk/coercion";
+import { readI18nText, useI18nText } from "ngwr/i18n";
+import { WrChartTable, chartColor, useChartNumbers } from "ngwr/charts/core";
+import { useChartTooltip } from "ngwr/popover";
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+function worst(items, start, end, sum, side) {
+	let largest = 0;
+	let smallest = Number.POSITIVE_INFINITY;
+	for (let k = start; k < end; k++) {
+		largest = Math.max(largest, items[k].area);
+		smallest = Math.min(smallest, items[k].area);
+	}
+	const s2 = sum * sum;
+	const w2 = side * side;
+	return Math.max(w2 * largest / s2, s2 / (w2 * smallest));
+}
+function squarify(values, box) {
+	const out = values.map(() => null);
+	const positive = values.flatMap((value, index) => Number.isFinite(value) && value > 0 ? [{
+		index,
+		value
+	}] : []);
+	const total = positive.reduce((sum, item) => sum + item.value, 0);
+	if (positive.length === 0 || !(total > 0) || !(box.width > 0) || !(box.height > 0)) return out;
+	const scale = box.width * box.height / total;
+	const items = positive.map(({ index, value }) => ({
+		index,
+		area: value * scale
+	}));
+	let { x, y, width, height } = box;
+	let start = 0;
+	while (start < items.length) {
+		const side = Math.min(width, height);
+		let end = start + 1;
+		let sum = items[start].area;
+		let ratio = worst(items, start, end, sum, side);
+		while (end < items.length) {
+			const next = worst(items, start, end + 1, sum + items[end].area, side);
+			if (next > ratio) break;
+			ratio = next;
+			sum += items[end].area;
+			end++;
+		}
+		const last = end === items.length;
+		if (width >= height) {
+			const depth = last ? width : Math.min(width, sum / height);
+			let top = y;
+			for (let k = start; k < end; k++) {
+				const length = k === end - 1 ? y + height - top : items[k].area / depth;
+				out[items[k].index] = {
+					x,
+					y: top,
+					width: depth,
+					height: length
+				};
+				top += length;
+			}
+			x += depth;
+			width = Math.max(0, width - depth);
+		} else {
+			const depth = last ? height : Math.min(height, sum / width);
+			let left = x;
+			for (let k = start; k < end; k++) {
+				const length = k === end - 1 ? x + width - left : items[k].area / depth;
+				out[items[k].index] = {
+					x: left,
+					y,
+					width: length,
+					height: depth
+				};
+				left += length;
+			}
+			y += depth;
+			height = Math.max(0, height - depth);
+		}
+		start = end;
+	}
+	return out;
+}
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+const FALLBACK_WIDTH = 640;
+const HEADER = 20;
+const PAD = 3;
+const MIN_INNER = 12;
+const LABEL_MIN_WIDTH = 36;
+const LABEL_MIN_HEIGHT = 22;
+const VALUE_MIN_HEIGHT = 38;
+const SEPARATOR = " / ";
+const SUM_TOLERANCE = 1e-9;
+const percent = (value) => Math.round(value * 1e3) / 1e3;
+function resolveNodes(nodes, path, inherited, key) {
+	return nodes.map((node, i) => {
+		const color = node.color ?? inherited ?? chartColor(i);
+		const own = typeof node.value === "number" && Number.isFinite(node.value) ? node.value : null;
+		const ownSize = own !== null && own > 0 ? own : 0;
+		const nodePath = [...path, node.label];
+		const children = resolveNodes(node.children ?? [], nodePath, color, `${key}${i}.`);
+		const childSize = children.reduce((sum, child) => sum + child.size, 0);
+		const group = children.length > 0;
+		return {
+			key: `${key}${i}`,
+			label: node.label,
+			path: nodePath,
+			color,
+			own,
+			value: group ? own ?? childSize : own,
+			size: group ? Math.max(ownSize, childSize) : ownSize,
+			childSize,
+			children
+		};
+	});
+}
+function flatten(nodes) {
+	return nodes.flatMap((node) => [node, ...flatten(node.children)]);
+}
+function placeTiles(nodes, remainder, box, options, out) {
+	const order = nodes.map((node, index) => ({
+		node,
+		index
+	})).filter(({ node }) => node.size > 0).sort((a, b) => b.node.size - a.node.size || a.index - b.index);
+	const sizes = order.map(({ node }) => node.size);
+	if (remainder > 0) sizes.push(remainder);
+	const rects = squarify(sizes, box);
+	order.forEach(({ node }, k) => {
+		const rect = rects[k];
+		if (!rect) return;
+		const roomForHeader = options.labels && rect.height >= 40 && rect.width >= LABEL_MIN_WIDTH;
+		const top = roomForHeader ? HEADER : PAD;
+		const inner = {
+			x: rect.x + PAD,
+			y: rect.y + top,
+			width: rect.width - 6,
+			height: rect.height - top - PAD
+		};
+		const group = node.childSize > 0 && inner.width >= MIN_INNER && inner.height >= MIN_INNER;
+		const labelled = !group && options.labels && rect.width >= LABEL_MIN_WIDTH && rect.height >= LABEL_MIN_HEIGHT;
+		out.push({
+			node,
+			rect,
+			group,
+			header: group && roomForHeader,
+			labelled,
+			valued: labelled && options.values && rect.height >= VALUE_MIN_HEIGHT
+		});
+		if (group) {
+			const rest = node.size - node.childSize;
+			placeTiles(node.children, rest > node.size * SUM_TOLERANCE ? rest : 0, inner, options, out);
+		}
+	});
+}
+var WrTreemapChart = class WrTreemapChart {
+	data = input([], ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	resolvedAriaLabel = useI18nText(this.ariaLabel, "treemapChart.label", "Treemap chart");
+	valueLabel = input(null, ...ngDevMode ? [{ debugName: "valueLabel" }] : /* istanbul ignore next */ []);
+	valueName = useI18nText(this.valueLabel, "treemapChart.value", "Value");
+	shareName = readI18nText("treemapChart.share", "Share");
+	height = input(280, {
+		...ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {},
+		transform: (v) => {
+			const value = coerceNumberProperty(v, 280);
+			return Number.isFinite(value) ? Math.max(80, value) : 280;
+		}
+	});
+	showLabels = input(true, {
+		...ngDevMode ? { debugName: "showLabels" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	showValues = input(true, {
+		...ngDevMode ? { debugName: "showValues" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	tooltip = input(true, {
+		...ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	valueFormat = input(null, ...ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []);
+	percentFormat = input(null, ...ngDevMode ? [{ debugName: "percentFormat" }] : /* istanbul ignore next */ []);
+	dataTable = input(false, {
+		...ngDevMode ? { debugName: "dataTable" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	numbers = useChartNumbers(this.valueFormat);
+	shares = new Intl.NumberFormat(inject(LOCALE_ID), {
+		style: "percent",
+		maximumFractionDigits: 1
+	});
+	smallShares = new Intl.NumberFormat(inject(LOCALE_ID), {
+		style: "percent",
+		maximumSignificantDigits: 2
+	});
+	plot = viewChild.required("plot", ...ngDevMode ? [{ debugName: "plot" }] : /* istanbul ignore next */ []);
+	tileEls = viewChildren("tile", ...ngDevMode ? [{ debugName: "tileEls" }] : /* istanbul ignore next */ []);
+	box = signal(null, ...ngDevMode ? [{ debugName: "box" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			if (typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(([entry]) => {
+				const { width, height } = entry.contentRect;
+				if (width <= 0 || height <= 0) return;
+				const last = this.box();
+				if (last?.width === width && last.height === height) return;
+				this.box.set({
+					width,
+					height
+				});
+			});
+			observer.observe(this.plot().nativeElement);
+			destroyRef.onDestroy(() => observer.disconnect());
+		});
+		if (isDevMode()) {
+			const warned = /* @__PURE__ */ new Set();
+			effect(() => {
+				for (const node of this.nodes()) {
+					const path = node.path.join(SEPARATOR);
+					let problem = null;
+					if (node.own !== null && node.own < 0) {
+						const drawn = node.size > 0 ? `It is drawn at the ${node.childSize} its children add up to, which has to fit.` : "It draws no tile, and the data table still lists it.";
+						problem = `"${path}" has a negative value (${node.own}), which has no area. ${drawn}`;
+					} else if (node.children.length > 0 && node.own !== null && node.own < node.childSize * .999999999) problem = `"${path}" is given a value of ${node.own}, below the ${node.childSize} its children add up to. It is drawn at its children’s total, which has to fit.`;
+					if (problem === null || warned.has(problem)) continue;
+					warned.add(problem);
+					console.warn(`[NGWR] <wr-treemap-chart>: ${problem}`);
+				}
+			});
+		}
+	}
+	tree = computed(() => resolveNodes(this.data(), [], null, ""), ...ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []);
+	nodes = computed(() => flatten(this.tree()), ...ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []);
+	total = computed(() => this.tree().reduce((sum, node) => sum + node.size, 0), ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	layoutBox = computed(() => this.box() ?? {
+		width: FALLBACK_WIDTH,
+		height: this.height()
+	}, ...ngDevMode ? [{ debugName: "layoutBox" }] : /* istanbul ignore next */ []);
+	tiles = computed(() => {
+		const { width, height } = this.layoutBox();
+		const placed = [];
+		placeTiles(this.tree(), 0, {
+			x: 0,
+			y: 0,
+			width,
+			height
+		}, {
+			labels: this.showLabels(),
+			values: this.showValues()
+		}, placed);
+		return placed.map((tile) => ({
+			key: tile.node.key,
+			node: tile.node,
+			group: tile.group,
+			header: tile.header,
+			labelled: tile.labelled,
+			valued: tile.valued,
+			text: tile.node.value === null ? "" : this.numbers.label(tile.node.value),
+			start: percent(tile.rect.x / width * 100),
+			top: percent(tile.rect.y / height * 100),
+			width: percent(tile.rect.width / width * 100),
+			height: percent(tile.rect.height / height * 100)
+		}));
+	}, ...ngDevMode ? [{ debugName: "tiles" }] : /* istanbul ignore next */ []);
+	headerHeight = HEADER;
+	tableData = computed(() => ({
+		caption: this.resolvedAriaLabel(),
+		columns: [this.valueName(), this.shareName()],
+		groups: [{ rows: this.nodes().map((node) => ({
+			header: node.path.join(SEPARATOR),
+			cells: [node.value === null ? "" : this.numbers.value(node.value), this.share(node)]
+		})) }]
+	}), ...ngDevMode ? [{ debugName: "tableData" }] : /* istanbul ignore next */ []);
+	tip = useChartTooltip(this.tooltip, (index) => {
+		const tile = this.tiles()[index];
+		const el = this.tileEls()[index]?.nativeElement;
+		if (!tile || !el) return null;
+		const { node } = tile;
+		const share = this.share(node);
+		return {
+			datum: {
+				label: node.path.join(SEPARATOR),
+				value: node.value === null ? "" : this.numbers.value(node.value),
+				color: node.color,
+				rows: share ? [{
+					label: this.shareName(),
+					value: share
+				}] : []
+			},
+			anchor: el
+		};
+	});
+	onPointerMove(event) {
+		const tile = event.target?.closest(".wr-treemap-chart__tile");
+		const index = tile ? Number(tile.dataset["index"]) : NaN;
+		if (Number.isInteger(index) && index >= 0) this.tip.enter(index);
+		else this.tip.leave(event);
+	}
+	share(node) {
+		const total = this.total();
+		if (node.size <= 0 || total <= 0) return "";
+		const share = node.size / total;
+		const custom = this.percentFormat();
+		if (custom) return custom(share);
+		return (share < .01 ? this.smallShares : this.shares).format(share);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: WrTreemapChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: WrTreemapChart,
+		isStandalone: true,
+		selector: "wr-treemap-chart",
+		inputs: {
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueLabel: {
+				classPropertyName: "valueLabel",
+				publicName: "valueLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLabels: {
+				classPropertyName: "showLabels",
+				publicName: "showLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValues: {
+				classPropertyName: "showValues",
+				publicName: "showValues",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltip: {
+				classPropertyName: "tooltip",
+				publicName: "tooltip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueFormat: {
+				classPropertyName: "valueFormat",
+				publicName: "valueFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			percentFormat: {
+				classPropertyName: "percentFormat",
+				publicName: "percentFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dataTable: {
+				classPropertyName: "dataTable",
+				publicName: "dataTable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "wr-treemap-chart" },
+		viewQueries: [{
+			propertyName: "plot",
+			first: true,
+			predicate: ["plot"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "tileEls",
+			predicate: ["tile"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@let active = tip.active();\n<!-- The drawing: one named image, every tile inside it positioned by percentages of it.\n     The tiles are siblings rather than nested, parents first, so a child is drawn over\n     its parent and leaving it for the parent's edge is a `mouseleave` like any other. -->\n<div\n  #plot\n  class=\"wr-treemap-chart__plot\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.height.px]=\"height()\"\n  (mousemove)=\"onPointerMove($event)\"\n  (mouseleave)=\"tip.leave($event)\"\n>\n  <!-- `inset-inline-start`, not `left`: the layout starts at the inline-start edge, and\n       under RTL the whole drawing mirrors with it. `data-index` is what the pointer\n       handler reads the tile off. -->\n  @for (tile of tiles(); track tile.key) {\n    <div\n      #tile\n      class=\"wr-treemap-chart__tile\"\n      [class.wr-treemap-chart__tile--group]=\"tile.group\"\n      [class.wr-treemap-chart__tile--leaf]=\"!tile.group\"\n      [class.wr-treemap-chart__tile--active]=\"$index === active\"\n      [attr.data-index]=\"$index\"\n      [style.--wr-treemap-chart-tile-color]=\"tile.node.color\"\n      [style.inset-inline-start.%]=\"tile.start\"\n      [style.top.%]=\"tile.top\"\n      [style.width.%]=\"tile.width\"\n      [style.height.%]=\"tile.height\"\n    >\n      <!-- A name takes its direction from its own text (`dir=\"auto\"`), so a Latin name in an\n           RTL tile is cut at its end, not its start, and a Hebrew one in an LTR tile too. A\n           value does the same, so `$120K` reads in its own order beside a Hebrew name. -->\n      @if (tile.header) {\n        <!-- As tall as the strip the layout left above the children, written here so the\n             stylesheet and the layout cannot disagree about it. -->\n        <span class=\"wr-treemap-chart__header\" [style.height.px]=\"headerHeight\">\n          <span class=\"wr-treemap-chart__label\" dir=\"auto\">{{ tile.node.label }}</span>\n          @if (showValues() && tile.text) {\n            <span class=\"wr-treemap-chart__value\" dir=\"auto\">{{ tile.text }}</span>\n          }\n        </span>\n      } @else if (tile.labelled) {\n        <span class=\"wr-treemap-chart__label\" dir=\"auto\">{{ tile.node.label }}</span>\n        @if (tile.valued && tile.text) {\n          <span class=\"wr-treemap-chart__value\" dir=\"auto\">{{ tile.text }}</span>\n        }\n      }\n    </div>\n  }\n</div>\n\n@if (dataTable()) {\n  <!-- The figures for a screen reader, beside the drawing's `img` and never inside it:\n       `img` makes everything it holds presentational. Clipped to nothing by its own\n       stylesheet, so it takes no room and draws nothing. -->\n  <wr-chart-table [data]=\"tableData()\" />\n}\n",
+		dependencies: [{
+			kind: "component",
+			type: WrChartTable,
+			selector: "wr-chart-table",
+			inputs: ["data"]
+		}],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: WrTreemapChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wr-treemap-chart",
+			encapsulation: ViewEncapsulation.None,
+			host: { class: "wr-treemap-chart" },
+			imports: [WrChartTable],
+			template: "@let active = tip.active();\n<!-- The drawing: one named image, every tile inside it positioned by percentages of it.\n     The tiles are siblings rather than nested, parents first, so a child is drawn over\n     its parent and leaving it for the parent's edge is a `mouseleave` like any other. -->\n<div\n  #plot\n  class=\"wr-treemap-chart__plot\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.height.px]=\"height()\"\n  (mousemove)=\"onPointerMove($event)\"\n  (mouseleave)=\"tip.leave($event)\"\n>\n  <!-- `inset-inline-start`, not `left`: the layout starts at the inline-start edge, and\n       under RTL the whole drawing mirrors with it. `data-index` is what the pointer\n       handler reads the tile off. -->\n  @for (tile of tiles(); track tile.key) {\n    <div\n      #tile\n      class=\"wr-treemap-chart__tile\"\n      [class.wr-treemap-chart__tile--group]=\"tile.group\"\n      [class.wr-treemap-chart__tile--leaf]=\"!tile.group\"\n      [class.wr-treemap-chart__tile--active]=\"$index === active\"\n      [attr.data-index]=\"$index\"\n      [style.--wr-treemap-chart-tile-color]=\"tile.node.color\"\n      [style.inset-inline-start.%]=\"tile.start\"\n      [style.top.%]=\"tile.top\"\n      [style.width.%]=\"tile.width\"\n      [style.height.%]=\"tile.height\"\n    >\n      <!-- A name takes its direction from its own text (`dir=\"auto\"`), so a Latin name in an\n           RTL tile is cut at its end, not its start, and a Hebrew one in an LTR tile too. A\n           value does the same, so `$120K` reads in its own order beside a Hebrew name. -->\n      @if (tile.header) {\n        <!-- As tall as the strip the layout left above the children, written here so the\n             stylesheet and the layout cannot disagree about it. -->\n        <span class=\"wr-treemap-chart__header\" [style.height.px]=\"headerHeight\">\n          <span class=\"wr-treemap-chart__label\" dir=\"auto\">{{ tile.node.label }}</span>\n          @if (showValues() && tile.text) {\n            <span class=\"wr-treemap-chart__value\" dir=\"auto\">{{ tile.text }}</span>\n          }\n        </span>\n      } @else if (tile.labelled) {\n        <span class=\"wr-treemap-chart__label\" dir=\"auto\">{{ tile.node.label }}</span>\n        @if (tile.valued && tile.text) {\n          <span class=\"wr-treemap-chart__value\" dir=\"auto\">{{ tile.text }}</span>\n        }\n      }\n    </div>\n  }\n</div>\n\n@if (dataTable()) {\n  <!-- The figures for a screen reader, beside the drawing's `img` and never inside it:\n       `img` makes everything it holds presentational. Clipped to nothing by its own\n       stylesheet, so it takes no room and draws nothing. -->\n  <wr-chart-table [data]=\"tableData()\" />\n}\n"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		valueLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueLabel",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		showLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLabels",
+				required: false
+			}]
+		}],
+		showValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValues",
+				required: false
+			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}],
+		valueFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueFormat",
+				required: false
+			}]
+		}],
+		percentFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "percentFormat",
+				required: false
+			}]
+		}],
+		dataTable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dataTable",
+				required: false
+			}]
+		}],
+		plot: [{
+			type: i0.ViewChild,
+			args: ["plot", { isSignal: true }]
+		}],
+		tileEls: [{
+			type: i0.ViewChildren,
+			args: ["tile", { isSignal: true }]
+		}]
+	}
+});
+export { WrTreemapChart };
+
+//# sourceMappingURL=ngwr-charts-treemap-chart.mjs.map

package/fesm2022/ngwr-charts-treemap-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-charts-treemap-chart.mjs","names":[],"sources":["../../../projects/lib/charts/treemap-chart/internal/squarify.ts","../../../projects/lib/charts/treemap-chart/treemap-chart.ts","../../../projects/lib/charts/treemap-chart/treemap-chart.html"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\n/**\n * A rectangle in the layout's own units: `x` from the inline-start edge, `y` from the\n * top. The treemap chart lays out in pixels and draws in percentages of its plot.\n *\n * @internal\n */\ninterface WrTreemapRect {\n  readonly x: number;\n  readonly y: number;\n  readonly width: number;\n  readonly height: number;\n}\n\n/** One value to place, by its position in the caller's list, with its share of the box as an area. */\ninterface Item {\n  readonly index: number;\n  readonly area: number;\n}\n\n/**\n * The worst aspect ratio in a row of `items[start..end)` laid along a side `side` long,\n * `sum` being their total area: the row is `sum / side` deep, and each item as long as\n * its area over that depth. The ratio is the longer side over the shorter, so a square\n * scores 1 and every other shape more.\n */\nfunction worst(items: readonly Item[], start: number, end: number, sum: number, side: number): number {\n  let largest = 0;\n  let smallest = Number.POSITIVE_INFINITY;\n  for (let k = start; k < end; k++) {\n    largest = Math.max(largest, items[k].area);\n    smallest = Math.min(smallest, items[k].area);\n  }\n  const s2 = sum * sum;\n  const w2 = side * side;\n  return Math.max((w2 * largest) / s2, s2 / (w2 * smallest));\n}\n\n/**\n * Cuts `box` into one rectangle per value, each with an area in proportion to its value,\n * by the squarified algorithm — Bruls, Huizing and van Wijk, \"Squarified Treemaps\"\n * (2000) — which keeps every rectangle as close to a square as it can, so that areas are\n * easy to compare and labels have room.\n *\n * The values are placed IN THE ORDER GIVEN, and the result is in that order too: the\n * algorithm assumes the largest first, so sort them descending for the squarest result.\n * It fills the box in rows. A row runs along the shorter side of the space still free,\n * starting at its inline-start or top edge, and takes values while adding one does not\n * make its worst aspect ratio worse; then it is fixed, and the space beyond it is the\n * next row's. So the first value sits in the inline-start top corner — mirrored with the\n * writing direction when the caller positions by `inset-inline-start`.\n *\n * The last rectangle of every row, and the whole of the last row, take what is left of\n * the space exactly, so floating point leaves no hairline uncovered: the rectangles tile\n * the box with nothing over and nothing under.\n *\n * A value that is not a finite number above zero has no area and gets `null`, as does\n * every value when the box has no area or nothing has a value.\n *\n * @example\n * ```ts\n * squarify([1, 1], { x: 0, y: 0, width: 2, height: 1 });\n * // [{ x: 0, y: 0, width: 1, height: 1 }, { x: 1, y: 0, width: 1, height: 1 }]\n * ```\n *\n * @internal\n */\nexport function squarify(values: readonly number[], box: WrTreemapRect): (WrTreemapRect | null)[] {\n  const out: (WrTreemapRect | null)[] = values.map(() => null);\n  const positive = values.flatMap((value, index) => (Number.isFinite(value) && value > 0 ? [{ index, value }] : []));\n  const total = positive.reduce((sum, item) => sum + item.value, 0);\n  if (positive.length === 0 || !(total > 0) || !(box.width > 0) || !(box.height > 0)) return out;\n\n  const scale = (box.width * box.height) / total;\n  const items: Item[] = positive.map(({ index, value }) => ({ index, area: value * scale }));\n\n  let { x, y, width, height } = box;\n  let start = 0;\n  while (start < items.length) {\n    const side = Math.min(width, height);\n    // Grow the row while the next value does not make its worst ratio worse.\n    let end = start + 1;\n    let sum = items[start].area;\n    let ratio = worst(items, start, end, sum, side);\n    while (end < items.length) {\n      const next = worst(items, start, end + 1, sum + items[end].area, side);\n      if (next > ratio) break;\n      ratio = next;\n      sum += items[end].area;\n      end++;\n    }\n\n    const last = end === items.length;\n    if (width >= height) {\n      // The shorter side is the height: the row is a column at the inline-start edge.\n      const depth = last ? width : Math.min(width, sum / height);\n      let top = y;\n      for (let k = start; k < end; k++) {\n        const length = k === end - 1 ? y + height - top : items[k].area / depth;\n        out[items[k].index] = { x, y: top, width: depth, height: length };\n        top += length;\n      }\n      x += depth;\n      width = Math.max(0, width - depth);\n    } else {\n      // The shorter side is the width: the row is a strip along the top.\n      const depth = last ? height : Math.min(height, sum / width);\n      let left = x;\n      for (let k = start; k < end; k++) {\n        const length = k === end - 1 ? x + width - left : items[k].area / depth;\n        out[items[k].index] = { x: left, y, width: length, height: depth };\n        left += length;\n      }\n      y += depth;\n      height = Math.max(0, height - depth);\n    }\n    start = end;\n  }\n  return out;\n}\n\nexport type { WrTreemapRect };\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  DestroyRef,\n  type ElementRef,\n  LOCALE_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  isDevMode,\n  signal,\n  viewChild,\n  viewChildren,\n} from '@angular/core';\n\nimport { WrChartTable, type WrChartTableData, chartColor, useChartNumbers } from 'ngwr/charts/core';\nimport { readI18nText, useI18nText } from 'ngwr/i18n';\nimport { useChartTooltip } from 'ngwr/popover';\n\nimport { type WrTreemapRect, squarify } from './internal/squarify';\nimport type { WrTreemapNode } from './types';\n\n/**\n * The width the layout assumes until the plot has been measured — on the server, and\n * in the first render in a browser. The tiles are drawn in percentages of the plot, so\n * they fill it either way; only their shapes are squarer once the real width is known.\n */\nconst FALLBACK_WIDTH = 640;\n\n/**\n * The height of the strip a group's name is written in, in px: one line of the label's\n * type and a little room. The stylesheet sizes the strip from the same number, written\n * on it inline, so the two cannot disagree; a larger type than the default's is clipped\n * rather than spilling into the tiles under it.\n */\nconst HEADER = 20;\n\n/** The space between a group's edge and the tiles inside it, in px, on the sides and below. */\nconst PAD = 3;\n\n/** The smallest room, in px either way, that a group draws its children in. Smaller, it is drawn as one block. */\nconst MIN_INNER = 12;\n\n/** The smallest tile, in px, that a name is written in: about three letters and an ellipsis on one line. */\nconst LABEL_MIN_WIDTH = 36;\nconst LABEL_MIN_HEIGHT = 22;\n\n/** The smallest tile height, in px, that holds the value under the name. */\nconst VALUE_MIN_HEIGHT = 38;\n\n/** Between the names of a path, in the tooltip and the data table. */\nconst SEPARATOR = ' / ';\n\n/**\n * The relative difference below which a group's value and its children's sum are the same\n * number. Decimal data rarely adds up exactly in binary — 0.1 + 0.2 + 0.3 is\n * 0.6000000000000001 — so an exact comparison would call a group of 0.6 smaller than its\n * children and leave a remainder of a few ulps to lay out.\n */\nconst SUM_TOLERANCE = 1e-9;\n\n/** A percentage to three decimals, so a style stays short. */\nconst percent = (value: number): number => Math.round(value * 1000) / 1000;\n\n/** A node of the data, resolved: where it sits in the tree, its colour, its figure and its area. */\ninterface ResolvedNode {\n  /** Its position in the tree, `0.2.1`: unique, and stable while the data keeps its shape. */\n  readonly key: string;\n  readonly label: string;\n  /** Every name from the top-level node down to this one. */\n  readonly path: readonly string[];\n  readonly color: string;\n  /** Its own `value`, when that is a finite number. */\n  readonly own: number | null;\n  /**\n   * The figure the tooltip and the data table show: its own value, or for a group with\n   * none the sum of its children's areas. `null` for a leaf with no value.\n   */\n  readonly value: number | null;\n  /** The weight its rectangle is drawn with. `0` draws nothing. */\n  readonly size: number;\n  /** What its children's areas add up to. */\n  readonly childSize: number;\n  readonly children: readonly ResolvedNode[];\n}\n\n/** A node as drawn: its rectangle in px and what it has room to show. */\ninterface PlacedTile {\n  readonly node: ResolvedNode;\n  readonly rect: WrTreemapRect;\n  /** Its children are drawn inside it. */\n  readonly group: boolean;\n  /** A strip at its top carries its name and, with `showValues`, its figure. */\n  readonly header: boolean;\n  /** Its name is written inside it, as on a leaf. */\n  readonly labelled: boolean;\n  /** Its figure is written under its name. */\n  readonly valued: boolean;\n}\n\n/** The fit rules {@link placeTiles} applies. */\ninterface PlaceOptions {\n  readonly labels: boolean;\n  readonly values: boolean;\n}\n\n/**\n * Every node of `nodes`, resolved: paths and colours handed down, values summed up. A\n * top-level node with no `color` takes the palette colour of its position, and a nested\n * one its parent's.\n */\nfunction resolveNodes(\n  nodes: readonly WrTreemapNode[],\n  path: readonly string[],\n  inherited: string | null,\n  key: string\n): ResolvedNode[] {\n  return nodes.map((node, i) => {\n    const color = node.color ?? inherited ?? chartColor(i);\n    const own = typeof node.value === 'number' && Number.isFinite(node.value) ? node.value : null;\n    const ownSize = own !== null && own > 0 ? own : 0;\n    const nodePath = [...path, node.label];\n    const children = resolveNodes(node.children ?? [], nodePath, color, `${key}${i}.`);\n    const childSize = children.reduce((sum, child) => sum + child.size, 0);\n    const group = children.length > 0;\n    return {\n      key: `${key}${i}`,\n      label: node.label,\n      path: nodePath,\n      color,\n      own,\n      value: group ? (own ?? childSize) : own,\n      // A group is never smaller than its children, whatever it is given: they have to fit.\n      size: group ? Math.max(ownSize, childSize) : ownSize,\n      childSize,\n      children,\n    };\n  });\n}\n\n/** Every node, parents before their children, in the data's own order: the data table's rows. */\nfunction flatten(nodes: readonly ResolvedNode[]): ResolvedNode[] {\n  return nodes.flatMap(node => [node, ...flatten(node.children)]);\n}\n\n/**\n * The tiles for `nodes` inside `box`, parents before their children so a child is drawn\n * over its parent. Siblings are squarified largest first, ties in the data's order, and a\n * group's `remainder` — the part of its value its children do not account for — is laid\n * out last and left empty.\n */\nfunction placeTiles(\n  nodes: readonly ResolvedNode[],\n  remainder: number,\n  box: WrTreemapRect,\n  options: PlaceOptions,\n  out: PlacedTile[]\n): void {\n  const order = nodes\n    .map((node, index) => ({ node, index }))\n    .filter(({ node }) => node.size > 0)\n    .sort((a, b) => b.node.size - a.node.size || a.index - b.index);\n  const sizes = order.map(({ node }) => node.size);\n  if (remainder > 0) sizes.push(remainder);\n  const rects = squarify(sizes, box);\n\n  order.forEach(({ node }, k) => {\n    const rect = rects[k];\n    if (!rect) return;\n    const roomForHeader = options.labels && rect.height >= HEADER * 2 && rect.width >= LABEL_MIN_WIDTH;\n    const top = roomForHeader ? HEADER : PAD;\n    const inner: WrTreemapRect = {\n      x: rect.x + PAD,\n      y: rect.y + top,\n      width: rect.width - 2 * PAD,\n      height: rect.height - top - PAD,\n    };\n    const group = node.childSize > 0 && inner.width >= MIN_INNER && inner.height >= MIN_INNER;\n    const labelled = !group && options.labels && rect.width >= LABEL_MIN_WIDTH && rect.height >= LABEL_MIN_HEIGHT;\n    out.push({\n      node,\n      rect,\n      group,\n      header: group && roomForHeader,\n      labelled,\n      valued: labelled && options.values && rect.height >= VALUE_MIN_HEIGHT,\n    });\n    if (group) {\n      const rest = node.size - node.childSize;\n      placeTiles(node.children, rest > node.size * SUM_TOLERANCE ? rest : 0, inner, options, out);\n    }\n  });\n}\n\n/**\n * Treemap chart: a hierarchy as nested rectangles, each with an area in proportion to its\n * value. For the parts of a whole when there are too many for a donut, or when they come\n * in groups — a budget by department and team, a disk by folder. HTML only — no external\n * dependency.\n *\n * @example\n * ```html\n * <wr-treemap-chart\n *   ariaLabel=\"Budget by department\"\n *   [data]=\"[\n *     { label: 'Engineering', children: [{ label: 'Web', value: 310 }, { label: 'Mobile', value: 260 }] },\n *     { label: 'Sales', children: [{ label: 'EMEA', value: 280 }, { label: 'APAC', value: 150 }] },\n *     { label: 'Legal', value: 60 }\n *   ]\"\n * />\n * ```\n *\n * **The layout** is the squarified algorithm (Bruls, Huizing and van Wijk, 2000): each\n * set of siblings is cut largest first into rectangles as close to square as it allows,\n * so areas can be compared and names have room. It starts in the inline-start top corner,\n * so under RTL the largest node sits at the top right — the tiles are positioned by\n * `inset-inline-start`, and the whole drawing mirrors with the writing direction.\n *\n * **Groups.** A node with children is drawn as a rectangle with its children inside it,\n * a few pixels in from its edge, under a strip carrying its name when it is tall enough.\n * Its value is the sum of its children's unless it is given one, and a value above that\n * sum leaves the rest of its rectangle empty: what the children do not account for. A\n * group too small to hold its children is drawn as one block.\n *\n * **Colour is the top-level node's**, from the chart's palette, and every node inside it\n * takes it unless it has a `color` of its own. It is never the only thing that tells two\n * groups apart: each carries its name where there is room, and its tiles sit inside its\n * own rectangle; the tooltip and the data table name the ones too small to write in. The\n * gap round every tile is a faint separator in the surface colour, not a boundary drawn\n * to be read on its own; under `prefers-contrast: more` it is a line at 3:1 or more\n * against the tints, and under forced colours an outline in the text colour. With more\n * than five top-level nodes the palette repeats, and the names are what tell neighbours\n * of one colour apart.\n *\n * **Names are written inside the tiles that have room** — a group's in its strip, a\n * leaf's in its corner with its value under it — and ellipsised past the tile's width.\n * A tile smaller than about 36 × 22 px writes nothing; the tooltip and the data table\n * name every node in full, with its whole path. A value is never cut: one wider than its\n * tile, or than the room its group's name leaves in the strip, is left out, since `$12…`\n * reads as another number, and the tooltip and the data table carry it whole.\n *\n * **What a screen reader gets.** The drawing is one named `role=\"img\"`, and nothing in it\n * is announced. The tooltip is pointer only, so say what the chart shows in `ariaLabel`,\n * or turn on `dataTable`, which lists every node by its path with its value and its share\n * of the whole. No part of the chart is a tab stop.\n *\n * **No drill-down.** Every level is drawn at once and nothing zooms into a group; a\n * deep tree is better split into several charts, or given one level at a time by the host.\n *\n * The tiles are laid out for the plot's measured size, so on the server and in the first\n * render they are cut for an assumed width and squared up once the plot is measured.\n *\n * @see https://ngwr.dev/charts/treemap-chart\n */\n@Component({\n  selector: 'wr-treemap-chart',\n  templateUrl: './treemap-chart.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-treemap-chart' },\n  imports: [WrChartTable],\n})\nexport class WrTreemapChart {\n  /**\n   * The nodes, top level first. A node with `children` is a group drawn round them, and\n   * one without is a leaf drawn at its `value`. Top-level nodes with no `color` take the\n   * palette's colours in order.\n   */\n  readonly data = input<readonly WrTreemapNode[]>([]);\n\n  /**\n   * Accessible name of the drawing. The tiles carry no text a screen reader reaches, so\n   * this is where to say what the chart shows — or turn on `dataTable`. Falls back to\n   * `treemapChart.label`, which is also the data table's caption.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'treemapChart.label', 'Treemap chart');\n\n  /**\n   * What the values measure — revenue, size on disk — as the heading of the data table's\n   * value column. Falls back to `treemapChart.value` (\"Value\").\n   */\n  readonly valueLabel = input<string | null>(null);\n\n  protected readonly valueName = useI18nText(this.valueLabel, 'treemapChart.value', 'Value');\n\n  /** The heading of the share column and the name of the tooltip's share row. */\n  protected readonly shareName = readI18nText('treemapChart.share', 'Share');\n\n  /** The plot's height in px, at least 80. Its width is the container's. @default 280 */\n  readonly height = input(280, {\n    transform: (v: unknown): number => {\n      const value = coerceNumberProperty(v, 280);\n      return Number.isFinite(value) ? Math.max(80, value) : 280;\n    },\n  });\n\n  /**\n   * Write the names inside the tiles that have room for them, a group's in a strip along\n   * its top. Off, no tile carries text and no group reserves a strip. @default true\n   */\n  readonly showLabels = input(true, { transform: coerceBooleanProperty });\n\n  /** Write each value under its name, and each group's beside its name, where there is room. @default true */\n  readonly showValues = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Show a tooltip for the tile under the pointer: its path from the top-level node, its\n   * value, and its share of the whole. Pointer only — the data table is where the same\n   * figures are for a keyboard or a screen reader. @default true\n   */\n  readonly tooltip = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Writes every value the chart shows: inside the tiles, in the tooltip and in the data\n   * table. `null` uses `Intl.NumberFormat` in `LOCALE_ID`, compact inside the tiles\n   * (`1.2K`). A value wider than its tile is left out of it rather than cut. Shares are\n   * `percentFormat`'s.\n   */\n  readonly valueFormat = input<((value: number) => string) | null>(null);\n\n  /**\n   * Writes every share the chart shows, given as a RATIO — `0.25` for a quarter — the\n   * number `Intl.NumberFormat`'s `percent` style takes, so one of those can be passed as\n   * it is: in the tooltip and in the data table. `null` uses that style in `LOCALE_ID`,\n   * with up to one fraction digit, and two significant digits below 1% so a sliver is not\n   * printed as `0%`.\n   */\n  readonly percentFormat = input<((ratio: number) => string) | null>(null);\n\n  /**\n   * Render the chart's figures as a table that only assistive technology reaches: a row\n   * per node, parents before their children in the data's order, headed by its path —\n   * `Engineering / Web` — with its value and its share of the whole. A node with no area\n   * is listed with an empty share, and a leaf with no value with an empty value too.\n   *\n   * The drawing is one named `role=\"img\"`, which hides everything inside it, so without\n   * the table the numbers are nowhere a screen reader can walk. It is rendered beside the\n   * drawing, clipped to nothing: it takes no room, draws nothing and holds no tab stop.\n   * @default false\n   */\n  readonly dataTable = input(false, { transform: coerceBooleanProperty });\n\n  /** The exact figures and the tiles' compact ones, in `LOCALE_ID` unless `valueFormat` is given. */\n  private readonly numbers = useChartNumbers(this.valueFormat);\n\n  /** Shares from one percent up, to one decimal: `12.5 %`, `3 %`. */\n  private readonly shares = new Intl.NumberFormat(inject(LOCALE_ID), { style: 'percent', maximumFractionDigits: 1 });\n\n  /** Shares below one percent, to two significant digits, so a sliver does not read `0 %`. */\n  private readonly smallShares = new Intl.NumberFormat(inject(LOCALE_ID), {\n    style: 'percent',\n    maximumSignificantDigits: 2,\n  });\n\n  private readonly plot = viewChild.required<ElementRef<HTMLElement>>('plot');\n  private readonly tileEls = viewChildren<ElementRef<HTMLElement>>('tile');\n\n  /** The plot's measured content box, once a browser has laid it out. */\n  private readonly box = signal<{ readonly width: number; readonly height: number } | null>(null);\n\n  constructor() {\n    const destroyRef = inject(DestroyRef);\n    // The layout is cut for the plot's real proportions: squares at 640 × 280 are slabs\n    // at 320 × 280. Measured after render, so the server and the first paint draw the\n    // fallback and nothing here touches the DOM before a browser has one.\n    afterNextRender(() => {\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(([entry]) => {\n        const { width, height } = entry.contentRect;\n        // A hidden chart measures nothing; keep the last layout rather than collapse it.\n        if (width <= 0 || height <= 0) return;\n        const last = this.box();\n        if (last?.width === width && last.height === height) return;\n        this.box.set({ width, height });\n      });\n      observer.observe(this.plot().nativeElement);\n      destroyRef.onDestroy(() => observer.disconnect());\n    });\n\n    // Two things in the data the drawing cannot honour, and that look like nothing at all\n    // on screen: a missing tile, and a group drawn larger than it was told to be.\n    if (isDevMode()) {\n      const warned = new Set<string>();\n      effect(() => {\n        for (const node of this.nodes()) {\n          const path = node.path.join(SEPARATOR);\n          let problem: string | null = null;\n          if (node.own !== null && node.own < 0) {\n            // A negative value adds no area of its own, so whatever such a node is drawn at\n            // is its children's total — a group is still drawn round them.\n            const drawn =\n              node.size > 0\n                ? `It is drawn at the ${node.childSize} its children add up to, which has to fit.`\n                : 'It draws no tile, and the data table still lists it.';\n            problem = `\"${path}\" has a negative value (${node.own}), which has no area. ${drawn}`;\n          } else if (node.children.length > 0 && node.own !== null && node.own < node.childSize * (1 - SUM_TOLERANCE)) {\n            problem =\n              `\"${path}\" is given a value of ${node.own}, below the ${node.childSize} its children add up to. ` +\n              'It is drawn at its children’s total, which has to fit.';\n          }\n          if (problem === null || warned.has(problem)) continue;\n          warned.add(problem);\n          // eslint-disable-next-line no-console -- dev-mode validation\n          console.warn(`[NGWR] <wr-treemap-chart>: ${problem}`);\n        }\n      });\n    }\n  }\n\n  /** The data, resolved: top-level nodes with every node below them. */\n  private readonly tree = computed(() => resolveNodes(this.data(), [], null, ''));\n\n  /** Every node, parents before their children, in the data's order. */\n  private readonly nodes = computed(() => flatten(this.tree()));\n\n  /** The whole: the area of every top-level node together, which every share is of. */\n  private readonly total = computed(() => this.tree().reduce((sum, node) => sum + node.size, 0));\n\n  /** The size the layout is cut for: the measured plot, or the fallback width at `height`. */\n  private readonly layoutBox = computed(() => this.box() ?? { width: FALLBACK_WIDTH, height: this.height() });\n\n  /**\n   * Every tile drawn, parents before their children, with its rectangle as percentages\n   * of the plot — `start` from the inline-start edge — and its figure as the tile writes it.\n   * Its position in this list is what the tooltip and the template know it by.\n   */\n  protected readonly tiles = computed(() => {\n    const { width, height } = this.layoutBox();\n    const placed: PlacedTile[] = [];\n    placeTiles(\n      this.tree(),\n      0,\n      { x: 0, y: 0, width, height },\n      { labels: this.showLabels(), values: this.showValues() },\n      placed\n    );\n    return placed.map(tile => ({\n      key: tile.node.key,\n      node: tile.node,\n      group: tile.group,\n      header: tile.header,\n      labelled: tile.labelled,\n      valued: tile.valued,\n      text: tile.node.value === null ? '' : this.numbers.label(tile.node.value),\n      start: percent((tile.rect.x / width) * 100),\n      top: percent((tile.rect.y / height) * 100),\n      width: percent((tile.rect.width / width) * 100),\n      height: percent((tile.rect.height / height) * 100),\n    }));\n  });\n\n  /** The height of a group's name strip, in px, for the stylesheet. */\n  protected readonly headerHeight = HEADER;\n\n  /**\n   * The figures for `dataTable`: the drawing's name as the caption, and a row per node with\n   * its value and its share of the whole, written as the tooltip writes them.\n   */\n  protected readonly tableData = computed<WrChartTableData>(() => ({\n    caption: this.resolvedAriaLabel(),\n    columns: [this.valueName(), this.shareName()],\n    groups: [\n      {\n        rows: this.nodes().map(node => ({\n          header: node.path.join(SEPARATOR),\n          cells: [node.value === null ? '' : this.numbers.value(node.value), this.share(node)],\n        })),\n      },\n    ],\n  }));\n\n  /**\n   * One tooltip for the whole chart, for the tile under the pointer: the node's swatch,\n   * its path and its value as the heading, and its share of the whole under it. It points\n   * at the tile from above. The pointer over a group's strip or its edge reads the group,\n   * with its total.\n   */\n  protected readonly tip = useChartTooltip(this.tooltip, index => {\n    const tile = this.tiles()[index];\n    const el = this.tileEls()[index]?.nativeElement;\n    if (!tile || !el) return null;\n    const { node } = tile;\n    const share = this.share(node);\n    return {\n      datum: {\n        label: node.path.join(SEPARATOR),\n        value: node.value === null ? '' : this.numbers.value(node.value),\n        color: node.color,\n        rows: share ? [{ label: this.shareName(), value: share }] : [],\n      },\n      anchor: el,\n    };\n  });\n\n  /**\n   * The tile under the pointer, heard once on the plot rather than on every tile: the\n   * nearest tile up from the element the pointer is over. A MOUSE event, as every chart's\n   * is: a tap fires the compatibility `mousemove` and no `pointermove`.\n   */\n  protected onPointerMove(event: MouseEvent): void {\n    const tile = (event.target as Element | null)?.closest<HTMLElement>('.wr-treemap-chart__tile');\n    const index = tile ? Number(tile.dataset['index']) : Number.NaN;\n    if (Number.isInteger(index) && index >= 0) this.tip.enter(index);\n    else this.tip.leave(event);\n  }\n\n  /** A node's share of the whole, through `percentFormat` or as a percentage in `LOCALE_ID`, or `''` for one with no area. */\n  private share(node: ResolvedNode): string {\n    const total = this.total();\n    if (node.size <= 0 || total <= 0) return '';\n    const share = node.size / total;\n    const custom = this.percentFormat();\n    if (custom) return custom(share);\n    return (share < 0.01 ? this.smallShares : this.shares).format(share);\n  }\n}\n\nexport type { WrTreemapNode } from './types';\n","@let active = tip.active();\n<!-- The drawing: one named image, every tile inside it positioned by percentages of it.\n     The tiles are siblings rather than nested, parents first, so a child is drawn over\n     its parent and leaving it for the parent's edge is a `mouseleave` like any other. -->\n<div\n  #plot\n  class=\"wr-treemap-chart__plot\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.height.px]=\"height()\"\n  (mousemove)=\"onPointerMove($event)\"\n  (mouseleave)=\"tip.leave($event)\"\n>\n  <!-- `inset-inline-start`, not `left`: the layout starts at the inline-start edge, and\n       under RTL the whole drawing mirrors with it. `data-index` is what the pointer\n       handler reads the tile off. -->\n  @for (tile of tiles(); track tile.key) {\n    <div\n      #tile\n      class=\"wr-treemap-chart__tile\"\n      [class.wr-treemap-chart__tile--group]=\"tile.group\"\n      [class.wr-treemap-chart__tile--leaf]=\"!tile.group\"\n      [class.wr-treemap-chart__tile--active]=\"$index === active\"\n      [attr.data-index]=\"$index\"\n      [style.--wr-treemap-chart-tile-color]=\"tile.node.color\"\n      [style.inset-inline-start.%]=\"tile.start\"\n      [style.top.%]=\"tile.top\"\n      [style.width.%]=\"tile.width\"\n      [style.height.%]=\"tile.height\"\n    >\n      <!-- A name takes its direction from its own text (`dir=\"auto\"`), so a Latin name in an\n           RTL tile is cut at its end, not its start, and a Hebrew one in an LTR tile too. A\n           value does the same, so `$120K` reads in its own order beside a Hebrew name. -->\n      @if (tile.header) {\n        <!-- As tall as the strip the layout left above the children, written here so the\n             stylesheet and the layout cannot disagree about it. -->\n        <span class=\"wr-treemap-chart__header\" [style.height.px]=\"headerHeight\">\n          <span class=\"wr-treemap-chart__label\" dir=\"auto\">{{ tile.node.label }}</span>\n          @if (showValues() && tile.text) {\n            <span class=\"wr-treemap-chart__value\" dir=\"auto\">{{ tile.text }}</span>\n          }\n        </span>\n      } @else if (tile.labelled) {\n        <span class=\"wr-treemap-chart__label\" dir=\"auto\">{{ tile.node.label }}</span>\n        @if (tile.valued && tile.text) {\n          <span class=\"wr-treemap-chart__value\" dir=\"auto\">{{ tile.text }}</span>\n        }\n      }\n    </div>\n  }\n</div>\n\n@if (dataTable()) {\n  <!-- The figures for a screen reader, beside the drawing's `img` and never inside it:\n       `img` makes everything it holds presentational. Clipped to nothing by its own\n       stylesheet, so it takes no room and draws nothing. -->\n  <wr-chart-table [data]=\"tableData()\" />\n}\n"],"mappings":"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"}