vue-data-ui 2.12.8-beta.2 → 2.12.8-beta.4

package/dist/{vue-ui-donut-CyOg8kph.js → vue-ui-donut-DcjJqRof.js}

@@ -1,13 +1,13 @@
-import { defineAsyncComponent as K, useSlots as Mt, computed as f, shallowRef as W, ref as _, onMounted as tt, onBeforeUnmount as Nt, watch as lt, createElementBlock as r, openBlock as o, normalizeStyle as b, normalizeClass as _e, createBlock as Q, createCommentVNode as i, renderSlot as p, createElementVNode as y, createVNode as xe, unref as u, createSlots as at, withCtx as C, normalizeProps as oe, guardReactiveProps as se, Fragment as g, renderList as S, mergeProps as ot, toDisplayString as P, createTextVNode as st, nextTick as Yt } from "vue";
-import { u as Xt, o as It, e as ut, g as Dt, c as Vt, b as Bt, d as nt, p as Z, m as Gt, _ as Rt, f as N, X as Wt, s as ve, w as Et, j as Ut, M as L, i as D, k as ce, n as w, t as jt, a as Ht, q as qt, r as Jt, x as Kt, S as rt } from "./index-CbcpITE_.js";
+import { defineAsyncComponent as K, useSlots as Mt, computed as p, shallowRef as W, ref as _, onMounted as tt, onBeforeUnmount as Nt, watch as lt, createElementBlock as r, openBlock as o, normalizeStyle as b, normalizeClass as _e, createBlock as Q, createCommentVNode as i, renderSlot as g, createElementVNode as f, createVNode as xe, unref as u, createSlots as at, withCtx as C, normalizeProps as oe, guardReactiveProps as se, Fragment as m, renderList as S, mergeProps as ot, toDisplayString as P, createTextVNode as st, nextTick as Yt } from "vue";
+import { u as Xt, o as It, e as ut, g as Dt, c as Vt, b as Bt, d as nt, p as Z, m as Gt, _ as Rt, f as N, X as Wt, s as ve, w as Et, j as Ut, M as L, i as D, k as ce, n as w, t as jt, a as Ht, q as qt, r as Jt, x as Kt, S as rt } from "./index-BzQ0j5xI.js";
 import { t as Qt, u as Zt } from "./useResponsive-JZ9xq-JV.js";
-import { u as it } from "./useNestedProp-y56W8I7J.js";
-import { u as el } from "./usePrinter-u-gQiRNz.js";
+import { u as it } from "./useNestedProp-DqpZEE3h.js";
+import { u as el } from "./usePrinter-CpG5jh_z.js";
 import { u as tl } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as ll } from "./useChartAccessibility-9icAAmYg.js";
