vue-data-ui 3.9.1 → 3.9.3

package/dist/{vue-ui-donut-CbHumHFw.js → vue-ui-donut-C5YmHwzL.js}

@@ -1,16 +1,16 @@
-import { defineAsyncComponent as pe, useSlots as ua, computed as f, shallowRef as be, ref as w, onMounted as el, onBeforeUnmount as tl, toRefs as ra, watch as Pe, createElementBlock as i, openBlock as s, normalizeStyle as M, normalizeClass as ft, createBlock as me, createCommentVNode as d, renderSlot as p, createElementVNode as y, createVNode as qe, unref as r, withCtx as C, normalizeProps as Z, guardReactiveProps as ee, createSlots as yt, Fragment as A, renderList as H, mergeProps as gt, toDisplayString as oe, withDirectives as Qe, vShow as Je, Teleport as ia, resolveDynamicComponent as ca, createTextVNode as ll, nextTick as va } from "vue";
-import { o as al, g as pt, k as da, c as ha, t as fa, j as ya, T as ga, l as ol, p as _e, a as q, d as G, a2 as nl, a6 as pa, a7 as ba, a5 as x, a4 as ie, X as ma, s as Ke, h as wa, a3 as ka, a8 as L, a9 as sl, f as Ca, i as xa, a0 as bt, u as $a, q as Aa, x as _a, aa as ul } from "./lib-_nVZfi2t.js";
+import { defineAsyncComponent as pe, useSlots as ua, computed as f, shallowRef as me, ref as w, onMounted as el, onBeforeUnmount as tl, toRefs as ra, watch as Pe, createElementBlock as i, openBlock as s, normalizeStyle as M, normalizeClass as ft, createBlock as we, createCommentVNode as d, renderSlot as b, createElementVNode as y, createVNode as qe, unref as r, withCtx as C, normalizeProps as Z, guardReactiveProps as ee, createSlots as yt, Fragment as A, renderList as H, mergeProps as gt, toDisplayString as ne, withDirectives as Qe, vShow as Je, Teleport as ia, resolveDynamicComponent as ca, createTextVNode as ll, nextTick as va } from "vue";
+import { o as al, g as bt, k as da, c as ha, t as fa, j as ya, T as ga, l as ol, p as _e, a as q, d as G, a2 as nl, a6 as ba, a7 as pa, a5 as x, a4 as ce, X as ma, s as Ke, h as wa, a3 as ka, a8 as L, a9 as sl, f as Ca, i as xa, a0 as pt, u as $a, q as Aa, x as _a, aa as ul } from "./lib-_nVZfi2t.js";
 import { t as Ta, u as Sa } from "./useResponsive-DfdjqQps.js";
-import { u as Ma, a as mt } from "./useNestedProp-BeKjhKny.js";
+import { u as Ma, a as mt } from "./useNestedProp-DjZhR3_5.js";
 import { u as Pa } from "./usePrinter-DXIMGR61.js";
 import { u as Fa, B as La } from "./BaseScanner-BMpwQAfz.js";
 import { u as Ia } from "./useSvgExport-DrjCWun4.js";
-import { u as Da } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as Ya } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Ya } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as Da } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as za } from "./useChartAccessibility-9icAAmYg.js";
 import Ba from "./img-C5q4A7ke.js";
 import { _ as Xa } from "./Shape-BuBasQnO.js";
