vue-data-ui 3.6.0 → 3.7.0

package/dist/{vue-ui-donut-BaDmbWLh.js → vue-ui-donut-BLb0kj_P.js}

@@ -1,25 +1,42 @@
-import { defineAsyncComponent as le, useSlots as _l, computed as f, shallowRef as Q, ref as p, onMounted as Tt, onBeforeUnmount as Pt, toRefs as Cl, watch as ye, createElementBlock as r, openBlock as s, normalizeStyle as C, normalizeClass as We, createBlock as ae, createCommentVNode as v, renderSlot as y, createElementVNode as h, createVNode as Te, unref as u, withCtx as b, normalizeProps as N, guardReactiveProps as Y, createSlots as qe, Fragment as k, renderList as I, mergeProps as He, toDisplayString as U, withDirectives as Ft, createTextVNode as Pe, vShow as It, Teleport as Al, resolveDynamicComponent as Sl, nextTick as Tl } from "vue";
-import { o as Lt, f as je, g as Pl, c as Fl, t as Il, e as Ll, x as Ml, h as Mt, p as ie, a as W, d as X, T as zt, Z as zl, X as Ol, s as Fe, i as Dl, V as Nl, _ as P, W as ge, Y as $, $ as Ot, l as Yl, b as Xl, O as Qe, P as Bl, Q as Vl, G as El, a0 as Dt } from "./lib-C_mNZmhD.js";
-import { t as Rl, u as Gl } from "./useResponsive-DfdjqQps.js";
-import { u as Ul, a as Nt } from "./useNestedProp-CIoDlpHu.js";
-import { u as Wl } from "./usePrinter-DTzqpYKF.js";
-import { u as ql, B as Hl } from "./BaseScanner-BgWxam9d.js";
-import { u as jl } from "./useSvgExport-DrjCWun4.js";
-import { u as Ql } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Zl } from "./useChartAccessibility-9icAAmYg.js";
-import Jl from "./img-BecE5qXd.js";
-import { _ as Kl } from "./Shape-CNXKB8O0.js";
-import ea from "./Title-Bb1VWCtR.js";
-import { t as ta } from "./themes-DH-N_ePR.js";
-import la from "./Legend-D9ZTJKjh.js";
-import { _ as aa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "height"], ra = { key: 1 }, ia = ["id"], va = ["stop-color"], da = ["offset", "stop-color"], ca = ["offset", "stop-color"], ha = ["stop-color"], fa = { key: 2 }, ya = ["id", "cx", "cy"], ga = ["stop-color", "stop-opacity"], pa = ["stop-color"], ma = ["id"], ba = ["id"], wa = ["id"], ka = ["flood-color"], xa = ["id"], $a = ["flood-color"], _a = ["d", "stroke", "filter"], Ca = ["d", "stroke", "filter"], Aa = ["cx", "cy", "r", "fill", "filter"], Sa = { key: 6 }, Ta = ["stroke", "d"], Pa = ["d", "fill", "stroke", "stroke-width", "filter"], Fa = { key: 0 }, Ia = ["d", "fill", "stroke", "stroke-width", "filter"], La = { key: 0 }, Ma = ["stroke", "d"], za = { key: 0 }, Oa = ["d", "stroke", "stroke-width", "filter"], Da = { key: 1 }, Na = ["d", "fill", "stroke", "stroke-width", "filter"], Ya = ["d", "fill", "stroke", "stroke-width", "filter"], Xa = { key: 1 }, Ba = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Va = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ea = { key: 0 }, Ra = ["d", "fill", "stroke", "stroke-width"], Ga = ["cx", "cy", "r", "stroke"], Ua = ["cx", "cy", "r", "fill"], Wa = ["cx", "cy", "r"], qa = { key: 0 }, Ha = ["d", "stroke", "fill", "onMouseenter", "onMouseleave", "onClick"], ja = { key: 1 }, Qa = ["cx", "cy", "r"], Za = ["x", "y", "fill", "font-size"], Ja = ["x", "y", "fill", "font-size"], Ka = ["x", "y", "fill", "font-size"], eo = ["x", "y", "fill", "font-size"], to = ["filter"], lo = { key: 0 }, ao = ["x", "y"], oo = { key: 1 }, no = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], so = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], uo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], ro = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "innerHTML"], io = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], vo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "innerHTML"], co = { key: 2 }, ho = ["x", "y", "width"], fo = ["x", "y", "width"], yo = {
+import { defineAsyncComponent as le, useSlots as Ll, computed as f, shallowRef as Z, ref as b, onMounted as Tt, onBeforeUnmount as Pt, toRefs as Ml, watch as ye, createElementBlock as r, openBlock as s, normalizeStyle as _, normalizeClass as We, createBlock as oe, createCommentVNode as c, renderSlot as y, createElementVNode as h, createVNode as Se, unref as u, withCtx as m, normalizeProps as O, guardReactiveProps as E, createSlots as qe, Fragment as k, renderList as D, mergeProps as je, toDisplayString as U, withDirectives as Dt, createTextVNode as Te, vShow as It, Teleport as Bl, resolveDynamicComponent as zl, nextTick as Ol } from "vue";
+import { o as Lt, g as He, k as El, c as Nl, t as Yl, j as Xl, M as Vl, l as Mt, p as ie, a as W, d as N, Z as Bt, a1 as Rl, X as Gl, s as Pe, h as Ul, _ as Wl, a2 as T, $ as ge, a0 as x, a3 as zt, f as ql, i as jl, W as Ze, u as Hl, q as Zl, x as Jl, a4 as Ot } from "./lib-C5BH09_g.js";
+import { t as Kl, u as Ql } from "./useResponsive-DfdjqQps.js";
+import { u as eo, a as Je } from "./useNestedProp-CWo6bftQ.js";
+import { u as to } from "./usePrinter-DCJzEiS8.js";
+import { u as lo, B as oo } from "./BaseScanner-BgWxam9d.js";
+import { u as ao } from "./useSvgExport-DrjCWun4.js";
+import { u as no } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as so } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as uo } from "./useChartAccessibility-9icAAmYg.js";
+import ro from "./img-DUzJeMlr.js";
+import { _ as io } from "./Shape-DE6X_t31.js";
+import co from "./Title-DfFUb9hd.js";
+import vo from "./Legend-Web3GjlR.js";
+import { _ as ho } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Et = { 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" } } }, Nt = { 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" } } }, Yt = { 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" } } }, Xt = { 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" } } }, Vt = { 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" } } }, Rt = { 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" } } }, Gt = {
+  default: {},
+  dark: Et,
+  celebration: Nt,
+  celebrationNight: Yt,
+  concrete: Xt,
+  hack: Vt,
+  zen: Rt
+}, Wa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: Nt,
+  celebrationNight: Yt,
+  concrete: Xt,
+  dark: Et,
+  default: Gt,
+  hack: Vt,
+  zen: Rt
+}, Symbol.toStringTag, { value: "Module" })), fo = ["id"], yo = ["id"], go = ["xmlns", "viewBox"], po = ["width", "height"], bo = { key: 1 }, mo = ["id"], wo = ["stop-color"], ko = ["offset", "stop-color"], Co = ["offset", "stop-color"], xo = ["stop-color"], Ao = { key: 2 }, _o = ["id", "cx", "cy"], $o = ["stop-color", "stop-opacity"], Fo = ["stop-color"], So = ["id"], To = ["id"], Po = ["id"], Do = ["flood-color"], Io = ["id"], Lo = ["flood-color"], Mo = ["d", "stroke", "filter"], Bo = ["d", "stroke", "filter"], zo = ["cx", "cy", "r", "fill", "filter"], Oo = { key: 6 }, Eo = ["stroke", "d"], No = ["d", "fill", "stroke", "stroke-width", "filter"], Yo = { key: 0 }, Xo = ["d", "fill", "stroke", "stroke-width", "filter"], Vo = { key: 0 }, Ro = ["stroke", "d"], Go = { key: 0 }, Uo = ["d", "stroke", "stroke-width", "filter"], Wo = { key: 1 }, qo = ["d", "fill", "stroke", "stroke-width", "filter"], jo = ["d", "fill", "stroke", "stroke-width", "filter"], Ho = { key: 1 }, Zo = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Jo = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ko = { key: 0 }, Qo = ["d", "fill", "stroke", "stroke-width"], ea = ["cx", "cy", "r", "stroke"], ta = ["cx", "cy", "r", "fill"], la = ["cx", "cy", "r"], oa = { key: 0 }, aa = ["d", "stroke", "fill", "onMouseenter", "onMouseleave", "onClick"], na = { key: 1 }, sa = ["cx", "cy", "r"], ua = ["x", "y", "fill", "font-size"], ra = ["x", "y", "fill", "font-size"], ia = ["x", "y", "fill", "font-size"], ca = ["x", "y", "fill", "font-size"], va = ["filter"], da = { key: 0 }, ha = ["x", "y"], fa = { key: 1 }, ya = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], ga = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], pa = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], ba = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "innerHTML"], ma = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], wa = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "innerHTML"], ka = { key: 2 }, Ca = ["x", "y", "width"], xa = ["x", "y", "width"], Aa = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, go = ["id"], po = ["onClick"], mo = {
+}, _a = ["id"], $a = ["onClick"], Fa = {
   key: 7,
   class: "vue-ui-donut-hollow"
-}, bo = ["innerHTML"], wo = {
+}, Sa = ["innerHTML"], Ta = {
   __name: "vue-ui-donut",
   props: {
     config: {
@@ -36,62 +53,62 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
     }
   },
   emits: ["selectLegend", "selectDatapoint"],
-  setup(Ze, { expose: Yt, emit: Xt }) {
-    const Bt = le(() => import("./Tooltip-oWCO1HKy.js")), Vt = le(() => import("./BaseIcon-DLFL0M4-.js")), Et = le(() => import("./vue-ui-accordion-SSLXLlNz.js")), Rt = le(() => import("./DataTable-UCyd_BQI.js")), Gt = le(() => import("./PenAndPaper-BJSMejV9.js")), Ut = le(() => import("./UserOptions-BqmUW9Kp.js")), Wt = le(() => import("./PackageVersion-D_4Hr4S4.js")), qt = le(() => import("./BaseDraggableDialog-DhKIof09.js")), { vue_ui_donut: Ht } = Ul(), jt = _l(), x = Ze, we = f({
+  setup(Ke, { expose: Ut, emit: Wt }) {
+    const qt = le(() => import("./Tooltip-WD0Ros6G.js")), jt = le(() => import("./BaseIcon-CofSxalQ.js")), Ht = le(() => import("./vue-ui-accordion-DSdZUn2C.js")), Zt = le(() => import("./DataTable-CHaOCmsE.js")), Jt = le(() => import("./PenAndPaper-HCZQTkqi.js")), Kt = le(() => import("./UserOptions-B3I-s3Lw.js")), Qt = le(() => import("./PackageVersion-Bq_mtsqr.js")), el = le(() => import("./BaseDraggableDialog-CRF94NJQ.js")), { vue_ui_donut: tl } = eo(), { isThemeValid: ll, warnInvalidTheme: ol } = no(), al = Ll(), C = Ke, we = f({
       get() {
-        return !!x.dataset && x.dataset.length;
+        return !!C.dataset && C.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), B = Q(null), ke = p(null), Qt = p(null), Zt = p(null), Je = Q(null), Ke = Q(null), Z = Q(null), ve = Q(null), et = Q(null), tt = Q(null), lt = p(0), at = p(0), ot = p(0), nt = p(!1), pe = p(null), Ie = p(null), xe = f({
+    }), Y = Z(null), ke = b(null), nl = b(null), sl = b(null), Qe = Z(null), et = Z(null), J = Z(null), ce = Z(null), tt = Z(null), lt = Z(null), ot = b(0), at = b(0), nt = b(0), st = b(!1), pe = b(null), De = b(null), Ce = f({
       get: () => e.value.style.chart.layout.labels.percentage.fontSize,
       set: (t) => t
-    }), J = f({
+    }), K = f({
       get: () => e.value.style.chart.layout.labels.name.fontSize,
       set: (t) => t
     });
-    let Le = !1;
+    let Ie = !1;
     const q = () => {
-      !e.value.autoSize || Le || (Le = !0, requestAnimationFrame(() => {
-        Le = !1;
-        const t = e.value, a = ke.value, l = oe.value;
+      !e.value.autoSize || Ie || (Ie = !0, requestAnimationFrame(() => {
+        Ie = !1;
+        const t = e.value, a = ke.value, l = ae.value;
         if (!t.autoSize || !a || !l) return;
-        const [o, i, c, w] = l.getAttribute("viewBox").split(" ").map(Number), A = { x: o, y: i, width: c, height: w }, O = [
+        const [o, i, d, w] = l.getAttribute("viewBox").split(" ").map(Number), $ = { x: o, y: i, width: d, height: w }, B = [
           {
             selector: ".vue-data-ui-datalabel-value",
             baseSize: t.style.chart.layout.labels.percentage.fontSize,
             minSize: t.style.chart.layout.labels.percentage.minFontSize,
-            sizeRef: xe
+            sizeRef: Ce
           },
           {
             selector: ".vue-data-ui-datalabel-name",
             baseSize: t.style.chart.layout.labels.name.fontSize,
             minSize: t.style.chart.layout.labels.name.minFontSize,
-            sizeRef: J
+            sizeRef: K
           }
         ];
-        O.map((G) => a.querySelectorAll(G.selector).length).reduce((G, te) => G + te, 0) !== 0 && O.forEach(({ selector: G, baseSize: te, minSize: Ue, sizeRef: kl }) => {
-          a.querySelectorAll(G).forEach((xl) => {
-            const $l = Yl({
-              el: xl,
-              bounds: A,
+        B.map((G) => a.querySelectorAll(G.selector).length).reduce((G, te) => G + te, 0) !== 0 && B.forEach(({ selector: G, baseSize: te, minSize: Ue, sizeRef: Pl }) => {
+          a.querySelectorAll(G).forEach((Dl) => {
+            const Il = ql({
+              el: Dl,
+              bounds: $,
               currentFontSize: te,
               minFontSize: Ue,
               attempts: 200,
               padding: 1
             });
-            kl.value = $l;
+            Pl.value = Il;
           });
         });
       }));
     };
     Tt(async () => {
-      nt.value = !0, st(), requestAnimationFrame(q);
+      st.value = !0, ut(), requestAnimationFrame(q);
     });
-    let Me;
+    let Le;
     Tt(() => {
-      B.value && (Me = new ResizeObserver((t) => {
+      Y.value && (Le = new ResizeObserver((t) => {
         for (const a of t) {
           const { width: l, height: o } = a.contentRect;
           if (l > 0 && o > 0) {
@@ -99,77 +116,87 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
             break;
           }
         }
-      }), Me.observe(B.value.parentElement));
+      }), Le.observe(Y.value.parentElement));
     }), Pt(() => {
-      Me?.disconnect();
+      Le?.disconnect();
     }), Pt(() => {
-      Z.value && (ve.value && Z.value.unobserve(ve.value), Z.value.disconnect());
+      J.value && (ce.value && J.value.unobserve(ce.value), J.value.disconnect());
     });
-    const ze = f(() => !!e.value.debug);
-    function st() {
-      if (Lt(x.dataset) ? (je({
+    const Me = f(() => !!e.value.debug);
+    function ut() {
+      if (Lt(C.dataset) ? (He({
         componentName: "VueUiDonut",
         type: "dataset",
-        debug: ze.value
-      }), we.value = !1, _e.value = !0) : (x.dataset.forEach((t, a) => {
-        Pl({
+        debug: Me.value
+      }), we.value = !1, Ae.value = !0) : (C.dataset.forEach((t, a) => {
+        El({
           datasetObject: t,
           requiredAttributes: ["name", "values"]
         }).forEach((l) => {
-          je({
+          He({
             componentName: "VueUiDonut",
             type: "datasetSerieAttribute",
             property: l,
             index: a,
-            debug: ze.value
-          }), we.value = !1, _e.value = !0;
+            debug: Me.value
+          }), we.value = !1, Ae.value = !0;
         });
-      }), x.dataset.forEach((t, a) => {
-        (!t.name || t.name === "") && je({
+      }), C.dataset.forEach((t, a) => {
+        (!t.name || t.name === "") && He({
           componentName: "VueUiDonut",
           type: "datasetAttributeEmpty",
           property: "name",
           index: a,
-          debug: ze.value
+          debug: Me.value
         });
-      })), Lt(x.dataset) || (_e.value = e.value.loading), e.value.responsive) {
-        const t = Rl(() => {
-          const { width: a, height: l } = Gl({
-            chart: B.value,
-            title: e.value.style.chart.title.text ? Je.value : null,
-            legend: e.value.style.chart.legend.show ? Ke.value : null,
-            source: et.value,
-            noTitle: tt.value,
+      })), Lt(C.dataset) || (Ae.value = e.value.loading), e.value.responsive) {
+        const t = Kl(() => {
+          const { width: a, height: l } = Ql({
+            chart: Y.value,
+            title: e.value.style.chart.title.text ? Qe.value : null,
+            legend: e.value.style.chart.legend.show ? et.value : null,
+            source: tt.value,
+            noTitle: lt.value,
             padding: e.value.autoSize ? void 0 : dt.value
           });
           requestAnimationFrame(() => {
             n.value.width = a, n.value.height = l, q();
           });
         });
-        Z.value && (ve.value && Z.value.unobserve(ve.value), Z.value.disconnect()), Z.value = new ResizeObserver(t), ve.value = B.value.parentNode, Z.value.observe(ve.value);
+        J.value && (ce.value && J.value.unobserve(ce.value), J.value.disconnect()), J.value = new ResizeObserver(t), ce.value = Y.value.parentNode, J.value.observe(ce.value);
       }
     }
-    const g = p(Fl());
-    p(null);
-    const Oe = p(!1), De = p(""), V = p(null), ut = p(0);
-    function Ne() {
-      const t = Nt({
-        userConfig: x.config,
-        defaultConfig: Ht
+    const g = b(Nl()), Be = b(!1), ze = b(""), X = b(null), rt = b(0);
+    function Oe() {
+      const t = Je({
+        userConfig: C.config,
+        defaultConfig: tl
       });
       let a = {};
-      return t.theme ? a = {
-        ...Nt({
-          userConfig: ta.vue_ui_donut[t.theme] || x.config,
+      const l = t.theme;
+      if (!l)
+        a = t;
+      else if (!ll.value(t))
+        ol(t), a = t;
+      else {
+        const o = Je({
+          userConfig: Gt[l] || C.config,
           defaultConfig: t
-        }),
-        customPalette: Xl[t.theme] || ie
-      } : a = t, x.config && Qe(x.config, "events.datapointEnter") ? a.events.datapointEnter = x.config.events.datapointEnter : a.events.datapointEnter = null, x.config && Qe(x.config, "events.datapointLeave") ? a.events.datapointLeave = x.config.events.datapointLeave : a.events.datapointLeave = null, x.config && Qe(x.config, "events.datapointClick") ? a.events.datapointClick = x.config.events.datapointClick : a.events.datapointClick = null, a;
+        });
+        a = {
+          ...Je({
+            userConfig: C.config,
+            defaultConfig: o
+          }),
+          customPalette: t.customPalette.length ? t.customPalette : jl[l] || ie
+        };
+      }
+      return C.config && Ze(C.config, "events.datapointEnter") ? a.events.datapointEnter = C.config.events.datapointEnter : a.events.datapointEnter = null, C.config && Ze(C.config, "events.datapointLeave") ? a.events.datapointLeave = C.config.events.datapointLeave : a.events.datapointLeave = null, C.config && Ze(C.config, "events.datapointClick") ? a.events.datapointClick = C.config.events.datapointClick : a.events.datapointClick = null, a;
     }
-    const e = p(Ne()), { loading: $e, FINAL_DATASET: de, manualLoading: _e, skeletonDataset: Jt } = ql({
-      ...Cl(x),
+    const e = b(Oe()), { loading: xe, FINAL_DATASET: ve, manualLoading: Ae, skeletonDataset: ul } = lo({
+      ...Ml(C),
       FINAL_CONFIG: e,
-      prepareConfig: Ne,
+      prepareConfig: Oe,
       skeletonDataset: [
         {
           name: "",
@@ -187,7 +214,7 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
           color: "#CACACA"
         }
       ],
-      skeletonConfig: Il({
+      skeletonConfig: Yl({
         defaultConfig: e.value,
         userConfig: {
           useCssAnimation: !1,
@@ -224,54 +251,54 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
           }
         }
       })
-    }), S = p(!0), H = Q([]);
-    function Kt(t, a = 1e3, l = 50) {
+    }), F = b(!0), j = Z([]);
+    function rl(t, a = 1e3, l = 50) {
       return new Promise((o) => {
         const i = t.length;
-        H.value = Array(i).fill(0);
-        let c = 0;
-        t.forEach((w, A) => {
+        j.value = Array(i).fill(0);
+        let d = 0;
+        t.forEach((w, $) => {
           setTimeout(() => {
-            const O = performance.now();
-            function D(G) {
-              const te = Math.min((G - O) / a, 1), Ue = Dt(te);
-              H.value[A] = w * Ue, H.value = [...H.value], te < 1 ? (requestAnimationFrame(D), requestAnimationFrame(q)) : (H.value[A] = w, H.value = [...H.value], c += 1, c === i && o(), requestAnimationFrame(q));
+            const B = performance.now();
+            function z(G) {
+              const te = Math.min((G - B) / a, 1), Ue = Ot(te);
+              j.value[$] = w * Ue, j.value = [...j.value], te < 1 ? (requestAnimationFrame(z), requestAnimationFrame(q)) : (j.value[$] = w, j.value = [...j.value], d += 1, d === i && o(), requestAnimationFrame(q));
             }
-            requestAnimationFrame(D);
-          }, A * l);
+            requestAnimationFrame(z);
+          }, $ * l);
         });
       });
     }
-    const rt = p(!1);
+    const it = b(!1);
     ye(
-      () => $e.value,
+      () => xe.value,
       async (t) => {
-        if (t || rt.value) return;
-        const a = de.value === Jt, l = e.value.startAnimation?.show;
+        if (t || it.value) return;
+        const a = ve.value === ul, l = e.value.startAnimation?.show;
         if (!a && l) {
-          rt.value = !0;
-          const o = de.value.map(
-            (i) => i.values.reduce((c, w) => c + w, 0)
+          it.value = !0;
+          const o = ve.value.map(
+            (i) => i.values.reduce((d, w) => d + w, 0)
           );
-          await Kt(
+          await rl(
             o,
             e.value.startAnimation.durationMs,
             e.value.startAnimation.staggerMs
           );
         }
-        S.value = !1;
+        F.value = !1;
       },
       { immediate: !0 }
     );
-    const { userOptionsVisible: Ye, setUserOptionsVisibility: it, keepUserOptionState: vt } = Ql({ config: e.value }), { svgRef: oe } = Zl({ config: e.value.style.chart.title });
-    function el() {
-      it(!0);
+    const { userOptionsVisible: Ee, setUserOptionsVisibility: ct, keepUserOptionState: vt } = so({ config: e.value }), { svgRef: ae } = uo({ config: e.value.style.chart.title });
+    function il() {
+      ct(!0);
     }
-    function tl() {
-      it(!1);
+    function cl() {
+      ct(!1);
     }
-    ye(() => x.config, (t) => {
-      $e.value || (e.value = Ne()), Ye.value = !e.value.userOptions.showOnChartHover, st(), lt.value += 1, at.value += 1, ot.value += 1, m.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, m.value.showTable = e.value.table.show, m.value.showTooltip = e.value.style.chart.tooltip.show, n.value.height = e.value.style.chart.height, n.value.width = e.value.style.chart.width;
+    ye(() => C.config, (t) => {
+      xe.value || (e.value = Oe()), Ee.value = !e.value.userOptions.showOnChartHover, ut(), ot.value += 1, at.value += 1, nt.value += 1, p.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, p.value.showTable = e.value.table.show, p.value.showTooltip = e.value.style.chart.tooltip.show, n.value.height = e.value.style.chart.height, n.value.width = e.value.style.chart.width;
     }, { deep: !0 });
     const dt = f(() => {
       const { top: t, right: a, bottom: l, left: o } = e.value.style.chart.padding;
@@ -282,11 +309,11 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
         bottom: l,
         left: o
       };
-    }), { isPrinting: ct, isImaging: ht, generatePdf: ft, generateImage: yt } = Wl({
+    }), { isPrinting: ht, isImaging: ft, generatePdf: yt, generateImage: gt } = to({
       elementId: `donut__${g.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-donut",
       options: e.value.userOptions.print
-    }), ll = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), gt = f(() => Ll(e.value.customPalette)), m = p({
+    }), vl = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), pt = f(() => Xl(e.value.customPalette)), p = b({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
@@ -294,7 +321,7 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
       showTooltip: e.value.style.chart.tooltip.show
     });
     ye(e, () => {
-      m.value = {
+      p.value = {
         dataLabels: {
           show: e.value.style.chart.layout.labels.dataLabels.show
         },
@@ -302,18 +329,18 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
         showTooltip: e.value.style.chart.tooltip.show
       };
     }, { immediate: !0 });
-    const n = p({
+    const n = b({
       height: e.value.style.chart.height,
       width: e.value.style.chart.width
     }), ne = f(() => {
       if (e.value.pie)
-        return _.value;
-      const t = e.value.style.chart.layout.donut.strokeWidth / 512, a = Math.min(n.value.width, n.value.height) * t, l = a > _.value ? _.value : a;
+        return A.value;
+      const t = e.value.style.chart.layout.donut.strokeWidth / 512, a = Math.min(n.value.width, n.value.height) * t, l = a > A.value ? A.value : a;
       return Math.max(l, 12 * (1 + t));
-    }), pt = Xt, L = f(() => de.value.map((t, a) => ({
+    }), bt = Wt, I = f(() => ve.value.map((t, a) => ({
       name: t.name,
-      color: Mt(t.color) || gt.value[a] || ie[a] || ie[a % ie.length],
-      value: Ml(t.values.reduce((l, o) => l + o, 0)),
+      color: Mt(t.color) || pt.value[a] || ie[a] || ie[a % ie.length],
+      value: Vl(t.values.reduce((l, o) => l + o, 0)),
       absoluteValues: t.values,
       comment: t.comment || "",
       patternIndex: a,
@@ -321,68 +348,68 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
       ghost: !1,
       pattern: `pattern_${g.value}_${a}`
     })));
-    ye(() => x.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (_e.value = !1);
+    ye(() => C.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (Ae.value = !1);
     }, { immediate: !0 });
-    const M = Q(L.value);
-    ye(() => L.value, (t) => {
-      M.value = t, requestAnimationFrame(q);
+    const L = Z(I.value);
+    ye(() => I.value, (t) => {
+      L.value = t, requestAnimationFrame(q);
     });
-    function al() {
-      return L.value.map((t) => ({
+    function dl() {
+      return I.value.map((t) => ({
         name: t.name,
         color: t.color,
         value: t.value
       }));
     }
-    const z = p([]), se = p(!1);
-    function mt({ from: t, to: a, duration: l, onUpdate: o, onDone: i, easing: c = Dt }) {
+    const M = b([]), se = b(!1);
+    function mt({ from: t, to: a, duration: l, onUpdate: o, onDone: i, easing: d = Ot }) {
       const w = performance.now();
-      function A(O) {
-        const D = Math.min((O - w) / l, 1), G = c(D), te = t + (a - t) * G;
-        o(te, D), D < 1 ? requestAnimationFrame(A) : (o(a, 1), i && i());
+      function $(B) {
+        const z = Math.min((B - w) / l, 1), G = d(z), te = t + (a - t) * G;
+        o(te, z), z < 1 ? requestAnimationFrame($) : (o(a, 1), i && i());
       }
-      requestAnimationFrame(A);
+      requestAnimationFrame($);
     }
-    function Ce(t) {
-      const a = L.value.find((i, c) => c === t);
-      let o = M.value.find((i, c) => c === t).value;
-      if (z.value.includes(t)) {
-        let c = function() {
-          M.value = M.value.map(
-            (A, O) => t === O ? { ...A, value: i } : A
+    function _e(t) {
+      const a = I.value.find((i, d) => d === t);
+      let o = L.value.find((i, d) => d === t).value;
+      if (M.value.includes(t)) {
+        let d = function() {
+          L.value = L.value.map(
+            ($, B) => t === B ? { ...$, value: i } : $
           );
         }, w = function() {
           se.value = !0, mt({
             from: o,
             to: i,
             duration: e.value.serieToggleAnimation.durationMs,
-            onUpdate: (A, O) => {
-              M.value = M.value.map(
-                (D, G) => t === G ? { ...D, value: A } : D
+            onUpdate: ($, B) => {
+              L.value = L.value.map(
+                (z, G) => t === G ? { ...z, value: $ } : z
               ), requestAnimationFrame(q);
             },
             onDone: () => {
-              c(), se.value = !1;
+              d(), se.value = !1;
             }
           });
         };
-        z.value = z.value.filter((A) => A !== t);
+        M.value = M.value.filter(($) => $ !== t);
         const i = a.value;
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? w() : (c(), requestAnimationFrame(q));
-      } else if (z.value.length < L.value.length - 1) {
+        e.value.serieToggleAnimation.show && e.value.type === "classic" ? w() : (d(), requestAnimationFrame(q));
+      } else if (M.value.length < I.value.length - 1) {
         let i = function() {
-          z.value.push(t), M.value = M.value.map(
-            (w, A) => t === A ? { ...w, value: 0 } : w
+          M.value.push(t), L.value = L.value.map(
+            (w, $) => t === $ ? { ...w, value: 0 } : w
           );
-        }, c = function() {
+        }, d = function() {
           se.value = !0, mt({
             from: o,
             to: 0,
             duration: e.value.serieToggleAnimation.durationMs,
-            onUpdate: (w, A) => {
-              M.value = M.value.map(
-                (O, D) => t === D ? { ...O, value: w } : O
+            onUpdate: (w, $) => {
+              L.value = L.value.map(
+                (B, z) => t === z ? { ...B, value: w } : B
               ), requestAnimationFrame(q);
             },
             onDone: () => {
@@ -390,36 +417,36 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
             }
           });
         };
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? c() : i();
+        e.value.serieToggleAnimation.show && e.value.type === "classic" ? d() : i();
       }
-      pt("selectLegend", j.value.map((i) => ({
+      bt("selectLegend", H.value.map((i) => ({
         name: i.name,
         color: i.color,
         value: i.value
       })));
     }
-    function bt(t) {
-      if (!L.value.length)
+    function wt(t) {
+      if (!I.value.length)
         return e.value.debug && console.warn("VueUiDonut - There are no series to show."), null;
-      const a = L.value.find((l) => l.name === t);
+      const a = I.value.find((l) => l.name === t);
       return a || (e.value.debug && console.warn(`VueUiDonut - Series name not found "${t}"`), null);
     }
-    function ol(t) {
-      const a = bt(t);
-      a !== null && z.value.includes(a.seriesIndex) && Ce(a.seriesIndex);
+    function hl(t) {
+      const a = wt(t);
+      a !== null && M.value.includes(a.seriesIndex) && _e(a.seriesIndex);
     }
-    function nl(t) {
-      const a = bt(t);
-      a !== null && (z.value.includes(a.seriesIndex) || Ce(a.seriesIndex));
+    function fl(t) {
+      const a = wt(t);
+      a !== null && (M.value.includes(a.seriesIndex) || _e(a.seriesIndex));
     }
-    const sl = f(() => de.value.reduce((t, a) => t + a.values.reduce((l, o) => l + o, 0), 0)), j = f(() => {
-      if (S.value && !$e.value) {
-        const t = H.value.map((l, o) => ({
-          ...L.value[o],
+    const yl = f(() => ve.value.reduce((t, a) => t + a.values.reduce((l, o) => l + o, 0), 0)), H = f(() => {
+      if (F.value && !xe.value) {
+        const t = j.value.map((l, o) => ({
+          ...I.value[o],
           value: l,
-          color: L.value[o].color,
+          color: I.value[o].color,
           ghost: !1
-        })), a = sl.value - H.value.reduce((l, o) => l + o, 0);
+        })), a = yl.value - j.value.reduce((l, o) => l + o, 0);
         return a > 0 && t.push({
           name: "__ghost__",
           value: a,
@@ -427,21 +454,21 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
           ghost: !0
         }), t;
       } else
-        return M.value.forEach((t, a) => {
+        return L.value.forEach((t, a) => {
           if ([null, void 0].includes(t.values))
             return {
               ...t,
               values: []
             };
-        }), M.value.map((t, a) => ({
+        }), L.value.map((t, a) => ({
           ...t,
           seriesIndex: a
-        })).filter((t, a) => !z.value.includes(a));
-    }), Xe = f(() => de.value.map((t, a) => {
-      const l = (t.values || []).reduce((i, c) => i + c, 0), o = l / de.value.map((i) => (i.values || []).reduce((c, w) => c + w, 0)).reduce((i, c) => i + c, 0);
+        })).filter((t, a) => !M.value.includes(a));
+    }), Ne = f(() => ve.value.map((t, a) => {
+      const l = (t.values || []).reduce((i, d) => i + d, 0), o = l / ve.value.map((i) => (i.values || []).reduce((d, w) => d + w, 0)).reduce((i, d) => i + d, 0);
       return {
         name: t.name,
-        color: Mt(t.color) || gt.value[a] || ie[a] || ie[a % ie.length],
+        color: Mt(t.color) || pt.value[a] || ie[a] || ie[a % ie.length],
         value: l,
         shape: "circle",
         patternIndex: a,
@@ -449,30 +476,30 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
       };
     }).map((t, a) => ({
       ...t,
-      opacity: z.value.includes(a) ? 0.5 : 1,
-      segregate: () => !se.value && Ce(a),
-      isSegregated: z.value.includes(a),
-      display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${e.value.style.chart.legend.showValue ? W(e.value.style.chart.layout.labels.value.formatter, t.value, X({
+      opacity: M.value.includes(a) ? 0.5 : 1,
+      segregate: () => !se.value && _e(a),
+      isSegregated: M.value.includes(a),
+      display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${e.value.style.chart.legend.showValue ? W(e.value.style.chart.layout.labels.value.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.legend.roundingValue
-      }), { datapoint: t, index: a }) : ""}${e.value.style.chart.legend.showPercentage ? z.value.includes(a) ? `${e.value.style.chart.legend.showValue ? "(" : ""}${cl(t.proportion * 100)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? " (" : ""}${isNaN(t.value / F.value) ? "-" : W(e.value.style.chart.layout.labels.percentage.formatter, wt(t), X({
-        v: wt(t),
+      }), { datapoint: t, index: a }) : ""}${e.value.style.chart.legend.showPercentage ? M.value.includes(a) ? `${e.value.style.chart.legend.showValue ? "(" : ""}${kl(t.proportion * 100)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? " (" : ""}${isNaN(t.value / P.value) ? "-" : W(e.value.style.chart.layout.labels.percentage.formatter, kt(t), N({
+        v: kt(t),
         s: "%",
         r: e.value.style.chart.legend.roundingPercentage
       }))}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""}`
-    }))), ul = f(() => ({
+    }))), gl = f(() => ({
       cy: "donut-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), _ = f(() => {
+    })), A = f(() => {
       const t = e.value.style.chart.layout.donut.radiusRatio, a = Math.max(0.1, Math.min(0.50001, t)), l = Math.min(n.value.width * a, n.value.height * a);
       return Math.max(12, l);
-    }), T = f(() => zt({ series: j.value }, n.value.width / 2, n.value.height / 2, _.value, _.value, 1.99999, 2, 1, 360, 105.25, ne.value)), rl = f(() => Math.abs(j.value.map((t) => t.value).reduce((t, a) => t + a, 0)) > 0), il = f(() => zt({
+    }), S = f(() => Bt({ series: H.value }, n.value.width / 2, n.value.height / 2, A.value, A.value, 1.99999, 2, 1, 360, 105.25, ne.value)), pl = f(() => Math.abs(H.value.map((t) => t.value).reduce((t, a) => t + a, 0)) > 0), bl = f(() => Bt({
       series: [
         {
           value: 1,
@@ -484,33 +511,33 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
           absoluteValues: [1]
         }
       ]
-    }, n.value.width / 2, n.value.height / 2, _.value, _.value, 1.99999, 2, 1, 360, 105.25, ne.value)), E = f(() => T.value.filter((t) => !t.ghost)), d = f(() => {
-      const t = Math.max(...j.value.map((l) => l.value)), a = j.value.map((l) => l.value / t);
-      return zl({
+    }, n.value.width / 2, n.value.height / 2, A.value, A.value, 1.99999, 2, 1, 360, 105.25, ne.value)), V = f(() => S.value.filter((t) => !t.ghost)), v = f(() => {
+      const t = Math.max(...H.value.map((l) => l.value)), a = H.value.map((l) => l.value / t);
+      return Rl({
         series: a,
         center: {
           x: n.value.width / 2,
           y: n.value.height / 2
         },
         maxRadius: Math.min(n.value.width, n.value.height) / 3,
-        hasGhost: S.value
+        hasGhost: F.value
       });
     });
-    function ce(t) {
+    function de(t) {
       return t.x > n.value.width / 2 + 6 ? "start" : t.x < n.value.width / 2 - 6 ? "end" : "middle";
     }
-    function vl(t) {
-      return t.middlePoint.y > n.value.height / 2 ? P({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 100, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y : P({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 0, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y - 100;
+    function ml(t) {
+      return t.middlePoint.y > n.value.height / 2 ? T({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 100, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y : T({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 0, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y - 100;
     }
     function R(t) {
       return t.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
     }
-    function Be(t, a) {
-      const l = t.value / dl(a);
+    function Ye(t, a) {
+      const l = t.value / wl(a);
       return isNaN(l) ? 0 : W(
         e.value.style.chart.layout.labels.percentage.formatter,
         l * 100,
-        X({
+        N({
           v: l * 100,
           s: "%",
           r: e.value.style.chart.layout.labels.percentage.rounding
@@ -518,38 +545,38 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
         { datapoint: t }
       );
     }
-    function dl(t) {
+    function wl(t) {
       return [...t].map((a) => a.value).reduce((a, l) => a + l, 0);
     }
-    const F = f(() => j.value.map((t) => t.value).reduce((t, a) => t + a, 0)), Ve = f(() => F.value / j.value.length);
-    function wt(t) {
-      return se.value ? t.proportion * 100 : t.value / F.value * 100;
+    const P = f(() => H.value.map((t) => t.value).reduce((t, a) => t + a, 0)), Xe = f(() => P.value / H.value.length);
+    function kt(t) {
+      return se.value ? t.proportion * 100 : t.value / P.value * 100;
     }
-    const Ee = p(null), me = p(!1);
+    const Ve = b(null), be = b(!1);
     function he({ datapoint: t, seriesIndex: a }) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a }), Oe.value = !1, V.value = null;
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a }), Be.value = !1, X.value = null;
     }
     function fe({ datapoint: t, relativeIndex: a, seriesIndex: l, show: o = !1 }) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: l }), Ee.value = { datapoint: t, seriesIndex: l, config: e.value, series: L.value }, Oe.value = o, V.value = a;
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: l }), Ve.value = { datapoint: t, seriesIndex: l, config: e.value, series: I.value }, Be.value = o, X.value = a;
       let i = "";
-      const c = e.value.style.chart.tooltip.customFormat;
-      if (me.value = !1, El(c))
+      const d = e.value.style.chart.tooltip.customFormat;
+      if (be.value = !1, Jl(d))
         try {
-          const w = c({
+          const w = d({
             seriesIndex: l,
             datapoint: t,
-            series: L.value,
+            series: I.value,
             config: e.value
           });
-          typeof w == "string" && (De.value = w, me.value = !0);
+          typeof w == "string" && (ze.value = w, be.value = !0);
         } catch {
-          console.warn("Custom format cannot be applied."), me.value = !1;
+          console.warn("Custom format cannot be applied."), be.value = !1;
         }
-      if (!me.value) {
-        if (i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, i += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${t.color}"/>${jt.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${g.value}_${l})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (i += `<b>${W(
+      if (!be.value) {
+        if (i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, i += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${t.color}"/>${al.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${g.value}_${l})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (i += `<b>${W(
           e.value.style.chart.layout.labels.value.formatter,
           t.value,
-          X({
+          N({
             p: e.value.style.chart.layout.labels.dataLabels.prefix,
             v: t.value,
             s: e.value.style.chart.layout.labels.dataLabels.suffix,
@@ -564,7 +591,7 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
           const w = W(
             e.value.style.chart.layout.labels.percentage.formatter,
             t.proportion * 100,
-            X({
+            N({
               v: t.proportion * 100,
               s: "%",
               r: e.value.style.chart.tooltip.roundingPercentage
@@ -577,39 +604,39 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
           );
           e.value.style.chart.tooltip.showValue ? i += `<span>(${w})</span></div>` : i += `<b>${w}</b></div>`;
         }
-        e.value.style.chart.comments.showInTooltip && t.comment && (i += `<div class="vue-data-ui-tooltip-comment" style="background:${t.color}20; padding: 6px; margin-bottom: 6px; margin-top:6px; border-left: 1px solid ${t.color}">${t.comment}</div>`), De.value = `<div>${i}</div>`;
+        e.value.style.chart.comments.showInTooltip && t.comment && (i += `<div class="vue-data-ui-tooltip-comment" style="background:${t.color}20; padding: 6px; margin-bottom: 6px; margin-top:6px; border-left: 1px solid ${t.color}">${t.comment}</div>`), ze.value = `<div>${i}</div>`;
       }
     }
     function ue(t) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(V.value) && V.value !== t ? `url(#blur_${g.value})` : "";
+      return e.value.useBlurOnHover && ![null, void 0].includes(X.value) && X.value !== t ? `url(#blur_${g.value})` : "";
     }
-    const K = f(() => {
-      const t = j.value.map((l) => ({
+    const Q = f(() => {
+      const t = H.value.map((l) => ({
         name: l.name,
         color: l.color
-      })), a = j.value.map((l) => l.value);
+      })), a = H.value.map((l) => l.value);
       return { head: t, body: a };
     });
     function Re(t = null) {
-      Tl(() => {
-        const a = K.value.head.map((i, c) => [[
+      Ol(() => {
+        const a = Q.value.head.map((i, d) => [[
           i.name
-        ], [K.value.body[c]], [isNaN(K.value.body[c] / F.value) ? "-" : K.value.body[c] / F.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = Bl(l);
-        t ? t(o) : Vl({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-donut" });
+        ], [Q.value.body[d]], [isNaN(Q.value.body[d] / P.value) ? "-" : Q.value.body[d] / P.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = Hl(l);
+        t ? t(o) : Zl({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-donut" });
       });
     }
-    const Ae = f(() => {
+    const $e = f(() => {
       const t = [
         ' <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>',
-        X({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: F.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
+        N({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: P.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
         "100%"
-      ], a = K.value.head.map((i, c) => [
+      ], a = Q.value.head.map((i, d) => [
         {
           color: i.color,
           name: i.name || "-"
         },
-        K.value.body[c],
-        isNaN(K.value.body[c] / F.value) ? "-" : (K.value.body[c] / F.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
+        Q.value.body[d],
+        isNaN(Q.value.body[d] / P.value) ? "-" : (Q.value.body[d] / P.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
       ]), l = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -633,51 +660,51 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
         body: a,
         config: l
       };
-    }), re = p(!1);
-    function kt(t) {
-      re.value = t, ut.value += 1;
+    }), re = b(!1);
+    function Ct(t) {
+      re.value = t, rt.value += 1;
     }
     const xt = f(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
-    function cl(t) {
+    function kl(t) {
       return t.toFixed(e.value.style.chart.legend.roundingPercentage).split("").map((a) => "-").join("");
     }
     function ee(t, a) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.seriesIndex }), pt("selectDatapoint", { datapoint: t, index: a });
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.seriesIndex }), bt("selectDatapoint", { datapoint: t, index: a });
     }
-    function $t() {
-      m.value.showTable = !m.value.showTable;
+    function At() {
+      p.value.showTable = !p.value.showTable;
     }
     function _t() {
-      m.value.dataLabels.show = !m.value.dataLabels.show;
+      p.value.dataLabels.show = !p.value.dataLabels.show;
     }
-    function Ct() {
-      m.value.showTooltip = !m.value.showTooltip;
+    function $t() {
+      p.value.showTooltip = !p.value.showTooltip;
     }
-    const Se = p(!1);
+    const Fe = b(!1);
     function Ge() {
-      Se.value = !Se.value;
+      Fe.value = !Fe.value;
     }
-    async function hl({ scale: t = 2 } = {}) {
-      if (!B.value) return;
-      const { width: a, height: l } = B.value.getBoundingClientRect(), o = a / l, { imageUri: i, base64: c } = await Jl({ domElement: B.value, base64: !0, img: !0, scale: t });
+    async function Cl({ scale: t = 2 } = {}) {
+      if (!Y.value) return;
+      const { width: a, height: l } = Y.value.getBoundingClientRect(), o = a / l, { imageUri: i, base64: d } = await ro({ domElement: Y.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: i,
-        base64: c,
+        base64: d,
         title: e.value.style.chart.title.text,
         width: a,
         height: l,
         aspectRatio: o
       };
     }
-    function fl() {
+    function xl() {
       if (!ke.value) return;
       const { x: t, y: a, width: l, height: o } = ke.value.getBBox();
-      oe.value && oe.value.setAttribute("viewBox", `${t} ${a} ${l + Math.min(0, t)} ${o + Math.min(0, a)}`);
+      ae.value && ae.value.setAttribute("viewBox", `${t} ${a} ${l + Math.min(0, t)} ${o + Math.min(0, a)}`);
     }
-    const be = f(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, a = m.value.showTable;
+    const me = f(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = p.value.showTable;
       return {
-        component: t ? qt : Et,
+        component: t ? el : Ht,
         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,
@@ -685,7 +712,7 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
           isFullscreen: re.value,
-          fullscreenParent: B.value,
+          fullscreenParent: Y.value,
           forcedWidth: Math.min(500, window.innerWidth * 0.8)
         } : {
           hideDetails: !0,
@@ -704,97 +731,97 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
         }
       };
     });
-    ye(() => m.value.showTable, (t) => {
+    ye(() => p.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && pe.value ? pe.value.open() : "close" in pe.value && pe.value.close());
     });
-    function At() {
-      m.value.showTable = !1, Ie.value && Ie.value.setTableIconState(!1);
+    function Ft() {
+      p.value.showTable = !1, De.value && De.value.setTableIconState(!1);
     }
-    const yl = f(() => Xe.value.map((t) => ({
+    const Al = f(() => Ne.value.map((t) => ({
       ...t,
       name: t.display
-    }))), gl = f(() => e.value.style.chart.backgroundColor), pl = f(() => e.value.style.chart.legend), ml = f(() => e.value.style.chart.title), { exportSvg: bl, getSvg: wl } = jl({
-      svg: oe,
-      title: ml,
-      legend: pl,
-      legendItems: yl,
-      backgroundColor: gl
+    }))), _l = f(() => e.value.style.chart.backgroundColor), $l = f(() => e.value.style.chart.legend), Fl = f(() => e.value.style.chart.title), { exportSvg: Sl, getSvg: Tl } = ao({
+      svg: ae,
+      title: Fl,
+      legend: $l,
+      legendItems: Al,
+      backgroundColor: _l
     });
     async function St({ isCb: t }) {
       if (t) {
-        const { blob: a, url: l, text: o, dataUrl: i } = await wl();
+        const { blob: a, url: l, text: o, dataUrl: i } = await Tl();
         e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: i });
       } else
-        bl();
+        Sl();
     }
-    return Yt({
-      autoSize: fl,
-      getData: al,
-      getImage: hl,
-      generatePdf: ft,
+    return Ut({
+      autoSize: xl,
+      getData: dl,
+      getImage: Cl,
+      generatePdf: yt,
       generateCsv: Re,
-      generateImage: yt,
+      generateImage: gt,
       generateSvg: St,
-      hideSeries: nl,
-      showSeries: ol,
-      toggleTable: $t,
+      hideSeries: fl,
+      showSeries: hl,
+      toggleTable: At,
       toggleLabels: _t,
-      toggleTooltip: Ct,
+      toggleTooltip: $t,
       toggleAnnotator: Ge,
-      toggleFullscreen: kt
+      toggleFullscreen: Ct
     }), (t, a) => (s(), r("div", {
       ref_key: "donutChart",
-      ref: B,
+      ref: Y,
       class: We(`vue-data-ui-component vue-ui-donut ${re.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: C(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      style: _(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
       id: `donut__${g.value}`,
-      onMouseenter: el,
-      onMouseleave: tl
+      onMouseenter: il,
+      onMouseleave: cl
     }, [
-      e.value.userOptions.buttons.annotator && u(oe) ? (s(), ae(u(Gt), {
+      e.value.userOptions.buttons.annotator && u(ae) ? (s(), oe(u(Jt), {
         key: 0,
         color: e.value.style.chart.color,
         backgroundColor: e.value.style.chart.backgroundColor,
-        active: Se.value,
-        svgRef: u(oe),
+        active: Fe.value,
+        svgRef: u(ae),
         onClose: Ge
       }, {
-        "annotator-action-close": b(() => [
+        "annotator-action-close": m(() => [
           y(t.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
-        "annotator-action-color": b(({ color: l }) => [
-          y(t.$slots, "annotator-action-color", N(Y({ color: l })), void 0, !0)
+        "annotator-action-color": m(({ color: l }) => [
+          y(t.$slots, "annotator-action-color", O(E({ color: l })), void 0, !0)
         ]),
-        "annotator-action-draw": b(({ mode: l }) => [
-          y(t.$slots, "annotator-action-draw", N(Y({ mode: l })), void 0, !0)
+        "annotator-action-draw": m(({ mode: l }) => [
+          y(t.$slots, "annotator-action-draw", O(E({ mode: l })), void 0, !0)
         ]),
-        "annotator-action-undo": b(({ disabled: l }) => [
-          y(t.$slots, "annotator-action-undo", N(Y({ disabled: l })), void 0, !0)
+        "annotator-action-undo": m(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-undo", O(E({ disabled: l })), void 0, !0)
         ]),
-        "annotator-action-redo": b(({ disabled: l }) => [
-          y(t.$slots, "annotator-action-redo", N(Y({ disabled: l })), void 0, !0)
+        "annotator-action-redo": m(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-redo", O(E({ disabled: l })), void 0, !0)
         ]),
-        "annotator-action-delete": b(({ disabled: l }) => [
-          y(t.$slots, "annotator-action-delete", N(Y({ disabled: l })), void 0, !0)
+        "annotator-action-delete": m(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-delete", O(E({ disabled: l })), void 0, !0)
         ]),
         _: 3
-      }, 8, ["color", "backgroundColor", "active", "svgRef"])) : v("", !0),
+      }, 8, ["color", "backgroundColor", "active", "svgRef"])) : c("", !0),
       y(t.$slots, "userConfig", {}, void 0, !0),
-      ll.value ? (s(), r("div", {
+      vl.value ? (s(), r("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: tt,
+        ref: lt,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : v("", !0),
+      }, null, 512)) : c("", !0),
       e.value.style.chart.title.text ? (s(), r("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: Je,
+        ref: Qe,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (s(), ae(ea, {
-          key: `title_${lt.value}`,
+        (s(), oe(co, {
+          key: `title_${ot.value}`,
           config: {
             title: {
               cy: "donut-div-title",
@@ -806,18 +833,18 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : v("", !0),
+      ], 512)) : c("", !0),
       h("div", {
         id: `legend-top-${g.value}`
-      }, null, 8, na),
-      e.value.userOptions.show && we.value && (u(vt) || u(Ye)) ? (s(), ae(u(Ut), {
+      }, null, 8, yo),
+      e.value.userOptions.show && we.value && (u(vt) || u(Ee)) ? (s(), oe(u(Kt), {
         ref_key: "userOptionsRef",
-        ref: Ie,
-        key: `user_option_${ut.value}`,
+        ref: De,
+        key: `user_option_${rt.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: u(ct),
-        isImaging: u(ht),
+        isPrinting: u(ht),
+        isImaging: u(ft),
         uid: g.value,
         hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -828,111 +855,111 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
         hasLabel: e.value.userOptions.buttons.labels,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: re.value,
-        chartElement: B.value,
+        chartElement: Y.value,
         position: e.value.userOptions.position,
         callbacks: e.value.userOptions.callbacks,
-        isTooltip: m.value.showTooltip,
+        isTooltip: p.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: Se.value,
+        isAnnotation: Fe.value,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: kt,
-        onGeneratePdf: u(ft),
+        onToggleFullscreen: Ct,
+        onGeneratePdf: u(yt),
         onGenerateCsv: Re,
-        onGenerateImage: u(yt),
+        onGenerateImage: u(gt),
         onGenerateSvg: St,
-        onToggleTable: $t,
+        onToggleTable: At,
         onToggleLabels: _t,
-        onToggleTooltip: Ct,
+        onToggleTooltip: $t,
         onToggleAnnotator: Ge,
-        style: C({ visibility: u(vt) ? u(Ye) ? "visible" : "hidden" : "visible" })
+        style: _({ visibility: u(vt) ? u(Ee) ? "visible" : "hidden" : "visible" })
       }, qe({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: b(({ isOpen: l, color: o }) => [
-            y(t.$slots, "menuIcon", N(Y({ isOpen: l, color: o })), void 0, !0)
+          fn: m(({ isOpen: l, color: o }) => [
+            y(t.$slots, "menuIcon", O(E({ isOpen: l, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: b(() => [
+          fn: m(() => [
             y(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: b(() => [
+          fn: m(() => [
             y(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: b(() => [
+          fn: m(() => [
             y(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: b(() => [
+          fn: m(() => [
             y(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionSvg ? {
           name: "optionSvg",
-          fn: b(() => [
+          fn: m(() => [
             y(t.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: b(() => [
+          fn: m(() => [
             y(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionLabels ? {
           name: "optionLabels",
-          fn: b(() => [
+          fn: m(() => [
             y(t.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: b(({ toggleFullscreen: l, isFullscreen: o }) => [
-            y(t.$slots, "optionFullscreen", N(Y({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          fn: m(({ toggleFullscreen: l, isFullscreen: o }) => [
+            y(t.$slots, "optionFullscreen", O(E({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: b(({ toggleAnnotator: l, isAnnotator: o }) => [
-            y(t.$slots, "optionAnnotator", N(Y({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          fn: m(({ toggleAnnotator: l, isAnnotator: o }) => [
+            y(t.$slots, "optionAnnotator", O(E({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
           ]),
           key: "9"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "callbacks", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : v("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "callbacks", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
       (s(), r("svg", {
         ref_key: "svgRef",
-        ref: oe,
-        xmlns: u(Ol),
+        ref: ae,
+        xmlns: u(Gl),
         class: We({ "vue-data-ui-fullscreen--on": re.value, "vue-data-ui-fulscreen--off": !re.value, "vue-data-ui-svg": !0 }),
         viewBox: `0 0 ${n.value.width <= 0 ? 10 : n.value.width} ${n.value.height <= 0 ? 10 : n.value.height}`,
-        style: C(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${dt.value.css}`)
+        style: _(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${dt.value.css}`)
       }, [
         h("g", {
           ref_key: "G",
           ref: ke,
           class: "vue-data-ui-g"
         }, [
-          Te(u(Wt)),
+          Se(u(Qt)),
           t.$slots["chart-background"] ? (s(), r("foreignObject", {
             key: 0,
             x: 0,
@@ -944,35 +971,35 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
             }
           }, [
             y(t.$slots, "chart-background", {}, void 0, !0)
-          ], 8, ua)) : v("", !0),
-          e.value.type === "classic" && !isNaN(ne.value / _.value) ? (s(), r("defs", ra, [
+          ], 8, po)) : c("", !0),
+          e.value.type === "classic" && !isNaN(ne.value / A.value) ? (s(), r("defs", bo, [
             e.value.style.chart.useGradient ? (s(), r("radialGradient", {
               key: 0,
               id: `gradient_${g.value}`
             }, [
               h("stop", {
                 offset: "0%",
-                "stop-color": u(Fe)(e.value.style.chart.backgroundColor, 0),
+                "stop-color": u(Pe)(e.value.style.chart.backgroundColor, 0),
                 "stop-opacity": "0"
-              }, null, 8, va),
+              }, null, 8, wo),
               h("stop", {
-                offset: `${(1 - ne.value / _.value) * 100}%`,
-                "stop-color": u(Fe)("#FFFFFF", 0),
+                offset: `${(1 - ne.value / A.value) * 100}%`,
+                "stop-color": u(Pe)("#FFFFFF", 0),
                 "stop-opacity": "0"
-              }, null, 8, da),
+              }, null, 8, ko),
               h("stop", {
-                offset: `${(1 - ne.value / _.value / 2) * 100}%`,
-                "stop-color": u(Fe)("#FFFFFF", e.value.style.chart.gradientIntensity)
-              }, null, 8, ca),
+                offset: `${(1 - ne.value / A.value / 2) * 100}%`,
+                "stop-color": u(Pe)("#FFFFFF", e.value.style.chart.gradientIntensity)
+              }, null, 8, Co),
               h("stop", {
                 offset: "100%",
-                "stop-color": u(Fe)(e.value.style.chart.backgroundColor, 0),
+                "stop-color": u(Pe)(e.value.style.chart.backgroundColor, 0),
                 "stop-opacity": "0"
-              }, null, 8, ha)
-            ], 8, ia)) : v("", !0)
-          ])) : v("", !0),
-          e.value.type === "polar" ? (s(), r("defs", fa, [
-            (s(!0), r(k, null, I(d.value, (l, o) => (s(), r("radialGradient", {
+              }, null, 8, xo)
+            ], 8, mo)) : c("", !0)
+          ])) : c("", !0),
+          e.value.type === "polar" ? (s(), r("defs", Ao, [
+            (s(!0), r(k, null, D(v.value, (l, o) => (s(), r("radialGradient", {
               id: `polar_gradient_${o}_${g.value}`,
               cx: (isNaN(l.middlePoint.x / n.value.width * 100) ? 0 : l.middlePoint.x / n.value.width * 100) + "%",
               cy: (isNaN(l.middlePoint.y / n.value.height * 100) ? 0 : l.middlePoint.y / n.value.height * 100) + "%",
@@ -980,15 +1007,15 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
             }, [
               h("stop", {
                 offset: "0%",
-                "stop-color": u(Dl)(T.value[o].color, 0.05),
+                "stop-color": u(Ul)(S.value[o].color, 0.05),
                 "stop-opacity": e.value.style.chart.gradientIntensity / 100
-              }, null, 8, ga),
+              }, null, 8, $o),
               h("stop", {
                 offset: "100%",
-                "stop-color": T.value[o].color
-              }, null, 8, pa)
-            ], 8, ya))), 256))
-          ])) : v("", !0),
+                "stop-color": S.value[o].color
+              }, null, 8, Fo)
+            ], 8, _o))), 256))
+          ])) : c("", !0),
           h("defs", null, [
             h("filter", {
               id: `blur_${g.value}`,
@@ -1001,12 +1028,12 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
                 in: "SourceGraphic",
                 stdDeviation: 2,
                 id: `blur_std_${g.value}`
-              }, null, 8, ba),
+              }, null, 8, To),
               a[5] || (a[5] = h("feColorMatrix", {
                 type: "saturate",
                 values: "0"
               }, null, -1))
-            ], 8, ma),
+            ], 8, So),
             h("filter", {
               id: `shadow_${g.value}`,
               "color-interpolation-filters": "sRGB"
@@ -1017,8 +1044,8 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
                 stdDeviation: "10",
                 "flood-opacity": "0.5",
                 "flood-color": e.value.style.chart.layout.donut.shadowColor
-              }, null, 8, ka)
-            ], 8, wa),
+              }, null, 8, Do)
+            ], 8, Po),
             h("filter", {
               id: `drop_shadow_${g.value}`,
               "color-interpolation-filters": "sRGB",
@@ -1033,160 +1060,160 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
                 stdDeviation: "3",
                 "flood-opacity": "1",
                 "flood-color": e.value.style.chart.layout.donut.shadowColor
-              }, null, 8, $a)
-            ], 8, xa)
+              }, null, 8, Lo)
+            ], 8, Io)
           ]),
-          e.value.type === "classic" ? (s(!0), r(k, { key: 3 }, I(T.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", null, [
-            R(l) && m.value.dataLabels.show ? (s(), r("path", {
+          e.value.type === "classic" ? (s(!0), r(k, { key: 3 }, D(S.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", null, [
+            R(l) && p.value.dataLabels.show ? (s(), r("path", {
               key: 0,
-              d: u(Nl)(l, { x: n.value.width / 2, y: n.value.height / 2 }, 16, 16, !1, !1, ne.value, 12, e.value.style.chart.layout.curvedMarkers),
+              d: u(Wl)(l, { x: n.value.width / 2, y: n.value.height / 2 }, 16, 16, !1, !1, ne.value, 12, e.value.style.chart.layout.curvedMarkers),
               stroke: l.color,
               "stroke-width": "1",
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               fill: "none",
               filter: ue(o)
-            }, null, 8, _a)) : v("", !0)
-          ]))), 256)) : v("", !0),
-          e.value.type === "polar" ? (s(!0), r(k, { key: 4 }, I(T.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", null, [
-            R(l) && m.value.dataLabels.show ? (s(), r("path", {
+            }, null, 8, Mo)) : c("", !0)
+          ]))), 256)) : c("", !0),
+          e.value.type === "polar" ? (s(!0), r(k, { key: 4 }, D(S.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", null, [
+            R(l) && p.value.dataLabels.show ? (s(), r("path", {
               key: 0,
-              d: `M ${u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x},${u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y} ${d.value[o].middlePoint.x},${d.value[o].middlePoint.y}`,
+              d: `M ${u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x},${u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y} ${v.value[o].middlePoint.x},${v.value[o].middlePoint.y}`,
               stroke: l.color,
               "stroke-width": "1",
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               fill: "none",
               filter: ue(o),
-              style: C({
-                transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+              style: _({
+                transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
               })
-            }, null, 12, Ca)) : v("", !0)
-          ]))), 256)) : v("", !0),
+            }, null, 12, Bo)) : c("", !0)
+          ]))), 256)) : c("", !0),
           e.value.type === "classic" && e.value.style.chart.layout.donut.useShadow ? (s(), r("circle", {
             key: 5,
             cx: n.value.width / 2,
             cy: n.value.height / 2,
-            r: _.value <= 0 ? 10 : _.value,
+            r: A.value <= 0 ? 10 : A.value,
             fill: e.value.style.chart.backgroundColor,
             filter: `url(#shadow_${g.value})`
-          }, null, 8, Aa)) : v("", !0),
-          t.$slots.pattern ? (s(), r("g", Sa, [
-            (s(!0), r(k, null, I(Ze.dataset, (l, o) => (s(), r("defs", {
+          }, null, 8, zo)) : c("", !0),
+          t.$slots.pattern ? (s(), r("g", Oo, [
+            (s(!0), r(k, null, D(Ke.dataset, (l, o) => (s(), r("defs", {
               key: `pattern-${l.patternIndex}`
             }, [
-              y(t.$slots, "pattern", He({ ref_for: !0 }, { seriesIndex: o, patternId: `pattern_${g.value}_${o}` }), void 0, !0)
+              y(t.$slots, "pattern", je({ ref_for: !0 }, { seriesIndex: o, patternId: `pattern_${g.value}_${o}` }), void 0, !0)
             ]))), 128))
-          ])) : v("", !0),
-          F.value && e.value.type === "classic" ? (s(), r(k, { key: 7 }, [
-            (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+          ])) : c("", !0),
+          P.value && e.value.type === "classic" ? (s(), r(k, { key: 7 }, [
+            (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
               stroke: e.value.style.chart.backgroundColor,
               d: l.arcSlice,
               fill: "#FFFFFF"
-            }, null, 8, Ta))), 256)),
-            (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+            }, null, 8, Eo))), 256)),
+            (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
               class: "vue-ui-donut-arc-path",
               d: l.arcSlice,
               fill: l.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: ue(o)
-            }, null, 8, Pa))), 256)),
-            t.$slots.pattern ? (s(), r("g", Fa, [
-              (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+            }, null, 8, No))), 256)),
+            t.$slots.pattern ? (s(), r("g", Yo, [
+              (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
                 class: "vue-ui-donut-arc-path",
                 d: l.arcSlice,
                 fill: `url(#${l.pattern})`,
                 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: ue(o)
-              }, null, 8, Ia))), 256))
-            ])) : v("", !0)
-          ], 64)) : v("", !0),
-          F.value && e.value.type === "polar" ? (s(), r(k, { key: 8 }, [
-            T.value.length > 1 ? (s(), r("g", La, [
-              (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+              }, null, 8, Xo))), 256))
+            ])) : c("", !0)
+          ], 64)) : c("", !0),
+          P.value && e.value.type === "polar" ? (s(), r(k, { key: 8 }, [
+            S.value.length > 1 ? (s(), r("g", Vo, [
+              (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
                 stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                d: d.value[o].path,
+                d: v.value[o].path,
                 fill: "#FFFFFF",
-                style: C({
-                  transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                style: _({
+                  transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                 })
-              }, null, 12, Ma))), 256)),
-              e.value.style.chart.layout.donut.useShadow ? (s(), r("g", za, [
-                (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+              }, null, 12, Ro))), 256)),
+              e.value.style.chart.layout.donut.useShadow ? (s(), r("g", Go, [
+                (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
                   class: "vue-ui-donut-arc-path",
-                  d: d.value[o].path,
+                  d: v.value[o].path,
                   fill: "transparent",
                   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: `url(#drop_shadow_${g.value})`,
-                  style: C({
-                    transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                  style: _({
+                    transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                   })
-                }, null, 12, Oa))), 256))
-              ])) : v("", !0),
-              t.$slots.pattern ? (s(), r("g", Da, [
-                (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+                }, null, 12, Uo))), 256))
+              ])) : c("", !0),
+              t.$slots.pattern ? (s(), r("g", Wo, [
+                (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
                   class: "vue-ui-donut-arc-path",
-                  d: d.value[o].path,
+                  d: v.value[o].path,
                   fill: `url(#${l.pattern})`,
                   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: ue(o),
-                  style: C({
-                    transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                  style: _({
+                    transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
                     transformOrigin: "center"
                   })
-                }, null, 12, Na))), 256))
-              ])) : v("", !0),
-              (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+                }, null, 12, qo))), 256))
+              ])) : c("", !0),
+              (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
                 class: "vue-ui-donut-arc-path",
-                d: d.value[o].path,
+                d: v.value[o].path,
                 fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${o}_${g.value})` : l.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: ue(o),
-                style: C({
-                  transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                style: _({
+                  transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                 })
-              }, null, 12, Ya))), 256))
-            ])) : (s(), r("g", Xa, [
+              }, null, 12, jo))), 256))
+            ])) : (s(), r("g", Ho, [
               t.$slots.pattern ? (s(), r("circle", {
                 key: 0,
                 cx: n.value.width / 2,
                 cy: n.value.height / 2,
-                r: _.value,
-                fill: `url(#pattern_${g.value}_${T.value[0].patternIndex})`,
+                r: A.value,
+                fill: `url(#pattern_${g.value}_${S.value[0].patternIndex})`,
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth
-              }, null, 8, Ba)) : v("", !0),
+              }, null, 8, Zo)) : c("", !0),
               h("circle", {
                 cx: n.value.width / 2,
                 cy: n.value.height / 2,
-                r: _.value,
-                fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${g.value})` : T.value[0].color,
+                r: A.value,
+                fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${g.value})` : S.value[0].color,
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth
-              }, null, 8, Va)
+              }, null, 8, Jo)
             ]))
           ], 64)) : (s(), r(k, { key: 9 }, [
-            e.value.type === "classic" && !rl.value ? (s(), r("g", Ea, [
-              (s(!0), r(k, null, I(il.value, (l, o) => (s(), r("path", {
+            e.value.type === "classic" && !pl.value ? (s(), r("g", Ko, [
+              (s(!0), r(k, null, D(bl.value, (l, o) => (s(), r("path", {
                 class: "vue-ui-donut-arc-path",
                 d: l.arcSlice,
                 fill: l.color,
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth
-              }, null, 8, Ra))), 256))
-            ])) : v("", !0),
+              }, null, 8, Qo))), 256))
+            ])) : c("", !0),
             h("circle", {
               cx: n.value.width / 2,
               cy: n.value.height / 2,
-              r: _.value <= 0 ? 10 : _.value,
+              r: A.value <= 0 ? 10 : A.value,
               fill: "transparent",
               stroke: e.value.style.chart.backgroundColor
-            }, null, 8, Ga)
+            }, null, 8, ea)
           ], 64)),
           e.value.style.chart.useGradient && e.value.type === "classic" ? (s(), r("circle", {
             key: 10,
@@ -1194,25 +1221,25 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
             cy: n.value.height / 2,
             r: (
               /* This might require adjustments */
-              _.value <= 0 ? 10 : _.value
+              A.value <= 0 ? 10 : A.value
             ),
             fill: `url(#gradient_${g.value})`
-          }, null, 8, Ua)) : v("", !0),
+          }, null, 8, ta)) : c("", !0),
           h("circle", {
             ref_key: "circle_hollow",
-            ref: Zt,
+            ref: sl,
             style: { pointerEvents: "none" },
             fill: "none",
             cx: n.value.width / 2,
             cy: n.value.height / 2,
             r: Math.max(0.1, ne.value * 1.7)
-          }, null, 8, Wa),
-          F.value ? (s(), r(k, { key: 11 }, [
-            T.value.length > 1 || e.value.type === "classic" ? (s(), r("g", qa, [
-              (s(!0), r(k, null, I(T.value.filter((l) => !l.ghost), (l, o) => (s(), r("path", {
-                d: e.value.type === "classic" ? l.arcSlice : d.value[o].path,
+          }, null, 8, la),
+          P.value ? (s(), r(k, { key: 11 }, [
+            S.value.length > 1 || e.value.type === "classic" ? (s(), r("g", oa, [
+              (s(!0), r(k, null, D(S.value.filter((l) => !l.ghost), (l, o) => (s(), r("path", {
+                d: e.value.type === "classic" ? l.arcSlice : v.value[o].path,
                 stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                fill: V.value === o ? e.value.style.chart.layout.donut.selectedColor : "transparent",
+                fill: X.value === o ? e.value.style.chart.layout.donut.selectedColor : "transparent",
                 onMouseenter: (i) => fe({
                   datapoint: l,
                   relativeIndex: o,
@@ -1221,28 +1248,28 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
                 }),
                 onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex }),
                 onClick: (i) => ee(l, o)
-              }, null, 40, Ha))), 256))
-            ])) : (s(), r("g", ja, [
+              }, null, 40, aa))), 256))
+            ])) : (s(), r("g", na, [
               h("circle", {
                 cx: n.value.width / 2,
                 cy: n.value.height / 2,
-                r: _.value,
+                r: A.value,
                 fill: "transparent",
                 onMouseenter: a[0] || (a[0] = (l) => fe({
-                  datapoint: T.value[0],
+                  datapoint: S.value[0],
                   relativeIndex: 0,
-                  seriesIndex: T.value[0].seriesIndex,
+                  seriesIndex: S.value[0].seriesIndex,
                   show: !0
                 })),
-                onMouseleave: a[1] || (a[1] = (l) => he({ datapoint: T.value[0], seriesIndex: T.value[0].seriesIndex })),
-                onClick: a[2] || (a[2] = (l) => ee(T.value[0], t.i))
-              }, null, 40, Qa)
+                onMouseleave: a[1] || (a[1] = (l) => he({ datapoint: S.value[0], seriesIndex: S.value[0].seriesIndex })),
+                onClick: a[2] || (a[2] = (l) => ee(S.value[0], t.i))
+              }, null, 40, sa)
             ]))
-          ], 64)) : v("", !0),
+          ], 64)) : c("", !0),
           e.value.type === "classic" ? (s(), r("g", {
             key: 12,
             ref_key: "G_hollow",
-            ref: Qt,
+            ref: nl,
             class: "vue-data-ui-donut-hollow-labels"
           }, [
             e.value.style.chart.layout.labels.hollow.total.show ? (s(), r("text", {
@@ -1252,8 +1279,8 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
               y: n.value.height / 2 - (e.value.style.chart.layout.labels.hollow.average.show ? e.value.style.chart.layout.labels.hollow.total.fontSize : 0) + e.value.style.chart.layout.labels.hollow.total.offsetY,
               fill: e.value.style.chart.layout.labels.hollow.total.color,
               "font-size": e.value.style.chart.layout.labels.hollow.total.fontSize,
-              style: C(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
-            }, U(e.value.style.chart.layout.labels.hollow.total.text), 13, Za)) : v("", !0),
+              style: _(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
+            }, U(e.value.style.chart.layout.labels.hollow.total.text), 13, ua)) : c("", !0),
             e.value.style.chart.layout.labels.hollow.total.show ? (s(), r("text", {
               key: 1,
               "text-anchor": "middle",
@@ -1261,16 +1288,16 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
               y: n.value.height / 2 + e.value.style.chart.layout.labels.hollow.total.fontSize - (e.value.style.chart.layout.labels.hollow.average.show ? e.value.style.chart.layout.labels.hollow.total.fontSize : 0) + e.value.style.chart.layout.labels.hollow.total.value.offsetY,
               fill: e.value.style.chart.layout.labels.hollow.total.value.color,
               "font-size": e.value.style.chart.layout.labels.hollow.total.value.fontSize,
-              style: C(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
+              style: _(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
             }, U(u(W)(
               e.value.style.chart.layout.labels.hollow.total.value.formatter,
-              F.value,
-              u(X)({
+              P.value,
+              u(N)({
                 p: e.value.style.chart.layout.labels.hollow.total.value.prefix,
-                v: F.value,
+                v: P.value,
                 s: e.value.style.chart.layout.labels.hollow.total.value.suffix
               })
-            )), 13, Ja)) : v("", !0),
+            )), 13, ra)) : c("", !0),
             e.value.style.chart.layout.labels.hollow.average.show ? (s(), r("text", {
               key: 2,
               "text-anchor": "middle",
@@ -1278,8 +1305,8 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
               y: n.value.height / 2 + (e.value.style.chart.layout.labels.hollow.total.show ? e.value.style.chart.layout.labels.hollow.average.fontSize : 0) + e.value.style.chart.layout.labels.hollow.average.offsetY,
               fill: e.value.style.chart.layout.labels.hollow.average.color,
               "font-size": e.value.style.chart.layout.labels.hollow.average.fontSize,
-              style: C(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
-            }, U(e.value.style.chart.layout.labels.hollow.average.text), 13, Ka)) : v("", !0),
+              style: _(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
+            }, U(e.value.style.chart.layout.labels.hollow.average.text), 13, ia)) : c("", !0),
             e.value.style.chart.layout.labels.hollow.average.show ? (s(), r("text", {
               key: 3,
               "text-anchor": "middle",
@@ -1287,54 +1314,54 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
               y: n.value.height / 2 + (e.value.style.chart.layout.labels.hollow.total.show ? e.value.style.chart.layout.labels.hollow.average.fontSize : 0) + e.value.style.chart.layout.labels.hollow.average.fontSize + e.value.style.chart.layout.labels.hollow.average.value.offsetY,
               fill: e.value.style.chart.layout.labels.hollow.average.value.color,
               "font-size": e.value.style.chart.layout.labels.hollow.average.value.fontSize,
-              style: C(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
-            }, U(se.value || S.value ? "--" : u(W)(
+              style: _(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
+            }, U(se.value || F.value ? "--" : u(W)(
               e.value.style.chart.layout.labels.hollow.average.value.formatter,
-              Ve.value,
-              u(X)({
+              Xe.value,
+              u(N)({
                 p: e.value.style.chart.layout.labels.hollow.average.value.prefix,
-                v: Ve.value,
+                v: Xe.value,
                 s: e.value.style.chart.layout.labels.hollow.average.value.suffix,
                 r: e.value.style.chart.layout.labels.hollow.average.value.rounding
               })
-            )), 13, eo)) : v("", !0)
-          ], 512)) : v("", !0),
-          (s(!0), r(k, null, I(E.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", {
+            )), 13, ca)) : c("", !0)
+          ], 512)) : c("", !0),
+          (s(!0), r(k, null, D(V.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", {
             filter: ue(o),
             class: We({ animated: e.value.useCssAnimation }),
             key: l.seriesIndex
           }, [
-            e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (s(), r("g", lo, [
+            e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (s(), r("g", da, [
               (s(), r("foreignObject", {
-                x: u($)(l, !0).anchor === "end" ? u($)(l).x - 120 : u($)(l, !0).anchor === "middle" ? u($)(l).x - 60 : u($)(l).x,
+                x: u(x)(l, !0).anchor === "end" ? u(x)(l).x - 120 : u(x)(l, !0).anchor === "middle" ? u(x)(l).x - 60 : u(x)(l).x,
                 y: u(ge)(l) - (xt.value ? 20 : 0),
                 width: "120",
                 height: "60",
                 style: { overflow: "visible" }
               }, [
                 h("div", null, [
-                  y(t.$slots, "dataLabel", He({ ref_for: !0 }, {
+                  y(t.$slots, "dataLabel", je({ ref_for: !0 }, {
                     datapoint: l,
-                    isBlur: !e.value.useBlurOnHover || [null, void 0].includes(V.value) || V.value === o,
+                    isBlur: !e.value.useBlurOnHover || [null, void 0].includes(X.value) || X.value === o,
                     isSafari: xt.value,
-                    isVisible: R(l) && m.value.dataLabels.show,
-                    textAlign: u($)(l, !0, 16, !0).anchor,
-                    flexAlign: u($)(l, !0, 16).anchor,
-                    percentage: Be(l, E.value)
+                    isVisible: R(l) && p.value.dataLabels.show,
+                    textAlign: u(x)(l, !0, 16, !0).anchor,
+                    flexAlign: u(x)(l, !0, 16).anchor,
+                    percentage: Ye(l, V.value)
                   }), void 0, !0)
                 ])
-              ], 8, ao))
-            ])) : (s(), r("g", oo, [
+              ], 8, ha))
+            ])) : (s(), r("g", fa, [
               e.value.type === "classic" ? (s(), r(k, { key: 0 }, [
-                R(l) && m.value.dataLabels.show ? (s(), r("circle", {
+                R(l) && p.value.dataLabels.show ? (s(), r("circle", {
                   key: 0,
-                  cx: u($)(l).x,
+                  cx: u(x)(l).x,
                   cy: u(ge)(l) - 3.5,
                   fill: l.color,
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": 1,
                   r: 3,
-                  filter: !e.value.useBlurOnHover || [null, void 0].includes(V.value) || V.value === o ? "" : `url(#blur_${g.value})`,
+                  filter: !e.value.useBlurOnHover || [null, void 0].includes(X.value) || X.value === o ? "" : `url(#blur_${g.value})`,
                   onClick: (i) => ee(l, o),
                   onMouseenter: (i) => fe({
                     datapoint: l,
@@ -1343,18 +1370,18 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
                     show: !0
                   }),
                   onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex })
-                }, null, 40, no)) : v("", !0)
-              ], 64)) : v("", !0),
+                }, null, 40, ya)) : c("", !0)
+              ], 64)) : c("", !0),
               e.value.type === "polar" ? (s(), r(k, { key: 1 }, [
-                R(l) && m.value.dataLabels.show ? (s(), r("circle", {
+                R(l) && p.value.dataLabels.show ? (s(), r("circle", {
                   key: 0,
-                  cx: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                  cy: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
+                  cx: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                  cy: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
                   fill: l.color,
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": 1,
                   r: 3,
-                  filter: !e.value.useBlurOnHover || [null, void 0].includes(V.value) || V.value === o ? "" : `url(#blur_${g.value})`,
+                  filter: !e.value.useBlurOnHover || [null, void 0].includes(X.value) || X.value === o ? "" : `url(#blur_${g.value})`,
                   onClick: (i) => ee(l, o),
                   onMouseenter: (i) => fe({
                     datapoint: l,
@@ -1363,20 +1390,20 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
                     show: !0
                   }),
                   onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex }),
-                  style: C({
-                    transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                  style: _({
+                    transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                   })
-                }, null, 44, so)) : v("", !0)
-              ], 64)) : v("", !0),
+                }, null, 44, ga)) : c("", !0)
+              ], 64)) : c("", !0),
               e.value.type === "classic" ? (s(), r(k, { key: 2 }, [
-                Ft(h("text", {
+                Dt(h("text", {
                   class: "vue-data-ui-datalabel-value",
-                  "text-anchor": u($)(l, !0, 12).anchor,
-                  x: u($)(l, !0, 12).x,
+                  "text-anchor": u(x)(l, !0, 12).anchor,
+                  x: u(x)(l, !0, 12).x,
                   y: u(ge)(l),
                   fill: e.value.style.chart.layout.labels.percentage.color,
-                  "font-size": xe.value + "px",
-                  style: C(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
+                  "font-size": Ce.value + "px",
+                  style: _(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
                   onClick: (i) => ee(l, o),
                   onMouseenter: (i) => fe({
                     datapoint: l,
@@ -1385,51 +1412,51 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
                     show: !0
                   }),
                   onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex })
-                }, U(Be(l, E.value)) + " " + U(e.value.style.chart.layout.labels.value.show ? `(${u(W)(
+                }, U(Ye(l, V.value)) + " " + U(e.value.style.chart.layout.labels.value.show ? `(${u(W)(
                   e.value.style.chart.layout.labels.value.formatter,
                   l.value,
-                  u(X)({
+                  u(N)({
                     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.value.rounding
                   }),
                   { datapoint: l }
-                )})` : ""), 45, uo), [
-                  [It, R(l) && m.value.dataLabels.show]
+                )})` : ""), 45, pa), [
+                  [It, R(l) && p.value.dataLabels.show]
                 ]),
-                Ft(h("text", {
+                Dt(h("text", {
                   class: "vue-data-ui-datalabel-name",
-                  "text-anchor": u($)(l).anchor,
-                  x: u($)(l, !0, 12).x,
-                  y: u(ge)(l) + J.value * 1.2,
+                  "text-anchor": u(x)(l).anchor,
+                  x: u(x)(l, !0, 12).x,
+                  y: u(ge)(l) + K.value * 1.2,
                   fill: e.value.style.chart.layout.labels.name.color,
-                  "font-size": J.value + "px",
-                  style: C(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
+                  "font-size": K.value + "px",
+                  style: _(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
                   onClick: (i) => ee(l, o),
-                  innerHTML: u(Ot)({
+                  innerHTML: u(zt)({
                     content: l.name,
-                    fontSize: J.value,
+                    fontSize: K.value,
                     fill: e.value.style.chart.layout.labels.name.color,
-                    x: u($)(l, !0, 12).x,
-                    y: u(ge)(l) + J.value
+                    x: u(x)(l, !0, 12).x,
+                    y: u(ge)(l) + K.value
                   })
-                }, null, 12, ro), [
-                  [It, R(l) && m.value.dataLabels.show]
+                }, null, 12, ba), [
+                  [It, R(l) && p.value.dataLabels.show]
                 ]),
-                a[6] || (a[6] = Pe(' @mouseenter="useTooltip({ datapoint: arc, relativeIndex: i, seriesIndex: arc.seriesIndex, show: true })" @mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })" /> ', -1))
-              ], 64)) : v("", !0),
+                a[6] || (a[6] = Te(' @mouseenter="useTooltip({ datapoint: arc, relativeIndex: i, seriesIndex: arc.seriesIndex, show: true })" @mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })" /> ', -1))
+              ], 64)) : c("", !0),
               e.value.type === "polar" ? (s(), r(k, { key: 3 }, [
-                R(l) && m.value.dataLabels.show ? (s(), r("text", {
+                R(l) && p.value.dataLabels.show ? (s(), r("text", {
                   key: 0,
                   class: "vue-data-ui-datalabel-value",
-                  "text-anchor": ce(d.value[o].middlePoint),
-                  x: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                  y: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
+                  "text-anchor": de(v.value[o].middlePoint),
+                  x: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                  y: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
                   fill: e.value.style.chart.layout.labels.percentage.color,
-                  "font-size": xe.value,
-                  style: C({
-                    transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                  "font-size": Ce.value,
+                  style: _({
+                    transition: F.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: (i) => ee(l, o),
@@ -1440,45 +1467,45 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
                     show: !0
                   }),
                   onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex })
-                }, U(Be(l, E.value)) + " " + U(e.value.style.chart.layout.labels.value.show ? `(${u(W)(
+                }, U(Ye(l, V.value)) + " " + U(e.value.style.chart.layout.labels.value.show ? `(${u(W)(
                   e.value.style.chart.layout.labels.value.formatter,
                   l.value,
-                  u(X)({
+                  u(N)({
                     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.value.rounding
                   }),
                   { datapoint: l }
-                )})` : ""), 45, io)) : v("", !0),
-                R(l) && m.value.dataLabels.show ? (s(), r("text", {
+                )})` : ""), 45, ma)) : c("", !0),
+                R(l) && p.value.dataLabels.show ? (s(), r("text", {
                   key: 1,
                   class: "vue-data-ui-datalabel-name",
-                  "text-anchor": ce(d.value[o].middlePoint),
-                  x: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                  y: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + J.value * 1.2,
+                  "text-anchor": de(v.value[o].middlePoint),
+                  x: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                  y: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + K.value * 1.2,
                   fill: e.value.style.chart.layout.labels.name.color,
-                  "font-size": J.value,
-                  style: C({
-                    transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                  "font-size": K.value,
+                  style: _({
+                    transition: F.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: (i) => ee(l, o),
-                  innerHTML: u(Ot)({
+                  innerHTML: u(zt)({
                     content: l.name,
-                    fontSize: xe.value,
+                    fontSize: Ce.value,
                     fill: e.value.style.chart.layout.labels.name.color,
-                    x: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                    y: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + J.value * 1.2
+                    x: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                    y: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + K.value * 1.2
                   })
-                }, null, 12, vo)) : v("", !0),
-                a[7] || (a[7] = Pe(' @mouseenter="useTooltip({ datapoint: arc, relativeIndex: i, seriesIndex: arc.seriesIndex, show: true })" @mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })" /> ', -1))
-              ], 64)) : v("", !0)
+                }, null, 12, wa)) : c("", !0),
+                a[7] || (a[7] = Te(' @mouseenter="useTooltip({ datapoint: arc, relativeIndex: i, seriesIndex: arc.seriesIndex, show: true })" @mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })" /> ', -1))
+              ], 64)) : c("", !0)
             ])),
-            m.value.dataLabels.show && e.value.style.chart.comments.show && l.comment ? (s(), r("g", co, [
+            p.value.dataLabels.show && e.value.style.chart.comments.show && l.comment ? (s(), r("g", ka, [
               R(l) && e.value.type === "classic" ? (s(), r("foreignObject", {
                 key: 0,
-                x: e.value.style.chart.comments.offsetX + (u($)(l, !0).anchor === "end" ? u($)(l).x - e.value.style.chart.comments.width : u($)(l, !0).anchor === "middle" ? u($)(l).x - e.value.style.chart.comments.width / 2 : u($)(l).x),
+                x: e.value.style.chart.comments.offsetX + (u(x)(l, !0).anchor === "end" ? u(x)(l).x - e.value.style.chart.comments.width : u(x)(l, !0).anchor === "middle" ? u(x)(l).x - e.value.style.chart.comments.width / 2 : u(x)(l).x),
                 y: u(ge)(l) + 24 + e.value.style.chart.comments.offsetY,
                 width: e.value.style.chart.comments.width,
                 height: "200",
@@ -1486,65 +1513,65 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
               }, [
                 h("div", null, [
                   y(t.$slots, "plot-comment", {
-                    plot: { ...l, textAlign: u($)(l, !0, 16, !0).anchor, flexAlign: u($)(l, !0, 16).anchor, isFirstLoad: S.value }
+                    plot: { ...l, textAlign: u(x)(l, !0, 16, !0).anchor, flexAlign: u(x)(l, !0, 16).anchor, isFirstLoad: F.value }
                   }, void 0, !0)
                 ])
-              ], 8, ho)) : v("", !0),
+              ], 8, Ca)) : c("", !0),
               R(l) && e.value.type === "polar" ? (s(), r("foreignObject", {
                 key: 1,
-                x: e.value.style.chart.comments.offsetX + (ce(d.value[o].middlePoint) === "end" ? u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width : ce(d.value[o].middlePoint) === "middle" ? u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width / 2 : u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x),
-                y: vl(d.value[o]) + e.value.style.chart.comments.offsetY,
+                x: e.value.style.chart.comments.offsetX + (de(v.value[o].middlePoint) === "end" ? u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width : de(v.value[o].middlePoint) === "middle" ? u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width / 2 : u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x),
+                y: ml(v.value[o]) + e.value.style.chart.comments.offsetY,
                 width: e.value.style.chart.comments.width,
                 height: "200",
-                style: C({
-                  transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                style: _({
+                  transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
                   overflow: "visible",
                   pointerEvents: "none"
                 })
               }, [
                 h("div", null, [
                   y(t.$slots, "plot-comment", {
-                    plot: { ...l, textAlign: ce(d.value[o].middlePoint), flexAlign: ce(d.value[o].middlePoint), isFirstLoad: S.value }
+                    plot: { ...l, textAlign: de(v.value[o].middlePoint), flexAlign: de(v.value[o].middlePoint), isFirstLoad: F.value }
                   }, void 0, !0)
                 ])
-              ], 12, fo)) : v("", !0)
-            ])) : v("", !0)
-          ], 10, to))), 128)),
+              ], 12, xa)) : c("", !0)
+            ])) : c("", !0)
+          ], 10, va))), 128)),
           y(t.$slots, "svg", { svg: n.value }, void 0, !0)
         ], 512)
-      ], 14, sa)),
-      t.$slots.watermark ? (s(), r("div", yo, [
-        y(t.$slots, "watermark", N(Y({ isPrinting: u(ct) || u(ht) })), void 0, !0)
-      ])) : v("", !0),
+      ], 14, go)),
+      t.$slots.watermark ? (s(), r("div", Aa, [
+        y(t.$slots, "watermark", O(E({ isPrinting: u(ht) || u(ft) })), void 0, !0)
+      ])) : c("", !0),
       h("div", {
         id: `legend-bottom-${g.value}`
-      }, null, 8, go),
-      nt.value ? (s(), ae(Al, {
+      }, null, 8, _a),
+      st.value ? (s(), oe(Bl, {
         key: 5,
         to: e.value.style.chart.legend.position === "top" ? `#legend-top-${g.value}` : `#legend-bottom-${g.value}`
       }, [
         h("div", {
           ref_key: "chartLegend",
-          ref: Ke
+          ref: et
         }, [
-          e.value.style.chart.legend.show ? (s(), ae(la, {
-            key: `legend_${ot.value}`,
-            legendSet: Xe.value,
-            config: ul.value,
-            onClickMarker: a[3] || (a[3] = ({ i: l }) => Ce(l))
+          e.value.style.chart.legend.show ? (s(), oe(vo, {
+            key: `legend_${nt.value}`,
+            legendSet: Ne.value,
+            config: gl.value,
+            onClickMarker: a[3] || (a[3] = ({ i: l }) => _e(l))
           }, qe({
-            item: b(({ legend: l, index: o }) => [
+            item: m(({ legend: l, index: o }) => [
               h("div", {
-                style: C(`opacity:${z.value.includes(o) ? 0.5 : 1}`),
+                style: _(`opacity:${M.value.includes(o) ? 0.5 : 1}`),
                 onClick: (i) => l.segregate()
-              }, U(l.display), 13, po)
+              }, U(l.display), 13, $a)
             ]),
             _: 2
           }, [
             t.$slots.pattern ? {
               name: "legend-pattern",
-              fn: b(({ legend: l, index: o }) => [
-                Te(Kl, {
+              fn: m(({ legend: l, index: o }) => [
+                Se(io, {
                   shape: l.shape,
                   radius: 30,
                   stroke: "none",
@@ -1554,27 +1581,27 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["legendSet", "config"])) : v("", !0),
-          y(t.$slots, "legend", { legend: Xe.value }, void 0, !0)
+          ]), 1032, ["legendSet", "config"])) : c("", !0),
+          y(t.$slots, "legend", { legend: Ne.value }, void 0, !0)
         ], 512)
-      ], 8, ["to"])) : v("", !0),
+      ], 8, ["to"])) : c("", !0),
       t.$slots.source ? (s(), r("div", {
         key: 6,
         ref_key: "source",
-        ref: et,
+        ref: tt,
         dir: "auto"
       }, [
         y(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : v("", !0),
-      t.$slots.hollow ? (s(), r("div", mo, [
-        y(t.$slots, "hollow", N(Y({
-          total: F.value,
-          average: Ve.value,
-          dataset: L.value
+      ], 512)) : c("", !0),
+      t.$slots.hollow ? (s(), r("div", Fa, [
+        y(t.$slots, "hollow", O(E({
+          total: P.value,
+          average: Xe.value,
+          dataset: I.value
         })), void 0, !0)
-      ])) : v("", !0),
-      Te(u(Bt), {
-        show: m.value.showTooltip && Oe.value,
+      ])) : c("", !0),
+      Se(u(qt), {
+        show: p.value.showTooltip && Be.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         fontSize: e.value.style.chart.tooltip.fontSize,
@@ -1584,50 +1611,50 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: B.value,
-        content: De.value,
-        isCustom: me.value,
+        parent: Y.value,
+        content: ze.value,
+        isCustom: be.value,
         isFullscreen: re.value,
         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.smoothSnapThrehsold
       }, {
-        "tooltip-before": b(() => [
-          y(t.$slots, "tooltip-before", N(Y({ ...Ee.value })), void 0, !0)
+        "tooltip-before": m(() => [
+          y(t.$slots, "tooltip-before", O(E({ ...Ve.value })), void 0, !0)
         ]),
-        "tooltip-after": b(() => [
-          y(t.$slots, "tooltip-after", N(Y({ ...Ee.value })), void 0, !0)
+        "tooltip-after": m(() => [
+          y(t.$slots, "tooltip-after", O(E({ ...Ve.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      we.value && e.value.userOptions.buttons.table ? (s(), ae(Sl(be.value.component), He({ key: 8 }, be.value.props, {
+      we.value && e.value.userOptions.buttons.table ? (s(), oe(zl(me.value.component), je({ key: 8 }, me.value.props, {
         ref_key: "tableUnit",
         ref: pe,
-        onClose: At
+        onClose: Ft
       }), qe({
-        content: b(() => [
-          (s(), ae(u(Rt), {
+        content: m(() => [
+          (s(), oe(u(Zt), {
             key: `table_${at.value}`,
-            colNames: Ae.value.colNames,
-            head: Ae.value.head,
-            body: Ae.value.body,
-            config: Ae.value.config,
-            title: e.value.table.useDialog ? "" : be.value.title,
+            colNames: $e.value.colNames,
+            head: $e.value.head,
+            body: $e.value.body,
+            config: $e.value.config,
+            title: e.value.table.useDialog ? "" : me.value.title,
             withCloseButton: !e.value.table.useDialog,
-            onClose: At
+            onClose: Ft
           }, {
-            th: b(({ th: l }) => [
+            th: m(({ th: l }) => [
               h("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, bo)
+              }, null, 8, Sa)
             ]),
-            td: b(({ td: l }) => [
-              Pe(U(l.name ? l.name : isNaN(Number(l)) ? l.includes("%") ? l : u(W)(
+            td: m(({ td: l }) => [
+              Te(U(l.name ? l.name : isNaN(Number(l)) ? l.includes("%") ? l : u(W)(
                 e.value.style.chart.layout.labels.percentage.formatter,
                 l,
-                u(X)({
+                u(N)({
                   v: l,
                   s: "%",
                   r: e.value.style.chart.layout.labels.percentage.rounding
@@ -1635,7 +1662,7 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
               ) : u(W)(
                 e.value.style.chart.layout.labels.value.formatter,
                 l,
-                u(X)({
+                u(N)({
                   p: e.value.style.chart.layout.labels.dataLabels.prefix,
                   v: l,
                   s: e.value.style.chart.layout.labels.dataLabels.suffix,
@@ -1650,32 +1677,37 @@ const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "heigh
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: b(() => [
-            Pe(U(be.value.title), 1)
+          fn: m(() => [
+            Te(U(me.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: b(() => [
+          fn: m(() => [
             h("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
               onClick: a[4] || (a[4] = (l) => Re(e.value.userOptions.callbacks.csv))
             }, [
-              Te(u(Vt), {
+              Se(u(jt), {
                 name: "excel",
-                stroke: be.value.props.color
+                stroke: me.value.props.color
               }, null, 8, ["stroke"])
             ])
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : v("", !0),
-      u($e) ? (s(), ae(Hl, { key: 9 })) : v("", !0)
-    ], 46, oa));
+      ]), 1040)) : c("", !0),
+      u(xe) ? (s(), oe(oo, { key: 9 })) : c("", !0)
+    ], 46, fo));
   }
-}, Do = /* @__PURE__ */ aa(wo, [["__scopeId", "data-v-a23e4322"]]);
+}, Pa = /* @__PURE__ */ ho(Ta, [["__scopeId", "data-v-3033b2a3"]]), qa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Pa
+}, Symbol.toStringTag, { value: "Module" }));
 export {
-  Do as default
+  Pa as V,
+  qa as a,
+  Wa as v
 };