vue-data-ui 3.10.0 → 3.10.2

package/dist/{vue-ui-onion-yseOpPeu.js → vue-ui-onion-DmwZ1gg_.js}

@@ -1,40 +1,44 @@
-import { defineAsyncComponent as S, computed as v, ref as u, toRefs as Nt, watch as V, shallowRef as Ue, onMounted as Vt, onBeforeUnmount as Ut, createElementBlock as g, openBlock as r, unref as s, normalizeStyle as E, normalizeClass as W, createBlock as _, createCommentVNode as p, createElementVNode as P, createVNode as ce, withCtx as c, renderSlot as d, normalizeProps as k, guardReactiveProps as C, createSlots as Ge, Fragment as U, renderList as G, toDisplayString as q, Teleport as Gt, resolveDynamicComponent as Yt, mergeProps as Xt, createTextVNode as Ye, nextTick as Xe } from "vue";
-import { c as jt, t as Ht, i as Wt, j as je, k as qt, o as He, g as de, m as Jt, a as ve, d as L, X as Kt, y as We, v as Qt, r as Zt, _ as eo } from "./lib-2iaAPQ_c.js";
-import { b as to } from "./labelUtils-B3mOOEke.js";
-import { t as oo, u as lo } from "./useResponsive-DfdjqQps.js";
-import { u as ao, a as ge } from "./useNestedProp-BCt4DMkT.js";
-import { u as no, B as ro } from "./BaseScanner-BMpwQAfz.js";
-import { u as so } from "./usePrinter-ChVMpU2f.js";
-import { u as uo } from "./useSvgExport-ByUukOZt.js";
-import { u as io } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as co } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as vo } from "./useChartAccessibility-9icAAmYg.js";
-import { u as go } from "./useAutoSizeLabelsInsideViewbox-DmpzKQ9i.js";
-import ho from "./img-CqYIrJ8I.js";
-import fo from "./Title-B5L2jweB.js";
-import po from "./Legend-D2xmnFPH.js";
-import { _ as bo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gutter: { color: "#4A4A4A" }, labels: { color: "#CCCCCC" } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Je = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", useGradient: !1, layout: { gutter: { color: "#5D403730" }, labels: { color: "#424242" } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Ke = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", useGradient: !1, layout: { gutter: { color: "#5D403730" }, labels: { color: "#BDBDBD" } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Qe = { style: { chart: { backgroundColor: "#1A1A1A", useGradient: !1, color: "#99AA99", layout: { gutter: { color: "#2A2A2A" }, labels: { color: "#99CC99" } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Ze = { style: { chart: { useGradient: !1, backgroundColor: "#fbfafa", color: "#8A9892", layout: { gutter: { color: "#F7EDE2" }, labels: { color: "#A0AC94" } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, et = { style: { chart: { useGradient: !1, backgroundColor: "#f6f6fb", color: "#50606C", layout: { gutter: { color: "#DDDDDB" }, labels: { color: "#61747E" } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, tt = {
+import { defineAsyncComponent as S, computed as v, ref as u, toRefs as Ut, watch as V, shallowRef as Ue, onMounted as Gt, onBeforeUnmount as Yt, createElementBlock as g, openBlock as r, unref as s, normalizeStyle as E, normalizeClass as W, createBlock as _, createCommentVNode as p, createElementVNode as P, createVNode as ce, withCtx as c, renderSlot as d, normalizeProps as C, guardReactiveProps as k, createSlots as Ge, Fragment as U, renderList as G, toDisplayString as q, Teleport as Xt, resolveDynamicComponent as jt, mergeProps as Ht, createTextVNode as Ye, nextTick as Xe } from "vue";
+import { c as Wt, t as qt, i as Jt, j as je, k as Kt, o as He, g as de, m as Qt, a as ve, d as L, X as Zt, y as We, v as eo, r as to, _ as oo } from "./lib-CVHM9FhP.js";
+import { b as lo } from "./labelUtils-D6Y-n7cD.js";
+import { t as ao, u as no } from "./useResponsive-DfdjqQps.js";
+import { u as ro, a as ge } from "./useNestedProp-Ckf_2P_V.js";
+import { u as so, B as uo } from "./BaseScanner-BMpwQAfz.js";
+import { u as io } from "./usePrinter-1NmjuP-i.js";
+import { u as co } from "./useSvgExport-ByUukOZt.js";
+import { u as vo } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as go } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ho } from "./useChartAccessibility-9icAAmYg.js";
+import { u as fo } from "./useAutoSizeLabelsInsideViewbox-CqeJ1kZA.js";
+import po from "./img-6fNF_rG0.js";
+import bo from "./Title-NgeRXqRA.js";
+import yo from "./Legend-DN5UJOBH.js";
+import { _ as mo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const qe = { userOptions: { show: !1 }, style: { chart: { useGradient: !1, legend: { show: !1 } } } }, Je = { userOptions: { show: !1 }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", useGradient: !1, layout: { gutter: { color: "#2A2A2A" }, labels: { color: "#CCCCCC" } }, legend: { show: !1, backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#3A3A3A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Ke = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gutter: { color: "#4A4A4A" }, labels: { color: "#CCCCCC" } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Qe = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", useGradient: !1, layout: { gutter: { color: "#5D403730" }, labels: { color: "#424242" } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Ze = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", useGradient: !1, layout: { gutter: { color: "#5D403730" }, labels: { color: "#BDBDBD" } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, et = { style: { chart: { backgroundColor: "#1A1A1A", useGradient: !1, color: "#99AA99", layout: { gutter: { color: "#2A2A2A" }, labels: { color: "#99CC99" } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, tt = { style: { chart: { useGradient: !1, backgroundColor: "#fbfafa", color: "#8A9892", layout: { gutter: { color: "#F7EDE2" }, labels: { color: "#A0AC94" } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, ot = { style: { chart: { useGradient: !1, backgroundColor: "#f6f6fb", color: "#50606C", layout: { gutter: { color: "#DDDDDB" }, labels: { color: "#61747E" } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, lt = {
   default: {},
-  dark: qe,
-  celebration: Je,
-  celebrationNight: Ke,
-  hack: Qe,
-  zen: Ze,
-  concrete: et
-}, el = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  minimal: qe,
+  minimalDark: Je,
+  dark: Ke,
+  celebration: Qe,
+  celebrationNight: Ze,
+  hack: et,
+  zen: tt,
+  concrete: ot
+}, ol = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  celebration: Je,
-  celebrationNight: Ke,
-  concrete: et,
-  dark: qe,
-  default: tt,
-  hack: Qe,
-  zen: Ze
-}, Symbol.toStringTag, { value: "Module" })), yo = ["id"], mo = ["id"], ko = ["xmlns", "viewBox"], Co = ["width", "height"], wo = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Ao = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], $o = ["id"], To = ["stdDeviation"], Fo = ["filter"], Oo = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Do = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter", "onMouseleave", "onClick"], xo = { key: 2 }, So = ["onMouseenter", "onMouseleave", "onClick"], _o = ["x", "y", "font-size", "fill", "font-weight"], Po = {
+  celebration: Qe,
+  celebrationNight: Ze,
+  concrete: ot,
+  dark: Ke,
+  default: lt,
+  hack: et,
+  minimal: qe,
+  minimalDark: Je,
+  zen: tt
+}, Symbol.toStringTag, { value: "Module" })), Co = ["id"], ko = ["id"], Ao = ["xmlns", "viewBox"], wo = ["width", "height"], $o = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], To = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Oo = ["id"], Do = ["stdDeviation"], Fo = ["filter"], xo = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], So = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter", "onMouseleave", "onClick"], _o = { key: 2 }, Po = ["onMouseenter", "onMouseleave", "onClick"], Bo = ["x", "y", "font-size", "fill", "font-weight"], Io = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Bo = ["id"], Io = ["onClick"], Eo = ["innerHTML"], Mo = {
+}, Eo = ["id"], Mo = ["onClick"], Lo = ["innerHTML"], Ro = {
   __name: "vue-ui-onion",
   props: {
     config: {
@@ -51,9 +55,9 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     }
   },
   emits: ["selectLegend"],
-  setup(ot, { expose: lt, emit: at }) {
-    const nt = S(() => import("./Tooltip-DpfUZbt7.js")), rt = S(() => import("./BaseIcon-B9bGT7HU.js")), st = S(() => import("./vue-ui-accordion-CAXPDm31.js")), ut = S(() => import("./DataTable-DEwh__D8.js")), it = S(() => import("./UserOptions-5pXc4J-c.js")), ct = S(() => import("./PenAndPaper-CulSakut.js")), dt = S(() => import("./PackageVersion-C-JOGZBL.js")), vt = S(() => import("./BaseDraggableDialog-O2XSymlZ.js")), { vue_ui_onion: gt } = ao(), { isThemeValid: ht, warnInvalidTheme: ft } = io(), w = ot, he = v(() => !!w.dataset && w.dataset.length), A = u(jt()), pt = u(null), fe = u(0), J = u(!1), K = u(""), b = u([]), T = u(null), pe = u(null), be = u(null), ye = u(null), me = u(null), ke = u(0), Ce = u(0), we = u(0), F = u(!1), Ae = u(!1), R = u(null), e = u(ee()), { loading: $, FINAL_DATASET: $e, manualLoading: Q } = no({
-      ...Nt(w),
+  setup(at, { expose: nt, emit: rt }) {
+    const st = S(() => import("./Tooltip-B6qvABDL.js")), ut = S(() => import("./BaseIcon-4uOct8re.js")), it = S(() => import("./vue-ui-accordion-DFKaB_05.js")), ct = S(() => import("./DataTable-DyoDzNNY.js")), dt = S(() => import("./UserOptions-CX7Xsusk.js")), vt = S(() => import("./PenAndPaper-LTuSTmWE.js")), gt = S(() => import("./PackageVersion-CQxJyGQr.js")), ht = S(() => import("./BaseDraggableDialog-BQYfVNu8.js")), { vue_ui_onion: ft } = ro(), { isThemeValid: pt, warnInvalidTheme: bt } = vo(), A = at, he = v(() => !!A.dataset && A.dataset.length), w = u(Wt()), yt = u(null), fe = u(0), J = u(!1), K = u(""), b = u([]), T = u(null), pe = u(null), be = u(null), ye = u(null), me = u(null), Ce = u(0), ke = u(0), Ae = u(0), O = u(!1), we = u(!1), R = u(null), e = u(ee()), { loading: $, FINAL_DATASET: $e, manualLoading: Q } = so({
+      ...Ut(A),
       FINAL_CONFIG: e,
       prepareConfig: ee,
       callback: () => {
@@ -67,7 +71,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         { name: "_", percentage: 50, value: 1, color: "#ADADAD" },
         { name: "_", percentage: 50, value: 1, color: "#969696" }
       ],
-      skeletonConfig: Ht({
+      skeletonConfig: qt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -88,35 +92,35 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         }
       })
-    }), { userOptionsVisible: Z, setUserOptionsVisibility: Te, keepUserOptionState: Fe } = co({ config: e.value }), { svgRef: Y } = vo({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: Z, setUserOptionsVisibility: Te, keepUserOptionState: Oe } = go({ config: e.value }), { svgRef: Y } = ho({ config: e.value.style.chart.title });
     function ee() {
       const t = ge({
-        userConfig: w.config,
-        defaultConfig: gt
+        userConfig: A.config,
+        defaultConfig: ft
       }), l = t.theme;
       if (!l) return t;
-      if (!ht.value(t))
-        return ft(t), t;
+      if (!pt.value(t))
+        return bt(t), t;
       const o = ge({
-        userConfig: tt[l] || w.config,
+        userConfig: lt[l] || A.config,
         defaultConfig: t
       }), a = ge({
-        userConfig: w.config,
+        userConfig: A.config,
         defaultConfig: o
       });
       return {
         ...a,
-        customPalette: a.customPalette.length ? a.customPalette : Wt[l] || je
+        customPalette: a.customPalette.length ? a.customPalette : Jt[l] || je
       };
     }
-    V(() => w.config, (t) => {
-      $.value || (e.value = ee()), Z.value = !e.value.userOptions.showOnChartHover, Pe(), ke.value += 1, Ce.value += 1, we.value += 1, y.value.showTable = e.value.table.show, y.value.showTooltip = e.value.style.chart.tooltip.show;
+    V(() => A.config, (t) => {
+      $.value || (e.value = ee()), Z.value = !e.value.userOptions.showOnChartHover, Pe(), Ce.value += 1, ke.value += 1, Ae.value += 1, y.value.showTable = e.value.table.show, y.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const { isPrinting: Oe, isImaging: De, generatePdf: xe, generateImage: Se } = so({
-      elementId: `vue-ui-onion_${A.value}`,
+    const { isPrinting: De, isImaging: Fe, generatePdf: xe, generateImage: Se } = io({
+      elementId: `vue-ui-onion_${w.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-onion",
       options: e.value.userOptions.print
-    }), bt = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), yt = v(() => qt(e.value.customPalette)), y = u({
+    }), mt = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ct = v(() => Kt(e.value.customPalette)), y = u({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     });
@@ -136,30 +140,30 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         bottom: 64
       },
       minRadius: 64
-    }), D = Ue(null), M = Ue(null);
-    Vt(() => {
-      Ae.value = !0, Pe();
+    }), F = Ue(null), M = Ue(null);
+    Gt(() => {
+      we.value = !0, Pe();
     });
-    const mt = v({
+    const kt = v({
       get: () => e.value.style.chart.layout.labels.fontSize,
       set: (t) => t
-    }), { autoSizeLabels: _e } = go({
+    }), { autoSizeLabels: _e } = fo({
       svgRef: Y,
       fontSize: e.value.style.chart.layout.labels.fontSize,
       minFontSize: e.value.style.chart.layout.labels.minFontSize,
-      sizeRef: mt,
+      sizeRef: kt,
       labelClass: ".vue-ui-onion-label"
-    }), kt = v(() => e.value.debug);
+    }), At = v(() => e.value.debug);
     let te = null;
     function Pe() {
-      if (He(w.dataset) && (de({
+      if (He(A.dataset) && (de({
         componentName: "VueUiOnion",
         type: "dataset",
-        debug: kt.value
-      }), Q.value = !0), He(w.dataset) || (Q.value = e.value.loading), e.value.responsive) {
-        const l = oo(() => {
-          te && clearTimeout(te), F.value = !0;
-          let { width: o, height: a } = lo({
+        debug: At.value
+      }), Q.value = !0), He(A.dataset) || (Q.value = e.value.loading), e.value.responsive) {
+        const l = ao(() => {
+          te && clearTimeout(te), O.value = !0;
+          let { width: o, height: a } = no({
             chart: T.value,
             title: e.value.style.chart.title.text ? pe.value : null,
             legend: e.value.style.chart.legend.show ? be.value : null,
@@ -168,16 +172,16 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           });
           a -= 12, requestAnimationFrame(async () => {
             n.value.width = o, n.value.height = a, n.value.padding.top = Math.max(o, a) * 0.125, n.value.padding.right = Math.max(o, a) * 0.125, n.value.padding.bottom = Math.max(o, a) * 0.125, n.value.padding.left = Math.max(o, a) * 0.125, n.value.minRadius = Math.min(o, a) * 0.125, te = setTimeout(() => {
-              F.value = !1, _e();
+              O.value = !1, _e();
             }, 0);
           });
         });
-        D.value && (M.value && D.value.unobserve(M.value), D.value.disconnect()), D.value = new ResizeObserver(l), M.value = T.value.parentNode, D.value.observe(M.value);
+        F.value && (M.value && F.value.unobserve(M.value), F.value.disconnect()), F.value = new ResizeObserver(l), M.value = T.value.parentNode, F.value.observe(M.value);
       }
       requestAnimationFrame(_e);
     }
-    Ut(() => {
-      D.value && (M.value && D.value.unobserve(M.value), D.value.disconnect());
+    Yt(() => {
+      F.value && (M.value && F.value.unobserve(M.value), F.value.disconnect());
     });
     const h = v(() => ({
       top: n.value.padding.top,
@@ -203,12 +207,12 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         index: l
       });
     }), $e.value.map((t, l) => {
-      const o = `onion_serie_${l}_${A.value}`;
+      const o = `onion_serie_${l}_${w.value}`;
       return {
         ...t,
         percentage: t.percentage || 0,
         targetPercentage: t.percentage || 0,
-        color: Jt(t.color) || yt.value[l] || je[l],
+        color: Qt(t.color) || Ct.value[l] || je[l],
         id: o,
         shape: "circle",
         opacity: b.value.includes(o) ? 0.5 : 1,
@@ -241,14 +245,14 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         ...t,
         display: `${t.name}${o || a ? ": " : ""}${ie}`
       };
-    })), z = u(f.value), Ct = v(() => e.value.useStartAnimation), wt = u(null), At = v(() => Math.max(...f.value.map((t) => t.percentage))), le = u(!1);
-    V(() => f.value, Be, { immediate: !0, deep: !0 }), V(() => w.dataset, (t) => {
+    })), z = u(f.value), wt = v(() => e.value.useStartAnimation), $t = u(null), Tt = v(() => Math.max(...f.value.map((t) => t.percentage))), le = u(!1);
+    V(() => f.value, Be, { immediate: !0, deep: !0 }), V(() => A.dataset, (t) => {
       Array.isArray(t) && t.length > 0 && (Q.value = !1);
     }, { deep: !0 });
     function Be() {
-      if (Ct.value && !le.value && !$.value) {
+      if (wt.value && !le.value && !$.value) {
         let l = function() {
-          t >= At.value ? (cancelAnimationFrame(wt.value), z.value = f.value, le.value = !0) : (z.value = f.value.map((o) => ({
+          t >= Tt.value ? (cancelAnimationFrame($t.value), z.value = f.value, le.value = !0) : (z.value = f.value.map((o) => ({
             ...o,
             percentage: t < o.targetPercentage ? t : o.targetPercentage
           })), t += 1, requestAnimationFrame(l), le.value = !0);
@@ -262,21 +266,21 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       } else
         z.value = f.value;
     }
-    const $t = v(() => ({
+    const Ot = v(() => ({
       cy: "onion-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" : ""
-    })), Tt = v(() => f.value.filter((t) => !b.value.includes(t.id)).length), B = v(() => {
+    })), Dt = v(() => f.value.filter((t) => !b.value.includes(t.id)).length), B = v(() => {
       const t = Math.min(h.value.width, h.value.height) / 2 / f.value.length;
       return {
         gutter: (t > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : t) * e.value.style.chart.layout.gutter.width,
         track: (t > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : t) * e.value.style.chart.layout.track.width
       };
-    }), O = v(() => z.value.filter((t) => !b.value.includes(t.id)).map((t, l) => {
-      const o = (h.value.maxRadius - B.value.track) / Tt.value / 2 * (1 + l), a = h.value.centerY - o;
+    }), D = v(() => z.value.filter((t) => !b.value.includes(t.id)).map((t, l) => {
+      const o = (h.value.maxRadius - B.value.track) / Dt.value / 2 * (1 + l), a = h.value.centerY - o;
       return {
         percentage: t.percentage || 0,
         ...t,
@@ -300,7 +304,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         `.trim()
       };
     }
-    const Ot = at;
+    const xt = rt;
     function X(t) {
       if (b.value.includes(t))
         b.value = b.value.filter((l) => l !== t);
@@ -308,7 +312,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         if (b.value.length === f.value.length - 1) return;
         b.value.push(t);
       }
-      Ot("selectLegend", O.value);
+      xt("selectLegend", D.value);
     }
     function Ie(t) {
       if (!f.value.length)
@@ -316,26 +320,26 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       const l = f.value.find((o) => o.name === t);
       return l || (e.value.debug && console.warn(`VueUiOnion - Series name not found "${t}"`), null);
     }
-    function Dt(t) {
+    function St(t) {
       const l = Ie(t);
       l !== null && b.value.includes(l.id) && X(l.id);
     }
-    function xt(t) {
+    function _t(t) {
       const l = Ie(t);
       l !== null && (b.value.includes(l.id) || X(l.id));
     }
-    function St() {
-      return O.value;
+    function Pt() {
+      return D.value;
     }
     const ae = v(() => {
-      const t = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], l = O.value.map((o) => [
+      const t = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], l = D.value.map((o) => [
         o.name,
         o.percentage,
         o.value
       ]);
       return { head: t, body: l };
     }), j = v(() => {
-      const t = ae.value.head, l = O.value.map((a) => [
+      const t = ae.value.head, l = D.value.map((a) => [
         `<span style="color:${a.color}">⬤</span> ${a.name}`,
         `${Number(a.percentage ?? 0).toFixed(e.value.table.td.roundingPercentage).toLocaleString()}%`,
         `${a.prefix || ""}${[null, void 0, NaN, "NaN"].includes(a.value) ? "-" : a.value.toFixed(e.value.table.td.roundingValue).toLocaleString()}${a.suffix || ""}`
@@ -356,8 +360,8 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     });
     function ne(t = null) {
       Xe(() => {
-        const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = ae.value.head, a = ae.value.body, i = l.concat([o]).concat(a), m = Qt(i);
-        t ? t(m) : Zt({ csvContent: m, title: e.value.style.chart.title.text || "vue-ui-onion" });
+        const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = ae.value.head, a = ae.value.body, i = l.concat([o]).concat(a), m = eo(i);
+        t ? t(m) : to({ csvContent: m, title: e.value.style.chart.title.text || "vue-ui-onion" });
       });
     }
     const x = u(void 0), I = u(!1);
@@ -377,7 +381,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       showPercentage: a,
       config: i
     }) {
-      return to({
+      return lo({
         config: i,
         val: t,
         percentage: l,
@@ -385,7 +389,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         showPercentage: a
       });
     }
-    function _t(t, l) {
+    function Bt(t, l) {
       const o = e.value.style.chart.layout.labels.value.show, a = e.value.style.chart.layout.labels.percentage.show, i = re({
         config: e.value.style.chart.layout.labels,
         showVal: o,
@@ -421,7 +425,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       }, J.value = o;
       let i = "";
       const m = e.value.style.chart.tooltip.customFormat;
-      if (We(m) && eo(() => m({
+      if (We(m) && oo(() => m({
         seriesIndex: a,
         datapoint: t,
         series: f.value,
@@ -434,10 +438,10 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           config: e.value
         });
       else {
-        const ie = e.value.style.chart.tooltip.showPercentage, zt = e.value.style.chart.tooltip.showValue;
+        const ie = e.value.style.chart.tooltip.showPercentage, Vt = e.value.style.chart.tooltip.showValue;
         i += `<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>`, i += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${t.color}"/></svg>`, i += `<b>${re({
           config: e.value.style.chart.tooltip,
-          showVal: zt,
+          showVal: Vt,
           showPercentage: ie,
           val: `<span>${ve(
             e.value.style.chart.layout.labels.value.formatter,
@@ -471,9 +475,9 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     function ue() {
       H.value = !H.value;
     }
-    async function Pt({ scale: t = 2 } = {}) {
+    async function It({ scale: t = 2 } = {}) {
       if (!T.value) return;
-      const { width: l, height: o } = T.value.getBoundingClientRect(), a = l / o, { imageUri: i, base64: m } = await ho({ domElement: T.value, base64: !0, img: !0, scale: t });
+      const { width: l, height: o } = T.value.getBoundingClientRect(), a = l / o, { imageUri: i, base64: m } = await po({ domElement: T.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: i,
         base64: m,
@@ -486,7 +490,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     const N = v(() => {
       const t = e.value.table.useDialog && !e.value.table.show, l = y.value.showTable;
       return {
-        component: t ? vt : st,
+        component: t ? ht : it,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
         props: t ? {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -516,32 +520,32 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     V(() => y.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && R.value ? R.value.open() : "close" in R.value && R.value.close());
     });
-    const Bt = v(() => oe.value.map((t) => ({
+    const Et = v(() => oe.value.map((t) => ({
       ...t,
       name: t.display
-    }))), It = v(() => e.value.style.chart.backgroundColor), Et = v(() => e.value.style.chart.legend), Mt = v(() => e.value.style.chart.title), { exportSvg: Lt, getSvg: Rt } = uo({
+    }))), Mt = v(() => e.value.style.chart.backgroundColor), Lt = v(() => e.value.style.chart.legend), Rt = v(() => e.value.style.chart.title), { exportSvg: zt, getSvg: Nt } = co({
       svg: Y,
-      title: Mt,
-      legend: Et,
-      legendItems: Bt,
-      backgroundColor: It
+      title: Rt,
+      legend: Lt,
+      legendItems: Et,
+      backgroundColor: Mt
     });
     async function Ve({ isCb: t }) {
       if (t) {
-        const { blob: l, url: o, text: a, dataUrl: i } = await Rt();
+        const { blob: l, url: o, text: a, dataUrl: i } = await Nt();
         e.value.userOptions.callbacks.svg({ blob: l, url: o, text: a, dataUrl: i });
       } else
-        Lt();
+        zt();
     }
-    return lt({
-      getData: St,
-      getImage: Pt,
+    return nt({
+      getData: Pt,
+      getImage: It,
       generatePdf: xe,
       generateCsv: ne,
       generateImage: Se,
       generateSvg: Ve,
-      hideSeries: xt,
-      showSeries: Dt,
+      hideSeries: _t,
+      showSeries: St,
       toggleTable: ze,
       toggleTooltip: Ne,
       toggleAnnotator: ue,
@@ -550,12 +554,12 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       class: W(`vue-data-ui-component vue-ui-onion ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "onionChart",
       ref: T,
-      id: `vue-ui-onion_${A.value}`,
+      id: `vue-ui-onion_${w.value}`,
       style: E(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
       onMouseenter: l[4] || (l[4] = () => s(Te)(!0)),
       onMouseleave: l[5] || (l[5] = () => s(Te)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (r(), _(s(ct), {
+      e.value.userOptions.buttons.annotator ? (r(), _(s(vt), {
         key: 0,
         svgRef: s(Y),
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -567,23 +571,23 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           d(t.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
         "annotator-action-color": c(({ color: o }) => [
-          d(t.$slots, "annotator-action-color", k(C({ color: o })), void 0, !0)
+          d(t.$slots, "annotator-action-color", C(k({ color: o })), void 0, !0)
         ]),
         "annotator-action-draw": c(({ mode: o }) => [
-          d(t.$slots, "annotator-action-draw", k(C({ mode: o })), void 0, !0)
+          d(t.$slots, "annotator-action-draw", C(k({ mode: o })), void 0, !0)
         ]),
         "annotator-action-undo": c(({ disabled: o }) => [
-          d(t.$slots, "annotator-action-undo", k(C({ disabled: o })), void 0, !0)
+          d(t.$slots, "annotator-action-undo", C(k({ disabled: o })), void 0, !0)
         ]),
         "annotator-action-redo": c(({ disabled: o }) => [
-          d(t.$slots, "annotator-action-redo", k(C({ disabled: o })), void 0, !0)
+          d(t.$slots, "annotator-action-redo", C(k({ disabled: o })), void 0, !0)
         ]),
         "annotator-action-delete": c(({ disabled: o }) => [
-          d(t.$slots, "annotator-action-delete", k(C({ disabled: o })), void 0, !0)
+          d(t.$slots, "annotator-action-delete", C(k({ disabled: o })), void 0, !0)
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
-      bt.value ? (r(), g("div", {
+      mt.value ? (r(), g("div", {
         key: 1,
         ref_key: "noTitle",
         ref: me,
@@ -596,8 +600,8 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         ref: pe,
         style: "width:100%;background:transparent"
       }, [
-        (r(), _(fo, {
-          key: `title_${ke.value}`,
+        (r(), _(bo, {
+          key: `title_${Ce.value}`,
           config: {
             title: {
               cy: "onion-div-title",
@@ -611,17 +615,17 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         }, null, 8, ["config"]))
       ], 512)) : p("", !0),
       P("div", {
-        id: `legend-top-${A.value}`
-      }, null, 8, mo),
-      e.value.userOptions.show && he.value && (s(Fe) || s(Z)) ? (r(), _(s(it), {
+        id: `legend-top-${w.value}`
+      }, null, 8, ko),
+      e.value.userOptions.show && he.value && (s(Oe) || s(Z)) ? (r(), _(s(dt), {
         ref_key: "details",
-        ref: pt,
+        ref: yt,
         key: `user_options${fe.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: s(De),
-        isPrinting: s(Oe),
-        uid: A.value,
+        isImaging: s(Fe),
+        isPrinting: s(De),
+        uid: w.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -648,13 +652,13 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         onToggleTooltip: Ne,
         onToggleAnnotator: ue,
         style: E({
-          visibility: s(Fe) ? s(Z) ? "visible" : "hidden" : "visible"
+          visibility: s(Oe) ? s(Z) ? "visible" : "hidden" : "visible"
         })
       }, Ge({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: c(({ isOpen: o, color: a }) => [
-            d(t.$slots, "menuIcon", k(C({ isOpen: o, color: a })), void 0, !0)
+            d(t.$slots, "menuIcon", C(k({ isOpen: o, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -703,14 +707,14 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: c(({ toggleFullscreen: o, isFullscreen: a }) => [
-            d(t.$slots, "optionFullscreen", k(C({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
+            d(t.$slots, "optionFullscreen", C(k({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: c(({ toggleAnnotator: o, isAnnotator: a }) => [
-            d(t.$slots, "optionAnnotator", k(C({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
+            d(t.$slots, "optionAnnotator", C(k({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
           ]),
           key: "8"
         } : void 0
@@ -718,12 +722,12 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       (r(), g("svg", {
         ref_key: "svgRef",
         ref: Y,
-        xmlns: s(Kt),
-        class: W({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value, resizing: F.value }),
+        xmlns: s(Zt),
+        class: W({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value, resizing: O.value }),
         viewBox: `0 0 ${n.value.width <= 0 ? 10 : n.value.width} ${n.value.height <= 0 ? 10 : n.value.height}`,
         style: E(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        ce(s(dt)),
+        ce(s(gt)),
         t.$slots["chart-background"] ? (r(), g("foreignObject", {
           key: 0,
           x: 0,
@@ -735,8 +739,8 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         }, [
           d(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Co)) : p("", !0),
-        (r(!0), g(U, null, G(O.value, (o, a) => (r(), g("circle", {
+        ], 8, wo)) : p("", !0),
+        (r(!0), g(U, null, G(D.value, (o, a) => (r(), g("circle", {
           cx: h.value.centerX,
           cy: h.value.centerY,
           r: o.radius <= 0 ? 1e-4 : o.radius,
@@ -750,11 +754,11 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           style: E({
             transform: "rotate(-90deg)",
             transformOrigin: "50% 50%",
-            transition: F.value || s($) ? "none" : "all 0.3s ease-in-out !important",
-            animation: F.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
+            transition: O.value || s($) ? "none" : "all 0.3s ease-in-out !important",
+            animation: O.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
           })
-        }, null, 14, wo))), 256)),
-        (r(!0), g(U, null, G(O.value, (o, a) => (r(), g("circle", {
+        }, null, 14, $o))), 256)),
+        (r(!0), g(U, null, G(D.value, (o, a) => (r(), g("circle", {
           cx: h.value.centerX,
           cy: h.value.centerY,
           r: o.radius < 0 ? 1e-4 : o.radius,
@@ -768,13 +772,13 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           style: E({
             transform: "rotate(-90deg)",
             transformOrigin: "50% 50%",
-            transition: F.value || s($) ? "none" : "all 0.3s ease-in-out !important",
-            animation: F.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
+            transition: O.value || s($) ? "none" : "all 0.3s ease-in-out !important",
+            animation: O.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
           })
-        }, null, 14, Ao))), 256)),
+        }, null, 14, To))), 256)),
         P("defs", null, [
           P("filter", {
-            id: `blur_${A.value}`,
+            id: `blur_${w.value}`,
             x: "-50%",
             y: "-50%",
             width: "200%",
@@ -783,14 +787,14 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             P("feGaussianBlur", {
               in: "SourceGraphic",
               stdDeviation: 100 / e.value.style.chart.gradientIntensity
-            }, null, 8, To)
-          ], 8, $o)
+            }, null, 8, Do)
+          ], 8, Oo)
         ]),
         e.value.style.chart.useGradient ? (r(), g("g", {
           key: 1,
-          filter: `url(#blur_${A.value})`
+          filter: `url(#blur_${w.value})`
         }, [
-          (r(!0), g(U, null, G(O.value, (o, a) => (r(), g("circle", {
+          (r(!0), g(U, null, G(D.value, (o, a) => (r(), g("circle", {
             cx: h.value.centerX,
             cy: h.value.centerY,
             r: o.radius <= 0 ? 1e-4 : o.radius,
@@ -803,12 +807,12 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             style: E({
               transform: "rotate(-90deg)",
               transformOrigin: "50% 50%",
-              transition: F.value || s($) ? "none" : "all 0.3s ease-in-out !important",
-              animation: F.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
+              transition: O.value || s($) ? "none" : "all 0.3s ease-in-out !important",
+              animation: O.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
             })
-          }, null, 12, Oo))), 256))
+          }, null, 12, xo))), 256))
         ], 8, Fo)) : p("", !0),
-        (r(!0), g(U, null, G(O.value, (o, a) => (r(), g("circle", {
+        (r(!0), g(U, null, G(D.value, (o, a) => (r(), g("circle", {
           cx: h.value.centerX,
           cy: h.value.centerY,
           r: o.radius <= 0 ? 1e-4 : o.radius,
@@ -830,9 +834,9 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }),
           onMouseleave: (i) => Le({ datapoint: o }),
           onClick: (i) => Me({ datapoint: o })
-        }, null, 40, Do))), 256)),
-        e.value.style.chart.layout.labels.show ? (r(), g("g", xo, [
-          (r(!0), g(U, null, G(O.value, (o, a) => (r(), g("g", {
+        }, null, 40, So))), 256)),
+        e.value.style.chart.layout.labels.show ? (r(), g("g", _o, [
+          (r(!0), g(U, null, G(D.value, (o, a) => (r(), g("g", {
             onMouseenter: (i) => Re({
               datapoint: o,
               show: !0,
@@ -850,29 +854,29 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               "font-size": e.value.style.chart.layout.labels.fontSize,
               fill: e.value.useBlurOnHover && ![null, void 0].includes(x.value) && x.value === a ? o.color : e.value.style.chart.layout.labels.color,
               "font-weight": e.value.style.chart.layout.labels.bold ? "bold" : "normal"
-            }, q(_t(o, a)), 9, _o))
-          ], 40, So))), 256))
+            }, q(Bt(o, a)), 9, Bo))
+          ], 40, Po))), 256))
         ])) : p("", !0),
         d(t.$slots, "svg", { svg: n.value }, void 0, !0)
-      ], 14, ko)),
-      t.$slots.watermark ? (r(), g("div", Po, [
-        d(t.$slots, "watermark", k(C({ isPrinting: s(Oe) || s(De) })), void 0, !0)
+      ], 14, Ao)),
+      t.$slots.watermark ? (r(), g("div", Io, [
+        d(t.$slots, "watermark", C(k({ isPrinting: s(De) || s(Fe) })), void 0, !0)
       ])) : p("", !0),
       P("div", {
-        id: `legend-bottom-${A.value}`
-      }, null, 8, Bo),
-      Ae.value ? (r(), _(Gt, {
+        id: `legend-bottom-${w.value}`
+      }, null, 8, Eo),
+      we.value ? (r(), _(Xt, {
         key: 5,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${A.value}` : `#legend-bottom-${A.value}`
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${w.value}` : `#legend-bottom-${w.value}`
       }, [
         P("div", {
           ref_key: "chartLegend",
           ref: be
         }, [
-          e.value.style.chart.legend.show ? (r(), _(po, {
-            key: `legend_${we.value}`,
+          e.value.style.chart.legend.show ? (r(), _(yo, {
+            key: `legend_${Ae.value}`,
             legendSet: oe.value,
-            config: $t.value,
+            config: Ot.value,
             onClickMarker: l[0] || (l[0] = ({ legend: o }) => X(o.id))
           }, {
             item: c(({ legend: o }) => [
@@ -881,7 +885,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 "data-cy-legend-item": "",
                 onClick: (a) => o.segregate(),
                 style: E(`opacity:${b.value.includes(o.id) ? 0.5 : 1}`)
-              }, q(o.display), 13, Io))
+              }, q(o.display), 13, Mo))
             ]),
             _: 1
           }, 8, ["legendSet", "config"])) : d(t.$slots, "legend", {
@@ -898,7 +902,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       }, [
         d(t.$slots, "source", {}, void 0, !0)
       ], 512)) : p("", !0),
-      ce(s(nt), {
+      ce(s(st), {
         teleportTo: e.value.style.chart.tooltip.teleportTo,
         show: y.value.showTooltip && J.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
@@ -920,21 +924,21 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
       }, {
         "tooltip-before": c(() => [
-          d(t.$slots, "tooltip-before", k(C({ ...se.value })), void 0, !0)
+          d(t.$slots, "tooltip-before", C(k({ ...se.value })), void 0, !0)
         ]),
         "tooltip-after": c(() => [
-          d(t.$slots, "tooltip-after", k(C({ ...se.value })), void 0, !0)
+          d(t.$slots, "tooltip-after", C(k({ ...se.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      he.value && e.value.userOptions.buttons.table ? (r(), _(Yt(N.value.component), Xt({ key: 7 }, N.value.props, {
+      he.value && e.value.userOptions.buttons.table ? (r(), _(jt(N.value.component), Ht({ key: 7 }, N.value.props, {
         ref_key: "tableUnit",
         ref: R,
         onClose: l[3] || (l[3] = (o) => y.value.showTable = !1)
       }), Ge({
         content: c(() => [
-          (r(), _(s(ut), {
-            key: `table_${Ce.value}`,
+          (r(), _(s(ct), {
+            key: `table_${ke.value}`,
             colNames: j.value.colNames,
             head: j.value.head,
             body: j.value.body,
@@ -947,7 +951,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               Ye(q(o), 1)
             ]),
             td: c(({ td: o }) => [
-              P("div", { innerHTML: o }, null, 8, Eo)
+              P("div", { innerHTML: o }, null, 8, Lo)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -969,7 +973,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               class: "vue-ui-user-options-button",
               onClick: l[1] || (l[1] = (o) => ne(e.value.userOptions.callbacks.csv))
             }, [
-              ce(s(rt), {
+              ce(s(ut), {
                 name: "excel",
                 stroke: N.value.props.color
               }, null, 8, ["stroke"])
@@ -978,15 +982,15 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           key: "1"
         } : void 0
       ]), 1040)) : p("", !0),
-      s($) ? (r(), _(ro, { key: 8 })) : p("", !0)
-    ], 46, yo));
+      s($) ? (r(), _(uo, { key: 8 })) : p("", !0)
+    ], 46, Co));
   }
-}, Lo = /* @__PURE__ */ bo(Mo, [["__scopeId", "data-v-2a56e268"]]), tl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, zo = /* @__PURE__ */ mo(Ro, [["__scopeId", "data-v-2a56e268"]]), ll = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Lo
+  default: zo
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  el as a,
-  tl as b,
-  Lo as v
+  ol as a,
+  ll as b,
+  zo as v
 };