vue-data-ui 2.17.0 → 2.17.1

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

@@ -1,22 +1,19 @@
-import { defineAsyncComponent as Z, useSlots as Xt, computed as y, shallowRef as E, ref as x, onMounted as lt, onBeforeUnmount as Dt, 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 xe, unref as r, createSlots as ot, withCtx as C, normalizeProps as ue, guardReactiveProps as se, Fragment as p, renderList as A, mergeProps as ut, toDisplayString as P, createTextVNode as st, nextTick as Vt } from "vue";
-import { u as Bt, o as Gt, e as nt, g as Wt, c as Rt, b as Et, v as Ut, d as rt, p as te, m as it, $ as jt, f as M, X as Ht, s as fe, w as qt, j as Jt, N as L, i as D, k as ve, n as w, t as Kt, a as Qt, q as Zt, r as el, x as tl, T as vt } from "./index-pPGk-uhD.js";
+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 ct } from "./useNestedProp-DjACxgdZ.js";
-import { u as ol } from "./usePrinter-DDHcrl0A.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-Bxlv67uY.js";
-import rl from "./Title-B-2bV0SW.js";
-import { _ as il } from "./Shape-DtFT5EJa.js";
-import vl from "./img-Y_hYz-ZC.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 }, pl = ["id"], gl = ["stop-color"], ml = ["offset", "stop-color"], bl = ["offset", "stop-color"], wl = ["stop-color"], kl = { key: 2 }, _l = ["id", "cx", "cy"], xl = ["stop-color", "stop-opacity"], $l = ["stop-color"], Cl = ["id"], Tl = ["id"], Pl = ["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"], Dl = { key: 0 }, Vl = ["stroke", "d"], Bl = { key: 0 }, Gl = ["d", "stroke", "stroke-width", "filter"], Wl = { key: 1 }, Rl = ["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"], pa = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], ga = { key: 2 }, ma = ["x", "y", "width"], ba = ["x", "y", "width"], wa = {
+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"
-}, ka = ["onClick"], _a = {
-  key: 0,
-  style: { "font-variant-numeric": "tabular-nums" }
-}, xa = { key: 1 }, $a = ["innerHTML"], Ca = {
+}, ka = ["onClick"], _a = ["innerHTML"], $a = {
   __name: "vue-ui-donut",
   props: {
     config: {
@@ -33,30 +30,30 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
     }
   },
   emits: ["selectLegend", "selectDatapoint"],
-  setup($e, { expose: dt, emit: ht }) {
-    const yt = Z(() => import("./vue-ui-accordion-CVnA550V.js")), ft = Z(() => import("./DataTable-D0VYDhfx.js")), pt = Z(() => import("./PackageVersion-5TR4ocqp.js")), gt = Z(() => import("./PenAndPaper-D6AqipIO.js")), mt = Z(() => import("./vue-ui-skeleton-DJPjyNYn.js")), bt = Z(() => import("./Tooltip-CoQnTnr-.js")), wt = Z(() => import("./UserOptions-Dd34lEKb.js")), { vue_ui_donut: kt } = Bt(), _t = Xt(), O = $e, ne = 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;
       }
-    }), q = E(null), Ce = E(null), Te = E(null), U = E(null), le = E(null), Pe = E(null), Ae = E(null), Se = x(0), Fe = x(0), Le = x(0);
+    }), 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();
-    }), Dt(() => {
-      U.value && (le.value && U.value.unobserve(le.value), U.value.disconnect());
+    }), Xt(() => {
+      j.value && (le.value && j.value.unobserve(le.value), j.value.disconnect());
     });
     function Oe() {
-      if (Gt(O.dataset) ? nt({
+      if (Gt(O.dataset) ? st({
         componentName: "VueUiDonut",
         type: "dataset"
       }) : O.dataset.forEach((l, o) => {
-        Wt({
+        Rt({
           datasetObject: l,
           requiredAttributes: ["name", "values"]
         }).forEach((t) => {
-          ne.value = !1, nt({
+          ne.value = !1, st({
             componentName: "VueUiDonut",
             type: "datasetSerieAttribute",
             property: t,
@@ -66,10 +63,10 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
       }), e.value.responsive) {
         const l = ll(() => {
           const { width: o, height: t } = al({
-            chart: q.value,
+            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: Ie.value
           });
@@ -77,17 +74,17 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
             s.value.width = o, s.value.height = t;
           });
         });
-        U.value && (le.value && U.value.unobserve(le.value), U.value.disconnect()), U.value = new ResizeObserver(l), le.value = q.value.parentNode, U.value.observe(le.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(Rt()), xt = 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 = ct({
+      const l = vt({
         userConfig: O.config,
-        defaultConfig: kt
+        defaultConfig: wt
       });
       return l.theme ? {
-        ...ct({
+        ...vt({
           userConfig: Qt.vue_ui_donut[l.theme] || O.config,
           defaultConfig: l
         }),
@@ -97,21 +94,21 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
     const e = y({
       get: () => Ne(),
       set: (l) => l
-    }), T = x(!0), B = E([]);
+    }), 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();
+            const W = performance.now();
             function X(ie) {
-              const ye = Math.min((ie - R) / o, 1), It = vt(ye);
-              B.value[$] = _ * It, B.value = [...B.value], ye < 1 ? requestAnimationFrame(X) : (B.value[$] = _, B.value = [...B.value], d += 1, d === v && a());
+              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(X);
-          }, $ * t);
+          }, x * t);
         });
       });
     }
@@ -121,17 +118,17 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         l,
         e.value.startAnimation.durationMs,
         e.value.startAnimation.staggerMs
-      ), T.value = !1;
+      ), P.value = !1;
     });
-    const { userOptionsVisible: ge, setUserOptionsVisibility: Me, keepUserOptionState: Ye } = ul({ config: e.value }), { svgRef: me } = sl({ config: e.value.style.chart.title });
-    function Ct() {
+    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 Tt() {
+    function Ct() {
       Me(!1);
     }
     at(() => 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;
+      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 Ie = y(() => {
       const { top: l, right: o, bottom: t, left: a } = e.value.style.chart.padding;
@@ -142,66 +139,66 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         bottom: t,
         left: a
       };
-    }), { isPrinting: Xe, isImaging: De, generatePdf: Ve, generateImage: Be } = ol({
-      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
-    }), Pt = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ge = y(() => Et(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
     }), 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 = ht, G = y(() => O.dataset.map((l, o) => ({
+    }), Re = dt, G = y(() => O.dataset.map((l, o) => ({
       name: l.name,
-      color: rt(l.color) || Ge.value[o] || te[o] || te[o % te.length],
+      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: o,
       seriesIndex: o,
       ghost: !1,
-      pattern: `pattern_${g.value}_${o}`
+      pattern: `pattern_${p.value}_${o}`
     }))), N = E(G.value);
     at(() => G.value, (l) => N.value = l);
-    function At() {
+    function Tt() {
       return G.value.map((l) => ({
         name: l.name,
         color: l.color,
         value: l.value
       }));
     }
-    const V = x([]), K = x(!1);
-    function Re({ from: l, to: o, duration: t, onUpdate: a, onDone: v, easing: d = vt }) {
+    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 X = Math.min((R - _) / t, 1), ie = d(X), ye = l + (o - l) * ie;
-        a(ye, X), X < 1 ? requestAnimationFrame($) : (a(o, 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 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() {
-          K.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(
-                (X, ie) => l === ie ? { ...X, value: $ } : X
+                (X, ie) => l === ie ? { ...X, value: x } : X
               );
             },
             onDone: () => {
@@ -209,22 +206,22 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
             }
           });
         };
-        V.value = V.value.filter(($) => $ !== l);
+        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() {
-          K.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, X) => l === X ? { ...R, value: _ } : R
+                (W, X) => l === X ? { ...W, value: _ } : W
               );
             },
             onDone: () => {
@@ -234,20 +231,20 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         };
         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 St = y(() => O.dataset.reduce((l, o) => l + o.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
-        })), o = St.value - B.value.reduce((t, a) => t + a, 0);
+        })), o = At.value - B.value.reduce((t, a) => t + a, 0);
         return o > 0 && l.push({
           name: "__ghost__",
           value: o,
@@ -264,20 +261,20 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         }), N.value.map((l, o) => ({
           ...l,
           seriesIndex: o
-        })).filter((l, o) => !V.value.includes(o));
+        })).filter((l, o) => !D.value.includes(o));
     }), Ue = y(() => O.dataset.map((l, o) => ({
       name: l.name,
-      color: rt(l.color) || Ge.value[o] || te[o] || te[o % te.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: 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(o) ? 0.5 : 1,
+      opacity: D.value.includes(o) ? 0.5 : 1,
       segregate: () => !K.value && Ee(o),
-      isSegregated: V.value.includes(o)
-    }))), Ft = y(() => ({
+      isSegregated: D.value.includes(o)
+    }))), St = y(() => ({
       cy: "donut-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
@@ -287,7 +284,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
     })), k = y(() => {
       const l = Math.min(s.value.width / 3, s.value.height / 3);
       return l < 55 ? 55 : l;
-    }), S = y(() => it({ series: W.value }, s.value.width / 2, s.value.height / 2, k.value, k.value, 1.99999, 2, 1, 360, 105.25, J.value)), Lt = y(() => Math.abs(W.value.map((l) => l.value).reduce((l, o) => l + o, 0)) > 0), Ot = y(() => it({
+    }), 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,
@@ -300,7 +297,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         }
       ]
     }, 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(...W.value.map((t) => t.value)), o = W.value.map((t) => t.value / l);
