vue-data-ui 2.4.1 → 2.4.2

package/dist/vue-ui-treemap-3FNUlKxL.js

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