vue-data-ui 3.17.2 → 3.17.4

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

@@ -0,0 +1,1748 @@
+import { defineAsyncComponent as be, useSlots as rl, onMounted as ao, computed as w, ref as g, shallowRef as se, toRefs as ul, watch as Ce, onBeforeUnmount as il, openBlock as c, createElementBlock as A, unref as y, normalizeStyle as he, normalizeClass as bt, createElementVNode as R, toDisplayString as Ne, createBlock as Q, createCommentVNode as F, withCtx as T, renderSlot as m, normalizeProps as B, guardReactiveProps as H, createSlots as no, Fragment as xe, renderList as Re, withKeys as so, withModifiers as Ct, mergeProps as wt, createVNode as Ye, createTextVNode as Ze, Teleport as cl, resolveDynamicComponent as dl, nextTick as ro } from "vue";
+import { j as je, t as uo, m as vl, p as z, n as hl, ag as io, o as co, q as fl, s as fe, k as kt, l as Ke, X as pl, x as vo, W as ho, T as fo, a0 as gl, a1 as yl, U as ml, az as bl } from "./lib-DMzrGQHK.js";
+import { t as Cl, u as wl } from "./useResponsive-DfdjqQps.js";
+import { u as kl } from "./useConfig-DTHxOX6V.js";
+import { u as $l, B as Tl } from "./BaseScanner-BON3d_Sx.js";
+import { u as xl } from "./usePrinter-C4t8DdQ-.js";
+import { u as Al } from "./useSvgExport-BTG4hVPO.js";
+import { u as $t } from "./useNestedProp-DH0BEVVS.js";
+import { u as Sl } from "./useThemeCheck-C9Ccl7U9.js";
+import { u as Il } from "./useUserOptionState-B7Ej974k.js";
+import { u as Ml } from "./useChartAccessibility-cp6XQtqi.js";
+import Ol from "./img-CjTQXS0U.js";
+import Pl from "./Title-BbKoiBk2.js";
+import _l from "./vue_ui_treemap-D9-AIkT-.js";
+import Ll from "./Legend-DGN5lY60.js";
+import po from "./BaseIcon-DX0hTWa-.js";
+import { A as Fl } from "./A11yDataTable-BpmuNomI.js";
+import { B as Nl } from "./BaseLegendToggle-cMP8M2u0.js";
+import { _ as Rl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function go(u, h) {
+  const d = u.length;
+  if (d === 0)
+    throw new Error(
+      `Max aspect ratio cannot be computed: ${u} is an empty array`
+    );
+  {
+    let f = 1 / 0, v = -1 / 0, b = 0;
+    for (let M = 0; M < d; M += 1) {
+      const x = u[M].normalizedValue;
+      x < f && (f = x), x > v && (v = x), b += x;
+    }
+    return Math.max(
+      h ** 2 * v / b ** 2,
+      b ** 2 / (h ** 2 * f)
+    );
+  }
+}
+function yo(u) {
+  const { xOffset: h, yOffset: d, width: f, height: v } = u;
+  return {
+    x0: h,
+    y0: d,
+    x1: h + f,
+    y1: d + v
+  };
+}
+function zl(u, h, d) {
+  if (u.length === 0)
+    return !0;
+  {
+    const f = u.concat(h), v = go(u, d), b = go(f, d);
+    return v >= b;
+  }
+}
+function Dl(u) {
+  const h = [], d = u.length;
+  for (let f = 0; f < d; f += 1) {
+    const v = u[f], b = v.length;
+    for (let p = 0; p < b; p += 1)
+      h.push(v[p]);
+  }
+  return h;
+}
+function Bl(u, h) {
+  const d = {
+    ...h,
+    children: u
+  };
+  return bo(d);
+}
+function Hl(u) {
+  return (u.x1 - u.x0) * (u.y1 - u.y0);
+}
+function mo(u, h) {
+  const { width: d, height: f, xOffset: v, yOffset: b } = Tt(h), p = u.length, M = u.map((C) => C.normalizedValue || 0).reduce((C, D) => C + D, 0), x = M / f, re = M / d;
+  let j = v, ee = b;
+  const U = [];
+  if (d >= f) {
+    for (let C = 0; C < p; C += 1) {
+      const D = u[C], te = ee + D.normalizedValue / x, ue = {
+        x0: j,
+        y0: ee,
+        x1: j + x,
+        y1: te
+      }, oe = Object.assign({}, D, ue);
+      ee = te, U.push(oe);
+    }
+    return U;
+  } else {
+    for (let C = 0; C < p; C += 1) {
+      const D = u[C], te = j + D.normalizedValue / re, ue = {
+        x0: j,
+        y0: ee,
+        x1: te,
+        y1: ee + re
+      }, oe = Object.assign({}, D, ue);
+      j = te, U.push(oe);
+    }
+    return U;
+  }
+}
+function Vl(u) {
+  const h = Tt(u), d = h.width, f = h.height;
+  return Math.min(d, f);
+}
+function El(u, h) {
+  const d = u.length, f = u.map((x) => x.value ?? 0).reduce((x, re) => x + re, 0), v = h / f, b = [];
+  let p, M;
+  for (let x = 0; x < d; x += 1)
+    M = u[x], p = Object.assign({}, M, {
+      normalizedValue: M.value * (v || 0)
+    }), b.push(p);
+  return b;
+}
+function Tt(u) {
+  const { x0: h, y0: d, x1: f, y1: v } = u;
+  return {
+    xOffset: h,
+    yOffset: d,
+    width: f - h,
+    height: v - d
+  };
+}
+function Ul(u, h, d, f) {
+  let v = u, b = h, p = d, M = f;
+  for (; ; ) {
+    const x = v.length;
+    if (x === 0) {
+      const U = mo(b, p);
+      return M.concat(U);
+    }
+    const re = Vl(p), j = v[0], ee = v.slice(1, x);
+    if (zl(b, j, re)) {
+      const U = b.concat(j);
+      v = ee, b = U, p = p, M = M;
+    } else {
+      const U = b.length;
+      let C = 0;
+      for (let oe = 0; oe < U; oe += 1)
+        C += b[oe].normalizedValue;
+      const D = Wl(p, C), te = mo(b, p), ue = M.concat(te);
+      v = v, b = [], p = D, M = ue;
+    }
+  }
+}
+function bo(u) {
+  if (typeof u.children > "u" || !u.children.length)
+    return [u];
+  {
+    const h = El(u.children, Hl(u)), d = Ul(h, [], u, []), f = d.length, v = [];
+    for (let p = 0; p < f; p += 1)
+      v.push(bo(d[p]));
+    return Dl(v);
+  }
+}
+function Wl(u, h) {
+  const { width: d, height: f, xOffset: v, yOffset: b } = Tt(u);
+  if (d >= f) {
+    const p = h / f, M = d - p, x = {
+      xOffset: v + p,
+      yOffset: b,
+      width: M,
+      height: f
+    };
+    return yo(x);
+  } else {
+    const p = h / d, M = f - p, x = {
+      xOffset: v,
+      yOffset: b + p,
+      width: d,
+      height: M
+    };
+    return yo(x);
+  }
+}
+const Xl = ["id"], Gl = ["id"], Yl = ["id"], Zl = ["tabindex", "onClick", "onKeydown", "data-last-crumb", "onMouseenter", "onFocus"], jl = { class: "vue-ui-treemap-crumb-unit" }, Kl = { class: "vue-ui-treemap-crumb-unit-label" }, ql = {
+  key: 0,
+  style: { width: "24px", display: "flex", "align-items": "center" }
+}, Jl = {
+  key: 0,
+  class: "vue-ui-treemap-crumb-unit-arrow"
+}, Ql = { style: { position: "relative" } }, ea = ["xmlns", "aria-describedby", "viewBox"], ta = { key: 0 }, oa = ["id"], la = ["stop-color"], aa = ["stop-color"], na = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter", "onMouseleave"], sa = ["innerHTML"], ra = ["x", "y", "height", "width"], ua = {
+  style: {
+    width: "100%",
+    height: "100%"
+  },
+  class: "vue-ui-treemap-cell"
+}, ia = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, ca = {
+  key: 6,
+  class: "vue-data-ui-watermark"
+}, da = ["id"], va = ["onClick"], ha = ["innerHTML"], fa = {
+  __name: "vue-ui-treemap",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint", "copyAlt"],
+  setup(u, { expose: h, emit: d }) {
+    const f = be(() => import("./DataTable-cMnb68Ik.js")), v = be(
+      () => import("./PenAndPaper-CJDoB5H9.js")
+    ), b = be(() => import("./vue-ui-accordion-BHmfmb_6.js")), p = be(() => import("./Tooltip-Cvt7Fi0Q.js")), M = be(
+      () => import("./UserOptions-DVduN6X7.js")
+    ), x = be(
+      () => import("./PackageVersion-DVvvyQXB.js")
+    ), re = be(
+      () => import("./BaseDraggableDialog-Di8Hlru3.js")
+    ), { vue_ui_treemap: j } = kl(), { isThemeValid: ee, warnInvalidTheme: U } = Sl(), C = u, D = d, te = rl();
+    ao(() => {
+      te["chart-background"] && console.warn(
+        "VueUiTreemap does not support the #chart-background slot."
+      );
+    });
+    const ue = w(() => !!C.dataset && C.dataset.length), oe = w(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), W = g(je()), Ae = g(!1), qe = g(""), pe = g(!1), xt = g(0), P = g([]), K = se(null), At = se(null), St = se(null), It = se(null), Mt = se(null), Ot = g(0), ze = g(0), De = g(0), V = g([]), Je = g(null), Pt = g(!1), Se = g(null), Qe = g(null), _t = g(null), et = g(/* @__PURE__ */ new Map()), Be = g(!1), He = g(!1), le = g(null), Lt = g({ x: 0, y: 0 }), Ie = g("pointer"), tt = g(!1), t = g(at()), ie = w(
+      () => t.value.userOptions.useCursorPointer
+    ), Co = w(() => uo({
+      defaultConfig: {
+        userOptions: { show: !1 },
+        style: {
+          chart: {
+            backgroundColor: "#999999",
+            layout: {
+              labels: {
+                showDefaultLabels: !1
+              },
+              rects: {
+                stroke: "#6A6A6A"
+              }
+            },
+            legend: {
+              backgroundColor: "transparent"
+            }
+          }
+        }
+      },
+      userConfig: t.value.skeletonConfig ?? {}
+    })), { loading: ge, FINAL_DATASET: ot, manualLoading: wo } = $l({
+      ...ul(C),
+      FINAL_CONFIG: t,
+      prepareConfig: at,
+      skeletonDataset: C.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: uo({
+        defaultConfig: t.value,
+        userConfig: Co.value
+      })
+    }), { userOptionsVisible: lt, setUserOptionsVisibility: Ft, keepUserOptionState: Nt } = Il({ config: t.value }), { svgRef: ye } = Ml({
+      config: t.value.style.chart.title
+    });
+    function at() {
+      const e = $t({
+        userConfig: C.config,
+        defaultConfig: j
+      }), l = e.theme;
+      if (!l) return e;
+      if (!ee.value(e))
+        return U(e), e;
+      const o = $t({
+        userConfig: _l[l] || C.config,
+        defaultConfig: e
+      }), a = $t({
+        userConfig: C.config,
+        defaultConfig: o
+      });
+      return {
+        ...a,
+        customPalette: a.customPalette.length ? a.customPalette : vl[l] || z
+      };
+    }
+    Ce(
+      () => C.config,
+      (e) => {
+        ge.value || (t.value = at()), lt.value = !t.value.userOptions.showOnChartHover, Ot.value += 1, ze.value += 1, De.value += 1, X.value.showTable = t.value.table.show, X.value.showTooltip = t.value.style.chart.tooltip.show;
+      },
+      { deep: !0 }
+    );
+    const { isPrinting: nt, isImaging: st, generatePdf: Rt, generateImage: zt } = xl({
+      elementId: `treemap_${W.value}`,
+      fileName: t.value.style.chart.title.text || "vue-ui-treemap",
+      options: t.value.userOptions.print
+    }), ko = w(() => t.value.userOptions.show && !t.value.style.chart.title.text), Me = w(() => hl(t.value.customPalette)), X = g({
+      showTable: t.value.table.show,
+      showTooltip: t.value.style.chart.tooltip.show
+    });
+    Ce(
+      t,
+      () => {
+        X.value = {
+          showTable: t.value.table.show,
+          showTooltip: t.value.style.chart.tooltip.show
+        };
+      },
+      { immediate: !0 }
+    );
+    const me = g({
+      height: t.value.style.chart.height,
+      width: t.value.style.chart.width
+    });
+    function $o(e) {
+      const l = K.value, o = me.value.height;
+      if (!l || !o) return e;
+      const a = l.getBoundingClientRect();
+      return e * (o / a.height);
+    }
+    function To() {
+      if (!Je.value || ae.value.length <= 1) return 0;
+      const e = Je.value, l = getComputedStyle(e), o = e.offsetHeight + parseFloat(l.marginTop || "0") + parseFloat(l.marginBottom || "0") + parseFloat(l.paddingTop || "0") + parseFloat(l.paddingBottom || "0");
+      return $o(o);
+    }
+    const G = w(() => {
+      const e = t.value.style.chart.padding, l = me.value.width, o = me.value.height, a = To(), n = e.left, s = l - e.right, r = e.top, k = o - e.bottom - a;
+      return {
+        left: n,
+        top: r,
+        right: s,
+        bottom: k,
+        width: s - n,
+        height: Math.max(0, k - r),
+        vbWidth: l,
+        vbHeight: o - a,
+        offsetY: a
+      };
+    }), E = g(io(ot.value)), q = g(E.value), rt = se(/* @__PURE__ */ new Map());
+    Ce(
+      [E, () => t.value],
+      () => {
+        _t.value = null, et.value = /* @__PURE__ */ new Map();
+      },
+      { deep: !0 }
+    ), Ce(
+      () => P.value,
+      () => {
+        _t.value = null, et.value = /* @__PURE__ */ new Map(), Ht(), De.value += 1, ze.value += 1;
+      },
+      { deep: !0 }
+    ), Ce(
+      [() => me.value.width, () => me.value.height],
+      () => {
+        et.value = /* @__PURE__ */ new Map();
+      }
+    );
+    function Dt(e) {
+      Array.isArray(e) && e.forEach((l, o) => {
+        l.id || (l.id = je()), l.sourceColor === void 0 && (l.sourceColor = fe(l.color) || null);
+        let a = l.sourceColor || rt.value.get(l.id) || Me.value[o] || z[o] || z[o % z.length];
+        a = fe(a), rt.value.set(l.id, a), l.color = a, Bt(l, a);
+      });
+    }
+    function Bt(e, l) {
+      Array.isArray(e.children) && e.children.forEach((o) => {
+        o.id || (o.id = je()), o.parentId = e.id, o.sourceColor === void 0 && (o.sourceColor = fe(o.color) || null);
+        const a = o.sourceColor || l;
+        o.color = a, Bt(o, a);
+      });
+    }
+    function xo(e) {
+      let l = Y(e);
+      for (; l?.parentId; )
+        l = Y(l.parentId);
+      return l?.id ?? null;
+    }
+    function Ht() {
+      const e = E.value.filter(
+        (n) => !P.value.includes(n.id)
+      );
+      if (!V.value.length) {
+        q.value = e;
+        return;
+      }
+      const l = V.value[V.value.length - 1], o = Y(l);
+      if (!o) {
+        V.value = [], q.value = e;
+        return;
+      }
+      const a = xo(o.id);
+      if (a && P.value.includes(a)) {
+        V.value = [], q.value = e;
+        return;
+      }
+      q.value = [o];
+    }
+    Ce(
+      () => ot.value,
+      () => {
+        E.value = io(ot.value), Dt(E.value), Ht(), De.value += 1, ze.value += 1;
+      },
+      { deep: !0, immediate: !0, flush: "post" }
+    );
+    const ce = se(null), we = se(null);
+    ao(() => {
+      Pt.value = !0, So();
+    });
+    const Ao = w(() => t.value.debug);
+    function So() {
+      if (co(C.dataset) && fl({
+        componentName: "VueUiTreemap",
+        type: "dataset",
+        debug: Ao.value
+      }), Dt(E.value), co(C.dataset) || (wo.value = t.value.loading), t.value.responsive) {
+        const e = Cl(() => {
+          const { width: l, height: o } = wl({
+            chart: K.value,
+            title: t.value.style.chart.title.text ? At.value : null,
+            legend: t.value.style.chart.legend.show ? St.value : null,
+            source: It.value,
+            noTitle: Mt.value
+          });
+          requestAnimationFrame(() => {
+            me.value.width = l, me.value.height = o - 12;
+          });
+        });
+        ce.value && (we.value && ce.value.unobserve(we.value), ce.value.disconnect()), ce.value = new ResizeObserver(e), we.value = K.value.parentNode, ce.value.observe(we.value);
+      }
+    }
+    il(() => {
+      ce.value && (we.value && ce.value.unobserve(we.value), ce.value.disconnect());
+    });
+    const Oe = w(() => q.value.map((e, l) => ({
+      ...e,
+      color: fe(e.color) || Me.value[l] || z[l] || z[l % z.length]
+    })).filter((e) => !P.value.includes(e.id))), ke = w(
+      () => E.value.filter((e) => !P.value.includes(e.id)).map((e) => e.value || 0).reduce((e, l) => e + l, 0)
+    ), Vt = w({
+      get() {
+        let e = [...Oe.value];
+        return t.value.style.chart.layout.sorted && (e = [...Oe.value].sort((l, o) => o.value - l.value)), e.map((l) => ({
+          ...l
+        }));
+      },
+      set(e) {
+        return e;
+      }
+    });
+    function Et(e, l) {
+      return e.value / l;
+    }
+    function Ut(e, l, o) {
+      const a = t.value.style.chart.layout.rects.colorRatio - Et(l, o);
+      return vo(e, a < 0 ? 0 : a);
+    }
+    function Wt(e) {
+      return Array.isArray(e.children) && e.children.length > 0;
+    }
+    function Io(e) {
+      return [...e].sort((l, o) => {
+        const a = Wt(l), n = Wt(o);
+        if (a !== n)
+          return a - n;
+        const s = Number(l.value) || 0;
+        return (Number(o.value) || 0) - s;
+      });
+    }
+    function Xt(e, l, o, a, n) {
+      return Io(e).map((r, k) => {
+        const S = r.sourceColor || fe(r.color) || fe(l) || Me.value[k] || z[k] || z[k % z.length], i = r.sourceColor ? r.sourceColor : Ut(S, r, a), $ = Et(r, a), I = n ?? r.parentId ?? r.id, _ = Array.isArray(r.children) && r.children.length && r.children.reduce(
+          (Z, L) => Z + (Number(L.value) || 0),
+          0
+        ) || 1;
+        return {
+          ...r,
+          color: i,
+          proportion: $,
+          parentName: o,
+          rootId: I,
+          children: Array.isArray(r.children) && r.children.length ? Xt(
+            r.children,
+            S,
+            r.name,
+            _,
+            I
+          ) : void 0
+        };
+      });
+    }
+    function Mo(e) {
+      const l = it(e), o = ut(e), a = l * 0.55, n = l * 0.55, s = l * 1.05, r = l * 1.05, k = l * 0.35, S = o ? s + r + k : l * 0.45, i = e.x0 + a, $ = e.x1 - a, I = e.y0 + S, _ = e.y1 - n;
+      return $ <= i || _ <= I ? null : { x0: i, y0: I, x1: $, y1: _ };
+    }
+    function ut(e) {
+      const { height: l, lineHeight: o, width: a } = Ge(e);
+      return l >= o && a > 6;
+    }
+    function Gt(e, l, o = 0, a = null) {
+      if (!Array.isArray(e) || !e.length) return [];
+      const n = e.map((i) => {
+        const { children: $, ...I } = i;
+        return {
+          ...I
+        };
+      }), s = new Map(
+        e.map((i) => [
+          i.id,
+          Array.isArray(i.children) ? i.children : []
+        ])
+      ), r = new Map(e.map((i) => [i.id, i])), k = Bl(n, l), S = [];
+      for (const i of k) {
+        const $ = s.get(i.id) || [], I = r.get(i.id), _ = {
+          ...i,
+          depth: o,
+          parentId: a ?? i.parentId ?? null,
+          color: I?.color ?? i.color ?? null,
+          children: $,
+          isVisibleNode: !0,
+          showLabel: ut(i)
+        };
+        if (S.push(_), $.length) {
+          const Z = Mo(_);
+          Z && S.push(
+            ...Gt(
+              $,
+              Z,
+              o + 1,
+              i.id
+            )
+          );
+        }
+      }
+      return S;
+    }
+    const Oo = w(() => {
+      const e = q.value.length ? q.value : Vt.value, l = e.map((n) => Number(n.value) || 0).reduce((n, s) => n + s, 0) || 1, o = e.map((n, s) => {
+        const r = n.children ? n.children.reduce(
+          (I, _) => I + (Number(_.value) || 0),
+          0
+        ) : n.value, { children: k, ...S } = n, i = n.sourceColor || fe(n.color) || rt.value.get(n.id) || Me.value[s] || z[s] || z[s % z.length], $ = n.sourceColor ? n.sourceColor : Ut(i, n, l);
+        return {
+          ...S,
+          id: n.id || je(),
+          parentId: n.parentId ?? null,
+          name: n.name,
+          value: n.value,
+          color: $,
+          proportion: (Number(n.value) || 0) / l,
+          children: Array.isArray(n.children) && n.children.length ? Xt(
+            n.children,
+            i,
+            n.name,
+            r || 1
+          ) : void 0
+        };
+      }), a = {
+        x0: G.value.left,
+        y0: G.value.top,
+        x1: G.value.left + G.value.width,
+        y1: G.value.top + G.value.height
+      };
+      return Gt(o, a);
+    }), O = w(() => Oo.value);
+    function de({ y0: e, y1: l }) {
+      return l - e <= 0 ? 1e-4 : l - e;
+    }
+    function ve({ x0: e, x1: l }) {
+      return l - e <= 0 ? 1e-4 : l - e;
+    }
+    function it(e) {
+      const l = t.value.style.chart.layout.labels, o = l.fontSize, a = l.minFontSize, n = l.fontSize * 2, s = 0.5, r = 0.6, k = 1, S = 0.9;
+      let i = e.proportion;
+      if (!(typeof i == "number" && isFinite(i))) {
+        const nl = Math.max(1e-6, ve(e) * de(e)), sl = Math.max(1e-6, G.value.width * G.value.height);
+        i = nl / sl;
+      }
+      const $ = Math.pow(
+        Math.min(1, Math.max(0, i)),
+        s
+      ), I = r + (k - r) * $, _ = Math.max(0, Number(e.depth) || 0), Z = Math.pow(0.9, _);
+      let L = o * I * Z;
+      const mt = Math.max(1e-4, Math.min(ve(e), de(e)));
+      return L = Math.min(L, mt * S), L = Math.min(L, n), L = Math.max(a, L), L;
+    }
+    function Yt(e) {
+      pe.value = e, xt.value += 1;
+    }
+    const J = w(() => ({
+      startX: 0,
+      startY: 0,
+      width: G.value.vbWidth,
+      height: G.value.vbHeight
+    }));
+    function Y(e, l = E.value) {
+      for (const o of l) {
+        if (o.id === e)
+          return o;
+        if (o.children) {
+          const a = Y(e, o.children);
+          if (a)
+            return a;
+        }
+      }
+      return null;
+    }
+    function Zt(e) {
+      const l = [];
+      let o = Y(e);
+      for (; o && o.parentId; ) {
+        const a = Y(o.parentId);
+        if (!a) break;
+        l.unshift(a.id), o = a;
+      }
+      return l;
+    }
+    const Pe = w(() => V.value.length > 0);
+    function Ve() {
+      q.value = E.value.slice(), V.value = [], D("selectDatapoint", void 0);
+    }
+    function ct() {
+      return V.value[V.value.length - 1] ?? null;
+    }
+    function Po(e, l, o) {
+      V.value = [...Zt(e.id), e.id], q.value = [e], t.value.events.datapointClick && t.value.events.datapointClick({
+        datapoint: l ?? e,
+        seriesIndex: o
+      }), D("selectDatapoint", l ?? e);
+    }
+    function _o(e, l) {
+      const o = ct();
+      if (!o) {
+        Ve();
+        return;
+      }
+      const a = Y(o);
+      if (!a?.parentId) {
+        t.value.events.datapointClick && t.value.events.datapointClick({
+          datapoint: e,
+          seriesIndex: l
+        }), Ve();
+        return;
+      }
+      const n = Y(a.parentId);
+      if (!n) {
+        Ve();
+        return;
+      }
+      V.value = [...Zt(n.id), n.id], q.value = [n], t.value.events.datapointClick && t.value.events.datapointClick({
+        datapoint: e,
+        seriesIndex: l
+      }), D("selectDatapoint", e);
+    }
+    function _e(e, l) {
+      if (!e) {
+        Ve();
+        return;
+      }
+      const o = Y(e.id);
+      if (!o) return;
+      if (ct() === o.id) {
+        _o(e, l);
+        return;
+      }
+      Po(o, e, l);
+    }
+    function Lo(e) {
+      return e ? ct() === e.id : !1;
+    }
+    const ae = w(() => {
+      const e = [{ id: null, label: "All" }];
+      if (V.value.length > 0) {
+        let l = Y(V.value[V.value.length - 1]);
+        const o = [];
+        for (; l; )
+          o.unshift(l), l = l.parentId ? Y(l.parentId) : null;
+        for (const a of o)
+          e.push({
+            id: a.id,
+            label: a.name,
+            node: a
+          });
+      }
+      return e;
+    }), N = se(null), $e = w(() => E.value.map((e, l) => ({
+      ...e,
+      color: fe(e.color) || Me.value[l] || z[l] || z[l % z.length],
+      shape: "square"
+    })).sort((e, l) => l.value - e.value).map((e, l) => {
+      const o = e.value / E.value.map((a) => a.value).reduce((a, n) => a + n, 0);
+      return {
+        ...e,
+        proportion: o,
+        opacity: P.value.includes(e.id) ? 0.5 : 1,
+        display: `${e.name}${t.value.style.chart.legend.showPercentage || t.value.style.chart.legend.showValue ? ": " : ""}${t.value.style.chart.legend.showValue ? kt(
+          t.value.style.chart.layout.labels.formatter,
+          e.value,
+          Ke({
+            p: t.value.style.chart.layout.labels.prefix,
+            v: e.value,
+            s: t.value.style.chart.layout.labels.suffix,
+            r: t.value.style.chart.legend.roundingValue
+          }),
+          { datapoint: e }
+        ) : ""}${t.value.style.chart.legend.showPercentage ? P.value.includes(e.id) ? `${t.value.style.chart.legend.showValue ? " (" : ""}- %${t.value.style.chart.legend.showValue ? ")" : ""}` : `${t.value.style.chart.legend.showValue ? " (" : ""}${isNaN(e.value / ke.value) ? "-" : (e.value / ke.value * 100).toFixed(t.value.style.chart.legend.roundingPercentage)}%${t.value.style.chart.legend.showValue ? ")" : ""}` : ""}`
+      };
+    })), Fo = w(() => ({
+      cy: "treemap-div-legend",
+      backgroundColor: t.value.style.chart.legend.backgroundColor,
+      color: t.value.style.chart.legend.color,
+      fontSize: t.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
+    })), Ee = w(
+      () => P.value.length === $e.value.length
+    );
+    function No() {
+      P.value.length ? P.value = [] : $e.value.forEach((e) => {
+        P.value.push(e.id);
+      });
+    }
+    function Ue(e) {
+      N.value = null, P.value.includes(e.id) ? P.value = P.value.filter((l) => l !== e.id) : P.value.length < C.dataset.length - 1 && P.value.push(e.id), D("selectLegend", Vt.value);
+    }
+    function jt(e) {
+      if (!E.value.length)
+        return t.value.debug && console.warn("VueUiTreemap - There are no series to show."), null;
+      const l = E.value.find((o) => o.name === e);
+      return l || (t.value.debug && console.warn(`VueUiTreemap - Series name not found "${e}"`), null);
+    }
+    function Ro(e) {
+      const l = jt(e);
+      l !== null && P.value.includes(l.id) && Ue({ id: l.id });
+    }
+    function zo(e) {
+      const l = jt(e);
+      l !== null && (P.value.includes(l.id) || Ue({ id: l.id }));
+    }
+    function Do({ datapoint: e, seriesIndex: l }) {
+      N.value = null, Ae.value = !1, le.value = null, Ie.value = "pointer", t.value.events.datapointLeave && t.value.events.datapointLeave({ datapoint: e, seriesIndex: l });
+    }
+    const We = g(null);
+    function Kt({ datapoint: e, seriesIndex: l, triggerMode: o = "pointer" }) {
+      if (Ee.value) return;
+      t.value.events.datapointEnter && t.value.events.datapointEnter({ datapoint: e, seriesIndex: l }), le.value = l, Ie.value = o, N.value = e, We.value = {
+        datapoint: e,
+        seriesIndex: l,
+        config: t.value,
+        series: Oe.value
+      };
+      const a = t.value.style.chart.tooltip.customFormat;
+      if (fo(a) && ml(
+        () => a({
+          seriesIndex: l,
+          datapoint: e,
+          series: Oe.value,
+          config: t.value
+        })
+      ))
+        qe.value = a({
+          seriesIndex: l,
+          datapoint: e,
+          series: Oe.value,
+          config: t.value
+        });
+      else {
+        let n = "";
+        n += `<div style="width:100%;text-align:center;border-bottom:1px solid ${t.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>${kt(
+          t.value.style.chart.layout.labels.formatter,
+          e.value,
+          Ke({
+            p: t.value.style.chart.layout.labels.prefix,
+            v: e.value,
+            s: t.value.style.chart.layout.labels.suffix,
+            r: t.value.style.chart.tooltip.roundingValue
+          }),
+          { datapoint: e, seriesIndex: l }
+        )}</b>`, qe.value = `<div>${n}</div>`;
+      }
+      Ae.value = !0;
+    }
+    const ne = w(() => {
+      const e = O.value.map((o) => ({
+        name: o.name,
+        color: o.color
+      })), l = O.value.map((o) => o.value);
+      return { head: e, body: l };
+    });
+    function dt(e = null) {
+      ro(() => {
+        const l = ne.value.head.map((n, s) => [
+          [n.name],
+          [ne.value.body[s]],
+          [
+            isNaN(ne.value.body[s] / ke.value) ? "-" : ne.value.body[s] / ke.value * 100
+          ]
+        ]), o = [
+          [t.value.style.chart.title.text],
+          [t.value.style.chart.title.subtitle.text],
+          [[""], ["val"], ["%"]]
+        ].concat(l), a = gl(o);
+        e ? e(a) : yl({
+          csvContent: a,
+          title: t.value.style.chart.title.text || "vue-ui-treemap"
+        });
+      });
+    }
+    const Te = w(() => {
+      const e = [
+        t.value.table.columnNames.series,
+        t.value.table.columnNames.value,
+        t.value.table.columnNames.percentage
+      ], l = ne.value.head.map((n, s) => {
+        const r = kt(
+          t.value.style.chart.layout.labels.formatter,
+          ne.value.body[s],
+          Ke({
+            p: t.value.style.chart.layout.labels.prefix,
+            v: ne.value.body[s],
+            s: t.value.style.chart.layout.labels.suffix,
+            r: t.value.table.td.roundingValue
+          })
+        );
+        return [
+          {
+            color: n.color,
+            name: n.name,
+            shape: "square"
+          },
+          r,
+          isNaN(ne.value.body[s] / ke.value) ? "-" : Ke({
+            v: ne.value.body[s] / ke.value * 100,
+            s: "%",
+            r: t.value.table.td.roundingPercentage
+          })
+        ];
+      }), o = {
+        th: {
+          backgroundColor: t.value.table.th.backgroundColor,
+          color: t.value.table.th.color,
+          outline: t.value.table.th.outline
+        },
+        td: {
+          backgroundColor: t.value.table.td.backgroundColor,
+          color: t.value.table.td.color,
+          outline: t.value.table.td.outline
+        },
+        breakpoint: t.value.table.responsiveBreakpoint
+      };
+      return {
+        colNames: [
+          t.value.table.columnNames.series,
+          t.value.table.columnNames.value
+        ],
+        head: e,
+        body: l,
+        config: o
+      };
+    });
+    function Bo() {
+      return O.value;
+    }
+    function qt() {
+      X.value.showTable = !X.value.showTable;
+    }
+    function Jt() {
+      X.value.showTooltip = !X.value.showTooltip;
+    }
+    const Le = g(!1);
+    function vt() {
+      Le.value = !Le.value;
+    }
+    const Xe = g(null);
+    function Qt(e) {
+      Xe.value = e;
+    }
+    function eo() {
+      Xe.value = null;
+    }
+    async function Ho({ scale: e = 2 } = {}) {
+      if (!K.value) return;
+      const { width: l, height: o } = K.value.getBoundingClientRect(), a = l / o, { imageUri: n, base64: s } = await Ol({
+        domElement: K.value,
+        base64: !0,
+        img: !0,
+        scale: e
+      });
+      return {
+        imageUri: n,
+        base64: s,
+        title: t.value.style.chart.title.text,
+        width: l,
+        height: o,
+        aspectRatio: a
+      };
+    }
+    const Fe = w(() => {
+      const e = t.value.table.useDialog && !t.value.table.show, l = X.value.showTable;
+      return {
+        component: e ? re : b,
+        title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? `: ${t.value.style.chart.title.subtitle.text}` : ""}`,
+        props: e ? {
+          backgroundColor: t.value.table.th.backgroundColor,
+          color: t.value.table.th.color,
+          headerColor: t.value.table.th.color,
+          headerBg: t.value.table.th.backgroundColor,
+          isFullscreen: pe.value,
+          fullscreenParent: K.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: ie.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: l,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: t.value.style.chart.backgroundColor,
+              color: t.value.style.chart.color
+            },
+            head: {
+              backgroundColor: t.value.style.chart.backgroundColor,
+              color: t.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    Ce(
+      () => X.value.showTable,
+      (e) => {
+        t.value.table.show || (e && t.value.table.useDialog && Se.value ? Se.value.open() : "close" in Se.value && Se.value.close());
+      }
+    );
+    function to() {
+      X.value.showTable = !1, Qe.value && Qe.value.setTableIconState(!1);
+    }
+    const Vo = w(() => $e.value.map((e) => ({
+      ...e,
+      name: e.display
+    }))), Eo = w(() => t.value.style.chart.backgroundColor), Uo = w(() => t.value.style.chart.legend), Wo = w(() => t.value.style.chart.title), { exportSvg: Xo, getSvg: Go } = Al({
+      svg: ye,
+      title: Wo,
+      legend: Uo,
+      legendItems: Vo,
+      backgroundColor: Eo
+    });
+    async function oo({ isCb: e }) {
+      He.value = !0, await ro();
+      try {
+        if (e) {
+          const { blob: l, url: o, text: a, dataUrl: n } = await Go();
+          await Promise.resolve(
+            t.value.userOptions.callbacks.svg({
+              blob: l,
+              url: o,
+              text: a,
+              dataUrl: n
+            })
+          );
+        } else
+          await Promise.resolve(Xo());
+      } finally {
+        He.value = !1;
+      }
+    }
+    function Yo(e) {
+      if (e?.stage === "start") {
+        Be.value = !0;
+        return;
+      }
+      if (e?.stage === "end") {
+        Be.value = !1;
+        return;
+      }
+      zt();
+    }
+    function ht(e) {
+      const l = it(e), o = Math.max(l * 0.5, 4), a = Math.max(l * 0.5, 4), n = l * 1.1;
+      return {
+        fontSize: l,
+        paddingX: o,
+        paddingTop: a,
+        lineHeight: n
+      };
+    }
+    function Ge(e) {
+      const { paddingX: l, paddingTop: o, lineHeight: a } = ht(e), n = e.x0 + l, s = e.y0 + o, r = Math.max(ve(e) - l * 2, 0), k = Math.max(de(e) - o * 2, 0);
+      return {
+        x: n,
+        y: s,
+        width: r,
+        height: k,
+        lineHeight: a
+      };
+    }
+    function Zo(e) {
+      return ho(
+        e.color ?? t.value.style.chart.backgroundColor
+      );
+    }
+    function jo(e) {
+      const { fontSize: l, lineHeight: o } = ht(e), a = qo(e), n = Jo(e);
+      if (a <= 0 || n <= 0)
+        return [];
+      const s = Math.max(
+        Math.floor(n / Math.max(o, 1)),
+        1
+      ), r = t.value.style.chart.layout.labels.value.prefix ?? "", k = t.value.style.chart.layout.labels.value.suffix ?? "", S = `${r}${e.value}${k}`, i = Math.ceil(l * 0.2), $ = Math.ceil(l * 1.4), I = Math.max(
+        a - $ - i,
+        0
+      );
+      if (I <= 0)
+        return [];
+      if (Array.isArray(e.children) && e.children.length) {
+        const L = gt(
+          `${e.name} (${S})`,
+          I,
+          l,
+          500
+        );
+        return L ? [L] : [];
+      }
+      const _ = [], Z = gt(
+        `${e.name}`,
+        I,
+        l,
+        500
+      );
+      if (Z && _.push(Z), s >= 2) {
+        const L = gt(
+          S,
+          I,
+          l,
+          400
+        );
+        L && _.push(L);
+      }
+      return _.slice(0, s);
+    }
+    let ft;
+    function Ko() {
+      return ft || (ft = document.createElement("canvas")), ft.getContext("2d");
+    }
+    function pt(e, l, o = 400) {
+      const a = Ko();
+      return a ? (a.font = `${o} ${l}px ${t.value.style.fontFamily}`, a.measureText(String(e)).width) : e.length * l * 0.6;
+    }
+    function gt(e, l, o, a = 400) {
+      const n = String(e ?? "");
+      if (!n.length || l <= 0)
+        return "";
+      if (pt(n, o, a) <= l)
+        return n;
+      const s = "…";
+      if (pt(
+        s,
+        o,
+        a
+      ) > l)
+        return "";
+      let k = 0, S = n.length, i = "";
+      for (; k <= S; ) {
+        const $ = Math.floor((k + S) / 2), I = `${n.slice(0, $)}${s}`;
+        pt(
+          I,
+          o,
+          a
+        ) <= l ? (i = I, k = $ + 1) : S = $ - 1;
+      }
+      return i || s;
+    }
+    function qo(e) {
+      return Ge(e).width;
+    }
+    function Jo(e) {
+      return Ge(e).height;
+    }
+    function Qo({ rect: e, seriesIndex: l, isTitle: o }) {
+      if (!e || !t.value.style.chart.layout.labels.showDefaultLabels || !ut(e))
+        return "";
+      const { fontSize: a } = ht(e), n = Zo(e), s = jo(e), r = Ge(e);
+      if (!s.length || r.width <= 0 || r.height <= 0)
+        return "";
+      const k = `treemap_clip_${W.value}_${e.id}_${e.depth}_${l}`, S = r.x, i = r.y, $ = Math.max(r.width, 0), I = Math.max(r.height, 0), _ = s.map((Z, L) => {
+        const mt = r.y + r.lineHeight * L;
+        return `
+                <text
+                    x="${r.x}"
+                    y="${mt}"
+                    fill="${n}"
+                    font-size="${a}"
+                    font-family="${t.value.style.fontFamily}"
+                    font-weight="${L === 0 ? 500 : 400}"
+                    text-anchor="start"
+                    dominant-baseline="text-before-edge"
+                >
+                    ${bl(Z)}
+                </text>
+            `;
+      }).join("");
+      return `
+        <g>
+            <defs>
+                <clipPath id="${k}" clipPathUnits="userSpaceOnUse">
+                    <rect
+                        x="${S}"
+                        y="${i}"
+                        width="${$}"
+                        height="${I}"
+                    />
+                </clipPath>
+            </defs>
+            <g clip-path="url(#${k})">
+                ${_}
+            </g>
+        </g>
+    `;
+    }
+    function el(e) {
+      const l = t.value.style.chart.layout.rects.borderRadius, o = ve(e), a = de(e);
+      return Math.min(l, Math.min(o, a) / 6);
+    }
+    async function lo() {
+      if (D("copyAlt", {
+        config: t.value,
+        dataset: O.value
+      }), !t.value.userOptions.callbacks.altCopy) {
+        console.warn(
+          "Vue Data UI - A callback must be set for `altCopy` in userOptions."
+        );
+        return;
+      }
+      await Promise.resolve(
+        t.value.userOptions.callbacks.altCopy({
+          config: t.value,
+          dataset: O.value
+        })
+      );
+    }
+    function tl() {
+      le.value = null, tt.value = !0;
+    }
+    function ol() {
+      le.value = null, Ie.value = "pointer", Ae.value = !1, N.value = null, tt.value = !1;
+    }
+    function ll(e) {
+      if (!ye.value || Le.value || document.activeElement !== ye.value || !O.value.length || Ee.value) return;
+      const l = ["ArrowLeft", "ArrowUp"].includes(e.key), o = ["ArrowRight", "ArrowDown"].includes(e.key), a = e.key === "Enter" || e.key === " ", n = e.key === "Escape";
+      if (!l && !o && !a && !n)
+        return;
+      if (e.preventDefault(), e.stopPropagation(), n) {
+        le.value = null, Ie.value = "pointer", Ae.value = !1, N.value = null;
+        return;
+      }
+      if (a) {
+        if (le.value === null) return;
+        const $ = O.value[le.value];
+        if (!$) return;
+        _e($, le.value);
+        return;
+      }
+      let s = le.value;
+      const r = N.value ? O.value.findIndex(
+        ($) => $.id === N.value.id
+      ) : null, k = s !== null && s >= 0 && s < O.value.length, S = r !== null && r >= 0 && r < O.value.length;
+      k ? o ? (s += 1, s >= O.value.length && (s = 0)) : l && (s -= 1, s < 0 && (s = O.value.length - 1)) : S ? (s = o ? r + 1 : r - 1, s >= O.value.length && (s = 0), s < 0 && (s = O.value.length - 1)) : o ? s = 0 : s = O.value.length - 1;
+      const i = O.value[s];
+      i && (al(s), Kt({
+        datapoint: i,
+        seriesIndex: s,
+        triggerMode: "keyboard"
+      }));
+    }
+    function al(e) {
+      if (!Number.isFinite(e) || !ye.value) return;
+      const l = O.value[e];
+      if (!l) return;
+      const o = l.x0 + ve(l) / 2, a = l.y0 + de(l) / 2, n = ye.value.getBoundingClientRect();
+      Lt.value = {
+        x: n.left + (o - J.value.startX) / J.value.width * n.width,
+        y: n.top + (a - J.value.startY) / J.value.height * n.height
+      };
+    }
+    const yt = w(() => {
+      const e = Te.value?.colNames ?? [], l = Te.value?.body ?? [];
+      return { headers: e, rows: l };
+    });
+    return h({
+      getData: Bo,
+      getImage: Ho,
+      generateCsv: dt,
+      generateImage: zt,
+      generateSvg: oo,
+      generatePdf: Rt,
+      hideSeries: zo,
+      showSeries: Ro,
+      toggleTable: qt,
+      toggleTooltip: Jt,
+      toggleAnnotator: vt,
+      toggleFullscreen: Yt,
+      copyAlt: lo
+    }), (e, l) => (c(), A("div", {
+      ref_key: "treemapChart",
+      ref: K,
+      class: bt(`vue-data-ui-component vue-ui-treemap ${pe.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${t.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: he(`font-family:${t.value.style.fontFamily};width:100%; ${t.value.responsive ? "height: 100%;" : ""} text-align:center;background:${t.value.style.chart.backgroundColor}`),
+      id: `treemap_${W.value}`,
+      onMouseenter: l[2] || (l[2] = () => y(Ft)(!0)),
+      onMouseleave: l[3] || (l[3] = () => y(Ft)(!1))
+    }, [
+      R("div", {
+        id: `chart-instructions-${W.value}`,
+        class: "sr-only"
+      }, [
+        R("p", null, Ne(t.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, Gl),
+      yt.value?.rows?.length ? (c(), Q(Fl, {
+        key: 0,
+        uid: W.value,
+        head: yt.value.headers,
+        body: yt.value.rows,
+        notice: t.value.a11y.translations.tableAvailable,
+        caption: t.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : F("", !0),
+      t.value.userOptions.buttons.annotator ? (c(), Q(y(v), {
+        key: 1,
+        svgRef: y(ye),
+        backgroundColor: t.value.style.chart.backgroundColor,
+        color: t.value.style.chart.color,
+        active: Le.value,
+        isCursorPointer: ie.value,
+        onClose: vt
+      }, {
+        "annotator-action-close": T(() => [
+          m(e.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": T(({ color: o }) => [
+          m(e.$slots, "annotator-action-color", B(H({ color: o })), void 0, !0)
+        ]),
+        "annotator-action-draw": T(({ mode: o }) => [
+          m(e.$slots, "annotator-action-draw", B(H({ mode: o })), void 0, !0)
+        ]),
+        "annotator-action-undo": T(({ disabled: o }) => [
+          m(e.$slots, "annotator-action-undo", B(H({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-redo": T(({ disabled: o }) => [
+          m(e.$slots, "annotator-action-redo", B(H({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-delete": T(({ disabled: o }) => [
+          m(e.$slots, "annotator-action-delete", B(H({ disabled: o })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : F("", !0),
+      ko.value ? (c(), A("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: Mt,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : F("", !0),
+      t.value.style.chart.title.text ? (c(), A("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: At,
+        style: he(`width:100%;background:${t.value.style.chart.backgroundColor};padding-bottom:6px`)
+      }, [
+        (c(), Q(Pl, {
+          key: `title_${Ot.value}`,
+          config: {
+            title: {
+              cy: "treemap-div-title",
+              ...t.value.style.chart.title
+            },
+            subtitle: {
+              cy: "treemap-div-subtitle",
+              ...t.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 4)) : F("", !0),
+      R("div", {
+        id: `legend-top-${W.value}`
+      }, null, 8, Yl),
+      t.value.userOptions.show && ue.value && (y(Nt) || y(lt)) ? (c(), Q(y(M), {
+        ref_key: "userOptionsRef",
+        ref: Qe,
+        key: `user_option_${xt.value}`,
+        backgroundColor: t.value.style.chart.backgroundColor,
+        color: t.value.style.chart.color,
+        isPrinting: y(nt),
+        isImaging: y(st),
+        uid: W.value,
+        hasTooltip: t.value.userOptions.buttons.tooltip && t.value.style.chart.tooltip.show,
+        hasPdf: t.value.userOptions.buttons.pdf,
+        hasXls: t.value.userOptions.buttons.csv,
+        hasImg: t.value.userOptions.buttons.img,
+        hasSvg: t.value.userOptions.buttons.svg,
+        hasTable: t.value.userOptions.buttons.table,
+        hasFullscreen: t.value.userOptions.buttons.fullscreen,
+        hasAltCopy: t.value.userOptions.buttons.altCopy,
+        isFullscreen: pe.value,
+        isTooltip: X.value.showTooltip,
+        titles: { ...t.value.userOptions.buttonTitles },
+        chartElement: K.value,
+        position: t.value.userOptions.position,
+        hasAnnotator: t.value.userOptions.buttons.annotator,
+        isAnnotation: Le.value,
+        callbacks: t.value.userOptions.callbacks,
+        printScale: t.value.userOptions.print.scale,
+        tableDialog: t.value.table.useDialog,
+        isCursorPointer: ie.value,
+        onToggleFullscreen: Yt,
+        onGeneratePdf: y(Rt),
+        onGenerateCsv: dt,
+        onGenerateImage: Yo,
+        onGenerateSvg: oo,
+        onToggleTable: qt,
+        onToggleTooltip: Jt,
+        onToggleAnnotator: vt,
+        onCopyAlt: lo,
+        style: he({
+          visibility: y(Nt) ? y(lt) ? "visible" : "hidden" : "visible"
+        })
+      }, no({ _: 2 }, [
+        e.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: T(({ isOpen: o, color: a }) => [
+            m(e.$slots, "menuIcon", B(H({ isOpen: o, color: a })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: T(() => [
+            m(e.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: T(() => [
+            m(e.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        e.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: T(() => [
+            m(e.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        e.$slots.optionImg ? {
+          name: "optionImg",
+          fn: T(() => [
+            m(e.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        e.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: T(() => [
+            m(e.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        e.$slots.optionTable ? {
+          name: "optionTable",
+          fn: T(() => [
+            m(e.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        e.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: T(({ toggleFullscreen: o, isFullscreen: a }) => [
+            m(e.$slots, "optionFullscreen", B(H({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        e.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: T(({ toggleAnnotator: o, isAnnotator: a }) => [
+            m(e.$slots, "optionAnnotator", B(H({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        e.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: T(({ altCopy: o }) => [
+            m(e.$slots, "optionAltCopy", B(H({ altCopy: o })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0
+      ]), 1032, ["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"])) : F("", !0),
+      ae.value.length > 1 ? (c(), A("nav", {
+        key: 5,
+        class: "vue-ui-treemap-breadcrumbs",
+        "data-dom-to-png-ignore": "",
+        ref_key: "breadcrumbsNav",
+        ref: Je
+      }, [
+        (c(!0), A(xe, null, Re(ae.value, (o, a) => (c(), A("span", {
+          role: "button",
+          tabindex: a < ae.value.length - 1 ? 0 : void 0,
+          key: o.id || "root",
+          onClick: (n) => a === ae.value.length - 1 ? () => {
+          } : _e(o.node),
+          onKeydown: [
+            so(Ct((n) => a === ae.value.length - 1 ? void 0 : _e(o.node), ["prevent"]), ["enter"]),
+            so(Ct((n) => a === ae.value.length - 1 ? void 0 : _e(o.node), ["prevent"]), ["space"])
+          ],
+          class: "vue-ui-treemap-crumb",
+          "data-last-crumb": a === ae.value.length - 1,
+          style: he({
+            color: t.value.style.chart.color,
+            cursor: ie.value ? "pointer" : "default"
+          }),
+          onMouseenter: (n) => Qt(a),
+          onMouseleave: eo,
+          onFocus: (n) => Qt(a),
+          onBlur: eo
+        }, [
+          R("span", jl, [
+            R("span", Kl, [
+              m(e.$slots, "breadcrumb-label", wt({ ref_for: !0 }, {
+                crumb: o,
+                isRoot: a === 0,
+                isFocus: Xe.value === a
+              }), () => [
+                a === 0 ? (c(), A("div", ql, [
+                  Ye(po, {
+                    name: Xe.value === 0 ? "homeFilled" : "home",
+                    stroke: t.value.style.chart.color
+                  }, null, 8, ["name", "stroke"])
+                ])) : (c(), A(xe, { key: 1 }, [
+                  Ze(Ne(o.label), 1)
+                ], 64))
+              ], !0)
+            ]),
+            a < ae.value.length - 1 ? (c(), A("span", Jl, [
+              m(e.$slots, "breadcrumb-arrow", {}, () => [
+                l[4] || (l[4] = Ze(" › ", -1))
+              ], !0)
+            ])) : F("", !0)
+          ])
+        ], 44, Zl))), 128))
+      ], 512)) : F("", !0),
+      R("div", Ql, [
+        (c(), A("svg", {
+          ref_key: "svgRef",
+          ref: ye,
+          xmlns: y(pl),
+          "aria-describedby": `chart-instructions-${W.value}`,
+          class: bt({
+            "vue-data-ui-fullscreen--on": pe.value,
+            "vue-data-ui-fulscreen--off": !pe.value,
+            "vue-data-ui-zoom-plus": !Pe.value,
+            "vue-data-ui-zoom-minus": Pe.value,
+            loading: y(ge)
+          }),
+          viewBox: `${J.value.startX} ${J.value.startY} ${J.value.width <= 0 ? 10 : J.value.width} ${J.value.height <= 0 ? 10 : J.value.height}`,
+          style: he(`max-width:100%; overflow: hidden; background:transparent;color:${t.value.style.chart.color}`),
+          tabindex: "0",
+          onFocus: tl,
+          onBlur: ol,
+          onKeydown: ll
+        }, [
+          Ye(y(x)),
+          (c(!0), A(xe, null, Re(O.value, (o, a) => (c(), A("g", {
+            key: `tgrad_${o.id}`
+          }, [
+            t.value.style.chart.layout.rects.gradient.show ? (c(), A("defs", ta, [
+              R("radialGradient", {
+                id: `tgrad_${o.id}`,
+                gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
+              }, [
+                R("stop", {
+                  offset: "18%",
+                  "stop-color": o.color
+                }, null, 8, la),
+                R("stop", {
+                  offset: "100%",
+                  "stop-color": y(vo)(
+                    o.color,
+                    t.value.style.chart.layout.rects.gradient.intensity / 100
+                  )
+                }, null, 8, aa)
+              ], 8, oa)
+            ])) : F("", !0)
+          ]))), 128)),
+          R("g", null, [
+            (c(!0), A(xe, null, Re(O.value, (o, a) => (c(), A("g", {
+              key: `rect_${o.id}_${o.depth}`
+            }, [
+              R("rect", {
+                x: o.x0,
+                y: o.y0,
+                height: de(o),
+                width: ve(o),
+                fill: oe.value ? o.color ?? t.value.style.chart.backgroundColor : t.value.style.chart.layout.rects.gradient.show ? Ee.value ? t.value.style.chart.backgroundColor : `url(#tgrad_${o.id})` : o.color ?? t.value.style.chart.backgroundColor,
+                rx: el(o),
+                stroke: N.value && N.value.id === o.id ? t.value.style.chart.layout.rects.selected.stroke : t.value.style.chart.layout.rects.stroke,
+                "stroke-width": N.value && N.value.id === o.id ? t.value.style.chart.layout.rects.selected.strokeWidth : t.value.style.chart.layout.rects.strokeWidth,
+                onClick: Ct((n) => _e(o, a), ["stop"]),
+                onMouseenter: () => Kt({
+                  datapoint: o,
+                  seriesIndex: a,
+                  triggerMode: "pointer"
+                }),
+                onMouseleave: (n) => Do({ datapoint: o, seriesIndex: a }),
+                style: he(`opacity:${N.value ? N.value.id === o.id ? 1 : t.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
+                class: bt([
+                  "vue-ui-treemap-rect",
+                  Lo(o) ? "vue-data-ui-zoom-minus" : "vue-data-ui-zoom-plus"
+                ])
+              }, null, 46, na)
+            ]))), 128)),
+            (c(!0), A(xe, null, Re(O.value, (o, a) => (c(), A("g", {
+              key: `label_${o.id}_${o.depth}`
+            }, [
+              !e.$slots.rect && !y(ge) && t.value.style.chart.layout.labels.showDefaultLabels && !Ee.value && o.showLabel ? (c(), A("g", {
+                key: 0,
+                style: { "pointer-events": "none" },
+                innerHTML: Qo({
+                  rect: o,
+                  seriesIndex: a,
+                  isTitle: !!(o.children && o.children.length)
+                })
+              }, null, 8, sa)) : F("", !0)
+            ]))), 128)),
+            (c(!0), A(xe, null, Re(O.value, (o, a) => (c(), A("g", {
+              key: `slot_${o.id}_${o.depth}`
+            }, [
+              (c(), A("foreignObject", {
+                x: o.x0,
+                y: o.y0,
+                height: de(o),
+                width: ve(o),
+                class: "vue-ui-treemap-cell-foreignObject",
+                style: { "pointer-events": "none" }
+              }, [
+                R("div", ua, [
+                  y(ge) ? F("", !0) : m(e.$slots, "rect", wt({
+                    key: 0,
+                    ref_for: !0
+                  }, {
+                    rect: {
+                      ...o,
+                      height: de(o),
+                      width: ve(o),
+                      isSelected: N.value ? N.value.id === o.id : !0
+                    },
+                    shouldShow: o.proportion > t.value.style.chart.layout.labels.hideUnderProportion || Pe.value,
+                    fontSize: it(o),
+                    isZoom: Pe.value,
+                    textColor: y(ho)(
+                      o.color
+                    )
+                  }), void 0, !0)
+                ])
+              ], 8, ra))
+            ]))), 128))
+          ]),
+          m(e.$slots, "svg", B(H({
+            svg: G.value,
+            isZoom: Pe.value,
+            rect: N.value,
+            config: t.value,
+            isPrintingImg: y(nt) | y(st) | Be.value,
+            isPrintingSvg: He.value
+          })), void 0, !0)
+        ], 46, ea)),
+        e.$slots.hint ? (c(), A("div", ia, [
+          m(e.$slots, "hint", B(H({
+            hint: t.value.a11y.translations.keyboardNavigation,
+            isVisible: tt.value
+          })), void 0, !0)
+        ])) : F("", !0)
+      ]),
+      e.$slots.watermark ? (c(), A("div", ca, [
+        m(e.$slots, "watermark", B(H({
+          isPrinting: y(nt) || y(st) || Be.value || He.value
+        })), void 0, !0)
+      ])) : F("", !0),
+      R("div", {
+        id: `legend-bottom-${W.value}`
+      }, null, 8, da),
+      Pt.value ? (c(), Q(cl, {
+        key: 7,
+        to: t.value.style.chart.legend.position === "top" ? `#legend-top-${W.value}` : `#legend-bottom-${W.value}`
+      }, [
+        R("div", {
+          ref_key: "chartLegend",
+          ref: St
+        }, [
+          t.value.style.chart.legend.show ? (c(), Q(Ll, {
+            key: `legend_${De.value}`,
+            legendSet: $e.value,
+            config: Fo.value,
+            id: `treemap_legend_${W.value}`,
+            isCursorPointer: ie.value,
+            onClickMarker: l[0] || (l[0] = ({ legend: o }) => Ue(o))
+          }, {
+            item: T(({ legend: o, index: a }) => [
+              y(ge) ? F("", !0) : (c(), A("div", {
+                key: 0,
+                onClick: (n) => Ue(o),
+                style: he(`opacity:${P.value.includes(o.id) ? 0.5 : 1}`)
+              }, Ne(o.display), 13, va))
+            ]),
+            legendToggle: T(() => [
+              $e.value.length > 2 && t.value.style.chart.legend.selectAllToggle.show && !y(ge) ? (c(), Q(Nl, {
+                key: 0,
+                backgroundColor: t.value.style.chart.legend.selectAllToggle.backgroundColor,
+                color: t.value.style.chart.legend.selectAllToggle.color,
+                fontSize: t.value.style.chart.legend.fontSize,
+                checked: P.value.length > 0,
+                isCursorPointer: ie.value,
+                onToggle: No
+              }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : F("", !0)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config", "id", "isCursorPointer"])) : m(e.$slots, "legend", {
+            key: 1,
+            legend: $e.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : F("", !0),
+      e.$slots.source ? (c(), A("div", {
+        key: 8,
+        ref_key: "source",
+        ref: It,
+        dir: "auto"
+      }, [
+        m(e.$slots, "source", {}, void 0, !0)
+      ], 512)) : F("", !0),
+      Ye(y(p), {
+        teleportTo: t.value.style.chart.tooltip.teleportTo,
+        show: X.value.showTooltip && Ae.value,
+        backgroundColor: t.value.style.chart.tooltip.backgroundColor,
+        color: t.value.style.chart.tooltip.color,
+        fontSize: t.value.style.chart.tooltip.fontSize,
+        borderRadius: t.value.style.chart.tooltip.borderRadius,
+        borderColor: t.value.style.chart.tooltip.borderColor,
+        borderWidth: t.value.style.chart.tooltip.borderWidth,
+        backgroundOpacity: t.value.style.chart.tooltip.backgroundOpacity,
+        position: t.value.style.chart.tooltip.position,
+        offsetY: t.value.style.chart.tooltip.offsetY,
+        parent: K.value,
+        content: qe.value,
+        isFullscreen: pe.value,
+        isCustom: y(fo)(t.value.style.chart.tooltip.customFormat),
+        smooth: t.value.style.chart.tooltip.smooth,
+        backdropFilter: t.value.style.chart.tooltip.backdropFilter,
+        smoothForce: t.value.style.chart.tooltip.smoothForce,
+        smoothSnapThreshold: t.value.style.chart.tooltip.smoothSnapThreshold,
+        isA11yMode: Ie.value === "keyboard",
+        a11yPosition: Lt.value
+      }, {
+        "tooltip-before": T(() => [
+          m(e.$slots, "tooltip-before", B(H({ ...We.value })), void 0, !0)
+        ]),
+        tooltip: T(() => [
+          m(e.$slots, "tooltip", B(H({ ...We.value })), void 0, !0)
+        ]),
+        "tooltip-after": T(() => [
+          m(e.$slots, "tooltip-after", B(H({ ...We.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["teleportTo", "show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
+      ue.value && t.value.userOptions.buttons.table ? (c(), Q(dl(Fe.value.component), wt({ key: 9 }, Fe.value.props, {
+        ref_key: "tableUnit",
+        ref: Se,
+        onClose: to
+      }), no({
+        content: T(() => [
+          (c(), Q(y(f), {
+            key: `table_${ze.value}`,
+            colNames: Te.value.colNames,
+            head: Te.value.head,
+            body: Te.value.body,
+            config: Te.value.config,
+            title: t.value.table.useDialog ? "" : Fe.value.title,
+            withCloseButton: !t.value.table.useDialog,
+            isCursorPointer: ie.value,
+            onClose: to
+          }, {
+            th: T(({ th: o }) => [
+              R("div", {
+                innerHTML: o,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, ha)
+            ]),
+            td: T(({ td: o }) => [
+              Ze(Ne(o.name || o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        t.value.table.useDialog ? {
+          name: "title",
+          fn: T(() => [
+            Ze(Ne(Fe.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        t.value.table.useDialog ? {
+          name: "actions",
+          fn: T(() => [
+            R("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[1] || (l[1] = (o) => dt(t.value.userOptions.callbacks.csv)),
+              style: he({ cursor: ie.value ? "pointer" : "default" })
+            }, [
+              Ye(po, {
+                name: "fileCsv",
+                stroke: Fe.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : F("", !0),
+      m(e.$slots, "skeleton", {}, () => [
+        y(ge) ? (c(), Q(Tl, { key: 0 })) : F("", !0)
+      ], !0)
+    ], 46, Xl));
+  }
+}, Fa = /* @__PURE__ */ Rl(fa, [["__scopeId", "data-v-e5505d72"]]);
+export {
+  Fa as default
+};