vue-data-ui 2.17.6 → 2.17.8

package/dist/{vue-ui-donut-DRBk_HYh.js → vue-ui-donut-DYdwk3Jo.js}

@@ -1,16 +1,16 @@
-import { defineAsyncComponent as te, useSlots as Bt, computed as f, shallowRef as W, ref as w, onMounted as st, onBeforeUnmount as Gt, watch as nt, createElementBlock as u, openBlock as s, normalizeStyle as k, normalizeClass as Ce, createBlock as le, createCommentVNode as v, renderSlot as b, createElementVNode as h, createVNode as Pe, unref as r, createSlots as ut, withCtx as P, normalizeProps as ue, guardReactiveProps as re, Fragment as p, renderList as A, mergeProps as rt, toDisplayString as M, createTextVNode as Et, nextTick as Rt } from "vue";
-import { u as Wt, o as Ut, e as it, g as jt, c as Ht, b as qt, v as Jt, d as vt, p as ae, m as dt, $ as Kt, f as z, X as Qt, s as ge, w as Zt, j as el, N as L, i as V, k as he, n as x, t as tl, a as ll, C as Te, q as al, r as ol, x as sl, T as ct } from "./index-CNt4Vhp9.js";
+import { defineAsyncComponent as te, useSlots as Bt, computed as f, shallowRef as W, ref as w, onMounted as nt, onBeforeUnmount as Et, watch as ut, createElementBlock as u, openBlock as s, normalizeStyle as k, normalizeClass as Ce, createBlock as le, createCommentVNode as v, renderSlot as b, createElementVNode as h, createVNode as Pe, unref as r, createSlots as rt, withCtx as P, normalizeProps as ue, guardReactiveProps as re, Fragment as p, renderList as M, mergeProps as it, toDisplayString as I, createTextVNode as Gt, nextTick as Rt } from "vue";
+import { u as Wt, o as Ut, e as Te, g as jt, c as Ht, b as qt, v as Jt, d as vt, p as ae, m as dt, $ as Kt, f as z, X as Qt, s as ge, w as Zt, j as el, N as L, i as V, k as he, n as x, t as tl, a as ll, C as Ae, q as al, r as ol, x as sl, T as ct } from "./index-Bhi_gkax.js";
 import { t as nl, u as ul } from "./useResponsive-DfdjqQps.js";
-import { u as ht } from "./useNestedProp-BI2tFEgE.js";
-import { u as rl } from "./usePrinter-BGZOlDDN.js";
+import { u as ht } from "./useNestedProp-91GL6beP.js";
+import { u as rl } from "./usePrinter-c5W1Lpb-.js";
 import { u as il } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as vl } from "./useChartAccessibility-9icAAmYg.js";
