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