vue-data-ui 3.7.8 → 3.7.9

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

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