+      const l = Math.max(...R.value.map((t) => t.value)), o = R.value.map((t) => t.value / l);
       return jt({
         series: o,
         center: {
@@ -308,21 +305,21 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
           y: s.value.height / 2
         },
         maxRadius: Math.min(s.value.width, s.value.height) / 3,
-        hasGhost: T.value
+        hasGhost: P.value
       });
     });
     function ae(l) {
       return l.x > s.value.width / 2 + 6 ? "start" : l.x < s.value.width / 2 - 6 ? "end" : "middle";
     }
-    function zt(l) {
+    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 I(l) {
       return l.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
     }
     function be(l, o) {
-      const t = l.value / Nt(o);
-      return isNaN(t) ? 0 : D(
+      const t = l.value / zt(o);
+      return isNaN(t) ? 0 : V(
         e.value.style.chart.layout.labels.percentage.formatter,
         t * 100,
         M({
@@ -333,10 +330,10 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         { datapoint: l }
       );
     }
-    function Nt(l) {
+    function zt(l) {
       return [...l].map((o) => o.value).reduce((o, t) => o + t, 0);
     }
-    const F = y(() => W.value.map((l) => l.value).reduce((l, o) => l + o, 0)), je = y(() => F.value / W.value.length), He = y(() => (l) => K.value ? l.proportion * 100 : l.value / F.value * 100), we = x(null), re = x(!1);
+    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 = "";
@@ -349,12 +346,12 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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}"/>${_t.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({
@@ -369,7 +366,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
             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({
@@ -385,24 +382,24 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
           );
           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 Q(l) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(z.value) && z.value !== l ? `url(#blur_${g.value})` : "";
+      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
-      })), o = W.value.map((t) => t.value);
+      })), o = R.value.map((t) => t.value);
       return { head: l, body: o };
     });
     function Je(l = null) {
-      Vt(() => {
-        const o = j.value.head.map((v, d) => [[
+      Dt(() => {
+        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(o), a = Zt(t);
+        ], [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" });
       });
     }
@@ -411,13 +408,13 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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%"
-      ], o = 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,
@@ -441,16 +438,16 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         body: o,
         config: t
       };
-    }), oe = x(!1);
+    }), oe = $(!1);
     function Ke(l) {
       oe.value = l, ze.value += 1;
     }
     const Qe = y(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
-    function Mt(l) {
+    function Nt(l) {
       return l.toFixed(e.value.style.chart.legend.roundingPercentage).split("").map((o) => "-").join("");
     }
-    function H(l, o) {
-      We("selectDatapoint", { datapoint: l, index: o });
+    function q(l, o) {
+      Re("selectDatapoint", { datapoint: l, index: o });
     }
     function Ze() {
       h.value.showTable = !h.value.showTable;
@@ -461,19 +458,26 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
     function tt() {
       h.value.showTooltip = !h.value.showTooltip;
     }
-    const he = x(!1);
+    const he = $(!1);
     function ke() {
       he.value = !he.value;
     }
-    async function Yt({ scale: l = 2 } = {}) {
-      if (!q.value) return;
-      const { imageUri: o, base64: t } = await vl({ domElement: q.value, base64: !0, img: !0, scale: l });
-      return { imageUri: o, base64: t };
+    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 dt({
-      getData: At,
-      getImage: Yt,
-      generatePdf: Ve,
+    return ct({
+      getData: Tt,
+      getImage: Mt,
+      generatePdf: De,
       generateCsv: Je,
       generateImage: Be,
       toggleTable: Ze,
@@ -483,12 +487,12 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
       toggleFullscreen: Ke
     }), (l, o) => (u(), n("div", {
       ref_key: "donutChart",
-      ref: q,
+      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: Ct,
-      onMouseleave: Tt
+      id: `donut__${p.value}`,
+      onMouseenter: xt,
+      onMouseleave: Ct
     }, [
       e.value.userOptions.buttons.annotator && r(me) ? (u(), ee(r(gt), {
         key: 0,
@@ -526,15 +530,15 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
           }
         }, null, 8, ["config"]))
       ], 512)) : i("", !0),
-      e.value.userOptions.show && ne.value && (r(Ye) || r(ge)) ? (u(), ee(r(wt), {
+      e.value.userOptions.show && ne.value && (r(Ye) || r(pe)) ? (u(), ee(r(bt), {
         ref_key: "details",
-        ref: xt,
+        ref: _t,
         key: `user_option_${ze.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isPrinting: r(Xe),
-        isImaging: r(De),
-        uid: g.value,
+        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,
@@ -543,7 +547,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         hasLabel: e.value.userOptions.buttons.labels,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: oe.value,
-        chartElement: q.value,
+        chartElement: U.value,
         position: e.value.userOptions.position,
         callbacks: e.value.userOptions.callbacks,
         isTooltip: h.value.showTooltip,
@@ -552,7 +556,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         isAnnotation: he.value,
         printScale: e.value.userOptions.print.scale,
         onToggleFullscreen: Ke,
-        onGeneratePdf: r(Ve),
+        onGeneratePdf: r(De),
         onGenerateCsv: Je,
         onGenerateImage: r(Be),
         onToggleTable: Ze,
@@ -560,7 +564,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         onToggleTooltip: tt,
         onToggleAnnotator: ke,
         style: b({
-          visibility: r(Ye) ? r(ge) ? "visible" : "hidden" : "visible"
+          visibility: r(Ye) ? r(pe) ? "visible" : "hidden" : "visible"
         })
       }, ot({ _: 2 }, [
         l.$slots.menuIcon ? {
@@ -636,7 +640,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         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};${Ie.value.css}`)
       }, [
-        xe(r(pt)),
+        $e(r(ft)),
         l.$slots["chart-background"] ? (u(), n("foreignObject", {
           key: 0,
           x: 0,
@@ -652,13 +656,13 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         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, gl),
+            }, null, 8, pl),
             f("stop", {
               offset: `${(1 - J.value / k.value) * 100}%`,
               "stop-color": r(fe)("#FFFFFF", 0),
@@ -673,11 +677,11 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
               "stop-color": r(fe)(e.value.style.chart.backgroundColor, 0),
               "stop-opacity": "0"
             }, null, 8, wl)
-          ], 8, pl)) : i("", !0)
+          ], 8, gl)) : i("", !0)
         ])) : i("", !0),
         e.value.type === "polar" ? (u(), n("defs", kl, [
-          (u(!0), n(p, null, A(c.value, (t, a) => (u(), n("radialGradient", {
-            id: `polar_gradient_${a}_${g.value}`,
+          (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%"
@@ -686,16 +690,16 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
               offset: "0%",
               "stop-color": r(qt)(S.value[a].color, 0.05),
               "stop-opacity": e.value.style.chart.gradientIntensity / 100
-            }, null, 8, xl),
+            }, null, 8, $l),
             f("stop", {
               offset: "100%",
               "stop-color": S.value[a].color
-            }, null, 8, $l)
+            }, 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%",
@@ -704,15 +708,15 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
             f("feGaussianBlur", {
               in: "SourceGraphic",
               stdDeviation: 2,
-              id: `blur_std_${g.value}`
-            }, null, 8, Tl),
+              id: `blur_std_${p.value}`
+            }, null, 8, Pl),
             o[6] || (o[6] = f("feColorMatrix", {
               type: "saturate",
               values: "0"
             }, null, -1))
           ], 8, Cl),
           f("filter", {
-            id: `shadow_${g.value}`,
+            id: `shadow_${p.value}`,
             "color-interpolation-filters": "sRGB"
           }, [
             f("feDropShadow", {
@@ -722,9 +726,9 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
               "flood-opacity": "0.5",
               "flood-color": e.value.style.chart.layout.donut.shadowColor
             }, null, 8, Al)
-          ], 8, Pl),
+          ], 8, Tl),
           f("filter", {
-            id: `drop_shadow_${g.value}`,
+            id: `drop_shadow_${p.value}`,
             "color-interpolation-filters": "sRGB",
             x: "-50%",
             y: "-50%",
@@ -740,7 +744,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
             }, null, 8, Fl)
           ], 8, Sl)
         ]),
