vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-treemap-98KaVRyd.js

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