vue-data-ui 2.12.8-beta.3 → 2.13.0

package/dist/{vue-ui-treemap-B0CPNusH.js → vue-ui-treemap-D5Nk7usb.js}

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