-        e.value.type === "classic" ? (u(!0), n(p, { key: 3 }, A(S.value.filter((t) => !t.ghost), (t, a) => (u(), n("g", null, [
+        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(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),
@@ -752,7 +756,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
             filter: Q(a)
           }, null, 8, Ll)) : i("", !0)
         ]))), 256)) : i("", !0),
-        e.value.type === "polar" ? (u(!0), n(p, { key: 4 }, A(S.value.filter((t) => !t.ghost), (t, a) => (u(), n("g", null, [
+        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}`,
@@ -763,7 +767,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
             fill: "none",
             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, Ol)) : i("", !0)
         ]))), 256)) : i("", !0),
@@ -773,22 +777,22 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
           cy: s.value.height / 2,
           r: k.value <= 0 ? 10 : k.value,
           fill: e.value.style.chart.backgroundColor,
-          filter: `url(#shadow_${g.value})`
+          filter: `url(#shadow_${p.value})`
         }, null, 8, zl)) : i("", !0),
         l.$slots.pattern ? (u(), n("g", Nl, [
-          (u(!0), n(p, null, A($e.dataset, (t, a) => (u(), n("defs", {
+          (u(!0), n(g, null, A(xe.dataset, (t, a) => (u(), n("defs", {
             key: `pattern-${t.patternIndex}`
           }, [
-            m(l.$slots, "pattern", ut({ 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" ? (u(), n(p, { key: 7 }, [
-          (u(!0), n(p, null, A(Y.value, (t, a) => (u(), 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, Ml))), 256)),
-          (u(!0), n(p, null, A(Y.value, (t, a) => (u(), n("path", {
+          (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,
@@ -797,7 +801,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
             filter: Q(a)
           }, null, 8, Yl))), 256)),
           l.$slots.pattern ? (u(), n("g", Il, [
-            (u(!0), n(p, null, A(Y.value, (t, a) => (u(), n("path", {
+            (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})`,
@@ -807,31 +811,31 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
             }, null, 8, Xl))), 256))
           ])) : i("", !0)
         ], 64)) : i("", !0),
-        F.value && e.value.type === "polar" ? (u(), n(p, { key: 8 }, [
-          S.value.length > 1 ? (u(), n("g", Dl, [
-            (u(!0), n(p, null, A(Y.value, (t, a) => (u(), 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, Vl))), 256)),
+            }, null, 12, Dl))), 256)),
             e.value.style.chart.layout.donut.useShadow ? (u(), n("g", Bl, [
-              (u(!0), n(p, null, A(Y.value, (t, a) => (u(), 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: "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, Gl))), 256))
             ])) : i("", !0),
-            l.$slots.pattern ? (u(), n("g", Wl, [
-              (u(!0), n(p, null, A(Y.value, (t, a) => (u(), 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})`,
@@ -839,19 +843,19 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth,
                 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, Rl))), 256))
+              }, null, 12, Wl))), 256))
             ])) : i("", !0),
-            (u(!0), n(p, null, A(Y.value, (t, a) => (u(), 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: 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, El))), 256))
           ])) : (u(), n("g", Ul, [
@@ -860,7 +864,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
               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, jl)) : i("", !0),
@@ -868,14 +872,14 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
               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, Hl)
           ]))
-        ], 64)) : (u(), n(p, { key: 9 }, [
-          e.value.type === "classic" && !Lt.value ? (u(), n("g", ql, [
-            (u(!0), n(p, null, A(Ot.value, (t, a) => (u(), 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,
@@ -899,11 +903,11 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
             /* This might require adjustments */
             k.value <= 0 ? 10 : k.value
           ),
-          fill: `url(#gradient_${g.value})`
+          fill: `url(#gradient_${p.value})`
         }, null, 8, Ql)) : i("", !0),
-        F.value ? (u(), n(p, { key: 11 }, [
+        F.value ? (u(), n(g, { key: 11 }, [
           S.value.length > 1 || e.value.type === "classic" ? (u(), n("g", Zl, [
-            (u(!0), n(p, null, A(S.value.filter((t) => !t.ghost), (t, a) => (u(), n("path", {
+            (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({
@@ -915,7 +919,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
               onMouseleave: o[0] || (o[0] = (v) => {
                 ce.value = !1, z.value = null;
               }),
-              onClick: (v) => H(t, a)
+              onClick: (v) => q(t, a)
             }, null, 40, ea))), 256))
           ])) : (u(), n("g", ta, [
             f("circle", {
@@ -932,11 +936,11 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
               onMouseleave: o[2] || (o[2] = (t) => {
                 ce.value = !1, z.value = null;
               }),
-              onClick: o[3] || (o[3] = (t) => H(S.value[0], l.i))
+              onClick: o[3] || (o[3] = (t) => q(S.value[0], l.i))
             }, null, 40, la)
           ]))
         ], 64)) : i("", !0),
-        e.value.type === "classic" ? (u(), n(p, { key: 12 }, [
+        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",
@@ -945,7 +949,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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, aa)) : i("", !0),
+          }, 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",
@@ -954,7 +958,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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)({
@@ -971,7 +975,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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, ua)) : i("", !0),
+          }, 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",
@@ -980,7 +984,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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(K.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)({
@@ -991,7 +995,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
             })
           )), 13, sa)) : i("", !0)
         ], 64)) : i("", !0),
-        (u(!0), n(p, null, A(Y.value.filter((t) => !t.ghost), (t, a) => (u(), n("g", {
+        (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 })
         }, [
@@ -1016,7 +1020,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
               ])
             ], 8, ia))
           ])) : (u(), n("g", va, [
-            e.value.type === "classic" ? (u(), n(p, { key: 0 }, [
+            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,
@@ -1025,11 +1029,11 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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)
               }, null, 8, ca)) : i("", !0)
             ], 64)) : i("", !0),
-            e.value.type === "polar" ? (u(), n(p, { key: 1 }, [
+            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,
@@ -1038,14 +1042,14 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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, da)) : i("", !0)
             ], 64)) : i("", !0),
-            e.value.type === "classic" ? (u(), n(p, { key: 2 }, [
+            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,
@@ -1054,8 +1058,8 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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)({
@@ -1074,10 +1078,10 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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, ya)) : i("", !0)
+                onClick: (v) => q(t, a)
+              }, T(t.name), 13, ya)) : i("", !0)
             ], 64)) : i("", !0),
