vue-data-ui 2.12.6 → 2.12.7-beta.0

package/dist/vue-ui-treemap-1Lx7YRtc.js

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