vue-data-ui 3.0.23 → 3.1.1

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

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