vue-data-ui 3.22.0 → 3.22.1

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

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