-import Oa from "./Title-osQjQYc-.js";
+import Oa from "./Title-Bf2WqM40.js";
 import Ea from "./Legend-PhhPyrZ0.js";
 import { _ as Na } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { labels: { percentage: { color: "#CCCCCC" }, name: { color: "#CCCCCC" }, hollow: { total: { color: "#CCCCCC", value: { color: "#CCCCCC" } }, average: { color: "#CCCCCC", value: { 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" } } }, il = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { labels: { percentage: { color: "#424242" }, name: { color: "#424242" }, hollow: { total: { color: "#424242", value: { color: "#424242" } }, average: { color: "#424242", value: { 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" } } }, cl = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { labels: { percentage: { color: "#BDBDBD" }, name: { color: "#BDBDBD" }, hollow: { total: { color: "#BDBDBD", value: { color: "#BDBDBD" } }, average: { color: "#BDBDBD", value: { 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" } } }, vl = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { labels: { percentage: { color: "#61747E" }, name: { color: "#8A9892" }, hollow: { total: { color: "#8A9892", value: { color: "#61747E" } }, average: { color: "#8A9892", value: { 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" } } }, dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { labels: { percentage: { color: "#AACCAA" }, name: { color: "#99CC99" }, hollow: { total: { color: "#99CC99", value: { color: "#AACCAA" } }, average: { color: "#99CC99", value: { 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" } } }, hl = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { labels: { percentage: { color: "#A0AC94" }, name: { color: "#8A9892" }, hollow: { total: { color: "#8A9892", value: { color: "#A0AC94" } }, average: { color: "#8A9892", value: { 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" } } }, fl = {
@@ -30,7 +30,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
   default: fl,
   hack: dl,
   zen: hl
-}, Symbol.toStringTag, { value: "Module" })), Va = ["id"], Ra = ["id"], Ha = ["xmlns", "viewBox"], Ga = ["width", "height"], Ua = { key: 1 }, ja = ["id"], Wa = ["stop-color"], qa = ["offset", "stop-color"], Qa = ["offset", "stop-color"], Ja = ["stop-color"], Ka = { key: 2 }, Za = ["id", "cx", "cy"], eo = ["stop-color", "stop-opacity"], to = ["stop-color"], lo = ["id"], ao = ["id"], oo = ["id"], no = ["flood-color"], so = ["id"], uo = ["flood-color"], ro = ["d", "stroke", "filter"], io = ["d", "stroke", "filter"], co = ["cx", "cy", "r", "fill", "filter"], vo = { key: 6 }, ho = ["stroke", "d"], fo = ["d", "fill", "stroke", "stroke-width", "filter"], yo = { key: 0 }, go = ["d", "fill", "stroke", "stroke-width", "filter"], po = { key: 0 }, bo = ["stroke", "d"], mo = { key: 0 }, wo = ["d", "stroke", "stroke-width", "filter"], ko = { key: 1 }, Co = ["d", "fill", "stroke", "stroke-width", "filter"], xo = ["d", "fill", "stroke", "stroke-width", "filter"], $o = { key: 1 }, Ao = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], _o = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], To = { key: 0 }, So = ["d", "fill", "stroke", "stroke-width"], Mo = ["cx", "cy", "r", "stroke"], Po = ["cx", "cy", "r", "fill"], Fo = ["cx", "cy", "r"], Lo = { key: 0 }, Io = ["d", "stroke", "fill", "onMouseenter", "onMouseleave", "onClick"], Do = { key: 1 }, Yo = ["cx", "cy", "r"], zo = ["x", "y", "fill", "font-size"], Bo = ["x", "y", "fill", "font-size"], Xo = ["x", "y", "fill", "font-size"], Oo = ["x", "y", "fill", "font-size"], Eo = ["filter", "opacity"], No = { key: 0 }, Vo = ["x", "y"], Ro = { key: 1 }, Ho = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], Go = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Uo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], jo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Wo = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], qo = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Qo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], Jo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Ko = { key: 2 }, Zo = ["x", "y", "width"], en = ["x", "y", "width"], tn = {
+}, Symbol.toStringTag, { value: "Module" })), Va = ["id"], Ra = ["id"], Ha = ["xmlns", "viewBox"], Ga = ["width", "height"], Ua = { key: 1 }, ja = ["id"], Wa = ["stop-color"], qa = ["offset", "stop-color"], Qa = ["offset", "stop-color"], Ja = ["stop-color"], Ka = { key: 2 }, Za = ["id", "cx", "cy"], eo = ["stop-color", "stop-opacity"], to = ["stop-color"], lo = ["id"], ao = ["id"], oo = ["id"], no = ["flood-color"], so = ["id"], uo = ["flood-color"], ro = ["d", "stroke", "filter"], io = ["d", "stroke", "filter"], co = ["cx", "cy", "r", "fill", "filter"], vo = { key: 6 }, ho = ["stroke", "d"], fo = ["d", "fill", "stroke", "stroke-width", "filter"], yo = { key: 0 }, go = ["d", "fill", "stroke", "stroke-width", "filter"], bo = { key: 0 }, po = ["stroke", "d"], mo = { key: 0 }, wo = ["d", "stroke", "stroke-width", "filter"], ko = { key: 1 }, Co = ["d", "fill", "stroke", "stroke-width", "filter"], xo = ["d", "fill", "stroke", "stroke-width", "filter"], $o = { key: 1 }, Ao = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], _o = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], To = { key: 0 }, So = ["d", "fill", "stroke", "stroke-width"], Mo = ["cx", "cy", "r", "stroke"], Po = ["cx", "cy", "r", "fill"], Fo = ["cx", "cy", "r"], Lo = { key: 0 }, Io = ["d", "stroke", "fill", "onMouseenter", "onMouseleave", "onClick"], Yo = { key: 1 }, Do = ["cx", "cy", "r"], zo = ["x", "y", "fill", "font-size"], Bo = ["x", "y", "fill", "font-size"], Xo = ["x", "y", "fill", "font-size"], Oo = ["x", "y", "fill", "font-size"], Eo = ["filter", "opacity"], No = { key: 0 }, Vo = ["x", "y"], Ro = { key: 1 }, Ho = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], Go = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Uo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], jo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Wo = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], qo = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Qo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], Jo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Ko = { key: 2 }, Zo = ["x", "y", "width"], en = ["x", "y", "width"], tn = {
   key: 4,
   class: "vue-data-ui-watermark"
 }, ln = ["id"], an = ["onClick"], on = {
@@ -54,25 +54,25 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
   },
   emits: ["selectLegend", "selectDatapoint"],
   setup(wt, { expose: yl, emit: gl }) {
-    const pl = pe(() => import("./Tooltip-l2pmtXwi.js")), bl = pe(() => import("./BaseIcon-CQaciFyv.js")), ml = pe(() => import("./vue-ui-accordion-nCaoOi6x.js")), wl = pe(() => import("./DataTable-C8cgUUyx.js")), kl = pe(() => import("./PenAndPaper-DtbXViIl.js")), Cl = pe(() => import("./UserOptions-DeiXBImO.js")), xl = pe(() => import("./PackageVersion-CIhhY-aH.js")), $l = pe(() => import("./BaseDraggableDialog-B6wHUQPl.js")), { vue_ui_donut: Al } = Ma(), { isThemeValid: _l, warnInvalidTheme: Tl } = Da(), Sl = ua(), _ = wt, Oe = f({
+    const bl = pe(() => import("./Tooltip-l2pmtXwi.js")), pl = pe(() => import("./BaseIcon-Bcm8I1fZ.js")), ml = pe(() => import("./vue-ui-accordion-BbkkniuF.js")), wl = pe(() => import("./DataTable-DFcqksx2.js")), kl = pe(() => import("./PenAndPaper-Cjiyv0O9.js")), Cl = pe(() => import("./UserOptions-DKK-Opvk.js")), xl = pe(() => import("./PackageVersion-Cx3U3jgV.js")), $l = pe(() => import("./BaseDraggableDialog-n3raFtf2.js")), { vue_ui_donut: Al } = Ma(), { isThemeValid: _l, warnInvalidTheme: Tl } = Ya(), Sl = ua(), _ = wt, Oe = f({
       get() {
         return !!_.dataset && _.dataset.length;
       },
       set(l) {
         return l;
       }
-    }), te = be(null), Ee = w(null), Ml = w(null), Pl = w(null), kt = be(null), Ct = be(null), ce = be(null), Te = be(null), xt = be(null), $t = be(null), At = w(0), _t = w(0), Tt = w(0), St = w(!1), Fe = w(null), Ze = w(null), Se = f({
+    }), te = me(null), Ee = w(null), Ml = w(null), Pl = w(null), kt = me(null), Ct = me(null), ve = me(null), Te = me(null), xt = me(null), $t = me(null), At = w(0), _t = w(0), Tt = w(0), St = w(!1), Fe = w(null), Ze = w(null), Se = f({
       get: () => e.value.style.chart.layout.labels.percentage.fontSize,
       set: (l) => l
     }), E = f({
       get: () => e.value.style.chart.layout.labels.name.fontSize,
       set: (l) => l
-    }), we = f({
+    }), le = f({
       get: () => e.value.style.chart.layout.labels.dataLabels.smallArcClusterFontSize,
       set: (l) => l
     });
     let et = !1;
-    const ve = () => {
+    const de = () => {
       !e.value.autoSize || et || (et = !0, requestAnimationFrame(() => {
         et = !1;
         const l = e.value, o = Ee.value, t = ke.value;
@@ -94,26 +94,26 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             selector: ".vue-data-ui-datalabel-inline",
             baseSize: l.style.chart.layout.labels.dataLabels.smallArcClusterFontSize,
             minSize: l.style.chart.layout.labels.name.minFontSize,
-            sizeRef: we
+            sizeRef: le
           }
         ];
-        S.map((P) => o.querySelectorAll(P.selector).length).reduce((P, X) => P + X, 0) !== 0 && S.forEach(({ selector: P, baseSize: X, minSize: ye, sizeRef: ge }) => {
+        S.map((P) => o.querySelectorAll(P.selector).length).reduce((P, X) => P + X, 0) !== 0 && S.forEach(({ selector: P, baseSize: X, minSize: ge, sizeRef: be }) => {
           o.querySelectorAll(P).forEach((dt) => {
             const Xe = Ca({
               el: dt,
               bounds: $,
               currentFontSize: X,
-              minFontSize: ye,
+              minFontSize: ge,
               attempts: 200,
               padding: 1
             });
-            ge.value = Xe;
+            be.value = Xe;
           });
         });
       }));
     };
     el(async () => {
-      St.value = !0, Mt(), requestAnimationFrame(ve);
+      St.value = !0, Mt(), requestAnimationFrame(de);
     });
     let tt;
     el(() => {
@@ -121,7 +121,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         for (const o of l) {
           const { width: t, height: a } = o.contentRect;
           if (t > 0 && a > 0) {
-            ve();
+            de();
             break;
           }
         }
@@ -129,11 +129,11 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     }), tl(() => {
       tt?.disconnect();
     }), tl(() => {
-      ce.value && (Te.value && ce.value.unobserve(Te.value), ce.value.disconnect());
+      ve.value && (Te.value && ve.value.unobserve(Te.value), ve.value.disconnect());
     });
     const lt = f(() => !!e.value.debug);
     function Mt() {
-      if (al(_.dataset) ? (pt({
+      if (al(_.dataset) ? (bt({
         componentName: "VueUiDonut",
         type: "dataset",
         debug: lt.value
@@ -142,7 +142,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           datasetObject: l,
           requiredAttributes: ["name", "values"]
         }).forEach((t) => {
-          pt({
+          bt({
             componentName: "VueUiDonut",
             type: "datasetSerieAttribute",
             property: t,
@@ -151,7 +151,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }), Oe.value = !1, Ve.value = !0;
         });
       }), _.dataset.forEach((l, o) => {
-        (!l.name || l.name === "") && pt({
+        (!l.name || l.name === "") && bt({
           componentName: "VueUiDonut",
           type: "datasetAttributeEmpty",
           property: "name",
@@ -169,13 +169,13 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             padding: e.value.autoSize ? void 0 : Re.value
           });
           requestAnimationFrame(() => {
-            n.value.width = o, n.value.height = t, ve();
+            n.value.width = o, n.value.height = t, de();
           });
         });
-        ce.value && (Te.value && ce.value.unobserve(Te.value), ce.value.disconnect()), ce.value = new ResizeObserver(l), Te.value = te.value.parentNode, ce.value.observe(Te.value);
+        ve.value && (Te.value && ve.value.unobserve(Te.value), ve.value.disconnect()), ve.value = new ResizeObserver(l), Te.value = te.value.parentNode, ve.value.observe(Te.value);
       }
     }
-    const k = w(ha()), at = w(!1), ot = w(""), le = w(null), Pt = w(0);
+    const k = w(ha()), at = w(!1), ot = w(""), ae = w(null), Pt = w(0);
     function nt() {
       const l = mt({
         userConfig: _.config,
@@ -200,7 +200,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           customPalette: l.customPalette.length ? l.customPalette : xa[t] || _e
         };
       }
-      return _.config && bt(_.config, "events.datapointEnter") ? o.events.datapointEnter = _.config.events.datapointEnter : o.events.datapointEnter = null, _.config && bt(_.config, "events.datapointLeave") ? o.events.datapointLeave = _.config.events.datapointLeave : o.events.datapointLeave = null, _.config && bt(_.config, "events.datapointClick") ? o.events.datapointClick = _.config.events.datapointClick : o.events.datapointClick = null, o;
+      return _.config && pt(_.config, "events.datapointEnter") ? o.events.datapointEnter = _.config.events.datapointEnter : o.events.datapointEnter = null, _.config && pt(_.config, "events.datapointLeave") ? o.events.datapointLeave = _.config.events.datapointLeave : o.events.datapointLeave = null, _.config && pt(_.config, "events.datapointClick") ? o.events.datapointClick = _.config.events.datapointClick : o.events.datapointClick = null, o;
     }
     const e = w(nt()), { loading: Ne, FINAL_DATASET: Le, manualLoading: Ve, skeletonDataset: Fl } = Fa({
       ...ra(_),
@@ -261,7 +261,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         }
       })
     }), B = w(!0), Ie = w(0), Ft = w(!1);
-    let De = null;
+    let Ye = null;
     function Ll(l = 1e3) {
       return new Promise((o) => {
         const t = performance.now();
@@ -270,9 +270,9 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             c / l,
             1
           ), $ = ul(g);
-          Ie.value = $, g < 1 ? De = requestAnimationFrame(a) : (Ie.value = 1, De = null, o());
+          Ie.value = $, g < 1 ? Ye = requestAnimationFrame(a) : (Ie.value = 1, Ye = null, o());
         }
-        De !== null && cancelAnimationFrame(De), Ie.value = 0, De = requestAnimationFrame(a);
+        Ye !== null && cancelAnimationFrame(Ye), Ie.value = 0, Ye = requestAnimationFrame(a);
       });
     }
     Pe(
@@ -291,11 +291,11 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       },
       { immediate: !0 }
     );
-    const { userOptionsVisible: st, setUserOptionsVisibility: Lt, keepUserOptionState: It } = Ya({ config: e.value }), { svgRef: ke } = za({ config: e.value.style.chart.title });
+    const { userOptionsVisible: st, setUserOptionsVisibility: Lt, keepUserOptionState: It } = Da({ config: e.value }), { svgRef: ke } = za({ config: e.value.style.chart.title });
     function Il() {
       Lt(!0);
     }
-    function Dl() {
+    function Yl() {
       Lt(!1);
     }
     Pe(() => _.config, (l) => {
@@ -310,11 +310,11 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         bottom: t,
         left: a
       };
-    }), { isPrinting: Dt, isImaging: Yt, generatePdf: zt, generateImage: Bt } = Pa({
+    }), { isPrinting: Yt, isImaging: Dt, generatePdf: zt, generateImage: Bt } = Pa({
       elementId: `donut__${k.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-donut",
       options: e.value.userOptions.print
-    }), Yl = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), Xt = f(() => ya(e.value.customPalette)), m = w({
+    }), Dl = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), Xt = f(() => ya(e.value.customPalette)), m = w({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
@@ -355,9 +355,9 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     Pe(() => _.dataset, (l) => {
       Array.isArray(l) && l.length > 0 && (Ve.value = !1);
     }, { immediate: !0 });
-    const Q = be(U.value);
+    const Q = me(U.value);
     Pe(() => U.value, (l) => {
-      Q.value = l, requestAnimationFrame(ve);
+      Q.value = l, requestAnimationFrame(de);
     });
     function zl() {
       return U.value.map((l) => ({
@@ -366,12 +366,12 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         value: l.value
       }));
     }
-    const j = w([]), de = w(!1), xe = w(null);
+    const j = w([]), he = w(!1), xe = w(null);
     function Et({ from: l, to: o, duration: t, onUpdate: a, onDone: u, easing: c = ul }) {
       const g = performance.now();
       function $(S) {
-        const D = Math.min((S - g) / t, 1), P = c(D), X = l + (o - l) * P;
-        a(X, D), D < 1 ? requestAnimationFrame($) : (a(o, 1), u && u());
+        const Y = Math.min((S - g) / t, 1), P = c(Y), X = l + (o - l) * P;
+        a(X, Y), Y < 1 ? requestAnimationFrame($) : (a(o, 1), u && u());
       }
       requestAnimationFrame($);
     }
@@ -384,46 +384,46 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             ($, S) => l === S ? { ...$, value: u } : $
           );
         }, g = function() {
-          de.value = !0, xe.value = l, Et({
+          he.value = !0, xe.value = l, Et({
             from: a,
             to: u,
             duration: e.value.serieToggleAnimation.durationMs,
             onUpdate: ($, S) => {
               Q.value = Q.value.map(
-                (D, P) => l === P ? { ...D, value: $ } : D
-              ), requestAnimationFrame(ve);
+                (Y, P) => l === P ? { ...Y, value: $ } : Y
+              ), requestAnimationFrame(de);
             },
             onDone: () => {
-              c(), de.value = !1, xe.value = null;
+              c(), he.value = !1, xe.value = null;
             }
           });
         };
         j.value = j.value.filter(($) => $ !== l);
         const u = o.value;
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? g() : (c(), requestAnimationFrame(ve));
+        e.value.serieToggleAnimation.show && e.value.type === "classic" ? g() : (c(), requestAnimationFrame(de));
       } else if (j.value.length < U.value.length - 1) {
         let u = function() {
           j.value.push(l), Q.value = Q.value.map(
             (g, $) => l === $ ? { ...g, value: 0 } : g
           );
         }, c = function() {
-          de.value = !0, xe.value = l, Et({
+          he.value = !0, xe.value = l, Et({
             from: a,
             to: 0,
             duration: e.value.serieToggleAnimation.durationMs,
             onUpdate: (g, $) => {
               Q.value = Q.value.map(
-                (S, D) => l === D ? { ...S, value: g } : S
-              ), requestAnimationFrame(ve);
+                (S, Y) => l === Y ? { ...S, value: g } : S
+              ), requestAnimationFrame(de);
             },
             onDone: () => {
-              u(), requestAnimationFrame(ve), de.value = !1, xe.value = null;
+              u(), requestAnimationFrame(de), he.value = !1, xe.value = null;
             }
           });
         };
         e.value.serieToggleAnimation.show && e.value.type === "classic" ? c() : u();
       }
-      Ot("selectLegend", re.value.map((u) => ({
+      Ot("selectLegend", ie.value.map((u) => ({
         name: u.name,
         color: u.color,
         value: u.value
@@ -448,7 +448,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         (l, o) => l + o.values.reduce((t, a) => t + a, 0),
         0
       )
-    ), re = f(() => {
+    ), ie = f(() => {
       if (B.value && !Ne.value) {
         const l = Ie.value, o = U.value.map((a) => ({
           ...a,
@@ -486,7 +486,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     }).map((l, o) => ({
       ...l,
       opacity: j.value.includes(o) ? 0.5 : 1,
-      segregate: () => !de.value && He(o),
+      segregate: () => !he.value && He(o),
       isSegregated: j.value.includes(o),
       display: `${l.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${e.value.style.chart.legend.showValue ? q(e.value.style.chart.layout.labels.value.formatter, l.value, G({
         p: e.value.style.chart.layout.labels.dataLabels.prefix,
@@ -508,7 +508,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     })), T = f(() => {
       const l = e.value.style.chart.layout.donut.radiusRatio, o = Math.max(0.1, Math.min(0.50001, l)), t = Math.min(n.value.width * o, n.value.height * o);
       return Math.max(12, t);
-    }), O = f(() => nl({ series: re.value }, n.value.width / 2, n.value.height / 2, T.value, T.value, 1.99999, 2, 1, 360, 105.25, Ce.value)), Nl = f(() => Math.abs(re.value.map((l) => l.value).reduce((l, o) => l + o, 0)) > 0), Vl = f(() => nl({
+    }), O = f(() => nl({ series: ie.value }, n.value.width / 2, n.value.height / 2, T.value, T.value, 1.99999, 2, 1, 360, 105.25, Ce.value)), Nl = f(() => Math.abs(ie.value.map((l) => l.value).reduce((l, o) => l + o, 0)) > 0), Vl = f(() => nl({
       series: [
         {
           value: 1,
@@ -521,8 +521,8 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         }
       ]
     }, n.value.width / 2, n.value.height / 2, T.value, T.value, 1.99999, 2, 1, 360, 105.25, Ce.value)), N = f(() => O.value.filter((l) => !l.ghost)), v = f(() => {
-      const l = Math.max(...re.value.map((t) => t.value)), o = re.value.map((t) => t.value / l);
-      return pa({
+      const l = Math.max(...ie.value.map((t) => t.value)), o = ie.value.map((t) => t.value / l);
+      return ba({
         series: o,
         center: {
           x: n.value.width / 2,
@@ -532,7 +532,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         hasGhost: B.value
       });
     });
-    function he(l) {
+    function fe(l) {
       return l.x > n.value.width / 2 + 6 ? "start" : l.x < n.value.width / 2 - 6 ? "end" : "middle";
     }
     function Rl(l) {
@@ -549,84 +549,84 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       if (e.value.type !== "classic") return {};
       const l = {}, o = N.value || [];
       if (!o.length) return l;
-      const t = e.value, a = n.value.width / 2, u = n.value.height / 2, c = Re.value.top + 16, g = n.value.height - Re.value.bottom - 16, $ = we.value * 1.5, S = 8, D = 24, P = a - (T.value + D), X = a + (T.value + D), ye = !!t.style.chart.layout.curvedMarkers;
-      function ge({ midX: h, midY: b, bandX: F, bandY: R }) {
-        if (!ye)
-          return `M ${h} ${b} L ${h} ${R} L ${F} ${R}`;
-        const ae = F < a ? -1 : 1, Y = (h + F) / 2 + ae * 12, z = b + (R - b) * 0.5;
-        return `M ${h} ${b} Q ${Y} ${z} ${F} ${R}`;
+      const t = e.value, a = n.value.width / 2, u = n.value.height / 2, c = Re.value.top + 16, g = n.value.height - Re.value.bottom - 16, $ = le.value * 1.5, S = 8, Y = 6, P = a - (T.value + Y), X = a + (T.value + Y), ge = !!t.style.chart.layout.curvedMarkers;
+      function be({ midX: h, midY: p, bandX: F, bandY: R }) {
+        if (!ge)
+          return `M ${h} ${p} L ${h} ${R} L ${F} ${R}`;
+        const oe = F < a ? -1 : 1, D = (h + F) / 2 + oe * 12, z = p + (R - p) * 0.5;
+        return `M ${h} ${p} Q ${D} ${z} ${F} ${R}`;
       }
-      const dt = o.map((h, b) => {
-        const { x: F, y: R } = ba(h.path), ae = x(h).x, J = ie(h) - 3.5, Y = String(h.name ?? "").split(/\n/g), z = Math.max(0, Y.length - 1), K = we.value * 1.2, Me = z * K, sa = $ + Me;
+      const dt = o.map((h, p) => {
+        const { x: F, y: R } = pa(h.path), oe = x(h).x, J = ce(h) - 3.5, D = String(h.name ?? "").split(/\n/g), z = Math.max(0, D.length - 1), K = le.value * 1.2, Me = z * K, sa = $ + Me;
         return {
           arc: h,
-          index: b,
+          index: p,
           midX: F,
           midY: R,
-          inlineMarkerX: ae,
+          inlineMarkerX: oe,
           inlineMarkerY: J,
           labelHeight: sa
         };
       }).filter(({ arc: h }) => {
-        const b = h.seriesIndex ?? 0;
-        return xe.value === b || j.value.includes(b) ? !1 : Hl(h, b);
+        const p = h.seriesIndex ?? 0;
+        return xe.value === p || j.value.includes(p) ? !1 : Hl(h, p);
       }), Xe = [], ht = [], je = [], We = [];
       dt.forEach((h) => {
-        const b = h.inlineMarkerY < u, F = h.inlineMarkerX < a;
-        b && F ? Xe.push(h) : b && !F ? ht.push(h) : !b && F ? je.push(h) : We.push(h);
+        const p = h.inlineMarkerY < u, F = h.inlineMarkerX < a;
+        p && F ? Xe.push(h) : p && !F ? ht.push(h) : !p && F ? je.push(h) : We.push(h);
       });
-      const Qt = (h, b) => h.inlineMarkerY - b.inlineMarkerY || h.index - b.index, Jt = (h, b) => b.inlineMarkerY - h.inlineMarkerY || h.index - b.index;
+      const Qt = (h, p) => h.inlineMarkerY - p.inlineMarkerY || h.index - p.index, Jt = (h, p) => p.inlineMarkerY - h.inlineMarkerY || h.index - p.index;
       Xe.sort(Qt), ht.sort(Qt), je.sort(Jt), We.sort(Jt);
       let Kt = c;
       Xe.forEach((h) => {
-        const { index: b, midX: F, midY: R, labelHeight: ae } = h, J = Kt, Y = P, z = J, K = ge({
+        const { index: p, midX: F, midY: R, labelHeight: oe } = h, J = Kt, D = P, z = J, K = be({
           midX: F,
           midY: R,
-          bandX: Y,
+          bandX: D,
           bandY: z
         });
-        l[b] = {
+        l[p] = {
           side: "left",
-          labelX: Y - S,
-          labelY: J,
+          labelX: D - S,
+          labelY: J + le.value / 3,
           textAnchor: "end",
-          markerX: Y,
+          markerX: D,
           markerY: z,
           connectorPath: K
-        }, Kt += ae;
+        }, Kt += oe;
       });
       let Zt = c;
       if (ht.forEach((h) => {
-        const { index: b, midX: F, midY: R, labelHeight: ae } = h, J = Zt, Y = X, z = J, K = ge({
+        const { index: p, midX: F, midY: R, labelHeight: oe } = h, J = Zt, D = X, z = J, K = be({
           midX: F,
           midY: R,
-          bandX: Y,
+          bandX: D,
           bandY: z
         });
-        l[b] = {
+        l[p] = {
           side: "right",
-          labelX: Y + S,
-          labelY: J,
+          labelX: D + S,
+          labelY: J + le.value / 3,
           textAnchor: "start",
-          markerX: Y,
+          markerX: D,
           markerY: z,
           connectorPath: K
-        }, Zt += ae;
+        }, Zt += oe;
       }), je.length > 1) {
         let h = g;
-        je.forEach((b) => {
-          const { index: F, midX: R, midY: ae, labelHeight: J } = b;
+        je.forEach((p) => {
+          const { index: F, midX: R, midY: oe, labelHeight: J } = p;
           h -= J;
-          const Y = h, z = P, K = Y, Me = ge({
+          const D = h, z = P, K = D, Me = be({
             midX: R,
-            midY: ae,
+            midY: oe,
             bandX: z,
             bandY: K
           });
           l[F] = {
             side: "left",
             labelX: z - S,
-            labelY: Y,
+            labelY: D + le.value / 3,
             textAnchor: "end",
             markerX: z,
             markerY: K,
@@ -636,19 +636,19 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       }
       if (We.length > 1) {
         let h = g;
-        We.forEach((b) => {
-          const { index: F, midX: R, midY: ae, labelHeight: J } = b;
+        We.forEach((p) => {
+          const { index: F, midX: R, midY: oe, labelHeight: J } = p;
           h -= J;
-          const Y = h, z = X, K = Y, Me = ge({
+          const D = h, z = X, K = D, Me = be({
             midX: R,
-            midY: ae,
+            midY: oe,
             bandX: z,
             bandY: K
           });
           l[F] = {
             side: "right",
             labelX: z + S,
-            labelY: Y,
+            labelY: D + le.value / 3,
             textAnchor: "start",
             markerX: z,
             markerY: K,
@@ -658,7 +658,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       }
       return l;
     });
-    function Ye(l, o) {
+    function De(l, o) {
       const t = l.value / Gl(o);
       return isNaN(t) ? 0 : q(
         e.value.style.chart.layout.labels.percentage.formatter,
@@ -674,19 +674,19 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     function Gl(l) {
       return [...l].map((o) => o.value).reduce((o, t) => o + t, 0);
     }
-    const V = f(() => re.value.map((l) => l.value).reduce((l, o) => l + o, 0)), Ul = f(() => {
+    const V = f(() => ie.value.map((l) => l.value).reduce((l, o) => l + o, 0)), Ul = f(() => {
       const l = U.value.reduce((o, t) => o + t.value, 0);
       return l <= 0 ? [] : U.value.map((o) => o.value / l);
-    }), rt = f(() => V.value / re.value.length);
+    }), rt = f(() => V.value / ie.value.length);
     function Vt(l) {
-      return de.value ? l.proportion * 100 : l.value / V.value * 100;
+      return he.value ? l.proportion * 100 : l.value / V.value * 100;
     }
     const it = w(null), ze = w(!1);
-    function ne({ datapoint: l, seriesIndex: o }) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: o }), at.value = !1, le.value = null;
+    function se({ datapoint: l, seriesIndex: o }) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: o }), at.value = !1, ae.value = null;
     }
-    function se({ datapoint: l, relativeIndex: o, seriesIndex: t, show: a = !1 }) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: t }), it.value = { datapoint: l, seriesIndex: t, config: e.value, series: U.value }, at.value = a, le.value = o;
+    function ue({ datapoint: l, relativeIndex: o, seriesIndex: t, show: a = !1 }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: t }), it.value = { datapoint: l, seriesIndex: t, config: e.value, series: U.value }, at.value = a, ae.value = o;
       let u = "";
       const c = e.value.style.chart.tooltip.customFormat;
       if (ze.value = !1, _a(c))
@@ -748,11 +748,11 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       return {
         textAnchor: a.anchor,
         x: a.x,
-        y: ie(l)
+        y: ce(l)
       };
     }
     function Wl(l, o, t) {
-      const { textAnchor: a, x: u } = jl(l, o), c = Ye(l, N.value), g = e.value.style.chart.layout.labels.value.show ? ` (${q(
+      const { textAnchor: a, x: u } = jl(l, o), c = De(l, N.value), g = e.value.style.chart.layout.labels.value.show ? ` (${q(
         e.value.style.chart.layout.labels.value.formatter,
         l.value,
         G({
@@ -766,33 +766,33 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         <tspan
             class="vue-data-ui-datalabel-inline"
             fill="${e.value.style.chart.layout.labels.percentage.color}"
-            font-size="${t ? we.value : Se.value}px"
+            font-size="${t ? le.value : Se.value}px"
             style="font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}"
         >${$}</tspan>
-    `, D = String(l.name ?? "").split(/\n/g);
+    `, Y = String(l.name ?? "").split(/\n/g);
       let P = "";
-      return D.forEach((X, ye) => {
-        ye === 0 ? P += `
+      return Y.forEach((X, ge) => {
+        ge === 0 ? P += `
                 <tspan
-                    class="vue-data-ui-datalabel-name"
+                    class="${t ? "vue-data-ui-datalabel-inline" : "vue-data-ui-datalabel-name"}"
                     fill="${e.value.style.chart.layout.labels.name.color}"
-                    font-size="${t ? we.value : E.value}px"
+                    font-size="${t ? le.value : E.value}px"
                     style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}"
                 >${X}</tspan>
             ` : P += `
                 <tspan
-                    class="vue-data-ui-datalabel-name"
+                    class="${t ? "vue-data-ui-datalabel-inline" : "vue-data-ui-datalabel-name"}"
                     x="${u}"
-                    dy="${(t ? we.value : E.value) * 1.2}"
+                    dy="${(t ? le.value : E.value) * 1.2}"
                     fill="${e.value.style.chart.layout.labels.name.color}"
-                    font-size="${t ? we.value : E.value}px"
+                    font-size="${t ? le.value : E.value}px"
                     style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}"
                 >${X}</tspan>
             `;
       }), a === "end" ? `${P}${S}` : `${S}${P}`;
     }
     function ql(l, o) {
-      const t = v.value[o].middlePoint, a = he(t), u = L({
+      const t = v.value[o].middlePoint, a = fe(t), u = L({
         initX: t.x,
         initY: t.y,
         offset: 42,
@@ -800,7 +800,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         centerY: n.value.height / 2
       }), c = u.x;
       u.y;
-      const g = Ye(l, N.value), $ = e.value.style.chart.layout.labels.value.show ? ` (${q(
+      const g = De(l, N.value), $ = e.value.style.chart.layout.labels.value.show ? ` (${q(
         e.value.style.chart.layout.labels.value.formatter,
         l.value,
         G({
@@ -810,7 +810,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           r: e.value.style.chart.layout.labels.value.rounding
         }),
         { datapoint: l }
-      )})` : "", S = `${g}${$}`, D = `
+      )})` : "", S = `${g}${$}`, Y = `
         <tspan
             class="vue-data-ui-datalabel-value"
             fill="${e.value.style.chart.layout.labels.percentage.color}"
@@ -819,14 +819,14 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         >${S}</tspan>
     `, P = String(l.name ?? "").split(/\n/g);
       let X = "";
-      return P.forEach((ye, ge) => {
-        ge === 0 ? X += `
+      return P.forEach((ge, be) => {
+        be === 0 ? X += `
                 <tspan
                     class="vue-data-ui-datalabel-name"
                     fill="${e.value.style.chart.layout.labels.name.color}"
                     font-size="${E.value}px"
                     style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : "normal"}"
-                >${ye}</tspan>
+                >${ge}</tspan>
             ` : X += `
                 <tspan
                     class="vue-data-ui-datalabel-name"
@@ -835,31 +835,31 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                     fill="${e.value.style.chart.layout.labels.name.color}"
                     font-size="${E.value}px"
                     style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : "normal"}"
-                >${ye}</tspan>
+                >${ge}</tspan>
             `;
-      }), a === "end" ? `${X}${D}` : `${D}${X}`;
+      }), a === "end" ? `${X}${Y}` : `${Y}${X}`;
     }
     function $e(l) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(le.value) && le.value !== l ? `url(#blur_${k.value})` : "";
+      return e.value.useBlurOnHover && ![null, void 0].includes(ae.value) && ae.value !== l ? `url(#blur_${k.value})` : "";
     }
     function Ql(l) {
-      if (!de.value || xe.value === null || l.seriesIndex !== xe.value)
+      if (!he.value || xe.value === null || l.seriesIndex !== xe.value)
         return 1;
       const o = (l.proportion ?? 0) * 100, t = e.value.style.chart.layout.labels.dataLabels.hideUnderValue, u = e.value.style.chart.layout.labels.dataLabels.smallArcClusterThreshold + 2, c = t;
       return o >= u ? 1 : o <= c ? 0 : (o - c) / (u - c);
     }
-    const fe = f(() => {
-      const l = re.value.map((t) => ({
+    const ye = f(() => {
+      const l = ie.value.map((t) => ({
         name: t.name,
         color: t.color
-      })), o = re.value.map((t) => t.value);
+      })), o = ie.value.map((t) => t.value);
       return { head: l, body: o };
     });
     function ct(l = null) {
       va(() => {
-        const o = fe.value.head.map((u, c) => [[
+        const o = ye.value.head.map((u, c) => [[
           u.name
-        ], [fe.value.body[c]], [isNaN(fe.value.body[c] / V.value) ? "-" : fe.value.body[c] / V.value * 100]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(o), a = $a(t);
+        ], [ye.value.body[c]], [isNaN(ye.value.body[c] / V.value) ? "-" : ye.value.body[c] / V.value * 100]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(o), a = $a(t);
         l ? l(a) : Aa({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-donut" });
       });
     }
@@ -868,13 +868,13 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
         G({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: V.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
         "100%"
-      ], o = fe.value.head.map((u, c) => [
+      ], o = ye.value.head.map((u, c) => [
         {
           color: u.color,
           name: u.name || "-"
         },
-        fe.value.body[c],
-        isNaN(fe.value.body[c] / V.value) ? "-" : (fe.value.body[c] / V.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
+        ye.value.body[c],
+        isNaN(ye.value.body[c] / V.value) ? "-" : (ye.value.body[c] / V.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
       ]), t = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -906,7 +906,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     function Jl(l) {
       return l.toFixed(e.value.style.chart.legend.roundingPercentage).split("").map((o) => "-").join("");
     }
-    function ue(l, o) {
+    function re(l, o) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: l.seriesIndex }), Ot("selectDatapoint", { datapoint: l, index: o });
     }
     function Gt() {
@@ -1014,9 +1014,9 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       style: M(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
       id: `donut__${k.value}`,
       onMouseenter: Il,
-      onMouseleave: Dl
+      onMouseleave: Yl
     }, [
-      e.value.userOptions.buttons.annotator && r(ke) ? (s(), me(r(kl), {
+      e.value.userOptions.buttons.annotator && r(ke) ? (s(), we(r(kl), {
         key: 0,
         color: e.value.style.chart.color,
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -1025,27 +1025,27 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         onClose: vt
       }, {
         "annotator-action-close": C(() => [
-          p(l.$slots, "annotator-action-close", {}, void 0, !0)
+          b(l.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
         "annotator-action-color": C(({ color: t }) => [
-          p(l.$slots, "annotator-action-color", Z(ee({ color: t })), void 0, !0)
+          b(l.$slots, "annotator-action-color", Z(ee({ color: t })), void 0, !0)
         ]),
         "annotator-action-draw": C(({ mode: t }) => [
-          p(l.$slots, "annotator-action-draw", Z(ee({ mode: t })), void 0, !0)
+          b(l.$slots, "annotator-action-draw", Z(ee({ mode: t })), void 0, !0)
         ]),
         "annotator-action-undo": C(({ disabled: t }) => [
-          p(l.$slots, "annotator-action-undo", Z(ee({ disabled: t })), void 0, !0)
+          b(l.$slots, "annotator-action-undo", Z(ee({ disabled: t })), void 0, !0)
         ]),
         "annotator-action-redo": C(({ disabled: t }) => [
-          p(l.$slots, "annotator-action-redo", Z(ee({ disabled: t })), void 0, !0)
+          b(l.$slots, "annotator-action-redo", Z(ee({ disabled: t })), void 0, !0)
         ]),
         "annotator-action-delete": C(({ disabled: t }) => [
-          p(l.$slots, "annotator-action-delete", Z(ee({ disabled: t })), void 0, !0)
+          b(l.$slots, "annotator-action-delete", Z(ee({ disabled: t })), void 0, !0)
         ]),
         _: 3
       }, 8, ["color", "backgroundColor", "active", "svgRef"])) : d("", !0),
-      p(l.$slots, "userConfig", {}, void 0, !0),
-      Yl.value ? (s(), i("div", {
+      b(l.$slots, "userConfig", {}, void 0, !0),
+      Dl.value ? (s(), i("div", {
         key: 1,
         ref_key: "noTitle",
         ref: $t,
@@ -1058,7 +1058,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         ref: kt,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (s(), me(Oa, {
+        (s(), we(Oa, {
           key: `title_${At.value}`,
           config: {
             title: {
@@ -1075,14 +1075,14 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       y("div", {
         id: `legend-top-${k.value}`
       }, null, 8, Ra),
-      e.value.userOptions.show && Oe.value && (r(It) || r(st)) ? (s(), me(r(Cl), {
+      e.value.userOptions.show && Oe.value && (r(It) || r(st)) ? (s(), we(r(Cl), {
         ref_key: "userOptionsRef",
         ref: Ze,
         key: `user_option_${Pt.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: r(Dt),
-        isImaging: r(Yt),
+        isPrinting: r(Yt),
+        isImaging: r(Dt),
         uid: k.value,
         hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -1116,70 +1116,70 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         l.$slots.menuIcon ? {
           name: "menuIcon",
           fn: C(({ isOpen: t, color: a }) => [
-            p(l.$slots, "menuIcon", Z(ee({ isOpen: t, color: a })), void 0, !0)
+            b(l.$slots, "menuIcon", Z(ee({ isOpen: t, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         l.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: C(() => [
-            p(l.$slots, "optionTooltip", {}, void 0, !0)
+            b(l.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         l.$slots.optionPdf ? {
           name: "optionPdf",
           fn: C(() => [
-            p(l.$slots, "optionPdf", {}, void 0, !0)
+            b(l.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         l.$slots.optionCsv ? {
           name: "optionCsv",
           fn: C(() => [
-            p(l.$slots, "optionCsv", {}, void 0, !0)
+            b(l.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         l.$slots.optionImg ? {
           name: "optionImg",
           fn: C(() => [
-            p(l.$slots, "optionImg", {}, void 0, !0)
+            b(l.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         l.$slots.optionSvg ? {
           name: "optionSvg",
           fn: C(() => [
-            p(l.$slots, "optionSvg", {}, void 0, !0)
+            b(l.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         l.$slots.optionTable ? {
           name: "optionTable",
           fn: C(() => [
-            p(l.$slots, "optionTable", {}, void 0, !0)
+            b(l.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         l.$slots.optionLabels ? {
           name: "optionLabels",
           fn: C(() => [
-            p(l.$slots, "optionLabels", {}, void 0, !0)
+            b(l.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "7"
         } : void 0,
         l.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: C(({ toggleFullscreen: t, isFullscreen: a }) => [
-            p(l.$slots, "optionFullscreen", Z(ee({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
+            b(l.$slots, "optionFullscreen", Z(ee({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         l.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: C(({ toggleAnnotator: t, isAnnotator: a }) => [
-            p(l.$slots, "optionAnnotator", Z(ee({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
+            b(l.$slots, "optionAnnotator", Z(ee({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
           ]),
           key: "9"
         } : void 0
@@ -1208,7 +1208,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               pointerEvents: "none"
             }
           }, [
-            p(l.$slots, "chart-background", {}, void 0, !0)
+            b(l.$slots, "chart-background", {}, void 0, !0)
           ], 8, Ga)) : d("", !0),
           e.value.type === "classic" && !isNaN(Ce.value / T.value) ? (s(), i("defs", Ua, [
             e.value.style.chart.useGradient ? (s(), i("radialGradient", {
@@ -1350,7 +1350,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             (s(!0), i(A, null, H(wt.dataset, (t, a) => (s(), i("defs", {
               key: `pattern-${t.patternIndex}`
             }, [
-              p(l.$slots, "pattern", gt({ ref_for: !0 }, { seriesIndex: a, patternId: `pattern_${k.value}_${a}` }), void 0, !0)
+              b(l.$slots, "pattern", gt({ ref_for: !0 }, { seriesIndex: a, patternId: `pattern_${k.value}_${a}` }), void 0, !0)
             ]))), 128))
           ])) : d("", !0),
           V.value && e.value.type === "classic" ? (s(), i(A, { key: 7 }, [
@@ -1379,7 +1379,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             ])) : d("", !0)
           ], 64)) : d("", !0),
           V.value && e.value.type === "polar" ? (s(), i(A, { key: 8 }, [
-            O.value.length > 1 ? (s(), i("g", po, [
+            O.value.length > 1 ? (s(), i("g", bo, [
               (s(!0), i(A, null, H(N.value, (t, a) => (s(), i("path", {
                 stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                 d: v.value[a].path,
@@ -1387,7 +1387,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 style: M({
                   transition: B.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                 })
-              }, null, 12, bo))), 256)),
+              }, null, 12, po))), 256)),
               e.value.style.chart.layout.donut.useShadow ? (s(), i("g", mo, [
                 (s(!0), i(A, null, H(N.value, (t, a) => (s(), i("path", {
                   class: "vue-ui-donut-arc-path",
@@ -1487,31 +1487,31 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               (s(!0), i(A, null, H(O.value.filter((t) => !t.ghost), (t, a) => (s(), i("path", {
                 d: e.value.type === "classic" ? t.arcSlice : v.value[a].path,
                 stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                fill: le.value === a ? e.value.style.chart.layout.donut.selectedColor : "transparent",
-                onMouseenter: (u) => se({
+                fill: ae.value === a ? e.value.style.chart.layout.donut.selectedColor : "transparent",
+                onMouseenter: (u) => ue({
                   datapoint: t,
                   relativeIndex: a,
                   seriesIndex: t.seriesIndex,
                   show: !0
                 }),
-                onMouseleave: (u) => ne({ datapoint: t, seriesIndex: t.seriesIndex }),
-                onClick: (u) => ue(t, a)
+                onMouseleave: (u) => se({ datapoint: t, seriesIndex: t.seriesIndex }),
+                onClick: (u) => re(t, a)
               }, null, 40, Io))), 256))
-            ])) : (s(), i("g", Do, [
+            ])) : (s(), i("g", Yo, [
               y("circle", {
                 cx: n.value.width / 2,
                 cy: n.value.height / 2,
                 r: T.value,
                 fill: "transparent",
-                onMouseenter: o[0] || (o[0] = (t) => se({
+                onMouseenter: o[0] || (o[0] = (t) => ue({
                   datapoint: O.value[0],
                   relativeIndex: 0,
                   seriesIndex: O.value[0].seriesIndex,
                   show: !0
                 })),
-                onMouseleave: o[1] || (o[1] = (t) => ne({ datapoint: O.value[0], seriesIndex: O.value[0].seriesIndex })),
-                onClick: o[2] || (o[2] = (t) => ue(O.value[0], l.i))
-              }, null, 40, Yo)
+                onMouseleave: o[1] || (o[1] = (t) => se({ datapoint: O.value[0], seriesIndex: O.value[0].seriesIndex })),
+                onClick: o[2] || (o[2] = (t) => re(O.value[0], l.i))
+              }, null, 40, Do)
             ]))
           ], 64)) : d("", !0),
           e.value.type === "classic" ? (s(), i("g", {
@@ -1528,7 +1528,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               fill: e.value.style.chart.layout.labels.hollow.total.color,
               "font-size": e.value.style.chart.layout.labels.hollow.total.fontSize,
               style: M(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
-            }, oe(e.value.style.chart.layout.labels.hollow.total.text), 13, zo)) : d("", !0),
+            }, ne(e.value.style.chart.layout.labels.hollow.total.text), 13, zo)) : d("", !0),
             e.value.style.chart.layout.labels.hollow.total.show ? (s(), i("text", {
               key: 1,
               "text-anchor": "middle",
@@ -1537,7 +1537,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               fill: e.value.style.chart.layout.labels.hollow.total.value.color,
               "font-size": e.value.style.chart.layout.labels.hollow.total.value.fontSize,
               style: M(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
-            }, oe(r(q)(
+            }, ne(r(q)(
               e.value.style.chart.layout.labels.hollow.total.value.formatter,
               V.value,
               r(G)({
@@ -1554,7 +1554,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               fill: e.value.style.chart.layout.labels.hollow.average.color,
               "font-size": e.value.style.chart.layout.labels.hollow.average.fontSize,
               style: M(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
-            }, oe(e.value.style.chart.layout.labels.hollow.average.text), 13, Xo)) : d("", !0),
+            }, ne(e.value.style.chart.layout.labels.hollow.average.text), 13, Xo)) : d("", !0),
             e.value.style.chart.layout.labels.hollow.average.show ? (s(), i("text", {
               key: 3,
               "text-anchor": "middle",
@@ -1563,7 +1563,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               fill: e.value.style.chart.layout.labels.hollow.average.value.color,
               "font-size": e.value.style.chart.layout.labels.hollow.average.value.fontSize,
               style: M(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
-            }, oe(de.value || B.value ? "--" : r(q)(
+            }, ne(he.value || B.value ? "--" : r(q)(
               e.value.style.chart.layout.labels.hollow.average.value.formatter,
               rt.value,
               r(G)({
@@ -1583,20 +1583,20 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (s(), i("g", No, [
               (s(), i("foreignObject", {
                 x: r(x)(t, !0).anchor === "end" ? r(x)(t).x - 120 : r(x)(t, !0).anchor === "middle" ? r(x)(t).x - 60 : r(x)(t).x,
-                y: r(ie)(t) - (Ht.value ? 20 : 0),
+                y: r(ce)(t) - (Ht.value ? 20 : 0),
                 width: "120",
                 height: "60",
                 style: { overflow: "visible" }
               }, [
                 y("div", null, [
-                  p(l.$slots, "dataLabel", gt({ ref_for: !0 }, {
+                  b(l.$slots, "dataLabel", gt({ ref_for: !0 }, {
                     datapoint: t,
-                    isBlur: !e.value.useBlurOnHover || [null, void 0].includes(le.value) || le.value === a,
+                    isBlur: !e.value.useBlurOnHover || [null, void 0].includes(ae.value) || ae.value === a,
                     isSafari: Ht.value,
                     isVisible: W(t) && m.value.dataLabels.show,
                     textAlign: r(x)(t, !0, 16, !0).anchor,
                     flexAlign: r(x)(t, !0, 16).anchor,
-                    percentage: Ye(t, N.value)
+                    percentage: De(t, N.value)
                   }), void 0, !0)
                 ])
               ], 8, Vo))
@@ -1605,35 +1605,35 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 W(t) && m.value.dataLabels.show ? (s(), i("circle", {
                   key: 0,
                   cx: I.value[a]?.markerX ?? r(x)(t).x,
-                  cy: I.value[a]?.markerY ?? r(ie)(t) - 3.5,
+                  cy: I.value[a]?.markerY ?? r(ce)(t) - 3.5,
                   fill: t.color,
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": 1,
                   r: 3,
-                  filter: !e.value.useBlurOnHover || [null, void 0].includes(le.value) || le.value === a ? "" : `url(#blur_${k.value})`,
-                  onClick: (u) => ue(t, a),
-                  onMouseenter: (u) => se({
+                  filter: !e.value.useBlurOnHover || [null, void 0].includes(ae.value) || ae.value === a ? "" : `url(#blur_${k.value})`,
+                  onClick: (u) => re(t, a),
+                  onMouseenter: (u) => ue({
                     datapoint: t,
                     relativeIndex: a,
                     seriesIndex: t.seriesIndex,
                     show: !0
                   }),
-                  onMouseleave: (u) => ne({ datapoint: t, seriesIndex: t.seriesIndex })
+                  onMouseleave: (u) => se({ datapoint: t, seriesIndex: t.seriesIndex })
                 }, null, 40, Ho)) : d("", !0),
                 e.value.style.chart.layout.labels.dataLabels.oneLine || I.value[a] ? Qe((s(), i("text", {
                   key: 1,
                   class: "vue-data-ui-datalabel-inline",
                   "text-anchor": I.value[a]?.textAnchor || r(x)(t, !0, 12).anchor,
                   x: I.value[a]?.labelX ?? r(x)(t, !0, 12).x,
-                  y: I.value[a]?.labelY ?? r(ie)(t),
-                  onClick: (u) => ue(t, a),
-                  onMouseenter: (u) => se({
+                  y: I.value[a]?.labelY ?? r(ce)(t),
+                  onClick: (u) => re(t, a),
+                  onMouseenter: (u) => ue({
                     datapoint: t,
                     relativeIndex: a,
                     seriesIndex: t.seriesIndex,
                     show: !0
                   }),
-                  onMouseleave: (u) => ne({ datapoint: t, seriesIndex: t.seriesIndex }),
+                  onMouseleave: (u) => se({ datapoint: t, seriesIndex: t.seriesIndex }),
                   innerHTML: Wl(t, a, !!I.value[a])
                 }, null, 40, Go)), [
                   [Je, W(t) && m.value.dataLabels.show]
@@ -1642,19 +1642,19 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                     class: "vue-data-ui-datalabel-value",
                     "text-anchor": I.value[a]?.textAnchor || r(x)(t, !0, 12).anchor,
                     x: I.value[a]?.labelX ?? r(x)(t, !0, 12).x,
-                    y: I.value[a]?.labelY ?? r(ie)(t),
+                    y: I.value[a]?.labelY ?? r(ce)(t),
                     fill: e.value.style.chart.layout.labels.percentage.color,
                     "font-size": Se.value + "px",
                     style: M(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
-                    onClick: (u) => ue(t, a),
-                    onMouseenter: (u) => se({
+                    onClick: (u) => re(t, a),
+                    onMouseenter: (u) => ue({
                       datapoint: t,
                       relativeIndex: a,
                       seriesIndex: t.seriesIndex,
                       show: !0
                     }),
-                    onMouseleave: (u) => ne({ datapoint: t, seriesIndex: t.seriesIndex })
-                  }, oe(Ye(t, N.value)) + " " + oe(e.value.style.chart.layout.labels.value.show ? `(${r(q)(
+                    onMouseleave: (u) => se({ datapoint: t, seriesIndex: t.seriesIndex })
+                  }, ne(De(t, N.value)) + " " + ne(e.value.style.chart.layout.labels.value.show ? `(${r(q)(
                     e.value.style.chart.layout.labels.value.formatter,
                     t.value,
                     r(G)({
@@ -1671,24 +1671,24 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                     class: "vue-data-ui-datalabel-name",
                     "text-anchor": I.value[a]?.textAnchor || r(x)(t).anchor,
                     x: I.value[a]?.labelX ?? r(x)(t, !0, 12).x,
-                    y: (I.value[a]?.labelY ?? r(ie)(t)) + E.value * 1.2,
+                    y: (I.value[a]?.labelY ?? r(ce)(t)) + E.value * 1.2,
                     fill: e.value.style.chart.layout.labels.name.color,
                     "font-size": E.value + "px",
                     style: M(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
-                    onClick: (u) => ue(t, a),
-                    onMouseenter: (u) => se({
+                    onClick: (u) => re(t, a),
+                    onMouseenter: (u) => ue({
                       datapoint: t,
                       relativeIndex: a,
                       seriesIndex: t.seriesIndex,
                       show: !0
                     }),
-                    onMouseleave: (u) => ne({ datapoint: t, seriesIndex: t.seriesIndex }),
+                    onMouseleave: (u) => se({ datapoint: t, seriesIndex: t.seriesIndex }),
                     innerHTML: r(sl)({
                       content: t.name,
                       fontSize: E.value,
                       fill: e.value.style.chart.layout.labels.name.color,
                       x: I.value[a]?.labelX ?? r(x)(t, !0, 12).x,
-                      y: (I.value[a]?.labelY ?? r(ie)(t)) + E.value
+                      y: (I.value[a]?.labelY ?? r(ce)(t)) + E.value
                     })
                   }, null, 44, jo), [
                     [Je, W(t) && m.value.dataLabels.show]
@@ -1704,15 +1704,15 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": 1,
                   r: 3,
-                  filter: !e.value.useBlurOnHover || [null, void 0].includes(le.value) || le.value === a ? "" : `url(#blur_${k.value})`,
-                  onClick: (u) => ue(t, a),
-                  onMouseenter: (u) => se({
+                  filter: !e.value.useBlurOnHover || [null, void 0].includes(ae.value) || ae.value === a ? "" : `url(#blur_${k.value})`,
+                  onClick: (u) => re(t, a),
+                  onMouseenter: (u) => ue({
                     datapoint: t,
                     relativeIndex: a,
                     seriesIndex: t.seriesIndex,
                     show: !0
                   }),
-                  onMouseleave: (u) => ne({ datapoint: t, seriesIndex: t.seriesIndex }),
+                  onMouseleave: (u) => se({ datapoint: t, seriesIndex: t.seriesIndex }),
                   style: M({
                     transition: B.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                   })
@@ -1720,20 +1720,20 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 e.value.style.chart.layout.labels.dataLabels.oneLine ? Qe((s(), i("text", {
                   key: 1,
                   class: "vue-data-ui-datalabel-inline",
-                  "text-anchor": he(v.value[a].middlePoint),
+                  "text-anchor": fe(v.value[a].middlePoint),
                   x: r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
                   y: r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
                   style: M({
                     transition: B.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                   }),
-                  onClick: (u) => ue(t, a),
-                  onMouseenter: (u) => se({
+                  onClick: (u) => re(t, a),
+                  onMouseenter: (u) => ue({
                     datapoint: t,
                     relativeIndex: a,
                     seriesIndex: t.seriesIndex,
                     show: !0
                   }),
-                  onMouseleave: (u) => ne({ datapoint: t, seriesIndex: t.seriesIndex }),
+                  onMouseleave: (u) => se({ datapoint: t, seriesIndex: t.seriesIndex }),
                   innerHTML: ql(t, a)
                 }, null, 44, qo)), [
                   [Je, W(t) && m.value.dataLabels.show]
@@ -1741,7 +1741,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                   W(t) && m.value.dataLabels.show ? (s(), i("text", {
                     key: 0,
                     class: "vue-data-ui-datalabel-value",
-                    "text-anchor": he(v.value[a].middlePoint),
+                    "text-anchor": fe(v.value[a].middlePoint),
                     x: r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
                     y: r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
                     fill: e.value.style.chart.layout.labels.percentage.color,
@@ -1750,15 +1750,15 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                       transition: B.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
                       fontWeight: e.value.style.chart.layout.labels.percentage.bold ? "bold" : "normal"
                     }),
-                    onClick: (u) => ue(t, a),
-                    onMouseenter: (u) => se({
+                    onClick: (u) => re(t, a),
+                    onMouseenter: (u) => ue({
                       datapoint: t,
                       relativeIndex: a,
                       seriesIndex: t.seriesIndex,
                       show: !0
                     }),
-                    onMouseleave: (u) => ne({ datapoint: t, seriesIndex: t.seriesIndex })
-                  }, oe(Ye(t, N.value)) + " " + oe(e.value.style.chart.layout.labels.value.show ? `(${r(q)(
+                    onMouseleave: (u) => se({ datapoint: t, seriesIndex: t.seriesIndex })
+                  }, ne(De(t, N.value)) + " " + ne(e.value.style.chart.layout.labels.value.show ? `(${r(q)(
                     e.value.style.chart.layout.labels.value.formatter,
                     t.value,
                     r(G)({
@@ -1772,7 +1772,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                   W(t) && m.value.dataLabels.show ? (s(), i("text", {
                     key: 1,
                     class: "vue-data-ui-datalabel-name",
-                    "text-anchor": he(v.value[a].middlePoint),
+                    "text-anchor": fe(v.value[a].middlePoint),
                     x: r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
                     y: r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + E.value * 1.2,
                     fill: e.value.style.chart.layout.labels.name.color,
@@ -1781,14 +1781,14 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                       transition: B.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
                       fontWeight: e.value.style.chart.layout.labels.name.bold ? "bold" : "normal"
                     }),
-                    onClick: (u) => ue(t, a),
-                    onMouseenter: (u) => se({
+                    onClick: (u) => re(t, a),
+                    onMouseenter: (u) => ue({
                       datapoint: t,
                       relativeIndex: a,
                       seriesIndex: t.seriesIndex,
                       show: !0
                     }),
-                    onMouseleave: (u) => ne({ datapoint: t, seriesIndex: t.seriesIndex }),
+                    onMouseleave: (u) => se({ datapoint: t, seriesIndex: t.seriesIndex }),
                     innerHTML: r(sl)({
                       content: t.name,
                       fontSize: Se.value,
@@ -1804,20 +1804,20 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               W(t) && e.value.type === "classic" ? (s(), i("foreignObject", {
                 key: 0,
                 x: e.value.style.chart.comments.offsetX + (r(x)(t, !0).anchor === "end" ? r(x)(t).x - e.value.style.chart.comments.width : r(x)(t, !0).anchor === "middle" ? r(x)(t).x - e.value.style.chart.comments.width / 2 : r(x)(t).x),
-                y: r(ie)(t) + 24 + e.value.style.chart.comments.offsetY,
+                y: r(ce)(t) + 24 + e.value.style.chart.comments.offsetY,
                 width: e.value.style.chart.comments.width,
                 height: "200",
                 style: { overflow: "visible", "pointer-events": "none" }
               }, [
                 y("div", null, [
-                  p(l.$slots, "plot-comment", {
+                  b(l.$slots, "plot-comment", {
                     plot: { ...t, textAlign: r(x)(t, !0, 16, !0).anchor, flexAlign: r(x)(t, !0, 16).anchor, isFirstLoad: B.value }
                   }, void 0, !0)
                 ])
               ], 8, Zo)) : d("", !0),
               W(t) && e.value.type === "polar" ? (s(), i("foreignObject", {
                 key: 1,
-                x: e.value.style.chart.comments.offsetX + (he(v.value[a].middlePoint) === "end" ? r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width : he(v.value[a].middlePoint) === "middle" ? r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width / 2 : r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x),
+                x: e.value.style.chart.comments.offsetX + (fe(v.value[a].middlePoint) === "end" ? r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width : fe(v.value[a].middlePoint) === "middle" ? r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width / 2 : r(L)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x),
                 y: Rl(v.value[a]) + e.value.style.chart.comments.offsetY,
                 width: e.value.style.chart.comments.width,
                 height: "200",
@@ -1828,23 +1828,23 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 })
               }, [
                 y("div", null, [
-                  p(l.$slots, "plot-comment", {
-                    plot: { ...t, textAlign: he(v.value[a].middlePoint), flexAlign: he(v.value[a].middlePoint), isFirstLoad: B.value }
+                  b(l.$slots, "plot-comment", {
+                    plot: { ...t, textAlign: fe(v.value[a].middlePoint), flexAlign: fe(v.value[a].middlePoint), isFirstLoad: B.value }
                   }, void 0, !0)
                 ])
               ], 12, en)) : d("", !0)
             ])) : d("", !0)
           ], 10, Eo))), 128)),
-          p(l.$slots, "svg", { svg: n.value }, void 0, !0)
+          b(l.$slots, "svg", { svg: n.value }, void 0, !0)
         ], 512)
       ], 14, Ha)),
       l.$slots.watermark ? (s(), i("div", tn, [
-        p(l.$slots, "watermark", Z(ee({ isPrinting: r(Dt) || r(Yt) })), void 0, !0)
+        b(l.$slots, "watermark", Z(ee({ isPrinting: r(Yt) || r(Dt) })), void 0, !0)
       ])) : d("", !0),
       y("div", {
         id: `legend-bottom-${k.value}`
       }, null, 8, ln),
-      St.value ? (s(), me(ia, {
+      St.value ? (s(), we(ia, {
         key: 5,
         to: e.value.style.chart.legend.position === "top" ? `#legend-top-${k.value}` : `#legend-bottom-${k.value}`
       }, [
@@ -1852,7 +1852,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           ref_key: "chartLegend",
           ref: Ct
         }, [
-          e.value.style.chart.legend.show ? (s(), me(Ea, {
+          e.value.style.chart.legend.show ? (s(), we(Ea, {
             key: `legend_${Tt.value}`,
             legendSet: ut.value,
             config: El.value,
@@ -1862,7 +1862,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               y("div", {
                 style: M(`opacity:${j.value.includes(a) ? 0.5 : 1}`),
                 onClick: (u) => t.segregate()
-              }, oe(t.display), 13, an)
+              }, ne(t.display), 13, an)
             ]),
             _: 2
           }, [
@@ -1880,7 +1880,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               key: "0"
             } : void 0
           ]), 1032, ["legendSet", "config"])) : d("", !0),
-          p(l.$slots, "legend", { legend: ut.value }, void 0, !0)
+          b(l.$slots, "legend", { legend: ut.value }, void 0, !0)
         ], 512)
       ], 8, ["to"])) : d("", !0),
       l.$slots.source ? (s(), i("div", {
@@ -1889,16 +1889,16 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         ref: xt,
         dir: "auto"
       }, [
-        p(l.$slots, "source", {}, void 0, !0)
+        b(l.$slots, "source", {}, void 0, !0)
       ], 512)) : d("", !0),
       l.$slots.hollow ? (s(), i("div", on, [
-        p(l.$slots, "hollow", Z(ee({
+        b(l.$slots, "hollow", Z(ee({
           total: V.value,
           average: rt.value,
           dataset: U.value
         })), void 0, !0)
       ])) : d("", !0),
-      qe(r(pl), {
+      qe(r(bl), {
         show: m.value.showTooltip && at.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
@@ -1919,20 +1919,20 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThrehsold
       }, {
         "tooltip-before": C(() => [
-          p(l.$slots, "tooltip-before", Z(ee({ ...it.value })), void 0, !0)
+          b(l.$slots, "tooltip-before", Z(ee({ ...it.value })), void 0, !0)
         ]),
         "tooltip-after": C(() => [
-          p(l.$slots, "tooltip-after", Z(ee({ ...it.value })), void 0, !0)
+          b(l.$slots, "tooltip-after", Z(ee({ ...it.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      Oe.value && e.value.userOptions.buttons.table ? (s(), me(ca(Be.value.component), gt({ key: 8 }, Be.value.props, {
+      Oe.value && e.value.userOptions.buttons.table ? (s(), we(ca(Be.value.component), gt({ key: 8 }, Be.value.props, {
         ref_key: "tableUnit",
         ref: Fe,
         onClose: Wt
       }), yt({
         content: C(() => [
-          (s(), me(r(wl), {
+          (s(), we(r(wl), {
             key: `table_${_t.value}`,
             colNames: Ge.value.colNames,
             head: Ge.value.head,
@@ -1949,7 +1949,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               }, null, 8, nn)
             ]),
             td: C(({ td: t }) => [
-              ll(oe(t.name ? t.name : isNaN(Number(t)) ? t.includes("%") ? t : r(q)(
+              ll(ne(t.name ? t.name : isNaN(Number(t)) ? t.includes("%") ? t : r(q)(
                 e.value.style.chart.layout.labels.percentage.formatter,
                 t,
                 r(G)({
@@ -1976,7 +1976,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         e.value.table.useDialog ? {
           name: "title",
           fn: C(() => [
-            ll(oe(Be.value.title), 1)
+            ll(ne(Be.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -1988,7 +1988,7 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               class: "vue-ui-user-options-button",
               onClick: o[4] || (o[4] = (t) => ct(e.value.userOptions.callbacks.csv))
             }, [
-              qe(r(bl), {
+              qe(r(pl), {
                 name: "excel",
                 stroke: Be.value.props.color
               }, null, 8, ["stroke"])
@@ -1997,10 +1997,10 @@ const rl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           key: "1"
         } : void 0
       ]), 1040)) : d("", !0),
-      r(Ne) ? (s(), me(La, { key: 9 })) : d("", !0)
+      r(Ne) ? (s(), we(La, { key: 9 })) : d("", !0)
     ], 46, Va));
   }
-}, un = /* @__PURE__ */ Na(sn, [["__scopeId", "data-v-ace639e3"]]), An = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, un = /* @__PURE__ */ Na(sn, [["__scopeId", "data-v-d4a8eccb"]]), An = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: un
 }, Symbol.toStringTag, { value: "Module" }));