vue-data-ui 3.9.12 → 3.9.14

package/dist/{vue-ui-onion-XJAcsPVV.js → vue-ui-onion-BF0uOkdf.js}

@@ -1,39 +1,40 @@
-import { defineAsyncComponent as S, computed as d, ref as u, toRefs as zt, watch as U, shallowRef as Ue, onMounted as Lt, onBeforeUnmount as Nt, createElementBlock as v, openBlock as s, unref as r, normalizeStyle as E, normalizeClass as q, createBlock as _, createCommentVNode as p, createElementVNode as I, createVNode as ce, withCtx as i, renderSlot as c, normalizeProps as y, guardReactiveProps as C, createSlots as Ge, Fragment as G, renderList as Y, toDisplayString as R, Teleport as Vt, resolveDynamicComponent as Ut, mergeProps as Gt, createTextVNode as Ye, nextTick as Xe } from "vue";
-import { c as Yt, t as Xt, i as jt, p as je, j as Ht, o as He, g as de, l as Wt, d as z, X as qt, a as ve, x as We, u as Zt, q as Jt, Z as Kt } from "./lib-W9waxHL3.js";
-import { t as Qt, u as eo } from "./useResponsive-DfdjqQps.js";
-import { u as to, a as ge } from "./useNestedProp-D-jUHecl.js";
-import { u as oo, B as lo } from "./BaseScanner-BMpwQAfz.js";
-import { u as ao } from "./usePrinter-DhoMn87n.js";
-import { u as no } from "./useSvgExport-ByUukOZt.js";
-import { u as ro } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as so } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as uo } from "./useChartAccessibility-9icAAmYg.js";
-import { u as io } from "./useAutoSizeLabelsInsideViewbox-DAdqpHf1.js";
-import co from "./img-BJzUSmkm.js";
-import vo from "./Title-DFtCaCah.js";
-import go from "./Legend-Dxz13z4E.js";
-import { _ as ho } 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" } } }, Ze = { 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" } } }, Je = { 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" } } }, Ke = { 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" } } }, Qe = { 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 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-BwysEpWI.js";
+import { b as to } from "./labelUtils-PMU3ZGCb.js";
+import { t as oo, u as lo } from "./useResponsive-DfdjqQps.js";
+import { u as ao, a as ge } from "./useNestedProp-CH0YJac3.js";
+import { u as no, B as ro } from "./BaseScanner-BMpwQAfz.js";
+import { u as so } from "./usePrinter-BJzHDpYF.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-DO2dxQ78.js";
+import ho from "./img-DKigoPDs.js";
+import fo from "./Title-DsQKikUm.js";
+import po from "./Legend-D6z73edh.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 = {
   default: {},
   dark: qe,
-  celebration: Ze,
-  celebrationNight: Je,
-  hack: Ke,
-  zen: Qe,
+  celebration: Je,
+  celebrationNight: Ke,
+  hack: Qe,
+  zen: Ze,
   concrete: et
-}, Zo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, el = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  celebration: Ze,
-  celebrationNight: Je,
+  celebration: Je,
+  celebrationNight: Ke,
   concrete: et,
   dark: qe,
   default: tt,
