vue-data-ui 3.9.12 → 3.9.13

package/dist/{vue-ui-nested-donuts-BY8C1axg.js → vue-ui-nested-donuts-DeTGEb4T.js}

@@ -1,41 +1,42 @@
-import { defineAsyncComponent as z, computed as k, ref as v, toRefs as Cl, watch as ae, onMounted as kl, shallowRef as kt, onBeforeUnmount as wl, createElementBlock as r, openBlock as n, unref as i, normalizeStyle as he, normalizeClass as M, createBlock as U, createCommentVNode as L, createElementVNode as g, createVNode as Pe, withCtx as p, renderSlot as y, normalizeProps as O, guardReactiveProps as N, createSlots as wt, Fragment as x, renderList as F, toDisplayString as P, withDirectives as At, vShow as $t, Teleport as Al, resolveDynamicComponent as $l, mergeProps as Ll, createTextVNode as Lt, nextTick as _t } from "vue";
-import { c as _l, t as xl, i as Fl, p as Ve, a0 as Be, o as Tl, g as J, j as Sl, a6 as R, l as Dl, a2 as ze, a as oe, d as D, X as Ol, s as Nl, F as xt, a4 as Me, a5 as K, x as Ft, u as Il, q as El, Z as Pl, af as Tt, T as Ue } from "./lib-W9waxHL3.js";
-import { t as Vl, u as Bl } from "./useResponsive-DfdjqQps.js";
-import { u as zl, a as Re } from "./useNestedProp-D-jUHecl.js";
-import { u as Ml, B as Ul } from "./BaseScanner-BMpwQAfz.js";
-import { u as Rl } from "./usePrinter-DhoMn87n.js";
-import { u as Gl } from "./useSvgExport-ByUukOZt.js";
-import { u as Yl } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as Wl } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Xl } from "./useChartAccessibility-9icAAmYg.js";
-import ql from "./img-BJzUSmkm.js";
-import Hl from "./Title-DFtCaCah.js";
-import jl from "./Legend-Dxz13z4E.js";
+import { defineAsyncComponent as B, computed as k, ref as v, toRefs as wl, watch as oe, onMounted as Al, shallowRef as kt, onBeforeUnmount as $l, createElementBlock as r, openBlock as n, unref as c, normalizeStyle as he, normalizeClass as H, createBlock as z, createCommentVNode as L, createElementVNode as g, createVNode as Ie, withCtx as p, renderSlot as y, normalizeProps as S, guardReactiveProps as O, createSlots as wt, Fragment as x, renderList as T, toDisplayString as M, withDirectives as At, vShow as $t, Teleport as Ll, resolveDynamicComponent as _l, mergeProps as Fl, createTextVNode as Lt, nextTick as _t } from "vue";
+import { c as xl, t as Tl, i as Dl, j as Ee, a1 as Ve, o as Sl, g as K, k as Ol, a7 as U, m as Nl, a3 as Be, a as fe, d as N, X as Pl, s as Il, G as Ft, a5 as xt, a6 as be, p as Tt, y as Dt, v as El, r as Vl, _ as Bl, ag as St, U as ze } from "./lib-BwysEpWI.js";
+import { b as zl } from "./labelUtils-PMU3ZGCb.js";
+import { t as Ml, u as Ul } from "./useResponsive-DfdjqQps.js";
+import { u as Rl, a as Me } from "./useNestedProp--5lL-kf1.js";
+import { u as Gl, B as Yl } from "./BaseScanner-BMpwQAfz.js";
+import { u as Wl } from "./usePrinter-BJzHDpYF.js";
+import { u as Xl } from "./useSvgExport-ByUukOZt.js";
+import { u as Hl } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as ql } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as jl } from "./useChartAccessibility-9icAAmYg.js";
+import Jl from "./img-DKigoPDs.js";
+import Kl from "./Title-BhURirpm.js";
+import Ql from "./Legend-D6z73edh.js";
 import { _ as Zl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { donut: { emptyFill: "#3A3A3A" }, labels: { dataLabels: { 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" } } }, Dt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { labels: { dataLabels: { 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" } } }, Ot = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { labels: { dataLabels: { 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" } } }, Nt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { labels: { dataLabels: { color: "#AACCAA" } } }, 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" } } }, It = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { labels: { dataLabels: { 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: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { labels: { dataLabels: { 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" } } }, Pt = {
+const Ot = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { donut: { emptyFill: "#3A3A3A" }, labels: { dataLabels: { 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" } } }, Nt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { labels: { dataLabels: { 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" } } }, Pt = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { labels: { dataLabels: { 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" } } }, It = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { labels: { dataLabels: { color: "#AACCAA" } } }, 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" } } }, Et = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { labels: { dataLabels: { 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" } } }, Vt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { labels: { dataLabels: { 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" } } }, Bt = {
   default: {},
-  dark: St,
-  celebration: Dt,
-  celebrationNight: Ot,
-  hack: Nt,
-  zen: It,
-  concrete: Et
-}, Ya = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  dark: Ot,
+  celebration: Nt,
+  celebrationNight: Pt,
+  hack: It,
+  zen: Et,
+  concrete: Vt
+}, Ha = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  celebration: Dt,
-  celebrationNight: Ot,
-  concrete: Et,
-  dark: St,
-  default: Pt,
-  hack: Nt,
-  zen: It
-}, Symbol.toStringTag, { value: "Module" })), Jl = ["id"], Kl = ["id"], Ql = ["xmlns", "viewBox"], ea = ["width", "height"], ta = ["id"], la = ["offset", "stop-color"], aa = ["offset", "stop-opacity"], oa = ["id"], sa = ["id"], na = ["id"], ua = ["flood-color"], ra = ["id", "d"], ia = ["d", "fill", "stroke", "stroke-width", "filter"], da = ["d", "fill", "stroke", "stroke-width"], ca = { key: 1 }, va = ["d", "fill"], ha = { key: 2 }, fa = ["font-size", "font-weight", "fill", "dy"], ba = ["href"], ga = ["x", "y", "font-size", "font-weight", "fill"], pa = { key: 3 }, ya = ["filter"], ma = ["opacity", "text-anchor", "x", "y", "fill", "font-size", "font-weight"], Ca = ["opacity", "text-anchor", "x", "y", "fill", "font-size", "font-weight"], ka = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], wa = ["d", "fill", "onMouseenter", "onClick", "onMouseleave"], Aa = {
+  celebration: Nt,
+  celebrationNight: Pt,
+  concrete: Vt,
+  dark: Ot,
+  default: Bt,
+  hack: It,
+  zen: Et
+}, Symbol.toStringTag, { value: "Module" })), ea = ["id"], ta = ["id"], la = ["xmlns", "viewBox"], aa = ["width", "height"], oa = ["id"], sa = ["offset", "stop-color"], na = ["offset", "stop-opacity"], ua = ["id"], ra = ["id"], ia = ["id"], ca = ["flood-color"], da = ["id", "d"], va = ["d", "fill", "stroke", "stroke-width", "filter"], ha = ["d", "fill", "stroke", "stroke-width"], fa = { key: 1 }, ba = ["d", "fill"], ga = { key: 2 }, pa = ["font-size", "font-weight", "fill", "dy"], ya = ["href"], ma = ["x", "y", "font-size", "font-weight", "fill"], Ca = { key: 3 }, ka = ["filter"], wa = ["opacity", "text-anchor", "x", "y", "fill", "font-size", "font-weight"], Aa = ["opacity", "text-anchor", "x", "y", "fill", "font-size", "font-weight"], $a = ["d", "fill", "onMouseenter", "onClick", "onMouseleave"], La = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, $a = ["id"], La = {
+}, _a = ["id"], Fa = {
   key: 0,
   class: "vue-ui-nested-donuts-legend-title"
-}, _a = ["onClick"], xa = ["innerHTML"], Fa = {
+}, xa = ["onClick"], Ta = ["innerHTML"], Da = {
   __name: "vue-ui-nested-donuts",
   props: {
     config: {
@@ -52,19 +53,19 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     }
   },
   emits: ["selectLegend", "selectDatapoint"],
-  setup(Vt, { expose: Bt, emit: zt }) {
-    const Mt = z(() => import("./Tooltip-B79qvriT.js")), Ut = z(() => import("./BaseIcon-r3_sTK1A.js")), Rt = z(() => import("./vue-ui-accordion-B6BX2vhq.js")), Gt = z(() => import("./DataTable-DNeCys3I.js")), Yt = z(() => import("./UserOptions-B-2A_KRb.js")), Wt = z(() => import("./PenAndPaper-CsqBamFZ.js")), Xt = z(() => import("./PackageVersion-BpArR90N.js")), qt = z(() => import("./BaseDraggableDialog-C167SnU0.js")), { vue_ui_nested_donuts: Ht } = zl(), { isThemeValid: jt, warnInvalidTheme: Zt } = Yl(), w = Vt, fe = k({
+  setup(zt, { expose: Mt, emit: Ut }) {
+    const Rt = B(() => import("./Tooltip-TDyKgLB6.js")), Gt = B(() => import("./BaseIcon-4i3dd7Ty.js")), Yt = B(() => import("./vue-ui-accordion-tQNKwbVi.js")), Wt = B(() => import("./DataTable-WrXCJkfE.js")), Xt = B(() => import("./UserOptions-CzJWRC4s.js")), Ht = B(() => import("./PenAndPaper-DxIUvoQ8.js")), qt = B(() => import("./PackageVersion-D3cMhAlf.js")), jt = B(() => import("./BaseDraggableDialog-CAJxIF6g.js")), { vue_ui_nested_donuts: Jt } = Rl(), { isThemeValid: Kt, warnInvalidTheme: Qt } = Hl(), w = zt, ge = k({
       get() {
         return !!w.dataset && w.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), b = v(_l()), be = v(!1), ge = v(""), pe = v(null), Ge = v(0), I = v(null), Ye = v(null), ye = v(null), We = v(null), Xe = v(null), qe = v(0), He = v(0), je = v(0), G = v(!0), Y = v([]), Q = v([]), Ze = v(!1), ee = v(null), me = v(null), W = v(!1);
-    function Je(t) {
-      W.value = t, Ge.value += 1;
+    }), b = v(xl()), pe = v(!1), ye = v(""), me = v(null), Ue = v(0), P = v(null), Re = v(null), Ce = v(null), Ge = v(null), Ye = v(null), We = v(0), Xe = v(0), He = v(0), R = v(!0), G = v([]), Q = v([]), qe = v(!1), Z = v(null), ke = v(null), Y = v(!1);
+    function je(t) {
+      Y.value = t, Ue.value += 1;
     }
-    const e = v(Ae()), Ke = {
+    const e = v(Le()), Je = {
       name: "",
       series: [
         {
@@ -83,17 +84,17 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           color: "#CACACA"
         }
       ]
-    }, { loading: Ce, FINAL_DATASET: X, manualLoading: ke } = Ml({
-      ...Cl(w),
+    }, { loading: we, FINAL_DATASET: W, manualLoading: Ae } = Gl({
+      ...wl(w),
       FINAL_CONFIG: e,
-      prepareConfig: Ae,
+      prepareConfig: Le,
       callback: () => {
         Promise.resolve().then(async () => {
-          await lt();
+          await et();
         });
       },
-      skeletonDataset: [Ke, Ke],
-      skeletonConfig: xl({
+      skeletonDataset: [Je, Je],
+      skeletonConfig: Tl({
         defaultConfig: e.value,
         userConfig: {
           useCssAnimation: !1,
@@ -119,165 +120,165 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         }
       })
-    }), { userOptionsVisible: we, setUserOptionsVisibility: Qe, keepUserOptionState: et } = Wl({ config: e.value }), { svgRef: te } = Xl({
+    }), { userOptionsVisible: $e, setUserOptionsVisibility: Ke, keepUserOptionState: Qe } = ql({ config: e.value }), { svgRef: ee } = jl({
       config: e.value.style.chart.title
     });
-    function Ae() {
-      const t = Re({
+    function Le() {
+      const t = Me({
         userConfig: w.config,
-        defaultConfig: Ht
+        defaultConfig: Jt
       });
       let s = {};
-      const a = t.theme;
-      if (a)
-        if (!jt.value(t))
-          Zt(t), s = t;
+      const l = t.theme;
+      if (l)
+        if (!Kt.value(t))
+          Qt(t), s = t;
         else {
-          const o = Re({
-            userConfig: Pt[a] || w.config,
+          const o = Me({
+            userConfig: Bt[l] || w.config,
             defaultConfig: t
           });
           s = {
-            ...Re({
+            ...Me({
               userConfig: w.config,
               defaultConfig: o
             }),
-            customPalette: t.customPalette.length ? t.customPalette : Fl[a] || Ve
+            customPalette: t.customPalette.length ? t.customPalette : Dl[l] || Ee
           };
         }
       else
         s = t;
-      return w.config && Be(w.config, "events.datapointEnter") ? s.events.datapointEnter = w.config.events.datapointEnter : s.events.datapointEnter = null, w.config && Be(w.config, "events.datapointLeave") ? s.events.datapointLeave = w.config.events.datapointLeave : s.events.datapointLeave = null, w.config && Be(w.config, "events.datapointClick") ? s.events.datapointClick = w.config.events.datapointClick : s.events.datapointClick = null, s;
+      return w.config && Ve(w.config, "events.datapointEnter") ? s.events.datapointEnter = w.config.events.datapointEnter : s.events.datapointEnter = null, w.config && Ve(w.config, "events.datapointLeave") ? s.events.datapointLeave = w.config.events.datapointLeave : s.events.datapointLeave = null, w.config && Ve(w.config, "events.datapointClick") ? s.events.datapointClick = w.config.events.datapointClick : s.events.datapointClick = null, s;
     }
-    ae(
+    oe(
       () => w.config,
       (t) => {
-        Ce.value || (e.value = Ae()), we.value = !e.value.userOptions.showOnChartHover, at(), qe.value += 1, He.value += 1, je.value += 1, _.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, _.value.showTable = e.value.table.show, _.value.showTooltip = e.value.style.chart.tooltip.show, h.value.width = e.value.style.chart.width, h.value.height = e.value.style.chart.height;
+        we.value || (e.value = Le()), $e.value = !e.value.userOptions.showOnChartHover, tt(), We.value += 1, Xe.value += 1, He.value += 1, _.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, _.value.showTable = e.value.table.show, _.value.showTooltip = e.value.style.chart.tooltip.show, h.value.width = e.value.style.chart.width, h.value.height = e.value.style.chart.height;
       },
       { deep: !0 }
     );
-    const tt = k(() => {
-      const { top: t, right: s, bottom: a, left: o } = e.value.style.chart.padding;
+    const Ze = k(() => {
+      const { top: t, right: s, bottom: l, left: o } = e.value.style.chart.padding;
       return {
-        css: `padding:${t}px ${s}px ${a}px ${o}px`,
+        css: `padding:${t}px ${s}px ${l}px ${o}px`,
         top: t,
         right: s,
-        bottom: a,
+        bottom: l,
         left: o
       };
     });
-    function Jt(t, s = 1e3, a = 50) {
+    function Zt(t, s = 1e3, l = 50) {
       return new Promise((o) => {
-        const l = t.length;
-        Y.value = Array(l).fill(0), Q.value = [];
+        const a = t.length;
+        G.value = Array(a).fill(0), Q.value = [];
         let u = 0;
-        t.forEach((c, f) => {
+        t.forEach((d, f) => {
           setTimeout(() => {
-            const A = performance.now();
-            function d(m) {
-              const T = Math.min((m - A) / s, 1), Te = Tt(T), Se = c * Te;
-              Y.value[f] = Se, Y.value = [...Y.value];
-              const ce = [];
+            const $ = performance.now();
+            function i(C) {
+              const F = Math.min((C - $) / s, 1), le = St(F), ae = d * le;
+              G.value[f] = ae, G.value = [...G.value];
+              const de = [];
               let De = 0;
-              w.dataset.forEach((ve, Oe) => {
-                const gl = Ue(ve.series.reduce(
-                  (Ie, Ee) => Ie + Ue(R(Ee.values).reduce((yl, ml) => yl + ml, 0)),
+              w.dataset.forEach((ve, Se) => {
+                const yl = ze(ve.series.reduce(
+                  (Ne, Pe) => Ne + ze(U(Pe.values).reduce((Cl, kl) => Cl + kl, 0)),
                   0
-                )), pl = Ue(Y.value.slice(De, De + ve.series.length).reduce((Ie, Ee) => Ie + Ee, 0)), Ne = gl - pl;
-                Ne > Number.MIN_VALUE && ce.push({
+                )), ml = ze(G.value.slice(De, De + ve.series.length).reduce((Ne, Pe) => Ne + Pe, 0)), Oe = yl - ml;
+                Oe > Number.MIN_VALUE && de.push({
                   name: "__ghost__",
                   arcOf: ve.name,
-                  arcOfId: `${b.value}_${Oe}`,
-                  id: `ghost_${b.value}_${Oe}`,
+                  arcOfId: `${b.value}_${Se}`,
+                  id: `ghost_${b.value}_${Se}`,
                   seriesIndex: -1,
-                  datasetIndex: Oe,
+                  datasetIndex: Se,
                   color: "transparent",
-                  value: Ne,
-                  fullValue: Ne,
+                  value: Oe,
+                  fullValue: Oe,
                   absoluteValues: [],
                   ghost: !0
                 }), De += ve.series.length;
-              }), Q.value = ce, T < 1 ? requestAnimationFrame(d) : (u += 1, u === l && o());
+              }), Q.value = de, F < 1 ? requestAnimationFrame(i) : (u += 1, u === a && o());
             }
-            requestAnimationFrame(d);
-          }, f * a);
+            requestAnimationFrame(i);
+          }, f * l);
         });
       });
     }
-    async function lt() {
+    async function et() {
       if (e.value.startAnimation?.show) {
-        const s = X.value.flatMap((a) => a.series).map(
-          (a) => R(a.values).reduce((o, l) => o + l, 0)
+        const s = W.value.flatMap((l) => l.series).map(
+          (l) => U(l.values).reduce((o, a) => o + a, 0)
         );
-        Y.value = s.map(() => 0), G.value = !0, Q.value = X.value.map((a, o) => {
-          const l = a.series.reduce(
-            (u, c) => u + R(c.values).reduce((f, A) => f + A, 0),
+        G.value = s.map(() => 0), R.value = !0, Q.value = W.value.map((l, o) => {
+          const a = l.series.reduce(
+            (u, d) => u + U(d.values).reduce((f, $) => f + $, 0),
             0
           );
           return {
             name: "__ghost__",
-            arcOf: a.name,
+            arcOf: l.name,
             arcOfId: `${b.value}_${o}`,
             id: `ghost_${b.value}_${o}`,
             seriesIndex: -1,
             datasetIndex: o,
             color: "transparent",
-            value: l,
-            fullValue: l,
+            value: a,
+            fullValue: a,
             absoluteValues: [],
             ghost: !0
           };
-        }), await _t(), Jt(
+        }), await _t(), Zt(
           s,
           e.value.startAnimation.durationMs,
           e.value.startAnimation.staggerMs
         ).then(() => {
-          G.value = !1, Q.value = [];
+          R.value = !1, Q.value = [];
         });
       } else
-        G.value = !1;
+        R.value = !1;
     }
-    kl(async () => {
-      Ze.value = !0, at(), await lt();
+    Al(async () => {
+      qe.value = !0, tt(), await et();
     });
-    const V = kt(null), H = kt(null), j = k(() => !!e.value.debug);
-    function at() {
-      if (Tl(w.dataset) ? (J({
+    const E = kt(null), q = kt(null), j = k(() => !!e.value.debug);
+    function tt() {
+      if (Sl(w.dataset) ? (K({
         componentName: "VueUiNestedDonuts",
         type: "dataset",
         debug: j.value
-      }), fe.value = !1, ke.value = !0) : ke.value = e.value.loading, e.value.responsive) {
-        const t = Vl(() => {
-          const { width: s, height: a } = Bl({
-            chart: I.value,
-            title: e.value.style.chart.title.text ? Ye.value : null,
-            legend: e.value.style.chart.legend.show ? ye.value : null,
-            source: We.value,
-            noTitle: Xe.value,
-            padding: tt.value
+      }), ge.value = !1, Ae.value = !0) : Ae.value = e.value.loading, e.value.responsive) {
+        const t = Ml(() => {
+          const { width: s, height: l } = Ul({
+            chart: P.value,
+            title: e.value.style.chart.title.text ? Re.value : null,
+            legend: e.value.style.chart.legend.show ? Ce.value : null,
+            source: Ge.value,
+            noTitle: Ye.value,
+            padding: Ze.value
           });
           requestAnimationFrame(() => {
-            h.value.width = s, h.value.height = a;
+            h.value.width = s, h.value.height = l;
           });
         });
-        V.value && (H.value && V.value.unobserve(H.value), V.value.disconnect()), V.value = new ResizeObserver(t), H.value = I.value.parentNode, V.value.observe(H.value);
+        E.value && (q.value && E.value.unobserve(q.value), E.value.disconnect()), E.value = new ResizeObserver(t), q.value = P.value.parentNode, E.value.observe(q.value);
       }
     }
-    wl(() => {
-      V.value && (H.value && V.value.unobserve(H.value), V.value.disconnect());
+    $l(() => {
+      E.value && (q.value && E.value.unobserve(q.value), E.value.disconnect());
     });
-    const { isPrinting: ot, isImaging: st, generatePdf: nt, generateImage: ut } = Rl({
+    const { isPrinting: lt, isImaging: at, generatePdf: ot, generateImage: st } = Wl({
       elementId: `nested_donuts_${b.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-nested-donuts",
       options: e.value.userOptions.print
-    }), Kt = k(() => e.value.userOptions.show && !e.value.style.chart.title.text), Qt = k(() => Sl(e.value.customPalette)), _ = v({
+    }), el = k(() => e.value.userOptions.show && !e.value.style.chart.title.text), tl = k(() => Ol(e.value.customPalette)), _ = v({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     });
-    ae(e, () => {
+    oe(e, () => {
       _.value = {
         dataLabels: {
           show: e.value.style.chart.layout.labels.dataLabels.show
@@ -289,184 +290,184 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     const h = v({
       width: e.value.style.chart.width,
       height: e.value.style.chart.height
-    }), rt = zt;
-    function el({ datapoint: t, index: s, seriesIndex: a }) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a }), rt("selectDatapoint", { datapoint: t, index: s });
+    }), nt = Ut;
+    function ll({ datapoint: t, index: s, seriesIndex: l }) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: l }), nt("selectDatapoint", { datapoint: t, index: s });
     }
-    function it({
+    function ut({
       from: t,
       to: s,
-      duration: a,
+      duration: l,
       onUpdate: o,
-      onDone: l,
-      easing: u = Tt
+      onDone: a,
+      easing: u = St
     }) {
-      const c = performance.now();
-      function f(A) {
-        const d = Math.min((A - c) / a, 1), m = u(d), T = t + (s - t) * m;
-        o(T, d), d < 1 ? requestAnimationFrame(f) : (o(s, 1), l && l());
+      const d = performance.now();
+      function f($) {
+        const i = Math.min(($ - d) / l, 1), C = u(i), F = t + (s - t) * C;
+        o(F, i), i < 1 ? requestAnimationFrame(f) : (o(s, 1), a && a());
       }
       requestAnimationFrame(f);
     }
-    const C = v([]), S = k(() => {
-      Ce.value, X.value.forEach((s, a) => {
-        [null, void 0].includes(s.name) && J({
+    const m = v([]), D = k(() => {
+      we.value, W.value.forEach((s, l) => {
+        [null, void 0].includes(s.name) && K({
           componentName: "VueUiNestedDonuts",
           type: "datasetSerieAttribute",
           property: "name",
-          index: a,
+          index: l,
           debug: j.value
-        }), [null, void 0].includes(s.series) ? J({
+        }), [null, void 0].includes(s.series) ? K({
           componentName: "VueUiNestedDonuts",
           type: "datasetSerieAttribute",
           property: "series",
-          index: a,
+          index: l,
           debug: j.value
-        }) : s.series.length === 0 ? J({
+        }) : s.series.length === 0 ? K({
           componentName: "VueUiNestedDonuts",
           type: "datasetAttributeEmpty",
-          property: `series at index ${a}`,
+          property: `series at index ${l}`,
           debug: j.value
-        }) : s.series.forEach((o, l) => {
-          [null, void 0].includes(o.name) && J({
+        }) : s.series.forEach((o, a) => {
+          [null, void 0].includes(o.name) && K({
             componentName: "VueUiNestedDonuts",
             type: "datasetSerieAttribute",
             property: "name",
-            index: l,
+            index: a,
             key: "serie",
             debug: j.value
-          }), [null, void 0].includes(o.values) && J({
+          }), [null, void 0].includes(o.values) && K({
             componentName: "VueUiNestedDonuts",
             type: "datasetSerieAttribute",
             property: "values",
-            index: l,
+            index: a,
             key: "serie",
             debug: j.value
           });
         });
       });
       let t = 0;
-      return X.value.map((s, a) => ({
+      return W.value.map((s, l) => ({
         ...s,
-        total: s.series.filter((o) => !C.value.includes(o.id)).map((o) => R(o.values).reduce((l, u) => l + u, 0)).reduce((o, l) => o + l, 0),
-        datasetIndex: a,
-        id: `${b.value}_${a}`,
-        series: s.series.map((o, l) => {
-          const u = R(o.values).reduce((c, f) => c + f, 0);
+        total: s.series.filter((o) => !m.value.includes(o.id)).map((o) => U(o.values).reduce((a, u) => a + u, 0)).reduce((o, a) => o + a, 0),
+        datasetIndex: l,
+        id: `${b.value}_${l}`,
+        series: s.series.map((o, a) => {
+          const u = U(o.values).reduce((d, f) => d + f, 0);
           return {
             name: o.name,
             arcOf: s.name,
-            arcOfId: `${b.value}_${a}`,
-            id: `${b.value}_${a}_${l}`,
-            seriesIndex: l,
-            datasetIndex: a,
-            color: Dl(o.color) || Qt.value[l] || Ve[l % Ve.length],
-            value: G.value ? Y.value[t++] ?? 0 : u,
+            arcOfId: `${b.value}_${l}`,
+            id: `${b.value}_${l}_${a}`,
+            seriesIndex: a,
+            datasetIndex: l,
+            color: Nl(o.color) || tl.value[a] || Ee[a % Ee.length],
+            value: R.value ? G.value[t++] ?? 0 : u,
             absoluteValues: o.values || []
           };
         })
       }));
     });
-    ae(() => w.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (ke.value = !1);
+    oe(() => w.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (Ae.value = !1);
     }, { immediate: !0 });
-    const E = k(() => Math.min(h.value.height, h.value.width) * (e.value.style.chart.layout.donut.strokeWidth / 512)), dt = k(() => [...S.value].map((t, s) => {
-      const a = t.series.filter((o) => !C.value.includes(o.id)).map((o) => o.value).reduce((o, l) => o + l, 0);
+    const I = k(() => Math.min(h.value.height, h.value.width) * (e.value.style.chart.layout.donut.strokeWidth / 512)), rt = k(() => [...D.value].map((t, s) => {
+      const l = t.series.filter((o) => !m.value.includes(o.id)).map((o) => o.value).reduce((o, a) => o + a, 0);
       return {
         ...t,
-        total: a,
-        series: t.series.filter((o) => !C.value.includes(o.id)).map((o) => ({
+        total: l,
+        series: t.series.filter((o) => !m.value.includes(o.id)).map((o) => ({
           ...o,
-          proportion: o.value / a
+          proportion: o.value / l
         }))
       };
     }));
-    function tl(t, s, a) {
+    function al(t, s, l) {
       let o = 0;
-      for (let l = 0; l < t.length; l += 1)
-        a.includes(t[l]) && (o += 1);
+      for (let a = 0; a < t.length; a += 1)
+        l.includes(t[a]) && (o += 1);
       return o < s;
     }
-    const $ = v(dt.value);
-    ae(
-      () => dt.value,
-      (t) => $.value = t
+    const A = v(rt.value);
+    oe(
+      () => rt.value,
+      (t) => A.value = t
     );
-    function q(t) {
-      rt("selectLegend", t);
+    function X(t) {
+      nt("selectLegend", t);
       const s = w.dataset.flatMap(
-        (d, m) => d.series.map((T, Te) => ({
-          value: R(T.values).reduce((Se, ce) => Se + ce, 0),
-          id: `${b.value}_${m}_${Te}`,
-          arcOfId: `${b.value}_${m}`
+        (i, C) => i.series.map((F, le) => ({
+          value: U(F.values).reduce((ae, de) => ae + de, 0),
+          id: `${b.value}_${C}_${le}`,
+          arcOfId: `${b.value}_${C}`
         }))
-      ).find((d) => d.id === t.id);
+      ).find((i) => i.id === t.id);
       if (!s) return;
-      const a = S.value.flatMap((d) => d.series).find((d) => d.id === t.id)?.value ?? 0, o = $.value.flatMap((d) => d.series).find((d) => d.id === t.id);
+      const l = D.value.flatMap((i) => i.series).find((i) => i.id === t.id)?.value ?? 0, o = A.value.flatMap((i) => i.series).find((i) => i.id === t.id);
       let u = o ? o.value : 0;
-      const c = S.value.find(
-        (d) => d.id === s.arcOfId
+      const d = D.value.find(
+        (i) => i.id === s.arcOfId
       );
-      if (!c) return;
-      const f = c.series.map((d) => d.id), A = tl(
+      if (!d) return;
+      const f = d.series.map((i) => i.id), $ = al(
         f,
         f.length - 1,
-        C.value
+        m.value
       );
-      C.value.includes(t.id) ? (C.value = C.value.filter((d) => d !== t.id), e.value.serieToggleAnimation.show ? it({
+      m.value.includes(t.id) ? (m.value = m.value.filter((i) => i !== t.id), e.value.serieToggleAnimation.show ? ut({
         from: u,
-        to: a,
+        to: l,
         duration: e.value.serieToggleAnimation.durationMs,
-        onUpdate: (d) => {
-          $.value = $.value.map((m) => ({
-            ...m,
-            series: m.series.map((T) => T.id === t.id ? { ...T, value: d } : T)
+        onUpdate: (i) => {
+          A.value = A.value.map((C) => ({
+            ...C,
+            series: C.series.map((F) => F.id === t.id ? { ...F, value: i } : F)
           }));
         }
-      }) : $.value = $.value.map((d) => ({
-        ...d,
-        series: d.series.map((m) => m.id === t.id ? { ...m, value: a } : m)
-      }))) : A && (e.value.serieToggleAnimation.show ? it({
+      }) : A.value = A.value.map((i) => ({
+        ...i,
+        series: i.series.map((C) => C.id === t.id ? { ...C, value: l } : C)
+      }))) : $ && (e.value.serieToggleAnimation.show ? ut({
         from: u,
         to: 0,
         duration: e.value.serieToggleAnimation.durationMs,
-        onUpdate: (d) => {
-          $.value = $.value.map((m) => ({
-            ...m,
-            series: m.series.map((T) => T.id === t.id ? { ...T, value: d } : T)
+        onUpdate: (i) => {
+          A.value = A.value.map((C) => ({
+            ...C,
+            series: C.series.map((F) => F.id === t.id ? { ...F, value: i } : F)
           }));
         },
         onDone: () => {
-          C.value.push(t.id);
+          m.value.push(t.id);
         }
-      }) : ($.value = $.value.map((d) => ({
-        ...d,
-        series: d.series.map((m) => m.id === t.id ? { ...m, value: 0 } : m)
-      })), C.value.push(t.id)));
+      }) : (A.value = A.value.map((i) => ({
+        ...i,
+        series: i.series.map((C) => C.id === t.id ? { ...C, value: 0 } : C)
+      })), m.value.push(t.id)));
     }
-    function ct(t) {
-      if (!S.value.length)
+    function it(t) {
+      if (!D.value.length)
         return e.value.debug && console.warn("VueUiNestedDonuts - There are no series to show."), null;
-      const s = S.value.flatMap((a) => a.series).filter((a) => a.name === t);
+      const s = D.value.flatMap((l) => l.series).filter((l) => l.name === t);
       return s || (e.value.debug && console.warn(`VueUiNestedDonuts - Series name not found "${t}"`), null);
     }
-    function ll(t) {
-      const s = ct(t);
-      s !== null && (Array.isArray(s) ? s.forEach((a) => {
-        C.value.includes(a.id) && q({ id: a.id });
-      }) : C.value.includes(s.id) && q({ id: s.id }));
+    function ol(t) {
+      const s = it(t);
+      s !== null && (Array.isArray(s) ? s.forEach((l) => {
+        m.value.includes(l.id) && X({ id: l.id });
+      }) : m.value.includes(s.id) && X({ id: s.id }));
     }
-    function al(t) {
-      const s = ct(t);
-      s !== null && (Array.isArray(s) ? s.forEach((a) => {
-        C.value.includes(a.id) || q({ id: a.id });
-      }) : C.value.includes(s.id) || q({ id: s.id }));
+    function sl(t) {
+      const s = it(t);
+      s !== null && (Array.isArray(s) ? s.forEach((l) => {
+        m.value.includes(l.id) || X({ id: l.id });
+      }) : m.value.includes(s.id) || X({ id: s.id }));
     }
-    const se = k(() => E.value / S.value.length * e.value.style.chart.layout.donut.spacingRatio), vt = k(() => $.value.map((t, s) => E.value - s * E.value / S.value.length)), Z = k(() => $.value.map((t, s) => {
-      const a = Math.abs(t.series.map((A) => A.value).reduce((A, d) => A + d, 0)) > 0, o = E.value - s * E.value / $.value.length, l = G.value ? Q.value.find((A) => A.datasetIndex === s) : null, u = [...t.series, ...l ? [l] : []].map((A) => ({
-        ...A,
-        value: A.value < 1e-11 ? Number.MIN_VALUE : A.value
-      })), c = ze(
+    const se = k(() => I.value / D.value.length * e.value.style.chart.layout.donut.spacingRatio), ct = k(() => A.value.map((t, s) => I.value - s * I.value / D.value.length)), J = k(() => A.value.map((t, s) => {
+      const l = Math.abs(t.series.map(($) => $.value).reduce(($, i) => $ + i, 0)) > 0, o = I.value - s * I.value / A.value.length, a = R.value ? Q.value.find(($) => $.datasetIndex === s) : null, u = [...t.series, ...a ? [a] : []].map(($) => ({
+        ...$,
+        value: $.value < 1e-11 ? Number.MIN_VALUE : $.value
+      })), d = Be(
         { series: [
           { name: "_", color: e.value.style.chart.layout.donut.emptyFill, value: 1 }
         ] },
@@ -485,11 +486,11 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             a ${o},${o} 0 1,1 0,${2 * o}`;
       return {
         ...t,
-        hasData: a,
+        hasData: l,
         radius: o,
-        skeleton: c,
+        skeleton: d,
         fullCirclePath: f,
-        donut: ze(
+        donut: Be(
           { series: u },
           h.value.width / 2,
           h.value.height / 2,
@@ -503,199 +504,226 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           se.value
         )
       };
-    })), ht = k(() => [...S.value].map((t, s) => {
-      const a = s * E.value / S.value.length;
+    })), dt = k(() => [...D.value].map((t, s) => {
+      const l = s * I.value / D.value.length;
       return {
-        sizeRatio: a,
-        donut: ze(
+        sizeRatio: l,
+        donut: Be(
           { series: [{ value: 1 }] },
           h.value.width / 2,
           h.value.height / 2,
-          E.value - a,
-          E.value - a,
+          I.value - l,
+          I.value - l,
           1.99999,
           2,
           1,
           360,
           105.25,
-          E.value / S.value.length * e.value.style.chart.layout.donut.spacingRatio
+          I.value / D.value.length * e.value.style.chart.layout.donut.spacingRatio
         )[0]
       };
-    })), ft = v(null), ne = v(null), ue = v(null), $e = v(null);
-    function ol({ datapoint: t, seriesIndex: s }) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: s }), be.value = !1, ft.value = null, pe.value = null, ne.value = null, ue.value = null;
+    })), vt = v(null), ne = v(null), ue = v(null), _e = v(null);
+    function nl({ datapoint: t, seriesIndex: s }) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: s }), pe.value = !1, vt.value = null, me.value = null, ne.value = null, ue.value = null;
     }
-    function sl({ datapoint: t, _relativeIndex: s, seriesIndex: a }) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), ft.value = t.arcOfId, ne.value = t.id, ue.value = a, pe.value = t.id, $e.value = {
+    function ht({
+      val: t,
+      percentage: s,
+      showVal: l,
+      showPercentage: o
+    }) {
+      const a = e.value.style.chart.layout.labels.dataLabels;
+      return zl({
+        config: a,
+        val: t,
+        percentage: s,
+        showVal: l,
+        showPercentage: o
+      });
+    }
+    function ul({ datapoint: t, _relativeIndex: s, seriesIndex: l }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: l }), vt.value = t.arcOfId, ne.value = t.id, ue.value = l, me.value = t.id, _e.value = {
         datapoint: t,
-        seriesIndex: a,
-        series: $.value,
+        seriesIndex: l,
+        series: A.value,
         config: e.value
       };
       const o = e.value.style.chart.tooltip.customFormat;
-      if (Ft(o) && Pl(
+      if (Dt(o) && Bl(
         () => o({
-          seriesIndex: a,
+          seriesIndex: l,
           datapoint: t,
-          series: $.value,
+          series: A.value,
           config: e.value
         })
       ))
-        ge.value = o({
-          seriesIndex: a,
+        ye.value = o({
+          seriesIndex: l,
           datapoint: t,
-          series: $.value,
+          series: A.value,
           config: e.value
         });
       else {
-        let l = "";
-        if (e.value.style.chart.tooltip.showAllItemsAtIndex && C.value.length === 0) {
-          const u = $.value.map((c) => c.series.find((f) => f.seriesIndex === a));
-          u.forEach((c, f) => {
-            if (!c) return "";
-            l += `
+        let a = "";
+        if (e.value.style.chart.tooltip.showAllItemsAtIndex && m.value.length === 0) {
+          const u = A.value.map((d) => d.series.find((f) => f.seriesIndex === l));
+          u.forEach((d, f) => {
+            if (!d) return "";
+            a += `
                     <div style="display:flex; flex-direction: column; justify-content:flex-start; align-items:flex-start;padding:6px 0; ${f < u.length - 1 ? `border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor}` : ""}">
                         <div style="display:flex; flex-direction: row; gap: 3px; justify-content:flex-start; align-items:center;">
                             <svg viewBox="0 0 20 20" height="${e.value.style.chart.tooltip.fontSize}" width="${e.value.style.chart.tooltip.fontSize}">
-                                <circle cx="10" cy="10" r="10" fill="${c.color}"/>
+                                <circle cx="10" cy="10" r="10" fill="${d.color}"/>
                             </svg>
                             <span>
-                                ${c.arcOf ?? ""} - ${c.name}
+                                ${d.arcOf ?? ""} - ${d.name}
                             </span>
                         </div>
                         <span>
-                            ${e.value.style.chart.tooltip.showValue ? `<b>${oe(
-              e.value.style.chart.layout.labels.dataLabels.formatter,
-              t.value,
-              D({
-                p: e.value.style.chart.layout.labels.dataLabels.prefix,
-                v: t.value,
-                s: e.value.style.chart.layout.labels.dataLabels.suffix,
-                r: e.value.style.chart.tooltip.roundingValue
-              }),
-              { datapoint: t, seriesIndex: a }
-            )}
-                        </b>` : ""}
-                            ${e.value.style.chart.tooltip.showPercentage ? `(${D({
-              v: c.proportion * 100,
-              s: "%",
-              r: e.value.style.chart.tooltip.roundingPercentage
-            })})` : ""}
+                            <b>
+                                ${ht({
+              showVal: e.value.style.chart.tooltip.showValue,
+              showPercentage: e.value.style.chart.tooltip.showPercentage,
+              val: fe(
+                e.value.style.chart.layout.labels.dataLabels.formatter,
+                t.value,
+                N({
+                  p: e.value.style.chart.layout.labels.dataLabels.prefix,
+                  v: t.value,
+                  s: e.value.style.chart.layout.labels.dataLabels.suffix,
+                  r: e.value.style.chart.tooltip.roundingValue
+                }),
+                { datapoint: t, seriesIndex: l }
+              ),
+              percentage: N({
+                v: d.proportion * 100,
+                s: "%",
+                r: e.value.style.chart.tooltip.roundingPercentage
+              })
+            })}
+                            </b>
                         </span>
                     </div>
                 `;
           });
         } else
-          l += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.arcOf ?? ""} - ${t.name}</div>`, l += `<div style="display:flex;flex-direction:row;gap:6px;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>`, e.value.style.chart.tooltip.showValue && (l += `<b>${oe(
+          a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.arcOf ?? ""} - ${t.name}</div>`, a += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg>`, e.value.style.chart.tooltip.showValue && (a += `<b>${fe(
             e.value.style.chart.layout.labels.dataLabels.formatter,
             t.value,
-            D({
+            N({
               p: e.value.style.chart.layout.labels.dataLabels.prefix,
               v: t.value,
               s: e.value.style.chart.layout.labels.dataLabels.suffix,
               r: e.value.style.chart.tooltip.roundingValue
             }),
-            { datapoint: t, seriesIndex: a }
-          )}</b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? l += `<span>(${D({
+            { datapoint: t, seriesIndex: l }
+          )}</b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? a += `<span>(${N({
             v: t.proportion * 100,
             s: "%",
             r: e.value.style.chart.tooltip.roundingPercentage
-          })})</span></div>` : l += `<b>${D({
+          })})</span></div>` : a += `<b>${N({
             v: t.proportion * 100,
             s: "%",
             r: e.value.style.chart.tooltip.roundingPercentage
           })}</b></div>`);
-        ge.value = `<div style="font-size:${e.value.style.chart.tooltip.fontSize}px">${l}</div>`;
+        ye.value = `<div style="font-size:${e.value.style.chart.tooltip.fontSize}px">${a}</div>`;
       }
-      be.value = !0;
+      pe.value = !0;
     }
-    function Le(t) {
+    function ft(t) {
       return t.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
     }
     function bt(t, s) {
       if (!e.value.useBlurOnHover)
         return "";
-      if (e.value.style.chart.tooltip.showAllItemsAtIndex && C.value.length === 0)
+      if (e.value.style.chart.tooltip.showAllItemsAtIndex && m.value.length === 0)
         return [null, void 0].includes(ue.value) || ue.value === s ? "" : `url(#blur_${b.value})`;
-      if (!e.value.style.chart.tooltip.showAllItemsAtIndex || C.value.length)
+      if (!e.value.style.chart.tooltip.showAllItemsAtIndex || m.value.length)
         return [null, void 0].includes(ne.value) || ne.value === t.id ? "" : `url(#blur_${b.value})`;
     }
-    const re = k(() => S.value.map((t, s) => {
-      const a = t.series.filter(
-        (l) => !C.value.includes(l.id)
-      ), o = G.value ? a.map((l) => {
-        const u = X.value[s].series.findIndex(
-          (c) => c.name === l.name
+    const re = k(() => D.value.map((t, s) => {
+      const l = t.series.filter(
+        (a) => !m.value.includes(a.id)
+      ), o = R.value ? l.map((a) => {
+        const u = W.value[s].series.findIndex(
+          (d) => d.name === a.name
         );
-        return R(
-          X.value[s].series[u].values
-        ).reduce((c, f) => c + f, 0);
-      }).reduce((l, u) => l + u, 0) : a.map((l) => l.value).reduce((l, u) => l + u, 0);
-      return t.series.map((l, u) => {
-        const c = R(X.value[s].series[u].values).reduce(
-          (d, m) => d + m,
+        return U(
+          W.value[s].series[u].values
+        ).reduce((d, f) => d + f, 0);
+      }).reduce((a, u) => a + u, 0) : l.map((a) => a.value).reduce((a, u) => a + u, 0);
+      return t.series.map((a, u) => {
+        const d = U(W.value[s].series[u].values).reduce(
+          (le, ae) => le + ae,
           0
-        ), f = G.value ? c : l.value, A = `${l.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${e.value.style.chart.legend.showValue ? oe(
+        ), f = R.value ? d : a.value;
+        console.log(m.value, a.id);
+        const $ = fe(
           e.value.style.chart.layout.labels.dataLabels.formatter,
           f,
-          D({
+          N({
             p: e.value.style.chart.layout.labels.dataLabels.prefix,
             v: f,
             s: e.value.style.chart.layout.labels.dataLabels.suffix,
             r: e.value.style.chart.legend.roundingValue
           }),
-          { datapoint: l, seriesIndex: u }
-        ) : ""}${e.value.style.chart.legend.showPercentage ? C.value.includes(l.id) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(f / o) ? "-" : D({
+          { datapoint: a, seriesIndex: u }
+        ), i = isNaN(f / o) || m.value.includes(a.id) ? "-" : N({
           v: f / o * 100,
           s: "%",
           r: e.value.style.chart.legend.roundingPercentage
-        })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""}`;
+        }), C = ht({
+          val: $,
+          percentage: i,
+          showVal: e.value.style.chart.legend.showValue,
+          showPercentage: e.value.style.chart.legend.showPercentage
+        }), F = `${a.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${C}`;
         return {
-          name: l.name,
-          color: l.color,
+          name: a.name,
+          color: a.color,
           value: f,
-          display: A,
-          svgDisplay: `${l.arcOf ? `${l.arcOf} - ` : ""}${A}`,
+          display: F,
+          svgDisplay: `${a.arcOf ? `${a.arcOf} - ` : ""}${F}`,
           shape: "circle",
-          arcOf: l.arcOf,
-          id: l.id,
+          arcOf: a.arcOf,
+          id: a.id,
           seriesIndex: u,
           datasetIndex: s,
           total: o,
-          opacity: C.value.includes(l.id) ? 0.5 : 1,
-          segregate: () => q(l),
-          isSegregated: C.value.includes(l.id)
+          opacity: m.value.includes(a.id) ? 0.5 : 1,
+          segregate: () => X(a),
+          isSegregated: m.value.includes(a.id)
         };
       });
-    })), nl = k(() => ({
+    })), rl = k(() => ({
       cy: "nested-donuts-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" : ""
-    })), B = k(() => {
-      const t = $.value.flatMap((a) => a.series.map((o) => ({
-        name: `${a.name} - ${o.name}`,
+    })), V = k(() => {
+      const t = A.value.flatMap((l) => l.series.map((o) => ({
+        name: `${l.name} - ${o.name}`,
         color: o.color,
-        total: a.total
-      }))), s = $.value.flatMap((a) => a.series.map((o) => o.value));
+        total: l.total
+      }))), s = A.value.flatMap((l) => l.series.map((o) => o.value));
       return { head: t, body: s };
     });
-    function _e(t = null) {
+    function Fe(t = null) {
       _t(() => {
-        const s = B.value.head.map((l, u) => [
-          [l.name],
-          [B.value.body[u]],
+        const s = V.value.head.map((a, u) => [
+          [a.name],
+          [V.value.body[u]],
           [
-            isNaN(B.value.body[u] / l.total) ? "-" : B.value.body[u] / l.total * 100
+            isNaN(V.value.body[u] / a.total) ? "-" : V.value.body[u] / a.total * 100
           ]
-        ]), a = [
+        ]), l = [
           [e.value.style.chart.title.text],
           [e.value.style.chart.title.subtitle.text],
           [[""], ["val"], ["%"]]
-        ].concat(s), o = Il(a);
-        t ? t(o) : El({
+        ].concat(s), o = El(l);
+        t ? t(o) : Vl({
           csvContent: o,
           title: e.value.style.chart.title.text || "vue-ui-nested-donuts"
         });
@@ -706,26 +734,26 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         e.value.table.columnNames.series,
         e.value.table.columnNames.value,
         e.value.table.columnNames.percentage
-      ], s = B.value.head.map((l, u) => {
-        const c = D({
+      ], s = V.value.head.map((a, u) => {
+        const d = N({
           p: e.value.style.chart.layout.labels.dataLabels.prefix,
-          v: B.value.body[u],
+          v: V.value.body[u],
           s: e.value.style.chart.layout.labels.dataLabels.suffix,
           r: e.value.table.td.roundingValue
         });
         return [
           {
-            color: l.color,
-            name: l.name
+            color: a.color,
+            name: a.name
           },
-          c,
-          isNaN(B.value.body[u] / l.total) ? "-" : D({
-            v: B.value.body[u] / l.total * 100,
+          d,
+          isNaN(V.value.body[u] / a.total) ? "-" : N({
+            v: V.value.body[u] / a.total * 100,
             s: "%",
             r: e.value.table.td.roundingPercentage
           })
         ];
-      }), a = {
+      }), l = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
@@ -746,11 +774,11 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         ],
         head: t,
         body: s,
-        config: a
+        config: l
       };
     });
-    function ul() {
-      return S.value;
+    function il() {
+      return D.value;
     }
     function gt() {
       _.value.showTable = !_.value.showTable;
@@ -761,40 +789,40 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     function yt() {
       _.value.showTooltip = !_.value.showTooltip;
     }
-    const de = v(!1);
+    const ce = v(!1);
     function xe() {
-      de.value = !de.value;
+      ce.value = !ce.value;
     }
-    async function rl({ scale: t = 2 } = {}) {
-      if (!I.value) return;
-      const { width: s, height: a } = I.value.getBoundingClientRect(), o = s / a, { imageUri: l, base64: u } = await ql({ domElement: I.value, base64: !0, img: !0, scale: t });
+    async function cl({ scale: t = 2 } = {}) {
+      if (!P.value) return;
+      const { width: s, height: l } = P.value.getBoundingClientRect(), o = s / l, { imageUri: a, base64: u } = await Jl({ domElement: P.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: l,
+        imageUri: a,
         base64: u,
         title: e.value.style.chart.title.text,
         width: s,
-        height: a,
+        height: l,
         aspectRatio: o
       };
     }
-    const Fe = v(null);
-    function il() {
-      if (!Fe.value) return;
-      const { x: t, y: s, width: a, height: o } = Fe.value.getBBox();
-      te.value && te.value.setAttribute("viewBox", `${t} ${s} ${a + Math.min(0, t)} ${o + Math.min(0, s)}`);
+    const Te = v(null);
+    function dl() {
+      if (!Te.value) return;
+      const { x: t, y: s, width: l, height: o } = Te.value.getBBox();
+      ee.value && ee.value.setAttribute("viewBox", `${t} ${s} ${l + Math.min(0, t)} ${o + Math.min(0, s)}`);
     }
-    const le = k(() => {
+    const te = k(() => {
       const t = e.value.table.useDialog && !e.value.table.show, s = _.value.showTable;
       return {
-        component: t ? qt : Rt,
+        component: t ? jt : Yt,
         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,
           color: e.value.table.th.color,
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: W.value,
-          fullscreenParent: I.value,
+          isFullscreen: Y.value,
+          fullscreenParent: P.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8)
         } : {
           hideDetails: !0,
@@ -813,95 +841,95 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         }
       };
     });
-    ae(() => _.value.showTable, (t) => {
-      e.value.table.show || (t && e.value.table.useDialog && ee.value ? ee.value.open() : "close" in ee.value && ee.value.close());
+    oe(() => _.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && Z.value ? Z.value.open() : "close" in Z.value && Z.value.close());
     });
     function mt() {
-      _.value.showTable = !1, me.value && me.value.setTableIconState(!1);
+      _.value.showTable = !1, ke.value && ke.value.setTableIconState(!1);
     }
-    const dl = k(() => e.value.style.chart.backgroundColor), cl = k(() => e.value.style.chart.legend), vl = k(() => e.value.style.chart.title), hl = k(() => re.value.flat().map((t) => ({
+    const vl = k(() => e.value.style.chart.backgroundColor), hl = k(() => e.value.style.chart.legend), fl = k(() => e.value.style.chart.title), bl = k(() => re.value.flat().map((t) => ({
       ...t,
       name: t.svgDisplay
-    }))), { exportSvg: fl, getSvg: bl } = Gl({
-      svg: te,
-      title: vl,
-      legend: cl,
-      legendItems: hl,
-      backgroundColor: dl
+    }))), { exportSvg: gl, getSvg: pl } = Xl({
+      svg: ee,
+      title: fl,
+      legend: hl,
+      legendItems: bl,
+      backgroundColor: vl
     });
     async function Ct({ isCb: t }) {
       if (t) {
-        const { blob: s, url: a, text: o, dataUrl: l } = await bl();
-        e.value.userOptions.callbacks.svg({ blob: s, url: a, text: o, dataUrl: l });
+        const { blob: s, url: l, text: o, dataUrl: a } = await pl();
+        e.value.userOptions.callbacks.svg({ blob: s, url: l, text: o, dataUrl: a });
       } else
-        fl();
+        gl();
     }
-    return Bt({
-      autoSize: il,
-      getData: ul,
-      getImage: rl,
-      generatePdf: nt,
-      generateCsv: _e,
-      generateImage: ut,
+    return Mt({
+      autoSize: dl,
+      getData: il,
+      getImage: cl,
+      generatePdf: ot,
+      generateCsv: Fe,
+      generateImage: st,
       generateSvg: Ct,
-      hideSeries: al,
-      showSeries: ll,
+      hideSeries: sl,
+      showSeries: ol,
       toggleTable: gt,
       toggleLabels: pt,
       toggleTooltip: yt,
       toggleAnnotator: xe,
-      toggleFullscreen: Je
+      toggleFullscreen: je
     }), (t, s) => (n(), r("div", {
       ref_key: "nestedDonutsChart",
-      ref: I,
-      class: M(`vue-data-ui-component vue-ui-nested-donuts ${W.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref: P,
+      class: H(`vue-data-ui-component vue-ui-nested-donuts ${Y.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: he(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
       id: `nested_donuts_${b.value}`,
-      onMouseenter: s[2] || (s[2] = () => i(Qe)(!0)),
-      onMouseleave: s[3] || (s[3] = () => i(Qe)(!1))
+      onMouseenter: s[2] || (s[2] = () => c(Ke)(!0)),
+      onMouseleave: s[3] || (s[3] = () => c(Ke)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (n(), U(i(Wt), {
+      e.value.userOptions.buttons.annotator ? (n(), z(c(Ht), {
         key: 0,
-        svgRef: i(te),
+        svgRef: c(ee),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: de.value,
+        active: ce.value,
         onClose: xe
       }, {
         "annotator-action-close": p(() => [
           y(t.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
-        "annotator-action-color": p(({ color: a }) => [
-          y(t.$slots, "annotator-action-color", O(N({ color: a })), void 0, !0)
+        "annotator-action-color": p(({ color: l }) => [
+          y(t.$slots, "annotator-action-color", S(O({ color: l })), void 0, !0)
         ]),
-        "annotator-action-draw": p(({ mode: a }) => [
-          y(t.$slots, "annotator-action-draw", O(N({ mode: a })), void 0, !0)
+        "annotator-action-draw": p(({ mode: l }) => [
+          y(t.$slots, "annotator-action-draw", S(O({ mode: l })), void 0, !0)
         ]),
-        "annotator-action-undo": p(({ disabled: a }) => [
-          y(t.$slots, "annotator-action-undo", O(N({ disabled: a })), void 0, !0)
+        "annotator-action-undo": p(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-undo", S(O({ disabled: l })), void 0, !0)
         ]),
-        "annotator-action-redo": p(({ disabled: a }) => [
-          y(t.$slots, "annotator-action-redo", O(N({ disabled: a })), void 0, !0)
+        "annotator-action-redo": p(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-redo", S(O({ disabled: l })), void 0, !0)
         ]),
-        "annotator-action-delete": p(({ disabled: a }) => [
-          y(t.$slots, "annotator-action-delete", O(N({ disabled: a })), void 0, !0)
+        "annotator-action-delete": p(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-delete", S(O({ disabled: l })), void 0, !0)
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active"])) : L("", !0),
-      Kt.value ? (n(), r("div", {
+      el.value ? (n(), r("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Xe,
+        ref: Ye,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : L("", !0),
       e.value.style.chart.title.text ? (n(), r("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: Ye
+        ref: Re
       }, [
-        (n(), U(Hl, {
-          key: `title_${qe.value}`,
+        (n(), z(Kl, {
+          key: `title_${We.value}`,
           config: {
             title: {
               cy: "donut-div-title",
@@ -916,15 +944,15 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       ], 512)) : L("", !0),
       g("div", {
         id: `legend-top-${b.value}`
-      }, null, 8, Kl),
-      e.value.userOptions.show && fe.value && (i(et) || i(we)) ? (n(), U(i(Yt), {
+      }, null, 8, ta),
+      e.value.userOptions.show && ge.value && (c(Qe) || c($e)) ? (n(), z(c(Xt), {
         ref_key: "userOptionsRef",
-        ref: me,
-        key: `user_option_${Ge.value}`,
+        ref: ke,
+        key: `user_option_${Ue.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: i(ot),
-        isImaging: i(st),
+        isPrinting: c(lt),
+        isImaging: c(at),
         uid: b.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -934,33 +962,33 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         hasTable: e.value.userOptions.buttons.table,
         hasLabel: e.value.userOptions.buttons.labels,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: W.value,
+        isFullscreen: Y.value,
         isTooltip: _.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: I.value,
+        chartElement: P.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: de.value,
+        isAnnotation: ce.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: Je,
-        onGeneratePdf: i(nt),
-        onGenerateCsv: _e,
-        onGenerateImage: i(ut),
+        onToggleFullscreen: je,
+        onGeneratePdf: c(ot),
+        onGenerateCsv: Fe,
+        onGenerateImage: c(st),
         onGenerateSvg: Ct,
         onToggleTable: gt,
         onToggleLabels: pt,
         onToggleTooltip: yt,
         onToggleAnnotator: xe,
         style: he({
-          visibility: i(et) ? i(we) ? "visible" : "hidden" : "visible"
+          visibility: c(Qe) ? c($e) ? "visible" : "hidden" : "visible"
         })
       }, wt({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: p(({ isOpen: a, color: o }) => [
-            y(t.$slots, "menuIcon", O(N({ isOpen: a, color: o })), void 0, !0)
+          fn: p(({ isOpen: l, color: o }) => [
+            y(t.$slots, "menuIcon", S(O({ isOpen: l, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -1015,37 +1043,37 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: p(({ toggleFullscreen: a, isFullscreen: o }) => [
-            y(t.$slots, "optionFullscreen", O(N({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+          fn: p(({ toggleFullscreen: l, isFullscreen: o }) => [
+            y(t.$slots, "optionFullscreen", S(O({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: p(({ toggleAnnotator: a, isAnnotator: o }) => [
-            y(t.$slots, "optionAnnotator", O(N({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
+          fn: p(({ toggleAnnotator: l, isAnnotator: o }) => [
+            y(t.$slots, "optionAnnotator", S(O({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
           ]),
           key: "9"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : L("", !0),
       (n(), r("svg", {
         ref_key: "svgRef",
-        ref: te,
-        xmlns: i(Ol),
-        class: M({
-          "vue-data-ui-fullscreen--on": W.value,
-          "vue-data-ui-fulscreen--off": !W.value,
+        ref: ee,
+        xmlns: c(Pl),
+        class: H({
+          "vue-data-ui-fullscreen--on": Y.value,
+          "vue-data-ui-fulscreen--off": !Y.value,
           "vue-data-ui-svg": !0
         }),
         viewBox: `0 0 ${h.value.width <= 0 ? 1e-3 : h.value.width} ${h.value.height < 0 ? 1e-3 : h.value.height}`,
-        style: he(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${tt.value.css}`)
+        style: he(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${Ze.value.css}`)
       }, [
         g("g", {
           ref_key: "G",
-          ref: Fe,
+          ref: Te,
           class: "vue-data-ui-g"
         }, [
-          Pe(i(Xt)),
+          Ie(c(qt)),
           t.$slots["chart-background"] ? (n(), r("foreignObject", {
             key: 0,
             x: 0,
@@ -1057,9 +1085,9 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             }
           }, [
             y(t.$slots, "chart-background", {}, void 0, !0)
-          ], 8, ea)) : L("", !0),
+          ], 8, aa)) : L("", !0),
           g("defs", null, [
-            (n(!0), r(x, null, F(ht.value, (a, o) => (n(), r("radialGradient", {
+            (n(!0), r(x, null, T(dt.value, (l, o) => (n(), r("radialGradient", {
               id: `radial_${b.value}_${o}`
             }, [
               s[4] || (s[4] = g("stop", {
@@ -1068,21 +1096,21 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 "stop-opacity": "0"
               }, null, -1)),
               g("stop", {
-                offset: `${(1 - se.value / vt.value[o]) * 100}%`,
-                "stop-color": i(Nl)("#FFFFFF", 0),
+                offset: `${(1 - se.value / ct.value[o]) * 100}%`,
+                "stop-color": c(Il)("#FFFFFF", 0),
                 "stop-opacity": "0"
-              }, null, 8, la),
+              }, null, 8, sa),
               g("stop", {
-                offset: `${(1 - se.value / vt.value[o] / 2) * 100}%`,
+                offset: `${(1 - se.value / ct.value[o] / 2) * 100}%`,
                 "stop-color": "#FFFFFF",
                 "stop-opacity": e.value.style.chart.gradientIntensity / 100
-              }, null, 8, aa),
+              }, null, 8, na),
               s[5] || (s[5] = g("stop", {
                 offset: "100%",
                 "stop-color": "#FFFFFF",
                 "stop-opacity": "0"
               }, null, -1))
-            ], 8, ta))), 256))
+            ], 8, oa))), 256))
           ]),
           g("defs", null, [
             g("filter", {
@@ -1096,12 +1124,12 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 in: "SourceGraphic",
                 stdDeviation: 2,
                 id: `blur_std_${b.value}`
-              }, null, 8, sa),
+              }, null, 8, ra),
               s[6] || (s[6] = g("feColorMatrix", {
                 type: "saturate",
                 values: "0"
               }, null, -1))
-            ], 8, oa),
+            ], 8, ua),
             g("filter", {
               id: `shadow_${b.value}`,
               "color-interpolation-filters": "sRGB"
@@ -1112,53 +1140,53 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 stdDeviation: "10",
                 "flood-opacity": "0.5",
                 "flood-color": e.value.style.chart.layout.donut.shadowColor
-              }, null, 8, ua)
-            ], 8, na)
+              }, null, 8, ca)
+            ], 8, ia)
           ]),
           g("defs", null, [
-            (n(!0), r(x, null, F(Z.value, (a, o) => (n(), r("path", {
+            (n(!0), r(x, null, T(J.value, (l, o) => (n(), r("path", {
               key: `path-full-${o}`,
               id: `path-full-${o}-${b.value}`,
-              d: a.fullCirclePath,
+              d: l.fullCirclePath,
               fill: "none"
-            }, null, 8, ra))), 128))
+            }, null, 8, da))), 128))
           ]),
-          (n(!0), r(x, null, F(Z.value, (a, o) => (n(), r("g", null, [
-            a.hasData ? (n(!0), r(x, { key: 0 }, F(a.donut.filter((l) => !l.ghost), (l, u) => (n(), r("g", null, [
+          (n(!0), r(x, null, T(J.value, (l, o) => (n(), r("g", null, [
+            l.hasData ? (n(!0), r(x, { key: 0 }, T(l.donut.filter((a) => !a.ghost), (a, u) => (n(), r("g", null, [
               g("path", {
                 class: "vue-ui-donut-arc-path",
-                d: l.arcSlice,
-                fill: l.color,
+                d: a.arcSlice,
+                fill: a.color,
                 stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-                filter: bt(l, u)
-              }, null, 8, ia)
-            ]))), 256)) : (n(!0), r(x, { key: 1 }, F(a.skeleton, (l, u) => (n(), r("g", null, [
+                filter: bt(a, u)
+              }, null, 8, va)
+            ]))), 256)) : (n(!0), r(x, { key: 1 }, T(l.skeleton, (a, u) => (n(), r("g", null, [
               g("path", {
                 class: "vue-ui-donut-arc-path",
-                d: l.arcSlice,
-                fill: l.color,
+                d: a.arcSlice,
+                fill: a.color,
                 stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth
-              }, null, 8, da)
+              }, null, 8, ha)
             ]))), 256))
           ]))), 256)),
-          e.value.style.chart.useGradient ? (n(), r("g", ca, [
-            (n(!0), r(x, null, F(ht.value, (a, o) => (n(), r("g", null, [
+          e.value.style.chart.useGradient ? (n(), r("g", fa, [
+            (n(!0), r(x, null, T(dt.value, (l, o) => (n(), r("g", null, [
               g("path", {
-                d: a.donut.arcSlice,
+                d: l.donut.arcSlice,
                 fill: `url(#radial_${b.value}_${o})`,
                 stroke: "transparent",
                 "stroke-width": "0"
-              }, null, 8, va)
+              }, null, 8, ba)
             ]))), 256))
           ])) : L("", !0),
-          e.value.style.chart.layout.labels.dataLabels.showDonutName ? (n(), r("g", ha, [
-            e.value.style.chart.layout.labels.dataLabels.curvedDonutName ? (n(!0), r(x, { key: 0 }, F(Z.value, (a, o) => (n(), r("g", null, [
-              (n(!0), r(x, null, F(a.donut, (l, u) => (n(), r("g", null, [
+          e.value.style.chart.layout.labels.dataLabels.showDonutName ? (n(), r("g", ga, [
+            e.value.style.chart.layout.labels.dataLabels.curvedDonutName ? (n(!0), r(x, { key: 0 }, T(J.value, (l, o) => (n(), r("g", null, [
+              (n(!0), r(x, null, T(l.donut, (a, u) => (n(), r("g", null, [
                 u === 0 && h.value.width && h.value.height ? (n(), r("text", {
                   key: 0,
-                  class: M({ animated: e.value.useCssAnimation }),
+                  class: H({ animated: e.value.useCssAnimation }),
                   "text-anchor": "middle",
                   "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
                   "font-weight": e.value.style.chart.layout.labels.dataLabels.boldDonutName ? "bold" : "normal",
@@ -1171,148 +1199,122 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                     "text-anchor": "middle",
                     method: "align",
                     spacing: "auto"
-                  }, P(e.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? i(xt)({
-                    source: a.name,
+                  }, M(e.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? c(Ft)({
+                    source: l.name,
                     length: e.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize
-                  }) : a.name), 9, ba)
-                ], 10, fa)) : L("", !0)
+                  }) : l.name), 9, ya)
+                ], 10, pa)) : L("", !0)
               ]))), 256))
-            ]))), 256)) : (n(!0), r(x, { key: 1 }, F(Z.value, (a, o) => (n(), r("g", null, [
-              (n(!0), r(x, null, F(a.donut, (l, u) => (n(), r("g", null, [
+            ]))), 256)) : (n(!0), r(x, { key: 1 }, T(J.value, (l, o) => (n(), r("g", null, [
+              (n(!0), r(x, null, T(l.donut, (a, u) => (n(), r("g", null, [
                 u === 0 && h.value.width && h.value.height ? (n(), r("text", {
                   key: 0,
-                  class: M({ animated: e.value.useCssAnimation }),
+                  class: H({ animated: e.value.useCssAnimation }),
                   x: h.value.width / 2,
-                  y: l.startY - e.value.style.chart.layout.labels.dataLabels.fontSize + e.value.style.chart.layout.labels.dataLabels.donutNameOffsetY,
+                  y: a.startY - e.value.style.chart.layout.labels.dataLabels.fontSize + e.value.style.chart.layout.labels.dataLabels.donutNameOffsetY,
                   "text-anchor": "middle",
                   "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
                   "font-weight": e.value.style.chart.layout.labels.dataLabels.boldDonutName ? "bold" : "normal",
                   fill: e.value.style.chart.layout.labels.dataLabels.color
-                }, P(e.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? i(xt)({
-                  source: a.name,
+                }, M(e.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? c(Ft)({
+                  source: l.name,
                   length: e.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize
-                }) : a.name), 11, ga)) : L("", !0)
+                }) : l.name), 11, ma)) : L("", !0)
               ]))), 256))
             ]))), 256))
           ])) : L("", !0),
-          e.value.style.chart.layout.labels.dataLabels.show ? (n(), r("g", pa, [
-            (n(!0), r(x, null, F(Z.value, (a, o) => (n(), r("g", null, [
-              (n(!0), r(x, null, F(a.donut.filter((l) => !l.ghost), (l, u) => (n(), r("g", {
-                filter: bt(l, u)
+          e.value.style.chart.layout.labels.dataLabels.show ? (n(), r("g", Ca, [
+            (n(!0), r(x, null, T(J.value, (l, o) => (n(), r("g", null, [
+              (n(!0), r(x, null, T(l.donut.filter((a) => !a.ghost), (a, u) => (n(), r("g", {
+                filter: bt(a, u)
               }, [
                 At(g("text", {
-                  class: M({ animated: e.value.useCssAnimation }),
-                  opacity: Le(l) ? 1 : 0,
-                  "text-anchor": i(K)(l, !0).anchor,
-                  x: i(K)(
-                    l,
+                  class: H({ animated: e.value.useCssAnimation }),
+                  opacity: ft(a) ? 1 : 0,
+                  "text-anchor": c(be)(a, !0).anchor,
+                  x: c(be)(
+                    a,
                     !1,
                     e.value.style.chart.layout.labels.dataLabels.offsetX
                   ).x || 0,
-                  y: i(Me)(
-                    l,
+                  y: c(xt)(
+                    a,
                     e.value.style.chart.layout.labels.dataLabels.offsetY,
                     e.value.style.chart.layout.labels.dataLabels.offsetY
-                  ),
-                  fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? l.color : e.value.style.chart.layout.labels.dataLabels.color,
+                  ) + (e.value.style.chart.layout.labels.dataLabels.showValueFirst && e.value.style.chart.layout.labels.dataLabels.showValue ? e.value.style.chart.layout.labels.dataLabels.fontSize : 0),
+                  fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? a.color : e.value.style.chart.layout.labels.dataLabels.color,
                   "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
                   "font-weight": e.value.style.chart.layout.labels.dataLabels.boldPercentage ? "bold" : "normal"
-                }, P(i(D)({
-                  v: l.proportion * 100,
-                  s: "%",
-                  r: e.value.style.chart.layout.labels.dataLabels.roundingPercentage
-                })), 11, ma), [
-                  [
-                    $t,
-                    _.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage
-                  ]
+                }, M(c(Tt)(
+                  c(N)({
+                    v: a.proportion * 100,
+                    s: "%",
+                    r: e.value.style.chart.layout.labels.dataLabels.roundingPercentage
+                  }),
+                  e.value.style.chart.layout.labels.dataLabels.usePercentageParens ? "(" : "",
+                  e.value.style.chart.layout.labels.dataLabels.usePercentageParens ? ")" : ""
+                )), 11, wa), [
+                  [$t, _.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage]
                 ]),
                 At(g("text", {
-                  class: M({ animated: e.value.useCssAnimation }),
-                  opacity: Le(l) ? 1 : 0,
-                  "text-anchor": i(K)(l, !0).anchor,
-                  x: i(K)(
-                    l,
+                  class: H({ animated: e.value.useCssAnimation }),
+                  opacity: ft(a) ? 1 : 0,
+                  "text-anchor": c(be)(a, !0).anchor,
+                  x: c(be)(
+                    a,
                     !1,
                     e.value.style.chart.layout.labels.dataLabels.offsetX
                   ).x || 0,
-                  y: i(Me)(
-                    l,
+                  y: c(xt)(
+                    a,
                     e.value.style.chart.layout.labels.dataLabels.offsetY,
                     e.value.style.chart.layout.labels.dataLabels.offsetY
-                  ) + e.value.style.chart.layout.labels.dataLabels.fontSize,
-                  fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? l.color : e.value.style.chart.layout.labels.dataLabels.color,
+                  ) + (e.value.style.chart.layout.labels.dataLabels.showValueFirst || !e.value.style.chart.layout.labels.dataLabels.showPercentage ? 0 : e.value.style.chart.layout.labels.dataLabels.fontSize),
+                  fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? a.color : e.value.style.chart.layout.labels.dataLabels.color,
                   "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
                   "font-weight": e.value.style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
-                }, " (" + P(i(oe)(
-                  e.value.style.chart.layout.labels.dataLabels.formatter,
-                  l.value,
-                  i(D)({
-                    p: e.value.style.chart.layout.labels.dataLabels.prefix,
-                    v: l.value,
-                    s: e.value.style.chart.layout.labels.dataLabels.suffix,
-                    r: e.value.style.chart.layout.labels.dataLabels.roundingValue
-                  }),
-                  { datapoint: l, seriesIndex: o, datapointIndex: u }
-                )) + ") ", 11, Ca), [
-                  [
-                    $t,
-                    _.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage && e.value.style.chart.layout.labels.dataLabels.showValue
-                  ]
-                ]),
-                Le(l) && _.value.dataLabels.show && !e.value.style.chart.layout.labels.dataLabels.showPercentage && e.value.style.chart.layout.labels.dataLabels.showValue ? (n(), r("text", {
-                  key: 0,
-                  class: M({ animated: e.value.useCssAnimation }),
-                  "text-anchor": i(K)(l, !0).anchor,
-                  x: i(K)(
-                    l,
-                    !1,
-                    e.value.style.chart.layout.labels.dataLabels.offsetX
-                  ).x || 0,
-                  y: i(Me)(
-                    l,
-                    e.value.style.chart.layout.labels.dataLabels.offsetY,
-                    e.value.style.chart.layout.labels.dataLabels.offsetY
+                }, M(c(Tt)(
+                  c(fe)(
+                    e.value.style.chart.layout.labels.dataLabels.formatter,
+                    a.value,
+                    c(N)({
+                      p: e.value.style.chart.layout.labels.dataLabels.prefix,
+                      v: a.value,
+                      s: e.value.style.chart.layout.labels.dataLabels.suffix,
+                      r: e.value.style.chart.layout.labels.dataLabels.roundingValue
+                    }),
+                    { datapoint: a, seriesIndex: o, datapointIndex: u }
                   ),
-                  fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? l.color : e.value.style.chart.layout.labels.dataLabels.color,
-                  "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
-                  "font-weight": e.value.style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
-                }, P(i(oe)(
-                  e.value.style.chart.layout.labels.dataLabels.formatter,
-                  l.value,
-                  i(D)({
-                    p: e.value.style.chart.layout.labels.dataLabels.prefix,
-                    v: l.value,
-                    s: e.value.style.chart.layout.labels.dataLabels.suffix,
-                    r: e.value.style.chart.layout.labels.dataLabels.roundingValue
-                  }),
-                  { datapoint: l, seriesIndex: o, datapointIndex: u }
-                )), 11, ka)) : L("", !0)
-              ], 8, ya))), 256))
+                  e.value.style.chart.layout.labels.dataLabels.useValueParens ? "(" : "",
+                  e.value.style.chart.layout.labels.dataLabels.useValueParens ? ")" : ""
+                )), 11, Aa), [
+                  [$t, _.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showValue]
+                ])
+              ], 8, ka))), 256))
             ]))), 256))
           ])) : L("", !0),
-          (n(!0), r(x, null, F(Z.value, (a, o) => (n(), r("g", null, [
-            (n(!0), r(x, null, F(a.donut, (l, u) => (n(), r("g", null, [
+          (n(!0), r(x, null, T(J.value, (l, o) => (n(), r("g", null, [
+            (n(!0), r(x, null, T(l.donut, (a, u) => (n(), r("g", null, [
               g("path", {
-                d: l.arcSlice,
-                fill: pe.value === l.id ? e.value.style.chart.layout.donut.selectedColor : "transparent",
-                onMouseenter: (c) => sl({
-                  datapoint: l,
-                  seriesIndex: l.seriesIndex
+                d: a.arcSlice,
+                fill: me.value === a.id ? e.value.style.chart.layout.donut.selectedColor : "transparent",
+                onMouseenter: (d) => ul({
+                  datapoint: a,
+                  seriesIndex: a.seriesIndex
                 }),
-                onClick: (c) => el({ datapoint: l, index: u, seriesIndex: l.seriesIndex }),
-                onMouseleave: (c) => ol({ datapoint: l, seriesIndex: l.seriesIndex })
-              }, null, 40, wa)
+                onClick: (d) => ll({ datapoint: a, index: u, seriesIndex: a.seriesIndex }),
+                onMouseleave: (d) => nl({ datapoint: a, seriesIndex: a.seriesIndex })
+              }, null, 40, $a)
             ]))), 256))
           ]))), 256)),
           y(t.$slots, "svg", { svg: h.value }, void 0, !0)
         ], 512)
-      ], 14, Ql)),
-      t.$slots.watermark ? (n(), r("div", Aa, [
-        y(t.$slots, "watermark", O(N({ isPrinting: i(ot) || i(st) })), void 0, !0)
+      ], 14, la)),
+      t.$slots.watermark ? (n(), r("div", La, [
+        y(t.$slots, "watermark", S(O({ isPrinting: c(lt) || c(at) })), void 0, !0)
       ])) : L("", !0),
-      Pe(i(Mt), {
-        show: _.value.showTooltip && be.value,
+      Ie(c(Rt), {
+        show: _.value.showTooltip && pe.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -1322,50 +1324,50 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: I.value,
-        content: ge.value,
-        isFullscreen: W.value,
-        isCustom: i(Ft)(e.value.style.chart.tooltip.customFormat),
+        parent: P.value,
+        content: ye.value,
+        isFullscreen: Y.value,
+        isCustom: c(Dt)(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": p(() => [
-          y(t.$slots, "tooltip-before", O(N({ ...$e.value })), void 0, !0)
+          y(t.$slots, "tooltip-before", S(O({ ..._e.value })), void 0, !0)
         ]),
         "tooltip-after": p(() => [
-          y(t.$slots, "tooltip-after", O(N({ ...$e.value })), void 0, !0)
+          y(t.$slots, "tooltip-after", S(O({ ..._e.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
       g("div", {
         id: `legend-bottom-${b.value}`
-      }, null, 8, $a),
-      Ze.value ? (n(), U(Al, {
+      }, null, 8, _a),
+      qe.value ? (n(), z(Ll, {
         key: 5,
         to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
       }, [
         e.value.style.chart.legend.show ? (n(), r("div", {
           key: 0,
           ref_key: "chartLegend",
-          ref: ye,
-          class: M({ "vue-ui-nested-donuts-legend": re.value.length > 1 })
+          ref: Ce,
+          class: H({ "vue-ui-nested-donuts-legend": re.value.length > 1 })
         }, [
-          (n(!0), r(x, null, F(re.value, (a, o) => (n(), U(jl, {
-            key: `legend_${o}_${je.value}`,
-            legendSet: a,
-            config: nl.value,
-            onClickMarker: s[0] || (s[0] = ({ legend: l }) => q(l))
+          (n(!0), r(x, null, T(re.value, (l, o) => (n(), z(Ql, {
+            key: `legend_${o}_${He.value}`,
+            legendSet: l,
+            config: rl.value,
+            onClickMarker: s[0] || (s[0] = ({ legend: a }) => X(a))
           }, {
-            legendTitle: p(({ titleSet: l }) => [
-              l[0] && l[0].arcOf ? (n(), r("div", La, P(l[0].arcOf), 1)) : L("", !0)
+            legendTitle: p(({ titleSet: a }) => [
+              a[0] && a[0].arcOf ? (n(), r("div", Fa, M(a[0].arcOf), 1)) : L("", !0)
             ]),
-            item: p(({ legend: l, index: u }) => [
+            item: p(({ legend: a, index: u }) => [
               g("div", {
-                onClick: (c) => q(l),
-                style: he(`opacity:${C.value.includes(l.id) ? 0.5 : 1}`)
-              }, P(l.display), 13, _a)
+                onClick: (d) => X(a),
+                style: he(`opacity:${m.value.includes(a.id) ? 0.5 : 1}`)
+              }, M(a.display), 13, xa)
             ]),
             _: 1
           }, 8, ["legendSet", "config"]))), 128))
@@ -1374,42 +1376,42 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       e.value.style.chart.legend.show ? L("", !0) : (n(), r("div", {
         key: 6,
         ref_key: "chartLegend",
-        ref: ye
+        ref: Ce
       }, [
         y(t.$slots, "legend", { legend: re.value }, void 0, !0)
       ], 512)),
       t.$slots.source ? (n(), r("div", {
         key: 7,
         ref_key: "source",
-        ref: We,
+        ref: Ge,
         dir: "auto"
       }, [
         y(t.$slots, "source", {}, void 0, !0)
       ], 512)) : L("", !0),
-      fe.value && e.value.userOptions.buttons.table ? (n(), U($l(le.value.component), Ll({ key: 8 }, le.value.props, {
+      ge.value && e.value.userOptions.buttons.table ? (n(), z(_l(te.value.component), Fl({ key: 8 }, te.value.props, {
         ref_key: "tableUnit",
-        ref: ee,
+        ref: Z,
         onClose: mt
       }), wt({
         content: p(() => [
-          (n(), U(i(Gt), {
-            key: `table_${He.value}`,
+          (n(), z(c(Wt), {
+            key: `table_${Xe.value}`,
             colNames: ie.value.colNames,
             head: ie.value.head,
             body: ie.value.body,
             config: ie.value.config,
-            title: e.value.table.useDialog ? "" : le.value.title,
+            title: e.value.table.useDialog ? "" : te.value.title,
             withCloseButton: !e.value.table.useDialog,
             onClose: mt
           }, {
-            th: p(({ th: a }) => [
+            th: p(({ th: l }) => [
               g("div", {
-                innerHTML: a,
+                innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, xa)
+              }, null, 8, Ta)
             ]),
-            td: p(({ td: a }) => [
-              Lt(P(a.name || a), 1)
+            td: p(({ td: l }) => [
+              Lt(M(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -1419,7 +1421,7 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         e.value.table.useDialog ? {
           name: "title",
           fn: p(() => [
-            Lt(P(le.value.title), 1)
+            Lt(M(te.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -1429,26 +1431,26 @@ const St = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             g("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: s[1] || (s[1] = (a) => _e(e.value.userOptions.callbacks.csv))
+              onClick: s[1] || (s[1] = (l) => Fe(e.value.userOptions.callbacks.csv))
             }, [
-              Pe(i(Ut), {
+              Ie(c(Gt), {
                 name: "excel",
-                stroke: le.value.props.color
+                stroke: te.value.props.color
               }, null, 8, ["stroke"])
             ])
           ]),
           key: "1"
         } : void 0
       ]), 1040)) : L("", !0),
-      i(Ce) ? (n(), U(Ul, { key: 9 })) : L("", !0)
-    ], 46, Jl));
+      c(we) ? (n(), z(Yl, { key: 9 })) : L("", !0)
+    ], 46, ea));
   }
-}, Ta = /* @__PURE__ */ Zl(Fa, [["__scopeId", "data-v-1468fc43"]]), Wa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Sa = /* @__PURE__ */ Zl(Da, [["__scopeId", "data-v-69e76543"]]), qa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Ta
+  default: Sa
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  Ya as a,
-  Wa as b,
-  Ta as v
+  Ha as a,
+  qa as b,
+  Sa as v
 };