vue-data-ui 2.3.74 → 2.3.76

package/dist/{vue-ui-rings-BqS-iece.js → vue-ui-rings-Ctl3Jywh.js}

@@ -1,19 +1,19 @@
-import { ref as r, computed as d, onMounted as Ne, onBeforeUnmount as Pe, openBlock as i, createElementBlock as m, normalizeClass as V, normalizeStyle as _, createVNode as X, createCommentVNode as N, createBlock as B, unref as n, createSlots as Le, withCtx as p, renderSlot as g, normalizeProps as D, guardReactiveProps as U, Fragment as ne, renderList as ie, createElementVNode as w, createTextVNode as ve, toDisplayString as W, nextTick as Fe } from "vue";
-import { u as Ie, c as ce, t as Se, a as Oe, p as T, o as Me, e as j, g as ze, b as Ae, F as Re, d as de, f as x, X as Ve, v as Be, w as De, s as Y, i as he, x as Ue, y as We, q as Ee, r as Ge } from "./index-C8SH0f2u.js";
-import { t as He, u as Xe } from "./useResponsive-NZB-WLRF.js";
-import { _ as je } from "./Title-DZjnxQdN.js";
-import { u as Ye, U as qe } from "./usePrinter-Dj50NAxo.js";
-import { _ as Je } from "./Tooltip--kgFEVZs.js";
-import { D as Ke } from "./DataTable-CKdV-L0e.js";
-import { L as Qe } from "./Legend-Cj7T-DqJ.js";
-import Ze from "./vue-ui-skeleton-B4eWLjH3.js";
-import et from "./vue-ui-accordion-YHleIgkV.js";
-import { u as pe } from "./useNestedProp-lS_T5lM3.js";
-import { _ as tt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"], ut = ["stop-color"], rt = ["stroke", "cx", "cy", "r", "fill"], nt = ["stroke", "stroke-width", "cx", "cy", "r", "fill"], it = ["cx", "cy", "r", "onMouseenter"], vt = {
+import { ref as u, computed as d, watch as Fe, onMounted as Ie, onBeforeUnmount as Oe, openBlock as n, createElementBlock as m, normalizeClass as B, normalizeStyle as x, createBlock as N, createCommentVNode as P, unref as i, createSlots as Me, withCtx as p, renderSlot as f, normalizeProps as D, guardReactiveProps as U, Fragment as de, renderList as he, createElementVNode as w, createTextVNode as pe, toDisplayString as W, createVNode as ze, nextTick as Ae } from "vue";
+import { u as Re, c as ge, t as Ve, a as Be, p as T, o as De, e as X, g as Ue, b as We, F as Ee, d as fe, f as _, X as Ge, v as He, w as Xe, s as j, i as ye, x as je, y as Ye, q as qe, r as Je } from "./index-CaV1s-yZ.js";
+import { t as Ke, u as Qe } from "./useResponsive-NZB-WLRF.js";
+import { _ as Ze } from "./Title-gUz6GDA3.js";
+import { u as et, U as tt } from "./usePrinter-rvJyT65A.js";
+import { _ as lt } from "./Tooltip-DfSM1mNP.js";
+import { D as at } from "./DataTable-e2fnfjXV.js";
+import { L as ot } from "./Legend-5cQ0xZjK.js";
+import st from "./vue-ui-skeleton-CvFX_ExX.js";
+import ut from "./vue-ui-accordion-CpzGQ63y.js";
+import { u as me } from "./useNestedProp-tWCzZrLx.js";
+import { _ as rt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const nt = ["id"], it = ["xmlns", "viewBox"], vt = ["id"], ct = ["stop-color"], dt = ["stop-color"], ht = ["stroke", "cx", "cy", "r", "fill"], pt = ["stroke", "stroke-width", "cx", "cy", "r", "fill"], gt = ["cx", "cy", "r", "onMouseenter"], ft = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, ct = ["onClick"], dt = { key: 0 }, ht = { key: 1 }, pt = ["innerHTML"], gt = {
+}, yt = ["onClick"], mt = { key: 0 }, bt = { key: 1 }, kt = ["innerHTML"], Ct = {
   __name: "vue-ui-rings",
   props: {
     config: {
@@ -30,33 +30,44 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
     }
   },
   emits: ["selectLegend"],
-  setup(ge, { expose: fe, emit: ye }) {
-    const f = ge, { vue_ui_rings: me } = Ie(), P = r(!1), O = d(() => !!f.dataset && f.dataset.length), L = r(ce()), be = r(null), M = r(!1), E = r(""), $ = r(null), q = r(0), F = r(null), J = r(null), K = r(null), e = d(() => {
-      const t = pe({
-        userConfig: f.config,
-        defaultConfig: me
+  setup(be, { expose: ke, emit: Ce }) {
+    const g = be, { vue_ui_rings: we } = Re(), L = u(!1), M = d(() => !!g.dataset && g.dataset.length), S = u(ge()), $e = u(null), z = u(!1), E = u(""), $ = u(null), Y = u(0), F = u(null), q = u(null), J = u(null), K = u(0), Q = u(0), Z = u(0), e = d({
+      get: () => ee(),
+      set: (t) => t
+    });
+    function ee() {
+      const t = me({
+        userConfig: g.config,
+        defaultConfig: we
       });
       return t.theme ? {
-        ...pe({
-          userConfig: Se.vue_ui_rings[t.theme] || f.config,
+        ...me({
+          userConfig: Ve.vue_ui_rings[t.theme] || g.config,
           defaultConfig: t
         }),
-        customPalette: Oe[t.theme] || T
+        customPalette: Be[t.theme] || T
       } : t;
-    }), z = r(null);
-    Ne(() => {
-      if (Me(f.dataset) ? j({
+    }
+    Fe(() => g.config, (t) => {
+      e.value = ee(), te(), K.value += 1, Q.value += 1, Z.value += 1;
+    }, { deep: !0 });
+    const A = u(null);
+    Ie(() => {
+      te();
+    });
+    function te() {
+      if (De(g.dataset) ? X({
         componentName: "VueUiRings",
         type: "dataset"
-      }) : f.dataset.forEach((t, a) => {
-        t.values.length || j({
+      }) : g.dataset.forEach((t, a) => {
+        t.values.length || X({
           componentName: "VueUiRings",
           type: "dataset"
-        }), ze({
+        }), Ue({
           datasetObject: t,
           requiredAttributes: ["name", "values"]
         }).forEach((l) => {
-          j({
+          X({
             componentName: "VueUiRings",
             type: "datasetSerieAttribute",
             property: l,
@@ -64,77 +75,78 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
           });
         });
       }), e.value.responsive) {
-        const t = He(() => {
-          const { width: a, height: l } = Xe({
+        const t = Ke(() => {
+          const { width: a, height: l } = Qe({
             chart: F.value,
-            title: e.value.style.chart.title.text ? J.value : null,
-            legend: e.value.style.chart.legend.show ? K.value : null
+            title: e.value.style.chart.title.text ? q.value : null,
+            legend: e.value.style.chart.legend.show ? J.value : null
           });
-          u.value.width = a, u.value.height = l;
+          r.value.width = a, r.value.height = l;
         });
-        z.value = new ResizeObserver(t), z.value.observe(F.value.parentNode);
+        A.value = new ResizeObserver(t), A.value.observe(F.value.parentNode);
       }
       setTimeout(() => {
-        P.value = !0;
+        L.value = !0;
       }, 600);
-    }), Pe(() => {
-      z.value && z.value.disconnect();
+    }
+    Oe(() => {
+      A.value && A.value.disconnect();
     });
-    const { isPrinting: Q, isImaging: Z, generatePdf: ee, generateImage: te } = Ye({
-      elementId: `rings_${L.value}`,
+    const { isPrinting: le, isImaging: ae, generatePdf: oe, generateImage: se } = et({
+      elementId: `rings_${S.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-rings"
-    }), le = d(() => Ae(e.value.customPalette)), k = r({
+    }), ue = d(() => We(e.value.customPalette)), k = u({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
-    }), u = r({
+    }), r = u({
       height: 360,
       width: 360
-    }), ke = d(() => Math.min(u.value.height, u.value.width)), v = r([]);
+    }), Te = d(() => Math.min(r.value.height, r.value.width)), v = u([]);
     function G(t) {
-      v.value.includes(t) ? v.value = v.value.filter((a) => a !== t) : v.value.push(t), ye("selectLegend", c.value.map((a) => ({
+      v.value.includes(t) ? v.value = v.value.filter((a) => a !== t) : v.value.push(t), Ce("selectLegend", c.value.map((a) => ({
         name: a.name,
         color: a.color,
         value: a.value
       })));
     }
-    const Ce = d(() => Math.max(
-      ...A.value.filter((t) => !v.value.includes(t.uid)).map(({ value: t }) => t)
+    const _e = d(() => Math.max(
+      ...R.value.filter((t) => !v.value.includes(t.uid)).map(({ value: t }) => t)
     ));
-    function ae(t) {
-      return t / Ce.value;
+    function re(t) {
+      return t / _e.value;
     }
-    const A = d(() => f.dataset.map(({ values: t, name: a, color: l = null }, o) => {
-      const s = Re(t).reduce((b, S) => b + S, 0);
+    const R = d(() => g.dataset.map(({ values: t, name: a, color: l = null }, o) => {
+      const s = Ee(t).reduce((b, O) => b + O, 0);
       return {
         name: a,
-        color: l || de(l) || le.value[o] || T[o] || T[o % T.length],
+        color: l || fe(l) || ue.value[o] || T[o] || T[o % T.length],
         value: s,
-        proportion: s / f.dataset.map((b) => (b.values || []).reduce((S, _e) => S + _e, 0)).reduce((b, S) => b + S, 0),
-        uid: ce()
+        proportion: s / g.dataset.map((b) => (b.values || []).reduce((O, Se) => O + Se, 0)).reduce((b, O) => b + O, 0),
+        uid: ge()
       };
-    })), oe = d(() => A.value.map((t) => ({
+    })), ne = d(() => R.value.map((t) => ({
       ...t,
       shape: "circle",
       opacity: v.value.includes(t.uid) ? 0.5 : 1,
       segregate: () => G(t.uid),
       isSegregated: v.value.includes(t.uid)
-    })).toSorted((t, a) => a.value - t.value)), we = d(() => ({
+    })).toSorted((t, a) => a.value - t.value)), xe = d(() => ({
       cy: "rings-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" : ""
-    })), y = d(() => A.value.filter((t) => !v.value.includes(t.uid)).map(({ value: t }) => t).reduce((t, a) => t + a, 0)), c = d(() => A.value.filter((t) => !v.value.includes(t.uid)).map(({ name: t, value: a, color: l = null, uid: o }, s) => ({
+    })), y = d(() => R.value.filter((t) => !v.value.includes(t.uid)).map(({ value: t }) => t).reduce((t, a) => t + a, 0)), c = d(() => R.value.filter((t) => !v.value.includes(t.uid)).map(({ name: t, value: a, color: l = null, uid: o }, s) => ({
       uid: o,
       name: t,
-      color: l || de(l) || le.value[s] || T[s] || T[s % T.length],
+      color: l || fe(l) || ue.value[s] || T[s] || T[s % T.length],
       value: a,
-      proportion: ae(a),
+      proportion: re(a),
       percentage: a / y.value * 100,
-      strokeWidth: e.value.style.chart.layout.rings.strokeWidth * ae(a)
+      strokeWidth: e.value.style.chart.layout.rings.strokeWidth * re(a)
     })).toSorted((t, a) => a.value - t.value));
-    function $e() {
+    function Ne() {
       return c.value.map(
         ({ name: t, color: a, value: l, absoluteValues: o, percentage: s }) => ({
           name: t,
@@ -145,9 +157,9 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
         })
       );
     }
-    const h = d(() => ke.value - e.value.style.chart.layout.rings.strokeWidth * 2), H = r(null);
-    function Te(t, a) {
-      if (v.value.length === f.dataset.length) return;
+    const h = d(() => Te.value - e.value.style.chart.layout.rings.strokeWidth * 2), H = u(null);
+    function Pe(t, a) {
+      if (v.value.length === g.dataset.length) return;
       H.value = {
         datapoint: a,
         seriesIndex: t,
@@ -155,7 +167,7 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
         config: e.value
       }, $.value = t;
       const l = c.value[t], o = e.value.style.chart.tooltip.customFormat;
-      if (Ue(o) && We(() => o({
+      if (je(o) && Ye(() => o({
         seriesIndex: t,
         datapoint: a,
         series: c.value,
@@ -169,10 +181,10 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
         });
       else {
         let s = "";
-        s += `<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>`, s += `<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 && (s += `<b>${he(
+        s += `<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>`, s += `<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 && (s += `<b>${ye(
           e.value.style.chart.layout.labels.dataLabels.formatter,
           l.value,
-          x({
+          _({
             p: e.value.style.chart.layout.labels.dataLabels.prefix,
             v: l.value,
             s: e.value.style.chart.layout.labels.dataLabels.suffix,
@@ -180,17 +192,17 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
           }),
           { datapoint: a, seriesIndex: t }
         )}
-      </b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? s += `<span>(${x({
+      </b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? s += `<span>(${_({
           v: l.value / y.value * 100,
           s: "%",
           r: e.value.style.chart.tooltip.roundingPercentage
-        })})</span></div>` : s += `<b>${x({
+        })})</span></div>` : s += `<b>${_({
           v: l.value / y.value * 100,
           s: "%",
           r: e.value.style.chart.tooltip.roundingPercentage
         })}</b></div>`), E.value = s;
       }
-      M.value = !0;
+      z.value = !0;
     }
     const C = d(() => {
       const t = c.value.map((l) => ({
@@ -198,17 +210,17 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
         color: l.color
       })), a = c.value.map((l) => l.value);
       return { head: t, body: a };
-    }), R = d(() => {
+    }), V = d(() => {
       const t = [
         ' <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>',
-        x({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: y.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
+        _({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: y.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
         "100%"
       ], a = C.value.head.map((s, b) => [
         {
           color: s.color,
           name: s.name
         },
-        x({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: C.value.body[b], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
+        _({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: C.value.body[b], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
         isNaN(C.value.body[b] / y.value) ? "-" : (C.value.body[b] / y.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
       ]), l = {
         th: {
@@ -234,48 +246,49 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
         colNames: o
       };
     });
-    function se() {
-      Fe(() => {
+    function ie() {
+      Ae(() => {
         const t = C.value.head.map((o, s) => [[
           o.name
-        ], [C.value.body[s]], [isNaN(C.value.body[s] / y.value) ? "-" : C.value.body[s] / y.value * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = Ee(a);
-        Ge({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-rings" });
+        ], [C.value.body[s]], [isNaN(C.value.body[s] / y.value) ? "-" : C.value.body[s] / y.value * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = qe(a);
+        Je({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-rings" });
       });
     }
-    const I = r(!1);
-    function xe(t) {
-      I.value = t, q.value += 1;
+    const I = u(!1);
+    function Le(t) {
+      I.value = t, Y.value += 1;
     }
-    function ue() {
+    function ve() {
       k.value.showTable = !k.value.showTable;
     }
-    function re() {
+    function ce() {
       k.value.showTooltip = !k.value.showTooltip;
     }
-    return fe({
-      getData: $e,
-      generatePdf: ee,
-      generateCsv: se,
-      generateImage: te,
-      toggleTable: ue,
-      toggleTooltip: re
-    }), (t, a) => (i(), m("div", {
+    return ke({
+      getData: Ne,
+      generatePdf: oe,
+      generateCsv: ie,
+      generateImage: se,
+      toggleTable: ve,
+      toggleTooltip: ce
+    }), (t, a) => (n(), m("div", {
       ref_key: "ringsChart",
       ref: F,
-      class: V(`vue-ui-rings ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: _(`font-family:${e.value.style.fontFamily};text-align:center;width:100%;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
-      id: `rings_${L.value}`,
+      class: B(`vue-ui-rings ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: x(`font-family:${e.value.style.fontFamily};text-align:center;width:100%;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
+      id: `rings_${S.value}`,
       onMouseleave: a[3] || (a[3] = (l) => {
-        $.value = null, M.value = !1;
+        $.value = null, z.value = !1;
       })
     }, [
-      e.value.style.chart.title.text ? (i(), m("div", {
+      e.value.style.chart.title.text ? (n(), m("div", {
         key: 0,
         ref_key: "chartTitle",
-        ref: J,
-        style: _(`width:100%;background:${e.value.style.chart.backgroundColor}`)
+        ref: q,
+        style: x(`width:100%;background:${e.value.style.chart.backgroundColor}`)
       }, [
-        X(je, {
+        (n(), N(Ze, {
+          key: `title_${K.value}`,
           config: {
             title: {
               cy: "rings-div-title",
@@ -286,17 +299,17 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
               ...e.value.style.chart.title.subtitle
             }
           }
-        }, null, 8, ["config"])
-      ], 4)) : N("", !0),
-      e.value.userOptions.show && O.value ? (i(), B(qe, {
+        }, null, 8, ["config"]))
+      ], 4)) : P("", !0),
+      e.value.userOptions.show && M.value ? (n(), N(tt, {
         ref_key: "details",
-        ref: be,
-        key: `user_options_${q.value}`,
+        ref: $e,
+        key: `user_options_${Y.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: n(Q),
-        isImaging: n(Z),
-        uid: L.value,
+        isPrinting: i(le),
+        isImaging: i(ae),
+        uid: S.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
@@ -307,128 +320,128 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
         isFullscreen: I.value,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: F.value,
-        onToggleFullscreen: xe,
-        onGeneratePdf: n(ee),
-        onGenerateCsv: se,
-        onGenerateImage: n(te),
-        onToggleTable: ue,
-        onToggleTooltip: re
-      }, Le({ _: 2 }, [
+        onToggleFullscreen: Le,
+        onGeneratePdf: i(oe),
+        onGenerateCsv: ie,
+        onGenerateImage: i(se),
+        onToggleTable: ve,
+        onToggleTooltip: ce
+      }, Me({ _: 2 }, [
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: p(() => [
-            g(t.$slots, "optionTooltip", {}, void 0, !0)
+            f(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
           fn: p(() => [
-            g(t.$slots, "optionPdf", {}, void 0, !0)
+            f(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
           fn: p(() => [
-            g(t.$slots, "optionCsv", {}, void 0, !0)
+            f(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
           fn: p(() => [
-            g(t.$slots, "optionImg", {}, void 0, !0)
+            f(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
           fn: p(() => [
-            g(t.$slots, "optionTable", {}, void 0, !0)
+            f(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: p(({ toggleFullscreen: l, isFullscreen: o }) => [
-            g(t.$slots, "optionFullscreen", D(U({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+            f(t.$slots, "optionFullscreen", D(U({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
           ]),
           key: "5"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : N("", !0),
-      O.value ? (i(), m("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : P("", !0),
+      M.value ? (n(), m("svg", {
         key: 2,
-        xmlns: n(Ve),
-        class: V({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
-        viewBox: `0 0 ${u.value.width <= 0 ? 10 : u.value.width} ${u.value.height <= 0 ? 10 : u.value.height}`,
-        style: _(`max-width:100%;overflow:visible;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
+        xmlns: i(Ge),
+        class: B({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
+        viewBox: `0 0 ${r.value.width <= 0 ? 10 : r.value.width} ${r.value.height <= 0 ? 10 : r.value.height}`,
+        style: x(`max-width:100%;overflow:visible;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
       }, [
-        (i(!0), m(ne, null, ie(c.value, (l, o) => (i(), m("radialGradient", {
+        (n(!0), m(de, null, he(c.value, (l, o) => (n(), m("radialGradient", {
           cx: "50%",
           cy: "30%",
           r: "50%",
           fx: "50%",
           fy: "50%",
-          id: `gradient_${L.value}_${o}`
+          id: `gradient_${S.value}_${o}`
         }, [
           w("stop", {
             offset: "0%",
-            "stop-color": `${n(Be)(l.color, 0.05)}${n(De)[100 - e.value.style.chart.layout.rings.gradient.intensity]}`
-          }, null, 8, st),
+            "stop-color": `${i(He)(l.color, 0.05)}${i(Xe)[100 - e.value.style.chart.layout.rings.gradient.intensity]}`
+          }, null, 8, ct),
           w("stop", {
             offset: "100%",
             "stop-color": l.color
-          }, null, 8, ut)
-        ], 8, ot))), 256)),
-        (i(!0), m(ne, null, ie(c.value, (l, o) => (i(), m("g", null, [
+          }, null, 8, dt)
+        ], 8, vt))), 256)),
+        (n(!0), m(de, null, he(c.value, (l, o) => (n(), m("g", null, [
           w("circle", {
-            class: V({
-              "vue-ui-rings-item": P.value && e.value.useCssAnimation,
-              "vue-rings-item-onload": !P.value && e.value.useCssAnimation,
+            class: B({
+              "vue-ui-rings-item": L.value && e.value.useCssAnimation,
+              "vue-rings-item-onload": !L.value && e.value.useCssAnimation,
               "vue-ui-rings-opacity": $.value !== null && $.value !== o
             }),
-            style: _(`animation-delay:${o * 100}ms`),
+            style: x(`animation-delay:${o * 100}ms`),
             stroke: e.value.style.chart.layout.rings.stroke,
-            cx: u.value.width / 2,
-            cy: o === 0 ? u.value.height / 2 : u.value.height / 2 + h.value * c.value[0].proportion / 2 - h.value * l.proportion / 2 - 2 * (o + 1),
-            r: n(Y)(h.value * l.proportion / 2 * 0.9 <= 0 ? 1e-4 : h.value * l.proportion / 2 * 0.9),
+            cx: r.value.width / 2,
+            cy: o === 0 ? r.value.height / 2 : r.value.height / 2 + h.value * c.value[0].proportion / 2 - h.value * l.proportion / 2 - 2 * (o + 1),
+            r: i(j)(h.value * l.proportion / 2 * 0.9 <= 0 ? 1e-4 : h.value * l.proportion / 2 * 0.9),
             fill: e.value.style.chart.layout.rings.gradient.underlayerColor
-          }, null, 14, rt),
+          }, null, 14, ht),
           w("circle", {
-            class: V({
-              "vue-ui-rings-item": P.value && e.value.useCssAnimation,
-              "vue-rings-item-onload": !P.value && e.value.useCssAnimation,
+            class: B({
+              "vue-ui-rings-item": L.value && e.value.useCssAnimation,
+              "vue-rings-item-onload": !L.value && e.value.useCssAnimation,
               "vue-ui-rings-shadow": e.value.style.chart.layout.rings.useShadow,
               "vue-ui-rings-blur": $.value !== null && $.value !== o
             }),
-            style: _(`animation-delay:${o * 100}ms`),
+            style: x(`animation-delay:${o * 100}ms`),
             stroke: e.value.style.chart.layout.rings.stroke,
             "stroke-width": l.strokeWidth < 0.5 ? 0.5 : l.strokeWidth,
-            cx: u.value.width / 2,
-            cy: o === 0 ? u.value.height / 2 : u.value.height / 2 + h.value * c.value[0].proportion / 2 - h.value * l.proportion / 2 - 2 * (o + 1),
-            r: n(Y)(h.value * l.proportion / 2 * 0.9 <= 0 ? 1e-4 : h.value * l.proportion / 2 * 0.9),
-            fill: e.value.style.chart.layout.rings.gradient.show ? `url(#gradient_${L.value}_${o})` : l.color
-          }, null, 14, nt),
+            cx: r.value.width / 2,
+            cy: o === 0 ? r.value.height / 2 : r.value.height / 2 + h.value * c.value[0].proportion / 2 - h.value * l.proportion / 2 - 2 * (o + 1),
+            r: i(j)(h.value * l.proportion / 2 * 0.9 <= 0 ? 1e-4 : h.value * l.proportion / 2 * 0.9),
+            fill: e.value.style.chart.layout.rings.gradient.show ? `url(#gradient_${S.value}_${o})` : l.color
+          }, null, 14, pt),
           w("circle", {
             "data-cy-trap": "",
             stroke: "none",
-            cx: u.value.width / 2,
-            cy: o === 0 ? u.value.height / 2 : u.value.height / 2 + h.value * c.value[0].proportion / 2 - h.value * l.proportion / 2 - 2 * (o + 1),
-            r: n(Y)(h.value * l.proportion / 2 * 0.9 <= 0 ? 1e-4 : h.value * l.proportion / 2 * 0.9),
+            cx: r.value.width / 2,
+            cy: o === 0 ? r.value.height / 2 : r.value.height / 2 + h.value * c.value[0].proportion / 2 - h.value * l.proportion / 2 - 2 * (o + 1),
+            r: i(j)(h.value * l.proportion / 2 * 0.9 <= 0 ? 1e-4 : h.value * l.proportion / 2 * 0.9),
             fill: "transparent",
-            onMouseenter: (s) => Te(o, l),
+            onMouseenter: (s) => Pe(o, l),
             onMouseleave: a[0] || (a[0] = (s) => {
-              $.value = null, M.value = !1;
+              $.value = null, z.value = !1;
             })
-          }, null, 40, it)
+          }, null, 40, gt)
         ]))), 256)),
-        g(t.$slots, "svg", { svg: u.value }, void 0, !0)
-      ], 14, at)) : N("", !0),
-      t.$slots.watermark ? (i(), m("div", vt, [
-        g(t.$slots, "watermark", D(U({ isPrinting: n(Q) || n(Z) })), void 0, !0)
-      ])) : N("", !0),
-      O.value ? N("", !0) : (i(), B(Ze, {
+        f(t.$slots, "svg", { svg: r.value }, void 0, !0)
+      ], 14, it)) : P("", !0),
+      t.$slots.watermark ? (n(), m("div", ft, [
+        f(t.$slots, "watermark", D(U({ isPrinting: i(le) || i(ae) })), void 0, !0)
+      ])) : P("", !0),
+      M.value ? P("", !0) : (n(), N(st, {
         key: 4,
         config: {
           type: "rings",
@@ -442,24 +455,24 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
       }, null, 8, ["config"])),
       w("div", {
         ref_key: "chartLegend",
-        ref: K
+        ref: J
       }, [
-        e.value.style.chart.legend.show ? (i(), B(Qe, {
-          key: 0,
-          legendSet: oe.value,
-          config: we.value,
+        e.value.style.chart.legend.show ? (n(), N(ot, {
+          key: `legend_${Z.value}`,
+          legendSet: ne.value,
+          config: xe.value,
           onClickMarker: a[1] || (a[1] = ({ legend: l }) => G(l.uid))
         }, {
           item: p(({ legend: l, index: o }) => [
             w("div", {
               "data-cy-legend-item": "",
               onClick: (s) => G(l.uid),
-              style: _(`opacity:${v.value.includes(l.uid) ? 0.5 : 1}`)
+              style: x(`opacity:${v.value.includes(l.uid) ? 0.5 : 1}`)
             }, [
-              ve(W(l.name) + ": " + W(n(he)(
+              pe(W(l.name) + ": " + W(i(ye)(
                 e.value.style.chart.layout.labels.dataLabels.formatter,
                 l.value,
-                n(x)({
+                i(_)({
                   p: e.value.style.chart.layout.labels.dataLabels.prefix,
                   v: l.value,
                   s: e.value.style.chart.layout.labels.dataLabels.suffix,
@@ -467,21 +480,21 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
                 }),
                 { datapoint: l, seriesIndex: o }
               )) + " ", 1),
-              v.value.includes(l.uid) ? (i(), m("span", ht, " ( - % ) ")) : (i(), m("span", dt, " (" + W(isNaN(l.value / y.value) ? "-" : n(x)({
+              v.value.includes(l.uid) ? (n(), m("span", bt, " ( - % ) ")) : (n(), m("span", mt, " (" + W(isNaN(l.value / y.value) ? "-" : i(_)({
                 v: l.value / y.value * 100,
                 s: "%",
                 r: e.value.style.chart.legend.roundingPercentage
               })) + ") ", 1))
-            ], 12, ct)
+            ], 12, yt)
           ]),
           _: 1
-        }, 8, ["legendSet", "config"])) : g(t.$slots, "legend", {
+        }, 8, ["legendSet", "config"])) : f(t.$slots, "legend", {
           key: 1,
-          legend: oe.value
+          legend: ne.value
         }, void 0, !0)
       ], 512),
-      X(Je, {
-        show: k.value.showTooltip && M.value && v.value.length < f.dataset.length,
+      ze(lt, {
+        show: k.value.showTooltip && z.value && v.value.length < g.dataset.length,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -496,14 +509,14 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function"
       }, {
         "tooltip-before": p(() => [
-          g(t.$slots, "tooltip-before", D(U({ ...H.value })), void 0, !0)
+          f(t.$slots, "tooltip-before", D(U({ ...H.value })), void 0, !0)
         ]),
         "tooltip-after": p(() => [
-          g(t.$slots, "tooltip-after", D(U({ ...H.value })), void 0, !0)
+          f(t.$slots, "tooltip-after", D(U({ ...H.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
-      O.value ? (i(), B(et, {
+      M.value ? (n(), N(ut, {
         key: 5,
         hideDetails: "",
         config: {
@@ -520,11 +533,12 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
         }
       }, {
         content: p(() => [
-          X(Ke, {
-            colNames: R.value.colNames,
-            head: R.value.head,
-            body: R.value.body,
-            config: R.value.config,
+          (n(), N(at, {
+            key: `table_${Q.value}`,
+            colNames: V.value.colNames,
+            head: V.value.head,
+            body: V.value.body,
+            config: V.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) => k.value.showTable = !1)
           }, {
@@ -532,19 +546,19 @@ const lt = ["id"], at = ["xmlns", "viewBox"], ot = ["id"], st = ["stop-color"],
               w("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, pt)
+              }, null, 8, kt)
             ]),
             td: p(({ td: l }) => [
-              ve(W(l.name || l), 1)
+              pe(W(l.name || l), 1)
             ]),
             _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"])
+          }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : N("", !0)
-    ], 46, lt));
+      }, 8, ["config"])) : P("", !0)
+    ], 46, nt));
   }
-}, Pt = /* @__PURE__ */ tt(gt, [["__scopeId", "data-v-30253e49"]]);
+}, Mt = /* @__PURE__ */ rt(Ct, [["__scopeId", "data-v-2d607318"]]);
 export {
-  Pt as default
+  Mt as default
 };