-import dl from "./Legend-BHey9BA_.js";
-import cl from "./Title-eafHHaEy.js";
-import { _ as hl } from "./Shape-DeUTHS2H.js";
-import yl from "./img-B7FQLrD7.js";
+import dl from "./Legend-j5wCO6uB.js";
+import cl from "./Title-BjfgUisx.js";
+import { _ as hl } from "./Shape-DOL0bRNl.js";
+import yl from "./img-BUVma9Jy.js";
 import { _ as fl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { key: 1 }, wl = ["id"], kl = ["stop-color"], xl = ["offset", "stop-color"], _l = ["offset", "stop-color"], $l = ["stop-color"], Cl = { key: 2 }, Pl = ["id", "cx", "cy"], Tl = ["stop-color", "stop-opacity"], Il = ["stop-color"], Ml = ["id"], Al = ["id"], Sl = ["id"], Ll = ["flood-color"], Fl = ["id"], zl = ["flood-color"], Ol = ["d", "stroke", "filter"], Nl = ["d", "stroke", "filter"], Yl = ["cx", "cy", "r", "fill", "filter"], Xl = { key: 6 }, Vl = ["stroke", "d"], Dl = ["d", "fill", "stroke", "stroke-width", "filter"], Bl = { key: 0 }, Gl = ["d", "fill", "stroke", "stroke-width", "filter"], El = { key: 0 }, Rl = ["stroke", "d"], Wl = { key: 0 }, Ul = ["d", "stroke", "stroke-width", "filter"], jl = { key: 1 }, Hl = ["d", "fill", "stroke", "stroke-width", "filter"], ql = ["d", "fill", "stroke", "stroke-width", "filter"], Jl = { key: 1 }, Kl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ql = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Zl = { key: 0 }, ea = ["d", "fill", "stroke", "stroke-width"], ta = ["cx", "cy", "r", "stroke"], la = ["cx", "cy", "r", "fill"], aa = { key: 0 }, oa = ["d", "fill", "onMouseenter", "onMouseleave", "onClick"], sa = { key: 1 }, na = ["cx", "cy", "r"], ua = ["x", "y", "fill", "font-size"], ra = ["x", "y", "fill", "font-size"], ia = ["x", "y", "fill", "font-size"], va = ["x", "y", "fill", "font-size"], da = ["filter"], ca = { key: 0 }, ha = ["x", "y"], ya = { key: 1 }, fa = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], pa = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], ga = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], ma = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], ba = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], wa = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], ka = { key: 2 }, xa = ["x", "y", "width"], _a = ["x", "y", "width"], $a = {
+const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { key: 1 }, wl = ["id"], kl = ["stop-color"], xl = ["offset", "stop-color"], _l = ["offset", "stop-color"], $l = ["stop-color"], Cl = { key: 2 }, Pl = ["id", "cx", "cy"], Tl = ["stop-color", "stop-opacity"], Al = ["stop-color"], Il = ["id"], Ml = ["id"], Sl = ["id"], Ll = ["flood-color"], Fl = ["id"], zl = ["flood-color"], Ol = ["d", "stroke", "filter"], Nl = ["d", "stroke", "filter"], Yl = ["cx", "cy", "r", "fill", "filter"], Xl = { key: 6 }, Vl = ["stroke", "d"], Dl = ["d", "fill", "stroke", "stroke-width", "filter"], Bl = { key: 0 }, El = ["d", "fill", "stroke", "stroke-width", "filter"], Gl = { key: 0 }, Rl = ["stroke", "d"], Wl = { key: 0 }, Ul = ["d", "stroke", "stroke-width", "filter"], jl = { key: 1 }, Hl = ["d", "fill", "stroke", "stroke-width", "filter"], ql = ["d", "fill", "stroke", "stroke-width", "filter"], Jl = { key: 1 }, Kl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ql = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Zl = { key: 0 }, ea = ["d", "fill", "stroke", "stroke-width"], ta = ["cx", "cy", "r", "stroke"], la = ["cx", "cy", "r", "fill"], aa = { key: 0 }, oa = ["d", "fill", "onMouseenter", "onMouseleave", "onClick"], sa = { key: 1 }, na = ["cx", "cy", "r"], ua = ["x", "y", "fill", "font-size"], ra = ["x", "y", "fill", "font-size"], ia = ["x", "y", "fill", "font-size"], va = ["x", "y", "fill", "font-size"], da = ["filter"], ca = { key: 0 }, ha = ["x", "y"], ya = { key: 1 }, fa = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], pa = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], ga = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], ma = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], ba = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], wa = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], ka = { key: 2 }, xa = ["x", "y", "width"], _a = ["x", "y", "width"], $a = {
   key: 5,
   class: "vue-data-ui-watermark"
 }, Ca = ["onClick"], Pa = ["innerHTML"], Ta = {
@@ -31,44 +31,51 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
   },
   emits: ["selectLegend", "selectDatapoint"],
   setup(Ie, { expose: yt, emit: ft }) {
-    const pt = te(() => import("./vue-ui-accordion-BE-IMk5e.js")), gt = te(() => import("./DataTable-CZ_AURpz.js")), mt = te(() => import("./PackageVersion-BuyTFzA_.js")), bt = te(() => import("./PenAndPaper-C6SI350S.js")), wt = te(() => import("./vue-ui-skeleton-Bpd3uMFT.js")), kt = te(() => import("./Tooltip-DqkPv4p5.js")), xt = te(() => import("./UserOptions-Xu1YwU1i.js")), { vue_ui_donut: _t } = Wt(), $t = Bt(), m = Ie, ie = f({
+    const pt = te(() => import("./vue-ui-accordion-B9dwUCCo.js")), gt = te(() => import("./DataTable-DL4oxWqC.js")), mt = te(() => import("./PackageVersion-LvFPKRHt.js")), bt = te(() => import("./PenAndPaper-Cdll_WgQ.js")), wt = te(() => import("./vue-ui-skeleton-BBf1FidG.js")), kt = te(() => import("./Tooltip-BoPZ8xim.js")), xt = te(() => import("./UserOptions-DpcJg89h.js")), { vue_ui_donut: _t } = Wt(), $t = Bt(), g = Ie, ie = f({
       get() {
-        return !!m.dataset && m.dataset.length;
+        return !!g.dataset && g.dataset.length;
       },
       set(l) {
         return l;
       }
-    }), U = W(null), Me = W(null), Ae = W(null), j = W(null), oe = W(null), Se = W(null), Le = W(null), Fe = w(0), ze = w(0), Oe = w(0);
-    st(() => {
-      Ne();
-    }), Gt(() => {
+    }), U = W(null), Me = W(null), Se = W(null), j = W(null), oe = W(null), Le = W(null), Fe = W(null), ze = w(0), Oe = w(0), Ne = w(0);
+    nt(() => {
+      Ye();
+    }), Et(() => {
       j.value && (oe.value && j.value.unobserve(oe.value), j.value.disconnect());
     });
-    function Ne() {
-      if (Ut(m.dataset) ? it({
+    function Ye() {
+      if (Ut(g.dataset) ? Te({
         componentName: "VueUiDonut",
         type: "dataset"
-      }) : m.dataset.forEach((l, o) => {
+      }) : (g.dataset.forEach((l, o) => {
         jt({
           datasetObject: l,
           requiredAttributes: ["name", "values"]
         }).forEach((t) => {
-          ie.value = !1, it({
+          ie.value = !1, Te({
             componentName: "VueUiDonut",
             type: "datasetSerieAttribute",
             property: t,
             index: o
           });
         });
-      }), e.value.responsive) {
+      }), g.dataset.forEach((l, o) => {
+        (!l.name || l.name === "") && Te({
+          componentName: "VueUiDonut",
+          type: "datasetAttributeEmpty",
+          property: "name",
+          index: o
+        });
+      })), e.value.responsive) {
         const l = nl(() => {
           const { width: o, height: t } = ul({
             chart: U.value,
             title: e.value.style.chart.title.text ? Me.value : null,
-            legend: e.value.style.chart.legend.show ? Ae.value : null,
-            source: Se.value,
-            noTitle: Le.value,
-            padding: Be.value
+            legend: e.value.style.chart.legend.show ? Se.value : null,
+            source: Le.value,
+            noTitle: Fe.value,
+            padding: Ee.value
           });
           requestAnimationFrame(() => {
             n.value.width = o, n.value.height = t;
@@ -77,23 +84,23 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
         j.value && (oe.value && j.value.unobserve(oe.value), j.value.disconnect()), j.value = new ResizeObserver(l), oe.value = U.value.parentNode, j.value.observe(oe.value);
       }
     }
-    const g = w(Ht()), Ct = w(null), me = w(!1), be = w(""), O = w(null), Ye = w(0);
-    function Xe() {
+    const m = w(Ht()), Ct = w(null), me = w(!1), be = w(""), O = w(null), Xe = w(0);
+    function Ve() {
       const l = ht({
-        userConfig: m.config,
+        userConfig: g.config,
         defaultConfig: _t
       });
       let o = {};
       return l.theme ? o = {
         ...ht({
-          userConfig: ll.vue_ui_donut[l.theme] || m.config,
+          userConfig: ll.vue_ui_donut[l.theme] || g.config,
           defaultConfig: l
         }),
         customPalette: tl[l.theme] || ae
-      } : o = l, m.config && Te(m.config, "events.datapointEnter") ? o.events.datapointEnter = m.config.events.datapointEnter : o.events.datapointEnter = null, m.config && Te(m.config, "events.datapointLeave") ? o.events.datapointLeave = m.config.events.datapointLeave : o.events.datapointLeave = null, m.config && Te(m.config, "events.datapointClick") ? o.events.datapointClick = m.config.events.datapointClick : o.events.datapointClick = null, o;
+      } : o = l, g.config && Ae(g.config, "events.datapointEnter") ? o.events.datapointEnter = g.config.events.datapointEnter : o.events.datapointEnter = null, g.config && Ae(g.config, "events.datapointLeave") ? o.events.datapointLeave = g.config.events.datapointLeave : o.events.datapointLeave = null, g.config && Ae(g.config, "events.datapointClick") ? o.events.datapointClick = g.config.events.datapointClick : o.events.datapointClick = null, o;
     }
     const e = f({
-      get: () => Xe(),
+      get: () => Ve(),
       set: (l) => l
     }), T = w(!0), B = W([]);
     function Pt(l, o = 1e3, t = 50) {
@@ -113,25 +120,25 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
         });
       });
     }
-    st(async () => {
-      const l = m.dataset.map((o) => o.values.reduce((t, a) => t + a, 0));
+    nt(async () => {
+      const l = g.dataset.map((o) => o.values.reduce((t, a) => t + a, 0));
       e.value.startAnimation.show && await Pt(
         l,
         e.value.startAnimation.durationMs,
         e.value.startAnimation.staggerMs
       ), T.value = !1;
     });
-    const { userOptionsVisible: we, setUserOptionsVisibility: Ve, keepUserOptionState: De } = il({ config: e.value }), { svgRef: ve } = vl({ config: e.value.style.chart.title });
+    const { userOptionsVisible: we, setUserOptionsVisibility: De, keepUserOptionState: Be } = il({ config: e.value }), { svgRef: ve } = vl({ config: e.value.style.chart.title });
     function Tt() {
-      Ve(!0);
+      De(!0);
     }
-    function It() {
-      Ve(!1);
+    function At() {
+      De(!1);
     }
-    nt(() => m.config, (l) => {
-      e.value = Xe(), we.value = !e.value.userOptions.showOnChartHover, Ne(), Fe.value += 1, ze.value += 1, Oe.value += 1, y.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, y.value.showTable = e.value.table.show, y.value.showTooltip = e.value.style.chart.tooltip.show, n.value.height = e.value.style.chart.height, n.value.width = e.value.style.chart.width;
+    ut(() => g.config, (l) => {
+      e.value = Ve(), we.value = !e.value.userOptions.showOnChartHover, Ye(), ze.value += 1, Oe.value += 1, Ne.value += 1, y.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, y.value.showTable = e.value.table.show, y.value.showTooltip = e.value.style.chart.tooltip.show, n.value.height = e.value.style.chart.height, n.value.width = e.value.style.chart.width;
     }, { deep: !0 });
-    const Be = f(() => {
+    const Ee = f(() => {
       const { top: l, right: o, bottom: t, left: a } = e.value.style.chart.padding;
       return {
         css: `padding:${l}px ${o}px ${t}px ${a}px`,
@@ -140,11 +147,11 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
         bottom: t,
         left: a
       };
-    }), { isPrinting: Ge, isImaging: Ee, generatePdf: Re, generateImage: We } = rl({
-      elementId: `donut__${g.value}`,
+    }), { isPrinting: Ge, isImaging: Re, generatePdf: We, generateImage: Ue } = rl({
+      elementId: `donut__${m.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-donut",
       options: e.value.userOptions.print
-    }), Mt = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ue = f(() => qt(e.value.customPalette)), y = w({
+    }), It = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), je = f(() => qt(e.value.customPalette)), y = w({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
@@ -156,27 +163,27 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
     }), Q = f(() => {
       const l = e.value.style.chart.layout.donut.strokeWidth / 512, o = Math.min(n.value.width, n.value.height) * l, t = o > _.value ? _.value : o;
       return Math.max(t, 3);
-    }), je = ft, G = f(() => m.dataset.map((l, o) => ({
+    }), He = ft, E = f(() => g.dataset.map((l, o) => ({
       name: l.name,
-      color: vt(l.color) || Ue.value[o] || ae[o] || ae[o % ae.length],
+      color: vt(l.color) || je.value[o] || ae[o] || ae[o % ae.length],
       value: Jt(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}`
-    }))), F = W(G.value);
-    nt(() => G.value, (l) => F.value = l);
-    function At() {
-      return G.value.map((l) => ({
+      pattern: `pattern_${m.value}_${o}`
+    }))), F = W(E.value);
+    ut(() => E.value, (l) => F.value = l);
+    function Mt() {
+      return E.value.map((l) => ({
         name: l.name,
         color: l.color,
         value: l.value
       }));
     }
     const D = w([]), Z = w(!1);
-    function He({ from: l, to: o, duration: t, onUpdate: a, onDone: i, easing: c = ct }) {
+    function qe({ from: l, to: o, duration: t, onUpdate: a, onDone: i, easing: c = ct }) {
       const $ = performance.now();
       function C(R) {
         const X = Math.min((R - $) / t, 1), ce = c(X), pe = l + (o - l) * ce;
@@ -184,8 +191,8 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
       }
       requestAnimationFrame(C);
     }
-    function qe(l) {
-      const o = G.value.find((i, c) => c === l);
+    function Je(l) {
+      const o = E.value.find((i, c) => c === l);
       let a = F.value.find((i, c) => c === l).value;
       if (D.value.includes(l)) {
         let c = function() {
@@ -193,7 +200,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
             (C, R) => l === R ? { ...C, value: i } : C
           );
         }, $ = function() {
-          Z.value = !0, He({
+          Z.value = !0, qe({
             from: a,
             to: i,
             duration: e.value.serieToggleAnimation.durationMs,
@@ -210,13 +217,13 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
         D.value = D.value.filter((C) => C !== l);
         const i = o.value;
         e.value.serieToggleAnimation.show && e.value.type === "classic" ? $() : c();
-      } else if (D.value.length < G.value.length - 1) {
+      } else if (D.value.length < E.value.length - 1) {
         let i = function() {
           D.value.push(l), F.value = F.value.map(
             ($, C) => l === C ? { ...$, value: 0 } : $
           );
         }, c = function() {
-          Z.value = !0, He({
+          Z.value = !0, qe({
             from: a,
             to: 0,
             duration: e.value.serieToggleAnimation.durationMs,
@@ -232,18 +239,18 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
         };
         e.value.serieToggleAnimation.show && e.value.type === "classic" ? c() : i();
       }
-      je("selectLegend", E.value.map((i) => ({
+      He("selectLegend", G.value.map((i) => ({
         name: i.name,
         color: i.color,
         value: i.value
       })));
     }
-    const St = f(() => m.dataset.reduce((l, o) => l + o.values.reduce((t, a) => t + a, 0), 0)), E = f(() => {
+    const St = f(() => g.dataset.reduce((l, o) => l + o.values.reduce((t, a) => t + a, 0), 0)), G = f(() => {
       if (T.value) {
         const l = B.value.map((t, a) => ({
-          ...G.value[a],
+          ...E.value[a],
           value: t,
-          color: G.value[a].color,
+          color: E.value[a].color,
           ghost: !1
         })), o = St.value - B.value.reduce((t, a) => t + a, 0);
         return o > 0 && l.push({
@@ -263,17 +270,17 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
           ...l,
           seriesIndex: o
         })).filter((l, o) => !D.value.includes(o));
-    }), Je = f(() => m.dataset.map((l, o) => ({
+    }), Ke = f(() => g.dataset.map((l, o) => ({
       name: l.name,
-      color: vt(l.color) || Ue.value[o] || ae[o] || ae[o % ae.length],
+      color: vt(l.color) || je.value[o] || ae[o] || ae[o % ae.length],
       value: (l.values || []).reduce((t, a) => t + a, 0),
       shape: "circle",
       patternIndex: o
     })).map((l, o) => ({
       ...l,
-      proportion: l.value / m.dataset.map((t) => (t.values || []).reduce((a, i) => a + i, 0)).reduce((t, a) => t + a, 0),
+      proportion: l.value / g.dataset.map((t) => (t.values || []).reduce((a, i) => a + i, 0)).reduce((t, a) => t + a, 0),
       opacity: D.value.includes(o) ? 0.5 : 1,
-      segregate: () => !Z.value && qe(o),
+      segregate: () => !Z.value && Je(o),
       isSegregated: D.value.includes(o)
     }))), Lt = f(() => ({
       cy: "donut-div-legend",
@@ -285,7 +292,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
     })), _ = f(() => {
       const l = Math.min(n.value.width / 3, n.value.height / 3);
       return l < 55 ? 55 : l;
-    }), I = f(() => dt({ series: E.value }, n.value.width / 2, n.value.height / 2, _.value, _.value, 1.99999, 2, 1, 360, 105.25, Q.value)), Ft = f(() => Math.abs(E.value.map((l) => l.value).reduce((l, o) => l + o, 0)) > 0), zt = f(() => dt({
+    }), A = f(() => dt({ series: G.value }, n.value.width / 2, n.value.height / 2, _.value, _.value, 1.99999, 2, 1, 360, 105.25, Q.value)), Ft = f(() => Math.abs(G.value.map((l) => l.value).reduce((l, o) => l + o, 0)) > 0), zt = f(() => dt({
       series: [
         {
           value: 1,
@@ -297,8 +304,8 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
           absoluteValues: [1]
         }
       ]
-    }, n.value.width / 2, n.value.height / 2, _.value, _.value, 1.99999, 2, 1, 360, 105.25, Q.value)), N = f(() => I.value.filter((l) => !l.ghost)), d = f(() => {
-      const l = Math.max(...E.value.map((t) => t.value)), o = E.value.map((t) => t.value / l);
+    }, n.value.width / 2, n.value.height / 2, _.value, _.value, 1.99999, 2, 1, 360, 105.25, Q.value)), N = f(() => A.value.filter((l) => !l.ghost)), d = f(() => {
+      const l = Math.max(...G.value.map((t) => t.value)), o = G.value.map((t) => t.value / l);
       return Kt({
         series: o,
         center: {
@@ -334,12 +341,12 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
     function Nt(l) {
       return [...l].map((o) => o.value).reduce((o, t) => o + t, 0);
     }
-    const S = f(() => E.value.map((l) => l.value).reduce((l, o) => l + o, 0)), Ke = f(() => S.value / E.value.length), Qe = f(() => (l) => Z.value ? l.proportion * 100 : l.value / S.value * 100), xe = w(null), de = w(!1);
+    const S = f(() => G.value.map((l) => l.value).reduce((l, o) => l + o, 0)), Qe = f(() => S.value / G.value.length), Ze = f(() => (l) => Z.value ? l.proportion * 100 : l.value / S.value * 100), xe = w(null), de = w(!1);
     function H({ datapoint: l, seriesIndex: o }) {
       e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: o }), me.value = !1, O.value = null;
     }
     function q({ datapoint: l, relativeIndex: o, seriesIndex: t, show: a = !1 }) {
-      console.log(l), e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: t }), xe.value = { datapoint: l, seriesIndex: t, config: e.value, series: G.value }, me.value = a, O.value = o;
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: t }), xe.value = { datapoint: l, seriesIndex: t, config: e.value, series: E.value }, me.value = a, O.value = o;
       let i = "";
       const c = e.value.style.chart.tooltip.customFormat;
       if (de.value = !1, sl(c))
@@ -347,7 +354,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
           const $ = c({
             seriesIndex: t,
             datapoint: l,
-            series: G.value,
+            series: E.value,
             config: e.value
           });
           typeof $ == "string" && (be.value = $, de.value = !0);
@@ -355,7 +362,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
           console.warn("Custom format cannot be applied."), de.value = !1;
         }
       if (!de.value) {
-        if (i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l.name}</div>`, i += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${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 && (i += `<b>${V(
+        if (i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l.name}</div>`, i += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${l.color}"/>${$t.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${m.value}_${t})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (i += `<b>${V(
           e.value.style.chart.layout.labels.value.formatter,
           l.value,
           z({
@@ -390,16 +397,16 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
       }
     }
     function ee(l) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(O.value) && O.value !== l ? `url(#blur_${g.value})` : "";
+      return e.value.useBlurOnHover && ![null, void 0].includes(O.value) && O.value !== l ? `url(#blur_${m.value})` : "";
     }
     const J = f(() => {
-      const l = E.value.map((t) => ({
+      const l = G.value.map((t) => ({
         name: t.name,
         color: t.color
-      })), o = E.value.map((t) => t.value);
+      })), o = G.value.map((t) => t.value);
       return { head: l, body: o };
     });
-    function Ze(l = null) {
+    function et(l = null) {
       Rt(() => {
         const o = J.value.head.map((i, c) => [[
           i.name
@@ -443,23 +450,23 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
         config: t
       };
     }), ne = w(!1);
-    function et(l) {
-      ne.value = l, Ye.value += 1;
+    function tt(l) {
+      ne.value = l, Xe.value += 1;
     }
-    const tt = f(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
+    const lt = f(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
     function Yt(l) {
       return l.toFixed(e.value.style.chart.legend.roundingPercentage).split("").map((o) => "-").join("");
     }
     function K(l, o) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: l.seriesIndex }), je("selectDatapoint", { datapoint: l, index: o });
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: l.seriesIndex }), He("selectDatapoint", { datapoint: l, index: o });
     }
-    function lt() {
+    function at() {
       y.value.showTable = !y.value.showTable;
     }
-    function at() {
+    function ot() {
       y.value.dataLabels.show = !y.value.dataLabels.show;
     }
-    function ot() {
+    function st() {
       y.value.showTooltip = !y.value.showTooltip;
     }
     const fe = w(!1);
@@ -486,24 +493,24 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
     }
     return yt({
       autoSize: Vt,
-      getData: At,
+      getData: Mt,
       getImage: Xt,
-      generatePdf: Re,
-      generateCsv: Ze,
-      generateImage: We,
-      toggleTable: lt,
-      toggleLabels: at,
-      toggleTooltip: ot,
+      generatePdf: We,
+      generateCsv: et,
+      generateImage: Ue,
+      toggleTable: at,
+      toggleLabels: ot,
+      toggleTooltip: st,
       toggleAnnotator: _e,
-      toggleFullscreen: et
+      toggleFullscreen: tt
     }), (l, o) => (s(), u("div", {
       ref_key: "donutChart",
       ref: U,
       class: Ce(`vue-ui-donut ${ne.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: k(`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}`,
+      id: `donut__${m.value}`,
       onMouseenter: Tt,
-      onMouseleave: It
+      onMouseleave: At
     }, [
       e.value.userOptions.buttons.annotator && r(ve) ? (s(), le(r(bt), {
         key: 0,
@@ -514,10 +521,10 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
         onClose: _e
       }, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : v("", !0),
       b(l.$slots, "userConfig", {}, void 0, !0),
-      Mt.value ? (s(), u("div", {
+      It.value ? (s(), u("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Le,
+        ref: Fe,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : v("", !0),
@@ -528,7 +535,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
         (s(), le(cl, {
-          key: `title_${Fe.value}`,
+          key: `title_${ze.value}`,
           config: {
             title: {
               cy: "donut-div-title",
@@ -541,15 +548,15 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
           }
         }, null, 8, ["config"]))
       ], 512)) : v("", !0),
-      e.value.userOptions.show && ie.value && (r(De) || r(we)) ? (s(), le(r(xt), {
+      e.value.userOptions.show && ie.value && (r(Be) || r(we)) ? (s(), le(r(xt), {
         ref_key: "details",
         ref: Ct,
-        key: `user_option_${Ye.value}`,
+        key: `user_option_${Xe.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isPrinting: r(Ge),
-        isImaging: r(Ee),
-        uid: g.value,
+        isImaging: r(Re),
+        uid: m.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,
@@ -566,18 +573,18 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: fe.value,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: et,
-        onGeneratePdf: r(Re),
-        onGenerateCsv: Ze,
-        onGenerateImage: r(We),
-        onToggleTable: lt,
-        onToggleLabels: at,
-        onToggleTooltip: ot,
+        onToggleFullscreen: tt,
+        onGeneratePdf: r(We),
+        onGenerateCsv: et,
+        onGenerateImage: r(Ue),
+        onToggleTable: at,
+        onToggleLabels: ot,
+        onToggleTooltip: st,
         onToggleAnnotator: _e,
         style: k({
-          visibility: r(De) ? r(we) ? "visible" : "hidden" : "visible"
+          visibility: r(Be) ? r(we) ? "visible" : "hidden" : "visible"
         })
-      }, ut({ _: 2 }, [
+      }, rt({ _: 2 }, [
         l.$slots.menuIcon ? {
           name: "menuIcon",
           fn: P(({ isOpen: t, color: a }) => [
@@ -649,7 +656,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
         xmlns: r(Qt),
         class: Ce({ "vue-data-ui-fullscreen--on": ne.value, "vue-data-ui-fulscreen--off": !ne.value, "vue-data-ui-svg": !0 }),
         viewBox: `0 0 ${n.value.width <= 0 ? 10 : n.value.width} ${n.value.height <= 0 ? 10 : n.value.height}`,
-        style: k(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${Be.value.css}`)
+        style: k(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${Ee.value.css}`)
       }, [
         h("g", {
           ref_key: "G",
@@ -672,7 +679,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
           e.value.type === "classic" && !isNaN(Q.value / _.value) ? (s(), u("defs", bl, [
             e.value.style.chart.useGradient ? (s(), u("radialGradient", {
               key: 0,
-              id: `gradient_${g.value}`
+              id: `gradient_${m.value}`
             }, [
               h("stop", {
                 offset: "0%",
@@ -696,26 +703,26 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
             ], 8, wl)) : v("", !0)
           ])) : v("", !0),
           e.value.type === "polar" ? (s(), u("defs", Cl, [
-            (s(!0), u(p, null, A(d.value, (t, a) => (s(), u("radialGradient", {
-              id: `polar_gradient_${a}_${g.value}`,
+            (s(!0), u(p, null, M(d.value, (t, a) => (s(), u("radialGradient", {
+              id: `polar_gradient_${a}_${m.value}`,
               cx: (isNaN(t.middlePoint.x / n.value.width * 100) ? 0 : t.middlePoint.x / n.value.width * 100) + "%",
               cy: (isNaN(t.middlePoint.y / n.value.height * 100) ? 0 : t.middlePoint.y / n.value.height * 100) + "%",
               r: "62%"
             }, [
               h("stop", {
                 offset: "0%",
-                "stop-color": r(Zt)(I.value[a].color, 0.05),
+                "stop-color": r(Zt)(A.value[a].color, 0.05),
                 "stop-opacity": e.value.style.chart.gradientIntensity / 100
               }, null, 8, Tl),
               h("stop", {
                 offset: "100%",
-                "stop-color": I.value[a].color
-              }, null, 8, Il)
+                "stop-color": A.value[a].color
+              }, null, 8, Al)
             ], 8, Pl))), 256))
           ])) : v("", !0),
           h("defs", null, [
             h("filter", {
-              id: `blur_${g.value}`,
+              id: `blur_${m.value}`,
               x: "-50%",
               y: "-50%",
               width: "200%",
@@ -724,15 +731,15 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
               h("feGaussianBlur", {
                 in: "SourceGraphic",
                 stdDeviation: 2,
-                id: `blur_std_${g.value}`
-              }, null, 8, Al),
+                id: `blur_std_${m.value}`
+              }, null, 8, Ml),
               o[5] || (o[5] = h("feColorMatrix", {
                 type: "saturate",
                 values: "0"
               }, null, -1))
-            ], 8, Ml),
+            ], 8, Il),
             h("filter", {
-              id: `shadow_${g.value}`,
+              id: `shadow_${m.value}`,
               "color-interpolation-filters": "sRGB"
             }, [
               h("feDropShadow", {
@@ -744,7 +751,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
               }, null, 8, Ll)
             ], 8, Sl),
             h("filter", {
-              id: `drop_shadow_${g.value}`,
+              id: `drop_shadow_${m.value}`,
               "color-interpolation-filters": "sRGB",
               x: "-50%",
               y: "-50%",
@@ -760,7 +767,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
               }, null, 8, zl)
             ], 8, Fl)
           ]),
-          e.value.type === "classic" ? (s(!0), u(p, { key: 3 }, A(I.value.filter((t) => !t.ghost), (t, a) => (s(), u("g", null, [
+          e.value.type === "classic" ? (s(!0), u(p, { key: 3 }, M(A.value.filter((t) => !t.ghost), (t, a) => (s(), u("g", null, [
             Y(t) && y.value.dataLabels.show ? (s(), u("path", {
               key: 0,
               d: r(el)(t, { x: n.value.width / 2, y: n.value.height / 2 }, 16, 16, !1, !1, Q.value, 12, e.value.style.chart.layout.curvedMarkers),
@@ -772,7 +779,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
               filter: ee(a)
             }, null, 8, Ol)) : v("", !0)
           ]))), 256)) : v("", !0),
-          e.value.type === "polar" ? (s(!0), u(p, { key: 4 }, A(I.value.filter((t) => !t.ghost), (t, a) => (s(), u("g", null, [
+          e.value.type === "polar" ? (s(!0), u(p, { key: 4 }, M(A.value.filter((t) => !t.ghost), (t, a) => (s(), u("g", null, [
             Y(t) && y.value.dataLabels.show ? (s(), u("path", {
               key: 0,
               d: `M ${r(L)({ initX: d.value[a].middlePoint.x, initY: d.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x},${r(L)({ initX: d.value[a].middlePoint.x, initY: d.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y} ${d.value[a].middlePoint.x},${d.value[a].middlePoint.y}`,
@@ -793,44 +800,44 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
             cy: n.value.height / 2,
             r: _.value <= 0 ? 10 : _.value,
             fill: e.value.style.chart.backgroundColor,
-            filter: `url(#shadow_${g.value})`
+            filter: `url(#shadow_${m.value})`
           }, null, 8, Yl)) : v("", !0),
           l.$slots.pattern ? (s(), u("g", Xl, [
-            (s(!0), u(p, null, A(Ie.dataset, (t, a) => (s(), u("defs", {
+            (s(!0), u(p, null, M(Ie.dataset, (t, a) => (s(), u("defs", {
               key: `pattern-${t.patternIndex}`
             }, [
-              b(l.$slots, "pattern", rt({ ref_for: !0 }, { seriesIndex: a, patternId: `pattern_${g.value}_${a}` }), void 0, !0)
+              b(l.$slots, "pattern", it({ ref_for: !0 }, { seriesIndex: a, patternId: `pattern_${m.value}_${a}` }), void 0, !0)
             ]))), 128))
           ])) : v("", !0),
           S.value && e.value.type === "classic" ? (s(), u(p, { key: 7 }, [
-            (s(!0), u(p, null, A(N.value, (t, a) => (s(), u("path", {
+            (s(!0), u(p, null, M(N.value, (t, a) => (s(), u("path", {
               stroke: e.value.style.chart.backgroundColor,
               d: t.arcSlice,
               fill: "#FFFFFF"
             }, null, 8, Vl))), 256)),
-            (s(!0), u(p, null, A(N.value, (t, a) => (s(), u("path", {
+            (s(!0), u(p, null, M(N.value, (t, a) => (s(), u("path", {
               class: "vue-ui-donut-arc-path",
               d: t.arcSlice,
               fill: t.color,
-              stroke: e.value.style.chart.backgroundColor,
+              stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
               "stroke-width": e.value.style.chart.layout.donut.borderWidth,
               filter: ee(a)
             }, null, 8, Dl))), 256)),
             l.$slots.pattern ? (s(), u("g", Bl, [
-              (s(!0), u(p, null, A(N.value, (t, a) => (s(), u("path", {
+              (s(!0), u(p, null, M(N.value, (t, a) => (s(), u("path", {
                 class: "vue-ui-donut-arc-path",
                 d: t.arcSlice,
                 fill: `url(#${t.pattern})`,
-                stroke: e.value.style.chart.backgroundColor,
+                stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth,
                 filter: ee(a)
-              }, null, 8, Gl))), 256))
+              }, null, 8, El))), 256))
             ])) : v("", !0)
           ], 64)) : v("", !0),
           S.value && e.value.type === "polar" ? (s(), u(p, { key: 8 }, [
-            I.value.length > 1 ? (s(), u("g", El, [
-              (s(!0), u(p, null, A(N.value, (t, a) => (s(), u("path", {
-                stroke: e.value.style.chart.backgroundColor,
+            A.value.length > 1 ? (s(), u("g", Gl, [
+              (s(!0), u(p, null, M(N.value, (t, a) => (s(), u("path", {
+                stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                 d: d.value[a].path,
                 fill: "#FFFFFF",
                 style: k({
@@ -838,24 +845,24 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                 })
               }, null, 12, Rl))), 256)),
               e.value.style.chart.layout.donut.useShadow ? (s(), u("g", Wl, [
-                (s(!0), u(p, null, A(N.value, (t, a) => (s(), u("path", {
+                (s(!0), u(p, null, M(N.value, (t, a) => (s(), u("path", {
                   class: "vue-ui-donut-arc-path",
                   d: d.value[a].path,
                   fill: "transparent",
-                  stroke: e.value.style.chart.backgroundColor,
+                  stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                   "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-                  filter: `url(#drop_shadow_${g.value})`,
+                  filter: `url(#drop_shadow_${m.value})`,
                   style: k({
                     transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                   })
                 }, null, 12, Ul))), 256))
               ])) : v("", !0),
               l.$slots.pattern ? (s(), u("g", jl, [
-                (s(!0), u(p, null, A(N.value, (t, a) => (s(), u("path", {
+                (s(!0), u(p, null, M(N.value, (t, a) => (s(), u("path", {
                   class: "vue-ui-donut-arc-path",
                   d: d.value[a].path,
                   fill: `url(#${t.pattern})`,
-                  stroke: e.value.style.chart.backgroundColor,
+                  stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                   "stroke-width": e.value.style.chart.layout.donut.borderWidth,
                   filter: ee(a),
                   style: k({
@@ -863,11 +870,11 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                   })
                 }, null, 12, Hl))), 256))
               ])) : v("", !0),
-              (s(!0), u(p, null, A(N.value, (t, a) => (s(), u("path", {
+              (s(!0), u(p, null, M(N.value, (t, a) => (s(), u("path", {
                 class: "vue-ui-donut-arc-path",
                 d: d.value[a].path,
-                fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${a}_${g.value})` : t.color,
-                stroke: e.value.style.chart.backgroundColor,
+                fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${a}_${m.value})` : t.color,
+                stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth,
                 filter: ee(a),
                 style: k({
@@ -880,7 +887,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                 cx: n.value.width / 2,
                 cy: n.value.height / 2,
                 r: _.value,
-                fill: `url(#pattern_${g.value}_${I.value[0].patternIndex})`,
+                fill: `url(#pattern_${m.value}_${A.value[0].patternIndex})`,
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth
               }, null, 8, Kl)) : v("", !0),
@@ -888,14 +895,14 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                 cx: n.value.width / 2,
                 cy: n.value.height / 2,
                 r: _.value,
-                fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${g.value})` : I.value[0].color,
+                fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${m.value})` : A.value[0].color,
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth
               }, null, 8, Ql)
             ]))
           ], 64)) : (s(), u(p, { key: 9 }, [
             e.value.type === "classic" && !Ft.value ? (s(), u("g", Zl, [
-              (s(!0), u(p, null, A(zt.value, (t, a) => (s(), u("path", {
+              (s(!0), u(p, null, M(zt.value, (t, a) => (s(), u("path", {
                 class: "vue-ui-donut-arc-path",
                 d: t.arcSlice,
                 fill: t.color,
@@ -919,13 +926,13 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
               /* This might require adjustments */
               _.value <= 0 ? 10 : _.value
             ),
-            fill: `url(#gradient_${g.value})`
+            fill: `url(#gradient_${m.value})`
           }, null, 8, la)) : v("", !0),
           S.value ? (s(), u(p, { key: 11 }, [
-            I.value.length > 1 || e.value.type === "classic" ? (s(), u("g", aa, [
-              (s(!0), u(p, null, A(I.value.filter((t) => !t.ghost), (t, a) => (s(), u("path", {
+            A.value.length > 1 || e.value.type === "classic" ? (s(), u("g", aa, [
+              (s(!0), u(p, null, M(A.value.filter((t) => !t.ghost), (t, a) => (s(), u("path", {
                 d: e.value.type === "classic" ? t.arcSlice : d.value[a].path,
-                fill: O.value === a ? "rgba(0,0,0,0.1)" : "transparent",
+                fill: O.value === a ? e.value.style.chart.layout.donut.selectedColor : "transparent",
                 onMouseenter: (i) => q({
                   datapoint: t,
                   relativeIndex: a,
@@ -942,13 +949,13 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                 r: _.value,
                 fill: "transparent",
                 onMouseenter: o[0] || (o[0] = (t) => q({
-                  datapoint: I.value[0],
+                  datapoint: A.value[0],
                   relativeIndex: 0,
-                  seriesIndex: I.value[0].seriesIndex,
+                  seriesIndex: A.value[0].seriesIndex,
                   show: !0
                 })),
-                onMouseleave: o[1] || (o[1] = (t) => H({ datapoint: I.value[0], seriesIndex: I.value[0].seriesIndex })),
-                onClick: o[2] || (o[2] = (t) => K(I.value[0], l.i))
+                onMouseleave: o[1] || (o[1] = (t) => H({ datapoint: A.value[0], seriesIndex: A.value[0].seriesIndex })),
+                onClick: o[2] || (o[2] = (t) => K(A.value[0], l.i))
               }, null, 40, na)
             ]))
           ], 64)) : v("", !0),
@@ -961,7 +968,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
               fill: e.value.style.chart.layout.labels.hollow.total.color,
               "font-size": e.value.style.chart.layout.labels.hollow.total.fontSize,
               style: k(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
-            }, M(e.value.style.chart.layout.labels.hollow.total.text), 13, ua)) : v("", !0),
+            }, I(e.value.style.chart.layout.labels.hollow.total.text), 13, ua)) : v("", !0),
             e.value.style.chart.layout.labels.hollow.total.show ? (s(), u("text", {
               key: 1,
               "text-anchor": "middle",
@@ -970,7 +977,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { 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: k(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
-            }, M(r(V)(
+            }, I(r(V)(
               e.value.style.chart.layout.labels.hollow.total.value.formatter,
               S.value,
               r(z)({
@@ -987,7 +994,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
               fill: e.value.style.chart.layout.labels.hollow.average.color,
               "font-size": e.value.style.chart.layout.labels.hollow.average.fontSize,
               style: k(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
-            }, M(e.value.style.chart.layout.labels.hollow.average.text), 13, ia)) : v("", !0),
+            }, I(e.value.style.chart.layout.labels.hollow.average.text), 13, ia)) : v("", !0),
             e.value.style.chart.layout.labels.hollow.average.show ? (s(), u("text", {
               key: 3,
               "text-anchor": "middle",
@@ -996,34 +1003,34 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { 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: k(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
-            }, M(Z.value || T.value ? "--" : r(V)(
+            }, I(Z.value || T.value ? "--" : r(V)(
               e.value.style.chart.layout.labels.hollow.average.value.formatter,
-              Ke.value,
+              Qe.value,
               r(z)({
                 p: e.value.style.chart.layout.labels.hollow.average.value.prefix,
-                v: Ke.value,
+                v: Qe.value,
                 s: e.value.style.chart.layout.labels.hollow.average.value.suffix,
                 r: e.value.style.chart.layout.labels.hollow.average.value.rounding
               })
             )), 13, va)) : v("", !0)
           ], 64)) : v("", !0),
-          (s(!0), u(p, null, A(N.value.filter((t) => !t.ghost), (t, a) => (s(), u("g", {
+          (s(!0), u(p, null, M(N.value.filter((t) => !t.ghost), (t, a) => (s(), u("g", {
             filter: ee(a),
             class: Ce({ animated: e.value.useCssAnimation })
           }, [
             e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (s(), u("g", ca, [
               (s(), u("foreignObject", {
                 x: r(x)(t, !0).anchor === "end" ? r(x)(t).x - 120 : r(x)(t, !0).anchor === "middle" ? r(x)(t).x - 60 : r(x)(t).x,
-                y: r(he)(t) - (tt.value ? 20 : 0),
+                y: r(he)(t) - (lt.value ? 20 : 0),
                 width: "120",
                 height: "60",
                 style: { overflow: "visible" }
               }, [
                 h("div", null, [
-                  b(l.$slots, "dataLabel", rt({ ref_for: !0 }, {
+                  b(l.$slots, "dataLabel", it({ ref_for: !0 }, {
                     datapoint: t,
                     isBlur: !e.value.useBlurOnHover || [null, void 0].includes(O.value) || O.value === a,
-                    isSafari: tt.value,
+                    isSafari: lt.value,
                     isVisible: Y(t) && y.value.dataLabels.show,
                     textAlign: r(x)(t, !0, 16, !0).anchor,
                     flexAlign: r(x)(t, !0, 16).anchor,
@@ -1041,7 +1048,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": 1,
                   r: 3,
-                  filter: !e.value.useBlurOnHover || [null, void 0].includes(O.value) || O.value === a ? "" : `url(#blur_${g.value})`,
+                  filter: !e.value.useBlurOnHover || [null, void 0].includes(O.value) || O.value === a ? "" : `url(#blur_${m.value})`,
                   onClick: (i) => K(t, a),
                   onMouseenter: (i) => q({
                     datapoint: t,
@@ -1061,7 +1068,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": 1,
                   r: 3,
-                  filter: !e.value.useBlurOnHover || [null, void 0].includes(O.value) || O.value === a ? "" : `url(#blur_${g.value})`,
+                  filter: !e.value.useBlurOnHover || [null, void 0].includes(O.value) || O.value === a ? "" : `url(#blur_${m.value})`,
                   onClick: (i) => K(t, a),
                   onMouseenter: (i) => q({
                     datapoint: t,
@@ -1092,7 +1099,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                     show: !0
                   }),
                   onMouseleave: (i) => H({ datapoint: t, seriesIndex: t.seriesIndex })
-                }, M(ke(t, N.value)) + " " + M(e.value.style.chart.layout.labels.value.show ? `(${r(V)(
+                }, I(ke(t, N.value)) + " " + I(e.value.style.chart.layout.labels.value.show ? `(${r(V)(
                   e.value.style.chart.layout.labels.value.formatter,
                   t.value,
                   r(z)({
@@ -1119,7 +1126,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                     show: !0
                   }),
                   onMouseleave: (i) => H({ datapoint: t, seriesIndex: t.seriesIndex })
-                }, M(t.name), 45, ma)) : v("", !0)
+                }, I(t.name), 45, ma)) : v("", !0)
               ], 64)) : v("", !0),
               e.value.type === "polar" ? (s(), u(p, { key: 3 }, [
                 Y(t) && y.value.dataLabels.show ? (s(), u("text", {
@@ -1141,7 +1148,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                     show: !0
                   }),
                   onMouseleave: (i) => H({ datapoint: t, seriesIndex: t.seriesIndex })
-                }, M(ke(t, N.value)) + " " + M(e.value.style.chart.layout.labels.value.show ? `(${r(V)(
+                }, I(ke(t, N.value)) + " " + I(e.value.style.chart.layout.labels.value.show ? `(${r(V)(
                   e.value.style.chart.layout.labels.value.formatter,
                   t.value,
                   r(z)({
@@ -1171,7 +1178,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                     show: !0
                   }),
                   onMouseleave: (i) => H({ datapoint: t, seriesIndex: t.seriesIndex })
-                }, M(t.name), 45, wa)) : v("", !0)
+                }, I(t.name), 45, wa)) : v("", !0)
               ], 64)) : v("", !0)
             ])),
             y.value.dataLabels.show && e.value.style.chart.comments.show && t.comment ? (s(), u("g", ka, [
@@ -1213,7 +1220,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
         ], 512)
       ], 14, gl)) : v("", !0),
       l.$slots.watermark ? (s(), u("div", $a, [
-        b(l.$slots, "watermark", ue(re({ isPrinting: r(Ge) || r(Ee) })), void 0, !0)
+        b(l.$slots, "watermark", ue(re({ isPrinting: r(Ge) || r(Re) })), void 0, !0)
       ])) : v("", !0),
       ie.value ? v("", !0) : (s(), le(r(wt), {
         key: 6,
@@ -1230,19 +1237,19 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
       }, null, 8, ["config"])),
       h("div", {
         ref_key: "chartLegend",
-        ref: Ae
+        ref: Se
       }, [
         e.value.style.chart.legend.show ? (s(), le(dl, {
-          key: `legend_${Oe.value}`,
-          legendSet: Je.value,
+          key: `legend_${Ne.value}`,
+          legendSet: Ke.value,
           config: Lt.value,
-          onClickMarker: o[3] || (o[3] = ({ i: t }) => qe(t))
-        }, ut({
+          onClickMarker: o[3] || (o[3] = ({ i: t }) => Je(t))
+        }, rt({
           item: P(({ legend: t, index: a }) => [
             h("div", {
               style: k(`opacity:${D.value.includes(a) ? 0.5 : 1}`),
               onClick: (i) => t.segregate()
-            }, M(t.name) + M(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + M(e.value.style.chart.legend.showValue ? r(V)(
+            }, I(t.name) + I(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + I(e.value.style.chart.legend.showValue ? r(V)(
               e.value.style.chart.layout.labels.value.formatter,
               t.value,
               r(z)({
@@ -1255,11 +1262,11 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                 datapoint: t,
                 index: a
               }
-            ) : "") + " " + M(e.value.style.chart.legend.showPercentage ? D.value.includes(a) ? `${e.value.style.chart.legend.showValue ? "(" : ""}${Yt(t.proportion * 100)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(t.value / S.value) ? "-" : r(V)(
+            ) : "") + " " + I(e.value.style.chart.legend.showPercentage ? D.value.includes(a) ? `${e.value.style.chart.legend.showValue ? "(" : ""}${Yt(t.proportion * 100)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(t.value / S.value) ? "-" : r(V)(
               e.value.style.chart.layout.labels.percentage.formatter,
-              Qe.value(t),
+              Ze.value(t),
               r(z)({
-                v: Qe.value(t),
+                v: Ze.value(t),
                 s: "%",
                 r: e.value.style.chart.legend.roundingPercentage
               })
@@ -1275,18 +1282,18 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
                 radius: 30,
                 stroke: "none",
                 plot: { x: 30, y: 30 },
-                fill: `url(#pattern_${g.value}_${a})`
+                fill: `url(#pattern_${m.value}_${a})`
               }, null, 8, ["shape", "fill"])
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["legendSet", "config"])) : v("", !0),
-        b(l.$slots, "legend", { legend: Je.value }, void 0, !0)
+        b(l.$slots, "legend", { legend: Ke.value }, void 0, !0)
       ], 512),
       l.$slots.source ? (s(), u("div", {
         key: 7,
         ref_key: "source",
-        ref: Se,
+        ref: Le,
         dir: "auto"
       }, [
         b(l.$slots, "source", {}, void 0, !0)
@@ -1333,7 +1340,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
       }, {
         content: P(() => [
           (s(), le(r(gt), {
-            key: `table_${ze.value}`,
+            key: `table_${Oe.value}`,
             colNames: ye.value.colNames,
             head: ye.value.head,
             body: ye.value.body,
@@ -1348,7 +1355,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
               }, null, 8, Pa)
             ]),
             td: P(({ td: t }) => [
-              Et(M(t.name ? t.name : isNaN(Number(t)) ? t.includes("%") ? t : r(V)(
+              Gt(I(t.name ? t.name : isNaN(Number(t)) ? t.includes("%") ? t : r(V)(
                 e.value.style.chart.layout.labels.percentage.formatter,
                 t,
                 r(z)({
@@ -1374,7 +1381,7 @@ const pl = ["id"], gl = ["xmlns", "viewBox"], ml = ["width", "height"], bl = { k
       }, 8, ["config"])) : v("", !0)
     ], 46, pl));
   }
-}, Da = /* @__PURE__ */ fl(Ta, [["__scopeId", "data-v-597511a3"]]);
+}, Da = /* @__PURE__ */ fl(Ta, [["__scopeId", "data-v-f65ce540"]]);
 export {
   Da as default
 };