-import al from "./Legend-ZW-PFcHg.js";
-import ol from "./Title-Dx8ctnVy.js";
-import { _ as sl } from "./Shape-BBbhObHC.js";
+import al from "./Legend-YPYnzTBz.js";
+import ol from "./Title-CJcZXNtK.js";
+import { _ as sl } from "./Shape-WvXjwML_.js";
 import { _ as ul } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { key: 1 }, cl = ["id"], dl = ["stop-color"], hl = ["offset", "stop-color"], yl = ["offset", "stop-color"], fl = ["stop-color"], pl = { key: 2 }, gl = ["id", "cx", "cy"], ml = ["stop-color", "stop-opacity"], bl = ["stop-color"], wl = ["id"], kl = ["id"], _l = ["id"], xl = ["flood-color"], $l = ["id"], Cl = ["flood-color"], Tl = ["d", "stroke", "filter"], Pl = ["d", "stroke", "filter"], Al = ["cx", "cy", "r", "fill", "filter"], Fl = { key: 6 }, Sl = ["stroke", "d"], Ll = { key: 0 }, zl = ["d", "fill", "stroke", "stroke-width", "filter"], Ol = ["d", "fill", "stroke", "stroke-width", "filter"], Ml = { key: 0 }, Nl = ["stroke", "d"], Yl = { key: 0 }, Xl = ["d", "stroke", "stroke-width", "filter"], Il = { key: 1 }, Dl = ["d", "fill", "stroke", "stroke-width", "filter"], Vl = ["d", "fill", "stroke", "stroke-width", "filter"], Bl = { key: 1 }, Gl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Rl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Wl = ["cx", "cy", "r", "stroke"], El = ["cx", "cy", "r", "fill"], Ul = { key: 0 }, jl = ["d", "fill", "onMouseenter", "onClick"], Hl = { key: 1 }, ql = ["cx", "cy", "r"], Jl = ["x", "y", "fill", "font-size"], Kl = ["x", "y", "fill", "font-size"], Ql = ["x", "y", "fill", "font-size"], Zl = ["x", "y", "fill", "font-size"], ea = ["filter"], ta = { key: 0 }, la = ["x", "y"], aa = { key: 1 }, oa = ["cx", "cy", "fill", "stroke", "filter", "onClick"], sa = ["cx", "cy", "fill", "stroke", "filter", "onClick"], ua = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], na = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], ra = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], ia = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], va = { key: 2 }, ca = ["x", "y", "width"], da = ["x", "y", "width"], ha = {
   key: 5,
@@ -33,7 +33,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
   },
   emits: ["selectLegend", "selectDatapoint"],
   setup($e, { expose: vt, emit: ct }) {
-    const dt = K(() => import("./vue-ui-accordion-BkA7rtwr.js")), ht = K(() => import("./DataTable-CsoAI95B.js")), yt = K(() => import("./PackageVersion-DCAZ9Z7V.js")), ft = K(() => import("./PenAndPaper-B9RP4oFj.js")), pt = K(() => import("./vue-ui-skeleton-miKWlCAi.js")), gt = K(() => import("./Tooltip-COHlzpZI.js")), mt = K(() => import("./UserOptions-CGn3YdRV.js")), { vue_ui_donut: bt } = Xt(), wt = Mt(), z = $e, ue = f({
+    const dt = K(() => import("./vue-ui-accordion-bpaEpjqI.js")), ht = K(() => import("./DataTable-CmbjnjRg.js")), yt = K(() => import("./PackageVersion-OcbP0WH2.js")), ft = K(() => import("./PenAndPaper-BgPXmpGI.js")), pt = K(() => import("./vue-ui-skeleton-CavMQlAm.js")), gt = K(() => import("./Tooltip-dXp8FaUj.js")), mt = K(() => import("./UserOptions-Cs7JW3dK.js")), { vue_ui_donut: bt } = Xt(), wt = Mt(), z = $e, ue = p({
       get() {
         return !!z.dataset && z.dataset.length;
       },
@@ -79,7 +79,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
         E.value && (ee.value && E.value.unobserve(ee.value), E.value.disconnect()), E.value = new ResizeObserver(l), ee.value = ne.value.parentNode, E.value.observe(ee.value);
       }
     }
-    const h = _(Vt()), kt = _(null), de = _(!1), pe = _(""), O = _(null), Oe = _(0);
+    const y = _(Vt()), kt = _(null), de = _(!1), pe = _(""), O = _(null), Oe = _(0);
     function Me() {
       const l = it({
         userConfig: z.config,
@@ -93,7 +93,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
         customPalette: jt[l.theme] || Z
       } : l;
     }
-    const e = f({
+    const e = p({
       get: () => Me(),
       set: (l) => l
     }), T = _(!0), B = W([]);
@@ -101,13 +101,13 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
       return new Promise((a) => {
         const v = l.length;
         B.value = Array(v).fill(0);
-        let m = 0;
+        let d = 0;
         l.forEach((k, $) => {
           setTimeout(() => {
             const R = performance.now();
             function I(ie) {
               const fe = Math.min((ie - R) / s, 1), Ot = rt(fe);
-              B.value[$] = k * Ot, B.value = [...B.value], fe < 1 ? requestAnimationFrame(I) : (B.value[$] = k, B.value = [...B.value], m += 1, m === v && a());
+              B.value[$] = k * Ot, B.value = [...B.value], fe < 1 ? requestAnimationFrame(I) : (B.value[$] = k, B.value = [...B.value], d += 1, d === v && a());
             }
             requestAnimationFrame(I);
           }, $ * t);
@@ -130,9 +130,9 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
       Ne(!1);
     }
     lt(() => z.config, (l) => {
-      e.value = Me(), ge.value = !e.value.userOptions.showOnChartHover, ze(), Fe.value += 1, Se.value += 1, Le.value += 1, d.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, d.value.showTable = e.value.table.show, d.value.showTooltip = e.value.style.chart.tooltip.show;
+      e.value = Me(), ge.value = !e.value.userOptions.showOnChartHover, ze(), Fe.value += 1, Se.value += 1, Le.value += 1, h.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, h.value.showTable = e.value.table.show, h.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const Xe = f(() => {
+    const Xe = p(() => {
       const { top: l, right: s, bottom: t, left: a } = e.value.style.chart.padding;
       return {
         css: `padding:${l}px ${s}px ${t}px ${a}px`,
@@ -142,10 +142,10 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
         left: a
       };
     }), { isPrinting: Ie, isImaging: De, generatePdf: Ve, generateImage: Be } = el({
-      elementId: `donut__${h.value}`,
+      elementId: `donut__${y.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-donut",
       options: e.value.userOptions.print
-    }), Ct = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ge = f(() => Bt(e.value.customPalette)), d = _({
+    }), Ct = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ge = p(() => Bt(e.value.customPalette)), h = _({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
@@ -154,10 +154,10 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
     }), n = _({
       height: 360,
       width: 512
-    }), te = f(() => {
+    }), te = p(() => {
       const l = e.value.style.chart.layout.donut.strokeWidth / 512, s = Math.min(n.value.width, n.value.height) * l, t = s > x.value ? x.value : s;
       return Math.max(t, 3);
-    }), Re = ct, G = f(() => z.dataset.map((l, s) => ({
+    }), Re = ct, G = p(() => z.dataset.map((l, s) => ({
       name: l.name,
       color: nt(l.color) || Ge.value[s] || Z[s] || Z[s % Z.length],
       value: l.values.reduce((t, a) => t + a, 0),
@@ -166,7 +166,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
       patternIndex: s,
       seriesIndex: s,
       ghost: !1,
-      pattern: `pattern_${h.value}_${s}`
+      pattern: `pattern_${y.value}_${s}`
     }))), M = W(G.value);
     lt(() => G.value, (l) => M.value = l);
     function Tt() {
@@ -177,19 +177,19 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
       }));
     }
     const V = _([]), q = _(!1);
-    function We({ from: l, to: s, duration: t, onUpdate: a, onDone: v, easing: m = rt }) {
+    function We({ from: l, to: s, duration: t, onUpdate: a, onDone: v, easing: d = rt }) {
       const k = performance.now();
       function $(R) {
-        const I = Math.min((R - k) / t, 1), ie = m(I), fe = l + (s - l) * ie;
+        const I = Math.min((R - k) / t, 1), ie = d(I), fe = l + (s - l) * ie;
         a(fe, I), I < 1 ? requestAnimationFrame($) : (a(s, 1), v && v());
       }
       requestAnimationFrame($);
     }
     function Ee(l) {
-      const s = G.value.find((v, m) => m === l);
-      let a = M.value.find((v, m) => m === l).value;
+      const s = G.value.find((v, d) => d === l);
+      let a = M.value.find((v, d) => d === l).value;
       if (V.value.includes(l)) {
-        let m = function() {
+        let d = function() {
           M.value = M.value.map(
             ($, R) => l === R ? { ...$, value: v } : $
           );
@@ -204,19 +204,19 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
               );
             },
             onDone: () => {
-              m(), q.value = !1;
+              d(), q.value = !1;
             }
           });
         };
         V.value = V.value.filter(($) => $ !== l);
         const v = s.value;
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? k() : m();
+        e.value.serieToggleAnimation.show && e.value.type === "classic" ? k() : d();
       } else if (V.value.length < G.value.length - 1) {
         let v = function() {
           V.value.push(l), M.value = M.value.map(
             (k, $) => l === $ ? { ...k, value: 0 } : k
           );
-        }, m = function() {
+        }, d = function() {
           q.value = !0, We({
             from: a,
             to: 0,
@@ -231,7 +231,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
             }
           });
         };
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? m() : v();
+        e.value.serieToggleAnimation.show && e.value.type === "classic" ? d() : v();
       }
       Re("selectLegend", U.value.map((v) => ({
         name: v.name,
@@ -239,7 +239,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
         value: v.value
       })));
     }
-    const Pt = f(() => z.dataset.reduce((l, s) => l + s.values.reduce((t, a) => t + a, 0), 0)), U = f(() => {
+    const Pt = p(() => z.dataset.reduce((l, s) => l + s.values.reduce((t, a) => t + a, 0), 0)), U = p(() => {
       if (T.value) {
         const l = B.value.map((t, a) => ({
           ...G.value[a],
@@ -264,7 +264,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
           ...l,
           seriesIndex: s
         })).filter((l, s) => !V.value.includes(s));
-    }), Ue = f(() => z.dataset.map((l, s) => ({
+    }), Ue = p(() => z.dataset.map((l, s) => ({
       name: l.name,
       color: nt(l.color) || Ge.value[s] || Z[s] || Z[s % Z.length],
       value: (l.values || []).reduce((t, a) => t + a, 0),
@@ -276,17 +276,17 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
       opacity: V.value.includes(s) ? 0.5 : 1,
       segregate: () => !q.value && Ee(s),
       isSegregated: V.value.includes(s)
-    }))), At = f(() => ({
+    }))), At = p(() => ({
       cy: "donut-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), x = f(() => {
+    })), x = p(() => {
       const l = Math.min(n.value.width / 3, n.value.height / 3);
       return l < 55 ? 55 : l;
-    }), A = f(() => Gt({ series: U.value }, n.value.width / 2, n.value.height / 2, x.value, x.value, 1.99999, 2, 1, 360, 105.25, te.value)), Y = f(() => A.value.filter((l) => !l.ghost)), c = f(() => {
+    }), A = p(() => Gt({ series: U.value }, n.value.width / 2, n.value.height / 2, x.value, x.value, 1.99999, 2, 1, 360, 105.25, te.value)), Y = p(() => A.value.filter((l) => !l.ghost)), c = p(() => {
       const l = Math.max(...U.value.map((t) => t.value)), s = U.value.map((t) => t.value / l);
       return Rt({
         series: s,
@@ -323,14 +323,14 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
     function St(l) {
       return [...l].map((s) => s.value).reduce((s, t) => s + t, 0);
     }
-    const F = f(() => U.value.map((l) => l.value).reduce((l, s) => l + s, 0)), je = f(() => F.value / U.value.length), He = f(() => (l) => q.value ? l.proportion * 100 : l.value / F.value * 100), we = _(null), re = _(!1);
+    const F = p(() => U.value.map((l) => l.value).reduce((l, s) => l + s, 0)), je = p(() => F.value / U.value.length), He = p(() => (l) => q.value ? l.proportion * 100 : l.value / F.value * 100), we = _(null), re = _(!1);
     function qe({ datapoint: l, relativeIndex: s, seriesIndex: t, show: a = !1 }) {
       we.value = { datapoint: l, seriesIndex: t, config: e.value, series: G.value }, de.value = a, O.value = s;
       let v = "";
-      const m = e.value.style.chart.tooltip.customFormat;
-      if (re.value = !1, Kt(m))
+      const d = e.value.style.chart.tooltip.customFormat;
+      if (re.value = !1, Kt(d))
         try {
-          const k = m({
+          const k = d({
             seriesIndex: t,
             datapoint: l,
             series: G.value,
@@ -341,7 +341,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
           console.warn("Custom format cannot be applied."), re.value = !1;
         }
       if (!re.value) {
-        if (v += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l.name}</div>`, v += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${l.color}"/>${wt.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${h.value}_${t})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (v += `<b>${D(
+        if (v += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l.name}</div>`, v += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${l.color}"/>${wt.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${y.value}_${t})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (v += `<b>${D(
           e.value.style.chart.layout.labels.value.formatter,
           l.value,
           N({
@@ -376,35 +376,35 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
       }
     }
     function J(l) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(O.value) && O.value !== l ? `url(#blur_${h.value})` : "";
+      return e.value.useBlurOnHover && ![null, void 0].includes(O.value) && O.value !== l ? `url(#blur_${y.value})` : "";
     }
-    const j = f(() => {
+    const j = p(() => {
       const l = U.value.map((t) => ({
         name: t.name,
         color: t.color
       })), s = U.value.map((t) => t.value);
       return { head: l, body: s };
     });
-    function Je() {
+    function Je(l = null) {
       Yt(() => {
-        const l = j.value.head.map((a, v) => [[
-          a.name
-        ], [j.value.body[v]], [isNaN(j.value.body[v] / F.value) ? "-" : j.value.body[v] / F.value * 100]]), s = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(l), t = qt(s);
-        Jt({ csvContent: t, title: e.value.style.chart.title.text || "vue-ui-donut" });
+        const s = j.value.head.map((v, d) => [[
+          v.name
+        ], [j.value.body[d]], [isNaN(j.value.body[d] / F.value) ? "-" : j.value.body[d] / F.value * 100]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(s), a = qt(t);
+        l ? l(a) : Jt({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-donut" });
       });
     }
-    const he = f(() => {
+    const he = p(() => {
       const l = [
         ' <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>',
         N({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: F.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
         "100%"
-      ], s = j.value.head.map((v, m) => [
+      ], s = j.value.head.map((v, d) => [
         {
           color: v.color,
           name: v.name
         },
-        j.value.body[m],
-        isNaN(j.value.body[m] / F.value) ? "-" : (j.value.body[m] / F.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
+        j.value.body[d],
+        isNaN(j.value.body[d] / F.value) ? "-" : (j.value.body[d] / F.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
       ]), t = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -432,7 +432,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
     function Lt(l) {
       ae.value = l, Oe.value += 1;
     }
-    const Ke = f(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
+    const Ke = p(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
     function zt(l) {
       return l.toFixed(e.value.style.chart.legend.roundingPercentage).split("").map((s) => "-").join("");
     }
@@ -440,13 +440,13 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
       Re("selectDatapoint", { datapoint: l, index: s });
     }
     function Qe() {
-      d.value.showTable = !d.value.showTable;
+      h.value.showTable = !h.value.showTable;
     }
     function Ze() {
-      d.value.dataLabels.show = !d.value.dataLabels.show;
+      h.value.dataLabels.show = !h.value.dataLabels.show;
     }
     function et() {
-      d.value.showTooltip = !d.value.showTooltip;
+      h.value.showTooltip = !h.value.showTooltip;
     }
     const ye = _(!1);
     function ke() {
@@ -466,7 +466,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
       ref: ne,
       class: _e(`vue-ui-donut ${ae.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: b(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `donut__${h.value}`,
+      id: `donut__${y.value}`,
       onMouseenter: xt,
       onMouseleave: $t
     }, [
@@ -478,7 +478,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
         svgRef: u(me),
         onClose: ke
       }, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : i("", !0),
-      p(l.$slots, "userConfig", {}, void 0, !0),
+      g(l.$slots, "userConfig", {}, void 0, !0),
       Ct.value ? (o(), r("div", {
         key: 1,
         ref_key: "noTitle",
@@ -514,7 +514,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
         color: e.value.style.chart.color,
         isPrinting: u(Ie),
         isImaging: u(De),
-        uid: h.value,
+        uid: y.value,
         hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -525,7 +525,8 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
         isFullscreen: ae.value,
         chartElement: ne.value,
         position: e.value.userOptions.position,
-        isTooltip: d.value.showTooltip,
+        callbacks: e.value.userOptions.callbacks,
+        isTooltip: h.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: ye.value,
@@ -544,67 +545,67 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
         l.$slots.menuIcon ? {
           name: "menuIcon",
           fn: C(({ isOpen: t, color: a }) => [
-            p(l.$slots, "menuIcon", oe(se({ isOpen: t, color: a })), void 0, !0)
+            g(l.$slots, "menuIcon", oe(se({ isOpen: t, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         l.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: C(() => [
-            p(l.$slots, "optionTooltip", {}, void 0, !0)
+            g(l.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         l.$slots.optionPdf ? {
           name: "optionPdf",
           fn: C(() => [
-            p(l.$slots, "optionPdf", {}, void 0, !0)
+            g(l.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         l.$slots.optionCsv ? {
           name: "optionCsv",
           fn: C(() => [
-            p(l.$slots, "optionCsv", {}, void 0, !0)
+            g(l.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         l.$slots.optionImg ? {
           name: "optionImg",
           fn: C(() => [
-            p(l.$slots, "optionImg", {}, void 0, !0)
+            g(l.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         l.$slots.optionTable ? {
           name: "optionTable",
           fn: C(() => [
-            p(l.$slots, "optionTable", {}, void 0, !0)
+            g(l.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         l.$slots.optionLabels ? {
           name: "optionLabels",
           fn: C(() => [
-            p(l.$slots, "optionLabels", {}, void 0, !0)
+            g(l.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         l.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: C(({ toggleFullscreen: t, isFullscreen: a }) => [
-            p(l.$slots, "optionFullscreen", oe(se({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
+            g(l.$slots, "optionFullscreen", oe(se({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         l.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: C(({ toggleAnnotator: t, isAnnotator: a }) => [
-            p(l.$slots, "optionAnnotator", oe(se({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
+            g(l.$slots, "optionAnnotator", oe(se({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
           ]),
           key: "8"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : i("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "callbacks", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : i("", !0),
       ue.value ? (o(), r("svg", {
         key: 4,
         ref_key: "svgRef",
@@ -625,28 +626,28 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
             pointerEvents: "none"
           }
         }, [
-          p(l.$slots, "chart-background", {}, void 0, !0)
+          g(l.$slots, "chart-background", {}, void 0, !0)
         ], 8, il)) : i("", !0),
         e.value.type === "classic" && !isNaN(te.value / x.value) ? (o(), r("defs", vl, [
           e.value.style.chart.useGradient ? (o(), r("radialGradient", {
             key: 0,
-            id: `gradient_${h.value}`
+            id: `gradient_${y.value}`
           }, [
-            y("stop", {
+            f("stop", {
               offset: "0%",
               "stop-color": u(ve)(e.value.style.chart.backgroundColor, 0),
               "stop-opacity": "0"
             }, null, 8, dl),
-            y("stop", {
+            f("stop", {
               offset: `${(1 - te.value / x.value) * 100}%`,
               "stop-color": u(ve)("#FFFFFF", 0),
               "stop-opacity": "0"
             }, null, 8, hl),
-            y("stop", {
+            f("stop", {
               offset: `${(1 - te.value / x.value / 2) * 100}%`,
               "stop-color": u(ve)("#FFFFFF", e.value.style.chart.gradientIntensity)
             }, null, 8, yl),
-            y("stop", {
+            f("stop", {
               offset: "100%",
               "stop-color": u(ve)(e.value.style.chart.backgroundColor, 0),
               "stop-opacity": "0"
@@ -654,46 +655,46 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
           ], 8, cl)) : i("", !0)
         ])) : i("", !0),
         e.value.type === "polar" ? (o(), r("defs", pl, [
-          (o(!0), r(g, null, S(c.value, (t, a) => (o(), r("radialGradient", {
-            id: `polar_gradient_${a}_${h.value}`,
+          (o(!0), r(m, null, S(c.value, (t, a) => (o(), r("radialGradient", {
+            id: `polar_gradient_${a}_${y.value}`,
             cx: (isNaN(t.middlePoint.x / n.value.width * 100) ? 0 : t.middlePoint.x / n.value.width * 100) + "%",
             cy: (isNaN(t.middlePoint.y / n.value.height * 100) ? 0 : t.middlePoint.y / n.value.height * 100) + "%",
             r: "62%"
           }, [
-            y("stop", {
+            f("stop", {
               offset: "0%",
               "stop-color": u(Et)(A.value[a].color, 0.05),
               "stop-opacity": e.value.style.chart.gradientIntensity / 100
             }, null, 8, ml),
-            y("stop", {
+            f("stop", {
               offset: "100%",
               "stop-color": A.value[a].color
             }, null, 8, bl)
           ], 8, gl))), 256))
         ])) : i("", !0),
-        y("defs", null, [
-          y("filter", {
-            id: `blur_${h.value}`,
+        f("defs", null, [
+          f("filter", {
+            id: `blur_${y.value}`,
             x: "-50%",
             y: "-50%",
             width: "200%",
             height: "200%"
           }, [
-            y("feGaussianBlur", {
+            f("feGaussianBlur", {
               in: "SourceGraphic",
               stdDeviation: 2,
-              id: `blur_std_${h.value}`
+              id: `blur_std_${y.value}`
             }, null, 8, kl),
-            s[6] || (s[6] = y("feColorMatrix", {
+            s[6] || (s[6] = f("feColorMatrix", {
               type: "saturate",
               values: "0"
             }, null, -1))
           ], 8, wl),
-          y("filter", {
-            id: `shadow_${h.value}`,
+          f("filter", {
+            id: `shadow_${y.value}`,
             "color-interpolation-filters": "sRGB"
           }, [
-            y("feDropShadow", {
+            f("feDropShadow", {
               dx: "0",
               dy: "0",
               stdDeviation: "10",
@@ -701,15 +702,15 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
               "flood-color": e.value.style.chart.layout.donut.shadowColor
             }, null, 8, xl)
           ], 8, _l),
-          y("filter", {
-            id: `drop_shadow_${h.value}`,
+          f("filter", {
+            id: `drop_shadow_${y.value}`,
             "color-interpolation-filters": "sRGB",
             x: "-50%",
             y: "-50%",
             width: "200%",
             height: "200%"
           }, [
-            y("feDropShadow", {
+            f("feDropShadow", {
               dx: "0",
               dy: "0",
               stdDeviation: "3",
@@ -718,8 +719,8 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
             }, null, 8, Cl)
           ], 8, $l)
         ]),
-        e.value.type === "classic" ? (o(!0), r(g, { key: 3 }, S(A.value.filter((t) => !t.ghost), (t, a) => (o(), r("g", null, [
-          X(t) && d.value.dataLabels.show ? (o(), r("path", {
+        e.value.type === "classic" ? (o(!0), r(m, { key: 3 }, S(A.value.filter((t) => !t.ghost), (t, a) => (o(), r("g", null, [
+          X(t) && h.value.dataLabels.show ? (o(), r("path", {
             key: 0,
             d: u(Ut)(t, { x: n.value.width / 2, y: n.value.height / 2 }, 16, 16, !1, !1, te.value, 12, e.value.style.chart.layout.curvedMarkers),
             stroke: t.color,
@@ -730,8 +731,8 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
             filter: J(a)
           }, null, 8, Tl)) : i("", !0)
         ]))), 256)) : i("", !0),
-        e.value.type === "polar" ? (o(!0), r(g, { key: 4 }, S(A.value.filter((t) => !t.ghost), (t, a) => (o(), r("g", null, [
-          X(t) && d.value.dataLabels.show ? (o(), r("path", {
+        e.value.type === "polar" ? (o(!0), r(m, { key: 4 }, S(A.value.filter((t) => !t.ghost), (t, a) => (o(), r("g", null, [
+          X(t) && h.value.dataLabels.show ? (o(), r("path", {
             key: 0,
             d: `M ${u(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x},${u(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y} ${c.value[a].middlePoint.x},${c.value[a].middlePoint.y}`,
             stroke: t.color,
@@ -751,23 +752,23 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
           cy: n.value.height / 2,
           r: x.value <= 0 ? 10 : x.value,
           fill: e.value.style.chart.backgroundColor,
-          filter: `url(#shadow_${h.value})`
+          filter: `url(#shadow_${y.value})`
         }, null, 8, Al)) : i("", !0),
         l.$slots.pattern ? (o(), r("g", Fl, [
-          (o(!0), r(g, null, S($e.dataset, (t, a) => (o(), r("defs", {
+          (o(!0), r(m, null, S($e.dataset, (t, a) => (o(), r("defs", {
             key: `pattern-${t.patternIndex}`
           }, [
-            p(l.$slots, "pattern", ot({ ref_for: !0 }, { seriesIndex: a, patternId: `pattern_${h.value}_${a}` }), void 0, !0)
+            g(l.$slots, "pattern", ot({ ref_for: !0 }, { seriesIndex: a, patternId: `pattern_${y.value}_${a}` }), void 0, !0)
           ]))), 128))
         ])) : i("", !0),
-        F.value && e.value.type === "classic" ? (o(), r(g, { key: 7 }, [
-          (o(!0), r(g, null, S(Y.value, (t, a) => (o(), r("path", {
+        F.value && e.value.type === "classic" ? (o(), r(m, { key: 7 }, [
+          (o(!0), r(m, null, S(Y.value, (t, a) => (o(), r("path", {
             stroke: e.value.style.chart.backgroundColor,
             d: t.arcSlice,
             fill: "#FFFFFF"
           }, null, 8, Sl))), 256)),
           l.$slots.pattern ? (o(), r("g", Ll, [
-            (o(!0), r(g, null, S(Y.value, (t, a) => (o(), r("path", {
+            (o(!0), r(m, null, S(Y.value, (t, a) => (o(), r("path", {
               class: "vue-ui-donut-arc-path",
               d: t.arcSlice,
               fill: `url(#${t.pattern})`,
@@ -776,7 +777,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
               filter: J(a)
             }, null, 8, zl))), 256))
           ])) : i("", !0),
-          (o(!0), r(g, null, S(Y.value, (t, a) => (o(), r("path", {
+          (o(!0), r(m, null, S(Y.value, (t, a) => (o(), r("path", {
             class: "vue-ui-donut-arc-path",
             d: t.arcSlice,
             fill: u(ve)(t.color, 80),
@@ -785,9 +786,9 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
             filter: J(a)
           }, null, 8, Ol))), 256))
         ], 64)) : i("", !0),
-        F.value && e.value.type === "polar" ? (o(), r(g, { key: 8 }, [
+        F.value && e.value.type === "polar" ? (o(), r(m, { key: 8 }, [
           A.value.length > 1 ? (o(), r("g", Ml, [
-            (o(!0), r(g, null, S(Y.value, (t, a) => (o(), r("path", {
+            (o(!0), r(m, null, S(Y.value, (t, a) => (o(), r("path", {
               stroke: e.value.style.chart.backgroundColor,
               d: c.value[a].path,
               fill: "#FFFFFF",
@@ -796,20 +797,20 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
               })
             }, null, 12, Nl))), 256)),
             e.value.style.chart.layout.donut.useShadow ? (o(), r("g", Yl, [
-              (o(!0), r(g, null, S(Y.value, (t, a) => (o(), r("path", {
+              (o(!0), r(m, null, S(Y.value, (t, a) => (o(), r("path", {
                 class: "vue-ui-donut-arc-path",
                 d: c.value[a].path,
                 fill: "transparent",
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-                filter: `url(#drop_shadow_${h.value})`,
+                filter: `url(#drop_shadow_${y.value})`,
                 style: b({
                   transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                 })
               }, null, 12, Xl))), 256))
             ])) : i("", !0),
             l.$slots.pattern ? (o(), r("g", Il, [
-              (o(!0), r(g, null, S(Y.value, (t, a) => (o(), r("path", {
+              (o(!0), r(m, null, S(Y.value, (t, a) => (o(), r("path", {
                 class: "vue-ui-donut-arc-path",
                 d: c.value[a].path,
                 fill: `url(#${t.pattern})`,
@@ -821,10 +822,10 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
                 })
               }, null, 12, Dl))), 256))
             ])) : i("", !0),
-            (o(!0), r(g, null, S(Y.value, (t, a) => (o(), r("path", {
+            (o(!0), r(m, null, S(Y.value, (t, a) => (o(), r("path", {
               class: "vue-ui-donut-arc-path",
               d: c.value[a].path,
-              fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${a}_${h.value})` : t.color,
+              fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${a}_${y.value})` : t.color,
               stroke: e.value.style.chart.backgroundColor,
               "stroke-width": e.value.style.chart.layout.donut.borderWidth,
               filter: J(a),
@@ -838,15 +839,15 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
               cx: n.value.width / 2,
               cy: n.value.height / 2,
               r: x.value,
-              fill: `url(#pattern_${h.value}_${A.value[0].patternIndex})`,
+              fill: `url(#pattern_${y.value}_${A.value[0].patternIndex})`,
               stroke: e.value.style.chart.backgroundColor,
               "stroke-width": e.value.style.chart.layout.donut.borderWidth
             }, null, 8, Gl)) : i("", !0),
-            y("circle", {
+            f("circle", {
               cx: n.value.width / 2,
               cy: n.value.height / 2,
               r: x.value,
-              fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${h.value})` : A.value[0].color,
+              fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${y.value})` : A.value[0].color,
               stroke: e.value.style.chart.backgroundColor,
               "stroke-width": e.value.style.chart.layout.donut.borderWidth
             }, null, 8, Rl)
@@ -867,11 +868,11 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
             /* This might require adjustments */
             x.value <= 0 ? 10 : x.value
           ),
-          fill: `url(#gradient_${h.value})`
+          fill: `url(#gradient_${y.value})`
         }, null, 8, El)) : i("", !0),
-        F.value ? (o(), r(g, { key: 11 }, [
+        F.value ? (o(), r(m, { key: 11 }, [
           A.value.length > 1 || e.value.type === "classic" ? (o(), r("g", Ul, [
-            (o(!0), r(g, null, S(A.value.filter((t) => !t.ghost), (t, a) => (o(), r("path", {
+            (o(!0), r(m, null, S(A.value.filter((t) => !t.ghost), (t, a) => (o(), r("path", {
               d: e.value.type === "classic" ? t.arcSlice : c.value[a].path,
               fill: O.value === a ? "rgba(0,0,0,0.1)" : "transparent",
               onMouseenter: (v) => qe({
@@ -886,7 +887,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
               onClick: (v) => H(t, a)
             }, null, 40, jl))), 256))
           ])) : (o(), r("g", Hl, [
-            y("circle", {
+            f("circle", {
               cx: n.value.width / 2,
               cy: n.value.height / 2,
               r: x.value,
@@ -904,7 +905,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
             }, null, 40, ql)
           ]))
         ], 64)) : i("", !0),
-        e.value.type === "classic" ? (o(), r(g, { key: 12 }, [
+        e.value.type === "classic" ? (o(), r(m, { key: 12 }, [
           e.value.style.chart.layout.labels.hollow.total.show ? (o(), r("text", {
             key: 0,
             "text-anchor": "middle",
@@ -959,7 +960,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
             })
           )), 13, Zl)) : i("", !0)
         ], 64)) : i("", !0),
-        (o(!0), r(g, null, S(Y.value.filter((t) => !t.ghost), (t, a) => (o(), r("g", {
+        (o(!0), r(m, null, S(Y.value.filter((t) => !t.ghost), (t, a) => (o(), r("g", {
           filter: J(a),
           class: _e({ animated: e.value.useCssAnimation })
         }, [
@@ -971,12 +972,12 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
               height: "60",
               style: { overflow: "visible" }
             }, [
-              y("div", null, [
-                p(l.$slots, "dataLabel", ot({ ref_for: !0 }, {
+              f("div", null, [
+                g(l.$slots, "dataLabel", ot({ ref_for: !0 }, {
                   datapoint: t,
                   isBlur: !e.value.useBlurOnHover || [null, void 0].includes(O.value) || O.value === a,
                   isSafari: Ke.value,
-                  isVisible: X(t) && d.value.dataLabels.show,
+                  isVisible: X(t) && h.value.dataLabels.show,
                   textAlign: u(w)(t, !0, 16, !0).anchor,
                   flexAlign: u(w)(t, !0, 16).anchor,
                   percentage: be(t, Y.value)
@@ -984,8 +985,8 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
               ])
             ], 8, la))
           ])) : (o(), r("g", aa, [
-            e.value.type === "classic" ? (o(), r(g, { key: 0 }, [
-              X(t) && d.value.dataLabels.show ? (o(), r("circle", {
+            e.value.type === "classic" ? (o(), r(m, { key: 0 }, [
+              X(t) && h.value.dataLabels.show ? (o(), r("circle", {
                 key: 0,
                 cx: u(w)(t).x,
                 cy: u(ce)(t) - 3.5,
@@ -993,12 +994,12 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": 1,
                 r: 3,
-                filter: !e.value.useBlurOnHover || [null, void 0].includes(O.value) || O.value === a ? "" : `url(#blur_${h.value})`,
+                filter: !e.value.useBlurOnHover || [null, void 0].includes(O.value) || O.value === a ? "" : `url(#blur_${y.value})`,
                 onClick: (v) => H(t, a)
               }, null, 8, oa)) : i("", !0)
             ], 64)) : i("", !0),
-            e.value.type === "polar" ? (o(), r(g, { key: 1 }, [
-              X(t) && d.value.dataLabels.show ? (o(), r("circle", {
+            e.value.type === "polar" ? (o(), r(m, { key: 1 }, [
+              X(t) && h.value.dataLabels.show ? (o(), r("circle", {
                 key: 0,
                 cx: u(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
                 cy: u(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
@@ -1006,15 +1007,15 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
                 stroke: e.value.style.chart.backgroundColor,
                 "stroke-width": 1,
                 r: 3,
-                filter: !e.value.useBlurOnHover || [null, void 0].includes(O.value) || O.value === a ? "" : `url(#blur_${h.value})`,
+                filter: !e.value.useBlurOnHover || [null, void 0].includes(O.value) || O.value === a ? "" : `url(#blur_${y.value})`,
                 onClick: (v) => H(t, a),
                 style: b({
                   transition: T.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                 })
               }, null, 12, sa)) : i("", !0)
             ], 64)) : i("", !0),
-            e.value.type === "classic" ? (o(), r(g, { key: 2 }, [
-              X(t) && d.value.dataLabels.show ? (o(), r("text", {
+            e.value.type === "classic" ? (o(), r(m, { key: 2 }, [
+              X(t) && h.value.dataLabels.show ? (o(), r("text", {
                 key: 0,
                 "text-anchor": u(w)(t, !0, 12).anchor,
                 x: u(w)(t, !0, 12).x,
@@ -1034,7 +1035,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
                 }),
                 { datapoint: t }
               )})` : ""), 13, ua)) : i("", !0),
-              X(t) && d.value.dataLabels.show ? (o(), r("text", {
+              X(t) && h.value.dataLabels.show ? (o(), r("text", {
                 key: 1,
                 "text-anchor": u(w)(t).anchor,
                 x: u(w)(t, !0, 12).x,
@@ -1045,8 +1046,8 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
                 onClick: (v) => H(t, a)
               }, P(t.name), 13, na)) : i("", !0)
             ], 64)) : i("", !0),
-            e.value.type === "polar" ? (o(), r(g, { key: 3 }, [
-              X(t) && d.value.dataLabels.show ? (o(), r("text", {
+            e.value.type === "polar" ? (o(), r(m, { key: 3 }, [
+              X(t) && h.value.dataLabels.show ? (o(), r("text", {
                 key: 0,
                 "text-anchor": le(c.value[a].middlePoint),
                 x: u(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
@@ -1069,7 +1070,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
                 }),
                 { datapoint: t }
               )})` : ""), 13, ra)) : i("", !0),
-              X(t) && d.value.dataLabels.show ? (o(), r("text", {
+              X(t) && h.value.dataLabels.show ? (o(), r("text", {
                 key: 1,
                 "text-anchor": le(c.value[a].middlePoint),
                 x: u(L)({ initX: c.value[a].middlePoint.x, initY: c.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
@@ -1084,7 +1085,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
               }, P(t.name), 13, ia)) : i("", !0)
             ], 64)) : i("", !0)
           ])),
-          d.value.dataLabels.show && e.value.style.chart.comments.show && t.comment ? (o(), r("g", va, [
+          h.value.dataLabels.show && e.value.style.chart.comments.show && t.comment ? (o(), r("g", va, [
             X(t) && e.value.type === "classic" ? (o(), r("foreignObject", {
               key: 0,
               x: e.value.style.chart.comments.offsetX + (u(w)(t, !0).anchor === "end" ? u(w)(t).x - e.value.style.chart.comments.width : u(w)(t, !0).anchor === "middle" ? u(w)(t).x - e.value.style.chart.comments.width / 2 : u(w)(t).x),
@@ -1093,8 +1094,8 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
               height: "200",
               style: { overflow: "visible", "pointer-events": "none" }
             }, [
-              y("div", null, [
-                p(l.$slots, "plot-comment", {
+              f("div", null, [
+                g(l.$slots, "plot-comment", {
                   plot: { ...t, textAlign: u(w)(t, !0, 16, !0).anchor, flexAlign: u(w)(t, !0, 16).anchor, isFirstLoad: T.value }
                 }, void 0, !0)
               ])
@@ -1111,18 +1112,18 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
                 pointerEvents: "none"
               })
             }, [
-              y("div", null, [
-                p(l.$slots, "plot-comment", {
+              f("div", null, [
+                g(l.$slots, "plot-comment", {
                   plot: { ...t, textAlign: le(c.value[a].middlePoint), flexAlign: le(c.value[a].middlePoint), isFirstLoad: T.value }
                 }, void 0, !0)
               ])
             ], 12, da)) : i("", !0)
           ])) : i("", !0)
         ], 10, ea))), 256)),
-        p(l.$slots, "svg", { svg: n.value }, void 0, !0)
+        g(l.$slots, "svg", { svg: n.value }, void 0, !0)
       ], 14, rl)) : i("", !0),
       l.$slots.watermark ? (o(), r("div", ha, [
-        p(l.$slots, "watermark", oe(se({ isPrinting: u(Ie) || u(De) })), void 0, !0)
+        g(l.$slots, "watermark", oe(se({ isPrinting: u(Ie) || u(De) })), void 0, !0)
       ])) : i("", !0),
       ue.value ? i("", !0) : (o(), Q(u(pt), {
         key: 6,
@@ -1137,7 +1138,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
           }
         }
       }, null, 8, ["config"])),
-      y("div", {
+      f("div", {
         ref_key: "chartLegend",
         ref: Te
       }, [
@@ -1148,7 +1149,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
           onClickMarker: s[4] || (s[4] = ({ i: t }) => Ee(t))
         }, at({
           item: C(({ legend: t, index: a }) => [
-            y("div", {
+            f("div", {
               style: b(`opacity:${V.value.includes(a) ? 0.5 : 1}`),
               onClick: (v) => t.segregate()
             }, [
@@ -1187,13 +1188,13 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
                 radius: 30,
                 stroke: "none",
                 plot: { x: 30, y: 30 },
-                fill: `url(#pattern_${h.value}_${a})`
+                fill: `url(#pattern_${y.value}_${a})`
               }, null, 8, ["shape", "fill"])
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["legendSet", "config"])) : i("", !0),
-        p(l.$slots, "legend", { legend: Ue.value }, void 0, !0)
+        g(l.$slots, "legend", { legend: Ue.value }, void 0, !0)
       ], 512),
       l.$slots.source ? (o(), r("div", {
         key: 7,
@@ -1201,10 +1202,10 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
         ref: Pe,
         dir: "auto"
       }, [
-        p(l.$slots, "source", {}, void 0, !0)
+        g(l.$slots, "source", {}, void 0, !0)
       ], 512)) : i("", !0),
       xe(u(gt), {
-        show: d.value.showTooltip && de.value,
+        show: h.value.showTooltip && de.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         fontSize: e.value.style.chart.tooltip.fontSize,
@@ -1220,10 +1221,10 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
         isFullscreen: ae.value
       }, {
         "tooltip-before": C(() => [
-          p(l.$slots, "tooltip-before", oe(se({ ...we.value })), void 0, !0)
+          g(l.$slots, "tooltip-before", oe(se({ ...we.value })), void 0, !0)
         ]),
         "tooltip-after": C(() => [
-          p(l.$slots, "tooltip-after", oe(se({ ...we.value })), void 0, !0)
+          g(l.$slots, "tooltip-after", oe(se({ ...we.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen"]),
@@ -1231,7 +1232,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
         key: 8,
         hideDetails: "",
         config: {
-          open: d.value.showTable,
+          open: h.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -1251,10 +1252,10 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
             body: he.value.body,
             config: he.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: s[5] || (s[5] = (t) => d.value.showTable = !1)
+            onClose: s[5] || (s[5] = (t) => h.value.showTable = !1)
           }, {
             th: C(({ th: t }) => [
-              y("div", {
+              f("div", {
                 innerHTML: t,
                 style: { display: "flex", "align-items": "center" }
               }, null, 8, ga)
@@ -1286,7 +1287,7 @@ const nl = ["id"], rl = ["xmlns", "viewBox"], il = ["width", "height"], vl = { k
       }, 8, ["config"])) : i("", !0)
     ], 46, nl));
   }
-}, Sa = /* @__PURE__ */ ul(ma, [["__scopeId", "data-v-ce420fe5"]]);
+}, Sa = /* @__PURE__ */ ul(ma, [["__scopeId", "data-v-e6ceb7ec"]]);
 export {
   Sa as default
 };