vue-data-ui 2.3.74 → 2.3.75

package/dist/{vue-ui-donut-QQ1fWWvc.js → vue-ui-donut-DRPSwmGr.js}

@@ -1,25 +1,25 @@
-import { computed as g, ref as d, onMounted as Me, onBeforeUnmount as Ge, watch as Ee, openBlock as s, createElementBlock as n, normalizeClass as ue, normalizeStyle as S, renderSlot as p, createVNode as se, createCommentVNode as v, createBlock as Q, unref as o, createSlots as Ue, withCtx as w, normalizeProps as Y, guardReactiveProps as H, createElementVNode as b, Fragment as V, renderList as W, toDisplayString as _, createTextVNode as Se, nextTick as je, pushScopeId as Re, popScopeId as Ye } from "vue";
-import { u as He, o as We, e as Te, g as Xe, c as qe, t as Je, a as Ke, p as D, b as Qe, d as Z, m as Ze, f as C, X as el, w as ll, j as tl, E as al, i as T, k as y, n as X, x as ol, q as ul, r as sl } from "./index-C8SH0f2u.js";
-import { t as rl, u as nl } from "./useResponsive-NZB-WLRF.js";
-import { _ as il } from "./Title-DZjnxQdN.js";
-import { u as vl, U as cl } from "./usePrinter-Dj50NAxo.js";
-import { D as dl } from "./DataTable-CKdV-L0e.js";
-import { _ as hl } from "./Tooltip--kgFEVZs.js";
-import { L as yl } from "./Legend-Cj7T-DqJ.js";
-import fl from "./vue-ui-skeleton-B4eWLjH3.js";
-import bl from "./vue-ui-accordion-YHleIgkV.js";
-import { u as Fe } from "./useNestedProp-lS_T5lM3.js";
-import { _ as gl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = ["xmlns", "viewBox"], kl = ["id"], _l = ["stop-color"], Cl = ["stop-color"], xl = ["stop-color"], $l = ["id"], Ll = ["id"], Sl = /* @__PURE__ */ pl(() => /* @__PURE__ */ b("feColorMatrix", {
+import { computed as g, ref as v, onMounted as Re, onBeforeUnmount as Ye, watch as Ne, openBlock as s, createElementBlock as n, normalizeClass as ue, normalizeStyle as T, renderSlot as p, createBlock as V, createCommentVNode as c, unref as o, createSlots as He, withCtx as w, normalizeProps as H, guardReactiveProps as W, createElementVNode as b, Fragment as M, renderList as X, toDisplayString as _, createTextVNode as Pe, createVNode as We, nextTick as Xe, pushScopeId as qe, popScopeId as Je } from "vue";
+import { u as Ke, o as Qe, e as Oe, g as Ze, c as el, b as ll, d as Z, p as D, m as tl, f as C, X as al, w as ol, j as ul, E as sl, i as F, k as y, n as q, t as rl, a as nl, x as il, q as vl, r as cl } from "./index-Cm4Iry5c.js";
+import { t as dl, u as hl } from "./useResponsive-NZB-WLRF.js";
+import { _ as yl } from "./Title-C26I_HC3.js";
+import { u as fl, U as bl } from "./usePrinter-B8RnF8_q.js";
+import { D as gl } from "./DataTable-CQANRZju.js";
+import { _ as pl } from "./Tooltip-CH8GmDCG.js";
+import { L as ml } from "./Legend-DX1kv21U.js";
+import wl from "./vue-ui-skeleton-C1oUnz7R.js";
+import kl from "./vue-ui-accordion-Cb6XBCbu.js";
+import { u as Ae } from "./useNestedProp-CurQIHTa.js";
+import { _ as _l } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Cl = (G) => (qe("data-v-315950a4"), G = G(), Je(), G), xl = ["id"], $l = ["xmlns", "viewBox"], Sl = ["id"], Ll = ["stop-color"], Tl = ["stop-color"], Fl = ["stop-color"], zl = ["id"], Nl = ["id"], Pl = /* @__PURE__ */ Cl(() => /* @__PURE__ */ b("feColorMatrix", {
   type: "saturate",
   values: "0"
-}, null, -1)), Tl = ["id"], Fl = ["flood-color"], zl = ["d", "stroke", "filter"], Nl = ["cx", "cy", "r", "fill", "filter"], Pl = ["stroke", "d"], Ol = ["d", "fill", "stroke", "stroke-width", "filter"], Al = ["cx", "cy", "r", "fill", "stroke"], Dl = ["cx", "cy", "r", "fill"], Il = ["d", "fill", "onMouseenter", "onClick"], Bl = ["cx", "cy", "r", "fill"], Vl = ["x", "y", "fill", "font-size"], Ml = ["x", "y", "fill", "font-size"], Gl = ["x", "y", "fill", "font-size"], El = ["x", "y", "fill", "font-size"], Ul = ["filter"], jl = { key: 0 }, Rl = ["x", "y"], Yl = { key: 1 }, Hl = ["cx", "cy", "fill", "filter", "onClick"], Wl = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], Xl = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], ql = { key: 2 }, Jl = ["x", "y", "width"], Kl = {
+}, null, -1)), Ol = ["id"], Al = ["flood-color"], Dl = ["d", "stroke", "filter"], Il = ["cx", "cy", "r", "fill", "filter"], Bl = ["stroke", "d"], Vl = ["d", "fill", "stroke", "stroke-width", "filter"], Ml = ["cx", "cy", "r", "fill", "stroke"], Gl = ["cx", "cy", "r", "fill"], El = ["d", "fill", "onMouseenter", "onClick"], Ul = ["cx", "cy", "r", "fill"], jl = ["x", "y", "fill", "font-size"], Rl = ["x", "y", "fill", "font-size"], Yl = ["x", "y", "fill", "font-size"], Hl = ["x", "y", "fill", "font-size"], Wl = ["filter"], Xl = { key: 0 }, ql = ["x", "y"], Jl = { key: 1 }, Kl = ["cx", "cy", "fill", "filter", "onClick"], Ql = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], Zl = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], et = { key: 2 }, lt = ["x", "y", "width"], tt = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, Ql = ["onClick"], Zl = {
+}, at = ["onClick"], ot = {
   key: 0,
   style: { "font-variant-numeric": "tabular-nums" }
-}, et = { key: 1 }, lt = ["innerHTML"], tt = {
+}, ut = { key: 1 }, st = ["innerHTML"], rt = {
   __name: "vue-ui-donut",
   props: {
     config: {
@@ -36,143 +36,155 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
     }
   },
   emits: ["selectLegend", "selectDatapoint"],
-  setup(M, { expose: ze, emit: re }) {
-    const F = M, { vue_ui_donut: Ne } = He(), G = g({
+  setup(G, { expose: De, emit: se }) {
+    const S = G, { vue_ui_donut: Ie } = Ke(), E = g({
       get() {
-        return !!F.dataset && F.dataset.length;
+        return !!S.dataset && S.dataset.length;
       },
-      set(t) {
-        return t;
+      set(l) {
+        return l;
       }
-    }), E = d(null), ne = d(null), ie = d(null), q = d(null);
-    Me(() => {
-      if (We(F.dataset) ? Te({
+    }), U = v(null), re = v(null), ne = v(null), J = v(null), ie = v(0), ve = v(0), ce = v(0);
+    Re(() => {
+      de();
+    }), Ye(() => {
+      J.value && J.value.disconnect();
+    });
+    function de() {
+      if (Qe(S.dataset) ? Oe({
         componentName: "VueUiDonut",
         type: "dataset"
-      }) : F.dataset.forEach((t, a) => {
-        Xe({
-          datasetObject: t,
+      }) : S.dataset.forEach((l, a) => {
+        Ze({
+          datasetObject: l,
           requiredAttributes: ["name", "values"]
-        }).forEach((l) => {
-          G.value = !1, Te({
+        }).forEach((t) => {
+          E.value = !1, Oe({
             componentName: "VueUiDonut",
             type: "datasetSerieAttribute",
-            property: l,
+            property: t,
             index: a
           });
         });
       }), e.value.responsive) {
-        const t = rl(() => {
-          const { width: a, height: l } = nl({
-            chart: E.value,
-            title: e.value.style.chart.title.text ? ne.value : null,
-            legend: e.value.style.chart.legend.show ? ie.value : null
+        const l = dl(() => {
+          const { width: a, height: t } = hl({
+            chart: U.value,
+            title: e.value.style.chart.title.text ? re.value : null,
+            legend: e.value.style.chart.legend.show ? ne.value : null
           });
-          i.value.width = a, i.value.height = l;
+          i.value.width = a, i.value.height = t;
         });
-        q.value = new ResizeObserver(t), q.value.observe(E.value.parentNode);
+        J.value = new ResizeObserver(l), J.value.observe(U.value.parentNode);
       }
-    }), Ge(() => {
-      q.value && q.value.disconnect();
-    });
-    const x = d(qe()), Pe = d(null), ee = d(!1), le = d(""), z = d(null), ve = d(0), e = g(() => {
-      const t = Fe({
-        userConfig: F.config,
-        defaultConfig: Ne
+    }
+    const x = v(el()), Be = v(null), ee = v(!1), le = v(""), z = v(null), he = v(0);
+    function ye() {
+      const l = Ae({
+        userConfig: S.config,
+        defaultConfig: Ie
       });
-      return t.theme ? {
-        ...Fe({
-          userConfig: Je.vue_ui_donut[t.theme] || F.config,
-          defaultConfig: t
+      return l.theme ? {
+        ...Ae({
+          userConfig: rl.vue_ui_donut[l.theme] || S.config,
+          defaultConfig: l
         }),
-        customPalette: Ke[t.theme] || D
-      } : t;
-    }), { isPrinting: ce, isImaging: de, generatePdf: he, generateImage: ye } = vl({
+        customPalette: nl[l.theme] || D
+      } : l;
+    }
+    const e = g({
+      get: () => ye(),
+      set: (l) => l
+    });
+    Ne(() => S.config, (l) => {
+      e.value = ye(), de(), ie.value += 1, ve.value += 1, ce.value += 1;
+    }, { deep: !0 });
+    const { isPrinting: fe, isImaging: be, generatePdf: ge, generateImage: pe } = fl({
       elementId: `donut__${x.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-donut"
-    }), fe = g(() => Qe(e.value.customPalette)), f = d({
+    }), me = g(() => ll(e.value.customPalette)), f = v({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
-    }), i = d({
+    }), i = v({
       height: 360,
       width: 512
-    }), U = g(() => {
-      const t = e.value.style.chart.layout.donut.strokeWidth / 512, a = i.value.width * t;
+    }), j = g(() => {
+      const l = e.value.style.chart.layout.donut.strokeWidth / 512, a = i.value.width * l;
       return a > $.value / 2 ? e.value.style.chart.layout.donut.strokeWidth : a;
-    }), P = g(() => F.dataset.map((t, a) => ({
-      name: t.name,
-      color: Z(t.color) || fe.value[a] || D[a] || D[a % D.length],
-      value: t.values.reduce((l, u) => l + u, 0),
-      absoluteValues: t.values,
-      comment: t.comment || ""
-    }))), k = d(P.value);
-    Ee(() => P.value, (t) => k.value = t);
-    function Oe() {
-      return P.value.map((t) => ({
-        name: t.name,
-        color: t.color,
-        value: t.value
+    }), P = g(() => S.dataset.map((l, a) => ({
+      name: l.name,
+      color: Z(l.color) || me.value[a] || D[a] || D[a % D.length],
+      value: l.values.reduce((t, u) => t + u, 0),
+      absoluteValues: l.values,
+      comment: l.comment || ""
+    }))), k = v(P.value);
+    Ne(() => P.value, (l) => k.value = l);
+    function Ve() {
+      return P.value.map((l) => ({
+        name: l.name,
+        color: l.color,
+        value: l.value
       }));
     }
-    const L = d([]), be = d(null), ge = d(null), O = d(!1);
-    function pe(t) {
-      const a = P.value.find((r, h) => h === t);
-      let u = k.value.find((r, h) => h === t).value;
-      if (L.value.includes(t)) {
+    const L = v([]), we = v(null), ke = v(null), O = v(!1);
+    function _e(l) {
+      const a = P.value.find((r, h) => h === l);
+      let u = k.value.find((r, h) => h === l).value;
+      if (L.value.includes(l)) {
         let h = function() {
-          u > r ? (cancelAnimationFrame(be.value), k.value = k.value.map((c, oe) => t === oe ? {
-            ...c,
+          u > r ? (cancelAnimationFrame(we.value), k.value = k.value.map((d, oe) => l === oe ? {
+            ...d,
             value: r
-          } : c), O.value = !1) : (O.value = !0, u += r * 0.025, k.value = k.value.map((c, oe) => t === oe ? {
-            ...c,
+          } : d), O.value = !1) : (O.value = !0, u += r * 0.025, k.value = k.value.map((d, oe) => l === oe ? {
+            ...d,
             value: u
-          } : c), be.value = requestAnimationFrame(h));
+          } : d), we.value = requestAnimationFrame(h));
         };
-        L.value = L.value.filter((c) => c !== t);
+        L.value = L.value.filter((d) => d !== l);
         const r = a.value;
         h();
       } else if (L.value.length < P.value.length - 1) {
         let r = function() {
-          u < 0.1 ? (cancelAnimationFrame(ge.value), L.value.push(t), k.value = k.value.map((h, c) => t === c ? {
+          u < 0.1 ? (cancelAnimationFrame(ke.value), L.value.push(l), k.value = k.value.map((h, d) => l === d ? {
             ...h,
             value: 0
-          } : h), O.value = !1) : (O.value = !0, u /= 1.1, k.value = k.value.map((h, c) => t === c ? {
+          } : h), O.value = !1) : (O.value = !0, u /= 1.1, k.value = k.value.map((h, d) => l === d ? {
             ...h,
             value: u
-          } : h), ge.value = requestAnimationFrame(r));
+          } : h), ke.value = requestAnimationFrame(r));
         };
         r();
       }
-      re("selectLegend", I.value.map((r) => ({
+      se("selectLegend", I.value.map((r) => ({
         name: r.name,
         color: r.color,
         value: r.value
       })));
     }
-    const I = g(() => (k.value.forEach((t, a) => {
-      if ([null, void 0].includes(t.values))
+    const I = g(() => (k.value.forEach((l, a) => {
+      if ([null, void 0].includes(l.values))
         return {
-          ...t,
+          ...l,
           values: []
         };
-    }), k.value.map((t, a) => ({
-      ...t,
+    }), k.value.map((l, a) => ({
+      ...l,
       seriesIndex: a
-    })).filter((t, a) => !L.value.includes(a)))), me = g(() => F.dataset.map((t, a) => ({
-      name: t.name,
-      color: Z(t.color) || fe.value[a] || D[a] || D[a % D.length],
-      value: (t.values || []).reduce((l, u) => l + u, 0),
+    })).filter((l, a) => !L.value.includes(a)))), Ce = g(() => S.dataset.map((l, a) => ({
+      name: l.name,
+      color: Z(l.color) || me.value[a] || D[a] || D[a % D.length],
+      value: (l.values || []).reduce((t, u) => t + u, 0),
       shape: "circle"
-    })).map((t, a) => ({
-      ...t,
-      proportion: t.value / F.dataset.map((l) => (l.values || []).reduce((u, r) => u + r, 0)).reduce((l, u) => l + u, 0),
+    })).map((l, a) => ({
+      ...l,
+      proportion: l.value / S.dataset.map((t) => (t.values || []).reduce((u, r) => u + r, 0)).reduce((t, u) => t + u, 0),
       opacity: L.value.includes(a) ? 0.5 : 1,
-      segregate: () => pe(a),
+      segregate: () => _e(a),
       isSegregated: L.value.includes(a)
-    }))), Ae = g(() => ({
+    }))), Me = g(() => ({
       cy: "donut-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
@@ -180,114 +192,114 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
     })), $ = g(() => {
-      const t = Math.min(i.value.width / 3, i.value.height / 3);
-      return t < 55 ? 55 : t;
-    }), A = g(() => Ze({ series: I.value }, i.value.width / 2, i.value.height / 2, $.value, $.value, 1.99999, 2, 1, 360, 105.25, U.value));
-    function B(t) {
-      return t.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
+      const l = Math.min(i.value.width / 3, i.value.height / 3);
+      return l < 55 ? 55 : l;
+    }), A = g(() => tl({ series: I.value }, i.value.width / 2, i.value.height / 2, $.value, $.value, 1.99999, 2, 1, 360, 105.25, j.value));
+    function B(l) {
+      return l.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
     }
-    function we(t, a) {
-      const l = t.value / De(a);
-      return isNaN(l) ? 0 : T(
+    function xe(l, a) {
+      const t = l.value / Ge(a);
+      return isNaN(t) ? 0 : F(
         e.value.style.chart.layout.labels.percentage.formatter,
-        l * 100,
+        t * 100,
         C({
-          v: l * 100,
+          v: t * 100,
           s: "%",
           r: e.value.style.chart.layout.labels.percentage.rounding
         }),
-        { datapoint: t }
+        { datapoint: l }
       );
     }
-    function De(t) {
-      return [...t].map((a) => a.value).reduce((a, l) => a + l, 0);
+    function Ge(l) {
+      return [...l].map((a) => a.value).reduce((a, t) => a + t, 0);
     }
-    const m = g(() => I.value.map((t) => t.value).reduce((t, a) => t + a, 0)), ke = g(() => m.value / I.value.length), te = d(null), j = d(!1);
-    function Ie({ datapoint: t, relativeIndex: a, seriesIndex: l, show: u = !1 }) {
-      te.value = { datapoint: t, seriesIndex: l, config: e.value, series: P.value }, ee.value = u, z.value = a;
+    const m = g(() => I.value.map((l) => l.value).reduce((l, a) => l + a, 0)), $e = g(() => m.value / I.value.length), te = v(null), R = v(!1);
+    function Ee({ datapoint: l, relativeIndex: a, seriesIndex: t, show: u = !1 }) {
+      te.value = { datapoint: l, seriesIndex: t, config: e.value, series: P.value }, ee.value = u, z.value = a;
       let r = "";
       const h = e.value.style.chart.tooltip.customFormat;
-      if (j.value = !1, ol(h))
+      if (R.value = !1, il(h))
         try {
-          const c = h({
-            seriesIndex: l,
-            datapoint: t,
+          const d = h({
+            seriesIndex: t,
+            datapoint: l,
             series: P.value,
             config: e.value
           });
-          typeof c == "string" && (le.value = c, j.value = !0);
+          typeof d == "string" && (le.value = d, R.value = !0);
         } catch {
-          console.warn("Custom format cannot be applied."), j.value = !1;
+          console.warn("Custom format cannot be applied."), R.value = !1;
         }
-      if (!j.value) {
-        if (r += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, r += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg>`, e.value.style.chart.tooltip.showValue && (r += `<b>${T(
+      if (!R.value) {
+        if (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 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${l.color}"/></svg>`, e.value.style.chart.tooltip.showValue && (r += `<b>${F(
           e.value.style.chart.layout.labels.value.formatter,
-          t.value,
+          l.value,
           C({
             p: e.value.style.chart.layout.labels.dataLabels.prefix,
-            v: t.value,
+            v: l.value,
             s: e.value.style.chart.layout.labels.dataLabels.suffix,
             r: e.value.style.chart.tooltip.roundingValue
           }),
           {
-            datapoint: t,
+            datapoint: l,
             relativeIndex: a,
-            seriesIndex: l
+            seriesIndex: t
           }
         )}</b>`), e.value.style.chart.tooltip.showPercentage) {
-          const c = T(
+          const d = F(
             e.value.style.chart.layout.labels.percentage.formatter,
-            t.proportion * 100,
+            l.proportion * 100,
             C({
-              v: t.proportion * 100,
+              v: l.proportion * 100,
               s: "%",
               r: e.value.style.chart.tooltip.roundingPercentage
             }),
             {
-              datapoint: t,
+              datapoint: l,
               relativeIndex: a,
-              seriesIndex: l
+              seriesIndex: t
             }
           );
-          e.value.style.chart.tooltip.showValue ? r += `<span>(${c})</span></div>` : r += `<b>${c}%</b></div>`;
+          e.value.style.chart.tooltip.showValue ? r += `<span>(${d})</span></div>` : r += `<b>${d}%</b></div>`;
         }
-        e.value.style.chart.comments.showInTooltip && t.comment && (r += `<div class="vue-data-ui-tooltip-comment" style="background:${t.color}20; padding: 6px; margin-bottom: 6px; margin-top:6px; border-left: 1px solid ${t.color}">${t.comment}</div>`), le.value = `<div>${r}</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>`), le.value = `<div>${r}</div>`;
       }
     }
-    function ae(t) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(z.value) && z.value !== t ? `url(#blur_${x.value})` : "";
+    function ae(l) {
+      return e.value.useBlurOnHover && ![null, void 0].includes(z.value) && z.value !== l ? `url(#blur_${x.value})` : "";
     }
     const N = g(() => {
-      const t = I.value.map((l) => ({
-        name: l.name,
-        color: l.color
-      })), a = I.value.map((l) => l.value);
-      return { head: t, body: a };
+      const l = I.value.map((t) => ({
+        name: t.name,
+        color: t.color
+      })), a = I.value.map((t) => t.value);
+      return { head: l, body: a };
     });
-    function _e() {
-      je(() => {
-        const t = N.value.head.map((u, r) => [[
+    function Se() {
+      Xe(() => {
+        const l = N.value.head.map((u, r) => [[
           u.name
-        ], [N.value.body[r]], [isNaN(N.value.body[r] / m.value) ? "-" : N.value.body[r] / m.value * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = ul(a);
-        sl({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-donut" });
+        ], [N.value.body[r]], [isNaN(N.value.body[r] / m.value) ? "-" : N.value.body[r] / m.value * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(l), t = vl(a);
+        cl({ csvContent: t, title: e.value.style.chart.title.text || "vue-ui-donut" });
       });
     }
-    const J = g(() => {
-      const t = [
+    const K = g(() => {
+      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>',
         C({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: m.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
         "100%"
       ], a = N.value.head.map((r, h) => {
-        const c = C({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: N.value.body[h], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue });
+        const d = C({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: N.value.body[h], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue });
         return [
           {
             color: r.color,
             name: r.name
           },
-          c,
+          d,
           isNaN(N.value.body[h] / m.value) ? "-" : (N.value.body[h] / m.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
         ];
-      }), l = {
+      }), t = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
@@ -306,53 +318,54 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
           e.value.table.columnNames.value,
           e.value.table.columnNames.percentage
         ],
-        head: t,
+        head: l,
         body: a,
-        config: l
+        config: t
       };
-    }), R = d(!1);
-    function Be(t) {
-      R.value = t, ve.value += 1;
+    }), Y = v(!1);
+    function Ue(l) {
+      Y.value = l, he.value += 1;
     }
-    const Ce = g(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
-    function Ve(t) {
-      return t.toFixed(e.value.style.chart.legend.roundingPercentage).split("").map((a) => "-").join("");
+    const Le = g(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
+    function je(l) {
+      return l.toFixed(e.value.style.chart.legend.roundingPercentage).split("").map((a) => "-").join("");
     }
-    function K(t, a) {
-      re("selectDatapoint", { datapoint: t, index: a });
+    function Q(l, a) {
+      se("selectDatapoint", { datapoint: l, index: a });
     }
-    function xe() {
+    function Te() {
       f.value.showTable = !f.value.showTable;
     }
-    function $e() {
+    function Fe() {
       f.value.dataLabels.show = !f.value.dataLabels.show;
     }
-    function Le() {
+    function ze() {
       f.value.showTooltip = !f.value.showTooltip;
     }
-    return ze({
-      getData: Oe,
-      generatePdf: he,
-      generateCsv: _e,
-      generateImage: ye,
-      toggleTable: xe,
-      toggleLabels: $e,
-      toggleTooltip: Le
-    }), (t, a) => (s(), n("div", {
+    return De({
+      getData: Ve,
+      generatePdf: ge,
+      generateCsv: Se,
+      generateImage: pe,
+      toggleTable: Te,
+      toggleLabels: Fe,
+      toggleTooltip: ze
+    }), (l, a) => (s(), n("div", {
       ref_key: "donutChart",
-      ref: E,
-      class: ue(`vue-ui-donut ${R.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: S(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;${e.value.style.chart.title.text ? "" : "padding-top:36px"};background:${e.value.style.chart.backgroundColor}`),
+      ref: U,
+      class: ue(`vue-ui-donut ${Y.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: T(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;${e.value.style.chart.title.text ? "" : "padding-top:36px"};background:${e.value.style.chart.backgroundColor}`),
       id: `donut__${x.value}`
     }, [
-      p(t.$slots, "userConfig", {}, void 0, !0),
+      p(l.$slots, "userConfig", {}, void 0, !0),
       e.value.style.chart.title.text ? (s(), n("div", {
         key: 0,
         ref_key: "chartTitle",
-        ref: ne,
-        style: S(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:24px`)
+        ref: re,
+        style: T(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:24px`)
       }, [
-        se(il, {
+        (s(), V(yl, {
+          key: `title_${ie.value}`,
           config: {
             title: {
               cy: "donut-div-title",
@@ -363,16 +376,16 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
               ...e.value.style.chart.title.subtitle
             }
           }
-        }, null, 8, ["config"])
-      ], 4)) : v("", !0),
-      e.value.userOptions.show && G.value ? (s(), Q(cl, {
+        }, null, 8, ["config"]))
+      ], 4)) : c("", !0),
+      e.value.userOptions.show && E.value ? (s(), V(bl, {
         ref_key: "details",
-        ref: Pe,
-        key: `user_option_${ve.value}`,
+        ref: Be,
+        key: `user_option_${he.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: o(ce),
-        isImaging: o(de),
+        isPrinting: o(fe),
+        isImaging: o(be),
         uid: x.value,
         hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -381,74 +394,74 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
         hasTable: e.value.userOptions.buttons.table,
         hasLabel: e.value.userOptions.buttons.labels,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: R.value,
-        chartElement: E.value,
+        isFullscreen: Y.value,
+        chartElement: U.value,
         isTooltip: f.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        onToggleFullscreen: Be,
-        onGeneratePdf: o(he),
-        onGenerateCsv: _e,
-        onGenerateImage: o(ye),
-        onToggleTable: xe,
-        onToggleLabels: $e,
-        onToggleTooltip: Le
-      }, Ue({ _: 2 }, [
-        t.$slots.optionTooltip ? {
+        onToggleFullscreen: Ue,
+        onGeneratePdf: o(ge),
+        onGenerateCsv: Se,
+        onGenerateImage: o(pe),
+        onToggleTable: Te,
+        onToggleLabels: Fe,
+        onToggleTooltip: ze
+      }, He({ _: 2 }, [
+        l.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: w(() => [
-            p(t.$slots, "optionTooltip", {}, void 0, !0)
+            p(l.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
-        t.$slots.optionPdf ? {
+        l.$slots.optionPdf ? {
           name: "optionPdf",
           fn: w(() => [
-            p(t.$slots, "optionPdf", {}, void 0, !0)
+            p(l.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
-        t.$slots.optionCsv ? {
+        l.$slots.optionCsv ? {
           name: "optionCsv",
           fn: w(() => [
-            p(t.$slots, "optionCsv", {}, void 0, !0)
+            p(l.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
-        t.$slots.optionImg ? {
+        l.$slots.optionImg ? {
           name: "optionImg",
           fn: w(() => [
-            p(t.$slots, "optionImg", {}, void 0, !0)
+            p(l.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
-        t.$slots.optionTable ? {
+        l.$slots.optionTable ? {
           name: "optionTable",
           fn: w(() => [
-            p(t.$slots, "optionTable", {}, void 0, !0)
+            p(l.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
-        t.$slots.optionLabels ? {
+        l.$slots.optionLabels ? {
           name: "optionLabels",
           fn: w(() => [
-            p(t.$slots, "optionLabels", {}, void 0, !0)
+            p(l.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
-        t.$slots.optionFullscreen ? {
+        l.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: w(({ toggleFullscreen: l, isFullscreen: u }) => [
-            p(t.$slots, "optionFullscreen", Y(H({ toggleFullscreen: l, isFullscreen: u })), void 0, !0)
+          fn: w(({ toggleFullscreen: t, isFullscreen: u }) => [
+            p(l.$slots, "optionFullscreen", H(W({ toggleFullscreen: t, isFullscreen: u })), void 0, !0)
           ]),
           key: "6"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "isTooltip", "titles", "onGeneratePdf", "onGenerateImage"])) : v("", !0),
-      G.value ? (s(), n("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "isTooltip", "titles", "onGeneratePdf", "onGenerateImage"])) : c("", !0),
+      E.value ? (s(), n("svg", {
         key: 2,
-        xmlns: o(el),
-        class: ue({ "vue-data-ui-fullscreen--on": R.value, "vue-data-ui-fulscreen--off": !R.value }),
+        xmlns: o(al),
+        class: ue({ "vue-data-ui-fullscreen--on": Y.value, "vue-data-ui-fulscreen--off": !Y.value }),
         viewBox: `0 0 ${i.value.width <= 0 ? 10 : i.value.width} ${i.value.height <= 0 ? 10 : i.value.height}`,
-        style: S(`max-width:100%; overflow: visible; background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
+        style: T(`max-width:100%; overflow: visible; background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
       }, [
         b("defs", null, [
           e.value.style.chart.useGradient ? (s(), n("radialGradient", {
@@ -458,16 +471,16 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
             b("stop", {
               offset: "0%",
               "stop-color": `${o(Z)(e.value.style.chart.backgroundColor)}00`
-            }, null, 8, _l),
+            }, null, 8, Ll),
             b("stop", {
               offset: "77%",
-              "stop-color": "#FFFFFF" + o(ll)[e.value.style.chart.gradientIntensity]
-            }, null, 8, Cl),
+              "stop-color": "#FFFFFF" + o(ol)[e.value.style.chart.gradientIntensity]
+            }, null, 8, Tl),
             b("stop", {
               offset: "100%",
               "stop-color": `${o(Z)(e.value.style.chart.backgroundColor)}00`
-            }, null, 8, xl)
-          ], 8, kl)) : v("", !0)
+            }, null, 8, Fl)
+          ], 8, Sl)) : c("", !0)
         ]),
         b("defs", null, [
           b("filter", {
@@ -481,9 +494,9 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
               in: "SourceGraphic",
               stdDeviation: 2,
               id: `blur_std_${x.value}`
-            }, null, 8, Ll),
-            Sl
-          ], 8, $l),
+            }, null, 8, Nl),
+            Pl
+          ], 8, zl),
           b("filter", {
             id: `shadow_${x.value}`,
             "color-interpolation-filters": "sRGB"
@@ -494,20 +507,20 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
               stdDeviation: "10",
               "flood-opacity": "0.5",
               "flood-color": e.value.style.chart.layout.donut.shadowColor
-            }, null, 8, Fl)
-          ], 8, Tl)
+            }, null, 8, Al)
+          ], 8, Ol)
         ]),
-        (s(!0), n(V, null, W(A.value, (l, u) => (s(), n("g", null, [
-          B(l) && f.value.dataLabels.show ? (s(), n("path", {
+        (s(!0), n(M, null, X(A.value, (t, u) => (s(), n("g", null, [
+          B(t) && f.value.dataLabels.show ? (s(), n("path", {
             key: 0,
-            d: o(tl)(l, { x: i.value.width / 2, y: i.value.height / 2 }, 16, 16, !1, !1, U.value),
-            stroke: l.color,
+            d: o(ul)(t, { x: i.value.width / 2, y: i.value.height / 2 }, 16, 16, !1, !1, j.value),
+            stroke: t.color,
             "stroke-width": "1",
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             fill: "none",
             filter: ae(u)
-          }, null, 8, zl)) : v("", !0)
+          }, null, 8, Dl)) : c("", !0)
         ]))), 256)),
         b("circle", {
           cx: i.value.width / 2,
@@ -515,29 +528,29 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
           r: $.value <= 0 ? 10 : $.value,
           fill: e.value.style.chart.backgroundColor,
           filter: e.value.style.chart.layout.donut.useShadow ? `url(#shadow_${x.value})` : ""
-        }, null, 8, Nl),
-        m.value ? (s(), n(V, { key: 0 }, [
-          (s(!0), n(V, null, W(A.value, (l, u) => (s(), n("path", {
+        }, null, 8, Il),
+        m.value ? (s(), n(M, { key: 0 }, [
+          (s(!0), n(M, null, X(A.value, (t, u) => (s(), n("path", {
             stroke: e.value.style.chart.backgroundColor,
-            d: l.arcSlice,
+            d: t.arcSlice,
             fill: "#FFFFFF"
-          }, null, 8, Pl))), 256)),
-          (s(!0), n(V, null, W(A.value, (l, u) => (s(), n("path", {
+          }, null, 8, Bl))), 256)),
+          (s(!0), n(M, null, X(A.value, (t, u) => (s(), n("path", {
             class: "vue-ui-donut-arc-path",
-            d: l.arcSlice,
-            fill: `${l.color}CC`,
+            d: t.arcSlice,
+            fill: `${t.color}CC`,
             stroke: e.value.style.chart.backgroundColor,
             "stroke-width": e.value.style.chart.layout.donut.borderWidth,
             filter: ae(u)
-          }, null, 8, Ol))), 256))
+          }, null, 8, Vl))), 256))
         ], 64)) : (s(), n("circle", {
           key: 1,
           cx: i.value.width / 2,
           cy: i.value.height / 2,
           r: $.value <= 0 ? 10 : $.value,
           fill: e.value.style.chart.backgroundColor,
-          stroke: o(al)(e.value.style.chart.background)
-        }, null, 8, Al)),
+          stroke: o(sl)(e.value.style.chart.background)
+        }, null, 8, Ml)),
         e.value.style.chart.useGradient ? (s(), n("circle", {
           key: 2,
           cx: i.value.width / 2,
@@ -547,32 +560,32 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
             $.value <= 0 ? 10 : $.value
           ),
           fill: `url(#gradient_${x.value})`
-        }, null, 8, Dl)) : v("", !0),
-        m.value ? (s(!0), n(V, { key: 3 }, W(A.value, (l, u) => (s(), n("path", {
+        }, null, 8, Gl)) : c("", !0),
+        m.value ? (s(!0), n(M, { key: 3 }, X(A.value, (t, u) => (s(), n("path", {
           "data-cy-donut-trap": "",
-          d: l.arcSlice,
+          d: t.arcSlice,
           fill: z.value === u ? "rgba(0,0,0,0.1)" : "transparent",
-          onMouseenter: (r) => Ie({
-            datapoint: l,
+          onMouseenter: (r) => Ee({
+            datapoint: t,
             relativeIndex: u,
-            seriesIndex: l.seriesIndex,
+            seriesIndex: t.seriesIndex,
             show: !0
           }),
           onMouseleave: a[0] || (a[0] = (r) => {
             ee.value = !1, z.value = null;
           }),
-          onClick: (r) => K(l, u)
-        }, null, 40, Il))), 256)) : v("", !0),
+          onClick: (r) => Q(t, u)
+        }, null, 40, El))), 256)) : c("", !0),
         e.value.style.chart.layout.labels.hollow.show ? (s(), n("circle", {
           key: 4,
           cx: i.value.width / 2,
           cy: i.value.height / 2,
           r: (
             /* This might require adjustments */
-            $.value - U.value <= 0 ? 10 : $.value - U.value
+            $.value - j.value <= 0 ? 10 : $.value - j.value
           ),
           fill: e.value.style.chart.backgroundColor
-        }, null, 8, Bl)) : v("", !0),
+        }, null, 8, Ul)) : c("", !0),
         e.value.style.chart.layout.labels.hollow.total.show ? (s(), n("text", {
           key: 5,
           "text-anchor": "middle",
@@ -580,8 +593,8 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
           y: i.value.height / 2 - (e.value.style.chart.layout.labels.hollow.average.show ? e.value.style.chart.layout.labels.hollow.total.fontSize : 0) + e.value.style.chart.layout.labels.hollow.total.offsetY,
           fill: e.value.style.chart.layout.labels.hollow.total.color,
           "font-size": e.value.style.chart.layout.labels.hollow.total.fontSize,
-          style: S(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
-        }, _(e.value.style.chart.layout.labels.hollow.total.text), 13, Vl)) : v("", !0),
+          style: T(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
+        }, _(e.value.style.chart.layout.labels.hollow.total.text), 13, jl)) : c("", !0),
         e.value.style.chart.layout.labels.hollow.total.show ? (s(), n("text", {
           key: 6,
           "text-anchor": "middle",
@@ -589,8 +602,8 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
           y: i.value.height / 2 + e.value.style.chart.layout.labels.hollow.total.fontSize - (e.value.style.chart.layout.labels.hollow.average.show ? e.value.style.chart.layout.labels.hollow.total.fontSize : 0) + e.value.style.chart.layout.labels.hollow.total.value.offsetY,
           fill: e.value.style.chart.layout.labels.hollow.total.value.color,
           "font-size": e.value.style.chart.layout.labels.hollow.total.value.fontSize,
-          style: S(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
-        }, _(o(T)(
+          style: T(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
+        }, _(o(F)(
           e.value.style.chart.layout.labels.hollow.total.value.formatter,
           m.value,
           o(C)({
@@ -598,7 +611,7 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
             v: m.value,
             s: e.value.style.chart.layout.labels.hollow.total.value.suffix
           })
-        )), 13, Ml)) : v("", !0),
+        )), 13, Rl)) : c("", !0),
         e.value.style.chart.layout.labels.hollow.average.show ? (s(), n("text", {
           key: 7,
           "text-anchor": "middle",
@@ -606,8 +619,8 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
           y: i.value.height / 2 + (e.value.style.chart.layout.labels.hollow.total.show ? e.value.style.chart.layout.labels.hollow.average.fontSize : 0) + e.value.style.chart.layout.labels.hollow.average.offsetY,
           fill: e.value.style.chart.layout.labels.hollow.average.color,
           "font-size": e.value.style.chart.layout.labels.hollow.average.fontSize,
-          style: S(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
-        }, _(e.value.style.chart.layout.labels.hollow.average.text), 13, Gl)) : v("", !0),
+          style: T(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
+        }, _(e.value.style.chart.layout.labels.hollow.average.text), 13, Yl)) : c("", !0),
         e.value.style.chart.layout.labels.hollow.average.show ? (s(), n("text", {
           key: 8,
           "text-anchor": "middle",
@@ -615,105 +628,105 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
           y: i.value.height / 2 + (e.value.style.chart.layout.labels.hollow.total.show ? e.value.style.chart.layout.labels.hollow.average.fontSize : 0) + e.value.style.chart.layout.labels.hollow.average.fontSize + e.value.style.chart.layout.labels.hollow.average.value.offsetY,
           fill: e.value.style.chart.layout.labels.hollow.average.value.color,
           "font-size": e.value.style.chart.layout.labels.hollow.average.value.fontSize,
-          style: S(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
-        }, _(O.value ? "--" : o(T)(
+          style: T(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
+        }, _(O.value ? "--" : o(F)(
           e.value.style.chart.layout.labels.hollow.average.value.formatter,
-          ke.value,
+          $e.value,
           o(C)({
             p: e.value.style.chart.layout.labels.hollow.average.value.prefix,
-            v: ke.value,
+            v: $e.value,
             s: e.value.style.chart.layout.labels.hollow.average.value.suffix,
             r: e.value.style.chart.layout.labels.hollow.average.value.rounding
           })
-        )), 13, El)) : v("", !0),
-        (s(!0), n(V, null, W(A.value, (l, u) => (s(), n("g", {
+        )), 13, Hl)) : c("", !0),
+        (s(!0), n(M, null, X(A.value, (t, u) => (s(), n("g", {
           filter: ae(u),
           class: ue({ animated: e.value.useCssAnimation })
         }, [
-          e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (s(), n("g", jl, [
+          e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (s(), n("g", Xl, [
             (s(), n("foreignObject", {
-              x: o(y)(l, !0).anchor === "end" ? o(y)(l).x - 120 : o(y)(l, !0).anchor === "middle" ? o(y)(l).x - 60 : o(y)(l).x,
-              y: o(X)(l) - (Ce.value ? 20 : 0),
+              x: o(y)(t, !0).anchor === "end" ? o(y)(t).x - 120 : o(y)(t, !0).anchor === "middle" ? o(y)(t).x - 60 : o(y)(t).x,
+              y: o(q)(t) - (Le.value ? 20 : 0),
               width: "120",
               height: "60",
               style: { overflow: "visible" }
             }, [
               b("div", null, [
-                p(t.$slots, "dataLabel", Y(H({
-                  datapoint: l,
+                p(l.$slots, "dataLabel", H(W({
+                  datapoint: t,
                   isBlur: !e.value.useBlurOnHover || [null, void 0].includes(z.value) || z.value === u,
-                  isSafari: Ce.value,
-                  isVisible: B(l) && f.value.dataLabels.show,
-                  textAlign: o(y)(l, !0, 16, !0).anchor,
-                  flexAlign: o(y)(l, !0, 16).anchor,
-                  percentage: we(l, A.value)
+                  isSafari: Le.value,
+                  isVisible: B(t) && f.value.dataLabels.show,
+                  textAlign: o(y)(t, !0, 16, !0).anchor,
+                  flexAlign: o(y)(t, !0, 16).anchor,
+                  percentage: xe(t, A.value)
                 })), void 0, !0)
               ])
-            ], 8, Rl))
-          ])) : (s(), n("g", Yl, [
-            B(l) && f.value.dataLabels.show ? (s(), n("circle", {
+            ], 8, ql))
+          ])) : (s(), n("g", Jl, [
+            B(t) && f.value.dataLabels.show ? (s(), n("circle", {
               key: 0,
-              cx: o(y)(l).x,
-              cy: o(X)(l) - 3.5,
-              fill: l.color,
+              cx: o(y)(t).x,
+              cy: o(q)(t) - 3.5,
+              fill: t.color,
               r: 3,
               filter: !e.value.useBlurOnHover || [null, void 0].includes(z.value) || z.value === u ? "" : `url(#blur_${x.value})`,
-              onClick: (r) => K(l, u)
-            }, null, 8, Hl)) : v("", !0),
-            B(l) && f.value.dataLabels.show ? (s(), n("text", {
+              onClick: (r) => Q(t, u)
+            }, null, 8, Kl)) : c("", !0),
+            B(t) && f.value.dataLabels.show ? (s(), n("text", {
               key: 1,
-              "text-anchor": o(y)(l, !0, 12).anchor,
-              x: o(y)(l, !0, 12).x,
-              y: o(X)(l),
+              "text-anchor": o(y)(t, !0, 12).anchor,
+              x: o(y)(t, !0, 12).x,
+              y: o(q)(t),
               fill: e.value.style.chart.layout.labels.percentage.color,
               "font-size": e.value.style.chart.layout.labels.percentage.fontSize,
-              style: S(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
-              onClick: (r) => K(l, u)
-            }, _(we(l, A.value)) + " " + _(e.value.style.chart.layout.labels.value.show ? `(${o(T)(
+              style: T(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
+              onClick: (r) => Q(t, u)
+            }, _(xe(t, A.value)) + " " + _(e.value.style.chart.layout.labels.value.show ? `(${o(F)(
               e.value.style.chart.layout.labels.value.formatter,
-              l.value,
+              t.value,
               o(C)({
                 p: e.value.style.chart.layout.labels.dataLabels.prefix,
-                v: l.value,
+                v: t.value,
                 s: e.value.style.chart.layout.labels.dataLabels.suffix,
                 r: e.value.style.chart.layout.labels.value.rounding
               }),
-              { datapoint: l }
-            )})` : ""), 13, Wl)) : v("", !0),
-            B(l) && f.value.dataLabels.show ? (s(), n("text", {
+              { datapoint: t }
+            )})` : ""), 13, Ql)) : c("", !0),
+            B(t) && f.value.dataLabels.show ? (s(), n("text", {
               key: 2,
-              "text-anchor": o(y)(l).anchor,
-              x: o(y)(l, !0, 12).x,
-              y: o(X)(l) + e.value.style.chart.layout.labels.percentage.fontSize,
+              "text-anchor": o(y)(t).anchor,
+              x: o(y)(t, !0, 12).x,
+              y: o(q)(t) + e.value.style.chart.layout.labels.percentage.fontSize,
               fill: e.value.style.chart.layout.labels.name.color,
               "font-size": e.value.style.chart.layout.labels.name.fontSize,
-              style: S(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
-              onClick: (r) => K(l, u)
-            }, _(l.name), 13, Xl)) : v("", !0)
+              style: T(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
+              onClick: (r) => Q(t, u)
+            }, _(t.name), 13, Zl)) : c("", !0)
           ])),
-          f.value.dataLabels.show && e.value.style.chart.comments.show && l.comment ? (s(), n("g", ql, [
-            B(l) ? (s(), n("foreignObject", {
+          f.value.dataLabels.show && e.value.style.chart.comments.show && t.comment ? (s(), n("g", et, [
+            B(t) ? (s(), n("foreignObject", {
               key: 0,
-              x: e.value.style.chart.comments.offsetX + (o(y)(l, !0).anchor === "end" ? o(y)(l).x - e.value.style.chart.comments.width : o(y)(l, !0).anchor === "middle" ? o(y)(l).x - e.value.style.chart.comments.width / 2 : o(y)(l).x),
-              y: o(X)(l) + 24 + e.value.style.chart.comments.offsetY,
+              x: e.value.style.chart.comments.offsetX + (o(y)(t, !0).anchor === "end" ? o(y)(t).x - e.value.style.chart.comments.width : o(y)(t, !0).anchor === "middle" ? o(y)(t).x - e.value.style.chart.comments.width / 2 : o(y)(t).x),
+              y: o(q)(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, [
-                p(t.$slots, "plot-comment", {
-                  plot: { ...l, textAlign: o(y)(l, !0, 16, !0).anchor, flexAlign: o(y)(l, !0, 16).anchor }
+                p(l.$slots, "plot-comment", {
+                  plot: { ...t, textAlign: o(y)(t, !0, 16, !0).anchor, flexAlign: o(y)(t, !0, 16).anchor }
                 }, void 0, !0)
               ])
-            ], 8, Jl)) : v("", !0)
-          ])) : v("", !0)
-        ], 10, Ul))), 256)),
-        p(t.$slots, "svg", { svg: i.value }, void 0, !0)
-      ], 14, wl)) : v("", !0),
-      t.$slots.watermark ? (s(), n("div", Kl, [
-        p(t.$slots, "watermark", Y(H({ isPrinting: o(ce) || o(de) })), void 0, !0)
-      ])) : v("", !0),
-      G.value ? v("", !0) : (s(), Q(fl, {
+            ], 8, lt)) : c("", !0)
+          ])) : c("", !0)
+        ], 10, Wl))), 256)),
+        p(l.$slots, "svg", { svg: i.value }, void 0, !0)
+      ], 14, $l)) : c("", !0),
+      l.$slots.watermark ? (s(), n("div", tt, [
+        p(l.$slots, "watermark", H(W({ isPrinting: o(fe) || o(be) })), void 0, !0)
+      ])) : c("", !0),
+      E.value ? c("", !0) : (s(), V(wl, {
         key: 4,
         config: {
           type: "donut",
@@ -721,56 +734,56 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
             backgroundColor: e.value.style.chart.backgroundColor,
             donut: {
               color: "#CCCCCC",
-              strokeWidth: U.value * 0.8
+              strokeWidth: j.value * 0.8
             }
           }
         }
       }, null, 8, ["config"])),
       b("div", {
         ref_key: "chartLegend",
-        ref: ie
+        ref: ne
       }, [
-        e.value.style.chart.legend.show ? (s(), Q(yl, {
-          key: 0,
-          legendSet: me.value,
-          config: Ae.value,
-          onClickMarker: a[1] || (a[1] = ({ i: l }) => pe(l))
+        e.value.style.chart.legend.show ? (s(), V(ml, {
+          key: `legend_${ce.value}`,
+          legendSet: Ce.value,
+          config: Me.value,
+          onClickMarker: a[1] || (a[1] = ({ i: t }) => _e(t))
         }, {
-          item: w(({ legend: l, index: u }) => [
+          item: w(({ legend: t, index: u }) => [
             b("div", {
-              onClick: (r) => l.segregate(),
-              style: S(`opacity:${L.value.includes(u) ? 0.5 : 1}`)
+              onClick: (r) => t.segregate(),
+              style: T(`opacity:${L.value.includes(u) ? 0.5 : 1}`)
             }, [
-              Se(_(l.name) + ": " + _(o(T)(
+              Pe(_(t.name) + ": " + _(o(F)(
                 e.value.style.chart.layout.labels.value.formatter,
-                l.value,
+                t.value,
                 o(C)({
                   p: e.value.style.chart.layout.labels.dataLabels.prefix,
-                  v: l.value,
+                  v: t.value,
                   s: e.value.style.chart.layout.labels.dataLabels.suffix,
                   r: e.value.style.chart.legend.roundingValue
                 }),
                 {
-                  datapoint: l,
+                  datapoint: t,
                   index: u
                 }
               )) + " ", 1),
-              L.value.includes(u) ? (s(), n("span", et, " ( " + _(Ve(l.proportion * 100)) + " % ) ", 1)) : (s(), n("span", Zl, " (" + _(isNaN(l.value / m.value) ? "-" : o(T)(
+              L.value.includes(u) ? (s(), n("span", ut, " ( " + _(je(t.proportion * 100)) + " % ) ", 1)) : (s(), n("span", ot, " (" + _(isNaN(t.value / m.value) ? "-" : o(F)(
                 e.value.style.chart.layout.labels.percentage.formatter,
-                O.value ? l.proportion * 100 : l.value / m.value * 100,
+                O.value ? t.proportion * 100 : t.value / m.value * 100,
                 o(C)({
-                  v: O.value ? l.proportion * 100 : l.value / m.value * 100,
+                  v: O.value ? t.proportion * 100 : t.value / m.value * 100,
                   s: "%",
                   r: e.value.style.chart.legend.roundingPercentage
                 })
               )) + ") ", 1))
-            ], 12, Ql)
+            ], 12, at)
           ]),
           _: 1
-        }, 8, ["legendSet", "config"])) : v("", !0),
-        p(t.$slots, "legend", { legend: me.value }, void 0, !0)
+        }, 8, ["legendSet", "config"])) : c("", !0),
+        p(l.$slots, "legend", { legend: Ce.value }, void 0, !0)
       ], 512),
-      se(hl, {
+      We(pl, {
         show: f.value.showTooltip && ee.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
@@ -781,19 +794,19 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: E.value,
+        parent: U.value,
         content: le.value,
-        isCustom: j.value
+        isCustom: R.value
       }, {
         "tooltip-before": w(() => [
-          p(t.$slots, "tooltip-before", Y(H({ ...te.value })), void 0, !0)
+          p(l.$slots, "tooltip-before", H(W({ ...te.value })), void 0, !0)
         ]),
         "tooltip-after": w(() => [
-          p(t.$slots, "tooltip-after", Y(H({ ...te.value })), void 0, !0)
+          p(l.$slots, "tooltip-after", H(W({ ...te.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
-      G.value ? (s(), Q(bl, {
+      E.value ? (s(), V(kl, {
         key: 5,
         hideDetails: "",
         config: {
@@ -810,48 +823,49 @@ const pl = (M) => (Re("data-v-8cc49fb9"), M = M(), Ye(), M), ml = ["id"], wl = [
         }
       }, {
         content: w(() => [
-          se(dl, {
-            colNames: J.value.colNames,
-            head: J.value.head,
-            body: J.value.body,
-            config: J.value.config,
+          (s(), V(gl, {
+            key: `table_${ve.value}`,
+            colNames: K.value.colNames,
+            head: K.value.head,
+            body: K.value.body,
+            config: K.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: a[2] || (a[2] = (l) => f.value.showTable = !1)
+            onClose: a[2] || (a[2] = (t) => f.value.showTable = !1)
           }, {
-            th: w(({ th: l }) => [
+            th: w(({ th: t }) => [
               b("div", {
-                innerHTML: l,
+                innerHTML: t,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, lt)
+              }, null, 8, st)
             ]),
-            td: w(({ td: l }) => [
-              Se(_(l.name ? l.name : isNaN(Number(l)) ? l.includes("%") ? o(T)(
+            td: w(({ td: t }) => [
+              Pe(_(t.name ? t.name : isNaN(Number(t)) ? t.includes("%") ? o(F)(
                 e.value.style.chart.layout.labels.percentage.formatter,
-                l,
+                t,
                 o(C)({
-                  v: l,
+                  v: t,
                   s: "%",
                   r: e.value.style.chart.layout.labels.percentage.rounding
                 })
-              ) : l : o(T)(
+              ) : t : o(F)(
                 e.value.style.chart.layout.labels.value.formatter,
-                l,
+                t,
                 o(C)({
                   p: e.value.style.chart.layout.labels.dataLabels.prefix,
-                  v: l,
+                  v: t,
                   s: e.value.style.chart.layout.labels.dataLabels.suffix,
                   r: e.value.style.chart.layout.labels.value.rounding
                 })
               )), 1)
             ]),
             _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"])
+          }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : v("", !0)
-    ], 14, ml));
+      }, 8, ["config"])) : c("", !0)
+    ], 14, xl));
   }
-}, ft = /* @__PURE__ */ gl(tt, [["__scopeId", "data-v-8cc49fb9"]]);
+}, wt = /* @__PURE__ */ _l(rt, [["__scopeId", "data-v-315950a4"]]);
 export {
-  ft as default
+  wt as default
 };