vue-data-ui 2.16.6 → 2.17.1

package/dist/{vue-ui-donut-B59bCV5_.js → vue-ui-donut-D41WeqQU.js}

@@ -1,21 +1,19 @@
-import { defineAsyncComponent as Q, useSlots as Xt, computed as y, shallowRef as E, ref as x, onMounted as tt, onBeforeUnmount as It, watch as lt, createElementBlock as n, openBlock as o, normalizeStyle as b, normalizeClass as _e, createBlock as Z, createCommentVNode as i, renderSlot as m, createElementVNode as f, createVNode as xe, unref as r, createSlots as at, withCtx as C, normalizeProps as oe, guardReactiveProps as ue, Fragment as p, renderList as A, mergeProps as ot, toDisplayString as P, createTextVNode as ut, nextTick as Dt } from "vue";
-import { u as Vt, o as Bt, e as st, g as Gt, c as Wt, b as Rt, v as Et, d as nt, p as ee, m as rt, $ as Ut, f as M, X as jt, s as fe, w as Ht, j as qt, N as L, i as D, k as ve, n as w, t as Jt, a as Kt, q as Qt, r as Zt, x as el, T as it } from "./index-DvIXJm6t.js";
-import { t as tl, u as ll } from "./useResponsive-DfdjqQps.js";
-import { u as vt } from "./useNestedProp-DrYHm61t.js";
-import { u as al } from "./usePrinter-CWnXbGMb.js";
-import { u as ol } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as ul } from "./useChartAccessibility-9icAAmYg.js";
-import sl from "./Legend-nBXoxXJH.js";
-import nl from "./Title-Gi81VwUM.js";
-import { _ as rl } from "./Shape-Bnf512BA.js";
-import { _ as il } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { key: 1 }, yl = ["id"], fl = ["stop-color"], pl = ["offset", "stop-color"], gl = ["offset", "stop-color"], ml = ["stop-color"], bl = { key: 2 }, wl = ["id", "cx", "cy"], kl = ["stop-color", "stop-opacity"], _l = ["stop-color"], xl = ["id"], $l = ["id"], Cl = ["id"], Tl = ["flood-color"], Pl = ["id"], Al = ["flood-color"], Sl = ["d", "stroke", "filter"], Fl = ["d", "stroke", "filter"], Ll = ["cx", "cy", "r", "fill", "filter"], Ol = { key: 6 }, zl = ["stroke", "d"], Nl = ["d", "fill", "stroke", "stroke-width", "filter"], Ml = { key: 0 }, Yl = ["d", "fill", "stroke", "stroke-width", "filter"], Xl = { key: 0 }, Il = ["stroke", "d"], Dl = { key: 0 }, Vl = ["d", "stroke", "stroke-width", "filter"], Bl = { key: 1 }, Gl = ["d", "fill", "stroke", "stroke-width", "filter"], Wl = ["d", "fill", "stroke", "stroke-width", "filter"], Rl = { key: 1 }, El = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ul = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], jl = { key: 0 }, Hl = ["d", "fill", "stroke", "stroke-width"], ql = ["cx", "cy", "r", "stroke"], Jl = ["cx", "cy", "r", "fill"], Kl = { key: 0 }, Ql = ["d", "fill", "onMouseenter", "onClick"], Zl = { key: 1 }, ea = ["cx", "cy", "r"], ta = ["x", "y", "fill", "font-size"], la = ["x", "y", "fill", "font-size"], aa = ["x", "y", "fill", "font-size"], oa = ["x", "y", "fill", "font-size"], ua = ["filter"], sa = { key: 0 }, na = ["x", "y"], ra = { key: 1 }, ia = ["cx", "cy", "fill", "stroke", "filter", "onClick"], va = ["cx", "cy", "fill", "stroke", "filter", "onClick"], ca = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], da = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], ha = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], ya = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], fa = { key: 2 }, pa = ["x", "y", "width"], ga = ["x", "y", "width"], ma = {
+import { defineAsyncComponent as Z, useSlots as It, computed as y, shallowRef as E, ref as $, onMounted as lt, onBeforeUnmount as Xt, watch as at, createElementBlock as n, openBlock as u, normalizeStyle as b, normalizeClass as _e, createBlock as ee, createCommentVNode as i, renderSlot as m, createElementVNode as f, createVNode as $e, unref as r, createSlots as ot, withCtx as C, normalizeProps as ue, guardReactiveProps as se, Fragment as g, renderList as A, mergeProps as ut, toDisplayString as T, createTextVNode as Vt, nextTick as Dt } from "vue";
+import { u as Bt, o as Gt, e as st, g as Rt, c as Wt, b as Et, v as Ut, d as nt, p as te, m as rt, $ as jt, f as M, X as Ht, s as fe, w as qt, j as Jt, N as L, i as V, k as ve, n as w, t as Kt, a as Qt, q as Zt, r as el, x as tl, T as it } from "./index-CobsZUkv.js";
+import { t as ll, u as al } from "./useResponsive-DfdjqQps.js";
+import { u as vt } from "./useNestedProp-BwL5wmVa.js";
+import { u as ol } from "./usePrinter-DPh6U_Qk.js";
+import { u as ul } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as sl } from "./useChartAccessibility-9icAAmYg.js";
+import nl from "./Legend-3LNqqLDg.js";
+import rl from "./Title-DpERl1yr.js";
+import { _ as il } from "./Shape-C75836Jl.js";
+import vl from "./img-utitT2Gd.js";
+import { _ as cl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { key: 1 }, gl = ["id"], pl = ["stop-color"], ml = ["offset", "stop-color"], bl = ["offset", "stop-color"], wl = ["stop-color"], kl = { key: 2 }, _l = ["id", "cx", "cy"], $l = ["stop-color", "stop-opacity"], xl = ["stop-color"], Cl = ["id"], Pl = ["id"], Tl = ["id"], Al = ["flood-color"], Sl = ["id"], Fl = ["flood-color"], Ll = ["d", "stroke", "filter"], Ol = ["d", "stroke", "filter"], zl = ["cx", "cy", "r", "fill", "filter"], Nl = { key: 6 }, Ml = ["stroke", "d"], Yl = ["d", "fill", "stroke", "stroke-width", "filter"], Il = { key: 0 }, Xl = ["d", "fill", "stroke", "stroke-width", "filter"], Vl = { key: 0 }, Dl = ["stroke", "d"], Bl = { key: 0 }, Gl = ["d", "stroke", "stroke-width", "filter"], Rl = { key: 1 }, Wl = ["d", "fill", "stroke", "stroke-width", "filter"], El = ["d", "fill", "stroke", "stroke-width", "filter"], Ul = { key: 1 }, jl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Hl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ql = { key: 0 }, Jl = ["d", "fill", "stroke", "stroke-width"], Kl = ["cx", "cy", "r", "stroke"], Ql = ["cx", "cy", "r", "fill"], Zl = { key: 0 }, ea = ["d", "fill", "onMouseenter", "onClick"], ta = { key: 1 }, la = ["cx", "cy", "r"], aa = ["x", "y", "fill", "font-size"], oa = ["x", "y", "fill", "font-size"], ua = ["x", "y", "fill", "font-size"], sa = ["x", "y", "fill", "font-size"], na = ["filter"], ra = { key: 0 }, ia = ["x", "y"], va = { key: 1 }, ca = ["cx", "cy", "fill", "stroke", "filter", "onClick"], da = ["cx", "cy", "fill", "stroke", "filter", "onClick"], ha = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], ya = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], fa = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], ga = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], pa = { key: 2 }, ma = ["x", "y", "width"], ba = ["x", "y", "width"], wa = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, ba = ["onClick"], wa = {
-  key: 0,
-  style: { "font-variant-numeric": "tabular-nums" }
-}, ka = { key: 1 }, _a = ["innerHTML"], xa = {
+}, ka = ["onClick"], _a = ["innerHTML"], $a = {
   __name: "vue-ui-donut",
   props: {
     config: {
@@ -32,54 +30,54 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
     }
   },
   emits: ["selectLegend", "selectDatapoint"],
-  setup($e, { expose: ct, emit: dt }) {
-    const ht = Q(() => import("./vue-ui-accordion-D55kCO5G.js")), yt = Q(() => import("./DataTable-CHBLjKtZ.js")), ft = Q(() => import("./PackageVersion-Bg_9KCU-.js")), pt = Q(() => import("./PenAndPaper-BPTpbnay.js")), gt = Q(() => import("./vue-ui-skeleton-BAOt2neL.js")), mt = Q(() => import("./Tooltip-CJxVw7-T.js")), bt = Q(() => import("./UserOptions-CBEK6_jo.js")), { vue_ui_donut: wt } = Vt(), kt = Xt(), O = $e, se = y({
+  setup(xe, { expose: ct, emit: dt }) {
+    const ht = Z(() => import("./vue-ui-accordion-UewqY6OI.js")), yt = Z(() => import("./DataTable-Dt-TIOyY.js")), ft = Z(() => import("./PackageVersion-C-4Ee8BQ.js")), gt = Z(() => import("./PenAndPaper-Cde-wJ3N.js")), pt = Z(() => import("./vue-ui-skeleton-8s4xts8z.js")), mt = Z(() => import("./Tooltip-DA0bYKFG.js")), bt = Z(() => import("./UserOptions-DTEJ3UM_.js")), { vue_ui_donut: wt } = Bt(), kt = It(), O = xe, ne = y({
       get() {
         return !!O.dataset && O.dataset.length;
       },
       set(l) {
         return l;
       }
-    }), ne = E(null), Ce = E(null), Te = E(null), U = E(null), te = E(null), Pe = E(null), Ae = E(null), Se = x(0), Fe = x(0), Le = x(0);
-    tt(() => {
+    }), U = E(null), Ce = E(null), Pe = E(null), j = E(null), le = E(null), Te = E(null), Ae = E(null), Se = $(0), Fe = $(0), Le = $(0);
+    lt(() => {
       Oe();
-    }), It(() => {
-      U.value && (te.value && U.value.unobserve(te.value), U.value.disconnect());
+    }), Xt(() => {
+      j.value && (le.value && j.value.unobserve(le.value), j.value.disconnect());
     });
     function Oe() {
-      if (Bt(O.dataset) ? st({
+      if (Gt(O.dataset) ? st({
         componentName: "VueUiDonut",
         type: "dataset"
-      }) : O.dataset.forEach((l, u) => {
-        Gt({
+      }) : O.dataset.forEach((l, o) => {
+        Rt({
           datasetObject: l,
           requiredAttributes: ["name", "values"]
         }).forEach((t) => {
-          se.value = !1, st({
+          ne.value = !1, st({
             componentName: "VueUiDonut",
             type: "datasetSerieAttribute",
             property: t,
-            index: u
+            index: o
           });
         });
       }), e.value.responsive) {
-        const l = tl(() => {
-          const { width: u, height: t } = ll({
-            chart: ne.value,
+        const l = ll(() => {
+          const { width: o, height: t } = al({
+            chart: U.value,
             title: e.value.style.chart.title.text ? Ce.value : null,
-            legend: e.value.style.chart.legend.show ? Te.value : null,
-            source: Pe.value,
+            legend: e.value.style.chart.legend.show ? Pe.value : null,
+            source: Te.value,
             noTitle: Ae.value,
-            padding: Xe.value
+            padding: Ie.value
           });
           requestAnimationFrame(() => {
-            s.value.width = u, s.value.height = t;
+            s.value.width = o, s.value.height = t;
           });
         });
-        U.value && (te.value && U.value.unobserve(te.value), U.value.disconnect()), U.value = new ResizeObserver(l), te.value = ne.value.parentNode, U.value.observe(te.value);
+        j.value && (le.value && j.value.unobserve(le.value), j.value.disconnect()), j.value = new ResizeObserver(l), le.value = U.value.parentNode, j.value.observe(le.value);
       }
     }
-    const g = x(Wt()), _t = x(null), ce = x(!1), pe = x(""), z = x(null), ze = x(0);
+    const p = $(Wt()), _t = $(null), ce = $(!1), ge = $(""), z = $(null), ze = $(0);
     function Ne() {
       const l = vt({
         userConfig: O.config,
@@ -87,195 +85,195 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
       });
       return l.theme ? {
         ...vt({
-          userConfig: Kt.vue_ui_donut[l.theme] || O.config,
+          userConfig: Qt.vue_ui_donut[l.theme] || O.config,
           defaultConfig: l
         }),
-        customPalette: Jt[l.theme] || ee
+        customPalette: Kt[l.theme] || te
       } : l;
     }
     const e = y({
       get: () => Ne(),
       set: (l) => l
-    }), T = x(!0), B = E([]);
-    function xt(l, u = 1e3, t = 50) {
+    }), P = $(!0), B = E([]);
+    function $t(l, o = 1e3, t = 50) {
       return new Promise((a) => {
         const v = l.length;
         B.value = Array(v).fill(0);
         let d = 0;
-        l.forEach((_, $) => {
+        l.forEach((_, x) => {
           setTimeout(() => {
-            const R = performance.now();
-            function I(ie) {
-              const ye = Math.min((ie - R) / u, 1), Yt = it(ye);
-              B.value[$] = _ * Yt, B.value = [...B.value], ye < 1 ? requestAnimationFrame(I) : (B.value[$] = _, B.value = [...B.value], d += 1, d === v && a());
+            const W = performance.now();
+            function X(ie) {
+              const ye = Math.min((ie - W) / o, 1), Yt = it(ye);
+              B.value[x] = _ * Yt, B.value = [...B.value], ye < 1 ? requestAnimationFrame(X) : (B.value[x] = _, B.value = [...B.value], d += 1, d === v && a());
             }
-            requestAnimationFrame(I);
-          }, $ * t);
+            requestAnimationFrame(X);
+          }, x * t);
         });
       });
     }
-    tt(async () => {
-      const l = O.dataset.map((u) => u.values.reduce((t, a) => t + a, 0));
-      e.value.startAnimation.show && await xt(
+    lt(async () => {
+      const l = O.dataset.map((o) => o.values.reduce((t, a) => t + a, 0));
+      e.value.startAnimation.show && await $t(
         l,
         e.value.startAnimation.durationMs,
         e.value.startAnimation.staggerMs
-      ), T.value = !1;
+      ), P.value = !1;
     });
-    const { userOptionsVisible: ge, setUserOptionsVisibility: Me, keepUserOptionState: Ye } = ol({ config: e.value }), { svgRef: me } = ul({ config: e.value.style.chart.title });
-    function $t() {
+    const { userOptionsVisible: pe, setUserOptionsVisibility: Me, keepUserOptionState: Ye } = ul({ config: e.value }), { svgRef: me } = sl({ config: e.value.style.chart.title });
+    function xt() {
       Me(!0);
     }
     function Ct() {
       Me(!1);
     }
-    lt(() => O.config, (l) => {
-      e.value = Ne(), ge.value = !e.value.userOptions.showOnChartHover, Oe(), Se.value += 1, Fe.value += 1, Le.value += 1, h.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, h.value.showTable = e.value.table.show, h.value.showTooltip = e.value.style.chart.tooltip.show, s.value.height = e.value.style.chart.height, s.value.width = e.value.style.chart.width;
+    at(() => O.config, (l) => {
+      e.value = Ne(), pe.value = !e.value.userOptions.showOnChartHover, Oe(), Se.value += 1, Fe.value += 1, Le.value += 1, h.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, h.value.showTable = e.value.table.show, h.value.showTooltip = e.value.style.chart.tooltip.show, s.value.height = e.value.style.chart.height, s.value.width = e.value.style.chart.width;
     }, { deep: !0 });
-    const Xe = y(() => {
-      const { top: l, right: u, bottom: t, left: a } = e.value.style.chart.padding;
+    const Ie = y(() => {
+      const { top: l, right: o, bottom: t, left: a } = e.value.style.chart.padding;
       return {
-        css: `padding:${l}px ${u}px ${t}px ${a}px`,
+        css: `padding:${l}px ${o}px ${t}px ${a}px`,
         top: l,
-        right: u,
+        right: o,
         bottom: t,
         left: a
       };
-    }), { isPrinting: Ie, isImaging: De, generatePdf: Ve, generateImage: Be } = al({
-      elementId: `donut__${g.value}`,
+    }), { isPrinting: Xe, isImaging: Ve, generatePdf: De, generateImage: Be } = ol({
+      elementId: `donut__${p.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-donut",
       options: e.value.userOptions.print
-    }), Tt = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ge = y(() => Rt(e.value.customPalette)), h = x({
+    }), Pt = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ge = y(() => Et(e.value.customPalette)), h = $({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
-    }), s = x({
+    }), s = $({
       height: e.value.style.chart.height,
       width: e.value.style.chart.width
-    }), q = y(() => {
-      const l = e.value.style.chart.layout.donut.strokeWidth / 512, u = Math.min(s.value.width, s.value.height) * l, t = u > k.value ? k.value : u;
+    }), J = y(() => {
+      const l = e.value.style.chart.layout.donut.strokeWidth / 512, o = Math.min(s.value.width, s.value.height) * l, t = o > k.value ? k.value : o;
       return Math.max(t, 3);
-    }), We = dt, G = y(() => O.dataset.map((l, u) => ({
+    }), Re = dt, G = y(() => O.dataset.map((l, o) => ({
       name: l.name,
-      color: nt(l.color) || Ge.value[u] || ee[u] || ee[u % ee.length],
-      value: Et(l.values.reduce((t, a) => t + a, 0)),
+      color: nt(l.color) || Ge.value[o] || te[o] || te[o % te.length],
+      value: Ut(l.values.reduce((t, a) => t + a, 0)),
       absoluteValues: l.values,
       comment: l.comment || "",
-      patternIndex: u,
-      seriesIndex: u,
+      patternIndex: o,
+      seriesIndex: o,
       ghost: !1,
-      pattern: `pattern_${g.value}_${u}`
+      pattern: `pattern_${p.value}_${o}`
     }))), N = E(G.value);
-    lt(() => G.value, (l) => N.value = l);
-    function Pt() {
+    at(() => G.value, (l) => N.value = l);
+    function Tt() {
       return G.value.map((l) => ({
         name: l.name,
         color: l.color,
         value: l.value
       }));
     }
-    const V = x([]), J = x(!1);
-    function Re({ from: l, to: u, duration: t, onUpdate: a, onDone: v, easing: d = it }) {
+    const D = $([]), K = $(!1);
+    function We({ from: l, to: o, duration: t, onUpdate: a, onDone: v, easing: d = it }) {
       const _ = performance.now();
-      function $(R) {
-        const I = Math.min((R - _) / t, 1), ie = d(I), ye = l + (u - l) * ie;
-        a(ye, I), I < 1 ? requestAnimationFrame($) : (a(u, 1), v && v());
+      function x(W) {
+        const X = Math.min((W - _) / t, 1), ie = d(X), ye = l + (o - l) * ie;
+        a(ye, X), X < 1 ? requestAnimationFrame(x) : (a(o, 1), v && v());
       }
-      requestAnimationFrame($);
+      requestAnimationFrame(x);
     }
     function Ee(l) {
-      const u = G.value.find((v, d) => d === l);
+      const o = G.value.find((v, d) => d === l);
       let a = N.value.find((v, d) => d === l).value;
-      if (V.value.includes(l)) {
+      if (D.value.includes(l)) {
         let d = function() {
           N.value = N.value.map(
-            ($, R) => l === R ? { ...$, value: v } : $
+            (x, W) => l === W ? { ...x, value: v } : x
           );
         }, _ = function() {
-          J.value = !0, Re({
+          K.value = !0, We({
             from: a,
             to: v,
             duration: e.value.serieToggleAnimation.durationMs,
-            onUpdate: ($, R) => {
+            onUpdate: (x, W) => {
               N.value = N.value.map(
-                (I, ie) => l === ie ? { ...I, value: $ } : I
+                (X, ie) => l === ie ? { ...X, value: x } : X
               );
             },
             onDone: () => {
-              d(), J.value = !1;
+              d(), K.value = !1;
             }
           });
         };
-        V.value = V.value.filter(($) => $ !== l);
-        const v = u.value;
+        D.value = D.value.filter((x) => x !== l);
+        const v = o.value;
         e.value.serieToggleAnimation.show && e.value.type === "classic" ? _() : d();
-      } else if (V.value.length < G.value.length - 1) {
+      } else if (D.value.length < G.value.length - 1) {
         let v = function() {
-          V.value.push(l), N.value = N.value.map(
-            (_, $) => l === $ ? { ..._, value: 0 } : _
+          D.value.push(l), N.value = N.value.map(
+            (_, x) => l === x ? { ..._, value: 0 } : _
           );
         }, d = function() {
-          J.value = !0, Re({
+          K.value = !0, We({
             from: a,
             to: 0,
             duration: e.value.serieToggleAnimation.durationMs,
-            onUpdate: (_, $) => {
+            onUpdate: (_, x) => {
               N.value = N.value.map(
-                (R, I) => l === I ? { ...R, value: _ } : R
+                (W, X) => l === X ? { ...W, value: _ } : W
               );
             },
             onDone: () => {
-              v(), J.value = !1;
+              v(), K.value = !1;
             }
           });
         };
         e.value.serieToggleAnimation.show && e.value.type === "classic" ? d() : v();
       }
-      We("selectLegend", W.value.map((v) => ({
+      Re("selectLegend", R.value.map((v) => ({
         name: v.name,
         color: v.color,
         value: v.value
       })));
     }
-    const At = y(() => O.dataset.reduce((l, u) => l + u.values.reduce((t, a) => t + a, 0), 0)), W = y(() => {
-      if (T.value) {
+    const At = y(() => O.dataset.reduce((l, o) => l + o.values.reduce((t, a) => t + a, 0), 0)), R = y(() => {
+      if (P.value) {
         const l = B.value.map((t, a) => ({
           ...G.value[a],
           value: t,
           color: G.value[a].color,
           ghost: !1
-        })), u = At.value - B.value.reduce((t, a) => t + a, 0);
-        return u > 0 && l.push({
+        })), o = At.value - B.value.reduce((t, a) => t + a, 0);
+        return o > 0 && l.push({
           name: "__ghost__",
-          value: u,
+          value: o,
           color: "transparent",
           ghost: !0
         }), l;
       } else
-        return N.value.forEach((l, u) => {
+        return N.value.forEach((l, o) => {
           if ([null, void 0].includes(l.values))
             return {
               ...l,
               values: []
             };
-        }), N.value.map((l, u) => ({
+        }), N.value.map((l, o) => ({
           ...l,
-          seriesIndex: u
-        })).filter((l, u) => !V.value.includes(u));
-    }), Ue = y(() => O.dataset.map((l, u) => ({
+          seriesIndex: o
+        })).filter((l, o) => !D.value.includes(o));
+    }), Ue = y(() => O.dataset.map((l, o) => ({
       name: l.name,
-      color: nt(l.color) || Ge.value[u] || ee[u] || ee[u % ee.length],
+      color: nt(l.color) || Ge.value[o] || te[o] || te[o % te.length],
       value: (l.values || []).reduce((t, a) => t + a, 0),
       shape: "circle",
-      patternIndex: u
-    })).map((l, u) => ({
+      patternIndex: o
+    })).map((l, o) => ({
       ...l,
       proportion: l.value / O.dataset.map((t) => (t.values || []).reduce((a, v) => a + v, 0)).reduce((t, a) => t + a, 0),
-      opacity: V.value.includes(u) ? 0.5 : 1,
-      segregate: () => !J.value && Ee(u),
-      isSegregated: V.value.includes(u)
+      opacity: D.value.includes(o) ? 0.5 : 1,
+      segregate: () => !K.value && Ee(o),
+      isSegregated: D.value.includes(o)
     }))), St = y(() => ({
       cy: "donut-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
@@ -286,7 +284,7 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
     })), k = y(() => {
       const l = Math.min(s.value.width / 3, s.value.height / 3);
       return l < 55 ? 55 : l;
-    }), S = y(() => rt({ series: W.value }, s.value.width / 2, s.value.height / 2, k.value, k.value, 1.99999, 2, 1, 360, 105.25, q.value)), Ft = y(() => Math.abs(W.value.map((l) => l.value).reduce((l, u) => l + u, 0)) > 0), Lt = y(() => rt({
+    }), S = y(() => rt({ series: R.value }, s.value.width / 2, s.value.height / 2, k.value, k.value, 1.99999, 2, 1, 360, 105.25, J.value)), Ft = y(() => Math.abs(R.value.map((l) => l.value).reduce((l, o) => l + o, 0)) > 0), Lt = y(() => rt({
       series: [
         {
           value: 1,
@@ -298,30 +296,30 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
           absoluteValues: [1]
         }
       ]
-    }, s.value.width / 2, s.value.height / 2, k.value, k.value, 1.99999, 2, 1, 360, 105.25, q.value)), Y = y(() => S.value.filter((l) => !l.ghost)), c = y(() => {
-      const l = Math.max(...W.value.map((t) => t.value)), u = W.value.map((t) => t.value / l);
-      return Ut({
-        series: u,
+    }, s.value.width / 2, s.value.height / 2, k.value, k.value, 1.99999, 2, 1, 360, 105.25, J.value)), Y = y(() => S.value.filter((l) => !l.ghost)), c = y(() => {
+      const l = Math.max(...R.value.map((t) => t.value)), o = R.value.map((t) => t.value / l);
+      return jt({
+        series: o,
         center: {
           x: s.value.width / 2,
           y: s.value.height / 2
         },
         maxRadius: Math.min(s.value.width, s.value.height) / 3,
-        hasGhost: T.value
+        hasGhost: P.value
       });
     });
-    function le(l) {
+    function ae(l) {
       return l.x > s.value.width / 2 + 6 ? "start" : l.x < s.value.width / 2 - 6 ? "end" : "middle";
     }
     function Ot(l) {
       return l.middlePoint.y > s.value.height / 2 ? L({ initX: l.middlePoint.x, initY: l.middlePoint.y, offset: 100, centerX: s.value.width / 2, centerY: s.value.height / 2 }).y : L({ initX: l.middlePoint.x, initY: l.middlePoint.y, offset: 0, centerX: s.value.width / 2, centerY: s.value.height / 2 }).y - 100;
     }
-    function X(l) {
+    function I(l) {
       return l.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
     }
-    function be(l, u) {
-      const t = l.value / zt(u);
-      return isNaN(t) ? 0 : D(
+    function be(l, o) {
+      const t = l.value / zt(o);
+      return isNaN(t) ? 0 : V(
         e.value.style.chart.layout.labels.percentage.formatter,
         t * 100,
         M({
@@ -333,14 +331,14 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
       );
     }
     function zt(l) {
-      return [...l].map((u) => u.value).reduce((u, t) => u + t, 0);
+      return [...l].map((o) => o.value).reduce((o, t) => o + t, 0);
     }
-    const F = y(() => W.value.map((l) => l.value).reduce((l, u) => l + u, 0)), je = y(() => F.value / W.value.length), He = y(() => (l) => J.value ? l.proportion * 100 : l.value / F.value * 100), we = x(null), re = x(!1);
-    function qe({ datapoint: l, relativeIndex: u, seriesIndex: t, show: a = !1 }) {
-      we.value = { datapoint: l, seriesIndex: t, config: e.value, series: G.value }, ce.value = a, z.value = u;
+    const F = y(() => R.value.map((l) => l.value).reduce((l, o) => l + o, 0)), je = y(() => F.value / R.value.length), He = y(() => (l) => K.value ? l.proportion * 100 : l.value / F.value * 100), we = $(null), re = $(!1);
+    function qe({ datapoint: l, relativeIndex: o, seriesIndex: t, show: a = !1 }) {
+      we.value = { datapoint: l, seriesIndex: t, config: e.value, series: G.value }, ce.value = a, z.value = o;
       let v = "";
       const d = e.value.style.chart.tooltip.customFormat;
-      if (re.value = !1, el(d))
+      if (re.value = !1, tl(d))
         try {
           const _ = d({
             seriesIndex: t,
@@ -348,12 +346,12 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             series: G.value,
             config: e.value
           });
-          typeof _ == "string" && (pe.value = _, re.value = !0);
+          typeof _ == "string" && (ge.value = _, re.value = !0);
         } catch {
           console.warn("Custom format cannot be applied."), re.value = !1;
         }
       if (!re.value) {
-        if (v += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l.name}</div>`, v += `<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="${l.color}"/>${kt.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${g.value}_${t})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (v += `<b>${D(
+        if (v += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l.name}</div>`, v += `<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="${l.color}"/>${kt.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${p.value}_${t})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (v += `<b>${V(
           e.value.style.chart.layout.labels.value.formatter,
           l.value,
           M({
@@ -364,11 +362,11 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
           }),
           {
             datapoint: l,
-            relativeIndex: u,
+            relativeIndex: o,
             seriesIndex: t
           }
         )}</b>`), e.value.style.chart.tooltip.showPercentage) {
-          const _ = D(
+          const _ = V(
             e.value.style.chart.layout.labels.percentage.formatter,
             l.proportion * 100,
             M({
@@ -378,31 +376,31 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             }),
             {
               datapoint: l,
-              relativeIndex: u,
+              relativeIndex: o,
               seriesIndex: t
             }
           );
           e.value.style.chart.tooltip.showValue ? v += `<span>(${_})</span></div>` : v += `<b>${_}</b></div>`;
         }
-        e.value.style.chart.comments.showInTooltip && l.comment && (v += `<div class="vue-data-ui-tooltip-comment" style="background:${l.color}20; padding: 6px; margin-bottom: 6px; margin-top:6px; border-left: 1px solid ${l.color}">${l.comment}</div>`), pe.value = `<div>${v}</div>`;
+        e.value.style.chart.comments.showInTooltip && l.comment && (v += `<div class="vue-data-ui-tooltip-comment" style="background:${l.color}20; padding: 6px; margin-bottom: 6px; margin-top:6px; border-left: 1px solid ${l.color}">${l.comment}</div>`), ge.value = `<div>${v}</div>`;
       }
     }
-    function K(l) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(z.value) && z.value !== l ? `url(#blur_${g.value})` : "";
+    function Q(l) {
+      return e.value.useBlurOnHover && ![null, void 0].includes(z.value) && z.value !== l ? `url(#blur_${p.value})` : "";
     }
-    const j = y(() => {
-      const l = W.value.map((t) => ({
+    const H = y(() => {
+      const l = R.value.map((t) => ({
         name: t.name,
         color: t.color
-      })), u = W.value.map((t) => t.value);
-      return { head: l, body: u };
+      })), o = R.value.map((t) => t.value);
+      return { head: l, body: o };
     });
     function Je(l = null) {
       Dt(() => {
-        const u = j.value.head.map((v, d) => [[
+        const o = H.value.head.map((v, d) => [[
           v.name
-        ], [j.value.body[d]], [isNaN(j.value.body[d] / F.value) ? "-" : j.value.body[d] / F.value * 100]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(u), a = Qt(t);
-        l ? l(a) : Zt({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-donut" });
+        ], [H.value.body[d]], [isNaN(H.value.body[d] / F.value) ? "-" : H.value.body[d] / F.value * 100]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(o), a = Zt(t);
+        l ? l(a) : el({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-donut" });
       });
     }
     const de = y(() => {
@@ -410,13 +408,13 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
         ' <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>',
         M({ 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 }),
         "100%"
-      ], u = j.value.head.map((v, d) => [
+      ], o = H.value.head.map((v, d) => [
         {
           color: v.color,
           name: v.name
         },
-        j.value.body[d],
-        isNaN(j.value.body[d] / F.value) ? "-" : (j.value.body[d] / F.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
+        H.value.body[d],
+        isNaN(H.value.body[d] / F.value) ? "-" : (H.value.body[d] / F.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
       ]), t = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -437,52 +435,66 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
           e.value.table.columnNames.percentage
         ],
         head: l,
-        body: u,
+        body: o,
         config: t
       };
-    }), ae = x(!1);
-    function Nt(l) {
-      ae.value = l, ze.value += 1;
+    }), oe = $(!1);
+    function Ke(l) {
+      oe.value = l, ze.value += 1;
     }
-    const Ke = y(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
-    function Mt(l) {
-      return l.toFixed(e.value.style.chart.legend.roundingPercentage).split("").map((u) => "-").join("");
+    const Qe = y(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
+    function Nt(l) {
+      return l.toFixed(e.value.style.chart.legend.roundingPercentage).split("").map((o) => "-").join("");
     }
-    function H(l, u) {
-      We("selectDatapoint", { datapoint: l, index: u });
+    function q(l, o) {
+      Re("selectDatapoint", { datapoint: l, index: o });
     }
-    function Qe() {
+    function Ze() {
       h.value.showTable = !h.value.showTable;
     }
-    function Ze() {
+    function et() {
       h.value.dataLabels.show = !h.value.dataLabels.show;
     }
-    function et() {
+    function tt() {
       h.value.showTooltip = !h.value.showTooltip;
     }
-    const he = x(!1);
+    const he = $(!1);
     function ke() {
       he.value = !he.value;
     }
+    async function Mt({ scale: l = 2 } = {}) {
+      if (!U.value) return;
+      const { width: o, height: t } = U.value.getBoundingClientRect(), a = o / t, { imageUri: v, base64: d } = await vl({ domElement: U.value, base64: !0, img: !0, scale: l });
+      return {
+        imageUri: v,
+        base64: d,
+        title: e.value.style.chart.title.text,
+        width: o,
+        height: t,
+        aspectRatio: a
+      };
+    }
     return ct({
-      getData: Pt,
-      generatePdf: Ve,
+      getData: Tt,
+      getImage: Mt,
+      generatePdf: De,
       generateCsv: Je,
       generateImage: Be,
-      toggleTable: Qe,
-      toggleLabels: Ze,
-      toggleTooltip: et,
-      toggleAnnotator: ke
-    }), (l, u) => (o(), n("div", {
+      toggleTable: Ze,
+      toggleLabels: et,
+      toggleTooltip: tt,
+      toggleAnnotator: ke,
+      toggleFullscreen: Ke
+    }), (l, o) => (u(), n("div", {
       ref_key: "donutChart",
-      ref: ne,
-      class: _e(`vue-ui-donut ${ae.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref: U,
+      class: _e(`vue-ui-donut ${oe.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: b(`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: $t,
+      id: `donut__${p.value}`,
+      onMouseenter: xt,
       onMouseleave: Ct
     }, [
-      e.value.userOptions.buttons.annotator && r(me) ? (o(), Z(r(pt), {
+      e.value.userOptions.buttons.annotator && r(me) ? (u(), ee(r(gt), {
         key: 0,
         color: e.value.style.chart.color,
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -491,20 +503,20 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
         onClose: ke
       }, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : i("", !0),
       m(l.$slots, "userConfig", {}, void 0, !0),
-      Tt.value ? (o(), n("div", {
+      Pt.value ? (u(), n("div", {
         key: 1,
         ref_key: "noTitle",
         ref: Ae,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : i("", !0),
-      e.value.style.chart.title.text ? (o(), n("div", {
+      e.value.style.chart.title.text ? (u(), n("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: Ce,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (o(), Z(nl, {
+        (u(), ee(rl, {
           key: `title_${Se.value}`,
           config: {
             title: {
@@ -518,15 +530,15 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
           }
         }, null, 8, ["config"]))
       ], 512)) : i("", !0),
-      e.value.userOptions.show && se.value && (r(Ye) || r(ge)) ? (o(), Z(r(bt), {
+      e.value.userOptions.show && ne.value && (r(Ye) || r(pe)) ? (u(), ee(r(bt), {
         ref_key: "details",
         ref: _t,
         key: `user_option_${ze.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: r(Ie),
-        isImaging: r(De),
-        uid: g.value,
+        isPrinting: r(Xe),
+        isImaging: r(Ve),
+        uid: p.value,
         hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -534,8 +546,8 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
         hasTable: e.value.userOptions.buttons.table,
         hasLabel: e.value.userOptions.buttons.labels,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: ae.value,
-        chartElement: ne.value,
+        isFullscreen: oe.value,
+        chartElement: U.value,
         position: e.value.userOptions.position,
         callbacks: e.value.userOptions.callbacks,
         isTooltip: h.value.showTooltip,
@@ -543,22 +555,22 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: he.value,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: Nt,
-        onGeneratePdf: r(Ve),
+        onToggleFullscreen: Ke,
+        onGeneratePdf: r(De),
         onGenerateCsv: Je,
         onGenerateImage: r(Be),
-        onToggleTable: Qe,
-        onToggleLabels: Ze,
-        onToggleTooltip: et,
+        onToggleTable: Ze,
+        onToggleLabels: et,
+        onToggleTooltip: tt,
         onToggleAnnotator: ke,
         style: b({
-          visibility: r(Ye) ? r(ge) ? "visible" : "hidden" : "visible"
+          visibility: r(Ye) ? r(pe) ? "visible" : "hidden" : "visible"
         })
-      }, at({ _: 2 }, [
+      }, ot({ _: 2 }, [
         l.$slots.menuIcon ? {
           name: "menuIcon",
           fn: C(({ isOpen: t, color: a }) => [
-            m(l.$slots, "menuIcon", oe(ue({ isOpen: t, color: a })), void 0, !0)
+            m(l.$slots, "menuIcon", ue(se({ isOpen: t, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -607,29 +619,29 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
         l.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: C(({ toggleFullscreen: t, isFullscreen: a }) => [
-            m(l.$slots, "optionFullscreen", oe(ue({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
+            m(l.$slots, "optionFullscreen", ue(se({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         l.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: C(({ toggleAnnotator: t, isAnnotator: a }) => [
-            m(l.$slots, "optionAnnotator", oe(ue({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
+            m(l.$slots, "optionAnnotator", ue(se({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
           ]),
           key: "8"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "callbacks", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : i("", !0),
-      se.value ? (o(), n("svg", {
+      ne.value ? (u(), n("svg", {
         key: 4,
         ref_key: "svgRef",
         ref: me,
-        xmlns: r(jt),
-        class: _e({ "vue-data-ui-fullscreen--on": ae.value, "vue-data-ui-fulscreen--off": !ae.value }),
+        xmlns: r(Ht),
+        class: _e({ "vue-data-ui-fullscreen--on": oe.value, "vue-data-ui-fulscreen--off": !oe.value }),
         viewBox: `0 0 ${s.value.width <= 0 ? 10 : s.value.width} ${s.value.height <= 0 ? 10 : s.value.height}`,
-        style: b(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${Xe.value.css}`)
+        style: b(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${Ie.value.css}`)
       }, [
-        xe(r(ft)),
-        l.$slots["chart-background"] ? (o(), n("foreignObject", {
+        $e(r(ft)),
+        l.$slots["chart-background"] ? (u(), n("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -640,54 +652,54 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
           }
         }, [
           m(l.$slots, "chart-background", {}, void 0, !0)
-        ], 8, dl)) : i("", !0),
-        e.value.type === "classic" && !isNaN(q.value / k.value) ? (o(), n("defs", hl, [
-          e.value.style.chart.useGradient ? (o(), n("radialGradient", {
+        ], 8, yl)) : i("", !0),
+        e.value.type === "classic" && !isNaN(J.value / k.value) ? (u(), n("defs", fl, [
+          e.value.style.chart.useGradient ? (u(), n("radialGradient", {
             key: 0,
-            id: `gradient_${g.value}`
+            id: `gradient_${p.value}`
           }, [
             f("stop", {
               offset: "0%",
               "stop-color": r(fe)(e.value.style.chart.backgroundColor, 0),
               "stop-opacity": "0"
-            }, null, 8, fl),
+            }, null, 8, pl),
             f("stop", {
-              offset: `${(1 - q.value / k.value) * 100}%`,
+              offset: `${(1 - J.value / k.value) * 100}%`,
               "stop-color": r(fe)("#FFFFFF", 0),
               "stop-opacity": "0"
-            }, null, 8, pl),
+            }, null, 8, ml),
             f("stop", {
-              offset: `${(1 - q.value / k.value / 2) * 100}%`,
+              offset: `${(1 - J.value / k.value / 2) * 100}%`,
               "stop-color": r(fe)("#FFFFFF", e.value.style.chart.gradientIntensity)
-            }, null, 8, gl),
+            }, null, 8, bl),
             f("stop", {
               offset: "100%",
               "stop-color": r(fe)(e.value.style.chart.backgroundColor, 0),
               "stop-opacity": "0"
-            }, null, 8, ml)
-          ], 8, yl)) : i("", !0)
+            }, null, 8, wl)
+          ], 8, gl)) : i("", !0)
         ])) : i("", !0),
-        e.value.type === "polar" ? (o(), n("defs", bl, [
-          (o(!0), n(p, null, A(c.value, (t, a) => (o(), n("radialGradient", {
-            id: `polar_gradient_${a}_${g.value}`,
+        e.value.type === "polar" ? (u(), n("defs", kl, [
+          (u(!0), n(g, null, A(c.value, (t, a) => (u(), n("radialGradient", {
+            id: `polar_gradient_${a}_${p.value}`,
             cx: (isNaN(t.middlePoint.x / s.value.width * 100) ? 0 : t.middlePoint.x / s.value.width * 100) + "%",
             cy: (isNaN(t.middlePoint.y / s.value.height * 100) ? 0 : t.middlePoint.y / s.value.height * 100) + "%",
             r: "62%"
           }, [
             f("stop", {
               offset: "0%",
-              "stop-color": r(Ht)(S.value[a].color, 0.05),
+              "stop-color": r(qt)(S.value[a].color, 0.05),
               "stop-opacity": e.value.style.chart.gradientIntensity / 100
-            }, null, 8, kl),
+            }, null, 8, $l),
             f("stop", {
               offset: "100%",
               "stop-color": S.value[a].color
-            }, null, 8, _l)
-          ], 8, wl))), 256))
+            }, null, 8, xl)
+          ], 8, _l))), 256))
         ])) : i("", !0),
         f("defs", null, [
           f("filter", {
-            id: `blur_${g.value}`,
+            id: `blur_${p.value}`,
             x: "-50%",
             y: "-50%",
             width: "200%",
@@ -696,15 +708,15 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             f("feGaussianBlur", {
               in: "SourceGraphic",
               stdDeviation: 2,
-              id: `blur_std_${g.value}`
-            }, null, 8, $l),
-            u[6] || (u[6] = f("feColorMatrix", {
+              id: `blur_std_${p.value}`
+            }, null, 8, Pl),
+            o[6] || (o[6] = f("feColorMatrix", {
               type: "saturate",
               values: "0"
             }, null, -1))
-          ], 8, xl),
+          ], 8, Cl),
           f("filter", {
-            id: `shadow_${g.value}`,
+            id: `shadow_${p.value}`,
             "color-interpolation-filters": "sRGB"
           }, [
             f("feDropShadow", {
@@ -713,10 +725,10 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
               stdDeviation: "10",
               "flood-opacity": "0.5",
               "flood-color": e.value.style.chart.layout.donut.shadowColor
-            }, null, 8, Tl)
-          ], 8, Cl),
+            }, null, 8, Al)
+          ], 8, Tl),
           f("filter", {
-            id: `drop_shadow_${g.value}`,
+            id: `drop_shadow_${p.value}`,
             "color-interpolation-filters": "sRGB",
             x: "-50%",
             y: "-50%",
@@ -729,23 +741,23 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
               stdDeviation: "3",
               "flood-opacity": "1",
               "flood-color": e.value.style.chart.layout.donut.shadowColor
-            }, null, 8, Al)
-          ], 8, Pl)
+            }, null, 8, Fl)
+          ], 8, Sl)
         ]),
-        e.value.type === "classic" ? (o(!0), n(p, { key: 3 }, A(S.value.filter((t) => !t.ghost), (t, a) => (o(), n("g", null, [
-          X(t) && h.value.dataLabels.show ? (o(), n("path", {
+        e.value.type === "classic" ? (u(!0), n(g, { key: 3 }, A(S.value.filter((t) => !t.ghost), (t, a) => (u(), n("g", null, [
+          I(t) && h.value.dataLabels.show ? (u(), n("path", {
             key: 0,
-            d: r(qt)(t, { x: s.value.width / 2, y: s.value.height / 2 }, 16, 16, !1, !1, q.value, 12, e.value.style.chart.layout.curvedMarkers),
+            d: r(Jt)(t, { x: s.value.width / 2, y: s.value.height / 2 }, 16, 16, !1, !1, J.value, 12, e.value.style.chart.layout.curvedMarkers),
             stroke: t.color,
             "stroke-width": "1",
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             fill: "none",
-            filter: K(a)
-          }, null, 8, Sl)) : i("", !0)
+            filter: Q(a)
+          }, null, 8, Ll)) : i("", !0)
         ]))), 256)) : i("", !0),
-        e.value.type === "polar" ? (o(!0), n(p, { key: 4 }, A(S.value.filter((t) => !t.ghost), (t, a) => (o(), n("g", null, [
-          X(t) && h.value.dataLabels.show ? (o(), n("path", {
+        e.value.type === "polar" ? (u(!0), n(g, { key: 4 }, A(S.value.filter((t) => !t.ghost), (t, a) => (u(), n("g", null, [
+          I(t) && h.value.dataLabels.show ? (u(), n("path", {
             key: 0,
             d: `M ${r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 24, centerX: s.value.width / 2, centerY: s.value.height / 2 }).x},${r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 24, centerX: s.value.width / 2, centerY: s.value.height / 2 }).y} ${c.value[a].middlePoint.x},${c.value[a].middlePoint.y}`,
             stroke: t.color,
@@ -753,127 +765,127 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             fill: "none",
-            filter: K(a),
+            filter: Q(a),
             style: b({
-              transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+              transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
             })
-          }, null, 12, Fl)) : i("", !0)
+          }, null, 12, Ol)) : i("", !0)
         ]))), 256)) : i("", !0),
-        e.value.type === "classic" && e.value.style.chart.layout.donut.useShadow ? (o(), n("circle", {
+        e.value.type === "classic" && e.value.style.chart.layout.donut.useShadow ? (u(), n("circle", {
           key: 5,
           cx: s.value.width / 2,
           cy: s.value.height / 2,
           r: k.value <= 0 ? 10 : k.value,
           fill: e.value.style.chart.backgroundColor,
-          filter: `url(#shadow_${g.value})`
-        }, null, 8, Ll)) : i("", !0),
-        l.$slots.pattern ? (o(), n("g", Ol, [
-          (o(!0), n(p, null, A($e.dataset, (t, a) => (o(), n("defs", {
+          filter: `url(#shadow_${p.value})`
+        }, null, 8, zl)) : i("", !0),
+        l.$slots.pattern ? (u(), n("g", Nl, [
+          (u(!0), n(g, null, A(xe.dataset, (t, a) => (u(), n("defs", {
             key: `pattern-${t.patternIndex}`
           }, [
-            m(l.$slots, "pattern", ot({ ref_for: !0 }, { seriesIndex: a, patternId: `pattern_${g.value}_${a}` }), void 0, !0)
+            m(l.$slots, "pattern", ut({ ref_for: !0 }, { seriesIndex: a, patternId: `pattern_${p.value}_${a}` }), void 0, !0)
           ]))), 128))
         ])) : i("", !0),
-        F.value && e.value.type === "classic" ? (o(), n(p, { key: 7 }, [
-          (o(!0), n(p, null, A(Y.value, (t, a) => (o(), n("path", {
+        F.value && e.value.type === "classic" ? (u(), n(g, { key: 7 }, [
+          (u(!0), n(g, null, A(Y.value, (t, a) => (u(), n("path", {
             stroke: e.value.style.chart.backgroundColor,
             d: t.arcSlice,
             fill: "#FFFFFF"
-          }, null, 8, zl))), 256)),
-          (o(!0), n(p, null, A(Y.value, (t, a) => (o(), n("path", {
+          }, null, 8, Ml))), 256)),
+          (u(!0), n(g, null, A(Y.value, (t, a) => (u(), n("path", {
             class: "vue-ui-donut-arc-path",
             d: t.arcSlice,
             fill: t.color,
             stroke: e.value.style.chart.backgroundColor,
             "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-            filter: K(a)
-          }, null, 8, Nl))), 256)),
-          l.$slots.pattern ? (o(), n("g", Ml, [
-            (o(!0), n(p, null, A(Y.value, (t, a) => (o(), n("path", {
+            filter: Q(a)
+          }, null, 8, Yl))), 256)),
+          l.$slots.pattern ? (u(), n("g", Il, [
+            (u(!0), n(g, null, A(Y.value, (t, a) => (u(), n("path", {
               class: "vue-ui-donut-arc-path",
               d: t.arcSlice,
               fill: `url(#${t.pattern})`,
               stroke: e.value.style.chart.backgroundColor,
               "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-              filter: K(a)
-            }, null, 8, Yl))), 256))
+              filter: Q(a)
+            }, null, 8, Xl))), 256))
           ])) : i("", !0)
         ], 64)) : i("", !0),
-        F.value && e.value.type === "polar" ? (o(), n(p, { key: 8 }, [
-          S.value.length > 1 ? (o(), n("g", Xl, [
-            (o(!0), n(p, null, A(Y.value, (t, a) => (o(), n("path", {
+        F.value && e.value.type === "polar" ? (u(), n(g, { key: 8 }, [
+          S.value.length > 1 ? (u(), n("g", Vl, [
+            (u(!0), n(g, null, A(Y.value, (t, a) => (u(), n("path", {
               stroke: e.value.style.chart.backgroundColor,
               d: c.value[a].path,
               fill: "#FFFFFF",
               style: b({
-                transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
               })
-            }, null, 12, Il))), 256)),
-            e.value.style.chart.layout.donut.useShadow ? (o(), n("g", Dl, [
-              (o(!0), n(p, null, A(Y.value, (t, a) => (o(), n("path", {
+            }, null, 12, Dl))), 256)),
+            e.value.style.chart.layout.donut.useShadow ? (u(), n("g", Bl, [
+              (u(!0), n(g, null, A(Y.value, (t, a) => (u(), n("path", {
                 class: "vue-ui-donut-arc-path",
                 d: c.value[a].path,
                 fill: "transparent",
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-                filter: `url(#drop_shadow_${g.value})`,
+                filter: `url(#drop_shadow_${p.value})`,
                 style: b({
-                  transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                  transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                 })
-              }, null, 12, Vl))), 256))
+              }, null, 12, Gl))), 256))
             ])) : i("", !0),
-            l.$slots.pattern ? (o(), n("g", Bl, [
-              (o(!0), n(p, null, A(Y.value, (t, a) => (o(), n("path", {
+            l.$slots.pattern ? (u(), n("g", Rl, [
+              (u(!0), n(g, null, A(Y.value, (t, a) => (u(), n("path", {
                 class: "vue-ui-donut-arc-path",
                 d: c.value[a].path,
                 fill: `url(#${t.pattern})`,
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-                filter: K(a),
+                filter: Q(a),
                 style: b({
-                  transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                  transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                 })
-              }, null, 12, Gl))), 256))
+              }, null, 12, Wl))), 256))
             ])) : i("", !0),
-            (o(!0), n(p, null, A(Y.value, (t, a) => (o(), n("path", {
+            (u(!0), n(g, null, A(Y.value, (t, a) => (u(), n("path", {
               class: "vue-ui-donut-arc-path",
               d: c.value[a].path,
-              fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${a}_${g.value})` : t.color,
+              fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${a}_${p.value})` : t.color,
               stroke: e.value.style.chart.backgroundColor,
               "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-              filter: K(a),
+              filter: Q(a),
               style: b({
-                transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
               })
-            }, null, 12, Wl))), 256))
-          ])) : (o(), n("g", Rl, [
-            l.$slots.pattern ? (o(), n("circle", {
+            }, null, 12, El))), 256))
+          ])) : (u(), n("g", Ul, [
+            l.$slots.pattern ? (u(), n("circle", {
               key: 0,
               cx: s.value.width / 2,
               cy: s.value.height / 2,
               r: k.value,
-              fill: `url(#pattern_${g.value}_${S.value[0].patternIndex})`,
+              fill: `url(#pattern_${p.value}_${S.value[0].patternIndex})`,
               stroke: e.value.style.chart.backgroundColor,
               "stroke-width": e.value.style.chart.layout.donut.borderWidth
-            }, null, 8, El)) : i("", !0),
+            }, null, 8, jl)) : i("", !0),
             f("circle", {
               cx: s.value.width / 2,
               cy: s.value.height / 2,
               r: k.value,
-              fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${g.value})` : S.value[0].color,
+              fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${p.value})` : S.value[0].color,
               stroke: e.value.style.chart.backgroundColor,
               "stroke-width": e.value.style.chart.layout.donut.borderWidth
-            }, null, 8, Ul)
+            }, null, 8, Hl)
           ]))
-        ], 64)) : (o(), n(p, { key: 9 }, [
-          e.value.type === "classic" && !Ft.value ? (o(), n("g", jl, [
-            (o(!0), n(p, null, A(Lt.value, (t, a) => (o(), n("path", {
+        ], 64)) : (u(), n(g, { key: 9 }, [
+          e.value.type === "classic" && !Ft.value ? (u(), n("g", ql, [
+            (u(!0), n(g, null, A(Lt.value, (t, a) => (u(), n("path", {
               class: "vue-ui-donut-arc-path",
               d: t.arcSlice,
               fill: t.color,
               stroke: e.value.style.chart.backgroundColor,
               "stroke-width": e.value.style.chart.layout.donut.borderWidth
-            }, null, 8, Hl))), 256))
+            }, null, 8, Jl))), 256))
           ])) : i("", !0),
           f("circle", {
             cx: s.value.width / 2,
@@ -881,9 +893,9 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             r: k.value <= 0 ? 10 : k.value,
             fill: "transparent",
             stroke: e.value.style.chart.backgroundColor
-          }, null, 8, ql)
+          }, null, 8, Kl)
         ], 64)),
-        e.value.style.chart.useGradient && e.value.type === "classic" ? (o(), n("circle", {
+        e.value.style.chart.useGradient && e.value.type === "classic" ? (u(), n("circle", {
           key: 10,
           cx: s.value.width / 2,
           cy: s.value.height / 2,
@@ -891,11 +903,11 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             /* This might require adjustments */
             k.value <= 0 ? 10 : k.value
           ),
-          fill: `url(#gradient_${g.value})`
-        }, null, 8, Jl)) : i("", !0),
-        F.value ? (o(), n(p, { key: 11 }, [
-          S.value.length > 1 || e.value.type === "classic" ? (o(), n("g", Kl, [
-            (o(!0), n(p, null, A(S.value.filter((t) => !t.ghost), (t, a) => (o(), n("path", {
+          fill: `url(#gradient_${p.value})`
+        }, null, 8, Ql)) : i("", !0),
+        F.value ? (u(), n(g, { key: 11 }, [
+          S.value.length > 1 || e.value.type === "classic" ? (u(), n("g", Zl, [
+            (u(!0), n(g, null, A(S.value.filter((t) => !t.ghost), (t, a) => (u(), n("path", {
               d: e.value.type === "classic" ? t.arcSlice : c.value[a].path,
               fill: z.value === a ? "rgba(0,0,0,0.1)" : "transparent",
               onMouseenter: (v) => qe({
@@ -904,32 +916,32 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
                 seriesIndex: t.seriesIndex,
                 show: !0
               }),
-              onMouseleave: u[0] || (u[0] = (v) => {
+              onMouseleave: o[0] || (o[0] = (v) => {
                 ce.value = !1, z.value = null;
               }),
-              onClick: (v) => H(t, a)
-            }, null, 40, Ql))), 256))
-          ])) : (o(), n("g", Zl, [
+              onClick: (v) => q(t, a)
+            }, null, 40, ea))), 256))
+          ])) : (u(), n("g", ta, [
             f("circle", {
               cx: s.value.width / 2,
               cy: s.value.height / 2,
               r: k.value,
               fill: "transparent",
-              onMouseenter: u[1] || (u[1] = (t) => qe({
+              onMouseenter: o[1] || (o[1] = (t) => qe({
                 datapoint: S.value[0],
                 relativeIndex: 0,
                 seriesIndex: S.value[0].seriesIndex,
                 show: !0
               })),
-              onMouseleave: u[2] || (u[2] = (t) => {
+              onMouseleave: o[2] || (o[2] = (t) => {
                 ce.value = !1, z.value = null;
               }),
-              onClick: u[3] || (u[3] = (t) => H(S.value[0], l.i))
-            }, null, 40, ea)
+              onClick: o[3] || (o[3] = (t) => q(S.value[0], l.i))
+            }, null, 40, la)
           ]))
         ], 64)) : i("", !0),
-        e.value.type === "classic" ? (o(), n(p, { key: 12 }, [
-          e.value.style.chart.layout.labels.hollow.total.show ? (o(), n("text", {
+        e.value.type === "classic" ? (u(), n(g, { key: 12 }, [
+          e.value.style.chart.layout.labels.hollow.total.show ? (u(), n("text", {
             key: 0,
             "text-anchor": "middle",
             x: s.value.width / 2,
@@ -937,8 +949,8 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             fill: e.value.style.chart.layout.labels.hollow.total.color,
             "font-size": e.value.style.chart.layout.labels.hollow.total.fontSize,
             style: b(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
-          }, P(e.value.style.chart.layout.labels.hollow.total.text), 13, ta)) : i("", !0),
-          e.value.style.chart.layout.labels.hollow.total.show ? (o(), n("text", {
+          }, T(e.value.style.chart.layout.labels.hollow.total.text), 13, aa)) : i("", !0),
+          e.value.style.chart.layout.labels.hollow.total.show ? (u(), n("text", {
             key: 1,
             "text-anchor": "middle",
             x: s.value.width / 2,
@@ -946,7 +958,7 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             fill: e.value.style.chart.layout.labels.hollow.total.value.color,
             "font-size": e.value.style.chart.layout.labels.hollow.total.value.fontSize,
             style: b(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
-          }, P(r(D)(
+          }, T(r(V)(
             e.value.style.chart.layout.labels.hollow.total.value.formatter,
             F.value,
             r(M)({
@@ -954,8 +966,8 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
               v: F.value,
               s: e.value.style.chart.layout.labels.hollow.total.value.suffix
             })
-          )), 13, la)) : i("", !0),
-          e.value.style.chart.layout.labels.hollow.average.show ? (o(), n("text", {
+          )), 13, oa)) : i("", !0),
+          e.value.style.chart.layout.labels.hollow.average.show ? (u(), n("text", {
             key: 2,
             "text-anchor": "middle",
             x: s.value.width / 2,
@@ -963,8 +975,8 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             fill: e.value.style.chart.layout.labels.hollow.average.color,
             "font-size": e.value.style.chart.layout.labels.hollow.average.fontSize,
             style: b(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
-          }, P(e.value.style.chart.layout.labels.hollow.average.text), 13, aa)) : i("", !0),
-          e.value.style.chart.layout.labels.hollow.average.show ? (o(), n("text", {
+          }, T(e.value.style.chart.layout.labels.hollow.average.text), 13, ua)) : i("", !0),
+          e.value.style.chart.layout.labels.hollow.average.show ? (u(), n("text", {
             key: 3,
             "text-anchor": "middle",
             x: s.value.width / 2,
@@ -972,7 +984,7 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             fill: e.value.style.chart.layout.labels.hollow.average.value.color,
             "font-size": e.value.style.chart.layout.labels.hollow.average.value.fontSize,
             style: b(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
-          }, P(J.value || T.value ? "--" : r(D)(
+          }, T(K.value || P.value ? "--" : r(V)(
             e.value.style.chart.layout.labels.hollow.average.value.formatter,
             je.value,
             r(M)({
@@ -981,35 +993,35 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
               s: e.value.style.chart.layout.labels.hollow.average.value.suffix,
               r: e.value.style.chart.layout.labels.hollow.average.value.rounding
             })
-          )), 13, oa)) : i("", !0)
+          )), 13, sa)) : i("", !0)
         ], 64)) : i("", !0),
-        (o(!0), n(p, null, A(Y.value.filter((t) => !t.ghost), (t, a) => (o(), n("g", {
-          filter: K(a),
+        (u(!0), n(g, null, A(Y.value.filter((t) => !t.ghost), (t, a) => (u(), n("g", {
+          filter: Q(a),
           class: _e({ animated: e.value.useCssAnimation })
         }, [
-          e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (o(), n("g", sa, [
-            (o(), n("foreignObject", {
+          e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (u(), n("g", ra, [
+            (u(), n("foreignObject", {
               x: r(w)(t, !0).anchor === "end" ? r(w)(t).x - 120 : r(w)(t, !0).anchor === "middle" ? r(w)(t).x - 60 : r(w)(t).x,
-              y: r(ve)(t) - (Ke.value ? 20 : 0),
+              y: r(ve)(t) - (Qe.value ? 20 : 0),
               width: "120",
               height: "60",
               style: { overflow: "visible" }
             }, [
               f("div", null, [
-                m(l.$slots, "dataLabel", ot({ ref_for: !0 }, {
+                m(l.$slots, "dataLabel", ut({ ref_for: !0 }, {
                   datapoint: t,
                   isBlur: !e.value.useBlurOnHover || [null, void 0].includes(z.value) || z.value === a,
-                  isSafari: Ke.value,
-                  isVisible: X(t) && h.value.dataLabels.show,
+                  isSafari: Qe.value,
+                  isVisible: I(t) && h.value.dataLabels.show,
                   textAlign: r(w)(t, !0, 16, !0).anchor,
                   flexAlign: r(w)(t, !0, 16).anchor,
                   percentage: be(t, Y.value)
                 }), void 0, !0)
               ])
-            ], 8, na))
-          ])) : (o(), n("g", ra, [
-            e.value.type === "classic" ? (o(), n(p, { key: 0 }, [
-              X(t) && h.value.dataLabels.show ? (o(), n("circle", {
+            ], 8, ia))
+          ])) : (u(), n("g", va, [
+            e.value.type === "classic" ? (u(), n(g, { key: 0 }, [
+              I(t) && h.value.dataLabels.show ? (u(), n("circle", {
                 key: 0,
                 cx: r(w)(t).x,
                 cy: r(ve)(t) - 3.5,
@@ -1017,12 +1029,12 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": 1,
                 r: 3,
-                filter: !e.value.useBlurOnHover || [null, void 0].includes(z.value) || z.value === a ? "" : `url(#blur_${g.value})`,
-                onClick: (v) => H(t, a)
-              }, null, 8, ia)) : i("", !0)
+                filter: !e.value.useBlurOnHover || [null, void 0].includes(z.value) || z.value === a ? "" : `url(#blur_${p.value})`,
+                onClick: (v) => q(t, a)
+              }, null, 8, ca)) : i("", !0)
             ], 64)) : i("", !0),
-            e.value.type === "polar" ? (o(), n(p, { key: 1 }, [
-              X(t) && h.value.dataLabels.show ? (o(), n("circle", {
+            e.value.type === "polar" ? (u(), n(g, { key: 1 }, [
+              I(t) && h.value.dataLabels.show ? (u(), n("circle", {
                 key: 0,
                 cx: r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 24, centerX: s.value.width / 2, centerY: s.value.height / 2 }).x,
                 cy: r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 24, centerX: s.value.width / 2, centerY: s.value.height / 2 }).y,
@@ -1030,15 +1042,15 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": 1,
                 r: 3,
-                filter: !e.value.useBlurOnHover || [null, void 0].includes(z.value) || z.value === a ? "" : `url(#blur_${g.value})`,
-                onClick: (v) => H(t, a),
+                filter: !e.value.useBlurOnHover || [null, void 0].includes(z.value) || z.value === a ? "" : `url(#blur_${p.value})`,
+                onClick: (v) => q(t, a),
                 style: b({
-                  transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                  transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                 })
-              }, null, 12, va)) : i("", !0)
+              }, null, 12, da)) : i("", !0)
             ], 64)) : i("", !0),
-            e.value.type === "classic" ? (o(), n(p, { key: 2 }, [
-              X(t) && h.value.dataLabels.show ? (o(), n("text", {
+            e.value.type === "classic" ? (u(), n(g, { key: 2 }, [
+              I(t) && h.value.dataLabels.show ? (u(), n("text", {
                 key: 0,
                 "text-anchor": r(w)(t, !0, 12).anchor,
                 x: r(w)(t, !0, 12).x,
@@ -1046,8 +1058,8 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
                 fill: e.value.style.chart.layout.labels.percentage.color,
                 "font-size": e.value.style.chart.layout.labels.percentage.fontSize,
                 style: b(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
-                onClick: (v) => H(t, a)
-              }, P(be(t, Y.value)) + " " + P(e.value.style.chart.layout.labels.value.show ? `(${r(D)(
+                onClick: (v) => q(t, a)
+              }, T(be(t, Y.value)) + " " + T(e.value.style.chart.layout.labels.value.show ? `(${r(V)(
                 e.value.style.chart.layout.labels.value.formatter,
                 t.value,
                 r(M)({
@@ -1057,8 +1069,8 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
                   r: e.value.style.chart.layout.labels.value.rounding
                 }),
                 { datapoint: t }
-              )})` : ""), 13, ca)) : i("", !0),
-              X(t) && h.value.dataLabels.show ? (o(), n("text", {
+              )})` : ""), 13, ha)) : i("", !0),
+              I(t) && h.value.dataLabels.show ? (u(), n("text", {
                 key: 1,
                 "text-anchor": r(w)(t).anchor,
                 x: r(w)(t, !0, 12).x,
@@ -1066,23 +1078,23 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
                 fill: e.value.style.chart.layout.labels.name.color,
                 "font-size": e.value.style.chart.layout.labels.name.fontSize,
                 style: b(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
-                onClick: (v) => H(t, a)
-              }, P(t.name), 13, da)) : i("", !0)
+                onClick: (v) => q(t, a)
+              }, T(t.name), 13, ya)) : i("", !0)
             ], 64)) : i("", !0),
-            e.value.type === "polar" ? (o(), n(p, { key: 3 }, [
-              X(t) && h.value.dataLabels.show ? (o(), n("text", {
+            e.value.type === "polar" ? (u(), n(g, { key: 3 }, [
+              I(t) && h.value.dataLabels.show ? (u(), n("text", {
                 key: 0,
-                "text-anchor": le(c.value[a].middlePoint),
+                "text-anchor": ae(c.value[a].middlePoint),
                 x: r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: s.value.width / 2, centerY: s.value.height / 2 }).x,
                 y: r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: s.value.width / 2, centerY: s.value.height / 2 }).y,
                 fill: e.value.style.chart.layout.labels.percentage.color,
                 "font-size": e.value.style.chart.layout.labels.percentage.fontSize,
                 style: b({
-                  transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                  transition: P.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: (v) => H(t, a)
-              }, P(be(t, Y.value)) + " " + P(e.value.style.chart.layout.labels.value.show ? `(${r(D)(
+                onClick: (v) => q(t, a)
+              }, T(be(t, Y.value)) + " " + T(e.value.style.chart.layout.labels.value.show ? `(${r(V)(
                 e.value.style.chart.layout.labels.value.formatter,
                 t.value,
                 r(M)({
@@ -1092,24 +1104,24 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
                   r: e.value.style.chart.layout.labels.value.rounding
                 }),
                 { datapoint: t }
-              )})` : ""), 13, ha)) : i("", !0),
-              X(t) && h.value.dataLabels.show ? (o(), n("text", {
+              )})` : ""), 13, fa)) : i("", !0),
+              I(t) && h.value.dataLabels.show ? (u(), n("text", {
                 key: 1,
-                "text-anchor": le(c.value[a].middlePoint),
+                "text-anchor": ae(c.value[a].middlePoint),
                 x: r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: s.value.width / 2, centerY: s.value.height / 2 }).x,
                 y: r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: s.value.width / 2, centerY: s.value.height / 2 }).y + e.value.style.chart.layout.labels.percentage.fontSize,
                 fill: e.value.style.chart.layout.labels.name.color,
                 "font-size": e.value.style.chart.layout.labels.name.fontSize,
                 style: b({
-                  transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                  transition: P.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: (v) => H(t, a)
-              }, P(t.name), 13, ya)) : i("", !0)
+                onClick: (v) => q(t, a)
+              }, T(t.name), 13, ga)) : i("", !0)
             ], 64)) : i("", !0)
           ])),
-          h.value.dataLabels.show && e.value.style.chart.comments.show && t.comment ? (o(), n("g", fa, [
-            X(t) && e.value.type === "classic" ? (o(), n("foreignObject", {
+          h.value.dataLabels.show && e.value.style.chart.comments.show && t.comment ? (u(), n("g", pa, [
+            I(t) && e.value.type === "classic" ? (u(), n("foreignObject", {
               key: 0,
               x: e.value.style.chart.comments.offsetX + (r(w)(t, !0).anchor === "end" ? r(w)(t).x - e.value.style.chart.comments.width : r(w)(t, !0).anchor === "middle" ? r(w)(t).x - e.value.style.chart.comments.width / 2 : r(w)(t).x),
               y: r(ve)(t) + 24 + e.value.style.chart.comments.offsetY,
@@ -1119,36 +1131,36 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             }, [
               f("div", null, [
                 m(l.$slots, "plot-comment", {
-                  plot: { ...t, textAlign: r(w)(t, !0, 16, !0).anchor, flexAlign: r(w)(t, !0, 16).anchor, isFirstLoad: T.value }
+                  plot: { ...t, textAlign: r(w)(t, !0, 16, !0).anchor, flexAlign: r(w)(t, !0, 16).anchor, isFirstLoad: P.value }
                 }, void 0, !0)
               ])
-            ], 8, pa)) : i("", !0),
-            X(t) && e.value.type === "polar" ? (o(), n("foreignObject", {
+            ], 8, ma)) : i("", !0),
+            I(t) && e.value.type === "polar" ? (u(), n("foreignObject", {
               key: 1,
-              x: e.value.style.chart.comments.offsetX + (le(c.value[a].middlePoint) === "end" ? r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: s.value.width / 2, centerY: s.value.height / 2 }).x - e.value.style.chart.comments.width : le(c.value[a].middlePoint) === "middle" ? r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: s.value.width / 2, centerY: s.value.height / 2 }).x - e.value.style.chart.comments.width / 2 : r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: s.value.width / 2, centerY: s.value.height / 2 }).x),
+              x: e.value.style.chart.comments.offsetX + (ae(c.value[a].middlePoint) === "end" ? r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: s.value.width / 2, centerY: s.value.height / 2 }).x - e.value.style.chart.comments.width : ae(c.value[a].middlePoint) === "middle" ? r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: s.value.width / 2, centerY: s.value.height / 2 }).x - e.value.style.chart.comments.width / 2 : r(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: s.value.width / 2, centerY: s.value.height / 2 }).x),
               y: Ot(c.value[a]) + e.value.style.chart.comments.offsetY,
               width: e.value.style.chart.comments.width,
               height: "200",
               style: b({
-                transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
                 overflow: "visible",
                 pointerEvents: "none"
               })
             }, [
               f("div", null, [
                 m(l.$slots, "plot-comment", {
-                  plot: { ...t, textAlign: le(c.value[a].middlePoint), flexAlign: le(c.value[a].middlePoint), isFirstLoad: T.value }
+                  plot: { ...t, textAlign: ae(c.value[a].middlePoint), flexAlign: ae(c.value[a].middlePoint), isFirstLoad: P.value }
                 }, void 0, !0)
               ])
-            ], 12, ga)) : i("", !0)
+            ], 12, ba)) : i("", !0)
           ])) : i("", !0)
-        ], 10, ua))), 256)),
+        ], 10, na))), 256)),
         m(l.$slots, "svg", { svg: s.value }, void 0, !0)
-      ], 14, cl)) : i("", !0),
-      l.$slots.watermark ? (o(), n("div", ma, [
-        m(l.$slots, "watermark", oe(ue({ isPrinting: r(Ie) || r(De) })), void 0, !0)
+      ], 14, hl)) : i("", !0),
+      l.$slots.watermark ? (u(), n("div", wa, [
+        m(l.$slots, "watermark", ue(se({ isPrinting: r(Xe) || r(Ve) })), void 0, !0)
       ])) : i("", !0),
-      se.value ? i("", !0) : (o(), Z(r(gt), {
+      ne.value ? i("", !0) : (u(), ee(r(pt), {
         key: 6,
         config: {
           type: "donut",
@@ -1156,62 +1168,59 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
             backgroundColor: e.value.style.chart.backgroundColor,
             donut: {
               color: "#CCCCCC",
-              strokeWidth: q.value * 0.8
+              strokeWidth: J.value * 0.8
             }
           }
         }
       }, null, 8, ["config"])),
       f("div", {
         ref_key: "chartLegend",
-        ref: Te
+        ref: Pe
       }, [
-        e.value.style.chart.legend.show ? (o(), Z(sl, {
+        e.value.style.chart.legend.show ? (u(), ee(nl, {
           key: `legend_${Le.value}`,
           legendSet: Ue.value,
           config: St.value,
-          onClickMarker: u[4] || (u[4] = ({ i: t }) => Ee(t))
-        }, at({
+          onClickMarker: o[4] || (o[4] = ({ i: t }) => Ee(t))
+        }, ot({
           item: C(({ legend: t, index: a }) => [
             f("div", {
-              style: b(`opacity:${V.value.includes(a) ? 0.5 : 1}`),
+              style: b(`opacity:${D.value.includes(a) ? 0.5 : 1}`),
               onClick: (v) => t.segregate()
-            }, [
-              ut(P(t.name) + ": " + P(r(D)(
-                e.value.style.chart.layout.labels.value.formatter,
-                t.value,
-                r(M)({
-                  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
-                }
-              )) + " ", 1),
-              V.value.includes(a) ? (o(), n("span", ka, " ( " + P(Mt(t.proportion * 100)) + " % ) ", 1)) : (o(), n("span", wa, " (" + P(isNaN(t.value / F.value) ? "-" : r(D)(
-                e.value.style.chart.layout.labels.percentage.formatter,
-                He.value(t),
-                r(M)({
-                  v: He.value(t),
-                  s: "%",
-                  r: e.value.style.chart.legend.roundingPercentage
-                })
-              )) + ") ", 1))
-            ], 12, ba)
+            }, T(t.name) + T(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + T(e.value.style.chart.legend.showValue ? r(V)(
+              e.value.style.chart.layout.labels.value.formatter,
+              t.value,
+              r(M)({
+                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
+              }
+            ) : "") + " " + T(e.value.style.chart.legend.showPercentage ? D.value.includes(a) ? `${e.value.style.chart.legend.showValue ? "(" : ""}${Nt(t.proportion * 100)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(t.value / F.value) ? "-" : r(V)(
+              e.value.style.chart.layout.labels.percentage.formatter,
+              He.value(t),
+              r(M)({
+                v: He.value(t),
+                s: "%",
+                r: e.value.style.chart.legend.roundingPercentage
+              })
+            )}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, ka)
           ]),
           _: 2
         }, [
           l.$slots.pattern ? {
             name: "legend-pattern",
             fn: C(({ legend: t, index: a }) => [
-              xe(rl, {
+              $e(il, {
                 shape: t.shape,
                 radius: 30,
                 stroke: "none",
                 plot: { x: 30, y: 30 },
-                fill: `url(#pattern_${g.value}_${a})`
+                fill: `url(#pattern_${p.value}_${a})`
               }, null, 8, ["shape", "fill"])
             ]),
             key: "0"
@@ -1219,15 +1228,15 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
         ]), 1032, ["legendSet", "config"])) : i("", !0),
         m(l.$slots, "legend", { legend: Ue.value }, void 0, !0)
       ], 512),
-      l.$slots.source ? (o(), n("div", {
+      l.$slots.source ? (u(), n("div", {
         key: 7,
         ref_key: "source",
-        ref: Pe,
+        ref: Te,
         dir: "auto"
       }, [
         m(l.$slots, "source", {}, void 0, !0)
       ], 512)) : i("", !0),
-      xe(r(mt), {
+      $e(r(mt), {
         show: h.value.showTooltip && ce.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
@@ -1238,20 +1247,20 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: ne.value,
-        content: pe.value,
+        parent: U.value,
+        content: ge.value,
         isCustom: re.value,
-        isFullscreen: ae.value
+        isFullscreen: oe.value
       }, {
         "tooltip-before": C(() => [
-          m(l.$slots, "tooltip-before", oe(ue({ ...we.value })), void 0, !0)
+          m(l.$slots, "tooltip-before", ue(se({ ...we.value })), void 0, !0)
         ]),
         "tooltip-after": C(() => [
-          m(l.$slots, "tooltip-after", oe(ue({ ...we.value })), void 0, !0)
+          m(l.$slots, "tooltip-after", ue(se({ ...we.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen"]),
-      se.value ? (o(), Z(r(ht), {
+      ne.value ? (u(), ee(r(ht), {
         key: 8,
         hideDetails: "",
         config: {
@@ -1268,14 +1277,14 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
         }
       }, {
         content: C(() => [
-          (o(), Z(r(yt), {
+          (u(), ee(r(yt), {
             key: `table_${Fe.value}`,
             colNames: de.value.colNames,
             head: de.value.head,
             body: de.value.body,
             config: de.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: u[5] || (u[5] = (t) => h.value.showTable = !1)
+            onClose: o[5] || (o[5] = (t) => h.value.showTable = !1)
           }, {
             th: C(({ th: t }) => [
               f("div", {
@@ -1284,7 +1293,7 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
               }, null, 8, _a)
             ]),
             td: C(({ td: t }) => [
-              ut(P(t.name ? t.name : isNaN(Number(t)) ? t.includes("%") ? t : r(D)(
+              Vt(T(t.name ? t.name : isNaN(Number(t)) ? t.includes("%") ? t : r(V)(
                 e.value.style.chart.layout.labels.percentage.formatter,
                 t,
                 r(M)({
@@ -1292,7 +1301,7 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
                   s: "%",
                   r: e.value.style.chart.layout.labels.percentage.rounding
                 })
-              ) : r(D)(
+              ) : r(V)(
                 e.value.style.chart.layout.labels.value.formatter,
                 t,
                 r(M)({
@@ -1308,9 +1317,9 @@ const vl = ["id"], cl = ["xmlns", "viewBox"], dl = ["width", "height"], hl = { k
         ]),
         _: 1
       }, 8, ["config"])) : i("", !0)
-    ], 46, vl));
+    ], 46, dl));
   }
-}, Ma = /* @__PURE__ */ il(xa, [["__scopeId", "data-v-8f18408e"]]);
+}, Ya = /* @__PURE__ */ cl($a, [["__scopeId", "data-v-ac4cbcc5"]]);
 export {
-  Ma as default
+  Ya as default
 };