-            e.value.type === "polar" ? (u(), n(p, { key: 3 }, [
+            e.value.type === "polar" ? (u(), n(g, { key: 3 }, [
               I(t) && h.value.dataLabels.show ? (u(), n("text", {
                 key: 0,
                 "text-anchor": ae(c.value[a].middlePoint),
@@ -1086,11 +1090,11 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
                 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)({
@@ -1109,14 +1113,14 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
                 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, pa)) : 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 ? (u(), n("g", ga, [
+          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),
@@ -1127,25 +1131,25 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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, ma)) : i("", !0),
             I(t) && e.value.type === "polar" ? (u(), n("foreignObject", {
               key: 1,
               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: zt(c.value[a]) + e.value.style.chart.comments.offsetY,
+              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: ae(c.value[a].middlePoint), flexAlign: ae(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, ba)) : i("", !0)
@@ -1154,9 +1158,9 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         m(l.$slots, "svg", { svg: s.value }, void 0, !0)
       ], 14, hl)) : i("", !0),
       l.$slots.watermark ? (u(), n("div", wa, [
-        m(l.$slots, "watermark", ue(se({ isPrinting: r(Xe) || r(De) })), void 0, !0)
+        m(l.$slots, "watermark", ue(se({ isPrinting: r(Xe) || r(Ve) })), void 0, !0)
       ])) : i("", !0),
-      ne.value ? i("", !0) : (u(), ee(r(mt), {
+      ne.value ? i("", !0) : (u(), ee(r(pt), {
         key: 6,
         config: {
           type: "donut",
@@ -1171,55 +1175,52 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
       }, null, 8, ["config"])),
       f("div", {
         ref_key: "chartLegend",
-        ref: Te
+        ref: Pe
       }, [
         e.value.style.chart.legend.show ? (u(), ee(nl, {
           key: `legend_${Le.value}`,
           legendSet: Ue.value,
-          config: Ft.value,
+          config: St.value,
           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()
-            }, [
-              st(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) ? (u(), n("span", xa, " ( " + P(Mt(t.proportion * 100)) + " % ) ", 1)) : (u(), n("span", _a, " (" + 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, ka)
+            }, 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(il, {
+              $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"
@@ -1230,12 +1231,12 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
       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(bt), {
+      $e(r(mt), {
         show: h.value.showTooltip && ce.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
@@ -1246,8 +1247,8 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: q.value,
-        content: pe.value,
+        parent: U.value,
+        content: ge.value,
         isCustom: re.value,
         isFullscreen: oe.value
       }, {
@@ -1259,7 +1260,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen"]),
-      ne.value ? (u(), ee(r(yt), {
+      ne.value ? (u(), ee(r(ht), {
         key: 8,
         hideDetails: "",
         config: {
@@ -1276,7 +1277,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
         }
       }, {
         content: C(() => [
-          (u(), ee(r(ft), {
+          (u(), ee(r(yt), {
             key: `table_${Fe.value}`,
             colNames: de.value.colNames,
             head: de.value.head,
@@ -1289,10 +1290,10 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
               f("div", {
                 innerHTML: t,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, $a)
+              }, null, 8, _a)
             ]),
             td: C(({ td: t }) => [
-              st(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)({
@@ -1300,7 +1301,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { 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)({
@@ -1318,7 +1319,7 @@ const dl = ["id"], hl = ["xmlns", "viewBox"], yl = ["width", "height"], fl = { k
       }, 8, ["config"])) : i("", !0)
     ], 46, dl));
   }
-}, Xa = /* @__PURE__ */ cl(Ca, [["__scopeId", "data-v-e9aecf1b"]]);
+}, Ya = /* @__PURE__ */ cl($a, [["__scopeId", "data-v-ac4cbcc5"]]);
 export {
-  Xa as default
+  Ya as default
 };