vue-data-ui 2.4.1 → 2.4.3

package/dist/vue-ui-treemap-DY-lRAhC.js

@@ -0,0 +1,825 @@
+import { computed as k, ref as p, watch as Je, onMounted as Ke, onBeforeUnmount as Qe, openBlock as y, createElementBlock as C, normalizeClass as Ne, normalizeStyle as B, createBlock as U, createCommentVNode as F, unref as b, createSlots as et, withCtx as x, renderSlot as $, normalizeProps as G, guardReactiveProps as X, createVNode as ze, Fragment as Pe, renderList as Ae, createElementVNode as O, toDisplayString as Y, createTextVNode as Ie, nextTick as tt, pushScopeId as ot, popScopeId as lt } from "vue";
+import { u as at, c as Fe, t as nt, a as st, p as T, b as rt, o as ut, e as it, d as ae, i as ne, f as K, X as ct, l as Le, F as Re, x as De, y as dt, q as vt, r as ht } from "./index-Bya_q1J-.js";
+import { _ as ft } from "./Title-C5pIfQAz.js";
+import { u as pt, U as gt } from "./usePrinter-CiHd1FwD.js";
+import { _ as yt } from "./Tooltip-Cz24YLfw.js";
+import { L as mt } from "./Legend-DNgTCgEK.js";
+import bt from "./vue-ui-skeleton-BYssP0K4.js";
+import { D as wt } from "./DataTable-DYqC2pqu.js";
+import kt from "./vue-ui-accordion-DfUfL2dI.js";
+import { t as Ct, u as $t } from "./useResponsive-BY8tgM1n.js";
+import { u as Me } from "./useNestedProp-B33hazbH.js";
+import { _ as xt } from "./PackageVersion-VkaUzgmt.js";
+import { P as Tt } from "./PenAndPaper-DAZYA8Ew.js";
+import { _ as _t } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function Ve(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 Be(a) {
+  const { xOffset: i, yOffset: s, width: n, height: u } = a;
+  return {
+    x0: i,
+    y0: s,
+    x1: i + n,
+    y1: s + u
+  };
+}
+function Ot(a, i, s) {
+  if (a.length === 0)
+    return !0;
+  {
+    const n = a.concat(i), u = Ve(
+      a,
+      s
+    ), c = Ve(n, s);
+    return u >= c;
+  }
+}
+function St(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 Nt(a, i) {
+  const s = {
+    ...i,
+    children: a
+  };
+  return He(s);
+}
+function zt(a) {
+  return (a.x1 - a.x0) * (a.y1 - a.y0);
+}
+function We(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 g = [];
+  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, g.push(P);
+    }
+    return g;
+  } 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, g.push(P);
+    }
+    return g;
+  }
+}
+function Pt(a) {
+  const i = ce(a), s = i.width, n = i.height;
+  return Math.min(s, n);
+}
+function At(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 It(a, i, s, n) {
+  let u = a, c = i, d = s, h = n;
+  for (; ; ) {
+    const v = u.length;
+    if (v === 0) {
+      const g = We(c, d);
+      return h.concat(g);
+    }
+    const S = Pt(d), w = u[0], N = u.slice(1, v);
+    if (Ot(c, w, S)) {
+      const g = c.concat(w);
+      u = N, c = g, d = d, h = h;
+    } else {
+      const g = c.length;
+      let f = 0;
+      for (let P = 0; P < g; P += 1)
+        f += c[P].normalizedValue;
+      const _ = Ft(d, f), z = We(c, d), R = h.concat(z);
+      u = u, c = [], d = _, h = R;
+    }
+  }
+}
+function He(a) {
+  if (typeof a.children > "u" || !a.children.length)
+    return [a];
+  {
+    const i = At(
+      a.children,
+      zt(a)
+    ), s = It(i, [], a, []), n = s.length, u = [];
+    for (let d = 0; d < n; d += 1)
+      u.push(He(s[d]));
+    return St(u);
+  }
+}
+function Ft(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 Be(v);
+  } else {
+    const d = i / s, h = n - d, v = {
+      xOffset: u,
+      yOffset: c + d,
+      width: s,
+      height: h
+    };
+    return Be(v);
+  }
+}
+const Lt = (a) => (ot("data-v-b9bc8597"), a = a(), lt(), a), Rt = ["id"], Dt = ["xmlns", "viewBox"], Mt = { key: 0 }, Vt = ["id"], Bt = ["stop-color"], Wt = ["stop-color"], Ht = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter"], Et = ["x", "y", "height", "width"], Ut = {
+  style: { width: "100%", height: "100%" },
+  class: "vue-ui-treemap-cell"
+}, Gt = /* @__PURE__ */ Lt(() => /* @__PURE__ */ O("br", null, null, -1)), Xt = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, qt = ["onClick"], jt = { key: 0 }, Yt = { key: 1 }, Zt = ["innerHTML"], Jt = {
+  __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 } = at(), c = k(() => !!n.dataset && n.dataset.length), d = k(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), h = p(Fe()), v = p(!1), S = p(""), w = p(!1), N = p(0), g = p([]), f = p(null), _ = p(null), z = p(null), R = p(null), P = p(0), de = p(0), ve = p(0), e = k({
+      get: () => he(),
+      set: (t) => t
+    });
+    function he() {
+      const t = Me({
+        userConfig: n.config,
+        defaultConfig: u
+      });
+      return t.theme ? {
+        ...Me({
+          userConfig: nt.vue_ui_treemap[t.theme] || n.config,
+          defaultConfig: t
+        }),
+        customPalette: st[t.theme] || T
+      } : t;
+    }
+    Je(() => n.config, (t) => {
+      e.value = he(), P.value += 1, de.value += 1, ve.value += 1;
+    }, { deep: !0 });
+    const { isPrinting: fe, isImaging: pe, generatePdf: ge, generateImage: ye } = pt({
+      elementId: `treemap_${h.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-treemap"
+    }), Q = k(() => rt(e.value.customPalette)), D = p({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    }), M = p({
+      height: e.value.style.chart.height,
+      width: e.value.style.chart.width
+    }), W = k(() => ({
+      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 me(t) {
+      t.forEach((l, o) => {
+        l.id = Fe(), 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;
+        }), me(l.children));
+      });
+    }
+    const H = p(n.dataset), ee = p(null);
+    Ke(() => {
+      Ee();
+    });
+    function Ee() {
+      if (ut(n.dataset) && it({
+        componentName: "VueUiTreemap",
+        type: "dataset"
+      }), me(H.value), e.value.responsive) {
+        const t = Ct(() => {
+          const { width: l, height: o } = $t({
+            chart: f.value,
+            title: e.value.style.chart.title.text ? _.value : null,
+            legend: e.value.style.chart.legend.show ? z.value : null,
+            source: R.value
+          });
+          M.value.width = l, M.value.height = o;
+        });
+        ee.value = new ResizeObserver(t), ee.value.observe(f.value.parentNode);
+      }
+    }
+    Qe(() => {
+      ee.value && ee.value.disconnect();
+    });
+    const se = p(H.value), Z = k(() => se.value.map((t, l) => ({
+      ...t,
+      color: ae(t.color) || Q.value[l] || T[l] || T[l % T.length]
+    })).filter((t) => !g.value.includes(t.id))), q = k(() => H.value.filter((t) => !g.value.includes(t.id)).map((t) => t.value || 0).reduce((t, l) => t + l, 0)), be = k({
+      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 we(t, l) {
+      return t.value / l;
+    }
+    function Ue(t, l, o) {
+      const r = e.value.style.chart.layout.rects.colorRatio - we(l, o);
+      return Le(t, r < 0 ? 0 : r);
+    }
+    function ke(t, l, o, r) {
+      return t.map((m, V) => {
+        const le = Ue(ae(l) || Q.value[V] || T[V] || T[V % T.length], m, r), Ze = we(m, r);
+        return {
+          ...m,
+          color: le,
+          proportion: Ze,
+          parentName: o,
+          children: m.children ? ke(m.children, le, m.name, r) : void 0
+        };
+      });
+    }
+    const J = k(() => Nt(
+      be.value.map((t, l) => {
+        const o = t.children ? t.children.reduce((r, m) => r + m.value, 0) : t.value;
+        return {
+          value: t.value,
+          id: t.id,
+          children: t.children ? ke(t.children.sort((r, m) => m.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 $e({ 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 Ge(t) {
+      w.value = t, N.value += 1;
+    }
+    const j = k(() => ({
+      startX: 0,
+      startY: 0,
+      width: W.value.vbWidth,
+      height: W.value.vbHeight
+    })), A = p(!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 Xe(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 = p(null), xe = k(() => 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: g.value.includes(t.id) ? 0.5 : 1
+    }))), qe = 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 Te(t) {
+      A.value = !1, I.value = null, g.value.includes(t.id) ? g.value = g.value.filter((l) => l !== t.id) : g.value.length < n.dataset.length - 1 && g.value.push(t.id), s("selectLegend", be.value);
+    }
+    const ue = p(null);
+    function je({ 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 (De(o) && dt(() => 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 L = k(() => {
+      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 _e() {
+      tt(() => {
+        const t = L.value.head.map((r, m) => [[
+          r.name
+        ], [L.value.body[m]], [isNaN(L.value.body[m] / q.value) ? "-" : L.value.body[m] / q.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), o = vt(l);
+        ht({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-treemap" });
+      });
+    }
+    const te = k(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value,
+        e.value.table.columnNames.percentage
+      ], l = L.value.head.map((m, V) => {
+        const le = ne(
+          e.value.style.chart.layout.labels.formatter,
+          L.value.body[V],
+          K({
+            p: e.value.style.chart.layout.labels.prefix,
+            v: L.value.body[V],
+            s: e.value.style.chart.layout.labels.suffix,
+            r: e.value.table.td.roundingValue
+          })
+        );
+        return [
+          {
+            color: m.color,
+            name: m.name,
+            shape: "square"
+          },
+          le,
+          isNaN(L.value.body[V] / q.value) ? "-" : K({
+            v: L.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 Ye() {
+      return J.value;
+    }
+    function Oe() {
+      D.value.showTable = !D.value.showTable;
+    }
+    function Se() {
+      D.value.showTooltip = !D.value.showTooltip;
+    }
+    const oe = p(!1);
+    function ie() {
+      oe.value = !oe.value;
+    }
+    return i({
+      getData: Ye,
+      generateCsv: _e,
+      generateImage: ye,
+      generatePdf: ge,
+      toggleTable: Oe,
+      toggleTooltip: Se,
+      toggleAnnotator: ie
+    }), (t, l) => (y(), C("div", {
+      ref_key: "treemapChart",
+      ref: f,
+      class: Ne(`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 ? (y(), U(Tt, {
+        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"])) : F("", !0),
+      e.value.style.chart.title.text ? (y(), C("div", {
+        key: 1,
+        ref_key: "chartTitle",
+        ref: _,
+        style: B(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:6px`)
+      }, [
+        (y(), U(ft, {
+          key: `title_${P.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)) : F("", !0),
+      e.value.userOptions.show && c.value ? (y(), U(gt, {
+        ref: "details",
+        key: `user_option_${N.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: b(fe),
+        isImaging: b(pe),
+        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: Ge,
+        onGeneratePdf: b(ge),
+        onGenerateCsv: _e,
+        onGenerateImage: b(ye),
+        onToggleTable: Oe,
+        onToggleTooltip: Se,
+        onToggleAnnotator: ie
+      }, et({ _: 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"])) : F("", !0),
+      c.value ? (y(), C("svg", {
+        key: 3,
+        xmlns: b(ct),
+        class: Ne({ "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}`)
+      }, [
+        ze(xt),
+        (y(!0), C(Pe, null, Ae(J.value, (o, r) => (y(), C("g", null, [
+          e.value.style.chart.layout.rects.gradient.show ? (y(), C("defs", Mt, [
+            O("radialGradient", {
+              id: `tgrad_${o.id}`,
+              gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
+            }, [
+              O("stop", {
+                offset: "18%",
+                "stop-color": o.color
+              }, null, 8, Bt),
+              O("stop", {
+                offset: "100%",
+                "stop-color": b(Le)(o.color, e.value.style.chart.layout.rects.gradient.intensity / 100)
+              }, null, 8, Wt)
+            ], 8, Vt)
+          ])) : F("", !0)
+        ]))), 256)),
+        (y(!0), C(Pe, null, Ae(J.value, (o, r) => (y(), C("g", null, [
+          O("rect", {
+            x: o.x0,
+            y: o.y0,
+            height: Ce(o),
+            width: $e(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: (m) => Xe(o),
+            onMouseenter: () => je({
+              datapoint: o,
+              seriesIndex: r
+            }),
+            onMouseleave: l[0] || (l[0] = (m) => {
+              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, Ht),
+          (y(), C("foreignObject", {
+            x: o.x0,
+            y: o.y0,
+            height: Ce(o),
+            width: $e(o),
+            class: "vue-ui-treemap-cell-foreignObject"
+          }, [
+            O("div", Ut, [
+              e.value.style.chart.layout.labels.showDefaultLabels && (o.proportion > e.value.style.chart.layout.labels.hideUnderProportion || A.value) ? (y(), C("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(Re)(o.color)}`)
+              }, [
+                O("span", {
+                  style: B(`width:100%;font-size:${E(o)}px;`)
+                }, Y(o.name), 5),
+                Gt,
+                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)) : F("", !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(Re)(o.color)
+              })), void 0, !0)
+            ])
+          ], 8, Et))
+        ]))), 256)),
+        $(t.$slots, "svg", G(X({ svg: W.value, isZoom: A.value, rect: I.value, config: e.value })), void 0, !0)
+      ], 14, Dt)) : F("", !0),
+      t.$slots.watermark ? (y(), C("div", Xt, [
+        $(t.$slots, "watermark", G(X({ isPrinting: b(fe) || b(pe) })), void 0, !0)
+      ])) : F("", !0),
+      c.value ? F("", !0) : (y(), U(bt, {
+        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 ? (y(), U(mt, {
+          key: `legend_${ve.value}`,
+          legendSet: xe.value,
+          config: qe.value,
+          id: `treemap_legend_${h.value}`,
+          onClickMarker: l[1] || (l[1] = ({ legend: o }) => Te(o))
+        }, {
+          item: x(({ legend: o, index: r }) => [
+            O("div", {
+              onClick: (m) => Te(o),
+              style: B(`opacity:${g.value.includes(o.id) ? 0.5 : 1}`)
+            }, [
+              Ie(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),
+              g.value.includes(o.id) ? (y(), C("span", Yt, " ( - % ) ")) : (y(), C("span", jt, " (" + Y(isNaN(o.value / q.value) ? "-" : (o.value / q.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)) + "%) ", 1))
+            ], 12, qt)
+          ]),
+          _: 1
+        }, 8, ["legendSet", "config", "id"])) : $(t.$slots, "legend", {
+          key: 1,
+          legend: xe.value
+        }, void 0, !0)
+      ], 512),
+      t.$slots.source ? (y(), C("div", {
+        key: 6,
+        ref_key: "source",
+        ref: R,
+        dir: "auto"
+      }, [
+        $(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : F("", !0),
+      ze(yt, {
+        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(De)(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 ? (y(), U(kt, {
+        key: 7,
+        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(() => [
+          (y(), U(wt, {
+            key: `table_${de.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, Zt)
+            ]),
+            td: x(({ td: o }) => [
+              Ie(Y(o.name || o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : F("", !0)
+    ], 14, Rt));
+  }
+}, ho = /* @__PURE__ */ _t(Jt, [["__scopeId", "data-v-b9bc8597"]]);
+export {
+  ho as default
+};