vue-data-ui 3.9.22 → 3.10.1

package/dist/{vue-ui-donut-n-wyE9bw.js → vue-ui-donut-8T6Nmsxq.js}

@@ -1,26 +1,26 @@
-import { computed as g, defineAsyncComponent as Se, useSlots as Hl, shallowRef as Me, ref as k, onMounted as ol, onBeforeUnmount as al, toRefs as Gl, watch as Ne, createElementBlock as i, openBlock as u, normalizeStyle as I, normalizeClass as Nt, createBlock as Pe, createCommentVNode as f, renderSlot as w, createElementVNode as b, createVNode as wt, unref as s, withCtx as C, normalizeProps as ee, guardReactiveProps as te, createSlots as Rt, Fragment as _, renderList as j, mergeProps as Vt, toDisplayString as ke, withDirectives as kt, vShow as Ct, Teleport as jl, resolveDynamicComponent as Wl, createTextVNode as nl, nextTick as ql } from "vue";
-import { o as sl, g as Ut, l as Ql, c as Jl, t as Kl, k as Zl, U as eo, m as ul, j as Ee, a as ge, d as ie, a3 as rl, av as to, X as lo, s as xt, h as oo, a4 as ao, ac as z, a5 as Ce, a6 as A, as as il, f as no, i as so, a1 as Ht, v as uo, r as ro, y as io, ag as cl, aw as co } from "./lib-2iaAPQ_c.js";
-import { f as vo, b as ho } from "./labelUtils-B3mOOEke.js";
-import { t as fo, u as yo } from "./useResponsive-DfdjqQps.js";
-import { u as go, a as Gt } from "./useNestedProp-gqRzbKJy.js";
-import { u as po } from "./usePrinter-ChVMpU2f.js";
-import { u as bo, B as mo } from "./BaseScanner-BMpwQAfz.js";
-import { u as wo } from "./useSvgExport-ByUukOZt.js";
-import { u as ko } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as Co } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as xo } from "./useChartAccessibility-9icAAmYg.js";
-import $o from "./img-CqYIrJ8I.js";
-import { _ as Ao } from "./Shape-12_eh8zD.js";
-import _o from "./Title-B7pkWzTi.js";
-import To from "./Legend-D2xmnFPH.js";
-import { _ as Lo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-function So(tt) {
+import { computed as g, defineAsyncComponent as Se, useSlots as jl, shallowRef as Me, ref as w, onMounted as ol, onBeforeUnmount as al, toRefs as Wl, watch as Ne, createElementBlock as i, openBlock as r, normalizeStyle as I, normalizeClass as Nt, createBlock as Pe, createCommentVNode as f, renderSlot as C, createElementVNode as b, createVNode as Ct, unref as s, withCtx as k, normalizeProps as ee, guardReactiveProps as te, createSlots as Rt, Fragment as _, renderList as j, mergeProps as Vt, toDisplayString as we, withDirectives as wt, vShow as kt, Teleport as ql, resolveDynamicComponent as Ql, createTextVNode as nl, nextTick as Jl } from "vue";
+import { o as sl, g as Ut, l as Kl, c as Zl, t as eo, k as to, U as lo, m as rl, j as Ee, a as ge, d as ie, a3 as ul, av as oo, X as ao, s as xt, h as no, a4 as so, ac as z, a5 as ke, a6 as $, as as il, f as ro, i as uo, a1 as Ht, v as io, r as co, y as vo, ag as cl, aw as ho } from "./lib-CVHM9FhP.js";
+import { f as fo, b as yo } from "./labelUtils-D6Y-n7cD.js";
+import { t as go, u as po } from "./useResponsive-DfdjqQps.js";
+import { u as bo, a as Gt } from "./useNestedProp-Ckf_2P_V.js";
+import { u as mo } from "./usePrinter-1NmjuP-i.js";
+import { u as Co, B as wo } from "./BaseScanner-BMpwQAfz.js";
+import { u as ko } from "./useSvgExport-ByUukOZt.js";
+import { u as xo } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as Ao } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as $o } from "./useChartAccessibility-9icAAmYg.js";
+import _o from "./img-6fNF_rG0.js";
+import { _ as To } from "./Shape-PzdCMGsP.js";
+import Lo from "./Title-NgeRXqRA.js";
+import So from "./Legend-DN5UJOBH.js";
+import { _ as Mo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function Po(tt) {
   const {
     FINAL_CONFIG: lt,
-    noGhostDonut: $t,
+    noGhostDonut: At,
     svg: Re,
     padding: ot,
-    labels_inline_fontSize: At,
+    labels_inline_fontSize: $t,
     minSize: at,
     findArcMidpoint: _t,
     calcMarkerOffsetX: Tt,
@@ -31,17 +31,17 @@ function So(tt) {
   } = tt;
   return { smallArcLayoutsClassic: g(() => {
     if (lt.value.type !== "classic") return {};
-    const Ve = {}, x = $t.value || [];
+    const Ve = {}, x = At.value || [];
     if (!x.length) return Ve;
-    const D = Re.value.width / 2, L = Re.value.height / 2, Fe = ot.value.top + 16, nt = Re.value.height - ot.value.bottom - 16, Ue = At.value, st = Ue / 3, ut = Ue * 1.5, le = 8, pe = 6, He = D - (at.value + pe), Ge = D + (at.value + pe), rt = !!lt.value.style.chart.layout.curvedMarkers;
+    const D = Re.value.width / 2, L = Re.value.height / 2, Fe = ot.value.top + 16, nt = Re.value.height - ot.value.bottom - 16, Ue = $t.value, st = Ue / 3, rt = Ue * 1.5, le = 8, pe = 6, He = D - (at.value + pe), Ge = D + (at.value + pe), ut = !!lt.value.style.chart.layout.curvedMarkers;
     function it({ midX: h, midY: y, bandX: p, bandY: c }) {
-      if (!rt)
+      if (!ut)
         return `M ${h} ${y} L ${h} ${c} L ${p} ${c}`;
       const S = p < D ? -1 : 1, V = p - h, M = c - y, ae = Math.sqrt(V * V + M * M) || 1, be = h - D, e = y - L, ne = Math.sqrt(be * be + e * e) || 1, W = be / ne, ce = e / ne, P = ne + 9;
-      function me({ x: Be, y: $e }) {
-        const K = Be - D, Z = $e - L, Ae = Math.sqrt(K * K + Z * Z) || 1;
-        if (Ae >= P) return { x: Be, y: $e };
-        const _e = P / Ae;
+      function me({ x: Be, y: Ae }) {
+        const K = Be - D, Z = Ae - L, $e = Math.sqrt(K * K + Z * Z) || 1;
+        if ($e >= P) return { x: Be, y: Ae };
+        const _e = P / $e;
         return {
           x: D + K * _e,
           y: L + Z * _e
@@ -50,14 +50,14 @@ function So(tt) {
       if (ae < 56) {
         const Be = V / ae;
         let K = -(M / ae), Z = Be;
-        const Ae = (h + p) * 0.5, _e = (y + c) * 0.5, gt = Ae + K, Qe = _e + Z, m = (gt - D) * (gt - D) + (Qe - L) * (Qe - L), n = Ae - K, ve = _e - Z;
+        const $e = (h + p) * 0.5, _e = (y + c) * 0.5, gt = $e + K, Qe = _e + Z, m = (gt - D) * (gt - D) + (Qe - L) * (Qe - L), n = $e - K, ve = _e - Z;
         (n - D) * (n - D) + (ve - L) * (ve - L) > m && (K = -K, Z = -Z);
         const R = 0.78, H = h + V * R, Dt = y + M * R, O = Math.max(0, Math.min(1, (ae - 18) / 44)), se = O * O * (3 - 2 * O);
-        let ue = 2.5 + se * 4, Je = 1 + se * 2.5;
-        ue *= 0.9;
+        let re = 2.5 + se * 4, Je = 1 + se * 2.5;
+        re *= 0.9;
         const Xe = {
-          x: H + K * ue + W * Je,
-          y: Dt + Z * ue + ce * Je
+          x: H + K * re + W * Je,
+          y: Dt + Z * re + ce * Je
         }, Ke = me(Xe);
         return `M ${h} ${y} Q ${Ke.x} ${Ke.y} ${p} ${c}`;
       }
@@ -76,7 +76,7 @@ function So(tt) {
     }
     function ct(h) {
       const y = String(h ?? "").split(/\n/g), p = Math.max(0, y.length - 1), c = Ue * 1.2, S = p * c;
-      return ut + S;
+      return rt + S;
     }
     function dt({ arc: h, index: y }) {
       const { x: p, y: c } = _t(h.path), S = Tt(h).x, V = Lt(h) - 3.5, M = ct(h.name);
@@ -180,30 +180,34 @@ function So(tt) {
     }), Ve;
   }) };
 }
-const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { labels: { percentage: { color: "#CCCCCC" }, name: { color: "#CCCCCC" }, hollow: { total: { color: "#CCCCCC", value: { color: "#CCCCCC" } }, average: { color: "#CCCCCC", value: { color: "#CCCCCC" } } } } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, vl = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { labels: { percentage: { color: "#424242" }, name: { color: "#424242" }, hollow: { total: { color: "#424242", value: { color: "#424242" } }, average: { color: "#424242", value: { color: "#424242" } } } } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, hl = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { labels: { percentage: { color: "#BDBDBD" }, name: { color: "#BDBDBD" }, hollow: { total: { color: "#BDBDBD", value: { color: "#BDBDBD" } }, average: { color: "#BDBDBD", value: { color: "#BDBDBD" } } } } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, fl = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { labels: { percentage: { color: "#61747E" }, name: { color: "#8A9892" }, hollow: { total: { color: "#8A9892", value: { color: "#61747E" } }, average: { color: "#8A9892", value: { color: "#61747E" } } } } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, yl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { labels: { percentage: { color: "#AACCAA" }, name: { color: "#99CC99" }, hollow: { total: { color: "#99CC99", value: { color: "#AACCAA" } }, average: { color: "#99CC99", value: { color: "#AACCAA" } } } } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, gl = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { labels: { percentage: { color: "#A0AC94" }, name: { color: "#8A9892" }, hollow: { total: { color: "#8A9892", value: { color: "#A0AC94" } }, average: { color: "#8A9892", value: { color: "#A0AC94" } } } } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, pl = {
+const dl = { userOptions: { show: !1 }, style: { chart: { useGradient: !1, legend: { show: !1 } } } }, vl = { userOptions: { show: !1 }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", useGradient: !1, layout: { labels: { percentage: { color: "#CCCCCC" }, name: { color: "#CCCCCC" }, hollow: { total: { color: "#CCCCCC", value: { color: "#CCCCCC" } }, average: { color: "#CCCCCC", value: { color: "#CCCCCC" } } } } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#3A3A3A" }, legend: { show: !1, backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, hl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { labels: { percentage: { color: "#CCCCCC" }, name: { color: "#CCCCCC" }, hollow: { total: { color: "#CCCCCC", value: { color: "#CCCCCC" } }, average: { color: "#CCCCCC", value: { color: "#CCCCCC" } } } } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, fl = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { labels: { percentage: { color: "#424242" }, name: { color: "#424242" }, hollow: { total: { color: "#424242", value: { color: "#424242" } }, average: { color: "#424242", value: { color: "#424242" } } } } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, yl = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { labels: { percentage: { color: "#BDBDBD" }, name: { color: "#BDBDBD" }, hollow: { total: { color: "#BDBDBD", value: { color: "#BDBDBD" } }, average: { color: "#BDBDBD", value: { color: "#BDBDBD" } } } } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, gl = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { labels: { percentage: { color: "#61747E" }, name: { color: "#8A9892" }, hollow: { total: { color: "#8A9892", value: { color: "#61747E" } }, average: { color: "#8A9892", value: { color: "#61747E" } } } } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, pl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { labels: { percentage: { color: "#AACCAA" }, name: { color: "#99CC99" }, hollow: { total: { color: "#99CC99", value: { color: "#AACCAA" } }, average: { color: "#99CC99", value: { color: "#AACCAA" } } } } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, bl = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { labels: { percentage: { color: "#A0AC94" }, name: { color: "#8A9892" }, hollow: { total: { color: "#8A9892", value: { color: "#A0AC94" } }, average: { color: "#8A9892", value: { color: "#A0AC94" } } } } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, ml = {
   default: {},
-  dark: dl,
-  celebration: vl,
-  celebrationNight: hl,
-  concrete: fl,
-  hack: yl,
-  zen: gl
-}, vn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  minimal: dl,
+  minimalDark: vl,
+  dark: hl,
+  celebration: fl,
+  celebrationNight: yl,
+  concrete: gl,
+  hack: pl,
+  zen: bl
+}, fn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  celebration: vl,
-  celebrationNight: hl,
-  concrete: fl,
-  dark: dl,
-  default: pl,
-  hack: yl,
-  zen: gl
-}, Symbol.toStringTag, { value: "Module" })), Mo = ["id"], Po = ["id"], Fo = ["xmlns", "viewBox"], Io = ["width", "height"], Do = { key: 1 }, Bo = ["id"], zo = ["stop-color"], Oo = ["offset", "stop-color"], Yo = ["offset", "stop-color"], Eo = ["stop-color"], Xo = { key: 2 }, No = ["id", "cx", "cy"], Ro = ["stop-color", "stop-opacity"], Vo = ["stop-color"], Uo = ["id"], Ho = ["id"], Go = ["id"], jo = ["flood-color"], Wo = ["id"], qo = ["flood-color"], Qo = ["d", "stroke", "filter"], Jo = ["d", "stroke", "filter"], Ko = ["cx", "cy", "r", "fill", "filter"], Zo = { key: 6 }, ea = ["stroke", "d"], ta = ["d", "fill", "stroke", "stroke-width", "filter"], la = { key: 0 }, oa = ["d", "fill", "stroke", "stroke-width", "filter"], aa = { key: 0 }, na = ["stroke", "d"], sa = { key: 0 }, ua = ["d", "stroke", "stroke-width", "filter"], ra = { key: 1 }, ia = ["d", "fill", "stroke", "stroke-width", "filter"], ca = ["d", "fill", "stroke", "stroke-width", "filter"], da = { key: 1 }, va = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ha = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], fa = { key: 0 }, ya = ["d", "fill", "stroke", "stroke-width"], ga = ["cx", "cy", "r", "stroke"], pa = ["cx", "cy", "r", "fill"], ba = ["cx", "cy", "r"], ma = { key: 0 }, wa = ["d", "stroke", "fill", "onMouseenter", "onMouseleave", "onClick"], ka = { key: 1 }, Ca = ["cx", "cy", "r"], xa = ["x", "y", "fill", "font-size"], $a = ["x", "y", "fill", "font-size"], Aa = ["x", "y", "fill", "font-size"], _a = ["x", "y", "fill", "font-size"], Ta = ["filter", "opacity"], La = { key: 0 }, Sa = ["x", "y"], Ma = { key: 1 }, Pa = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], Fa = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Ia = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], Da = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Ba = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], za = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Oa = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], Ya = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Ea = { key: 2 }, Xa = ["x", "y", "width"], Na = ["x", "y", "width"], Ra = {
+  celebration: fl,
+  celebrationNight: yl,
+  concrete: gl,
+  dark: hl,
+  default: ml,
+  hack: pl,
+  minimal: dl,
+  minimalDark: vl,
+  zen: bl
+}, Symbol.toStringTag, { value: "Module" })), Fo = ["id"], Io = ["id"], Do = ["xmlns", "viewBox"], Bo = ["width", "height"], zo = { key: 1 }, Oo = ["id"], Yo = ["stop-color"], Eo = ["offset", "stop-color"], Xo = ["offset", "stop-color"], No = ["stop-color"], Ro = { key: 2 }, Vo = ["id", "cx", "cy"], Uo = ["stop-color", "stop-opacity"], Ho = ["stop-color"], Go = ["id"], jo = ["id"], Wo = ["id"], qo = ["flood-color"], Qo = ["id"], Jo = ["flood-color"], Ko = ["d", "stroke", "filter"], Zo = ["d", "stroke", "filter"], ea = ["cx", "cy", "r", "fill", "filter"], ta = { key: 6 }, la = ["stroke", "d"], oa = ["d", "fill", "stroke", "stroke-width", "filter"], aa = { key: 0 }, na = ["d", "fill", "stroke", "stroke-width", "filter"], sa = { key: 0 }, ra = ["stroke", "d"], ua = { key: 0 }, ia = ["d", "stroke", "stroke-width", "filter"], ca = { key: 1 }, da = ["d", "fill", "stroke", "stroke-width", "filter"], va = ["d", "fill", "stroke", "stroke-width", "filter"], ha = { key: 1 }, fa = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ya = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ga = { key: 0 }, pa = ["d", "fill", "stroke", "stroke-width"], ba = ["cx", "cy", "r", "stroke"], ma = ["cx", "cy", "r", "fill"], Ca = ["cx", "cy", "r"], wa = { key: 0 }, ka = ["d", "stroke", "fill", "onMouseenter", "onMouseleave", "onClick"], xa = { key: 1 }, Aa = ["cx", "cy", "r"], $a = ["x", "y", "fill", "font-size"], _a = ["x", "y", "fill", "font-size"], Ta = ["x", "y", "fill", "font-size"], La = ["x", "y", "fill", "font-size"], Sa = ["filter", "opacity"], Ma = { key: 0 }, Pa = ["x", "y"], Fa = { key: 1 }, Ia = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], Da = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Ba = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], za = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Oa = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], Ya = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Ea = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], Xa = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Na = { key: 2 }, Ra = ["x", "y", "width"], Va = ["x", "y", "width"], Ua = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Va = ["id"], Ua = ["onClick"], Ha = {
+}, Ha = ["id"], Ga = ["onClick"], ja = {
   key: 7,
   class: "vue-ui-donut-hollow"
-}, Ga = ["innerHTML"], ja = {
+}, Wa = ["innerHTML"], qa = {
   __name: "vue-ui-donut",
   props: {
     config: {
@@ -220,15 +224,15 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     }
   },
   emits: ["selectLegend", "selectDatapoint"],
-  setup(tt, { expose: lt, emit: $t }) {
-    const Re = Se(() => import("./Tooltip-DpfUZbt7.js")), ot = Se(() => import("./BaseIcon-DtXe9QC_.js")), At = Se(() => import("./vue-ui-accordion-CDvNAvXX.js")), at = Se(() => import("./DataTable-BriHstj2.js")), _t = Se(() => import("./PenAndPaper-DBbQVgYt.js")), Tt = Se(() => import("./UserOptions-CEsHe7Td.js")), Lt = Se(() => import("./PackageVersion-DS0AcLc9.js")), St = Se(() => import("./BaseDraggableDialog-BHlNyA0A.js")), { vue_ui_donut: Mt } = go(), { isThemeValid: Pt, warnInvalidTheme: jt } = ko(), Ve = Hl(), x = tt, D = g({
+  setup(tt, { expose: lt, emit: At }) {
+    const Re = Se(() => import("./Tooltip-B6qvABDL.js")), ot = Se(() => import("./BaseIcon-4uOct8re.js")), $t = Se(() => import("./vue-ui-accordion-DFKaB_05.js")), at = Se(() => import("./DataTable-DyoDzNNY.js")), _t = Se(() => import("./PenAndPaper-LTuSTmWE.js")), Tt = Se(() => import("./UserOptions-CX7Xsusk.js")), Lt = Se(() => import("./PackageVersion-D6MO5wwI.js")), St = Se(() => import("./BaseDraggableDialog-BQYfVNu8.js")), { vue_ui_donut: Mt } = bo(), { isThemeValid: Pt, warnInvalidTheme: jt } = xo(), Ve = jl(), x = tt, D = g({
       get() {
         return !!x.dataset && x.dataset.length;
       },
       set(l) {
         return l;
       }
-    }), L = Me(null), Fe = k(null), nt = k(null), Ue = k(null), st = Me(null), ut = Me(null), le = Me(null), pe = Me(null), He = Me(null), Ge = Me(null), rt = k(0), it = k(0), ct = k(0), dt = k(!1), Ie = k(null), je = k(null), xe = g({
+    }), L = Me(null), Fe = w(null), nt = w(null), Ue = w(null), st = Me(null), rt = Me(null), le = Me(null), pe = Me(null), He = Me(null), Ge = Me(null), ut = w(0), it = w(0), ct = w(0), dt = w(!1), Ie = w(null), je = w(null), xe = g({
       get: () => e.value.style.chart.layout.labels.percentage.fontSize,
       set: (l) => l
     }), N = g({
@@ -244,7 +248,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         We = !1;
         const l = e.value, a = Fe.value, t = de.value;
         if (!l.autoSize || !a || !t) return;
-        const [o, r, d, $] = t.getAttribute("viewBox").split(" ").map(Number), T = { x: o, y: r, width: d, height: $ }, E = [
+        const [o, u, d, A] = t.getAttribute("viewBox").split(" ").map(Number), T = { x: o, y: u, width: d, height: A }, E = [
           {
             selector: ".vue-data-ui-datalabel-value",
             baseSize: l.style.chart.layout.labels.percentage.fontSize,
@@ -264,17 +268,17 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             sizeRef: oe
           }
         ];
-        E.map((G) => a.querySelectorAll(G.selector).length).reduce((G, Ye) => G + Ye, 0) !== 0 && E.forEach(({ selector: G, baseSize: Ye, minSize: Nl, sizeRef: Rl }) => {
-          a.querySelectorAll(G).forEach((Vl) => {
-            const Ul = no({
-              el: Vl,
+        E.map((G) => a.querySelectorAll(G.selector).length).reduce((G, Ye) => G + Ye, 0) !== 0 && E.forEach(({ selector: G, baseSize: Ye, minSize: Vl, sizeRef: Ul }) => {
+          a.querySelectorAll(G).forEach((Hl) => {
+            const Gl = ro({
+              el: Hl,
               bounds: T,
               currentFontSize: Ye,
-              minFontSize: Nl,
+              minFontSize: Vl,
               attempts: 200,
               padding: 1
             });
-            Rl.value = Ul;
+            Ul.value = Gl;
           });
         });
       }));
@@ -305,7 +309,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         type: "dataset",
         debug: y.value
       }), D.value = !1, ce.value = !0) : (x.dataset.forEach((l, a) => {
-        Ql({
+        Kl({
           datasetObject: l,
           requiredAttributes: ["name", "values"]
         }).forEach((t) => {
@@ -326,14 +330,14 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           debug: y.value
         });
       })), sl(x.dataset) || (ce.value = e.value.loading), e.value.responsive) {
-        const l = fo(() => {
-          const { width: a, height: t } = yo({
+        const l = go(() => {
+          const { width: a, height: t } = po({
             chart: L.value,
             title: e.value.style.chart.title.text ? st.value : null,
-            legend: e.value.style.chart.legend.show ? ut.value : null,
+            legend: e.value.style.chart.legend.show ? rt.value : null,
             source: He.value,
             noTitle: Ge.value,
-            padding: e.value.autoSize ? void 0 : $e.value
+            padding: e.value.autoSize ? void 0 : Ae.value
           });
           requestAnimationFrame(() => {
             n.value.width = a, n.value.height = t, B();
@@ -342,7 +346,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         le.value && (pe.value && le.value.unobserve(pe.value), le.value.disconnect()), le.value = new ResizeObserver(l), pe.value = L.value.parentNode, le.value.observe(pe.value);
       }
     }
-    const c = k(Jl()), S = k(!1), V = k(""), M = k(null), ae = k(0);
+    const c = w(Zl()), S = w(!1), V = w(""), M = w(null), ae = w(0);
     function be() {
       const l = Gt({
         userConfig: x.config,
@@ -356,7 +360,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         jt(l), a = l;
       else {
         const o = Gt({
-          userConfig: pl[t] || x.config,
+          userConfig: ml[t] || x.config,
           defaultConfig: l
         });
         a = {
@@ -364,13 +368,13 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             userConfig: x.config,
             defaultConfig: o
           }),
-          customPalette: l.customPalette.length ? l.customPalette : so[t] || Ee
+          customPalette: l.customPalette.length ? l.customPalette : uo[t] || Ee
         };
       }
       return x.config && Ht(x.config, "events.datapointEnter") ? a.events.datapointEnter = x.config.events.datapointEnter : a.events.datapointEnter = null, x.config && Ht(x.config, "events.datapointLeave") ? a.events.datapointLeave = x.config.events.datapointLeave : a.events.datapointLeave = null, x.config && Ht(x.config, "events.datapointClick") ? a.events.datapointClick = x.config.events.datapointClick : a.events.datapointClick = null, a;
     }
-    const e = k(be()), { loading: ne, FINAL_DATASET: W, manualLoading: ce, skeletonDataset: vt } = bo({
-      ...Gl(x),
+    const e = w(be()), { loading: ne, FINAL_DATASET: W, manualLoading: ce, skeletonDataset: vt } = Co({
+      ...Wl(x),
       FINAL_CONFIG: e,
       prepareConfig: be,
       skeletonDataset: [
@@ -390,7 +394,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           color: "#CACACA"
         }
       ],
-      skeletonConfig: Kl({
+      skeletonConfig: eo({
         defaultConfig: e.value,
         userConfig: {
           useCssAnimation: !1,
@@ -427,17 +431,17 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         }
       })
-    }), P = k(!0), me = k(0), Ft = k(!1);
+    }), P = w(!0), me = w(0), Ft = w(!1);
     let J = null;
     function De(l = 1e3) {
       return new Promise((a) => {
         const t = performance.now();
-        function o(r) {
-          const d = r - t, $ = Math.min(
+        function o(u) {
+          const d = u - t, A = Math.min(
             d / l,
             1
-          ), T = cl($);
-          me.value = T, $ < 1 ? J = requestAnimationFrame(o) : (me.value = 1, J = null, a());
+          ), T = cl(A);
+          me.value = T, A < 1 ? J = requestAnimationFrame(o) : (me.value = 1, J = null, a());
         }
         J !== null && cancelAnimationFrame(J), me.value = 0, J = requestAnimationFrame(o);
       });
@@ -458,7 +462,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       },
       { immediate: !0 }
     );
-    const { userOptionsVisible: qe, setUserOptionsVisibility: ht, keepUserOptionState: ft } = Co({ config: e.value }), { svgRef: de } = xo({ config: e.value.style.chart.title });
+    const { userOptionsVisible: qe, setUserOptionsVisibility: ht, keepUserOptionState: ft } = Ao({ config: e.value }), { svgRef: de } = $o({ config: e.value.style.chart.title });
     function yt() {
       ht(!0);
     }
@@ -466,9 +470,9 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       ht(!1);
     }
     Ne(() => x.config, (l) => {
-      ne.value || (e.value = be()), qe.value = !e.value.userOptions.showOnChartHover, p(), rt.value += 1, it.value += 1, ct.value += 1, m.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, m.value.showTable = e.value.table.show, m.value.showTooltip = e.value.style.chart.tooltip.show, n.value.height = e.value.style.chart.height, n.value.width = e.value.style.chart.width;
+      ne.value || (e.value = be()), qe.value = !e.value.userOptions.showOnChartHover, p(), ut.value += 1, it.value += 1, ct.value += 1, m.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, m.value.showTable = e.value.table.show, m.value.showTooltip = e.value.style.chart.tooltip.show, n.value.height = e.value.style.chart.height, n.value.width = e.value.style.chart.width;
     }, { deep: !0 });
-    const $e = g(() => {
+    const Ae = g(() => {
       const { top: l, right: a, bottom: t, left: o } = e.value.style.chart.padding;
       return {
         css: `padding:${l}px ${a}px ${t}px ${o}px`,
@@ -477,11 +481,11 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         bottom: t,
         left: o
       };
-    }), { isPrinting: K, isImaging: Z, generatePdf: Ae, generateImage: _e } = po({
+    }), { isPrinting: K, isImaging: Z, generatePdf: $e, generateImage: _e } = mo({
       elementId: `donut__${c.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-donut",
       options: e.value.userOptions.print
-    }), gt = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), Qe = g(() => Zl(e.value.customPalette)), m = k({
+    }), gt = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), Qe = g(() => to(e.value.customPalette)), m = w({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
@@ -497,7 +501,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         showTooltip: e.value.style.chart.tooltip.show
       };
     }, { immediate: !0 });
-    const n = k({
+    const n = w({
       height: e.value.style.chart.height,
       width: e.value.style.chart.width
     }), ve = g(() => {
@@ -505,13 +509,13 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         return F.value;
       const l = e.value.style.chart.layout.donut.strokeWidth / 512, a = Math.min(n.value.width, n.value.height) * l, t = a > F.value ? F.value : a;
       return Math.max(t, 12 * (1 + l));
-    }), It = $t, R = g(() => W.value.sort((l, a) => {
-      const t = Array.isArray(l.values) ? l.values.reduce((r, d) => r + d, 0) : l.value ?? 0, o = Array.isArray(a.values) ? a.values.reduce((r, d) => r + d, 0) : a.value ?? 0;
+    }), It = At, R = g(() => W.value.sort((l, a) => {
+      const t = Array.isArray(l.values) ? l.values.reduce((u, d) => u + d, 0) : l.value ?? 0, o = Array.isArray(a.values) ? a.values.reduce((u, d) => u + d, 0) : a.value ?? 0;
       return l.ghost && !a.ghost ? 1 : a.ghost && !l.ghost ? -1 : o - t;
     }).map((l, a) => ({
       name: l.name,
-      color: ul(l.color) || Qe.value[a] || Ee[a] || Ee[a % Ee.length],
-      value: eo(l.values.reduce((t, o) => t + o, 0)),
+      color: rl(l.color) || Qe.value[a] || Ee[a] || Ee[a % Ee.length],
+      value: lo(l.values.reduce((t, o) => t + o, 0)),
       absoluteValues: l.values,
       comment: l.comment || "",
       patternIndex: a,
@@ -533,27 +537,27 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         value: l.value
       }));
     }
-    const O = k([]), se = k(!1), ue = k(null);
-    function Je({ from: l, to: a, duration: t, onUpdate: o, onDone: r, easing: d = cl }) {
-      const $ = performance.now();
+    const O = w([]), se = w(!1), re = w(null);
+    function Je({ from: l, to: a, duration: t, onUpdate: o, onDone: u, easing: d = cl }) {
+      const A = performance.now();
       function T(E) {
-        const X = Math.min((E - $) / t, 1), G = d(X), Ye = l + (a - l) * G;
-        o(Ye, X), X < 1 ? requestAnimationFrame(T) : (o(a, 1), r && r());
+        const X = Math.min((E - A) / t, 1), G = d(X), Ye = l + (a - l) * G;
+        o(Ye, X), X < 1 ? requestAnimationFrame(T) : (o(a, 1), u && u());
       }
       requestAnimationFrame(T);
     }
     function Xe(l) {
-      const a = R.value.find((r, d) => d === l);
-      let o = H.value.find((r, d) => d === l).value;
+      const a = R.value.find((u, d) => d === l);
+      let o = H.value.find((u, d) => d === l).value;
       if (O.value.includes(l)) {
         let d = function() {
           H.value = H.value.map(
-            (T, E) => l === E ? { ...T, value: r } : T
+            (T, E) => l === E ? { ...T, value: u } : T
           );
-        }, $ = function() {
-          se.value = !0, ue.value = l, Je({
+        }, A = function() {
+          se.value = !0, re.value = l, Je({
             from: o,
-            to: r,
+            to: u,
             duration: e.value.serieToggleAnimation.durationMs,
             onUpdate: (T, E) => {
               H.value = H.value.map(
@@ -561,39 +565,39 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               ), requestAnimationFrame(B);
             },
             onDone: () => {
-              d(), se.value = !1, ue.value = null;
+              d(), se.value = !1, re.value = null;
             }
           });
         };
         O.value = O.value.filter((T) => T !== l);
-        const r = a.value;
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? $() : (d(), requestAnimationFrame(B));
+        const u = a.value;
+        e.value.serieToggleAnimation.show && e.value.type === "classic" ? A() : (d(), requestAnimationFrame(B));
       } else if (O.value.length < R.value.length - 1) {
-        let r = function() {
+        let u = function() {
           O.value.push(l), H.value = H.value.map(
-            ($, T) => l === T ? { ...$, value: 0 } : $
+            (A, T) => l === T ? { ...A, value: 0 } : A
           );
         }, d = function() {
-          se.value = !0, ue.value = l, Je({
+          se.value = !0, re.value = l, Je({
             from: o,
             to: 0,
             duration: e.value.serieToggleAnimation.durationMs,
-            onUpdate: ($, T) => {
+            onUpdate: (A, T) => {
               H.value = H.value.map(
-                (E, X) => l === X ? { ...E, value: $ } : E
+                (E, X) => l === X ? { ...E, value: A } : E
               ), requestAnimationFrame(B);
             },
             onDone: () => {
-              r(), requestAnimationFrame(B), se.value = !1, ue.value = null;
+              u(), requestAnimationFrame(B), se.value = !1, re.value = null;
             }
           });
         };
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? d() : r();
+        e.value.serieToggleAnimation.show && e.value.type === "classic" ? d() : u();
       }
-      It("selectLegend", we.value.map((r) => ({
-        name: r.name,
-        color: r.color,
-        value: r.value
+      It("selectLegend", Ce.value.map((u) => ({
+        name: u.name,
+        color: u.color,
+        value: u.value
       })));
     }
     function Ke(l) {
@@ -602,27 +606,27 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       const a = R.value.find((t) => t.name === l);
       return a || (e.value.debug && console.warn(`VueUiDonut - Series name not found "${l}"`), null);
     }
-    function bl(l) {
+    function Cl(l) {
       const a = Ke(l);
       a !== null && O.value.includes(a.seriesIndex) && Xe(a.seriesIndex);
     }
-    function ml(l) {
+    function wl(l) {
       const a = Ke(l);
       a !== null && (O.value.includes(a.seriesIndex) || Xe(a.seriesIndex));
     }
-    const wl = g(
+    const kl = g(
       () => W.value.reduce(
         (l, a) => l + a.values.reduce((t, o) => t + o, 0),
         0
       )
-    ), we = g(() => {
+    ), Ce = g(() => {
       if (P.value && !ne.value) {
         const l = me.value, a = R.value.map((o) => ({
           ...o,
           value: o.value * l,
           color: o.color,
           ghost: !1
-        })), t = wl.value * (1 - l);
+        })), t = kl.value * (1 - l);
         return t > 0 && a.push({
           name: "__ghost__",
           value: t,
@@ -641,10 +645,10 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           seriesIndex: a
         })).filter((l, a) => !O.value.includes(a));
     }), Bt = g(() => W.value.map((l, a) => {
-      const t = (l.values || []).reduce((r, d) => r + d, 0), o = t / W.value.map((r) => (r.values || []).reduce((d, $) => d + $, 0)).reduce((r, d) => r + d, 0);
+      const t = (l.values || []).reduce((u, d) => u + d, 0), o = t / W.value.map((u) => (u.values || []).reduce((d, A) => d + A, 0)).reduce((u, d) => u + d, 0);
       return {
         name: l.name,
-        color: ul(l.color) || Qe.value[a] || Ee[a] || Ee[a % Ee.length],
+        color: rl(l.color) || Qe.value[a] || Ee[a] || Ee[a % Ee.length],
         value: t,
         shape: "circle",
         patternIndex: a,
@@ -660,9 +664,9 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         v: qt(l),
         s: "%",
         r: e.value.style.chart.legend.roundingPercentage
-      })), r = Et({
+      })), u = Et({
         val: t,
-        percentage: O.value.includes(a) ? `${Fl(l.proportion * 100)}%` : o,
+        percentage: O.value.includes(a) ? `${Dl(l.proportion * 100)}%` : o,
         showVal: e.value.style.chart.legend.showValue,
         showPercentage: e.value.style.chart.legend.showPercentage,
         config: e.value.style.chart.legend
@@ -672,9 +676,9 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         opacity: O.value.includes(a) ? 0.5 : 1,
         segregate: () => !se.value && Xe(a),
         isSegregated: O.value.includes(a),
-        display: `${l.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${r}`
+        display: `${l.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${u}`
       };
-    })), kl = g(() => ({
+    })), xl = g(() => ({
       cy: "donut-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
@@ -684,7 +688,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     })), F = g(() => {
       const l = e.value.style.chart.layout.donut.radiusRatio, a = Math.max(0.1, Math.min(0.50001, l)), t = Math.min(n.value.width * a, n.value.height * a);
       return Math.max(12, t);
-    }), U = g(() => rl({ series: we.value }, n.value.width / 2, n.value.height / 2, F.value, F.value, 1.99999, 2, 1, 360, 105.25, ve.value)), Cl = g(() => Math.abs(we.value.map((l) => l.value).reduce((l, a) => l + a, 0)) > 0), xl = g(() => rl({
+    }), U = g(() => ul({ series: Ce.value }, n.value.width / 2, n.value.height / 2, F.value, F.value, 1.99999, 2, 1, 360, 105.25, ve.value)), Al = g(() => Math.abs(Ce.value.map((l) => l.value).reduce((l, a) => l + a, 0)) > 0), $l = g(() => ul({
       series: [
         {
           value: 1,
@@ -696,9 +700,9 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           absoluteValues: [1]
         }
       ]
-    }, n.value.width / 2, n.value.height / 2, F.value, F.value, 1.99999, 2, 1, 360, 105.25, ve.value)), re = g(() => U.value.filter((l) => !l.ghost)), v = g(() => {
-      const l = Math.max(...we.value.map((t) => t.value)), a = we.value.map((t) => t.value / l);
-      return to({
+    }, n.value.width / 2, n.value.height / 2, F.value, F.value, 1.99999, 2, 1, 360, 105.25, ve.value)), ue = g(() => U.value.filter((l) => !l.ghost)), v = g(() => {
+      const l = Math.max(...Ce.value.map((t) => t.value)), a = Ce.value.map((t) => t.value / l);
+      return oo({
         series: a,
         center: {
           x: n.value.width / 2,
@@ -711,32 +715,32 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     function Te(l) {
       return l.x > n.value.width / 2 + 6 ? "start" : l.x < n.value.width / 2 - 6 ? "end" : "middle";
     }
-    function $l(l) {
+    function _l(l) {
       return l.middlePoint.y > n.value.height / 2 ? z({ initX: l.middlePoint.x, initY: l.middlePoint.y, offset: 100, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y : z({ initX: l.middlePoint.x, initY: l.middlePoint.y, offset: 0, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y - 100;
     }
     function q(l) {
       return l.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
     }
-    function Al(l, a) {
-      const t = e.value.style.chart.layout.labels.dataLabels.hideUnderValue, o = e.value.style.chart.layout.labels.dataLabels.smallArcClusterThreshold, d = (Tl.value[a] ?? l.proportion ?? 0) * 100;
+    function Tl(l, a) {
+      const t = e.value.style.chart.layout.labels.dataLabels.hideUnderValue, o = e.value.style.chart.layout.labels.dataLabels.smallArcClusterThreshold, d = (Sl.value[a] ?? l.proportion ?? 0) * 100;
       return d > t && d <= o;
     }
-    const { smallArcLayoutsClassic: Y } = So({
+    const { smallArcLayoutsClassic: Y } = Po({
       FINAL_CONFIG: e,
-      noGhostDonut: re,
+      noGhostDonut: ue,
       svg: n,
-      padding: $e,
+      padding: Ae,
       labels_inline_fontSize: oe,
       minSize: F,
-      findArcMidpoint: co,
-      calcMarkerOffsetX: A,
-      calcMarkerOffsetY: Ce,
-      animatingIndex: ue,
+      findArcMidpoint: ho,
+      calcMarkerOffsetX: $,
+      calcMarkerOffsetY: ke,
+      animatingIndex: re,
       segregated: O,
-      isSmallArc: Al
+      isSmallArc: Tl
     });
     function Wt(l, a) {
-      const t = l.value / _l(a);
+      const t = l.value / Ll(a);
       return isNaN(t) ? 0 : ge(
         e.value.style.chart.layout.labels.percentage.formatter,
         t * 100,
@@ -748,37 +752,37 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         { datapoint: l }
       );
     }
-    function _l(l) {
+    function Ll(l) {
       return [...l].map((a) => a.value).reduce((a, t) => a + t, 0);
     }
-    const Q = g(() => we.value.map((l) => l.value).reduce((l, a) => l + a, 0)), Tl = g(() => {
+    const Q = g(() => Ce.value.map((l) => l.value).reduce((l, a) => l + a, 0)), Sl = g(() => {
       const l = R.value.reduce((a, t) => a + t.value, 0);
       return l <= 0 ? [] : R.value.map((a) => a.value / l);
-    }), zt = g(() => Q.value / we.value.length);
+    }), zt = g(() => Q.value / Ce.value.length);
     function qt(l) {
       return se.value ? l.proportion * 100 : l.value / Q.value * 100;
     }
-    const Ot = k(null), Ze = k(!1);
+    const Ot = w(null), Ze = w(!1);
     function he({ datapoint: l, seriesIndex: a }) {
       e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: a }), S.value = !1, M.value = null;
     }
     function fe({ datapoint: l, relativeIndex: a, seriesIndex: t, show: o = !1 }) {
       e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: t }), Ot.value = { datapoint: l, seriesIndex: t, config: e.value, series: R.value }, S.value = o, M.value = a;
-      let r = "";
+      let u = "";
       const d = e.value.style.chart.tooltip.customFormat;
-      if (Ze.value = !1, io(d))
+      if (Ze.value = !1, vo(d))
         try {
-          const $ = d({
+          const A = d({
             seriesIndex: t,
             datapoint: l,
             series: R.value,
             config: e.value
           });
-          typeof $ == "string" && (V.value = $, Ze.value = !0);
+          typeof A == "string" && (V.value = A, Ze.value = !0);
         } catch {
           console.warn("Custom format cannot be applied."), Ze.value = !1;
         }
-      Ze.value || (r += `<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>`, r += `<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}"/>${Ve.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${c.value}_${t})"/>` : ""}</svg>`, r += `<b>${Et({
+      Ze.value || (u += `<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>`, u += `<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}"/>${Ve.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${c.value}_${t})"/>` : ""}</svg>`, u += `<b>${Et({
         showVal: e.value.style.chart.tooltip.showValue,
         showPercentage: e.value.style.chart.tooltip.showPercentage,
         val: `<span>${ge(
@@ -811,9 +815,9 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         ),
         config: e.value.style.chart.tooltip
-      })}</b></div>`, e.value.style.chart.comments.showInTooltip && l.comment && (r += `<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>`), V.value = `<div>${r}</div>`);
+      })}</b></div>`, e.value.style.chart.comments.showInTooltip && l.comment && (u += `<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>`), V.value = `<div>${u}</div>`);
     }
-    function Ll(l, a) {
+    function Ml(l, a) {
       const t = Y.value[a];
       if (t)
         return {
@@ -821,15 +825,15 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           x: t.labelX,
           y: t.labelY
         };
-      const o = A(l, !0, 12);
+      const o = $(l, !0, 12);
       return {
         textAnchor: o.anchor,
         x: o.x,
-        y: Ce(l)
+        y: ke(l)
       };
     }
-    function Sl(l, a, t) {
-      const { textAnchor: o, x: r } = Ll(l, a), d = bt(l), $ = `
+    function Pl(l, a, t) {
+      const { textAnchor: o, x: u } = Ml(l, a), d = bt(l), A = `
         <tspan
             class="vue-data-ui-datalabel-inline"
             fill="${e.value.style.chart.layout.labels.percentage.color}"
@@ -849,31 +853,31 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             ` : E += `
                 <tspan
                     class="${t ? "vue-data-ui-datalabel-inline" : "vue-data-ui-datalabel-name"}"
-                    x="${r}"
+                    x="${u}"
                     dy="${(t ? oe.value : N.value) * 1.2}"
                     fill="${e.value.style.chart.layout.labels.name.color}"
                     font-size="${t ? oe.value : N.value}px"
                     style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}"
                 >${X}</tspan>
             `;
-      }), o === "end" ? `${E}${$}` : `${$}${E}`;
+      }), o === "end" ? `${E}${A}` : `${A}${E}`;
     }
-    function Ml(l, a) {
-      const t = v.value[a].middlePoint, o = Te(t), r = z({
+    function Fl(l, a) {
+      const t = v.value[a].middlePoint, o = Te(t), u = z({
         initX: t.x,
         initY: t.y,
         offset: 42,
         centerX: n.value.width / 2,
         centerY: n.value.height / 2
-      }), d = r.x;
-      r.y;
-      const $ = bt(l), T = `
+      }), d = u.x;
+      u.y;
+      const A = bt(l), T = `
         <tspan
             class="vue-data-ui-datalabel-value"
             fill="${e.value.style.chart.layout.labels.percentage.color}"
             font-size="${xe.value}px"
             style="font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : "normal"}"
-        >${$}</tspan>
+        >${A}</tspan>
     `, E = String(l.name ?? "").split(/\n/g);
       let X = "";
       return E.forEach((G, Ye) => {
@@ -899,25 +903,25 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     function ze(l) {
       return e.value.useBlurOnHover && ![null, void 0].includes(M.value) && M.value !== l ? `url(#blur_${c.value})` : "";
     }
-    function Pl(l) {
-      if (!se.value || ue.value === null || l.seriesIndex !== ue.value)
+    function Il(l) {
+      if (!se.value || re.value === null || l.seriesIndex !== re.value)
         return 1;
-      const a = (l.proportion ?? 0) * 100, t = e.value.style.chart.layout.labels.dataLabels.hideUnderValue, r = e.value.style.chart.layout.labels.dataLabels.smallArcClusterThreshold + 2, d = t;
-      return a >= r ? 1 : a <= d ? 0 : (a - d) / (r - d);
+      const a = (l.proportion ?? 0) * 100, t = e.value.style.chart.layout.labels.dataLabels.hideUnderValue, u = e.value.style.chart.layout.labels.dataLabels.smallArcClusterThreshold + 2, d = t;
+      return a >= u ? 1 : a <= d ? 0 : (a - d) / (u - d);
     }
     const Le = g(() => {
-      const l = we.value.map((t) => ({
+      const l = Ce.value.map((t) => ({
         name: t.name,
         color: t.color
-      })), a = we.value.map((t) => t.value);
+      })), a = Ce.value.map((t) => t.value);
       return { head: l, body: a };
     });
     function Yt(l = null) {
-      ql(() => {
-        const a = Le.value.head.map((r, d) => [[
-          r.name
-        ], [Le.value.body[d]], [isNaN(Le.value.body[d] / Q.value) ? "-" : Le.value.body[d] / Q.value * 100]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = uo(t);
-        l ? l(o) : ro({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-donut" });
+      Jl(() => {
+        const a = Le.value.head.map((u, d) => [[
+          u.name
+        ], [Le.value.body[d]], [isNaN(Le.value.body[d] / Q.value) ? "-" : Le.value.body[d] / Q.value * 100]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = io(t);
+        l ? l(o) : co({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-donut" });
       });
     }
     const pt = g(() => {
@@ -925,10 +929,10 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
         ie({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: Q.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
         "100%"
-      ], a = Le.value.head.map((r, d) => [
+      ], a = Le.value.head.map((u, d) => [
         {
-          color: r.color,
-          name: r.name || "-"
+          color: u.color,
+          name: u.name || "-"
         },
         Le.value.body[d],
         isNaN(Le.value.body[d] / Q.value) ? "-" : (Le.value.body[d] / Q.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
@@ -955,13 +959,13 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         body: a,
         config: t
       };
-    }), Oe = k(!1);
+    }), Oe = w(!1);
     function Qt(l) {
       Oe.value = l, ae.value += 1;
     }
     const Jt = g(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
-    function Fl(l) {
-      return vo({
+    function Dl(l) {
+      return fo({
         num: l,
         rounding: e.value.style.chart.legend.roundingPercentage
       });
@@ -971,10 +975,10 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       percentage: a,
       showVal: t,
       showPercentage: o,
-      config: r
+      config: u
     }) {
-      return ho({
-        config: r,
+      return yo({
+        config: u,
         val: l,
         percentage: a,
         showVal: t,
@@ -994,7 +998,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }),
           { datapoint: l }
         ),
-        percentage: Wt(l, re.value),
+        percentage: Wt(l, ue.value),
         showVal: e.value.style.chart.layout.labels.value.show,
         showPercentage: !0,
         config: e.value.style.chart.layout.labels.dataLabels
@@ -1012,15 +1016,15 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     function el() {
       m.value.showTooltip = !m.value.showTooltip;
     }
-    const mt = k(!1);
+    const mt = w(!1);
     function Xt() {
       mt.value = !mt.value;
     }
-    async function Il({ scale: l = 2 } = {}) {
+    async function Bl({ scale: l = 2 } = {}) {
       if (!L.value) return;
-      const { width: a, height: t } = L.value.getBoundingClientRect(), o = a / t, { imageUri: r, base64: d } = await $o({ domElement: L.value, base64: !0, img: !0, scale: l });
+      const { width: a, height: t } = L.value.getBoundingClientRect(), o = a / t, { imageUri: u, base64: d } = await _o({ domElement: L.value, base64: !0, img: !0, scale: l });
       return {
-        imageUri: r,
+        imageUri: u,
         base64: d,
         title: e.value.style.chart.title.text,
         width: a,
@@ -1028,7 +1032,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         aspectRatio: o
       };
     }
-    function Dl() {
+    function zl() {
       if (!Fe.value) return;
       const { x: l, y: a, width: t, height: o } = Fe.value.getBBox();
       de.value && de.value.setAttribute("viewBox", `${l} ${a} ${t + Math.min(0, l)} ${o + Math.min(0, a)}`);
@@ -1036,7 +1040,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     const et = g(() => {
       const l = e.value.table.useDialog && !e.value.table.show, a = m.value.showTable;
       return {
-        component: l ? St : At,
+        component: l ? St : $t,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
         props: l ? {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -1069,39 +1073,39 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     function tl() {
       m.value.showTable = !1, je.value && je.value.setTableIconState(!1);
     }
-    const Bl = g(() => Bt.value.map((l) => ({
+    const Ol = g(() => Bt.value.map((l) => ({
       ...l,
       name: l.display
-    }))), zl = g(() => e.value.style.chart.backgroundColor), Ol = g(() => e.value.style.chart.legend), Yl = g(() => e.value.style.chart.title), { exportSvg: El, getSvg: Xl } = wo({
+    }))), Yl = g(() => e.value.style.chart.backgroundColor), El = g(() => e.value.style.chart.legend), Xl = g(() => e.value.style.chart.title), { exportSvg: Nl, getSvg: Rl } = ko({
       svg: de,
-      title: Yl,
-      legend: Ol,
-      legendItems: Bl,
-      backgroundColor: zl
+      title: Xl,
+      legend: El,
+      legendItems: Ol,
+      backgroundColor: Yl
     });
     async function ll({ isCb: l }) {
       if (l) {
-        const { blob: a, url: t, text: o, dataUrl: r } = await Xl();
-        e.value.userOptions.callbacks.svg({ blob: a, url: t, text: o, dataUrl: r });
+        const { blob: a, url: t, text: o, dataUrl: u } = await Rl();
+        e.value.userOptions.callbacks.svg({ blob: a, url: t, text: o, dataUrl: u });
       } else
-        El();
+        Nl();
     }
     return lt({
-      autoSize: Dl,
+      autoSize: zl,
       getData: Dt,
-      getImage: Il,
-      generatePdf: Ae,
+      getImage: Bl,
+      generatePdf: $e,
       generateCsv: Yt,
       generateImage: _e,
       generateSvg: ll,
-      hideSeries: ml,
-      showSeries: bl,
+      hideSeries: wl,
+      showSeries: Cl,
       toggleTable: Kt,
       toggleLabels: Zt,
       toggleTooltip: el,
       toggleAnnotator: Xt,
       toggleFullscreen: Qt
-    }), (l, a) => (u(), i("div", {
+    }), (l, a) => (r(), i("div", {
       ref_key: "donutChart",
       ref: L,
       class: Nt(`vue-data-ui-component vue-ui-donut ${Oe.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
@@ -1110,7 +1114,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       onMouseenter: yt,
       onMouseleave: Be
     }, [
-      e.value.userOptions.buttons.annotator && s(de) ? (u(), Pe(s(_t), {
+      e.value.userOptions.buttons.annotator && s(de) ? (r(), Pe(s(_t), {
         key: 0,
         color: e.value.style.chart.color,
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -1118,42 +1122,42 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         svgRef: s(de),
         onClose: Xt
       }, {
-        "annotator-action-close": C(() => [
-          w(l.$slots, "annotator-action-close", {}, void 0, !0)
+        "annotator-action-close": k(() => [
+          C(l.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
-        "annotator-action-color": C(({ color: t }) => [
-          w(l.$slots, "annotator-action-color", ee(te({ color: t })), void 0, !0)
+        "annotator-action-color": k(({ color: t }) => [
+          C(l.$slots, "annotator-action-color", ee(te({ color: t })), void 0, !0)
         ]),
-        "annotator-action-draw": C(({ mode: t }) => [
-          w(l.$slots, "annotator-action-draw", ee(te({ mode: t })), void 0, !0)
+        "annotator-action-draw": k(({ mode: t }) => [
+          C(l.$slots, "annotator-action-draw", ee(te({ mode: t })), void 0, !0)
         ]),
-        "annotator-action-undo": C(({ disabled: t }) => [
-          w(l.$slots, "annotator-action-undo", ee(te({ disabled: t })), void 0, !0)
+        "annotator-action-undo": k(({ disabled: t }) => [
+          C(l.$slots, "annotator-action-undo", ee(te({ disabled: t })), void 0, !0)
         ]),
-        "annotator-action-redo": C(({ disabled: t }) => [
-          w(l.$slots, "annotator-action-redo", ee(te({ disabled: t })), void 0, !0)
+        "annotator-action-redo": k(({ disabled: t }) => [
+          C(l.$slots, "annotator-action-redo", ee(te({ disabled: t })), void 0, !0)
         ]),
-        "annotator-action-delete": C(({ disabled: t }) => [
-          w(l.$slots, "annotator-action-delete", ee(te({ disabled: t })), void 0, !0)
+        "annotator-action-delete": k(({ disabled: t }) => [
+          C(l.$slots, "annotator-action-delete", ee(te({ disabled: t })), void 0, !0)
         ]),
         _: 3
       }, 8, ["color", "backgroundColor", "active", "svgRef"])) : f("", !0),
-      w(l.$slots, "userConfig", {}, void 0, !0),
-      gt.value ? (u(), i("div", {
+      C(l.$slots, "userConfig", {}, void 0, !0),
+      gt.value ? (r(), i("div", {
         key: 1,
         ref_key: "noTitle",
         ref: Ge,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : f("", !0),
-      e.value.style.chart.title.text ? (u(), i("div", {
+      e.value.style.chart.title.text ? (r(), i("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: st,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (u(), Pe(_o, {
-          key: `title_${rt.value}`,
+        (r(), Pe(Lo, {
+          key: `title_${ut.value}`,
           config: {
             title: {
               cy: "donut-div-title",
@@ -1168,8 +1172,8 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       ], 512)) : f("", !0),
       b("div", {
         id: `legend-top-${c.value}`
-      }, null, 8, Po),
-      e.value.userOptions.show && D.value && (s(ft) || s(qe)) ? (u(), Pe(s(Tt), {
+      }, null, 8, Io),
+      e.value.userOptions.show && D.value && (s(ft) || s(qe)) ? (r(), Pe(s(Tt), {
         ref_key: "userOptionsRef",
         ref: je,
         key: `user_option_${ae.value}`,
@@ -1197,7 +1201,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
         onToggleFullscreen: Qt,
-        onGeneratePdf: s(Ae),
+        onGeneratePdf: s($e),
         onGenerateCsv: Yt,
         onGenerateImage: s(_e),
         onGenerateSvg: ll,
@@ -1209,90 +1213,90 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       }, Rt({ _: 2 }, [
         l.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: C(({ isOpen: t, color: o }) => [
-            w(l.$slots, "menuIcon", ee(te({ isOpen: t, color: o })), void 0, !0)
+          fn: k(({ isOpen: t, color: o }) => [
+            C(l.$slots, "menuIcon", ee(te({ isOpen: t, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         l.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: C(() => [
-            w(l.$slots, "optionTooltip", {}, void 0, !0)
+          fn: k(() => [
+            C(l.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         l.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: C(() => [
-            w(l.$slots, "optionPdf", {}, void 0, !0)
+          fn: k(() => [
+            C(l.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         l.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: C(() => [
-            w(l.$slots, "optionCsv", {}, void 0, !0)
+          fn: k(() => [
+            C(l.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         l.$slots.optionImg ? {
           name: "optionImg",
-          fn: C(() => [
-            w(l.$slots, "optionImg", {}, void 0, !0)
+          fn: k(() => [
+            C(l.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         l.$slots.optionSvg ? {
           name: "optionSvg",
-          fn: C(() => [
-            w(l.$slots, "optionSvg", {}, void 0, !0)
+          fn: k(() => [
+            C(l.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         l.$slots.optionTable ? {
           name: "optionTable",
-          fn: C(() => [
-            w(l.$slots, "optionTable", {}, void 0, !0)
+          fn: k(() => [
+            C(l.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         l.$slots.optionLabels ? {
           name: "optionLabels",
-          fn: C(() => [
-            w(l.$slots, "optionLabels", {}, void 0, !0)
+          fn: k(() => [
+            C(l.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "7"
         } : void 0,
         l.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: C(({ toggleFullscreen: t, isFullscreen: o }) => [
-            w(l.$slots, "optionFullscreen", ee(te({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
+          fn: k(({ toggleFullscreen: t, isFullscreen: o }) => [
+            C(l.$slots, "optionFullscreen", ee(te({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         l.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: C(({ toggleAnnotator: t, isAnnotator: o }) => [
-            w(l.$slots, "optionAnnotator", ee(te({ toggleAnnotator: t, isAnnotator: o })), void 0, !0)
+          fn: k(({ toggleAnnotator: t, isAnnotator: o }) => [
+            C(l.$slots, "optionAnnotator", ee(te({ toggleAnnotator: t, isAnnotator: o })), void 0, !0)
           ]),
           key: "9"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "callbacks", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
-      (u(), i("svg", {
+      (r(), i("svg", {
         ref_key: "svgRef",
         ref: de,
-        xmlns: s(lo),
+        xmlns: s(ao),
         class: Nt({ "vue-data-ui-fullscreen--on": Oe.value, "vue-data-ui-fulscreen--off": !Oe.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: I(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${$e.value.css}`)
+        style: I(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${Ae.value.css}`)
       }, [
         b("g", {
           ref_key: "G",
           ref: Fe,
           class: "vue-data-ui-g"
         }, [
-          wt(s(Lt)),
-          l.$slots["chart-background"] ? (u(), i("foreignObject", {
+          Ct(s(Lt)),
+          l.$slots["chart-background"] ? (r(), i("foreignObject", {
             key: 0,
             x: 0,
             y: 0,
@@ -1302,10 +1306,10 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               pointerEvents: "none"
             }
           }, [
-            w(l.$slots, "chart-background", {}, void 0, !0)
-          ], 8, Io)) : f("", !0),
-          e.value.type === "classic" && !isNaN(ve.value / F.value) ? (u(), i("defs", Do, [
-            e.value.style.chart.useGradient ? (u(), i("radialGradient", {
+            C(l.$slots, "chart-background", {}, void 0, !0)
+          ], 8, Bo)) : f("", !0),
+          e.value.type === "classic" && !isNaN(ve.value / F.value) ? (r(), i("defs", zo, [
+            e.value.style.chart.useGradient ? (r(), i("radialGradient", {
               key: 0,
               id: `gradient_${c.value}`
             }, [
@@ -1313,25 +1317,25 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 offset: "0%",
                 "stop-color": s(xt)(e.value.style.chart.backgroundColor, 0),
                 "stop-opacity": "0"
-              }, null, 8, zo),
+              }, null, 8, Yo),
               b("stop", {
                 offset: `${(1 - ve.value / F.value) * 100}%`,
                 "stop-color": s(xt)("#FFFFFF", 0),
                 "stop-opacity": "0"
-              }, null, 8, Oo),
+              }, null, 8, Eo),
               b("stop", {
                 offset: `${(1 - ve.value / F.value / 2) * 100}%`,
                 "stop-color": s(xt)("#FFFFFF", e.value.style.chart.gradientIntensity)
-              }, null, 8, Yo),
+              }, null, 8, Xo),
               b("stop", {
                 offset: "100%",
                 "stop-color": s(xt)(e.value.style.chart.backgroundColor, 0),
                 "stop-opacity": "0"
-              }, null, 8, Eo)
-            ], 8, Bo)) : f("", !0)
+              }, null, 8, No)
+            ], 8, Oo)) : f("", !0)
           ])) : f("", !0),
-          e.value.type === "polar" ? (u(), i("defs", Xo, [
-            (u(!0), i(_, null, j(v.value, (t, o) => (u(), i("radialGradient", {
+          e.value.type === "polar" ? (r(), i("defs", Ro, [
+            (r(!0), i(_, null, j(v.value, (t, o) => (r(), i("radialGradient", {
               id: `polar_gradient_${o}_${c.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) + "%",
@@ -1339,14 +1343,14 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             }, [
               b("stop", {
                 offset: "0%",
-                "stop-color": s(oo)(U.value[o].color, 0.05),
+                "stop-color": s(no)(U.value[o].color, 0.05),
                 "stop-opacity": e.value.style.chart.gradientIntensity / 100
-              }, null, 8, Ro),
+              }, null, 8, Uo),
               b("stop", {
                 offset: "100%",
                 "stop-color": U.value[o].color
-              }, null, 8, Vo)
-            ], 8, No))), 256))
+              }, null, 8, Ho)
+            ], 8, Vo))), 256))
           ])) : f("", !0),
           b("defs", null, [
             b("filter", {
@@ -1360,12 +1364,12 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 in: "SourceGraphic",
                 stdDeviation: 2,
                 id: `blur_std_${c.value}`
-              }, null, 8, Ho),
+              }, null, 8, jo),
               a[5] || (a[5] = b("feColorMatrix", {
                 type: "saturate",
                 values: "0"
               }, null, -1))
-            ], 8, Uo),
+            ], 8, Go),
             b("filter", {
               id: `shadow_${c.value}`,
               "color-interpolation-filters": "sRGB"
@@ -1376,8 +1380,8 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 stdDeviation: "10",
                 "flood-opacity": "0.5",
                 "flood-color": e.value.style.chart.layout.donut.shadowColor
-              }, null, 8, jo)
-            ], 8, Go),
+              }, null, 8, qo)
+            ], 8, Wo),
             b("filter", {
               id: `drop_shadow_${c.value}`,
               "color-interpolation-filters": "sRGB",
@@ -1392,13 +1396,13 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 stdDeviation: "3",
                 "flood-opacity": "1",
                 "flood-color": e.value.style.chart.layout.donut.shadowColor
-              }, null, 8, qo)
-            ], 8, Wo)
+              }, null, 8, Jo)
+            ], 8, Qo)
           ]),
-          e.value.type === "classic" ? (u(!0), i(_, { key: 3 }, j(U.value.filter((t) => !t.ghost), (t, o) => (u(), i("g", null, [
-            q(t) && m.value.dataLabels.show ? (u(), i("path", {
+          e.value.type === "classic" ? (r(!0), i(_, { key: 3 }, j(U.value.filter((t) => !t.ghost), (t, o) => (r(), i("g", null, [
+            q(t) && m.value.dataLabels.show ? (r(), i("path", {
               key: 0,
-              d: s(Y)[o]?.connectorPath || s(ao)(
+              d: s(Y)[o]?.connectorPath || s(so)(
                 t,
                 { x: n.value.width / 2, y: n.value.height / 2 },
                 16,
@@ -1415,10 +1419,10 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               "stroke-linejoin": "round",
               fill: "none",
               filter: ze(o)
-            }, null, 8, Qo)) : f("", !0)
+            }, null, 8, Ko)) : f("", !0)
           ]))), 256)) : f("", !0),
-          e.value.type === "polar" ? (u(!0), i(_, { key: 4 }, j(U.value.filter((t) => !t.ghost), (t, o) => (u(), i("g", null, [
-            q(t) && m.value.dataLabels.show ? (u(), i("path", {
+          e.value.type === "polar" ? (r(!0), i(_, { key: 4 }, j(U.value.filter((t) => !t.ghost), (t, o) => (r(), i("g", null, [
+            q(t) && m.value.dataLabels.show ? (r(), i("path", {
               key: 0,
               d: `M ${s(z)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x},${s(z)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y} ${v.value[o].middlePoint.x},${v.value[o].middlePoint.y}`,
               stroke: t.color,
@@ -1430,60 +1434,60 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               style: I({
                 transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
               })
-            }, null, 12, Jo)) : f("", !0)
+            }, null, 12, Zo)) : f("", !0)
           ]))), 256)) : f("", !0),
-          e.value.type === "classic" && e.value.style.chart.layout.donut.useShadow ? (u(), i("circle", {
+          e.value.type === "classic" && e.value.style.chart.layout.donut.useShadow ? (r(), i("circle", {
             key: 5,
             cx: n.value.width / 2,
             cy: n.value.height / 2,
             r: F.value <= 0 ? 10 : F.value,
             fill: e.value.style.chart.backgroundColor,
             filter: `url(#shadow_${c.value})`
-          }, null, 8, Ko)) : f("", !0),
-          l.$slots.pattern ? (u(), i("g", Zo, [
-            (u(!0), i(_, null, j(tt.dataset, (t, o) => (u(), i("defs", {
+          }, null, 8, ea)) : f("", !0),
+          l.$slots.pattern ? (r(), i("g", ta, [
+            (r(!0), i(_, null, j(tt.dataset, (t, o) => (r(), i("defs", {
               key: `pattern-${t.patternIndex}`
             }, [
-              w(l.$slots, "pattern", Vt({ ref_for: !0 }, { seriesIndex: o, patternId: `pattern_${c.value}_${o}` }), void 0, !0)
+              C(l.$slots, "pattern", Vt({ ref_for: !0 }, { seriesIndex: o, patternId: `pattern_${c.value}_${o}` }), void 0, !0)
             ]))), 128))
           ])) : f("", !0),
-          Q.value && e.value.type === "classic" ? (u(), i(_, { key: 7 }, [
-            (u(!0), i(_, null, j(re.value, (t, o) => (u(), i("path", {
+          Q.value && e.value.type === "classic" ? (r(), i(_, { key: 7 }, [
+            (r(!0), i(_, null, j(ue.value, (t, o) => (r(), i("path", {
               stroke: e.value.style.chart.backgroundColor,
               d: t.arcSlice,
               fill: "#FFFFFF"
-            }, null, 8, ea))), 256)),
-            (u(!0), i(_, null, j(re.value, (t, o) => (u(), i("path", {
+            }, null, 8, la))), 256)),
+            (r(!0), i(_, null, j(ue.value, (t, o) => (r(), i("path", {
               class: "vue-ui-donut-arc-path",
               d: t.arcSlice,
               fill: 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: ze(o)
-            }, null, 8, ta))), 256)),
-            l.$slots.pattern ? (u(), i("g", la, [
-              (u(!0), i(_, null, j(re.value, (t, o) => (u(), i("path", {
+            }, null, 8, oa))), 256)),
+            l.$slots.pattern ? (r(), i("g", aa, [
+              (r(!0), i(_, null, j(ue.value, (t, o) => (r(), i("path", {
                 class: "vue-ui-donut-arc-path",
                 d: t.arcSlice,
                 fill: `url(#${t.pattern})`,
                 stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth,
                 filter: ze(o)
-              }, null, 8, oa))), 256))
+              }, null, 8, na))), 256))
             ])) : f("", !0)
           ], 64)) : f("", !0),
-          Q.value && e.value.type === "polar" ? (u(), i(_, { key: 8 }, [
-            U.value.length > 1 ? (u(), i("g", aa, [
-              (u(!0), i(_, null, j(re.value, (t, o) => (u(), i("path", {
+          Q.value && e.value.type === "polar" ? (r(), i(_, { key: 8 }, [
+            U.value.length > 1 ? (r(), i("g", sa, [
+              (r(!0), i(_, null, j(ue.value, (t, o) => (r(), i("path", {
                 stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                 d: v.value[o].path,
                 fill: "#FFFFFF",
                 style: I({
                   transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                 })
-              }, null, 12, na))), 256)),
-              e.value.style.chart.layout.donut.useShadow ? (u(), i("g", sa, [
-                (u(!0), i(_, null, j(re.value, (t, o) => (u(), i("path", {
+              }, null, 12, ra))), 256)),
+              e.value.style.chart.layout.donut.useShadow ? (r(), i("g", ua, [
+                (r(!0), i(_, null, j(ue.value, (t, o) => (r(), i("path", {
                   class: "vue-ui-donut-arc-path",
                   d: v.value[o].path,
                   fill: "transparent",
@@ -1493,10 +1497,10 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                   style: I({
                     transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                   })
-                }, null, 12, ua))), 256))
+                }, null, 12, ia))), 256))
               ])) : f("", !0),
-              l.$slots.pattern ? (u(), i("g", ra, [
-                (u(!0), i(_, null, j(re.value, (t, o) => (u(), i("path", {
+              l.$slots.pattern ? (r(), i("g", ca, [
+                (r(!0), i(_, null, j(ue.value, (t, o) => (r(), i("path", {
                   class: "vue-ui-donut-arc-path",
                   d: v.value[o].path,
                   fill: `url(#${t.pattern})`,
@@ -1507,9 +1511,9 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                     transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
                     transformOrigin: "center"
                   })
-                }, null, 12, ia))), 256))
+                }, null, 12, da))), 256))
               ])) : f("", !0),
-              (u(!0), i(_, null, j(re.value, (t, o) => (u(), i("path", {
+              (r(!0), i(_, null, j(ue.value, (t, o) => (r(), i("path", {
                 class: "vue-ui-donut-arc-path",
                 d: v.value[o].path,
                 fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${o}_${c.value})` : t.color,
@@ -1519,9 +1523,9 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 style: I({
                   transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                 })
-              }, null, 12, ca))), 256))
-            ])) : (u(), i("g", da, [
-              l.$slots.pattern ? (u(), i("circle", {
+              }, null, 12, va))), 256))
+            ])) : (r(), i("g", ha, [
+              l.$slots.pattern ? (r(), i("circle", {
                 key: 0,
                 cx: n.value.width / 2,
                 cy: n.value.height / 2,
@@ -1529,7 +1533,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 fill: `url(#pattern_${c.value}_${U.value[0].patternIndex})`,
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth
-              }, null, 8, va)) : f("", !0),
+              }, null, 8, fa)) : f("", !0),
               b("circle", {
                 cx: n.value.width / 2,
                 cy: n.value.height / 2,
@@ -1537,17 +1541,17 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${c.value})` : U.value[0].color,
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth
-              }, null, 8, ha)
+              }, null, 8, ya)
             ]))
-          ], 64)) : (u(), i(_, { key: 9 }, [
-            e.value.type === "classic" && !Cl.value ? (u(), i("g", fa, [
-              (u(!0), i(_, null, j(xl.value, (t, o) => (u(), i("path", {
+          ], 64)) : (r(), i(_, { key: 9 }, [
+            e.value.type === "classic" && !Al.value ? (r(), i("g", ga, [
+              (r(!0), i(_, null, j($l.value, (t, o) => (r(), i("path", {
                 class: "vue-ui-donut-arc-path",
                 d: t.arcSlice,
                 fill: t.color,
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth
-              }, null, 8, ya))), 256))
+              }, null, 8, pa))), 256))
             ])) : f("", !0),
             b("circle", {
               cx: n.value.width / 2,
@@ -1555,9 +1559,9 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               r: F.value <= 0 ? 10 : F.value,
               fill: "transparent",
               stroke: e.value.style.chart.backgroundColor
-            }, null, 8, ga)
+            }, null, 8, ba)
           ], 64)),
-          e.value.style.chart.useGradient && e.value.type === "classic" ? (u(), i("circle", {
+          e.value.style.chart.useGradient && e.value.type === "classic" ? (r(), i("circle", {
             key: 10,
             cx: n.value.width / 2,
             cy: n.value.height / 2,
@@ -1566,7 +1570,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               F.value <= 0 ? 10 : F.value
             ),
             fill: `url(#gradient_${c.value})`
-          }, null, 8, pa)) : f("", !0),
+          }, null, 8, ma)) : f("", !0),
           b("circle", {
             ref_key: "circle_hollow",
             ref: Ue,
@@ -1575,23 +1579,23 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             cx: n.value.width / 2,
             cy: n.value.height / 2,
             r: Math.max(0.1, ve.value * 1.7)
-          }, null, 8, ba),
-          Q.value ? (u(), i(_, { key: 11 }, [
-            U.value.length > 1 || e.value.type === "classic" ? (u(), i("g", ma, [
-              (u(!0), i(_, null, j(U.value.filter((t) => !t.ghost), (t, o) => (u(), i("path", {
+          }, null, 8, Ca),
+          Q.value ? (r(), i(_, { key: 11 }, [
+            U.value.length > 1 || e.value.type === "classic" ? (r(), i("g", wa, [
+              (r(!0), i(_, null, j(U.value.filter((t) => !t.ghost), (t, o) => (r(), i("path", {
                 d: e.value.type === "classic" ? t.arcSlice : v.value[o].path,
                 stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                 fill: M.value === o ? e.value.style.chart.layout.donut.selectedColor : "transparent",
-                onMouseenter: (r) => fe({
+                onMouseenter: (u) => fe({
                   datapoint: t,
                   relativeIndex: o,
                   seriesIndex: t.seriesIndex,
                   show: !0
                 }),
-                onMouseleave: (r) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
-                onClick: (r) => ye(t, o)
-              }, null, 40, wa))), 256))
-            ])) : (u(), i("g", ka, [
+                onMouseleave: (u) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
+                onClick: (u) => ye(t, o)
+              }, null, 40, ka))), 256))
+            ])) : (r(), i("g", xa, [
               b("circle", {
                 cx: n.value.width / 2,
                 cy: n.value.height / 2,
@@ -1605,16 +1609,16 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 })),
                 onMouseleave: a[1] || (a[1] = (t) => he({ datapoint: U.value[0], seriesIndex: U.value[0].seriesIndex })),
                 onClick: a[2] || (a[2] = (t) => ye(U.value[0], l.i))
-              }, null, 40, Ca)
+              }, null, 40, Aa)
             ]))
           ], 64)) : f("", !0),
-          e.value.type === "classic" ? (u(), i("g", {
+          e.value.type === "classic" ? (r(), i("g", {
             key: 12,
             ref_key: "G_hollow",
             ref: nt,
             class: "vue-data-ui-donut-hollow-labels"
           }, [
-            e.value.style.chart.layout.labels.hollow.total.show ? (u(), i("text", {
+            e.value.style.chart.layout.labels.hollow.total.show ? (r(), i("text", {
               key: 0,
               "text-anchor": "middle",
               x: n.value.width / 2,
@@ -1622,8 +1626,8 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               fill: e.value.style.chart.layout.labels.hollow.total.color,
               "font-size": e.value.style.chart.layout.labels.hollow.total.fontSize,
               style: I(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
-            }, ke(e.value.style.chart.layout.labels.hollow.total.text), 13, xa)) : f("", !0),
-            e.value.style.chart.layout.labels.hollow.total.show ? (u(), i("text", {
+            }, we(e.value.style.chart.layout.labels.hollow.total.text), 13, $a)) : f("", !0),
+            e.value.style.chart.layout.labels.hollow.total.show ? (r(), i("text", {
               key: 1,
               "text-anchor": "middle",
               x: n.value.width / 2,
@@ -1631,7 +1635,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               fill: e.value.style.chart.layout.labels.hollow.total.value.color,
               "font-size": e.value.style.chart.layout.labels.hollow.total.value.fontSize,
               style: I(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
-            }, ke(s(ge)(
+            }, we(s(ge)(
               e.value.style.chart.layout.labels.hollow.total.value.formatter,
               Q.value,
               s(ie)({
@@ -1639,8 +1643,8 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 v: Q.value,
                 s: e.value.style.chart.layout.labels.hollow.total.value.suffix
               })
-            )), 13, $a)) : f("", !0),
-            e.value.style.chart.layout.labels.hollow.average.show ? (u(), i("text", {
+            )), 13, _a)) : f("", !0),
+            e.value.style.chart.layout.labels.hollow.average.show ? (r(), i("text", {
               key: 2,
               "text-anchor": "middle",
               x: n.value.width / 2,
@@ -1648,8 +1652,8 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               fill: e.value.style.chart.layout.labels.hollow.average.color,
               "font-size": e.value.style.chart.layout.labels.hollow.average.fontSize,
               style: I(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
-            }, ke(e.value.style.chart.layout.labels.hollow.average.text), 13, Aa)) : f("", !0),
-            e.value.style.chart.layout.labels.hollow.average.show ? (u(), i("text", {
+            }, we(e.value.style.chart.layout.labels.hollow.average.text), 13, Ta)) : f("", !0),
+            e.value.style.chart.layout.labels.hollow.average.show ? (r(), i("text", {
               key: 3,
               "text-anchor": "middle",
               x: n.value.width / 2,
@@ -1657,7 +1661,7 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               fill: e.value.style.chart.layout.labels.hollow.average.value.color,
               "font-size": e.value.style.chart.layout.labels.hollow.average.value.fontSize,
               style: I(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
-            }, ke(se.value || P.value ? "--" : s(ge)(
+            }, we(se.value || P.value ? "--" : s(ge)(
               e.value.style.chart.layout.labels.hollow.average.value.formatter,
               zt.value,
               s(ie)({
@@ -1666,121 +1670,121 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 s: e.value.style.chart.layout.labels.hollow.average.value.suffix,
                 r: e.value.style.chart.layout.labels.hollow.average.value.rounding
               })
-            )), 13, _a)) : f("", !0)
+            )), 13, La)) : f("", !0)
           ], 512)) : f("", !0),
-          (u(!0), i(_, null, j(re.value.filter((t) => !t.ghost), (t, o) => (u(), i("g", {
+          (r(!0), i(_, null, j(ue.value.filter((t) => !t.ghost), (t, o) => (r(), i("g", {
             filter: ze(o),
             class: Nt({ animated: e.value.useCssAnimation }),
             key: t.seriesIndex,
-            opacity: Pl(t)
+            opacity: Il(t)
           }, [
-            e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (u(), i("g", La, [
-              (u(), i("foreignObject", {
-                x: s(A)(t, !0).anchor === "end" ? s(A)(t).x - 120 : s(A)(t, !0).anchor === "middle" ? s(A)(t).x - 60 : s(A)(t).x,
-                y: s(Ce)(t) - (Jt.value ? 20 : 0),
+            e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (r(), i("g", Ma, [
+              (r(), i("foreignObject", {
+                x: s($)(t, !0).anchor === "end" ? s($)(t).x - 120 : s($)(t, !0).anchor === "middle" ? s($)(t).x - 60 : s($)(t).x,
+                y: s(ke)(t) - (Jt.value ? 20 : 0),
                 width: "120",
                 height: "60",
                 style: { overflow: "visible" }
               }, [
                 b("div", null, [
-                  w(l.$slots, "dataLabel", Vt({ ref_for: !0 }, {
+                  C(l.$slots, "dataLabel", Vt({ ref_for: !0 }, {
                     datapoint: t,
                     isBlur: !e.value.useBlurOnHover || [null, void 0].includes(M.value) || M.value === o,
                     isSafari: Jt.value,
                     isVisible: q(t) && m.value.dataLabels.show,
-                    textAlign: s(A)(t, !0, 16, !0).anchor,
-                    flexAlign: s(A)(t, !0, 16).anchor,
-                    percentage: Wt(t, re.value)
+                    textAlign: s($)(t, !0, 16, !0).anchor,
+                    flexAlign: s($)(t, !0, 16).anchor,
+                    percentage: Wt(t, ue.value)
                   }), void 0, !0)
                 ])
-              ], 8, Sa))
-            ])) : (u(), i("g", Ma, [
-              e.value.type === "classic" ? (u(), i(_, { key: 0 }, [
-                q(t) && m.value.dataLabels.show ? (u(), i("circle", {
+              ], 8, Pa))
+            ])) : (r(), i("g", Fa, [
+              e.value.type === "classic" ? (r(), i(_, { key: 0 }, [
+                q(t) && m.value.dataLabels.show ? (r(), i("circle", {
                   key: 0,
-                  cx: s(Y)[o]?.markerX ?? s(A)(t).x,
-                  cy: s(Y)[o]?.markerY ?? s(Ce)(t) - 3.5,
+                  cx: s(Y)[o]?.markerX ?? s($)(t).x,
+                  cy: s(Y)[o]?.markerY ?? s(ke)(t) - 3.5,
                   fill: t.color,
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": 1,
                   r: 3,
                   filter: !e.value.useBlurOnHover || [null, void 0].includes(M.value) || M.value === o ? "" : `url(#blur_${c.value})`,
-                  onClick: (r) => ye(t, o),
-                  onMouseenter: (r) => fe({
+                  onClick: (u) => ye(t, o),
+                  onMouseenter: (u) => fe({
                     datapoint: t,
                     relativeIndex: o,
                     seriesIndex: t.seriesIndex,
                     show: !0
                   }),
-                  onMouseleave: (r) => he({ datapoint: t, seriesIndex: t.seriesIndex })
-                }, null, 40, Pa)) : f("", !0),
-                e.value.style.chart.layout.labels.dataLabels.oneLine || s(Y)[o] ? kt((u(), i("text", {
+                  onMouseleave: (u) => he({ datapoint: t, seriesIndex: t.seriesIndex })
+                }, null, 40, Ia)) : f("", !0),
+                e.value.style.chart.layout.labels.dataLabels.oneLine || s(Y)[o] ? wt((r(), i("text", {
                   key: 1,
                   class: "vue-data-ui-datalabel-inline",
-                  "text-anchor": s(Y)[o]?.textAnchor || s(A)(t, !0, 12).anchor,
-                  x: s(Y)[o]?.labelX ?? s(A)(t, !0, 12).x,
-                  y: s(Y)[o]?.labelY ?? s(Ce)(t),
-                  onClick: (r) => ye(t, o),
-                  onMouseenter: (r) => fe({
+                  "text-anchor": s(Y)[o]?.textAnchor || s($)(t, !0, 12).anchor,
+                  x: s(Y)[o]?.labelX ?? s($)(t, !0, 12).x,
+                  y: s(Y)[o]?.labelY ?? s(ke)(t),
+                  onClick: (u) => ye(t, o),
+                  onMouseenter: (u) => fe({
                     datapoint: t,
                     relativeIndex: o,
                     seriesIndex: t.seriesIndex,
                     show: !0
                   }),
-                  onMouseleave: (r) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
-                  innerHTML: Sl(t, o, !!s(Y)[o])
-                }, null, 40, Fa)), [
-                  [Ct, q(t) && m.value.dataLabels.show]
-                ]) : (u(), i(_, { key: 2 }, [
-                  kt(b("text", {
+                  onMouseleave: (u) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
+                  innerHTML: Pl(t, o, !!s(Y)[o])
+                }, null, 40, Da)), [
+                  [kt, q(t) && m.value.dataLabels.show]
+                ]) : (r(), i(_, { key: 2 }, [
+                  wt(b("text", {
                     class: "vue-data-ui-datalabel-value",
-                    "text-anchor": s(Y)[o]?.textAnchor || s(A)(t, !0, 12).anchor,
-                    x: s(Y)[o]?.labelX ?? s(A)(t, !0, 12).x,
-                    y: s(Y)[o]?.labelY ?? s(Ce)(t),
+                    "text-anchor": s(Y)[o]?.textAnchor || s($)(t, !0, 12).anchor,
+                    x: s(Y)[o]?.labelX ?? s($)(t, !0, 12).x,
+                    y: s(Y)[o]?.labelY ?? s(ke)(t),
                     fill: e.value.style.chart.layout.labels.percentage.color,
                     "font-size": xe.value + "px",
                     style: I(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
-                    onClick: (r) => ye(t, o),
-                    onMouseenter: (r) => fe({
+                    onClick: (u) => ye(t, o),
+                    onMouseenter: (u) => fe({
                       datapoint: t,
                       relativeIndex: o,
                       seriesIndex: t.seriesIndex,
                       show: !0
                     }),
-                    onMouseleave: (r) => he({ datapoint: t, seriesIndex: t.seriesIndex })
-                  }, ke(bt(t)), 45, Ia), [
-                    [Ct, q(t) && m.value.dataLabels.show]
+                    onMouseleave: (u) => he({ datapoint: t, seriesIndex: t.seriesIndex })
+                  }, we(bt(t)), 45, Ba), [
+                    [kt, q(t) && m.value.dataLabels.show]
                   ]),
-                  kt(b("text", {
+                  wt(b("text", {
                     class: "vue-data-ui-datalabel-name",
-                    "text-anchor": s(Y)[o]?.textAnchor || s(A)(t).anchor,
-                    x: s(Y)[o]?.labelX ?? s(A)(t, !0, 12).x,
-                    y: (s(Y)[o]?.labelY ?? s(Ce)(t)) + N.value * 1.2,
+                    "text-anchor": s(Y)[o]?.textAnchor || s($)(t).anchor,
+                    x: s(Y)[o]?.labelX ?? s($)(t, !0, 12).x,
+                    y: (s(Y)[o]?.labelY ?? s(ke)(t)) + N.value * 1.2,
                     fill: e.value.style.chart.layout.labels.name.color,
                     "font-size": N.value + "px",
                     style: I(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
-                    onClick: (r) => ye(t, o),
-                    onMouseenter: (r) => fe({
+                    onClick: (u) => ye(t, o),
+                    onMouseenter: (u) => fe({
                       datapoint: t,
                       relativeIndex: o,
                       seriesIndex: t.seriesIndex,
                       show: !0
                     }),
-                    onMouseleave: (r) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
+                    onMouseleave: (u) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
                     innerHTML: s(il)({
                       content: t.name,
                       fontSize: N.value,
                       fill: e.value.style.chart.layout.labels.name.color,
-                      x: s(Y)[o]?.labelX ?? s(A)(t, !0, 12).x,
-                      y: (s(Y)[o]?.labelY ?? s(Ce)(t)) + N.value
+                      x: s(Y)[o]?.labelX ?? s($)(t, !0, 12).x,
+                      y: (s(Y)[o]?.labelY ?? s(ke)(t)) + N.value
                     })
-                  }, null, 44, Da), [
-                    [Ct, q(t) && m.value.dataLabels.show]
+                  }, null, 44, za), [
+                    [kt, q(t) && m.value.dataLabels.show]
                   ])
                 ], 64))
               ], 64)) : f("", !0),
-              e.value.type === "polar" ? (u(), i(_, { key: 1 }, [
-                q(t) && m.value.dataLabels.show ? (u(), i("circle", {
+              e.value.type === "polar" ? (r(), i(_, { key: 1 }, [
+                q(t) && m.value.dataLabels.show ? (r(), i("circle", {
                   key: 0,
                   cx: s(z)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
                   cy: s(z)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
@@ -1789,19 +1793,19 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                   "stroke-width": 1,
                   r: 3,
                   filter: !e.value.useBlurOnHover || [null, void 0].includes(M.value) || M.value === o ? "" : `url(#blur_${c.value})`,
-                  onClick: (r) => ye(t, o),
-                  onMouseenter: (r) => fe({
+                  onClick: (u) => ye(t, o),
+                  onMouseenter: (u) => fe({
                     datapoint: t,
                     relativeIndex: o,
                     seriesIndex: t.seriesIndex,
                     show: !0
                   }),
-                  onMouseleave: (r) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
+                  onMouseleave: (u) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
                   style: I({
                     transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                   })
-                }, null, 44, Ba)) : f("", !0),
-                e.value.style.chart.layout.labels.dataLabels.oneLine ? kt((u(), i("text", {
+                }, null, 44, Oa)) : f("", !0),
+                e.value.style.chart.layout.labels.dataLabels.oneLine ? wt((r(), i("text", {
                   key: 1,
                   class: "vue-data-ui-datalabel-inline",
                   "text-anchor": Te(v.value[o].middlePoint),
@@ -1810,19 +1814,19 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                   style: I({
                     transition: P.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                   }),
-                  onClick: (r) => ye(t, o),
-                  onMouseenter: (r) => fe({
+                  onClick: (u) => ye(t, o),
+                  onMouseenter: (u) => fe({
                     datapoint: t,
                     relativeIndex: o,
                     seriesIndex: t.seriesIndex,
                     show: !0
                   }),
-                  onMouseleave: (r) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
-                  innerHTML: Ml(t, o)
-                }, null, 44, za)), [
-                  [Ct, q(t) && m.value.dataLabels.show]
-                ]) : (u(), i(_, { key: 2 }, [
-                  q(t) && m.value.dataLabels.show ? (u(), i("text", {
+                  onMouseleave: (u) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
+                  innerHTML: Fl(t, o)
+                }, null, 44, Ya)), [
+                  [kt, q(t) && m.value.dataLabels.show]
+                ]) : (r(), i(_, { key: 2 }, [
+                  q(t) && m.value.dataLabels.show ? (r(), i("text", {
                     key: 0,
                     class: "vue-data-ui-datalabel-value",
                     "text-anchor": Te(v.value[o].middlePoint),
@@ -1834,16 +1838,16 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                       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: (r) => ye(t, o),
-                    onMouseenter: (r) => fe({
+                    onClick: (u) => ye(t, o),
+                    onMouseenter: (u) => fe({
                       datapoint: t,
                       relativeIndex: o,
                       seriesIndex: t.seriesIndex,
                       show: !0
                     }),
-                    onMouseleave: (r) => he({ datapoint: t, seriesIndex: t.seriesIndex })
-                  }, ke(bt(t)), 45, Oa)) : f("", !0),
-                  q(t) && m.value.dataLabels.show ? (u(), i("text", {
+                    onMouseleave: (u) => he({ datapoint: t, seriesIndex: t.seriesIndex })
+                  }, we(bt(t)), 45, Ea)) : f("", !0),
+                  q(t) && m.value.dataLabels.show ? (r(), i("text", {
                     key: 1,
                     class: "vue-data-ui-datalabel-name",
                     "text-anchor": Te(v.value[o].middlePoint),
@@ -1855,14 +1859,14 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                       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: (r) => ye(t, o),
-                    onMouseenter: (r) => fe({
+                    onClick: (u) => ye(t, o),
+                    onMouseenter: (u) => fe({
                       datapoint: t,
                       relativeIndex: o,
                       seriesIndex: t.seriesIndex,
                       show: !0
                     }),
-                    onMouseleave: (r) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
+                    onMouseleave: (u) => he({ datapoint: t, seriesIndex: t.seriesIndex }),
                     innerHTML: s(il)({
                       content: t.name,
                       fontSize: xe.value,
@@ -1870,29 +1874,29 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                       x: s(z)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
                       y: s(z)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + N.value * 1.2
                     })
-                  }, null, 44, Ya)) : f("", !0)
+                  }, null, 44, Xa)) : f("", !0)
                 ], 64))
               ], 64)) : f("", !0)
             ])),
-            m.value.dataLabels.show && e.value.style.chart.comments.show && t.comment ? (u(), i("g", Ea, [
-              q(t) && e.value.type === "classic" ? (u(), i("foreignObject", {
+            m.value.dataLabels.show && e.value.style.chart.comments.show && t.comment ? (r(), i("g", Na, [
+              q(t) && e.value.type === "classic" ? (r(), i("foreignObject", {
                 key: 0,
-                x: e.value.style.chart.comments.offsetX + (s(A)(t, !0).anchor === "end" ? s(A)(t).x - e.value.style.chart.comments.width : s(A)(t, !0).anchor === "middle" ? s(A)(t).x - e.value.style.chart.comments.width / 2 : s(A)(t).x),
-                y: s(Ce)(t) + 24 + e.value.style.chart.comments.offsetY,
+                x: e.value.style.chart.comments.offsetX + (s($)(t, !0).anchor === "end" ? s($)(t).x - e.value.style.chart.comments.width : s($)(t, !0).anchor === "middle" ? s($)(t).x - e.value.style.chart.comments.width / 2 : s($)(t).x),
+                y: s(ke)(t) + 24 + e.value.style.chart.comments.offsetY,
                 width: e.value.style.chart.comments.width,
                 height: "200",
                 style: { overflow: "visible", "pointer-events": "none" }
               }, [
                 b("div", null, [
-                  w(l.$slots, "plot-comment", {
-                    plot: { ...t, textAlign: s(A)(t, !0, 16, !0).anchor, flexAlign: s(A)(t, !0, 16).anchor, isFirstLoad: P.value }
+                  C(l.$slots, "plot-comment", {
+                    plot: { ...t, textAlign: s($)(t, !0, 16, !0).anchor, flexAlign: s($)(t, !0, 16).anchor, isFirstLoad: P.value }
                   }, void 0, !0)
                 ])
-              ], 8, Xa)) : f("", !0),
-              q(t) && e.value.type === "polar" ? (u(), i("foreignObject", {
+              ], 8, Ra)) : f("", !0),
+              q(t) && e.value.type === "polar" ? (r(), i("foreignObject", {
                 key: 1,
                 x: e.value.style.chart.comments.offsetX + (Te(v.value[o].middlePoint) === "end" ? s(z)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width : Te(v.value[o].middlePoint) === "middle" ? s(z)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width / 2 : s(z)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x),
-                y: $l(v.value[o]) + e.value.style.chart.comments.offsetY,
+                y: _l(v.value[o]) + e.value.style.chart.comments.offsetY,
                 width: e.value.style.chart.comments.width,
                 height: "200",
                 style: I({
@@ -1902,48 +1906,48 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 })
               }, [
                 b("div", null, [
-                  w(l.$slots, "plot-comment", {
+                  C(l.$slots, "plot-comment", {
                     plot: { ...t, textAlign: Te(v.value[o].middlePoint), flexAlign: Te(v.value[o].middlePoint), isFirstLoad: P.value }
                   }, void 0, !0)
                 ])
-              ], 12, Na)) : f("", !0)
+              ], 12, Va)) : f("", !0)
             ])) : f("", !0)
-          ], 10, Ta))), 128)),
-          w(l.$slots, "svg", { svg: n.value }, void 0, !0)
+          ], 10, Sa))), 128)),
+          C(l.$slots, "svg", { svg: n.value }, void 0, !0)
         ], 512)
-      ], 14, Fo)),
-      l.$slots.watermark ? (u(), i("div", Ra, [
-        w(l.$slots, "watermark", ee(te({ isPrinting: s(K) || s(Z) })), void 0, !0)
+      ], 14, Do)),
+      l.$slots.watermark ? (r(), i("div", Ua, [
+        C(l.$slots, "watermark", ee(te({ isPrinting: s(K) || s(Z) })), void 0, !0)
       ])) : f("", !0),
       b("div", {
         id: `legend-bottom-${c.value}`
-      }, null, 8, Va),
-      dt.value ? (u(), Pe(jl, {
+      }, null, 8, Ha),
+      dt.value ? (r(), Pe(ql, {
         key: 5,
         to: e.value.style.chart.legend.position === "top" ? `#legend-top-${c.value}` : `#legend-bottom-${c.value}`
       }, [
         b("div", {
           ref_key: "chartLegend",
-          ref: ut
+          ref: rt
         }, [
-          e.value.style.chart.legend.show ? (u(), Pe(To, {
+          e.value.style.chart.legend.show ? (r(), Pe(So, {
             key: `legend_${ct.value}`,
             legendSet: Bt.value,
-            config: kl.value,
+            config: xl.value,
             onClickMarker: a[3] || (a[3] = ({ i: t }) => Xe(t))
           }, Rt({
-            item: C(({ legend: t, index: o }) => [
+            item: k(({ legend: t, index: o }) => [
               b("div", {
                 style: I(`opacity:${O.value.includes(o) ? 0.5 : 1}`),
-                onClick: (r) => t.segregate()
-              }, ke(t.display), 13, Ua)
+                onClick: (u) => t.segregate()
+              }, we(t.display), 13, Ga)
             ]),
             _: 2
           }, [
             l.$slots.pattern ? {
               name: "legend-pattern",
-              fn: C(({ legend: t, index: o }) => [
-                wt(Ao, {
+              fn: k(({ legend: t, index: o }) => [
+                Ct(To, {
                   shape: t.shape,
                   radius: 30,
                   stroke: "none",
@@ -1954,25 +1958,25 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               key: "0"
             } : void 0
           ]), 1032, ["legendSet", "config"])) : f("", !0),
-          w(l.$slots, "legend", { legend: Bt.value }, void 0, !0)
+          C(l.$slots, "legend", { legend: Bt.value }, void 0, !0)
         ], 512)
       ], 8, ["to"])) : f("", !0),
-      l.$slots.source ? (u(), i("div", {
+      l.$slots.source ? (r(), i("div", {
         key: 6,
         ref_key: "source",
         ref: He,
         dir: "auto"
       }, [
-        w(l.$slots, "source", {}, void 0, !0)
+        C(l.$slots, "source", {}, void 0, !0)
       ], 512)) : f("", !0),
-      l.$slots.hollow ? (u(), i("div", Ha, [
-        w(l.$slots, "hollow", ee(te({
+      l.$slots.hollow ? (r(), i("div", ja, [
+        C(l.$slots, "hollow", ee(te({
           total: Q.value,
           average: zt.value,
           dataset: R.value
         })), void 0, !0)
       ])) : f("", !0),
-      wt(s(Re), {
+      Ct(s(Re), {
         teleportTo: e.value.style.chart.tooltip.teleportTo,
         show: m.value.showTooltip && S.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
@@ -1993,21 +1997,21 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         smoothForce: e.value.style.chart.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThrehsold
       }, {
-        "tooltip-before": C(() => [
-          w(l.$slots, "tooltip-before", ee(te({ ...Ot.value })), void 0, !0)
+        "tooltip-before": k(() => [
+          C(l.$slots, "tooltip-before", ee(te({ ...Ot.value })), void 0, !0)
         ]),
-        "tooltip-after": C(() => [
-          w(l.$slots, "tooltip-after", ee(te({ ...Ot.value })), void 0, !0)
+        "tooltip-after": k(() => [
+          C(l.$slots, "tooltip-after", ee(te({ ...Ot.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["teleportTo", "show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      D.value && e.value.userOptions.buttons.table ? (u(), Pe(Wl(et.value.component), Vt({ key: 8 }, et.value.props, {
+      D.value && e.value.userOptions.buttons.table ? (r(), Pe(Ql(et.value.component), Vt({ key: 8 }, et.value.props, {
         ref_key: "tableUnit",
         ref: Ie,
         onClose: tl
       }), Rt({
-        content: C(() => [
-          (u(), Pe(s(at), {
+        content: k(() => [
+          (r(), Pe(s(at), {
             key: `table_${it.value}`,
             colNames: pt.value.colNames,
             head: pt.value.head,
@@ -2017,14 +2021,14 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             withCloseButton: !e.value.table.useDialog,
             onClose: tl
           }, {
-            th: C(({ th: t }) => [
+            th: k(({ th: t }) => [
               b("div", {
                 innerHTML: t,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Ga)
+              }, null, 8, Wa)
             ]),
-            td: C(({ td: t }) => [
-              nl(ke(t.name ? t.name : isNaN(Number(t)) ? t.includes("%") ? t : s(ge)(
+            td: k(({ td: t }) => [
+              nl(we(t.name ? t.name : isNaN(Number(t)) ? t.includes("%") ? t : s(ge)(
                 e.value.style.chart.layout.labels.percentage.formatter,
                 t,
                 s(ie)({
@@ -2050,20 +2054,20 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: C(() => [
-            nl(ke(et.value.title), 1)
+          fn: k(() => [
+            nl(we(et.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: C(() => [
+          fn: k(() => [
             b("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
               onClick: a[4] || (a[4] = (t) => Yt(e.value.userOptions.callbacks.csv))
             }, [
-              wt(s(ot), {
+              Ct(s(ot), {
                 name: "excel",
                 stroke: et.value.props.color
               }, null, 8, ["stroke"])
@@ -2072,15 +2076,15 @@ const dl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           key: "1"
         } : void 0
       ]), 1040)) : f("", !0),
-      s(ne) ? (u(), Pe(mo, { key: 9 })) : f("", !0)
-    ], 46, Mo));
+      s(ne) ? (r(), Pe(wo, { key: 9 })) : f("", !0)
+    ], 46, Fo));
   }
-}, Wa = /* @__PURE__ */ Lo(ja, [["__scopeId", "data-v-0bacea64"]]), hn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Qa = /* @__PURE__ */ Mo(qa, [["__scopeId", "data-v-0bacea64"]]), yn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Wa
+  default: Qa
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  Wa as V,
-  hn as a,
-  vn as v
+  Qa as V,
+  yn as a,
+  fn as v
 };