vue-data-ui 3.0.22 → 3.1.0

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

@@ -0,0 +1,1092 @@
+import { defineAsyncComponent as te, useSlots as Ut, onMounted as gt, computed as b, ref as m, shallowRef as U, toRefs as Ht, watch as ke, onBeforeUnmount as Wt, createElementBlock as y, openBlock as d, unref as c, normalizeStyle as M, normalizeClass as Re, createBlock as Z, createCommentVNode as _, createElementVNode as O, createVNode as we, createSlots as mt, withCtx as T, renderSlot as C, normalizeProps as le, guardReactiveProps as oe, Fragment as Ce, renderList as Le, withKeys as yt, withModifiers as Me, mergeProps as Be, createTextVNode as $e, toDisplayString as H, Teleport as Gt, resolveDynamicComponent as Xt, nextTick as qt } from "vue";
+import { u as Yt, c as Te, t as jt, a as Zt, p as F, b as Kt, d as Jt, o as bt, f as Qt, e as de, k as xe, i as he, X as el, l as kt, F as wt, y as Ct, v as tl, w as ll, z as ol } from "./index-CDQbCd41.js";
+import { t as al, u as nl } from "./useResponsive-DfdjqQps.js";
+import { u as sl, B as ul } from "./BaseScanner-BgWxam9d.js";
+import { u as rl } from "./usePrinter-Bnl1YeUU.js";
+import { u as $t } from "./useNestedProp-BPEHGiYX.js";
+import { u as il } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as cl } from "./useChartAccessibility-9icAAmYg.js";
+import vl from "./img-JOqdlnUs.js";
+import dl from "./Title-Dq2_Z9kR.js";
+import hl from "./Legend-2-dC7DVb.js";
+import Tt from "./BaseIcon-DHtro8us.js";
+import { _ as pl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function xt(n, r) {
+  const s = n.length;
+  if (s === 0)
+    throw new Error(`Max aspect ratio cannot be computed: ${n} is an empty array`);
+  {
+    let i = 1 / 0, u = -1 / 0, h = 0;
+    for (let g = 0; g < s; g += 1) {
+      const f = n[g].normalizedValue;
+      f < i && (i = f), f > u && (u = f), h += f;
+    }
+    return Math.max(
+      r ** 2 * u / h ** 2,
+      h ** 2 / (r ** 2 * i)
+    );
+  }
+}
+function _t(n) {
+  const { xOffset: r, yOffset: s, width: i, height: u } = n;
+  return {
+    x0: r,
+    y0: s,
+    x1: r + i,
+    y1: s + u
+  };
+}
+function fl(n, r, s) {
+  if (n.length === 0)
+    return !0;
+  {
+    const i = n.concat(r), u = xt(
+      n,
+      s
+    ), h = xt(i, s);
+    return u >= h;
+  }
+}
+function gl(n) {
+  const r = [], s = n.length;
+  for (let i = 0; i < s; i += 1) {
+    const u = n[i], h = u.length;
+    for (let v = 0; v < h; v += 1)
+      r.push(u[v]);
+  }
+  return r;
+}
+function ml(n, r) {
+  const s = {
+    ...r,
+    children: n
+  };
+  return At(s);
+}
+function yl(n) {
+  return (n.x1 - n.x0) * (n.y1 - n.y0);
+}
+function Ot(n, r) {
+  const { width: s, height: i, xOffset: u, yOffset: h } = Ve(r), v = n.length, g = n.map((w) => w.normalizedValue || 0).reduce((w, N) => w + N, 0), f = g / i, W = g / s;
+  let D = u, k = h;
+  const $ = [];
+  if (s >= i) {
+    for (let w = 0; w < v; w += 1) {
+      const N = n[w], B = k + N.normalizedValue / f, A = {
+        x0: D,
+        y0: k,
+        x1: D + f,
+        y1: B
+      }, P = Object.assign({}, N, A);
+      k = B, $.push(P);
+    }
+    return $;
+  } else {
+    for (let w = 0; w < v; w += 1) {
+      const N = n[w], B = D + N.normalizedValue / W, A = {
+        x0: D,
+        y0: k,
+        x1: B,
+        y1: k + W
+      }, P = Object.assign({}, N, A);
+      D = B, $.push(P);
+    }
+    return $;
+  }
+}
+function bl(n) {
+  const r = Ve(n), s = r.width, i = r.height;
+  return Math.min(s, i);
+}
+function kl(n, r) {
+  const s = n.length, i = n.map((f) => f.value ?? 0).reduce((f, W) => f + W, 0), u = r / i, h = [];
+  let v, g;
+  for (let f = 0; f < s; f += 1)
+    g = n[f], v = Object.assign({}, g, {
+      normalizedValue: g.value * (u || 0)
+    }), h.push(v);
+  return h;
+}
+function Ve(n) {
+  const { x0: r, y0: s, x1: i, y1: u } = n;
+  return {
+    xOffset: r,
+    yOffset: s,
+    width: i - r,
+    height: u - s
+  };
+}
+function wl(n, r, s, i) {
+  let u = n, h = r, v = s, g = i;
+  for (; ; ) {
+    const f = u.length;
+    if (f === 0) {
+      const $ = Ot(h, v);
+      return g.concat($);
+    }
+    const W = bl(v), D = u[0], k = u.slice(1, f);
+    if (fl(h, D, W)) {
+      const $ = h.concat(D);
+      u = k, h = $, v = v, g = g;
+    } else {
+      const $ = h.length;
+      let w = 0;
+      for (let P = 0; P < $; P += 1)
+        w += h[P].normalizedValue;
+      const N = Cl(v, w), B = Ot(h, v), A = g.concat(B);
+      u = u, h = [], v = N, g = A;
+    }
+  }
+}
+function At(n) {
+  if (typeof n.children > "u" || !n.children.length)
+    return [n];
+  {
+    const r = kl(
+      n.children,
+      yl(n)
+    ), s = wl(r, [], n, []), i = s.length, u = [];
+    for (let v = 0; v < i; v += 1)
+      u.push(At(s[v]));
+    return gl(u);
+  }
+}
+function Cl(n, r) {
+  const { width: s, height: i, xOffset: u, yOffset: h } = Ve(n);
+  if (s >= i) {
+    const v = r / i, g = s - v, f = {
+      xOffset: u + v,
+      yOffset: h,
+      width: g,
+      height: i
+    };
+    return _t(f);
+  } else {
+    const v = r / s, g = i - v, f = {
+      xOffset: u,
+      yOffset: h + v,
+      width: s,
+      height: g
+    };
+    return _t(f);
+  }
+}
+const $l = ["id"], Tl = ["id"], xl = ["tabindex", "onClick", "onKeydown", "data-last-crumb", "onMouseenter", "onFocus"], _l = { class: "vue-ui-treemap-crumb-unit" }, Ol = { class: "vue-ui-treemap-crumb-unit-label" }, Al = {
+  key: 0,
+  style: { width: "24px", display: "flex", "align-items": "center" }
+}, Sl = {
+  key: 0,
+  class: "vue-ui-treemap-crumb-unit-arrow"
+}, Il = ["xmlns", "viewBox"], Fl = { key: 0 }, Nl = ["id"], Pl = ["stop-color"], zl = ["stop-color"], Dl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter", "onMouseleave"], Rl = ["x", "y", "height", "width"], Ll = {
+  style: { width: "100%", height: "100%" },
+  class: "vue-ui-treemap-cell"
+}, Ml = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, Bl = ["id"], Vl = ["onClick"], El = ["innerHTML"], Ul = {
+  __name: "vue-ui-treemap",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint"],
+  setup(n, { expose: r, emit: s }) {
+    const i = te(() => import("./DataTable-DJjA2_wf.js")), u = te(() => import("./PenAndPaper-B7QEDgx4.js")), h = te(() => import("./vue-ui-accordion-Bf_LHFFX.js")), v = te(() => import("./Tooltip-Y219DXZO.js")), g = te(() => import("./UserOptions-BuGfCdAY.js")), f = te(() => import("./PackageVersion-DU12WH3O.js")), W = te(() => import("./BaseDraggableDialog-O7900pGp.js")), { vue_ui_treemap: D } = Yt(), k = n, $ = s, w = Ut();
+    gt(() => {
+      w["chart-background"] && console.warn("VueUiTreemap does not support the #chart-background slot.");
+    });
+    const N = b(() => !!k.dataset && k.dataset.length), B = b(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), A = m(Te()), P = m(!1), _e = m(""), K = m(!1), Ee = m(0), R = m([]), V = U(null), Ue = U(null), He = U(null), We = U(null), Ge = U(null), Xe = m(0), Oe = m(0), Ae = m(0), x = m([]), Se = m(null), qe = m(!1), ue = m(null), e = m(Ne()), { loading: re, FINAL_DATASET: Ie, manualLoading: St } = sl({
+      ...Ht(k),
+      FINAL_CONFIG: e,
+      prepareConfig: Ne,
+      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: jt({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#999999",
+              layout: {
+                labels: {
+                  showDefaultLabels: !1
+                },
+                rects: {
+                  stroke: "#6A6A6A"
+                }
+              },
+              legend: {
+                backgroundColor: "transparent"
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: Fe, setUserOptionsVisibility: Ye, keepUserOptionState: je } = il({ config: e.value }), { svgRef: Ze } = cl({ config: e.value.style.chart.title });
+    function Ne() {
+      const t = $t({
+        userConfig: k.config,
+        defaultConfig: D
+      });
+      return t.theme ? {
+        ...$t({
+          userConfig: Kt.vue_ui_treemap[t.theme] || k.config,
+          defaultConfig: t
+        }),
+        customPalette: Zt[t.theme] || F
+      } : t;
+    }
+    ke(() => k.config, (t) => {
+      re.value || (e.value = Ne()), Fe.value = !e.value.userOptions.showOnChartHover, Xe.value += 1, Oe.value += 1, Ae.value += 1, I.value.showTable = e.value.table.show, I.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const { isPrinting: Ke, isImaging: Je, generatePdf: Qe, generateImage: et } = rl({
+      elementId: `treemap_${A.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-treemap",
+      options: e.value.userOptions.print
+    }), It = b(() => e.value.userOptions.show && !e.value.style.chart.title.text), pe = b(() => Jt(e.value.customPalette)), I = m({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    ke(e, () => {
+      I.value = {
+        showTable: e.value.table.show,
+        showTooltip: e.value.style.chart.tooltip.show
+      };
+    }, { immediate: !0 });
+    const G = m({
+      height: e.value.style.chart.height,
+      width: e.value.style.chart.width
+    }), J = b(() => ({
+      bottom: G.value.height - e.value.style.chart.padding.bottom,
+      height: G.value.height - e.value.style.chart.padding.top - e.value.style.chart.padding.bottom,
+      left: e.value.style.chart.padding.left,
+      right: G.value.width - e.value.style.chart.padding.right,
+      top: e.value.style.chart.padding.top,
+      vbHeight: G.value.height,
+      vbWidth: G.value.width,
+      width: G.value.width - e.value.style.chart.padding.left - e.value.style.chart.padding.right
+    })), z = m(Ie.value), X = m(z.value), tt = U(/* @__PURE__ */ new Map());
+    function lt(t) {
+      Array.isArray(t) && t.forEach((o, l) => {
+        o.id || (o.id = Te());
+        let a = de(o.color) || tt.value.get(o.id) || pe.value[l] || F[l] || F[l % F.length];
+        a = de(a), tt.value.set(o.id, a), o.color = a, ot(o, a);
+      });
+    }
+    function ot(t, o) {
+      Array.isArray(t.children) && t.children.forEach((l) => {
+        l.id || (l.id = Te()), l.parentId = t.id, l.color = o, ot(l, o);
+      });
+    }
+    function Ft() {
+      if (!x.value.length)
+        X.value = z.value.slice();
+      else {
+        const t = x.value[x.value.length - 1], o = Y(t);
+        X.value = o?.children?.slice() || [];
+      }
+    }
+    ke(
+      () => Ie.value,
+      () => {
+        z.value = Ie.value, lt(z.value), Ft(), Ae.value += 1, Oe.value += 1;
+      },
+      { deep: !0, immediate: !0, flush: "post" }
+    );
+    const q = U(null), ae = U(null);
+    gt(() => {
+      qe.value = !0, Pt();
+    });
+    const Nt = b(() => e.value.debug);
+    function Pt() {
+      if (bt(k.dataset) && Qt({
+        componentName: "VueUiTreemap",
+        type: "dataset",
+        debug: Nt.value
+      }), lt(z.value), bt(k.dataset) || (St.value = e.value.loading), e.value.responsive) {
+        const t = al(() => {
+          const { width: o, height: l } = nl({
+            chart: V.value,
+            title: e.value.style.chart.title.text ? Ue.value : null,
+            legend: e.value.style.chart.legend.show ? He.value : null,
+            source: We.value,
+            noTitle: Ge.value
+          });
+          requestAnimationFrame(() => {
+            G.value.width = o, G.value.height = l - 12;
+          });
+        });
+        q.value && (ae.value && q.value.unobserve(ae.value), q.value.disconnect()), q.value = new ResizeObserver(t), ae.value = V.value.parentNode, q.value.observe(ae.value);
+      }
+    }
+    Wt(() => {
+      q.value && (ae.value && q.value.unobserve(ae.value), q.value.disconnect());
+    });
+    const ie = b(() => X.value.map((t, o) => ({
+      ...t,
+      color: de(t.color) || pe.value[o] || F[o] || F[o % F.length]
+    })).filter((t) => !R.value.includes(t.id))), ne = b(() => z.value.filter((t) => !R.value.includes(t.id)).map((t) => t.value || 0).reduce((t, o) => t + o, 0)), at = b({
+      get() {
+        let t = [...ie.value];
+        return e.value.style.chart.layout.sorted && (t = [...ie.value].sort((o, l) => l.value - o.value)), t.map((o) => ({
+          ...o
+        }));
+      },
+      set(t) {
+        return t;
+      }
+    });
+    function nt(t, o) {
+      return t.value / o;
+    }
+    function zt(t, o, l) {
+      const a = e.value.style.chart.layout.rects.colorRatio - nt(o, l);
+      return kt(t, a < 0 ? 0 : a);
+    }
+    function st(t, o, l, a) {
+      return t.map((p, S) => {
+        const be = zt(de(o) || pe.value[S] || F[S] || F[S % F.length], p, a), Et = nt(p, a);
+        return {
+          ...p,
+          color: be,
+          proportion: Et,
+          parentName: l,
+          children: p.children ? st(p.children, be, p.name, a) : void 0
+        };
+      });
+    }
+    const ce = b(() => ml(
+      at.value.map((t, o) => {
+        const l = t.children ? t.children.reduce((a, p) => a + p.value, 0) : t.value;
+        return {
+          value: t.value,
+          id: t.id || Te(),
+          children: t.children ? st(t.children.sort((a, p) => p.value - a.value), t.color, t.name, l) : void 0,
+          color: t.color,
+          name: t.name
+        };
+      }),
+      { x0: J.value.left * 2, y0: J.value.top, x1: J.value.width, y1: J.value.height }
+    ));
+    function ut({ y0: t, y1: o }) {
+      return o - t <= 0 ? 1e-4 : o - t;
+    }
+    function rt({ x0: t, x1: o }) {
+      return o - t <= 0 ? 1e-4 : o - t;
+    }
+    function Q(t) {
+      const o = e.value.style.chart.layout.labels.fontSize * (t.proportion * 2 > 1 ? 1 : t.proportion * 2);
+      return o < e.value.style.chart.layout.labels.minFontSize ? e.value.style.chart.layout.labels.minFontSize : o;
+    }
+    function it(t) {
+      K.value = t, Ee.value += 1;
+    }
+    const se = b(() => {
+      let t = 0;
+      return Se.value && (t = Se.value.getBoundingClientRect().height), {
+        startX: 0,
+        startY: 0,
+        width: J.value.vbWidth,
+        height: J.value.vbHeight - t
+      };
+    });
+    function Y(t, o = z.value) {
+      for (const l of o) {
+        if (l.id === t)
+          return l;
+        if (l.children) {
+          const a = Y(t, l.children);
+          if (a)
+            return a;
+        }
+      }
+      return null;
+    }
+    const ee = b(() => x.value.length > 0);
+    function fe(t, o) {
+      if (!t) {
+        X.value = z.value.slice(), $("selectDatapoint", void 0), x.value = [];
+        return;
+      }
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
+      const l = Y(t.id);
+      if (l && l.children?.length)
+        x.value.push(l.id), X.value = l.children.slice(), $("selectDatapoint", t);
+      else if (t.parentId) {
+        x.value.push(t.parentId);
+        const a = Y(t.parentId);
+        X.value = a.children.slice(), $("selectDatapoint", t);
+      } else if (x.value.length > 0) {
+        x.value.pop();
+        const a = x.value[x.value.length - 1];
+        if (a) {
+          const p = Y(a);
+          X.value = p.children.slice();
+        } else
+          X.value = z.value.slice(), x.value = [], $("selectDatapoint", void 0);
+      }
+    }
+    function Dt(t) {
+      return !!(Y(t.id)?.children?.length || t.parentId);
+    }
+    const j = b(() => {
+      const t = [
+        { id: null, label: "All" }
+      ];
+      if (x.value.length > 0) {
+        let o = Y(x.value[x.value.length - 1]);
+        const l = [];
+        for (; o; )
+          l.unshift(o), o = o.parentId ? Y(o.parentId) : null;
+        for (const a of l)
+          t.push({
+            id: a.id,
+            label: a.name,
+            node: a
+          });
+      }
+      return t;
+    }), L = U(null), ct = b(() => z.value.map((t, o) => ({
+      ...t,
+      color: de(t.color) || pe.value[o] || F[o] || F[o % F.length],
+      shape: "square"
+    })).sort((t, o) => o.value - t.value).map((t, o) => ({
+      ...t,
+      proportion: t.value / z.value.map((l) => l.value).reduce((l, a) => l + a, 0),
+      opacity: R.value.includes(t.id) ? 0.5 : 1
+    }))), Rt = b(() => ({
+      cy: "treemap-div-legend",
+      backgroundColor: e.value.style.chart.legend.backgroundColor,
+      color: e.value.style.chart.legend.color,
+      fontSize: e.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
+    }));
+    function vt(t) {
+      L.value = null, R.value.includes(t.id) ? R.value = R.value.filter((o) => o !== t.id) : R.value.length < k.dataset.length - 1 && R.value.push(t.id), $("selectLegend", at.value);
+    }
+    function Lt({ datapoint: t, seriesIndex: o }) {
+      L.value = null, P.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
+    }
+    const Pe = m(null);
+    function Mt({ datapoint: t, seriesIndex: o }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), L.value = t, Pe.value = { datapoint: t, seriesIndex: o, config: e.value, series: ie.value };
+      const l = e.value.style.chart.tooltip.customFormat;
+      if (Ct(l) && ol(() => l({
+        seriesIndex: o,
+        datapoint: t,
+        series: ie.value,
+        config: e.value
+      })))
+        _e.value = l({
+          seriesIndex: o,
+          datapoint: t,
+          series: ie.value,
+          config: e.value
+        });
+      else {
+        let a = "";
+        a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.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="${t.color}"/></svg>`, a += `<b>${xe(
+          e.value.style.chart.layout.labels.formatter,
+          t.value,
+          he({
+            p: e.value.style.chart.layout.labels.prefix,
+            v: t.value,
+            s: e.value.style.chart.layout.labels.suffix,
+            r: e.value.style.chart.tooltip.roundingValue
+          }),
+          { datapoint: t, seriesIndex: o }
+        )}</b>`, _e.value = `<div>${a}</div>`;
+      }
+      P.value = !0;
+    }
+    const E = b(() => {
+      const t = ce.value.map((l) => ({
+        name: l.name,
+        color: l.color
+      })), o = ce.value.map((l) => l.value);
+      return { head: t, body: o };
+    });
+    function ze(t = null) {
+      qt(() => {
+        const o = E.value.head.map((p, S) => [[
+          p.name
+        ], [E.value.body[S]], [isNaN(E.value.body[S] / ne.value) ? "-" : E.value.body[S] / ne.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(o), a = tl(l);
+        t ? t(a) : ll({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-treemap" });
+      });
+    }
+    const ge = b(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value,
+        e.value.table.columnNames.percentage
+      ], o = E.value.head.map((p, S) => {
+        const be = xe(
+          e.value.style.chart.layout.labels.formatter,
+          E.value.body[S],
+          he({
+            p: e.value.style.chart.layout.labels.prefix,
+            v: E.value.body[S],
+            s: e.value.style.chart.layout.labels.suffix,
+            r: e.value.table.td.roundingValue
+          })
+        );
+        return [
+          {
+            color: p.color,
+            name: p.name,
+            shape: "square"
+          },
+          be,
+          isNaN(E.value.body[S] / ne.value) ? "-" : he({
+            v: E.value.body[S] / ne.value * 100,
+            s: "%",
+            r: e.value.table.td.roundingPercentage
+          })
+        ];
+      }), l = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      };
+      return {
+        colNames: [
+          e.value.table.columnNames.series,
+          e.value.table.columnNames.value
+        ],
+        head: t,
+        body: o,
+        config: l
+      };
+    });
+    function Bt() {
+      return ce.value;
+    }
+    function dt() {
+      I.value.showTable = !I.value.showTable;
+    }
+    function ht() {
+      I.value.showTooltip = !I.value.showTooltip;
+    }
+    const me = m(!1);
+    function De() {
+      me.value = !me.value;
+    }
+    const ye = m(null);
+    function pt(t) {
+      ye.value = t;
+    }
+    function ft() {
+      ye.value = null;
+    }
+    async function Vt({ scale: t = 2 } = {}) {
+      if (!V.value) return;
+      const { width: o, height: l } = V.value.getBoundingClientRect(), a = o / l, { imageUri: p, base64: S } = await vl({ domElement: V.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: p,
+        base64: S,
+        title: e.value.style.chart.title.text,
+        width: o,
+        height: l,
+        aspectRatio: a
+      };
+    }
+    const ve = b(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, o = I.value.showTable;
+      return {
+        component: t ? W : h,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: t ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: K.value,
+          fullscreenParent: V.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: o,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    return ke(() => I.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && ue.value ? ue.value.open() : "close" in ue.value && ue.value.close());
+    }), r({
+      getData: Bt,
+      getImage: Vt,
+      generateCsv: ze,
+      generateImage: et,
+      generatePdf: Qe,
+      toggleTable: dt,
+      toggleTooltip: ht,
+      toggleAnnotator: De,
+      toggleFullscreen: it
+    }), (t, o) => (d(), y("div", {
+      ref_key: "treemapChart",
+      ref: V,
+      class: Re(`vue-ui-treemap ${K.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: M(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `treemap_${A.value}`,
+      onMouseenter: o[4] || (o[4] = () => c(Ye)(!0)),
+      onMouseleave: o[5] || (o[5] = () => c(Ye)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (d(), Z(c(u), {
+        key: 0,
+        svgRef: c(Ze),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: me.value,
+        onClose: De
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : _("", !0),
+      It.value ? (d(), y("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: Ge,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : _("", !0),
+      e.value.style.chart.title.text ? (d(), y("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: Ue,
+        style: M(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:6px`)
+      }, [
+        (d(), Z(dl, {
+          key: `title_${Xe.value}`,
+          config: {
+            title: {
+              cy: "treemap-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "treemap-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 4)) : _("", !0),
+      O("div", {
+        id: `legend-top-${A.value}`
+      }, null, 8, Tl),
+      e.value.userOptions.show && N.value && (c(je) || c(Fe)) ? (d(), Z(c(g), {
+        ref: "details",
+        key: `user_option_${Ee.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: c(Ke),
+        isImaging: c(Je),
+        uid: A.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: K.value,
+        isTooltip: I.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: V.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: me.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: it,
+        onGeneratePdf: c(Qe),
+        onGenerateCsv: ze,
+        onGenerateImage: c(et),
+        onToggleTable: dt,
+        onToggleTooltip: ht,
+        onToggleAnnotator: De,
+        style: M({
+          visibility: c(je) ? c(Fe) ? "visible" : "hidden" : "visible"
+        })
+      }, mt({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: T(({ isOpen: l, color: a }) => [
+            C(t.$slots, "menuIcon", le(oe({ isOpen: l, color: a })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: T(() => [
+            C(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: T(() => [
+            C(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: T(() => [
+            C(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: T(() => [
+            C(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: T(() => [
+            C(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: T(({ toggleFullscreen: l, isFullscreen: a }) => [
+            C(t.$slots, "optionFullscreen", le(oe({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: T(({ toggleAnnotator: l, isAnnotator: a }) => [
+            C(t.$slots, "optionAnnotator", le(oe({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : _("", !0),
+      j.value.length > 1 ? (d(), y("nav", {
+        key: 4,
+        class: "vue-ui-treemap-breadcrumbs",
+        "data-dom-to-png-ignore": "",
+        ref_key: "breadcrumbsNav",
+        ref: Se
+      }, [
+        (d(!0), y(Ce, null, Le(j.value, (l, a) => (d(), y("span", {
+          role: "button",
+          tabindex: a < j.value.length - 1 ? 0 : void 0,
+          key: l.id || "root",
+          onClick: (p) => a === j.value.length - 1 ? () => {
+          } : fe(l.node),
+          onKeydown: [
+            yt(Me((p) => a === j.value.length - 1 ? void 0 : fe(l.node), ["prevent"]), ["enter"]),
+            yt(Me((p) => a === j.value.length - 1 ? void 0 : fe(l.node), ["prevent"]), ["space"])
+          ],
+          class: "vue-ui-treemap-crumb",
+          "data-last-crumb": a === j.value.length - 1,
+          style: M({
+            color: e.value.style.chart.color
+          }),
+          onMouseenter: (p) => pt(a),
+          onMouseleave: ft,
+          onFocus: (p) => pt(a),
+          onBlur: ft
+        }, [
+          O("span", _l, [
+            O("span", Ol, [
+              C(t.$slots, "breadcrumb-label", Be({ ref_for: !0 }, { crumb: l, isRoot: a === 0, isFocus: ye.value === a }), () => [
+                a === 0 ? (d(), y("div", Al, [
+                  we(Tt, {
+                    name: ye.value === 0 ? "homeFilled" : "home",
+                    stroke: e.value.style.chart.color
+                  }, null, 8, ["name", "stroke"])
+                ])) : (d(), y(Ce, { key: 1 }, [
+                  $e(H(l.label), 1)
+                ], 64))
+              ], !0)
+            ]),
+            a < j.value.length - 1 ? (d(), y("span", Sl, [
+              C(t.$slots, "breadcrumb-arrow", {}, () => [
+                o[6] || (o[6] = $e(" › ", -1))
+              ], !0)
+            ])) : _("", !0)
+          ])
+        ], 44, xl))), 128))
+      ], 512)) : _("", !0),
+      (d(), y("svg", {
+        ref_key: "svgRef",
+        ref: Ze,
+        xmlns: c(el),
+        class: Re({ "vue-data-ui-fullscreen--on": K.value, "vue-data-ui-fulscreen--off": !K.value, "vue-data-ui-zoom-plus": !ee.value, "vue-data-ui-zoom-minus": ee.value, loading: c(re) }),
+        viewBox: `${se.value.startX} ${se.value.startY} ${se.value.width <= 0 ? 10 : se.value.width} ${se.value.height <= 0 ? 10 : se.value.height}`,
+        style: M(`max-width:100%; overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        we(c(f)),
+        (d(!0), y(Ce, null, Le(ce.value, (l, a) => (d(), y("g", {
+          key: `tgrad_${l.id}`
+        }, [
+          e.value.style.chart.layout.rects.gradient.show ? (d(), y("defs", Fl, [
+            O("radialGradient", {
+              id: `tgrad_${l.id}`,
+              gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
+            }, [
+              O("stop", {
+                offset: "18%",
+                "stop-color": l.color
+              }, null, 8, Pl),
+              O("stop", {
+                offset: "100%",
+                "stop-color": c(kt)(l.color, e.value.style.chart.layout.rects.gradient.intensity / 100)
+              }, null, 8, zl)
+            ], 8, Nl)
+          ])) : _("", !0)
+        ]))), 128)),
+        (d(!0), y(Ce, null, Le(ce.value, (l, a) => (d(), y("g", {
+          key: `k_${l.id}`
+        }, [
+          O("rect", {
+            x: l.x0,
+            y: l.y0,
+            height: ut(l),
+            width: rt(l),
+            fill: B.value ? l.color : e.value.style.chart.layout.rects.gradient.show ? `url(#tgrad_${l.id})` : l.color,
+            rx: e.value.style.chart.layout.rects.borderRadius,
+            stroke: L.value && L.value.id === l.id ? e.value.style.chart.layout.rects.selected.stroke : e.value.style.chart.layout.rects.stroke,
+            "stroke-width": L.value && L.value.id === l.id ? e.value.style.chart.layout.rects.selected.strokeWidth : e.value.style.chart.layout.rects.strokeWidth,
+            onClick: Me((p) => fe(l, a), ["stop"]),
+            onMouseenter: () => Mt({
+              datapoint: l,
+              seriesIndex: a
+            }),
+            onMouseleave: (p) => Lt({ datapoint: l, seriesIndex: a }),
+            style: M(`opacity:${L.value ? L.value.id === l.id ? 1 : e.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
+            class: Re([
+              "vue-ui-treemap-rect",
+              Dt(l) ? "vue-data-ui-zoom-plus" : ee.value ? "vue-data-ui-zoom-minus" : ""
+            ])
+          }, null, 46, Dl),
+          (d(), y("foreignObject", {
+            x: l.x0,
+            y: l.y0,
+            height: ut(l),
+            width: rt(l),
+            class: "vue-ui-treemap-cell-foreignObject"
+          }, [
+            O("div", Ll, [
+              e.value.style.chart.layout.labels.showDefaultLabels && (l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || ee.value) ? (d(), y("div", {
+                key: 0,
+                class: "vue-ui-treemap-cell-default",
+                style: M(`width:calc(100% - ${Q(l) / 1.5}px);text-align:left;line-height:${Q(l) < 14 ? 14 : Q(l)}px;padding:${Q(l) / 3}px; color:${c(wt)(l.color)}`)
+              }, [
+                O("span", {
+                  style: M(`width:100%;font-size:${Q(l)}px;`)
+                }, H(l.name), 5),
+                o[7] || (o[7] = O("br", null, null, -1)),
+                O("span", {
+                  style: M(`width:100%;font-size:${Q(l)}px;`)
+                }, H(c(xe)(
+                  e.value.style.chart.layout.labels.formatter,
+                  l.value,
+                  c(he)({
+                    p: e.value.style.chart.layout.labels.prefix,
+                    v: l.value,
+                    s: e.value.style.chart.layout.labels.suffix,
+                    r: e.value.style.chart.layout.labels.rounding
+                  }),
+                  { datapoint: l }
+                )), 5)
+              ], 4)) : _("", !0),
+              c(re) ? _("", !0) : C(t.$slots, "rect", Be({
+                key: 1,
+                ref_for: !0
+              }, {
+                rect: l,
+                shouldShow: l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || ee.value,
+                fontSize: Q(l),
+                isZoom: ee.value,
+                textColor: c(wt)(l.color)
+              }), void 0, !0)
+            ])
+          ], 8, Rl))
+        ]))), 128)),
+        C(t.$slots, "svg", le(oe({ svg: J.value, isZoom: ee.value, rect: L.value, config: e.value })), void 0, !0)
+      ], 14, Il)),
+      t.$slots.watermark ? (d(), y("div", Ml, [
+        C(t.$slots, "watermark", le(oe({ isPrinting: c(Ke) || c(Je) })), void 0, !0)
+      ])) : _("", !0),
+      O("div", {
+        id: `legend-bottom-${A.value}`
+      }, null, 8, Bl),
+      qe.value ? (d(), Z(Gt, {
+        key: 6,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${A.value}` : `#legend-bottom-${A.value}`
+      }, [
+        O("div", {
+          ref_key: "chartLegend",
+          ref: He
+        }, [
+          e.value.style.chart.legend.show ? (d(), Z(hl, {
+            key: `legend_${Ae.value}`,
+            legendSet: ct.value,
+            config: Rt.value,
+            id: `treemap_legend_${A.value}`,
+            onClickMarker: o[0] || (o[0] = ({ legend: l }) => vt(l))
+          }, {
+            item: T(({ legend: l, index: a }) => [
+              c(re) ? _("", !0) : (d(), y("div", {
+                key: 0,
+                onClick: (p) => vt(l),
+                style: M(`opacity:${R.value.includes(l.id) ? 0.5 : 1}`)
+              }, H(l.name) + H(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + H(e.value.style.chart.legend.showValue ? c(xe)(
+                e.value.style.chart.layout.labels.formatter,
+                l.value,
+                c(he)({
+                  p: e.value.style.chart.layout.labels.prefix,
+                  v: l.value,
+                  s: e.value.style.chart.layout.labels.suffix,
+                  r: e.value.style.chart.legend.roundingValue
+                }),
+                { datapoint: l }
+              ) : "") + " " + H(e.value.style.chart.legend.showPercentage ? R.value.includes(l.id) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(l.value / ne.value) ? "-" : (l.value / ne.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, Vl))
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config", "id"])) : C(t.$slots, "legend", {
+            key: 1,
+            legend: ct.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : _("", !0),
+      t.$slots.source ? (d(), y("div", {
+        key: 7,
+        ref_key: "source",
+        ref: We,
+        dir: "auto"
+      }, [
+        C(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : _("", !0),
+      we(c(v), {
+        show: I.value.showTooltip && P.value,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: V.value,
+        content: _e.value,
+        isFullscreen: K.value,
+        isCustom: c(Ct)(e.value.style.chart.tooltip.customFormat),
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter
+      }, {
+        "tooltip-before": T(() => [
+          C(t.$slots, "tooltip-before", le(oe({ ...Pe.value })), void 0, !0)
+        ]),
+        "tooltip-after": T(() => [
+          C(t.$slots, "tooltip-after", le(oe({ ...Pe.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
+      N.value ? (d(), Z(Xt(ve.value.component), Be({ key: 8 }, ve.value.props, {
+        ref_key: "tableUnit",
+        ref: ue,
+        onClose: o[3] || (o[3] = (l) => I.value.showTable = !1)
+      }), mt({
+        content: T(() => [
+          (d(), Z(c(i), {
+            key: `table_${Oe.value}`,
+            colNames: ge.value.colNames,
+            head: ge.value.head,
+            body: ge.value.body,
+            config: ge.value.config,
+            title: e.value.table.useDialog ? "" : ve.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: o[2] || (o[2] = (l) => I.value.showTable = !1)
+          }, {
+            th: T(({ th: l }) => [
+              O("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, El)
+            ]),
+            td: T(({ td: l }) => [
+              $e(H(l.name || l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: T(() => [
+            $e(H(ve.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: T(() => [
+            O("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: o[1] || (o[1] = (l) => ze(e.value.userOptions.callbacks.csv))
+            }, [
+              we(Tt, {
+                name: "excel",
+                stroke: ve.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : _("", !0),
+      c(re) ? (d(), Z(ul, { key: 9 })) : _("", !0)
+    ], 46, $l));
+  }
+}, lo = /* @__PURE__ */ pl(Ul, [["__scopeId", "data-v-3a726c85"]]);
+export {
+  lo as default
+};