vue-data-ui 2.6.43 → 2.6.44-beta.0

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

@@ -0,0 +1,920 @@
+import { useSlots as it, onMounted as He, computed as C, ref as g, watch as ct, onBeforeUnmount as dt, createElementBlock as b, openBlock as v, unref as y, normalizeStyle as L, normalizeClass as We, createBlock as G, createCommentVNode as _, createElementVNode as O, createVNode as Ee, createSlots as vt, withCtx as T, renderSlot as $, normalizeProps as q, guardReactiveProps as X, Fragment as pe, renderList as fe, mergeProps as Ge, createTextVNode as ue, toDisplayString as j, withModifiers as ht, nextTick as pt } from "vue";
+import { u as ft, c as qe, t as gt, p as S, a as yt, b as mt, o as bt, e as kt, d as ie, i as ce, f as le, X as wt, l as Xe, G as je, x as Ye, q as Ct, r as $t, y as Tt } from "./index-BjeHPQB2.js";
+import { _ as xt } from "./Title-CuyN78xN.js";
+import { u as _t, U as Ot } from "./usePrinter-BDx4dDHp.js";
+import { _ as St } from "./Tooltip-CoZJLSUy.js";
+import { L as Nt } from "./Legend-Bns8n5XI.js";
+import At from "./vue-ui-skeleton-Db5GDVLW.js";
+import { D as It } from "./DataTable-DpYrmdKR.js";
+import Pt from "./vue-ui-accordion-CrDhNoyv.js";
+import { t as zt, u as Ft } from "./useResponsive-vZgZwV-S.js";
+import { u as Ze } from "./useNestedProp-jWaei8o8.js";
+import { _ as Rt } from "./PackageVersion-C-jBIpMs.js";
+import { P as Lt } from "./PenAndPaper-B1x7gtt0.js";
+import { u as Dt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Mt } from "./useChartAccessibility-BWojgys7.js";
+import { _ as Vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function Je(n, u) {
+  const r = n.length;
+  if (r === 0)
+    throw new Error(`Max aspect ratio cannot be computed: ${n} is an empty array`);
+  {
+    let i = 1 / 0, s = -1 / 0, c = 0;
+    for (let h = 0; h < r; h += 1) {
+      const p = n[h].normalizedValue;
+      p < i && (i = p), p > s && (s = p), c += p;
+    }
+    return Math.max(
+      u ** 2 * s / c ** 2,
+      c ** 2 / (u ** 2 * i)
+    );
+  }
+}
+function Ke(n) {
+  const { xOffset: u, yOffset: r, width: i, height: s } = n;
+  return {
+    x0: u,
+    y0: r,
+    x1: u + i,
+    y1: r + s
+  };
+}
+function Ut(n, u, r) {
+  if (n.length === 0)
+    return !0;
+  {
+    const i = n.concat(u), s = Je(
+      n,
+      r
+    ), c = Je(i, r);
+    return s >= c;
+  }
+}
+function Bt(n) {
+  const u = [], r = n.length;
+  for (let i = 0; i < r; i += 1) {
+    const s = n[i], c = s.length;
+    for (let d = 0; d < c; d += 1)
+      u.push(s[d]);
+  }
+  return u;
+}
+function Ht(n, u) {
+  const r = {
+    ...u,
+    children: n
+  };
+  return et(r);
+}
+function Wt(n) {
+  return (n.x1 - n.x0) * (n.y1 - n.y0);
+}
+function Qe(n, u) {
+  const { width: r, height: i, xOffset: s, yOffset: c } = ge(u), d = n.length, h = n.map((k) => k.normalizedValue || 0).reduce((k, m) => k + m, 0), p = h / i, I = h / r;
+  let N = s, P = c;
+  const w = [];
+  if (r >= i) {
+    for (let k = 0; k < d; k += 1) {
+      const m = n[k], x = P + m.normalizedValue / p, M = {
+        x0: N,
+        y0: P,
+        x1: N + p,
+        y1: x
+      }, z = Object.assign({}, m, M);
+      P = x, w.push(z);
+    }
+    return w;
+  } else {
+    for (let k = 0; k < d; k += 1) {
+      const m = n[k], x = N + m.normalizedValue / I, M = {
+        x0: N,
+        y0: P,
+        x1: x,
+        y1: P + I
+      }, z = Object.assign({}, m, M);
+      N = x, w.push(z);
+    }
+    return w;
+  }
+}
+function Et(n) {
+  const u = ge(n), r = u.width, i = u.height;
+  return Math.min(r, i);
+}
+function Gt(n, u) {
+  const r = n.length, i = n.map((p) => p.value ?? 0).reduce((p, I) => p + I, 0), s = u / i, c = [];
+  let d, h;
+  for (let p = 0; p < r; p += 1)
+    h = n[p], d = Object.assign({}, h, {
+      normalizedValue: h.value * (s || 0)
+    }), c.push(d);
+  return c;
+}
+function ge(n) {
+  const { x0: u, y0: r, x1: i, y1: s } = n;
+  return {
+    xOffset: u,
+    yOffset: r,
+    width: i - u,
+    height: s - r
+  };
+}
+function qt(n, u, r, i) {
+  let s = n, c = u, d = r, h = i;
+  for (; ; ) {
+    const p = s.length;
+    if (p === 0) {
+      const w = Qe(c, d);
+      return h.concat(w);
+    }
+    const I = Et(d), N = s[0], P = s.slice(1, p);
+    if (Ut(c, N, I)) {
+      const w = c.concat(N);
+      s = P, c = w, d = d, h = h;
+    } else {
+      const w = c.length;
+      let k = 0;
+      for (let z = 0; z < w; z += 1)
+        k += c[z].normalizedValue;
+      const m = Xt(d, k), x = Qe(c, d), M = h.concat(x);
+      s = s, c = [], d = m, h = M;
+    }
+  }
+}
+function et(n) {
+  if (typeof n.children > "u" || !n.children.length)
+    return [n];
+  {
+    const u = Gt(
+      n.children,
+      Wt(n)
+    ), r = qt(u, [], n, []), i = r.length, s = [];
+    for (let d = 0; d < i; d += 1)
+      s.push(et(r[d]));
+    return Bt(s);
+  }
+}
+function Xt(n, u) {
+  const { width: r, height: i, xOffset: s, yOffset: c } = ge(n);
+  if (r >= i) {
+    const d = u / i, h = r - d, p = {
+      xOffset: s + d,
+      yOffset: c,
+      width: h,
+      height: i
+    };
+    return Ke(p);
+  } else {
+    const d = u / r, h = i - d, p = {
+      xOffset: s,
+      yOffset: c + d,
+      width: r,
+      height: h
+    };
+    return Ke(p);
+  }
+}
+const jt = ["id"], Yt = {
+  key: 4,
+  class: "vue-ui-treemap-breadcrumbs",
+  "data-html2canvas-ignore": ""
+}, Zt = ["onClick", "data-last-crumb"], Jt = { class: "vue-ui-treemap-crumb-unit" }, Kt = { class: "vue-ui-treemap-crumb-unit-label" }, Qt = {
+  key: 0,
+  class: "vue-ui-treemap-crumb-unit-arrow"
+}, el = ["xmlns", "viewBox"], tl = { key: 0 }, ll = ["id"], ol = ["stop-color"], al = ["stop-color"], nl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter"], sl = ["x", "y", "height", "width"], rl = {
+  style: { width: "100%", height: "100%" },
+  class: "vue-ui-treemap-cell"
+}, ul = {
+  key: 6,
+  class: "vue-data-ui-watermark"
+}, il = ["onClick"], cl = { key: 0 }, dl = { key: 1 }, vl = ["innerHTML"], hl = {
+  __name: "vue-ui-treemap",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint"],
+  setup(n, { expose: u, emit: r }) {
+    const { vue_ui_treemap: i } = ft(), s = n, c = r, d = it();
+    He(() => {
+      d["chart-background"] && console.warn("VueUiTreemap does not support the #chart-background slot.");
+    });
+    const h = C(() => !!s.dataset && s.dataset.length), p = C(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), I = g(qe()), N = g(!1), P = g(""), w = g(!1), k = g(0), m = g([]), x = g(null), M = g(null), z = g(null), ye = g(null), me = g(null), be = g(0), ke = g(0), we = g(0), e = C({
+      get: () => xe(),
+      set: (t) => t
+    }), { userOptionsVisible: de, setUserOptionsVisibility: Ce, keepUserOptionState: $e } = Dt({ config: e.value }), { svgRef: Te } = Mt({ config: e.value.style.chart.title });
+    function xe() {
+      const t = Ze({
+        userConfig: s.config,
+        defaultConfig: i
+      });
+      return t.theme ? {
+        ...Ze({
+          userConfig: yt.vue_ui_treemap[t.theme] || s.config,
+          defaultConfig: t
+        }),
+        customPalette: gt[t.theme] || S
+      } : t;
+    }
+    ct(() => s.config, (t) => {
+      e.value = xe(), de.value = !e.value.userOptions.showOnChartHover, be.value += 1, ke.value += 1, we.value += 1, F.value.showTable = e.value.table.show, F.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const { isPrinting: _e, isImaging: Oe, generatePdf: Se, generateImage: Ne } = _t({
+      elementId: `treemap_${I.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-treemap",
+      options: e.value.userOptions.print
+    }), tt = C(() => e.value.userOptions.show && !e.value.style.chart.title.text), oe = C(() => mt(e.value.customPalette)), F = g({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    }), V = g({
+      height: e.value.style.chart.height,
+      width: e.value.style.chart.width
+    }), H = C(() => ({
+      bottom: V.value.height - e.value.style.chart.padding.bottom,
+      height: V.value.height - e.value.style.chart.padding.top - e.value.style.chart.padding.bottom,
+      left: e.value.style.chart.padding.left,
+      right: V.value.width - e.value.style.chart.padding.right,
+      top: e.value.style.chart.padding.top,
+      vbHeight: V.value.height,
+      vbWidth: V.value.width,
+      width: V.value.width - e.value.style.chart.padding.left - e.value.style.chart.padding.right
+    }));
+    function Ae(t) {
+      t.forEach((o, l) => {
+        o.id = qe(), o.color = ie(o.color) || oe.value[l] || S[l] || S[l % S.length], o.children && (o.children.forEach((a) => {
+          a.parentId = o.id, a.color = o.color;
+        }), Ae(o.children));
+      });
+    }
+    const U = g(s.dataset), ae = g(null);
+    He(() => {
+      lt();
+    });
+    function lt() {
+      if (bt(s.dataset) && kt({
+        componentName: "VueUiTreemap",
+        type: "dataset"
+      }), Ae(U.value), e.value.responsive) {
+        const t = zt(() => {
+          const { width: o, height: l } = Ft({
+            chart: x.value,
+            title: e.value.style.chart.title.text ? M.value : null,
+            legend: e.value.style.chart.legend.show ? z.value : null,
+            source: ye.value,
+            noTitle: me.value
+          });
+          requestAnimationFrame(() => {
+            V.value.width = o, V.value.height = l;
+          });
+        });
+        ae.value = new ResizeObserver(t), ae.value.observe(x.value.parentNode);
+      }
+    }
+    dt(() => {
+      ae.value && ae.value.disconnect();
+    });
+    const Y = g(U.value), Q = C(() => Y.value.map((t, o) => ({
+      ...t,
+      color: ie(t.color) || oe.value[o] || S[o] || S[o % S.length]
+    })).filter((t) => !m.value.includes(t.id))), Z = C(() => U.value.filter((t) => !m.value.includes(t.id)).map((t) => t.value || 0).reduce((t, o) => t + o, 0)), Ie = C({
+      get() {
+        let t = [...Q.value];
+        return e.value.style.chart.layout.sorted && (t = [...Q.value].sort((o, l) => l.value - o.value)), t.map((o) => ({
+          ...o
+        }));
+      },
+      set(t) {
+        return t;
+      }
+    });
+    function Pe(t, o) {
+      return t.value / o;
+    }
+    function ot(t, o, l) {
+      const a = e.value.style.chart.layout.rects.colorRatio - Pe(o, l);
+      return Xe(t, a < 0 ? 0 : a);
+    }
+    function ze(t, o, l, a) {
+      return t.map((f, B) => {
+        const re = ot(ie(o) || oe.value[B] || S[B] || S[B % S.length], f, a), ut = Pe(f, a);
+        return {
+          ...f,
+          color: re,
+          proportion: ut,
+          parentName: l,
+          children: f.children ? ze(f.children, re, f.name, a) : void 0
+        };
+      });
+    }
+    const ee = C(() => Ht(
+      Ie.value.map((t, o) => {
+        const l = t.children ? t.children.reduce((a, f) => a + f.value, 0) : t.value;
+        return {
+          value: t.value,
+          id: t.id,
+          children: t.children ? ze(t.children.sort((a, f) => f.value - a.value), t.color, t.name, l) : void 0,
+          color: t.color,
+          name: t.name
+        };
+      }),
+      { x0: H.value.left * 2, y0: H.value.top, x1: H.value.width, y1: H.value.height }
+    ));
+    function Fe({ y0: t, y1: o }) {
+      return o - t <= 0 ? 1e-4 : o - t;
+    }
+    function Re({ x0: t, x1: o }) {
+      return o - t <= 0 ? 1e-4 : o - t;
+    }
+    function W(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 at(t) {
+      w.value = t, k.value += 1;
+    }
+    const J = C(() => ({
+      startX: 0,
+      startY: 0,
+      width: H.value.vbWidth,
+      height: H.value.vbHeight
+    }));
+    function K(t, o = U.value) {
+      for (const l of o) {
+        if (l.id === t)
+          return l;
+        if (l.children) {
+          const a = K(t, l.children);
+          if (a)
+            return a;
+        }
+      }
+      return null;
+    }
+    const A = g([]), E = C(() => A.value.length > 0);
+    function Le(t) {
+      var l;
+      if (!t) {
+        Y.value = U.value.slice(), c("selectDatapoint", void 0), A.value = [];
+        return;
+      }
+      const o = K(t.id);
+      if (o && ((l = o.children) != null && l.length))
+        A.value.push(o.id), Y.value = o.children.slice(), c("selectDatapoint", t);
+      else if (t.parentId) {
+        A.value.push(t.parentId);
+        const a = K(t.parentId);
+        Y.value = a.children.slice(), c("selectDatapoint", t);
+      } else if (A.value.length > 0) {
+        A.value.pop();
+        const a = A.value[A.value.length - 1];
+        if (a) {
+          const f = K(a);
+          Y.value = f.children.slice();
+        } else
+          Y.value = U.value.slice(), A.value = [], c("selectDatapoint", void 0);
+      }
+    }
+    const te = C(() => {
+      const t = [
+        { id: null, label: "All" }
+      ];
+      if (A.value.length > 0) {
+        let o = K(A.value[A.value.length - 1]);
+        const l = [];
+        for (; o; )
+          l.unshift(o), o = o.parentId ? K(o.parentId) : null;
+        for (const a of l)
+          t.push({
+            id: a.id,
+            label: a.name,
+            node: a
+          });
+      }
+      return t;
+    }), R = g(null), De = C(() => U.value.map((t, o) => ({
+      ...t,
+      color: ie(t.color) || oe.value[o] || S[o] || S[o % S.length],
+      shape: "square"
+    })).sort((t, o) => o.value - t.value).map((t, o) => ({
+      ...t,
+      proportion: t.value / U.value.map((l) => l.value).reduce((l, a) => l + a, 0),
+      opacity: m.value.includes(t.id) ? 0.5 : 1
+    }))), nt = C(() => ({
+      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 Me(t) {
+      E.value = !1, R.value = null, m.value.includes(t.id) ? m.value = m.value.filter((o) => o !== t.id) : m.value.length < s.dataset.length - 1 && m.value.push(t.id), c("selectLegend", Ie.value);
+    }
+    const ve = g(null);
+    function st({ datapoint: t, seriesIndex: o }) {
+      R.value = t, ve.value = { datapoint: t, seriesIndex: o, config: e.value, series: Q.value };
+      const l = e.value.style.chart.tooltip.customFormat;
+      if (Ye(l) && Tt(() => l({
+        seriesIndex: o,
+        datapoint: t,
+        series: Q.value,
+        config: e.value
+      })))
+        P.value = l({
+          seriesIndex: o,
+          datapoint: t,
+          series: Q.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>${ce(
+          e.value.style.chart.layout.labels.formatter,
+          t.value,
+          le({
+            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>`, P.value = `<div>${a}</div>`;
+      }
+      N.value = !0;
+    }
+    const D = C(() => {
+      const t = ee.value.map((l) => ({
+        name: l.name,
+        color: l.color
+      })), o = ee.value.map((l) => l.value);
+      return { head: t, body: o };
+    });
+    function Ve() {
+      pt(() => {
+        const t = D.value.head.map((a, f) => [[
+          a.name
+        ], [D.value.body[f]], [isNaN(D.value.body[f] / Z.value) ? "-" : D.value.body[f] / Z.value * 100]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = Ct(o);
+        $t({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-treemap" });
+      });
+    }
+    const ne = C(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value,
+        e.value.table.columnNames.percentage
+      ], o = D.value.head.map((f, B) => {
+        const re = ce(
+          e.value.style.chart.layout.labels.formatter,
+          D.value.body[B],
+          le({
+            p: e.value.style.chart.layout.labels.prefix,
+            v: D.value.body[B],
+            s: e.value.style.chart.layout.labels.suffix,
+            r: e.value.table.td.roundingValue
+          })
+        );
+        return [
+          {
+            color: f.color,
+            name: f.name,
+            shape: "square"
+          },
+          re,
+          isNaN(D.value.body[B] / Z.value) ? "-" : le({
+            v: D.value.body[B] / Z.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 rt() {
+      return ee.value;
+    }
+    function Ue() {
+      F.value.showTable = !F.value.showTable;
+    }
+    function Be() {
+      F.value.showTooltip = !F.value.showTooltip;
+    }
+    const se = g(!1);
+    function he() {
+      se.value = !se.value;
+    }
+    return u({
+      getData: rt,
+      generateCsv: Ve,
+      generateImage: Ne,
+      generatePdf: Se,
+      toggleTable: Ue,
+      toggleTooltip: Be,
+      toggleAnnotator: he
+    }), (t, o) => (v(), b("div", {
+      ref_key: "treemapChart",
+      ref: x,
+      class: We(`vue-ui-treemap ${w.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: L(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `treemap_${I.value}`,
+      onMouseenter: o[3] || (o[3] = () => y(Ce)(!0)),
+      onMouseleave: o[4] || (o[4] = () => y(Ce)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (v(), G(Lt, {
+        key: 0,
+        svgRef: y(Te),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: se.value,
+        onClose: he
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : _("", !0),
+      tt.value ? (v(), b("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: me,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : _("", !0),
+      e.value.style.chart.title.text ? (v(), b("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: M,
+        style: L(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:6px`)
+      }, [
+        (v(), G(xt, {
+          key: `title_${be.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),
+      e.value.userOptions.show && h.value && (y($e) || y(de)) ? (v(), G(Ot, {
+        ref: "details",
+        key: `user_option_${k.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: y(_e),
+        isImaging: y(Oe),
+        uid: I.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: w.value,
+        isTooltip: F.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: x.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: se.value,
+        onToggleFullscreen: at,
+        onGeneratePdf: y(Se),
+        onGenerateCsv: Ve,
+        onGenerateImage: y(Ne),
+        onToggleTable: Ue,
+        onToggleTooltip: Be,
+        onToggleAnnotator: he,
+        style: L({
+          visibility: y($e) ? y(de) ? "visible" : "hidden" : "visible"
+        })
+      }, vt({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: T(({ isOpen: l, color: a }) => [
+            $(t.$slots, "menuIcon", q(X({ isOpen: l, color: a })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: T(() => [
+            $(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: T(() => [
+            $(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: T(() => [
+            $(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: T(() => [
+            $(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: T(() => [
+            $(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: T(({ toggleFullscreen: l, isFullscreen: a }) => [
+            $(t.$slots, "optionFullscreen", q(X({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: T(({ toggleAnnotator: l, isAnnotator: a }) => [
+            $(t.$slots, "optionAnnotator", q(X({ 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", "onGeneratePdf", "onGenerateImage", "style"])) : _("", !0),
+      te.value.length > 1 ? (v(), b("nav", Yt, [
+        (v(!0), b(pe, null, fe(te.value, (l, a) => (v(), b("span", {
+          key: l.id || "root",
+          onClick: (f) => a === te.value.length - 1 ? () => {
+          } : Le(l.node),
+          class: "vue-ui-treemap-crumb",
+          "data-last-crumb": a === te.value.length - 1,
+          style: L({
+            color: e.value.style.chart.color
+          })
+        }, [
+          O("span", Jt, [
+            O("span", Kt, [
+              $(t.$slots, "breadcrumb-label", Ge({ ref_for: !0 }, { crumb: l }), () => [
+                ue(j(l.label), 1)
+              ], !0)
+            ]),
+            a < te.value.length - 1 ? (v(), b("span", Qt, [
+              $(t.$slots, "breadcrumb-arrow", {}, () => [
+                o[5] || (o[5] = ue(" › "))
+              ], !0)
+            ])) : _("", !0)
+          ])
+        ], 12, Zt))), 128))
+      ])) : _("", !0),
+      h.value ? (v(), b("svg", {
+        key: 5,
+        ref_key: "svgRef",
+        ref: Te,
+        xmlns: y(wt),
+        class: We({ "vue-data-ui-fullscreen--on": w.value, "vue-data-ui-fulscreen--off": !w.value, "vue-data-ui-zoom-plus": !E.value, "vue-data-ui-zoom-minus": E.value }),
+        viewBox: `${J.value.startX} ${J.value.startY} ${J.value.width <= 0 ? 10 : J.value.width} ${J.value.height <= 0 ? 10 : J.value.height}`,
+        style: L(`max-width:100%; overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        Ee(Rt),
+        (v(!0), b(pe, null, fe(ee.value, (l, a) => (v(), b("g", null, [
+          e.value.style.chart.layout.rects.gradient.show ? (v(), b("defs", tl, [
+            O("radialGradient", {
+              id: `tgrad_${l.id}`,
+              gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
+            }, [
+              O("stop", {
+                offset: "18%",
+                "stop-color": l.color
+              }, null, 8, ol),
+              O("stop", {
+                offset: "100%",
+                "stop-color": y(Xe)(l.color, e.value.style.chart.layout.rects.gradient.intensity / 100)
+              }, null, 8, al)
+            ], 8, ll)
+          ])) : _("", !0)
+        ]))), 256)),
+        (v(!0), b(pe, null, fe(ee.value, (l, a) => (v(), b("g", null, [
+          O("rect", {
+            x: l.x0,
+            y: l.y0,
+            height: Fe(l),
+            width: Re(l),
+            fill: p.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: R.value && R.value.id === l.id ? e.value.style.chart.layout.rects.selected.stroke : e.value.style.chart.layout.rects.stroke,
+            "stroke-width": R.value && R.value.id === l.id ? e.value.style.chart.layout.rects.selected.strokeWidth : e.value.style.chart.layout.rects.strokeWidth,
+            onClick: ht((f) => Le(l), ["stop"]),
+            onMouseenter: () => st({
+              datapoint: l,
+              seriesIndex: a
+            }),
+            onMouseleave: o[0] || (o[0] = (f) => {
+              R.value = null, N.value = !1;
+            }),
+            style: L(`opacity:${R.value ? R.value.id === l.id ? 1 : e.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
+            class: "vue-ui-treemap-rect"
+          }, null, 44, nl),
+          (v(), b("foreignObject", {
+            x: l.x0,
+            y: l.y0,
+            height: Fe(l),
+            width: Re(l),
+            class: "vue-ui-treemap-cell-foreignObject"
+          }, [
+            O("div", rl, [
+              e.value.style.chart.layout.labels.showDefaultLabels && (l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || E.value) ? (v(), b("div", {
+                key: 0,
+                class: "vue-ui-treemap-cell-default",
+                style: L(`width:calc(100% - ${W(l) / 1.5}px);text-align:left;line-height:${W(l) < 14 ? 14 : W(l)}px;padding:${W(l) / 3}px; color:${y(je)(l.color)}`)
+              }, [
+                O("span", {
+                  style: L(`width:100%;font-size:${W(l)}px;`)
+                }, j(l.name), 5),
+                o[6] || (o[6] = O("br", null, null, -1)),
+                O("span", {
+                  style: L(`width:100%;font-size:${W(l)}px;`)
+                }, j(y(ce)(
+                  e.value.style.chart.layout.labels.formatter,
+                  l.value,
+                  y(le)({
+                    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),
+              $(t.$slots, "rect", Ge({ ref_for: !0 }, {
+                rect: l,
+                shouldShow: l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || E.value,
+                fontSize: W(l),
+                isZoom: E.value,
+                textColor: y(je)(l.color)
+              }), void 0, !0)
+            ])
+          ], 8, sl))
+        ]))), 256)),
+        $(t.$slots, "svg", q(X({ svg: H.value, isZoom: E.value, rect: R.value, config: e.value })), void 0, !0)
+      ], 14, el)) : _("", !0),
+      t.$slots.watermark ? (v(), b("div", ul, [
+        $(t.$slots, "watermark", q(X({ isPrinting: y(_e) || y(Oe) })), void 0, !0)
+      ])) : _("", !0),
+      h.value ? _("", !0) : (v(), G(At, {
+        key: 7,
+        config: {
+          type: "treemap",
+          style: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            treemap: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      O("div", {
+        ref_key: "chartLegend",
+        ref: z
+      }, [
+        e.value.style.chart.legend.show ? (v(), G(Nt, {
+          key: `legend_${we.value}`,
+          legendSet: De.value,
+          config: nt.value,
+          id: `treemap_legend_${I.value}`,
+          onClickMarker: o[1] || (o[1] = ({ legend: l }) => Me(l))
+        }, {
+          item: T(({ legend: l, index: a }) => [
+            O("div", {
+              onClick: (f) => Me(l),
+              style: L(`opacity:${m.value.includes(l.id) ? 0.5 : 1}`)
+            }, [
+              ue(j(l.name) + ": " + j(y(ce)(
+                e.value.style.chart.layout.labels.formatter,
+                l.value,
+                y(le)({
+                  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 }
+              )) + " ", 1),
+              m.value.includes(l.id) ? (v(), b("span", dl, " ( - % ) ")) : (v(), b("span", cl, " (" + j(isNaN(l.value / Z.value) ? "-" : (l.value / Z.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)) + "%) ", 1))
+            ], 12, il)
+          ]),
+          _: 1
+        }, 8, ["legendSet", "config", "id"])) : $(t.$slots, "legend", {
+          key: 1,
+          legend: De.value
+        }, void 0, !0)
+      ], 512),
+      t.$slots.source ? (v(), b("div", {
+        key: 8,
+        ref_key: "source",
+        ref: ye,
+        dir: "auto"
+      }, [
+        $(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : _("", !0),
+      Ee(St, {
+        show: F.value.showTooltip && N.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: x.value,
+        content: P.value,
+        isFullscreen: w.value,
+        isCustom: y(Ye)(e.value.style.chart.tooltip.customFormat)
+      }, {
+        "tooltip-before": T(() => [
+          $(t.$slots, "tooltip-before", q(X({ ...ve.value })), void 0, !0)
+        ]),
+        "tooltip-after": T(() => [
+          $(t.$slots, "tooltip-after", q(X({ ...ve.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
+      h.value ? (v(), G(Pt, {
+        key: 9,
+        hideDetails: "",
+        config: {
+          open: F.value.showTable,
+          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
+          }
+        }
+      }, {
+        content: T(() => [
+          (v(), G(It, {
+            key: `table_${ke.value}`,
+            colNames: ne.value.colNames,
+            head: ne.value.head,
+            body: ne.value.body,
+            config: ne.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: o[2] || (o[2] = (l) => F.value.showTable = !1)
+          }, {
+            th: T(({ th: l }) => [
+              O("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, vl)
+            ]),
+            td: T(({ td: l }) => [
+              ue(j(l.name || l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : _("", !0)
+    ], 46, jt));
+  }
+}, Al = /* @__PURE__ */ Vt(hl, [["__scopeId", "data-v-2bcbaa56"]]);
+export {
+  Al as default
+};