vue-data-ui 3.22.4 → 3.22.6

package/dist/vue-ui-treemap-B03c4RIy.js

@@ -0,0 +1,1713 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { At as t, Dt as n, Ht as r, J as i, Q as a, S as o, W as s, Wt as c, X as l, _t as u, at as d, b as f, i as ee, q as te, r as ne, t as re, w as ie, wt as ae } from "./lib-DRBJCmHW.js";
+import { t as oe } from "./useConfig-DYM3f6EI.js";
+import { t as se } from "./usePrinter-CRp5IW3v.js";
+import { n as ce, t as le } from "./BaseScanner-DZvpgOjM.js";
+import { t as ue } from "./useSvgExport-SVIsDot8.js";
+import { t as de } from "./useNestedProp-BEo2N1Db.js";
+import { t as fe } from "./useThemeCheck-C43Tcqmk.js";
+import { t as pe } from "./img-B_y5qDdm.js";
+import { n as me } from "./Title-C-p0ilWB.js";
+import { t as he } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { c as ge } from "./canvas-lib-BOP_HS11.js";
+import { t as _e } from "./useResponsive-BfnK0KxU.js";
+import { t as ve } from "./BaseIcon-DcUvOfxf.js";
+import { t as ye } from "./BaseLegendToggle-DFwIY5bE.js";
+import { t as be } from "./A11yDataTable-DdRsVULz.js";
+import { t as xe } from "./useUserOptionState-DK-_1ddE.js";
+import { t as Se } from "./useChartAccessibility-DYqac8yF.js";
+import { t as Ce } from "./Legend-D-635Kag.js";
+import { t as we } from "./usePrefersMotion-BC-CsqR1.js";
+import { t as Te } from "./usePanZoom-CYU3B4T3.js";
+import { t as Ee } from "./vue_ui_treemap-DoEtkRN6.js";
+import { Fragment as p, Teleport as De, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createSlots as Oe, createTextVNode as ke, createVNode as Ae, defineAsyncComponent as je, guardReactiveProps as y, mergeProps as Me, nextTick as Ne, normalizeClass as Pe, normalizeProps as b, normalizeStyle as x, onBeforeUnmount as Fe, onMounted as Ie, openBlock as S, ref as C, renderList as Le, renderSlot as w, resolveDynamicComponent as Re, shallowRef as T, toDisplayString as ze, toRefs as Be, unref as E, useCssVars as Ve, useSlots as He, watch as D, withCtx as O, withKeys as Ue, withModifiers as We } from "vue";
+//#region src/treemap.js
+function Ge(e, t) {
+	let n = e.length;
+	if (n === 0) throw Error(`Max aspect ratio cannot be computed: ${e} is an empty array`);
+	{
+		let r = Infinity, i = -Infinity, a = 0;
+		for (let t = 0; t < n; t += 1) {
+			let n = e[t].normalizedValue;
+			n < r && (r = n), n > i && (i = n), a += n;
+		}
+		return Math.max(t ** 2 * i / a ** 2, a ** 2 / (t ** 2 * r));
+	}
+}
+function Ke(e) {
+	let { xOffset: t, yOffset: n, width: r, height: i } = e;
+	return {
+		x0: t,
+		y0: n,
+		x1: t + r,
+		y1: n + i
+	};
+}
+function qe(e, t, n) {
+	if (e.length === 0) return !0;
+	{
+		let r = e.concat(t);
+		return Ge(e, n) >= Ge(r, n);
+	}
+}
+function Je(e) {
+	let t = [], n = e.length;
+	for (let r = 0; r < n; r += 1) {
+		let n = e[r], i = n.length;
+		for (let e = 0; e < i; e += 1) t.push(n[e]);
+	}
+	return t;
+}
+function Ye(e, t) {
+	return nt({
+		...t,
+		children: e
+	});
+}
+function Xe(e) {
+	return (e.x1 - e.x0) * (e.y1 - e.y0);
+}
+function Ze(e, t) {
+	let { width: n, height: r, xOffset: i, yOffset: a } = et(t), o = e.length, s = e.map((e) => e.normalizedValue || 0).reduce((e, t) => e + t, 0), c = s / r, l = s / n, u = i, d = a, f = [];
+	if (n >= r) {
+		for (let t = 0; t < o; t += 1) {
+			let n = e[t], r = d + n.normalizedValue / c, i = {
+				x0: u,
+				y0: d,
+				x1: u + c,
+				y1: r
+			}, a = Object.assign({}, n, i);
+			d = r, f.push(a);
+		}
+		return f;
+	} else {
+		for (let t = 0; t < o; t += 1) {
+			let n = e[t], r = u + n.normalizedValue / l, i = {
+				x0: u,
+				y0: d,
+				x1: r,
+				y1: d + l
+			}, a = Object.assign({}, n, i);
+			u = r, f.push(a);
+		}
+		return f;
+	}
+}
+function Qe(e) {
+	let t = et(e), n = t.width, r = t.height;
+	return Math.min(n, r);
+}
+function $e(e, t) {
+	let n = e.length, r = t / e.map((e) => e.value ?? 0).reduce((e, t) => e + t, 0), i = [], a, o;
+	for (let t = 0; t < n; t += 1) o = e[t], a = Object.assign({}, o, { normalizedValue: o.value * (r || 0) }), i.push(a);
+	return i;
+}
+function et(e) {
+	let { x0: t, y0: n, x1: r, y1: i } = e;
+	return {
+		xOffset: t,
+		yOffset: n,
+		width: r - t,
+		height: i - n
+	};
+}
+function tt(e, t, n, r) {
+	let i = e, a = t, o = n, s = r;
+	for (;;) {
+		let e = i.length;
+		if (e === 0) {
+			let e = Ze(a, o);
+			return s.concat(e);
+		}
+		let t = Qe(o), n = i[0], r = i.slice(1, e);
+		if (qe(a, n, t)) {
+			let e = a.concat(n);
+			i = r, a = e, o = o, s = s;
+		} else {
+			let e = a.length, t = 0;
+			for (let n = 0; n < e; n += 1) t += a[n].normalizedValue;
+			let n = k(o, t), r = Ze(a, o), c = s.concat(r);
+			i = i, a = [], o = n, s = c;
+		}
+	}
+}
+function nt(e) {
+	if (e.children === void 0 || !e.children.length) return [e];
+	{
+		let t = tt($e(e.children, Xe(e)), [], e, []), n = t.length, r = [];
+		for (let e = 0; e < n; e += 1) r.push(nt(t[e]));
+		return Je(r);
+	}
+}
+function k(e, t) {
+	let { width: n, height: r, xOffset: i, yOffset: a } = et(e);
+	if (n >= r) {
+		let e = t / r, o = n - e;
+		return Ke({
+			xOffset: i + e,
+			yOffset: a,
+			width: o,
+			height: r
+		});
+	} else {
+		let e = t / n, o = r - e;
+		return Ke({
+			xOffset: i,
+			yOffset: a + e,
+			width: n,
+			height: o
+		});
+	}
+}
+//#endregion
+//#region src/components/vue-ui-treemap.vue
+var rt = /* @__PURE__ */ e({ default: () => Nt }), it = ["id"], at = ["id"], ot = ["id"], st = [
+	"tabindex",
+	"onClick",
+	"onKeydown",
+	"data-last-crumb",
+	"onMouseenter",
+	"onFocus"
+], ct = { class: "vue-ui-treemap-crumb-unit" }, lt = { class: "vue-ui-treemap-crumb-unit-label" }, ut = {
+	key: 0,
+	style: {
+		width: "24px",
+		display: "flex",
+		"align-items": "center"
+	}
+}, dt = {
+	key: 0,
+	class: "vue-ui-treemap-crumb-unit-arrow"
+}, ft = { style: { position: "relative" } }, pt = [
+	"xmlns",
+	"aria-describedby",
+	"viewBox"
+], mt = { key: 0 }, ht = ["id"], gt = ["stop-color"], _t = ["stop-color"], vt = [
+	"x",
+	"y",
+	"height",
+	"width",
+	"fill",
+	"rx",
+	"stroke",
+	"stroke-width",
+	"onClick",
+	"onMouseenter",
+	"onMouseleave"
+], yt = ["id"], bt = [
+	"x",
+	"y",
+	"width",
+	"height"
+], xt = ["clip-path"], St = [
+	"transform",
+	"fill",
+	"font-size",
+	"font-family",
+	"font-weight"
+], Ct = { key: 0 }, wt = [
+	"x",
+	"y",
+	"height",
+	"width"
+], Tt = {
+	style: {
+		width: "100%",
+		height: "100%",
+		overflow: "hidden"
+	},
+	class: "vue-ui-treemap-cell"
+}, Et = {
+	key: 0,
+	"data-dom-to-png-ignore": "",
+	class: "reset-wrapper"
+}, Dt = {
+	key: 1,
+	style: {
+		position: "absolute",
+		top: "100%",
+		left: "0",
+		width: "100%"
+	},
+	"data-dom-to-png-ignore": "",
+	"aria-hidden": "true"
+}, Ot = {
+	key: 6,
+	class: "vue-data-ui-watermark"
+}, kt = ["id"], At = ["onClick"], jt = ["innerHTML"], Mt = 4, Nt = /*#__PURE__*/ he({
+	__name: "vue-ui-treemap",
+	props: {
+		config: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		dataset: {
+			type: Array,
+			default() {
+				return [];
+			}
+		}
+	},
+	emits: [
+		"selectLegend",
+		"selectDatapoint",
+		"copyAlt"
+	],
+	setup(e, { expose: he, emit: Ge }) {
+		Ve((e) => ({ v76935d24: pi.value }));
+		let Ke = je(() => import("./DataTable-CXfvIulC.js")), qe = je(() => import("./PenAndPaper-Bk2-E7V4.js").then((e) => e.t)), Je = je(() => import("./vue-ui-accordion-CfMrbDoq.js").then((e) => e.n)), Xe = je(() => import("./Tooltip-YabpoXo1.js")), Ze = je(() => import("./UserOptions-BO4VFL8O.js").then((e) => e.n)), Qe = je(() => import("./PackageVersion-Da7hl-34.js").then((e) => e.t)), $e = je(() => import("./BaseDraggableDialog-VbypEaAa.js").then((e) => e.n)), { vue_ui_treemap: et } = oe(), { isThemeValid: tt, warnInvalidTheme: nt } = fe(), k = e, rt = Ge, Nt = He(), Pt = we();
+		Ie(() => {
+			Nt["chart-background"] && console.warn("VueUiTreemap does not support the #chart-background slot.");
+		});
+		let Ft = m(() => !!k.dataset && k.dataset.length), It = m(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), A = C(s()), Lt = C(!1), Rt = C(""), zt = C(!1), Bt = C(0), j = C([]), M = T(null), Vt = T(null), Ht = T(null), Ut = T(null), Wt = T(null), Gt = C(0), Kt = C(0), qt = C(0), N = C([]), Jt = C(null), Yt = C(!1), Xt = C(null), Zt = C(null), Qt = C(null), $t = C(/* @__PURE__ */ new Map()), en = C(!1), tn = C(!1), P = C(null), nn = C({
+			x: 0,
+			y: 0
+		}), rn = C("pointer"), an = C(!1), F = C(fn()), I = m(() => F.value.userOptions.useCursorPointer), on = m(() => c({
+			defaultConfig: {
+				userOptions: { show: !1 },
+				style: { chart: {
+					backgroundColor: "#999999",
+					layout: {
+						labels: { showDefaultLabels: !1 },
+						rects: { stroke: "#6A6A6A" }
+					},
+					legend: { backgroundColor: "transparent" }
+				} }
+			},
+			userConfig: F.value.skeletonConfig ?? {}
+		})), { loading: L, FINAL_DATASET: sn, manualLoading: cn } = ce({
+			...Be(k),
+			FINAL_CONFIG: F,
+			prepareConfig: fn,
+			skeletonDataset: k.config?.skeletonDataset ?? [{
+				name: "_",
+				value: 53,
+				color: "#CACACA90",
+				children: [
+					{
+						name: "_",
+						value: 21
+					},
+					{
+						name: "_",
+						value: 13
+					},
+					{
+						name: "_",
+						value: 8
+					},
+					{
+						name: "_",
+						value: 5
+					},
+					{
+						name: "_",
+						value: 3
+					},
+					{
+						name: "_",
+						value: 2
+					},
+					{
+						name: "_",
+						value: 1
+					}
+				]
+			}],
+			skeletonConfig: c({
+				defaultConfig: F.value,
+				userConfig: on.value
+			})
+		}), { userOptionsVisible: ln, setUserOptionsVisibility: un, keepUserOptionState: dn } = xe({ config: F.value }), { svgRef: R } = Se({ config: F.value.style.chart.title });
+		function fn() {
+			let e = de({
+				userConfig: k.config,
+				defaultConfig: et
+			}), n = e.theme;
+			if (!n) return e;
+			if (!tt.value(e)) return nt(e), e;
+			let i = de({
+				userConfig: Ee[n] || k.config,
+				defaultConfig: e
+			}), a = de({
+				userConfig: k.config,
+				defaultConfig: i
+			});
+			return {
+				...a,
+				customPalette: a.customPalette.length ? a.customPalette : r[n] || t
+			};
+		}
+		D(() => k.config, (e) => {
+			L.value || (F.value = fn()), ln.value = !F.value.userOptions.showOnChartHover, Gt.value += 1, Kt.value += 1, qt.value += 1, z.value.showTable = F.value.table.show, z.value.showTooltip = F.value.style.chart.tooltip.show, z.value.showZoom = F.value.style.chart.zoom?.show ?? !1;
+		}, { deep: !0 });
+		let { isPrinting: pn, isImaging: mn, generatePdf: hn, generateImage: gn } = se({
+			elementId: `treemap_${A.value}`,
+			fileName: F.value.style.chart.title.text || "vue-ui-treemap",
+			options: F.value.userOptions.print
+		}), _n = m(() => F.value.userOptions.show && !F.value.style.chart.title.text), vn = m(() => o(F.value.customPalette)), z = C({
+			showTable: F.value.table.show,
+			showTooltip: F.value.style.chart.tooltip.show,
+			showZoom: F.value.style.chart.zoom?.show ?? !1
+		});
+		D(F, () => {
+			z.value = {
+				showTable: F.value.table.show,
+				showTooltip: F.value.style.chart.tooltip.show,
+				showZoom: F.value.style.chart.zoom?.show ?? !1
+			};
+		}, { immediate: !0 });
+		let B = C({
+			height: F.value.style.chart.height,
+			width: F.value.style.chart.width
+		});
+		function yn(e) {
+			let t = M.value, n = B.value.height;
+			return !t || !n ? e : e * (n / t.getBoundingClientRect().height);
+		}
+		function bn() {
+			if (!Jt.value || X.value.length <= 1) return 0;
+			let e = Jt.value, t = getComputedStyle(e);
+			return yn(e.offsetHeight + parseFloat(t.marginTop || "0") + parseFloat(t.marginBottom || "0") + parseFloat(t.paddingTop || "0") + parseFloat(t.paddingBottom || "0"));
+		}
+		let V = m(() => {
+			let e = F.value.style.chart.padding, t = B.value.width, n = B.value.height, r = bn(), i = e.left, a = t - e.right, o = e.top, s = n - e.bottom - r;
+			return {
+				left: i,
+				top: o,
+				right: a,
+				bottom: s,
+				width: a - i,
+				height: Math.max(0, s - o),
+				vbWidth: t,
+				vbHeight: n - r,
+				offsetY: r
+			};
+		}), H = C(i(sn.value)), U = C(H.value), xn = T(/* @__PURE__ */ new Map());
+		D([H, () => F.value], () => {
+			Qt.value = null, $t.value = /* @__PURE__ */ new Map();
+		}, { deep: !0 }), D(() => j.value, () => {
+			Qt.value = null, $t.value = /* @__PURE__ */ new Map(), Tn(), qt.value += 1, Kt.value += 1;
+		}, { deep: !0 }), D([() => B.value.width, () => B.value.height], () => {
+			$t.value = /* @__PURE__ */ new Map();
+		});
+		function Sn(e) {
+			Array.isArray(e) && e.forEach((e, n) => {
+				e.id ||= s(), e.sourceColor === void 0 && (e.sourceColor = f(e.color) || null);
+				let r = e.sourceColor || xn.value.get(e.id) || vn.value[n] || t[n] || t[n % t.length];
+				r = f(r), xn.value.set(e.id, r), e.color = r, Cn(e, r);
+			});
+		}
+		function Cn(e, t) {
+			Array.isArray(e.children) && e.children.forEach((n) => {
+				n.id ||= s(), n.parentId = e.id, n.sourceColor === void 0 && (n.sourceColor = f(n.color) || null);
+				let r = n.sourceColor || t;
+				n.color = r, Cn(n, r);
+			});
+		}
+		function wn(e) {
+			let t = Y(e);
+			for (; t?.parentId;) t = Y(t.parentId);
+			return t?.id ?? null;
+		}
+		function Tn() {
+			let e = H.value.filter((e) => !j.value.includes(e.id));
+			if (!N.value.length) {
+				U.value = e;
+				return;
+			}
+			let t = N.value[N.value.length - 1], n = Y(t);
+			if (!n) {
+				N.value = [], U.value = e;
+				return;
+			}
+			let r = wn(n.id);
+			if (r && j.value.includes(r)) {
+				N.value = [], U.value = e;
+				return;
+			}
+			U.value = [n];
+		}
+		D(() => sn.value, () => {
+			H.value = i(sn.value), Sn(H.value), Tn(), qt.value += 1, Kt.value += 1;
+		}, {
+			deep: !0,
+			immediate: !0,
+			flush: "post"
+		});
+		let W = T(null), En = T(null);
+		Ie(() => {
+			Yt.value = !0, On();
+		});
+		let Dn = m(() => F.value.debug);
+		function On() {
+			if (n(k.dataset) && a({
+				componentName: "VueUiTreemap",
+				type: "dataset",
+				debug: Dn.value
+			}), Sn(H.value), n(k.dataset) || (cn.value = F.value.loading), F.value.responsive) {
+				let e = ge(() => {
+					let { width: e, height: t } = _e({
+						chart: M.value,
+						title: F.value.style.chart.title.text ? Vt.value : null,
+						legend: F.value.style.chart.legend.show ? Ht.value : null,
+						source: Ut.value,
+						noTitle: Wt.value
+					});
+					requestAnimationFrame(() => {
+						B.value.width = e, B.value.height = t - 12;
+					});
+				});
+				W.value && (En.value && W.value.unobserve(En.value), W.value.disconnect()), W.value = new ResizeObserver(e), En.value = M.value.parentNode, W.value.observe(En.value);
+			}
+		}
+		Fe(() => {
+			W.value && (En.value && W.value.unobserve(En.value), W.value.disconnect());
+		});
+		let kn = m(() => U.value.map((e, n) => ({
+			...e,
+			color: f(e.color) || vn.value[n] || t[n] || t[n % t.length]
+		})).filter((e) => !j.value.includes(e.id))), An = m(() => H.value.filter((e) => !j.value.includes(e.id)).map((e) => e.value || 0).reduce((e, t) => e + t, 0)), jn = m({
+			get() {
+				let e = [...kn.value];
+				return F.value.style.chart.layout.sorted && (e = [...kn.value].sort((e, t) => t.value - e.value)), e.map((e) => ({ ...e }));
+			},
+			set(e) {
+				return e;
+			}
+		});
+		function Mn(e, t) {
+			return e.value / t;
+		}
+		function Nn(e, t, n) {
+			let r = F.value.style.chart.layout.rects.colorRatio - Mn(t, n);
+			return ae(e, r < 0 ? 0 : r);
+		}
+		function Pn(e) {
+			return Array.isArray(e.children) && e.children.length > 0;
+		}
+		function Fn(e) {
+			return [...e].sort((e, t) => {
+				let n = Pn(e), r = Pn(t);
+				if (n !== r) return n - r;
+				let i = Number(e.value) || 0;
+				return (Number(t.value) || 0) - i;
+			});
+		}
+		function In(e, n, r, i, a) {
+			return Fn(e).map((e, o) => {
+				let s = e.sourceColor || f(e.color) || f(n) || vn.value[o] || t[o] || t[o % t.length], c = e.sourceColor ? e.sourceColor : Nn(s, e, i), l = Mn(e, i), u = a ?? e.parentId ?? e.id, d = Array.isArray(e.children) && e.children.length && e.children.reduce((e, t) => e + (Number(t.value) || 0), 0) || 1;
+				return {
+					...e,
+					color: c,
+					proportion: l,
+					parentName: r,
+					rootId: u,
+					children: Array.isArray(e.children) && e.children.length ? In(e.children, s, e.name, d, u) : void 0
+				};
+			});
+		}
+		function Ln(e) {
+			let t = Yn(e), n = Rn(e), r = t * .55, i = t * .55, a = t * 1.05, o = t * 1.05, s = t * .35, c = n ? a + o + s : t * .45, l = e.x0 + r, u = e.x1 - r, d = e.y0 + c, f = e.y1 - i;
+			return u <= l || f <= d ? null : {
+				x0: l,
+				y0: d,
+				x1: u,
+				y1: f
+			};
+		}
+		function Rn(e) {
+			return zn(e);
+		}
+		function zn(e) {
+			let t = Number(F.value.style.chart.layout.labels.hideUnderProportion);
+			return !Number.isFinite(t) || t <= 0 ? !0 : e.proportion > t;
+		}
+		function Bn(e, t, n = 0, r = null) {
+			if (!Array.isArray(e) || !e.length) return [];
+			let i = e.map((e) => {
+				let { children: t, ...n } = e;
+				return { ...n };
+			}), a = new Map(e.map((e) => [e.id, Array.isArray(e.children) ? e.children : []])), o = new Map(e.map((e) => [e.id, e])), s = Ye(i, t), c = [];
+			for (let e of s) {
+				let t = a.get(e.id) || [], i = o.get(e.id), s = {
+					...e,
+					depth: n,
+					parentId: r ?? e.parentId ?? null,
+					color: i?.color ?? e.color ?? null,
+					children: t,
+					isVisibleNode: !0,
+					showLabel: Rn(e)
+				};
+				if (c.push(s), t.length) {
+					let r = Ln(s);
+					r && c.push(...Bn(t, r, n + 1, e.id));
+				}
+			}
+			return c;
+		}
+		let Vn = m(() => {
+			let e = U.value.length ? U.value : jn.value, n = e.map((e) => Number(e.value) || 0).reduce((e, t) => e + t, 0) || 1;
+			return Bn(e.map((e, r) => {
+				let i = e.children ? e.children.reduce((e, t) => e + (Number(t.value) || 0), 0) : e.value, { children: a, ...o } = e, c = e.sourceColor || f(e.color) || xn.value.get(e.id) || vn.value[r] || t[r] || t[r % t.length], l = e.sourceColor ? e.sourceColor : Nn(c, e, n);
+				return {
+					...o,
+					id: e.id || s(),
+					parentId: e.parentId ?? null,
+					name: e.name,
+					value: e.value,
+					color: l,
+					proportion: (Number(e.value) || 0) / n,
+					children: Array.isArray(e.children) && e.children.length ? In(e.children, c, e.name, i || 1) : void 0
+				};
+			}), {
+				x0: V.value.left,
+				y0: V.value.top,
+				x1: V.value.left + V.value.width,
+				y1: V.value.top + V.value.height
+			});
+		}), G = m(() => Vn.value);
+		function K({ y0: e, y1: t }) {
+			return t - e <= 0 ? 1e-4 : t - e;
+		}
+		function q({ x0: e, x1: t }) {
+			return t - e <= 0 ? 1e-4 : t - e;
+		}
+		function Hn() {
+			let e = F.value.style.chart.layout.labels, t = Number(e.minFontSize), n = Number(e.fontSize), r = Math.max(0, Math.min(Number.isFinite(t) ? t : 0, Number.isFinite(n) ? n : 0));
+			return {
+				lowerBound: r,
+				upperBound: Math.max(r, Number.isFinite(n) ? n : r)
+			};
+		}
+		function Un(e) {
+			let t = Math.min(4, Math.max(e * .25, .5));
+			return {
+				paddingX: t,
+				paddingTop: t
+			};
+		}
+		function Wn(e, t) {
+			let { paddingX: n, paddingTop: r } = Un(t), i = t * 1.1;
+			return {
+				x: e.x0 + n,
+				y: e.y0 + r,
+				width: Math.max(q(e) - n * 2, 0),
+				height: Math.max(K(e) - r * 2, 0),
+				lineHeight: i
+			};
+		}
+		function Gn(e, t) {
+			return ee(F.value.style.chart.layout.labels.formatter, e.value, te({
+				p: F.value.style.chart.layout.labels.prefix,
+				v: e.value,
+				s: F.value.style.chart.layout.labels.suffix,
+				r: F.value.style.chart.tooltip.roundingValue
+			}), {
+				datapoint: e,
+				seriesIndex: t
+			});
+		}
+		function Kn(e, t) {
+			let n = Gn(e, t);
+			return Array.isArray(e.children) && e.children.length ? [`${e.name} (${n})`] : [`${e.name}`, n].filter((e) => `${e}`.length);
+		}
+		function qn(e, t, n) {
+			let r = Kn(e, n), i = Wn(e, t);
+			return !r.length || i.width <= 0 || i.height <= 0 || r.length * i.lineHeight > i.height ? !1 : r.every((e, n) => ri(e, t, n === 0 ? 500 : 400) <= i.width);
+		}
+		function Jn(e, t, n, r) {
+			let i = Kn(e, t), a = Math.max(1, ...i.map((e) => String(e).length)), o = Math.min(18, Math.max(10, Math.ceil(a * .7))), s = Math.max(1, i.length), c = Math.max(q(e) - 1, 1e-4), l = Math.max(K(e) - 1, 1e-4), u = c / (o * .58), d = l / (s * 1.35);
+			return Math.max(n, Math.min(r, u, d));
+		}
+		function Yn(e, t) {
+			let { lowerBound: n, upperBound: r } = Hn(), i = Math.max(1e-4, Math.min(q(e), K(e))), a = Math.max(n, Math.min(r, i * .9)), o = Math.min(a, Jn(e, t, n, r));
+			if (qn(e, o, t) || !qn(e, n, t)) return o;
+			let s = n, c = o, l = n;
+			for (let n = 0; n < 8; n += 1) {
+				let n = (s + c) / 2;
+				qn(e, n, t) ? (l = n, s = n) : c = n;
+			}
+			let u = Math.max(n, o * .7);
+			return l >= u ? l : o;
+		}
+		function Xn(e) {
+			zt.value = e, Bt.value += 1;
+		}
+		let J = m(() => ({
+			x: 0,
+			y: 0,
+			width: V.value.vbWidth,
+			height: V.value.vbHeight
+		}));
+		function Y(e, t = H.value) {
+			for (let n of t) {
+				if (n.id === e) return n;
+				if (n.children) {
+					let t = Y(e, n.children);
+					if (t) return t;
+				}
+			}
+			return null;
+		}
+		function Zn(e) {
+			let t = [], n = Y(e);
+			for (; n && n.parentId;) {
+				let e = Y(n.parentId);
+				if (!e) break;
+				t.unshift(e.id), n = e;
+			}
+			return t;
+		}
+		let Qn = m(() => N.value.length > 0);
+		function $n() {
+			U.value = H.value.slice(), N.value = [], rt("selectDatapoint", void 0);
+		}
+		function er() {
+			return N.value[N.value.length - 1] ?? null;
+		}
+		function tr(e, t, n) {
+			N.value = [...Zn(e.id), e.id], U.value = [e], F.value.events.datapointClick && F.value.events.datapointClick({
+				datapoint: t ?? e,
+				seriesIndex: n
+			}), rt("selectDatapoint", t ?? e);
+		}
+		function nr(e, t) {
+			let n = er();
+			if (!n) {
+				$n();
+				return;
+			}
+			let r = Y(n);
+			if (!r?.parentId) {
+				F.value.events.datapointClick && F.value.events.datapointClick({
+					datapoint: e,
+					seriesIndex: t
+				}), $n();
+				return;
+			}
+			let i = Y(r.parentId);
+			if (!i) {
+				$n();
+				return;
+			}
+			N.value = [...Zn(i.id), i.id], U.value = [i], F.value.events.datapointClick && F.value.events.datapointClick({
+				datapoint: e,
+				seriesIndex: t
+			}), rt("selectDatapoint", e);
+		}
+		function rr(e, t) {
+			if (!e) {
+				$n();
+				return;
+			}
+			let n = Y(e.id);
+			if (n) {
+				if (er() === n.id) {
+					nr(e, t);
+					return;
+				}
+				tr(n, e, t);
+			}
+		}
+		function ir(e) {
+			return e ? er() === e.id : !1;
+		}
+		let X = m(() => {
+			let e = [{
+				id: null,
+				label: "All"
+			}];
+			if (N.value.length > 0) {
+				let t = Y(N.value[N.value.length - 1]), n = [];
+				for (; t;) n.unshift(t), t = t.parentId ? Y(t.parentId) : null;
+				for (let t of n) e.push({
+					id: t.id,
+					label: t.name,
+					node: t
+				});
+			}
+			return e;
+		}), Z = T(null), ar = m(() => H.value.map((e, n) => ({
+			...e,
+			color: f(e.color) || vn.value[n] || t[n] || t[n % t.length],
+			shape: "square"
+		})).sort((e, t) => t.value - e.value).map((e, t) => {
+			let n = e.value / H.value.map((e) => e.value).reduce((e, t) => e + t, 0);
+			return {
+				...e,
+				proportion: n,
+				isSegregated: j.value.includes(e.id),
+				segregate: () => lr(e),
+				opacity: j.value.includes(e.id) ? .5 : 1,
+				display: `${e.name}${F.value.style.chart.legend.showPercentage || F.value.style.chart.legend.showValue ? ": " : ""}${F.value.style.chart.legend.showValue ? ee(F.value.style.chart.layout.labels.formatter, e.value, te({
+					p: F.value.style.chart.layout.labels.prefix,
+					v: e.value,
+					s: F.value.style.chart.layout.labels.suffix,
+					r: F.value.style.chart.legend.roundingValue
+				}), { datapoint: e }) : ""}${F.value.style.chart.legend.showPercentage ? j.value.includes(e.id) ? `${F.value.style.chart.legend.showValue ? " (" : ""}- %${F.value.style.chart.legend.showValue ? ")" : ""}` : `${F.value.style.chart.legend.showValue ? " (" : ""}${isNaN(e.value / An.value) ? "-" : (e.value / An.value * 100).toFixed(F.value.style.chart.legend.roundingPercentage)}%${F.value.style.chart.legend.showValue ? ")" : ""}` : ""}`
+			};
+		})), or = m(() => ({
+			cy: "treemap-div-legend",
+			backgroundColor: F.value.style.chart.legend.backgroundColor,
+			color: F.value.style.chart.legend.color,
+			fontSize: F.value.style.chart.legend.fontSize,
+			paddingBottom: 12,
+			fontWeight: F.value.style.chart.legend.bold ? "bold" : ""
+		})), sr = m(() => j.value.length === ar.value.length);
+		function cr() {
+			j.value.length ? j.value = [] : ar.value.forEach((e) => {
+				j.value.push(e.id);
+			}), rt("selectLegend", H.value.filter((e) => !j.value.includes(e.id)));
+		}
+		function lr(e) {
+			Z.value = null, j.value.includes(e.id) ? j.value = j.value.filter((t) => t !== e.id) : j.value.length < k.dataset.length - 1 && j.value.push(e.id), rt("selectLegend", H.value.filter((e) => !j.value.includes(e.id)));
+		}
+		function ur(e) {
+			return H.value.length ? H.value.find((t) => t.name === e) || (F.value.debug && console.warn(`VueUiTreemap - Series name not found "${e}"`), null) : (F.value.debug && console.warn("VueUiTreemap - There are no series to show."), null);
+		}
+		function dr(e) {
+			let t = ur(e);
+			t !== null && j.value.includes(t.id) && lr({ id: t.id });
+		}
+		function fr(e) {
+			let t = ur(e);
+			t !== null && (j.value.includes(t.id) || lr({ id: t.id }));
+		}
+		function pr({ datapoint: e, seriesIndex: t }) {
+			Z.value = null, Lt.value = !1, P.value = null, rn.value = "pointer", F.value.events.datapointLeave && F.value.events.datapointLeave({
+				datapoint: e,
+				seriesIndex: t
+			});
+		}
+		let mr = C(null);
+		function hr({ datapoint: e, seriesIndex: t, triggerMode: n = "pointer" }) {
+			if (sr.value || n === "pointer" && Tr.value) return;
+			F.value.events.datapointEnter && F.value.events.datapointEnter({
+				datapoint: e,
+				seriesIndex: t
+			}), P.value = t, rn.value = n, Z.value = e, mr.value = {
+				datapoint: e,
+				seriesIndex: t,
+				config: F.value,
+				series: kn.value
+			};
+			let r = F.value.style.chart.tooltip.customFormat;
+			if (u(r) && d(() => r({
+				seriesIndex: t,
+				datapoint: e,
+				series: kn.value,
+				config: F.value
+			}))) Rt.value = r({
+				seriesIndex: t,
+				datapoint: e,
+				series: kn.value,
+				config: F.value
+			});
+			else {
+				let n = "";
+				n += `<div style="width:100%;text-align:center;border-bottom:1px solid ${F.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${e.name}</div>`, n += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" height="12" width="12" stroke="none" fill="${e.color}"/></svg>`, n += `<b>${ee(F.value.style.chart.layout.labels.formatter, e.value, te({
+					p: F.value.style.chart.layout.labels.prefix,
+					v: e.value,
+					s: F.value.style.chart.layout.labels.suffix,
+					r: F.value.style.chart.tooltip.roundingValue
+				}), {
+					datapoint: e,
+					seriesIndex: t
+				})}</b>`, Rt.value = `<div>${n}</div>`;
+			}
+			Lt.value = !0;
+		}
+		let Q = m(() => ({
+			head: G.value.map((e) => ({
+				name: e.name,
+				color: e.color
+			})),
+			body: G.value.map((e) => e.value)
+		}));
+		function gr(e = null) {
+			Ne(() => {
+				let t = Q.value.head.map((e, t) => [
+					[e.name],
+					[Q.value.body[t]],
+					[isNaN(Q.value.body[t] / An.value) ? "-" : Q.value.body[t] / An.value * 100]
+				]), n = ie([
+					[F.value.style.chart.title.text],
+					[F.value.style.chart.title.subtitle.text],
+					[
+						[""],
+						["val"],
+						["%"]
+					]
+				].concat(t));
+				e ? e(n) : l({
+					csvContent: n,
+					title: F.value.style.chart.title.text || "vue-ui-treemap"
+				});
+			});
+		}
+		let _r = m(() => {
+			let e = [
+				F.value.table.columnNames.series,
+				F.value.table.columnNames.value,
+				F.value.table.columnNames.percentage
+			], t = Q.value.head.map((e, t) => {
+				let n = ee(F.value.style.chart.layout.labels.formatter, Q.value.body[t], te({
+					p: F.value.style.chart.layout.labels.prefix,
+					v: Q.value.body[t],
+					s: F.value.style.chart.layout.labels.suffix,
+					r: F.value.table.td.roundingValue
+				}));
+				return [
+					{
+						color: e.color,
+						name: e.name,
+						shape: "square"
+					},
+					n,
+					isNaN(Q.value.body[t] / An.value) ? "-" : te({
+						v: Q.value.body[t] / An.value * 100,
+						s: "%",
+						r: F.value.table.td.roundingPercentage
+					})
+				];
+			}), n = {
+				th: {
+					backgroundColor: F.value.table.th.backgroundColor,
+					color: F.value.table.th.color,
+					outline: F.value.table.th.outline
+				},
+				td: {
+					backgroundColor: F.value.table.td.backgroundColor,
+					color: F.value.table.td.color,
+					outline: F.value.table.td.outline
+				},
+				breakpoint: F.value.table.responsiveBreakpoint
+			};
+			return {
+				colNames: [F.value.table.columnNames.series, F.value.table.columnNames.value],
+				head: e,
+				body: t,
+				config: n
+			};
+		});
+		function vr() {
+			return G.value;
+		}
+		function yr() {
+			z.value.showTable = !z.value.showTable;
+		}
+		function br() {
+			z.value.showTooltip = !z.value.showTooltip;
+		}
+		function xr() {
+			z.value.showZoom = !z.value.showZoom;
+		}
+		let Sr = C(!1);
+		function Cr() {
+			Sr.value = !Sr.value;
+		}
+		let wr = m(() => !Sr.value && z.value.showZoom), Tr = C(null), Er = C(!1), { viewBox: $, resetZoom: Dr, isZoom: Or, setInitialViewBox: kr } = Te(R, {
+			x: J.value.x,
+			y: J.value.y,
+			width: Math.max(10, J.value.width),
+			height: Math.max(10, J.value.height)
+		}, 1, wr), Ar = m(() => z.value.showZoom || Or.value);
+		D([
+			() => J.value.x,
+			() => J.value.y,
+			() => J.value.width,
+			() => J.value.height
+		], () => {
+			Ne(() => {
+				kr({
+					x: J.value.x,
+					y: J.value.y,
+					width: Math.max(10, J.value.width),
+					height: Math.max(10, J.value.height)
+				});
+			});
+		}, { immediate: !0 });
+		function jr(e) {
+			wr.value && (e.button !== void 0 && e.button !== 0 || (Tr.value = {
+				x: e.clientX,
+				y: e.clientY
+			}, Er.value = !1));
+		}
+		function Mr(e) {
+			if (!wr.value || !Tr.value) return;
+			let t = e.clientX - Tr.value.x, n = e.clientY - Tr.value.y;
+			Math.hypot(t, n) > Mt && (Er.value = !0);
+		}
+		function Nr() {
+			Tr.value = null, Er.value && window.setTimeout(() => {
+				Er.value = !1;
+			}, 0);
+		}
+		function Pr(e, t) {
+			Er.value || rr(e, t);
+		}
+		let Fr = C(null);
+		function Ir(e) {
+			Fr.value = e;
+		}
+		function Lr() {
+			Fr.value = null;
+		}
+		async function Rr({ scale: e = 2 } = {}) {
+			if (!M.value) return;
+			let { width: t, height: n } = M.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await pe({
+				domElement: M.value,
+				base64: !0,
+				img: !0,
+				scale: e
+			});
+			return {
+				imageUri: i,
+				base64: a,
+				title: F.value.style.chart.title.text,
+				width: t,
+				height: n,
+				aspectRatio: r
+			};
+		}
+		let zr = m(() => {
+			let e = F.value.table.useDialog && !F.value.table.show, t = z.value.showTable;
+			return {
+				component: e ? $e : Je,
+				title: `${F.value.style.chart.title.text}${F.value.style.chart.title.subtitle.text ? `: ${F.value.style.chart.title.subtitle.text}` : ""}`,
+				props: e ? {
+					backgroundColor: F.value.table.th.backgroundColor,
+					color: F.value.table.th.color,
+					headerColor: F.value.table.th.color,
+					headerBg: F.value.table.th.backgroundColor,
+					isFullscreen: zt.value,
+					fullscreenParent: M.value,
+					forcedWidth: Math.min(800, window.innerWidth * .8),
+					isCursorPointer: I.value
+				} : {
+					hideDetails: !0,
+					config: {
+						open: t,
+						maxHeight: 1e4,
+						body: {
+							backgroundColor: F.value.style.chart.backgroundColor,
+							color: F.value.style.chart.color
+						},
+						head: {
+							backgroundColor: F.value.style.chart.backgroundColor,
+							color: F.value.style.chart.color
+						}
+					}
+				}
+			};
+		});
+		D(() => z.value.showTable, (e) => {
+			F.value.table.show || (e && F.value.table.useDialog && Xt.value ? Xt.value.open() : "close" in Xt.value && Xt.value.close());
+		});
+		function Br() {
+			z.value.showTable = !1, Zt.value && Zt.value.setTableIconState(!1);
+		}
+		let Vr = m(() => ar.value.map((e) => ({
+			...e,
+			name: e.display
+		}))), Hr = m(() => F.value.style.chart.backgroundColor), Ur = m(() => F.value.style.chart.legend), { exportSvg: Wr, getSvg: Gr } = ue({
+			svg: R,
+			title: m(() => F.value.style.chart.title),
+			legend: Ur,
+			legendItems: Vr,
+			backgroundColor: Hr
+		});
+		async function Kr({ isCb: e }) {
+			tn.value = !0, await Ne();
+			try {
+				if (e) {
+					let { blob: e, url: t, text: n, dataUrl: r } = await Gr();
+					await Promise.resolve(F.value.userOptions.callbacks.svg({
+						blob: e,
+						url: t,
+						text: n,
+						dataUrl: r
+					}));
+				} else await Promise.resolve(Wr());
+			} finally {
+				tn.value = !1;
+			}
+		}
+		function qr(e) {
+			if (e?.stage === "start") {
+				en.value = !0;
+				return;
+			}
+			if (e?.stage === "end") {
+				en.value = !1;
+				return;
+			}
+			gn();
+		}
+		function Jr(e, t) {
+			let n = Yn(e, t), { paddingX: r, paddingTop: i } = Un(n);
+			return {
+				fontSize: n,
+				paddingX: r,
+				paddingTop: i,
+				lineHeight: n * 1.1
+			};
+		}
+		function Yr(e, t) {
+			return Wn(e, Jr(e, t).fontSize);
+		}
+		function Xr(e) {
+			return ne(e.color ?? F.value.style.chart.backgroundColor);
+		}
+		function Zr(e, t) {
+			let { fontSize: n, lineHeight: r } = Jr(e, t), i = ii(e, t), a = ai(e, t);
+			if (i <= 0 || a <= 0) return [];
+			let o = Math.max(Math.floor(a / Math.max(r, 1e-4)), 1);
+			return Kn(e, t).slice(0, o).map((e) => String(e ?? "")).filter(Boolean);
+		}
+		function Qr({ rect: e, seriesIndex: t }) {
+			if (!e || !F.value.style.chart.layout.labels.showDefaultLabels || !Rn(e)) return null;
+			let { fontSize: n } = Jr(e, t), r = Xr(e), i = Zr(e, t), a = Yr(e, t);
+			if (!i.length || a.width <= 0 || a.height <= 0) return null;
+			let o = `treemap_clip_${A.value}_${e.id}`, s = e.x0, c = e.y0, l = Math.max(q(e), 0), u = Math.max(K(e), 0);
+			return {
+				key: $r(e),
+				clipId: o,
+				clipX: s,
+				clipY: c,
+				clipWidth: l,
+				clipHeight: u,
+				lines: i.map((t, i) => ({
+					key: `${e.id}_${i}`,
+					text: t,
+					x: a.x,
+					y: a.y + a.lineHeight * i,
+					fill: r,
+					fontSize: n,
+					fontFamily: F.value.style.fontFamily,
+					fontWeight: i === 0 ? 500 : 400
+				}))
+			};
+		}
+		function $r(e) {
+			return `${e.id}`;
+		}
+		let ei = m(() => Nt.rect || L.value || !F.value.style.chart.layout.labels.showDefaultLabels || sr.value ? [] : G.value.map((e, t) => e.showLabel ? Qr({
+			rect: e,
+			seriesIndex: t
+		}) : null).filter(Boolean)), ti;
+		function ni() {
+			return typeof document > "u" ? null : (ti ||= document.createElement("canvas"), ti.getContext("2d"));
+		}
+		function ri(e, t, n = 400) {
+			let r = ni();
+			return r ? (r.font = `${n} ${t}px ${F.value.style.fontFamily}`, r.measureText(String(e)).width) : e.length * t * .6;
+		}
+		function ii(e, t) {
+			return Yr(e, t).width;
+		}
+		function ai(e, t) {
+			return Yr(e, t).height;
+		}
+		function oi(e) {
+			let t = F.value.style.chart.layout.rects.borderRadius, n = q(e), r = K(e);
+			return Math.min(t, Math.min(n, r) / 6);
+		}
+		async function si() {
+			if (rt("copyAlt", {
+				config: F.value,
+				dataset: G.value
+			}), !F.value.userOptions.callbacks.altCopy) {
+				console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+				return;
+			}
+			await Promise.resolve(F.value.userOptions.callbacks.altCopy({
+				config: F.value,
+				dataset: G.value
+			}));
+		}
+		function ci() {
+			P.value = null, an.value = !0;
+		}
+		function li() {
+			P.value = null, rn.value = "pointer", Lt.value = !1, Z.value = null, an.value = !1;
+		}
+		function ui(e) {
+			if (!R.value || Sr.value || document.activeElement !== R.value || !G.value.length || sr.value) return;
+			let t = ["ArrowLeft", "ArrowUp"].includes(e.key), n = ["ArrowRight", "ArrowDown"].includes(e.key), r = e.key === "Enter" || e.key === " ", i = e.key === "Escape";
+			if (!t && !n && !r && !i) return;
+			if (e.preventDefault(), e.stopPropagation(), i) {
+				P.value = null, rn.value = "pointer", Lt.value = !1, Z.value = null;
+				return;
+			}
+			if (r) {
+				if (P.value === null) return;
+				let e = G.value[P.value];
+				if (!e) return;
+				rr(e, P.value);
+				return;
+			}
+			let a = P.value, o = Z.value ? G.value.findIndex((e) => e.id === Z.value.id) : null, s = a !== null && a >= 0 && a < G.value.length, c = o !== null && o >= 0 && o < G.value.length;
+			s ? n ? (a += 1, a >= G.value.length && (a = 0)) : t && (--a, a < 0 && (a = G.value.length - 1)) : c ? (a = n ? o + 1 : o - 1, a >= G.value.length && (a = 0), a < 0 && (a = G.value.length - 1)) : a = n ? 0 : G.value.length - 1;
+			let l = G.value[a];
+			l && (di(a), hr({
+				datapoint: l,
+				seriesIndex: a,
+				triggerMode: "keyboard"
+			}));
+		}
+		function di(e) {
+			if (!Number.isFinite(e) || !R.value) return;
+			let t = G.value[e];
+			if (!t) return;
+			let n = t.x0 + q(t) / 2, r = t.y0 + K(t) / 2, i = R.value.getBoundingClientRect();
+			nn.value = {
+				x: i.left + (n - $.value.x) / $.value.width * i.width,
+				y: i.top + (r - $.value.y) / $.value.height * i.height
+			};
+		}
+		let fi = m(() => ({
+			headers: _r.value?.colNames ?? [],
+			rows: _r.value?.body ?? []
+		})), pi = m(() => F.value.style.chart.color);
+		return he({
+			getData: vr,
+			getImage: Rr,
+			generateCsv: gr,
+			generateImage: gn,
+			generateSvg: Kr,
+			generatePdf: hn,
+			hideSeries: fr,
+			showSeries: dr,
+			toggleTable: yr,
+			toggleTooltip: br,
+			toggleZoom: xr,
+			toggleAnnotator: Cr,
+			toggleFullscreen: Xn,
+			resetZoom: Dr,
+			copyAlt: si
+		}), (e, t) => (S(), _("div", {
+			ref_key: "treemapChart",
+			ref: M,
+			class: Pe(`vue-data-ui-component vue-ui-treemap ${zt.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${F.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+			style: x(`font-family:${F.value.style.fontFamily};width:100%; ${F.value.responsive ? "height: 100%;" : ""} text-align:center;background:${F.value.style.chart.backgroundColor}`),
+			id: `treemap_${A.value}`,
+			onMouseenter: t[3] ||= () => E(un)(!0),
+			onMouseleave: t[4] ||= () => E(un)(!1)
+		}, [
+			v("div", {
+				id: `chart-instructions-${A.value}`,
+				class: "sr-only"
+			}, [v("p", null, ze(F.value.a11y.translations.keyboardNavigation), 1)], 8, at),
+			fi.value?.rows?.length ? (S(), h(be, {
+				key: 0,
+				uid: A.value,
+				head: fi.value.headers,
+				body: fi.value.rows,
+				notice: F.value.a11y.translations.tableAvailable,
+				caption: F.value.a11y.translations.tableCaption
+			}, null, 8, [
+				"uid",
+				"head",
+				"body",
+				"notice",
+				"caption"
+			])) : g("", !0),
+			F.value.userOptions.buttons.annotator ? (S(), h(E(qe), {
+				key: 1,
+				svgRef: E(R),
+				backgroundColor: F.value.style.chart.backgroundColor,
+				color: F.value.style.chart.color,
+				active: Sr.value,
+				isCursorPointer: I.value,
+				onClose: Cr
+			}, {
+				"annotator-action-close": O(() => [w(e.$slots, "annotator-action-close", {}, void 0, !0)]),
+				"annotator-action-color": O(({ color: t }) => [w(e.$slots, "annotator-action-color", b(y({ color: t })), void 0, !0)]),
+				"annotator-action-draw": O(({ mode: t }) => [w(e.$slots, "annotator-action-draw", b(y({ mode: t })), void 0, !0)]),
+				"annotator-action-undo": O(({ disabled: t }) => [w(e.$slots, "annotator-action-undo", b(y({ disabled: t })), void 0, !0)]),
+				"annotator-action-redo": O(({ disabled: t }) => [w(e.$slots, "annotator-action-redo", b(y({ disabled: t })), void 0, !0)]),
+				"annotator-action-delete": O(({ disabled: t }) => [w(e.$slots, "annotator-action-delete", b(y({ disabled: t })), void 0, !0)]),
+				_: 3
+			}, 8, [
+				"svgRef",
+				"backgroundColor",
+				"color",
+				"active",
+				"isCursorPointer"
+			])) : g("", !0),
+			_n.value ? (S(), _("div", {
+				key: 2,
+				ref_key: "noTitle",
+				ref: Wt,
+				class: "vue-data-ui-no-title-space",
+				style: "height:36px; width: 100%;background:transparent"
+			}, null, 512)) : g("", !0),
+			F.value.style.chart.title.text ? (S(), _("div", {
+				key: 3,
+				ref_key: "chartTitle",
+				ref: Vt,
+				style: x(`width:100%;background:${F.value.style.chart.backgroundColor};padding-bottom:6px`)
+			}, [(S(), h(me, {
+				key: `title_${Gt.value}`,
+				config: {
+					title: {
+						cy: "treemap-div-title",
+						...F.value.style.chart.title
+					},
+					subtitle: {
+						cy: "treemap-div-subtitle",
+						...F.value.style.chart.title.subtitle
+					}
+				}
+			}, null, 8, ["config"]))], 4)) : g("", !0),
+			v("div", { id: `legend-top-${A.value}` }, null, 8, ot),
+			F.value.userOptions.show && Ft.value && (E(dn) || E(ln)) ? (S(), h(E(Ze), {
+				ref_key: "userOptionsRef",
+				ref: Zt,
+				key: `user_option_${Bt.value}`,
+				backgroundColor: F.value.style.chart.backgroundColor,
+				color: F.value.style.chart.color,
+				isPrinting: E(pn),
+				isImaging: E(mn),
+				uid: A.value,
+				hasTooltip: F.value.userOptions.buttons.tooltip && F.value.style.chart.tooltip.show,
+				hasPdf: F.value.userOptions.buttons.pdf,
+				hasXls: F.value.userOptions.buttons.csv,
+				hasImg: F.value.userOptions.buttons.img,
+				hasSvg: F.value.userOptions.buttons.svg,
+				hasTable: F.value.userOptions.buttons.table,
+				hasFullscreen: F.value.userOptions.buttons.fullscreen,
+				hasAltCopy: F.value.userOptions.buttons.altCopy,
+				isFullscreen: zt.value,
+				isTooltip: z.value.showTooltip,
+				titles: { ...F.value.userOptions.buttonTitles },
+				chartElement: M.value,
+				position: F.value.userOptions.position,
+				hasAnnotator: F.value.userOptions.buttons.annotator,
+				isAnnotation: Sr.value,
+				callbacks: F.value.userOptions.callbacks,
+				printScale: F.value.userOptions.print.scale,
+				tableDialog: F.value.table.useDialog,
+				isCursorPointer: I.value,
+				hasZoom: F.value.userOptions.buttons.zoom,
+				isZoom: z.value.showZoom,
+				onToggleFullscreen: Xn,
+				onGeneratePdf: E(hn),
+				onGenerateCsv: gr,
+				onGenerateImage: qr,
+				onGenerateSvg: Kr,
+				onToggleTable: yr,
+				onToggleTooltip: br,
+				onToggleAnnotator: Cr,
+				onToggleZoom: xr,
+				onCopyAlt: si,
+				style: x({ visibility: E(dn) ? E(ln) ? "visible" : "hidden" : "visible" })
+			}, Oe({ _: 2 }, [
+				e.$slots.menuIcon ? {
+					name: "menuIcon",
+					fn: O(({ isOpen: t, color: n }) => [w(e.$slots, "menuIcon", b(y({
+						isOpen: t,
+						color: n
+					})), void 0, !0)]),
+					key: "0"
+				} : void 0,
+				e.$slots.optionTooltip ? {
+					name: "optionTooltip",
+					fn: O(() => [w(e.$slots, "optionTooltip", {}, void 0, !0)]),
+					key: "1"
+				} : void 0,
+				e.$slots.optionPdf ? {
+					name: "optionPdf",
+					fn: O(() => [w(e.$slots, "optionPdf", {}, void 0, !0)]),
+					key: "2"
+				} : void 0,
+				e.$slots.optionCsv ? {
+					name: "optionCsv",
+					fn: O(() => [w(e.$slots, "optionCsv", {}, void 0, !0)]),
+					key: "3"
+				} : void 0,
+				e.$slots.optionImg ? {
+					name: "optionImg",
+					fn: O(() => [w(e.$slots, "optionImg", {}, void 0, !0)]),
+					key: "4"
+				} : void 0,
+				e.$slots.optionSvg ? {
+					name: "optionSvg",
+					fn: O(() => [w(e.$slots, "optionSvg", {}, void 0, !0)]),
+					key: "5"
+				} : void 0,
+				e.$slots.optionTable ? {
+					name: "optionTable",
+					fn: O(() => [w(e.$slots, "optionTable", {}, void 0, !0)]),
+					key: "6"
+				} : void 0,
+				e.$slots.optionFullscreen ? {
+					name: "optionFullscreen",
+					fn: O(({ toggleFullscreen: t, isFullscreen: n }) => [w(e.$slots, "optionFullscreen", b(y({
+						toggleFullscreen: t,
+						isFullscreen: n
+					})), void 0, !0)]),
+					key: "7"
+				} : void 0,
+				e.$slots.optionAnnotator ? {
+					name: "optionAnnotator",
+					fn: O(({ toggleAnnotator: t, isAnnotator: n }) => [w(e.$slots, "optionAnnotator", b(y({
+						toggleAnnotator: t,
+						isAnnotator: n
+					})), void 0, !0)]),
+					key: "8"
+				} : void 0,
+				e.$slots.optionZoom ? {
+					name: "optionZoom",
+					fn: O(({ toggleZoom: t, isZoomLocked: n }) => [w(e.$slots, "optionZoom", b(y({
+						toggleZoom: t,
+						isZoomLocked: n
+					})), void 0, !0)]),
+					key: "9"
+				} : void 0,
+				e.$slots.optionAltCopy ? {
+					name: "optionAltCopy",
+					fn: O(({ altCopy: t }) => [w(e.$slots, "optionAltCopy", b(y({ altCopy: t })), void 0, !0)]),
+					key: "10"
+				} : void 0,
+				e.$slots["custom-menu-before"] ? {
+					name: "custom-menu-before",
+					fn: O(() => [w(e.$slots, "custom-menu-before", {}, void 0, !0)]),
+					key: "11"
+				} : void 0,
+				e.$slots["custom-menu-after"] ? {
+					name: "custom-menu-after",
+					fn: O(() => [w(e.$slots, "custom-menu-after", {}, void 0, !0)]),
+					key: "12"
+				} : void 0
+			]), 1032, /* @__PURE__ */ "backgroundColor.color.isPrinting.isImaging.uid.hasTooltip.hasPdf.hasXls.hasImg.hasSvg.hasTable.hasFullscreen.hasAltCopy.isFullscreen.isTooltip.titles.chartElement.position.hasAnnotator.isAnnotation.callbacks.printScale.tableDialog.isCursorPointer.hasZoom.isZoom.onGeneratePdf.style".split("."))) : g("", !0),
+			X.value.length > 1 ? (S(), _("nav", {
+				key: 5,
+				class: "vue-ui-treemap-breadcrumbs",
+				"data-dom-to-png-ignore": "",
+				ref_key: "breadcrumbsNav",
+				ref: Jt
+			}, [(S(!0), _(p, null, Le(X.value, (n, r) => (S(), _("span", {
+				role: "button",
+				tabindex: r < X.value.length - 1 ? 0 : void 0,
+				key: n.id || "root",
+				onClick: (e) => r === X.value.length - 1 ? () => {} : rr(n.node),
+				onKeydown: [Ue(We((e) => r === X.value.length - 1 ? void 0 : rr(n.node), ["prevent"]), ["enter"]), Ue(We((e) => r === X.value.length - 1 ? void 0 : rr(n.node), ["prevent"]), ["space"])],
+				class: "vue-ui-treemap-crumb",
+				"data-last-crumb": r === X.value.length - 1,
+				style: x({
+					color: F.value.style.chart.color,
+					cursor: I.value ? "pointer" : "default"
+				}),
+				onMouseenter: (e) => Ir(r),
+				onMouseleave: Lr,
+				onFocus: (e) => Ir(r),
+				onBlur: Lr
+			}, [v("span", ct, [v("span", lt, [w(e.$slots, "breadcrumb-label", Me({ ref_for: !0 }, {
+				crumb: n,
+				isRoot: r === 0,
+				isFocus: Fr.value === r
+			}), () => [r === 0 ? (S(), _("div", ut, [Ae(ve, {
+				name: Fr.value === 0 ? "homeFilled" : "home",
+				stroke: F.value.style.chart.color
+			}, null, 8, ["name", "stroke"])])) : (S(), _(p, { key: 1 }, [ke(ze(n.label), 1)], 64))], !0)]), r < X.value.length - 1 ? (S(), _("span", dt, [w(e.$slots, "breadcrumb-arrow", {}, () => [t[5] ||= ke(" › ", -1)], !0)])) : g("", !0)])], 44, st))), 128))], 512)) : g("", !0),
+			v("div", ft, [
+				(S(), _("svg", {
+					ref_key: "svgRef",
+					ref: R,
+					xmlns: E(re),
+					"aria-describedby": `chart-instructions-${A.value}`,
+					class: Pe({
+						"vue-data-ui-fullscreen--on": zt.value,
+						"vue-data-ui-fulscreen--off": !zt.value,
+						"vue-data-ui-zoom-plus": !Qn.value,
+						"vue-data-ui-zoom-minus": Qn.value,
+						"no-transition": E(Pt),
+						loading: E(L)
+					}),
+					viewBox: `${E($).x} ${E($).y} ${E($).width <= 0 ? 10 : E($).width} ${E($).height <= 0 ? 10 : E($).height}`,
+					style: x(`max-width:100%; overflow:${Ar.value ? "hidden" : "visible"}; background:transparent;color:${F.value.style.chart.color}`),
+					tabindex: "0",
+					onFocus: ci,
+					onBlur: li,
+					onKeydown: ui,
+					onPointerdown: jr,
+					onPointermove: Mr,
+					onPointerup: Nr,
+					onPointercancel: Nr,
+					onPointerleave: Nr
+				}, [
+					Ae(E(Qe)),
+					(S(!0), _(p, null, Le(G.value, (e, t) => (S(), _("g", { key: `tgrad_${e.id}` }, [F.value.style.chart.layout.rects.gradient.show ? (S(), _("defs", mt, [v("radialGradient", {
+						id: `tgrad_${e.id}`,
+						gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
+					}, [v("stop", {
+						offset: "18%",
+						"stop-color": e.color
+					}, null, 8, gt), v("stop", {
+						offset: "100%",
+						"stop-color": E(ae)(e.color, F.value.style.chart.layout.rects.gradient.intensity / 100)
+					}, null, 8, _t)], 8, ht)])) : g("", !0)]))), 128)),
+					v("g", null, [
+						(S(!0), _(p, null, Le(G.value, (e, t) => (S(), _("g", { key: `rect_${e.id}_${e.depth}` }, [v("rect", {
+							x: e.x0,
+							y: e.y0,
+							height: K(e),
+							width: q(e),
+							fill: It.value ? e.color ?? F.value.style.chart.backgroundColor : F.value.style.chart.layout.rects.gradient.show ? sr.value ? F.value.style.chart.backgroundColor : `url(#tgrad_${e.id})` : e.color ?? F.value.style.chart.backgroundColor,
+							rx: oi(e),
+							stroke: Z.value && Z.value.id === e.id ? F.value.style.chart.layout.rects.selected.stroke : F.value.style.chart.layout.rects.stroke,
+							"stroke-width": Z.value && Z.value.id === e.id ? F.value.style.chart.layout.rects.selected.strokeWidth : F.value.style.chart.layout.rects.strokeWidth,
+							onClick: We((n) => Pr(e, t), ["stop"]),
+							onMouseenter: () => hr({
+								datapoint: e,
+								seriesIndex: t,
+								triggerMode: "pointer"
+							}),
+							onMouseleave: (n) => pr({
+								datapoint: e,
+								seriesIndex: t
+							}),
+							style: x(`opacity:${Z.value ? Z.value.id === e.id ? 1 : F.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
+							class: Pe(["vue-ui-treemap-rect", ir(e) ? "vue-data-ui-zoom-minus" : "vue-data-ui-zoom-plus"])
+						}, null, 46, vt)]))), 128)),
+						(S(!0), _(p, null, Le(ei.value, (e) => (S(), _("g", {
+							key: e.key,
+							style: { "pointer-events": "none" }
+						}, [v("defs", null, [v("clipPath", {
+							id: e.clipId,
+							clipPathUnits: "userSpaceOnUse"
+						}, [v("rect", {
+							class: "vue-ui-treemap-data-label-clip",
+							x: e.clipX,
+							y: e.clipY,
+							width: e.clipWidth,
+							height: e.clipHeight
+						}, null, 8, bt)], 8, yt)]), v("g", { "clip-path": `url(#${e.clipId})` }, [(S(!0), _(p, null, Le(e.lines, (e) => (S(), _("text", {
+							key: e.key,
+							class: "vue-ui-treemap-data-label",
+							transform: `translate(${e.x}, ${e.y})`,
+							fill: e.fill,
+							"font-size": e.fontSize,
+							"font-family": e.fontFamily,
+							"font-weight": e.fontWeight,
+							"text-anchor": "start",
+							"dominant-baseline": "text-before-edge"
+						}, ze(e.text), 9, St))), 128))], 8, xt)]))), 128)),
+						e.$slots.rect ? (S(), _("g", Ct, [(S(!0), _(p, null, Le(G.value, (t, n) => (S(), _("g", { key: `slot_${t.id}_${t.depth}` }, [(S(), _("foreignObject", {
+							x: t.x0,
+							y: t.y0,
+							height: K(t),
+							width: q(t),
+							class: "vue-ui-treemap-cell-foreignObject",
+							style: {
+								"pointer-events": "none",
+								overflow: "hidden"
+							}
+						}, [v("div", Tt, [E(L) ? g("", !0) : w(e.$slots, "rect", Me({
+							key: 0,
+							ref_for: !0
+						}, {
+							rect: {
+								...t,
+								height: K(t),
+								width: q(t),
+								isSelected: Z.value ? Z.value.id === t.id : !0
+							},
+							shouldShow: zn(t) || Qn.value,
+							fontSize: Yn(t, n),
+							isZoom: Qn.value,
+							textColor: E(ne)(t.color)
+						}), void 0, !0)])], 8, wt))]))), 128))])) : g("", !0)
+					]),
+					w(e.$slots, "svg", b(y({
+						svg: V.value,
+						isZoom: Qn.value,
+						rect: Z.value,
+						config: F.value,
+						isPrintingImg: E(pn) || E(mn) || en.value,
+						isPrintingSvg: tn.value
+					})), void 0, !0)
+				], 46, pt)),
+				E(Or) ? (S(), _("div", Et, [w(e.$slots, "reset-action", { reset: E(Dr) }, () => [v("button", {
+					"data-cy-reset": "",
+					tabindex: "0",
+					role: "button",
+					class: "vue-data-ui-refresh-button",
+					style: x({
+						background: F.value.style.chart.backgroundColor,
+						cursor: I.value ? "pointer" : "default"
+					}),
+					onClick: t[0] ||= (e) => E(Dr)(!0)
+				}, [Ae(ve, {
+					name: "refresh",
+					stroke: F.value.style.chart.color
+				}, null, 8, ["stroke"])], 4)], !0)])) : g("", !0),
+				e.$slots.hint ? (S(), _("div", Dt, [w(e.$slots, "hint", b(y({
+					hint: F.value.a11y.translations.keyboardNavigation,
+					isVisible: an.value
+				})), void 0, !0)])) : g("", !0)
+			]),
+			e.$slots.watermark ? (S(), _("div", Ot, [w(e.$slots, "watermark", b(y({ isPrinting: E(pn) || E(mn) || en.value || tn.value })), void 0, !0)])) : g("", !0),
+			v("div", { id: `legend-bottom-${A.value}` }, null, 8, kt),
+			Yt.value && (F.value.style.chart.legend.show || e.$slots.legend) ? (S(), h(De, {
+				key: 7,
+				to: F.value.style.chart.legend.position === "top" ? `#legend-top-${A.value}` : `#legend-bottom-${A.value}`
+			}, [v("div", {
+				ref_key: "chartLegend",
+				ref: Ht
+			}, [w(e.$slots, "legend", { legend: ar.value }, () => [F.value.style.chart.legend.show ? (S(), h(Ce, {
+				key: `legend_${qt.value}`,
+				legendSet: ar.value,
+				config: or.value,
+				id: `treemap_legend_${A.value}`,
+				isCursorPointer: I.value,
+				onClickMarker: t[1] ||= ({ legend: e }) => lr(e)
+			}, {
+				item: O(({ legend: e, index: t }) => [E(L) ? g("", !0) : (S(), _("div", {
+					key: 0,
+					onClick: (t) => lr(e),
+					style: x(`opacity:${j.value.includes(e.id) ? .5 : 1}`)
+				}, ze(e.display), 13, At))]),
+				legendToggle: O(() => [ar.value.length > 2 && F.value.style.chart.legend.selectAllToggle.show && !E(L) ? (S(), h(ye, {
+					key: 0,
+					backgroundColor: F.value.style.chart.legend.selectAllToggle.backgroundColor,
+					color: F.value.style.chart.legend.selectAllToggle.color,
+					fontSize: F.value.style.chart.legend.fontSize,
+					checked: j.value.length > 0,
+					isCursorPointer: I.value,
+					onToggle: cr
+				}, null, 8, [
+					"backgroundColor",
+					"color",
+					"fontSize",
+					"checked",
+					"isCursorPointer"
+				])) : g("", !0)]),
+				_: 1
+			}, 8, [
+				"legendSet",
+				"config",
+				"id",
+				"isCursorPointer"
+			])) : g("", !0)], !0)], 512)], 8, ["to"])) : g("", !0),
+			e.$slots.source ? (S(), _("div", {
+				key: 8,
+				ref_key: "source",
+				ref: Ut,
+				dir: "auto"
+			}, [w(e.$slots, "source", {}, void 0, !0)], 512)) : g("", !0),
+			Ae(E(Xe), {
+				teleportTo: F.value.style.chart.tooltip.teleportTo,
+				show: z.value.showTooltip && Lt.value,
+				backgroundColor: F.value.style.chart.tooltip.backgroundColor,
+				color: F.value.style.chart.tooltip.color,
+				fontSize: F.value.style.chart.tooltip.fontSize,
+				borderRadius: F.value.style.chart.tooltip.borderRadius,
+				borderColor: F.value.style.chart.tooltip.borderColor,
+				borderWidth: F.value.style.chart.tooltip.borderWidth,
+				backgroundOpacity: F.value.style.chart.tooltip.backgroundOpacity,
+				position: F.value.style.chart.tooltip.position,
+				offsetX: F.value.style.chart.tooltip.offsetX,
+				offsetY: F.value.style.chart.tooltip.offsetY,
+				parent: M.value,
+				content: Rt.value,
+				isFullscreen: zt.value,
+				isCustom: E(u)(F.value.style.chart.tooltip.customFormat),
+				smooth: F.value.style.chart.tooltip.smooth,
+				backdropFilter: F.value.style.chart.tooltip.backdropFilter,
+				smoothForce: F.value.style.chart.tooltip.smoothForce,
+				smoothSnapThreshold: F.value.style.chart.tooltip.smoothSnapThreshold,
+				isA11yMode: rn.value === "keyboard",
+				a11yPosition: nn.value
+			}, {
+				"tooltip-before": O(() => [w(e.$slots, "tooltip-before", b(y({ ...mr.value })), void 0, !0)]),
+				tooltip: O(() => [w(e.$slots, "tooltip", b(y({ ...mr.value })), void 0, !0)]),
+				"tooltip-after": O(() => [w(e.$slots, "tooltip-after", b(y({ ...mr.value })), void 0, !0)]),
+				_: 3
+			}, 8, [
+				"teleportTo",
+				"show",
+				"backgroundColor",
+				"color",
+				"fontSize",
+				"borderRadius",
+				"borderColor",
+				"borderWidth",
+				"backgroundOpacity",
+				"position",
+				"offsetX",
+				"offsetY",
+				"parent",
+				"content",
+				"isFullscreen",
+				"isCustom",
+				"smooth",
+				"backdropFilter",
+				"smoothForce",
+				"smoothSnapThreshold",
+				"isA11yMode",
+				"a11yPosition"
+			]),
+			Ft.value && F.value.userOptions.buttons.table ? (S(), h(Re(zr.value.component), Me({ key: 9 }, zr.value.props, {
+				ref_key: "tableUnit",
+				ref: Xt,
+				onClose: Br
+			}), Oe({
+				content: O(() => [(S(), h(E(Ke), {
+					key: `table_${Kt.value}`,
+					colNames: _r.value.colNames,
+					head: _r.value.head,
+					body: _r.value.body,
+					config: _r.value.config,
+					title: F.value.table.useDialog ? "" : zr.value.title,
+					withCloseButton: !F.value.table.useDialog,
+					isCursorPointer: I.value,
+					onClose: Br
+				}, {
+					th: O(({ th: e }) => [v("div", {
+						innerHTML: e,
+						style: {
+							display: "flex",
+							"align-items": "center"
+						}
+					}, null, 8, jt)]),
+					td: O(({ td: e }) => [ke(ze(e.name || e), 1)]),
+					_: 1
+				}, 8, [
+					"colNames",
+					"head",
+					"body",
+					"config",
+					"title",
+					"withCloseButton",
+					"isCursorPointer"
+				]))]),
+				_: 2
+			}, [F.value.table.useDialog ? {
+				name: "title",
+				fn: O(() => [ke(ze(zr.value.title), 1)]),
+				key: "0"
+			} : void 0, F.value.table.useDialog ? {
+				name: "actions",
+				fn: O(() => [v("button", {
+					tabindex: "0",
+					class: "vue-ui-user-options-button",
+					onClick: t[2] ||= (e) => gr(F.value.userOptions.callbacks.csv),
+					style: x({ cursor: I.value ? "pointer" : "default" })
+				}, [Ae(ve, {
+					name: "fileCsv",
+					stroke: zr.value.props.color
+				}, null, 8, ["stroke"])], 4)]),
+				key: "1"
+			} : void 0]), 1040)) : g("", !0),
+			w(e.$slots, "skeleton", {}, () => [E(L) ? (S(), h(le, { key: 0 })) : g("", !0)], !0)
+		], 46, it));
+	}
+}, [["__scopeId", "data-v-442b6b44"]]);
+//#endregion
+export { rt as n, Nt as t };