-  hack: Ke,
-  zen: Qe
-}, Symbol.toStringTag, { value: "Module" })), fo = ["id"], po = ["id"], bo = ["xmlns", "viewBox"], mo = ["width", "height"], yo = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Co = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], ko = ["id"], wo = ["stdDeviation"], Ao = ["filter"], $o = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], To = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter", "onMouseleave", "onClick"], xo = { key: 2 }, Fo = ["onMouseenter", "onMouseleave", "onClick"], Oo = ["x", "y", "font-size", "fill", "font-weight"], Do = {
+  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 = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, So = ["id"], _o = ["onClick"], Io = ["innerHTML"], Bo = {
+}, Bo = ["id"], Io = ["onClick"], Eo = ["innerHTML"], Mo = {
   __name: "vue-ui-onion",
   props: {
     config: {
@@ -51,8 +52,8 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
   },
   emits: ["selectLegend"],
   setup(ot, { expose: lt, emit: at }) {
-    const nt = S(() => import("./Tooltip-B79qvriT.js")), rt = S(() => import("./BaseIcon-r3_sTK1A.js")), st = S(() => import("./vue-ui-accordion-B6BX2vhq.js")), ut = S(() => import("./DataTable-DNeCys3I.js")), it = S(() => import("./UserOptions-B-2A_KRb.js")), ct = S(() => import("./PenAndPaper-CsqBamFZ.js")), dt = S(() => import("./PackageVersion-BpArR90N.js")), vt = S(() => import("./BaseDraggableDialog-C167SnU0.js")), { vue_ui_onion: gt } = to(), { isThemeValid: ht, warnInvalidTheme: ft } = ro(), k = ot, he = d(() => !!k.dataset && k.dataset.length), w = u(Yt()), pt = u(null), fe = u(0), Z = u(!1), J = u(""), b = u([]), T = u(null), pe = u(null), be = u(null), me = u(null), ye = u(null), Ce = u(0), ke = u(0), we = u(0), x = u(!1), Ae = u(!1), L = u(null), e = u(ee()), { loading: A, FINAL_DATASET: $e, manualLoading: K } = oo({
-      ...zt(k),
+    const nt = S(() => import("./Tooltip-TDyKgLB6.js")), rt = S(() => import("./BaseIcon-4i3dd7Ty.js")), st = S(() => import("./vue-ui-accordion-CTzbMRF5.js")), ut = S(() => import("./DataTable-WrXCJkfE.js")), it = S(() => import("./UserOptions-CzJWRC4s.js")), ct = S(() => import("./PenAndPaper-DxIUvoQ8.js")), dt = S(() => import("./PackageVersion-N2zi0qFZ.js")), vt = S(() => import("./BaseDraggableDialog-CAJxIF6g.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),
       FINAL_CONFIG: e,
       prepareConfig: ee,
       callback: () => {
@@ -66,7 +67,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: Xt({
+      skeletonConfig: Ht({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -87,40 +88,40 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         }
       })
-    }), { userOptionsVisible: Q, setUserOptionsVisibility: Te, keepUserOptionState: xe } = so({ config: e.value }), { svgRef: X } = uo({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: Z, setUserOptionsVisibility: Te, keepUserOptionState: Fe } = co({ config: e.value }), { svgRef: Y } = vo({ config: e.value.style.chart.title });
     function ee() {
       const t = ge({
-        userConfig: k.config,
+        userConfig: w.config,
         defaultConfig: gt
       }), l = t.theme;
       if (!l) return t;
       if (!ht.value(t))
         return ft(t), t;
       const o = ge({
-        userConfig: tt[l] || k.config,
+        userConfig: tt[l] || w.config,
         defaultConfig: t
       }), a = ge({
-        userConfig: k.config,
+        userConfig: w.config,
         defaultConfig: o
       });
       return {
         ...a,
-        customPalette: a.customPalette.length ? a.customPalette : jt[l] || je
+        customPalette: a.customPalette.length ? a.customPalette : Wt[l] || je
       };
     }
-    U(() => k.config, (t) => {
-      A.value || (e.value = ee()), Q.value = !e.value.userOptions.showOnChartHover, Ie(), Ce.value += 1, ke.value += 1, we.value += 1, m.value.showTable = e.value.table.show, m.value.showTooltip = e.value.style.chart.tooltip.show;
+    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;
     }, { deep: !0 });
-    const { isPrinting: Fe, isImaging: Oe, generatePdf: De, generateImage: Se } = ao({
-      elementId: `vue-ui-onion_${w.value}`,
+    const { isPrinting: Oe, isImaging: De, generatePdf: xe, generateImage: Se } = so({
+      elementId: `vue-ui-onion_${A.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-onion",
       options: e.value.userOptions.print
-    }), bt = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), mt = d(() => Ht(e.value.customPalette)), m = u({
+    }), bt = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), yt = v(() => qt(e.value.customPalette)), y = u({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     });
-    U(e, () => {
-      m.value = {
+    V(e, () => {
+      y.value = {
         showTable: e.value.table.show,
         showTooltip: e.value.style.chart.tooltip.show
       };
@@ -135,50 +136,50 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         bottom: 64
       },
       minRadius: 64
-    }), O = Ue(null), M = Ue(null);
-    Lt(() => {
-      Ae.value = !0, Ie();
+    }), D = Ue(null), M = Ue(null);
+    Vt(() => {
+      Ae.value = !0, Pe();
     });
-    const yt = d({
+    const mt = v({
       get: () => e.value.style.chart.layout.labels.fontSize,
       set: (t) => t
-    }), { autoSizeLabels: _e } = io({
-      svgRef: X,
+    }), { autoSizeLabels: _e } = go({
+      svgRef: Y,
       fontSize: e.value.style.chart.layout.labels.fontSize,
       minFontSize: e.value.style.chart.layout.labels.minFontSize,
-      sizeRef: yt,
+      sizeRef: mt,
       labelClass: ".vue-ui-onion-label"
-    }), Ct = d(() => e.value.debug);
+    }), kt = v(() => e.value.debug);
     let te = null;
-    function Ie() {
-      if (He(k.dataset) && (de({
+    function Pe() {
+      if (He(w.dataset) && (de({
         componentName: "VueUiOnion",
         type: "dataset",
-        debug: Ct.value
-      }), K.value = !0), He(k.dataset) || (K.value = e.value.loading), e.value.responsive) {
-        const l = Qt(() => {
-          te && clearTimeout(te), x.value = !0;
-          let { width: o, height: a } = eo({
+        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({
             chart: T.value,
             title: e.value.style.chart.title.text ? pe.value : null,
             legend: e.value.style.chart.legend.show ? be.value : null,
-            source: me.value,
-            noTitle: ye.value
+            source: ye.value,
+            noTitle: me.value
           });
           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(() => {
-              x.value = !1, _e();
+              F.value = !1, _e();
             }, 0);
           });
         });
-        O.value && (M.value && O.value.unobserve(M.value), O.value.disconnect()), O.value = new ResizeObserver(l), M.value = T.value.parentNode, O.value.observe(M.value);
+        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);
       }
       requestAnimationFrame(_e);
     }
-    Nt(() => {
-      O.value && (M.value && O.value.unobserve(M.value), O.value.disconnect());
+    Ut(() => {
+      D.value && (M.value && D.value.unobserve(M.value), D.value.disconnect());
     });
-    const h = d(() => ({
+    const h = v(() => ({
       top: n.value.padding.top,
       left: n.value.padding.left,
       right: n.value.width - n.value.padding.right,
@@ -189,7 +190,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       height: n.value.height - n.value.padding.bottom - n.value.padding.top,
       minRadius: n.value.minRadius,
       maxRadius: Math.min(n.value.width, n.value.height) - n.value.padding.top * 2
-    })), f = d(() => ($e.value.forEach((t, l) => {
+    })), f = v(() => ($e.value.forEach((t, l) => {
       [null, void 0].includes(t.name) && de({
         componentName: "VueUiOnion",
         type: "datasetSerieAttribute",
@@ -202,77 +203,95 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         index: l
       });
     }), $e.value.map((t, l) => {
-      const o = `onion_serie_${l}_${w.value}`;
+      const o = `onion_serie_${l}_${A.value}`;
       return {
         ...t,
         percentage: t.percentage || 0,
         targetPercentage: t.percentage || 0,
-        color: Wt(t.color) || mt.value[l] || je[l],
+        color: Jt(t.color) || yt.value[l] || je[l],
         id: o,
         shape: "circle",
         opacity: b.value.includes(o) ? 0.5 : 1,
         absoluteIndex: l,
-        segregate: () => j(o),
+        segregate: () => X(o),
         isSegregated: b.value.includes(o)
       };
-    }))), oe = d(() => f.value.map((t, l) => ({
-      ...t,
-      display: `${t.name ? t.name + ": " : ""}${z({
+    }))), oe = v(() => f.value.map((t, l) => {
+      const o = e.value.style.chart.legend.showValue, a = e.value.style.chart.legend.showPercentage, i = ve(
+        e.value.style.chart.layout.labels.value.formatter,
+        t.value,
+        L({
+          p: t.prefix || "",
+          v: t.value,
+          s: t.suffix || "",
+          r: e.value.style.chart.legend.roundingValue
+        })
+      ), m = L({
         v: t.percentage ?? 0,
         s: "%",
         r: e.value.style.chart.legend.roundingPercentage
-      })}`
-    }))), N = u(f.value), kt = d(() => e.value.useStartAnimation), wt = u(null), At = d(() => Math.max(...f.value.map((t) => t.percentage))), le = u(!1);
-    U(() => f.value, Be, { immediate: !0, deep: !0 }), U(() => k.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (K.value = !1);
+      }), ie = re({
+        showVal: o,
+        showPercentage: a,
+        val: i,
+        percentage: m,
+        config: e.value.style.chart.legend
+      });
+      return {
+        ...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) => {
+      Array.isArray(t) && t.length > 0 && (Q.value = !1);
     }, { deep: !0 });
     function Be() {
-      if (kt.value && !le.value && !A.value) {
+      if (Ct.value && !le.value && !$.value) {
         let l = function() {
-          t >= At.value ? (cancelAnimationFrame(wt.value), N.value = f.value, le.value = !0) : (N.value = f.value.map((o) => ({
+          t >= At.value ? (cancelAnimationFrame(wt.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);
         };
-        N.value = f.value.map((o) => ({
+        z.value = f.value.map((o) => ({
           ...o,
           percentage: 0
         }));
         let t = 0;
         l();
       } else
-        N.value = f.value;
+        z.value = f.value;
     }
-    const $t = d(() => ({
+    const $t = 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 = d(() => f.value.filter((t) => !b.value.includes(t.id)).length), B = d(() => {
+    })), Tt = 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
       };
-    }), F = d(() => N.value.filter((t) => !b.value.includes(t.id)).map((t, l) => {
+    }), 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;
       return {
         percentage: t.percentage || 0,
         ...t,
         labelY: a,
         radius: o,
-        path: xt(o, t.percentage || 0)
+        path: Ft(o, t.percentage || 0)
       };
     }));
-    function xt(t, l) {
-      const o = 2 * Math.PI * t, a = o * 0.75, g = `${a} ${o}`, $ = a * (1 - l / 100);
+    function Ft(t, l) {
+      const o = 2 * Math.PI * t, a = o * 0.75, i = `${a} ${o}`, m = a * (1 - l / 100);
       return {
         bgDashArray: `${a} ${o}`,
         bgDashOffset: 0,
-        dashArray: g,
-        dashOffset: $,
+        dashArray: i,
+        dashOffset: m,
         fullOffset: 0,
         active: `
             M ${h.value.centerX},${h.value.centerY - t} 
@@ -281,42 +300,42 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         `.trim()
       };
     }
-    const Ft = at;
-    function j(t) {
+    const Ot = at;
+    function X(t) {
       if (b.value.includes(t))
         b.value = b.value.filter((l) => l !== t);
       else {
         if (b.value.length === f.value.length - 1) return;
         b.value.push(t);
       }
-      Ft("selectLegend", F.value);
+      Ot("selectLegend", O.value);
     }
-    function Pe(t) {
+    function Ie(t) {
       if (!f.value.length)
         return e.value.debug && console.warn("VueUiOnion - There are no series to show."), null;
       const l = f.value.find((o) => o.name === t);
       return l || (e.value.debug && console.warn(`VueUiOnion - Series name not found "${t}"`), null);
     }
-    function Ot(t) {
-      const l = Pe(t);
-      l !== null && b.value.includes(l.id) && j(l.id);
-    }
     function Dt(t) {
-      const l = Pe(t);
-      l !== null && (b.value.includes(l.id) || j(l.id));
+      const l = Ie(t);
+      l !== null && b.value.includes(l.id) && X(l.id);
+    }
+    function xt(t) {
+      const l = Ie(t);
+      l !== null && (b.value.includes(l.id) || X(l.id));
     }
     function St() {
-      return F.value;
+      return O.value;
     }
-    const ae = d(() => {
-      const t = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], l = F.value.map((o) => [
+    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) => [
         o.name,
         o.percentage,
         o.value
       ]);
       return { head: t, body: l };
-    }), H = d(() => {
-      const t = ae.value.head, l = F.value.map((a) => [
+    }), j = v(() => {
+      const t = ae.value.head, l = O.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 || ""}`
@@ -337,83 +356,135 @@ 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, g = l.concat([o]).concat(a), $ = Zt(g);
-        t ? t($) : Jt({ csvContent: $, 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 = Qt(i);
+        t ? t(m) : Zt({ csvContent: m, title: e.value.style.chart.title.text || "vue-ui-onion" });
       });
     }
-    const D = u(void 0), P = u(!1);
+    const x = u(void 0), I = u(!1);
     function Ee(t) {
-      P.value = t, fe.value += 1;
+      I.value = t, fe.value += 1;
     }
     function Me({ datapoint: t }) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.absoluteIndex });
     }
-    function Re({ datapoint: t }) {
-      D.value = void 0, Z.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex });
+    function Le({ datapoint: t }) {
+      x.value = void 0, J.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex });
+    }
+    function re({
+      val: t,
+      percentage: l,
+      showVal: o,
+      showPercentage: a,
+      config: i
+    }) {
+      return to({
+        config: i,
+        val: t,
+        percentage: l,
+        showVal: o,
+        showPercentage: a
+      });
+    }
+    function _t(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,
+        showPercentage: a,
+        val: ve(
+          e.value.style.chart.layout.labels.value.formatter,
+          t.value,
+          L({
+            p: t.prefix || "",
+            v: t.value || 0,
+            s: t.suffix || "",
+            r: e.value.style.chart.layout.labels.roundingValue
+          }),
+          { datapoint: t, seriesIndex: l }
+        ),
+        percentage: L({
+          v: t.percentage,
+          s: "%",
+          r: e.value.style.chart.layout.labels.roundingPercentage
+        })
+      });
+      return `${t.name}${o || a ? ": " : ""}${i}`;
     }
-    const re = u(null);
-    function ze({ datapoint: t, seriesIndex: l, show: o = !0 }) {
+    const se = u(null);
+    function Re({ datapoint: t, seriesIndex: l, show: o = !0 }) {
       e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.absoluteIndex });
       const a = t.absoluteIndex;
-      D.value = l, re.value = {
+      x.value = l, se.value = {
         datapoint: t,
         seriesIndex: a,
         series: f.value,
         config: e.value
-      }, Z.value = o;
-      let g = "";
-      const $ = e.value.style.chart.tooltip.customFormat;
-      if (We($) && Kt(() => $({
+      }, J.value = o;
+      let i = "";
+      const m = e.value.style.chart.tooltip.customFormat;
+      if (We(m) && eo(() => m({
         seriesIndex: a,
         datapoint: t,
         series: f.value,
         config: e.value
       })))
-        J.value = $({
+        K.value = m({
           seriesIndex: a,
           datapoint: t,
           series: f.value,
           config: e.value
         });
       else {
-        const ue = e.value.style.chart.tooltip.showPercentage, ie = e.value.style.chart.tooltip.showValue;
-        g += `<div style="width: 100%; border-bottom: 1px solid ${e.value.style.chart.tooltip.borderColor}; padding-bottom: 6px;margin-bottom:3px;display:flex;flex-direction:row;gap:3px;align-items:center"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg><span></span>${t.name}</span></div>`, g += `<div style="width:100%;text-align:left;"><b>${ue ? z({ p: "", v: t.percentage, s: "%", r: e.value.style.chart.tooltip.roundingPercentage }) : ""}</b> ${ue && ie ? "(" : ""}${ie ? ve(
-          e.value.style.chart.layout.labels.value.formatter,
-          t.value,
-          z({
-            p: t.prefix || "",
-            v: t.value,
-            s: t.suffix || "",
-            r: e.value.style.chart.tooltip.roundingValue
-          }),
-          { datapoint: t, seriesIndex: l }
-        ) : ""}${ue && ie ? ")" : ""}</div>`, J.value = `<div>${g}</div>`;
+        const ie = e.value.style.chart.tooltip.showPercentage, zt = 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,
+          showPercentage: ie,
+          val: `<span>${ve(
+            e.value.style.chart.layout.labels.value.formatter,
+            t.value,
+            L({
+              p: t.prefix || "",
+              v: t.value,
+              s: t.suffix || "",
+              r: e.value.style.chart.tooltip.roundingValue
+            }),
+            {
+              datapoint: t,
+              seriesIndex: l
+            }
+          )}</span>`,
+          percentage: L({
+            v: t.percentage,
+            s: "%",
+            r: e.value.style.chart.tooltip.roundingPercentage
+          })
+        })}</b></div>`, K.value = `<div>${i}</div>`;
       }
     }
-    function Le() {
-      m.value.showTable = !m.value.showTable;
+    function ze() {
+      y.value.showTable = !y.value.showTable;
     }
     function Ne() {
-      m.value.showTooltip = !m.value.showTooltip;
+      y.value.showTooltip = !y.value.showTooltip;
     }
-    const W = u(!1);
-    function se() {
-      W.value = !W.value;
+    const H = u(!1);
+    function ue() {
+      H.value = !H.value;
     }
-    async function _t({ scale: t = 2 } = {}) {
+    async function Pt({ scale: t = 2 } = {}) {
       if (!T.value) return;
-      const { width: l, height: o } = T.value.getBoundingClientRect(), a = l / o, { imageUri: g, base64: $ } = await co({ 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 ho({ domElement: T.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: g,
-        base64: $,
+        imageUri: i,
+        base64: m,
         title: e.value.style.chart.title.text,
         width: l,
         height: o,
         aspectRatio: a
       };
     }
-    const V = d(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, l = m.value.showTable;
+    const N = v(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, l = y.value.showTable;
       return {
         component: t ? vt : st,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
@@ -422,7 +493,7 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           color: e.value.table.th.color,
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: P.value,
+          isFullscreen: I.value,
           fullscreenParent: T.value,
           forcedWidth: Math.min(600, window.innerWidth * 0.8)
         } : {
@@ -442,91 +513,91 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         }
       };
     });
-    U(() => m.value.showTable, (t) => {
-      e.value.table.show || (t && e.value.table.useDialog && L.value ? L.value.open() : "close" in L.value && L.value.close());
+    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 It = d(() => oe.value.map((t) => ({
+    const Bt = v(() => oe.value.map((t) => ({
       ...t,
       name: t.display
-    }))), Bt = d(() => e.value.style.chart.backgroundColor), Pt = d(() => e.value.style.chart.legend), Et = d(() => e.value.style.chart.title), { exportSvg: Mt, getSvg: Rt } = no({
-      svg: X,
-      title: Et,
-      legend: Pt,
-      legendItems: It,
-      backgroundColor: Bt
+    }))), 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({
+      svg: Y,
+      title: Mt,
+      legend: Et,
+      legendItems: Bt,
+      backgroundColor: It
     });
     async function Ve({ isCb: t }) {
       if (t) {
-        const { blob: l, url: o, text: a, dataUrl: g } = await Rt();
-        e.value.userOptions.callbacks.svg({ blob: l, url: o, text: a, dataUrl: g });
+        const { blob: l, url: o, text: a, dataUrl: i } = await Rt();
+        e.value.userOptions.callbacks.svg({ blob: l, url: o, text: a, dataUrl: i });
       } else
-        Mt();
+        Lt();
     }
     return lt({
       getData: St,
-      getImage: _t,
-      generatePdf: De,
+      getImage: Pt,
+      generatePdf: xe,
       generateCsv: ne,
       generateImage: Se,
       generateSvg: Ve,
-      hideSeries: Dt,
-      showSeries: Ot,
-      toggleTable: Le,
+      hideSeries: xt,
+      showSeries: Dt,
+      toggleTable: ze,
       toggleTooltip: Ne,
-      toggleAnnotator: se,
+      toggleAnnotator: ue,
       toggleFullscreen: Ee
-    }), (t, l) => (s(), v("div", {
-      class: q(`vue-data-ui-component vue-ui-onion ${P.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+    }), (t, l) => (r(), g("div", {
+      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_${w.value}`,
+      id: `vue-ui-onion_${A.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] = () => r(Te)(!0)),
-      onMouseleave: l[5] || (l[5] = () => r(Te)(!1))
+      onMouseenter: l[4] || (l[4] = () => s(Te)(!0)),
+      onMouseleave: l[5] || (l[5] = () => s(Te)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (s(), _(r(ct), {
+      e.value.userOptions.buttons.annotator ? (r(), _(s(ct), {
         key: 0,
-        svgRef: r(X),
+        svgRef: s(Y),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: W.value,
-        onClose: se
+        active: H.value,
+        onClose: ue
       }, {
-        "annotator-action-close": i(() => [
-          c(t.$slots, "annotator-action-close", {}, void 0, !0)
+        "annotator-action-close": c(() => [
+          d(t.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
-        "annotator-action-color": i(({ color: o }) => [
-          c(t.$slots, "annotator-action-color", y(C({ color: o })), void 0, !0)
+        "annotator-action-color": c(({ color: o }) => [
+          d(t.$slots, "annotator-action-color", k(C({ color: o })), void 0, !0)
         ]),
-        "annotator-action-draw": i(({ mode: o }) => [
-          c(t.$slots, "annotator-action-draw", y(C({ mode: o })), void 0, !0)
+        "annotator-action-draw": c(({ mode: o }) => [
+          d(t.$slots, "annotator-action-draw", k(C({ mode: o })), void 0, !0)
         ]),
-        "annotator-action-undo": i(({ disabled: o }) => [
-          c(t.$slots, "annotator-action-undo", y(C({ disabled: o })), void 0, !0)
+        "annotator-action-undo": c(({ disabled: o }) => [
+          d(t.$slots, "annotator-action-undo", k(C({ disabled: o })), void 0, !0)
         ]),
-        "annotator-action-redo": i(({ disabled: o }) => [
-          c(t.$slots, "annotator-action-redo", y(C({ disabled: o })), void 0, !0)
+        "annotator-action-redo": c(({ disabled: o }) => [
+          d(t.$slots, "annotator-action-redo", k(C({ disabled: o })), void 0, !0)
         ]),
-        "annotator-action-delete": i(({ disabled: o }) => [
-          c(t.$slots, "annotator-action-delete", y(C({ disabled: o })), void 0, !0)
+        "annotator-action-delete": c(({ disabled: o }) => [
+          d(t.$slots, "annotator-action-delete", k(C({ disabled: o })), void 0, !0)
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
-      bt.value ? (s(), v("div", {
+      bt.value ? (r(), g("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: ye,
+        ref: me,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : p("", !0),
-      e.value.style.chart.title.text ? (s(), v("div", {
+      e.value.style.chart.title.text ? (r(), g("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: pe,
         style: "width:100%;background:transparent"
       }, [
-        (s(), _(vo, {
-          key: `title_${Ce.value}`,
+        (r(), _(fo, {
+          key: `title_${ke.value}`,
           config: {
             title: {
               cy: "onion-div-title",
@@ -539,18 +610,18 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         }, null, 8, ["config"]))
       ], 512)) : p("", !0),
-      I("div", {
-        id: `legend-top-${w.value}`
-      }, null, 8, po),
-      e.value.userOptions.show && he.value && (r(xe) || r(Q)) ? (s(), _(r(it), {
+      P("div", {
+        id: `legend-top-${A.value}`
+      }, null, 8, mo),
+      e.value.userOptions.show && he.value && (s(Fe) || s(Z)) ? (r(), _(s(it), {
         ref_key: "details",
         ref: pt,
         key: `user_options${fe.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: r(Oe),
-        isPrinting: r(Fe),
-        uid: w.value,
+        isImaging: s(De),
+        isPrinting: s(Oe),
+        uid: A.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,
@@ -558,102 +629,102 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         hasXls: e.value.userOptions.buttons.csv,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: P.value,
-        isTooltip: m.value.showTooltip,
+        isFullscreen: I.value,
+        isTooltip: y.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: T.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: W.value,
+        isAnnotation: H.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
         onToggleFullscreen: Ee,
-        onGeneratePdf: r(De),
+        onGeneratePdf: s(xe),
         onGenerateCsv: ne,
-        onGenerateImage: r(Se),
+        onGenerateImage: s(Se),
         onGenerateSvg: Ve,
-        onToggleTable: Le,
+        onToggleTable: ze,
         onToggleTooltip: Ne,
-        onToggleAnnotator: se,
+        onToggleAnnotator: ue,
         style: E({
-          visibility: r(xe) ? r(Q) ? "visible" : "hidden" : "visible"
+          visibility: s(Fe) ? s(Z) ? "visible" : "hidden" : "visible"
         })
       }, Ge({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: i(({ isOpen: o, color: a }) => [
-            c(t.$slots, "menuIcon", y(C({ isOpen: o, color: a })), void 0, !0)
+          fn: c(({ isOpen: o, color: a }) => [
+            d(t.$slots, "menuIcon", k(C({ isOpen: o, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: i(() => [
-            c(t.$slots, "optionTooltip", {}, void 0, !0)
+          fn: c(() => [
+            d(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: i(() => [
-            c(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: c(() => [
+            d(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: i(() => [
-            c(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: c(() => [
+            d(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: i(() => [
-            c(t.$slots, "optionImg", {}, void 0, !0)
+          fn: c(() => [
+            d(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionSvg ? {
           name: "optionSvg",
-          fn: i(() => [
-            c(t.$slots, "optionSvg", {}, void 0, !0)
+          fn: c(() => [
+            d(t.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: i(() => [
-            c(t.$slots, "optionTable", {}, void 0, !0)
+          fn: c(() => [
+            d(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: i(({ toggleFullscreen: o, isFullscreen: a }) => [
-            c(t.$slots, "optionFullscreen", y(C({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
+          fn: c(({ toggleFullscreen: o, isFullscreen: a }) => [
+            d(t.$slots, "optionFullscreen", k(C({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: i(({ toggleAnnotator: o, isAnnotator: a }) => [
-            c(t.$slots, "optionAnnotator", y(C({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
+          fn: c(({ toggleAnnotator: o, isAnnotator: a }) => [
+            d(t.$slots, "optionAnnotator", k(C({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
           ]),
           key: "8"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
-      (s(), v("svg", {
+      (r(), g("svg", {
         ref_key: "svgRef",
-        ref: X,
-        xmlns: r(qt),
-        class: q({ "vue-data-ui-fullscreen--on": P.value, "vue-data-ui-fulscreen--off": !P.value, resizing: x.value }),
+        ref: Y,
+        xmlns: s(Kt),
+        class: W({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value, resizing: F.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(r(dt)),
-        t.$slots["chart-background"] ? (s(), v("foreignObject", {
+        ce(s(dt)),
+        t.$slots["chart-background"] ? (r(), g("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -663,9 +734,9 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             pointerEvents: "none"
           }
         }, [
-          c(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, mo)) : p("", !0),
-        (s(!0), v(G, null, Y(F.value, (o, a) => (s(), v("circle", {
+          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", {
           cx: h.value.centerX,
           cy: h.value.centerY,
           r: o.radius <= 0 ? 1e-4 : o.radius,
@@ -675,15 +746,15 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           "stroke-dasharray": o.path.bgDashArray,
           "stroke-dashoffset": o.path.fullOffset,
           "stroke-linecap": "round",
-          class: q({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(D.value) && D.value !== a }),
+          class: W({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(x.value) && x.value !== a }),
           style: E({
             transform: "rotate(-90deg)",
             transformOrigin: "50% 50%",
-            transition: x.value || r(A) ? "none" : "all 0.3s ease-in-out !important",
-            animation: x.value || r(A) ? "none" : "xyAnimation 0.5s ease-in"
+            transition: F.value || s($) ? "none" : "all 0.3s ease-in-out !important",
+            animation: F.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
           })
-        }, null, 14, yo))), 256)),
-        (s(!0), v(G, null, Y(F.value, (o, a) => (s(), v("circle", {
+        }, null, 14, wo))), 256)),
+        (r(!0), g(U, null, G(O.value, (o, a) => (r(), g("circle", {
           cx: h.value.centerX,
           cy: h.value.centerY,
           r: o.radius < 0 ? 1e-4 : o.radius,
@@ -692,34 +763,34 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           fill: "none",
           "stroke-dasharray": o.path.dashArray,
           "stroke-dashoffset": o.path.dashOffset,
-          class: q({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(D.value) && D.value !== a }),
+          class: W({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(x.value) && x.value !== a }),
           "stroke-linecap": "round",
           style: E({
             transform: "rotate(-90deg)",
             transformOrigin: "50% 50%",
-            transition: x.value || r(A) ? "none" : "all 0.3s ease-in-out !important",
-            animation: x.value || r(A) ? "none" : "xyAnimation 0.5s ease-in"
+            transition: F.value || s($) ? "none" : "all 0.3s ease-in-out !important",
+            animation: F.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
           })
-        }, null, 14, Co))), 256)),
-        I("defs", null, [
-          I("filter", {
-            id: `blur_${w.value}`,
+        }, null, 14, Ao))), 256)),
+        P("defs", null, [
+          P("filter", {
+            id: `blur_${A.value}`,
             x: "-50%",
             y: "-50%",
             width: "200%",
             height: "200%"
           }, [
-            I("feGaussianBlur", {
+            P("feGaussianBlur", {
               in: "SourceGraphic",
               stdDeviation: 100 / e.value.style.chart.gradientIntensity
-            }, null, 8, wo)
-          ], 8, ko)
+            }, null, 8, To)
+          ], 8, $o)
         ]),
-        e.value.style.chart.useGradient ? (s(), v("g", {
+        e.value.style.chart.useGradient ? (r(), g("g", {
           key: 1,
-          filter: `url(#blur_${w.value})`
+          filter: `url(#blur_${A.value})`
         }, [
-          (s(!0), v(G, null, Y(F.value, (o, a) => (s(), v("circle", {
+          (r(!0), g(U, null, G(O.value, (o, a) => (r(), g("circle", {
             cx: h.value.centerX,
             cy: h.value.centerY,
             r: o.radius <= 0 ? 1e-4 : o.radius,
@@ -732,12 +803,12 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             style: E({
               transform: "rotate(-90deg)",
               transformOrigin: "50% 50%",
-              transition: x.value || r(A) ? "none" : "all 0.3s ease-in-out !important",
-              animation: x.value || r(A) ? "none" : "xyAnimation 0.5s ease-in"
+              transition: F.value || s($) ? "none" : "all 0.3s ease-in-out !important",
+              animation: F.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
             })
-          }, null, 12, $o))), 256))
-        ], 8, Ao)) : p("", !0),
-        (s(!0), v(G, null, Y(F.value, (o, a) => (s(), v("circle", {
+          }, null, 12, Oo))), 256))
+        ], 8, Fo)) : p("", !0),
+        (r(!0), g(U, null, G(O.value, (o, a) => (r(), g("circle", {
           cx: h.value.centerX,
           cy: h.value.centerY,
           r: o.radius <= 0 ? 1e-4 : o.radius,
@@ -752,107 +823,83 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             transform: "rotate(-90deg)",
             transformOrigin: "50% 50%"
           },
-          onMouseenter: (g) => ze({
+          onMouseenter: (i) => Re({
             datapoint: o,
             show: !0,
             seriesIndex: a
           }),
-          onMouseleave: (g) => Re({ datapoint: o }),
-          onClick: (g) => Me({ datapoint: o })
-        }, null, 40, To))), 256)),
-        e.value.style.chart.layout.labels.show ? (s(), v("g", xo, [
-          (s(!0), v(G, null, Y(F.value, (o, a) => (s(), v("g", {
-            onMouseenter: (g) => ze({
+          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", {
+            onMouseenter: (i) => Re({
               datapoint: o,
               show: !0,
               seriesIndex: a
             }),
-            onMouseleave: (g) => Re({ datapoint: o }),
-            onClick: (g) => Me({ datapoint: o })
+            onMouseleave: (i) => Le({ datapoint: o }),
+            onClick: (i) => Me({ datapoint: o })
           }, [
-            b.value.includes(o.id) ? p("", !0) : (s(), v("text", {
+            b.value.includes(o.id) ? p("", !0) : (r(), g("text", {
               key: 0,
               class: "vue-ui-onion-label",
               x: n.value.width / 2 - B.value.gutter * 0.8 + e.value.style.chart.layout.labels.offsetX,
               y: o.labelY + e.value.style.chart.layout.labels.offsetY,
               "text-anchor": "end",
               "font-size": e.value.style.chart.layout.labels.fontSize,
-              fill: e.value.useBlurOnHover && ![null, void 0].includes(D.value) && D.value === a ? o.color : e.value.style.chart.layout.labels.color,
+              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"
-            }, R(o.name ? o.name + ": " : "") + " " + R(e.value.style.chart.layout.labels.percentage.show ? r(z)({
-              v: o.percentage,
-              s: "%",
-              r: e.value.style.chart.layout.labels.roundingPercentage
-            }) : "") + " " + R(!e.value.style.chart.layout.labels.percentage.show && e.value.style.chart.layout.labels.value.show ? `: ${r(ve)(
-              e.value.style.chart.layout.labels.value.formatter,
-              o.value,
-              r(z)({
-                p: o.prefix || "",
-                v: o.value || 0,
-                s: o.suffix || "",
-                r: e.value.style.chart.layout.labels.roundingValue
-              }),
-              { datapoint: o, seriesIndex: a }
-            )}` : `${e.value.style.chart.layout.labels.value.show && o.value ? `(${r(ve)(
-              e.value.style.chart.layout.labels.value.formatter,
-              o.value,
-              r(z)({
-                p: o.prefix || "",
-                v: o.value || 0,
-                s: o.suffix || "",
-                r: e.value.style.chart.layout.labels.roundingValue
-              }),
-              { datapoint: o, seriesIndex: a }
-            )})` : ""}`), 9, Oo))
-          ], 40, Fo))), 256))
+            }, q(_t(o, a)), 9, _o))
+          ], 40, So))), 256))
         ])) : p("", !0),
-        c(t.$slots, "svg", { svg: n.value }, void 0, !0)
-      ], 14, bo)),
-      t.$slots.watermark ? (s(), v("div", Do, [
-        c(t.$slots, "watermark", y(C({ isPrinting: r(Fe) || r(Oe) })), void 0, !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)
       ])) : p("", !0),
-      I("div", {
-        id: `legend-bottom-${w.value}`
-      }, null, 8, So),
-      Ae.value ? (s(), _(Vt, {
+      P("div", {
+        id: `legend-bottom-${A.value}`
+      }, null, 8, Bo),
+      Ae.value ? (r(), _(Gt, {
         key: 5,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${w.value}` : `#legend-bottom-${w.value}`
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${A.value}` : `#legend-bottom-${A.value}`
       }, [
-        I("div", {
+        P("div", {
           ref_key: "chartLegend",
           ref: be
         }, [
-          e.value.style.chart.legend.show ? (s(), _(go, {
+          e.value.style.chart.legend.show ? (r(), _(po, {
             key: `legend_${we.value}`,
             legendSet: oe.value,
             config: $t.value,
-            onClickMarker: l[0] || (l[0] = ({ legend: o }) => j(o.id))
+            onClickMarker: l[0] || (l[0] = ({ legend: o }) => X(o.id))
           }, {
-            item: i(({ legend: o }) => [
-              r(A) ? p("", !0) : (s(), v("div", {
+            item: c(({ legend: o }) => [
+              s($) ? p("", !0) : (r(), g("div", {
                 key: 0,
                 "data-cy-legend-item": "",
                 onClick: (a) => o.segregate(),
                 style: E(`opacity:${b.value.includes(o.id) ? 0.5 : 1}`)
-              }, R(o.display), 13, _o))
+              }, q(o.display), 13, Io))
             ]),
             _: 1
-          }, 8, ["legendSet", "config"])) : c(t.$slots, "legend", {
+          }, 8, ["legendSet", "config"])) : d(t.$slots, "legend", {
             key: 1,
             legend: oe.value
           }, void 0, !0)
         ], 512)
       ], 8, ["to"])) : p("", !0),
-      t.$slots.source ? (s(), v("div", {
+      t.$slots.source ? (r(), g("div", {
         key: 6,
         ref_key: "source",
-        ref: me,
+        ref: ye,
         dir: "auto"
       }, [
-        c(t.$slots, "source", {}, void 0, !0)
+        d(t.$slots, "source", {}, void 0, !0)
       ], 512)) : p("", !0),
-      ce(r(nt), {
-        show: m.value.showTooltip && Z.value,
+      ce(s(nt), {
+        show: y.value.showTooltip && J.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -863,43 +910,43 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: T.value,
-        content: J.value,
-        isFullscreen: P.value,
-        isCustom: r(We)(e.value.style.chart.tooltip.customFormat),
+        content: K.value,
+        isFullscreen: I.value,
+        isCustom: s(We)(e.value.style.chart.tooltip.customFormat),
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter,
         smoothForce: e.value.style.chart.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
       }, {
-        "tooltip-before": i(() => [
-          c(t.$slots, "tooltip-before", y(C({ ...re.value })), void 0, !0)
+        "tooltip-before": c(() => [
+          d(t.$slots, "tooltip-before", k(C({ ...se.value })), void 0, !0)
         ]),
-        "tooltip-after": i(() => [
-          c(t.$slots, "tooltip-after", y(C({ ...re.value })), void 0, !0)
+        "tooltip-after": c(() => [
+          d(t.$slots, "tooltip-after", k(C({ ...se.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["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 ? (s(), _(Ut(V.value.component), Gt({ key: 7 }, V.value.props, {
+      he.value && e.value.userOptions.buttons.table ? (r(), _(Yt(N.value.component), Xt({ key: 7 }, N.value.props, {
         ref_key: "tableUnit",
-        ref: L,
-        onClose: l[3] || (l[3] = (o) => m.value.showTable = !1)
+        ref: R,
+        onClose: l[3] || (l[3] = (o) => y.value.showTable = !1)
       }), Ge({
-        content: i(() => [
-          (s(), _(r(ut), {
-            key: `table_${ke.value}`,
-            colNames: H.value.colNames,
-            head: H.value.head,
-            body: H.value.body,
-            config: H.value.config,
-            title: e.value.table.useDialog ? "" : V.value.title,
+        content: c(() => [
+          (r(), _(s(ut), {
+            key: `table_${Ce.value}`,
+            colNames: j.value.colNames,
+            head: j.value.head,
+            body: j.value.body,
+            config: j.value.config,
+            title: e.value.table.useDialog ? "" : N.value.title,
             withCloseButton: !e.value.table.useDialog,
-            onClose: l[2] || (l[2] = (o) => m.value.showTable = !1)
+            onClose: l[2] || (l[2] = (o) => y.value.showTable = !1)
           }, {
-            th: i(({ th: o }) => [
-              Ye(R(o), 1)
+            th: c(({ th: o }) => [
+              Ye(q(o), 1)
             ]),
-            td: i(({ td: o }) => [
-              I("div", { innerHTML: o }, null, 8, Io)
+            td: c(({ td: o }) => [
+              P("div", { innerHTML: o }, null, 8, Eo)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -908,37 +955,37 @@ const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: i(() => [
-            Ye(R(V.value.title), 1)
+          fn: c(() => [
+            Ye(q(N.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: i(() => [
-            I("button", {
+          fn: c(() => [
+            P("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
               onClick: l[1] || (l[1] = (o) => ne(e.value.userOptions.callbacks.csv))
             }, [
-              ce(r(rt), {
+              ce(s(rt), {
                 name: "excel",
-                stroke: V.value.props.color
+                stroke: N.value.props.color
               }, null, 8, ["stroke"])
             ])
           ]),
           key: "1"
         } : void 0
       ]), 1040)) : p("", !0),
-      r(A) ? (s(), _(lo, { key: 8 })) : p("", !0)
-    ], 46, fo));
+      s($) ? (r(), _(ro, { key: 8 })) : p("", !0)
+    ], 46, yo));
   }
-}, Po = /* @__PURE__ */ ho(Bo, [["__scopeId", "data-v-eec12458"]]), Jo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Lo = /* @__PURE__ */ bo(Mo, [["__scopeId", "data-v-0e506fb5"]]), tl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Po
+  default: Lo
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  Zo as a,
-  Jo as b,
-  Po as v
+  el as a,
+  tl as b,
+  Lo as v
 };