vue-data-ui 2.3.2 → 2.3.4

package/dist/vue-ui-treemap-DCnv-xYr.js

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