vue-data-ui 2.3.73 → 2.3.75

package/dist/{vue-ui-onion-BmQ7B9xY.js → vue-ui-onion-CFa4VD-w.js}

@@ -1,19 +1,19 @@
-import { computed as d, ref as u, onMounted as Pe, onBeforeUnmount as Oe, watch as Ie, openBlock as s, createElementBlock as n, normalizeClass as L, normalizeStyle as z, createVNode as j, createCommentVNode as b, createBlock as Y, unref as v, createSlots as Me, withCtx as h, renderSlot as g, normalizeProps as B, guardReactiveProps as V, Fragment as M, renderList as F, createElementVNode as C, toDisplayString as T, createTextVNode as Fe, nextTick as Se } from "vue";
-import { u as Ne, c as Re, t as Ae, a as De, p as ie, b as Le, o as ze, e as q, d as Ye, X as Be, f as S, i as J, x as ce, q as Ve, r as Xe, y as Ge } from "./index-Dvs5Ra-u.js";
-import { t as Ue, u as Ee } from "./useResponsive-NZB-WLRF.js";
-import { _ as He } from "./Title-Ngy9HNqO.js";
-import { u as We, U as je } from "./usePrinter-B8-keRMa.js";
-import { L as qe } from "./Legend-CHd5QFPM.js";
-import { D as Je } from "./DataTable-BOdJVZzF.js";
-import { _ as Ke } from "./Tooltip-BCtg7xYX.js";
-import Qe from "./vue-ui-skeleton-CAvlIcgk.js";
-import Ze from "./vue-ui-accordion-C-qAry7P.js";
-import { u as de } from "./useNestedProp-UohhCyBz.js";
-import { _ as et } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], ot = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], rt = ["id"], st = ["stdDeviation"], ut = ["filter"], nt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], it = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter"], ct = { key: 1 }, dt = ["onMouseenter"], vt = ["x", "y", "font-size", "fill", "font-weight"], ht = {
+import { computed as d, ref as u, watch as he, onMounted as Fe, onBeforeUnmount as Ne, openBlock as s, createElementBlock as n, normalizeClass as z, normalizeStyle as Y, createBlock as x, createCommentVNode as b, unref as v, createSlots as Re, withCtx as h, renderSlot as g, normalizeProps as B, guardReactiveProps as V, Fragment as M, renderList as F, createElementVNode as T, toDisplayString as _, createVNode as Ae, createTextVNode as De, nextTick as Le } from "vue";
+import { u as ze, c as Ye, t as Be, a as Ve, p as fe, b as Xe, o as Ge, e as j, d as Ue, X as Ee, f as N, i as q, x as ge, q as He, r as We, y as je } from "./index-Cm4Iry5c.js";
+import { t as qe, u as Je } from "./useResponsive-NZB-WLRF.js";
+import { _ as Ke } from "./Title-C26I_HC3.js";
+import { u as Qe, U as Ze } from "./usePrinter-B8RnF8_q.js";
+import { L as et } from "./Legend-DX1kv21U.js";
+import { D as tt } from "./DataTable-CQANRZju.js";
+import { _ as at } from "./Tooltip-CH8GmDCG.js";
+import lt from "./vue-ui-skeleton-C1oUnz7R.js";
+import ot from "./vue-ui-accordion-Cb6XBCbu.js";
+import { u as pe } from "./useNestedProp-CurQIHTa.js";
+import { _ as rt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const st = ["id"], ut = ["xmlns", "viewBox"], nt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], it = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], ct = ["id"], dt = ["stdDeviation"], vt = ["filter"], ht = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], ft = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter"], gt = { key: 1 }, pt = ["onMouseenter"], yt = ["x", "y", "font-size", "fill", "font-weight"], mt = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, ft = ["onClick"], gt = ["innerHTML"], pt = {
+}, bt = ["onClick"], kt = ["innerHTML"], $t = {
   __name: "vue-ui-onion",
   props: {
     config: {
@@ -30,23 +30,31 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
     }
   },
   emits: ["selectLegend"],
-  setup(ve, { expose: he, emit: fe }) {
-    const w = ve, { vue_ui_onion: ge } = Ne(), N = d(() => !!w.dataset && w.dataset.length), x = u(Re()), pe = u(null), K = u(0), R = u(!1), X = u(""), p = u([]), _ = u(null), Q = u(null), Z = u(null), e = d(() => {
-      const a = de({
-        userConfig: w.config,
-        defaultConfig: ge
+  setup(ye, { expose: me, emit: be }) {
+    const k = ye, { vue_ui_onion: ke } = ze(), R = d(() => !!k.dataset && k.dataset.length), C = u(Ye()), $e = u(null), J = u(0), A = u(!1), X = u(""), p = u([]), P = u(null), K = u(null), Q = u(null), Z = u(0), ee = u(0), te = u(0), e = d({
+      get: () => ae(),
+      set: (a) => a
+    });
+    function ae() {
+      const a = pe({
+        userConfig: k.config,
+        defaultConfig: ke
       });
       return a.theme ? {
-        ...de({
-          userConfig: Ae.vue_ui_onion[a.theme] || w.config,
+        ...pe({
+          userConfig: Be.vue_ui_onion[a.theme] || k.config,
           defaultConfig: a
         }),
-        customPalette: De[a.theme] || ie
+        customPalette: Ve[a.theme] || fe
       } : a;
-    }), { isPrinting: ee, isImaging: te, generatePdf: ae, generateImage: le } = We({
-      elementId: `vue-ui-onion_${x.value}`,
+    }
+    he(() => k.config, (a) => {
+      e.value = ae(), ue(), Z.value += 1, ee.value += 1, te.value += 1;
+    }, { deep: !0 });
+    const { isPrinting: le, isImaging: oe, generatePdf: re, generateImage: se } = Qe({
+      elementId: `vue-ui-onion_${C.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-onion"
-    }), ye = d(() => Le(e.value.customPalette)), k = u({
+    }), we = d(() => Xe(e.value.customPalette)), $ = u({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     }), r = u({
@@ -59,24 +67,28 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
         bottom: 64
       },
       minRadius: 64
-    }), A = u(null);
-    Pe(() => {
-      if (ze(w.dataset) && q({
+    }), D = u(null);
+    Fe(() => {
+      ue();
+    });
+    function ue() {
+      if (Ge(k.dataset) && j({
         componentName: "VueUiOnion",
         type: "dataset"
       }), e.value.responsive) {
-        const o = Ue(() => {
-          const { width: t, height: l } = Ee({
-            chart: _.value,
-            title: e.value.style.chart.title.text ? Q.value : null,
-            legend: e.value.style.chart.legend.show ? Z.value : null
+        const o = qe(() => {
+          const { width: t, height: l } = Je({
+            chart: P.value,
+            title: e.value.style.chart.title.text ? K.value : null,
+            legend: e.value.style.chart.legend.show ? Q.value : null
           });
           r.value.width = t, r.value.height = l, r.value.padding.top = Math.max(t, l) * 0.125, r.value.padding.right = Math.max(t, l) * 0.125, r.value.padding.bottom = Math.max(t, l) * 0.125, r.value.padding.left = Math.max(t, l) * 0.125, r.value.minRadius = Math.min(t, l) * 0.125;
         });
-        A.value = new ResizeObserver(o), A.value.observe(_.value.parentNode);
+        D.value = new ResizeObserver(o), D.value.observe(P.value.parentNode);
       }
-    }), Oe(() => {
-      A.value && A.value.disconnect();
+    }
+    Ne(() => {
+      D.value && D.value.disconnect();
     });
     const i = d(() => ({
       top: r.value.padding.top,
@@ -89,81 +101,81 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
       height: r.value.height - r.value.padding.bottom - r.value.padding.top,
       minRadius: r.value.minRadius,
       maxRadius: Math.min(r.value.width, r.value.height) - r.value.padding.top * 2
-    })), c = d(() => (w.dataset.forEach((a, o) => {
-      [null, void 0].includes(a.name) && q({
+    })), c = d(() => (k.dataset.forEach((a, o) => {
+      [null, void 0].includes(a.name) && j({
         componentName: "VueUiOnion",
         type: "datasetSerieAttribute",
         property: "name",
         index: o
-      }), [void 0].includes(a.percentage) && q({
+      }), [void 0].includes(a.percentage) && j({
         componentName: "VueUiOnion",
         type: "datasetSerieAttribute",
         property: "percentage",
         index: o
       });
-    }), w.dataset.map((a, o) => {
-      const t = `onion_serie_${o}_${x.value}`;
+    }), k.dataset.map((a, o) => {
+      const t = `onion_serie_${o}_${C.value}`;
       return {
         ...a,
         percentage: a.percentage || 0,
         targetPercentage: a.percentage || 0,
-        color: Ye(a.color) || ye.value[o] || ie[o],
+        color: Ue(a.color) || we.value[o] || fe[o],
         id: t,
         shape: "circle",
         opacity: p.value.includes(t) ? 0.5 : 1,
         absoluteIndex: o,
-        segregate: () => oe(t),
+        segregate: () => ne(t),
         isSegregated: p.value.includes(t)
       };
-    }))), P = u(c.value), me = d(() => e.value.useStartAnimation), be = u(null), ke = d(() => Math.max(...c.value.map((a) => a.percentage))), G = u(!1);
-    Ie(() => c.value, we, { immediate: !0 });
-    function we() {
-      if (me.value && !G.value) {
+    }))), O = u(c.value), Ce = d(() => e.value.useStartAnimation), xe = u(null), Te = d(() => Math.max(...c.value.map((a) => a.percentage))), G = u(!1);
+    he(() => c.value, _e, { immediate: !0 });
+    function _e() {
+      if (Ce.value && !G.value) {
         let o = function() {
-          a >= ke.value ? (cancelAnimationFrame(be.value), P.value = c.value, G.value = !0) : (P.value = c.value.map((t) => ({
+          a >= Te.value ? (cancelAnimationFrame(xe.value), O.value = c.value, G.value = !0) : (O.value = c.value.map((t) => ({
             ...t,
             percentage: a < t.targetPercentage ? a : t.targetPercentage
           })), a += 1, requestAnimationFrame(o), G.value = !0);
         };
-        P.value = c.value.map((t) => ({
+        O.value = c.value.map((t) => ({
           ...t,
           percentage: 0
         }));
         let a = 0;
         o();
       } else
-        P.value = c.value;
+        O.value = c.value;
     }
-    const $e = d(() => ({
+    const Pe = d(() => ({
       cy: "onion-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" : ""
-    })), xe = d(() => c.value.filter((a) => !p.value.includes(a.id)).length), $ = d(() => {
+    })), Oe = d(() => c.value.filter((a) => !p.value.includes(a.id)).length), w = d(() => {
       const a = Math.min(i.value.width, i.value.height) / 2 / c.value.length;
       return {
         gutter: (a > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : a) * e.value.style.chart.layout.gutter.width,
         track: (a > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : a) * e.value.style.chart.layout.track.width
       };
-    }), y = d(() => P.value.filter((a) => !p.value.includes(a.id)).map((a, o) => {
-      const t = (i.value.maxRadius - $.value.track) / xe.value / 2 * (1 + o), l = i.value.centerY - t;
+    }), y = d(() => O.value.filter((a) => !p.value.includes(a.id)).map((a, o) => {
+      const t = (i.value.maxRadius - w.value.track) / Oe.value / 2 * (1 + o), l = i.value.centerY - t;
       return {
         percentage: a.percentage || 0,
         ...a,
         labelY: l,
         radius: t,
-        path: Ce(t, a.percentage || 0)
+        path: Ie(t, a.percentage || 0)
       };
     }));
-    function Ce(a, o) {
-      const t = 2 * Math.PI * a, l = t * 0.75, f = `${l} ${t}`, I = l * (1 - o / 100);
+    function Ie(a, o) {
+      const t = 2 * Math.PI * a, l = t * 0.75, f = `${l} ${t}`, S = l * (1 - o / 100);
       return {
         bgDashArray: `${l} ${t}`,
         bgDashOffset: 0,
         dashArray: f,
-        dashOffset: I,
+        dashOffset: S,
         fullOffset: 0,
         active: `
             M ${i.value.centerX},${i.value.centerY - a} 
@@ -172,10 +184,10 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
         `.trim()
       };
     }
-    function oe(a) {
-      p.value.includes(a) ? p.value = p.value.filter((o) => o !== a) : p.value.push(a), fe("selectLegend", y.value);
+    function ne(a) {
+      p.value.includes(a) ? p.value = p.value.filter((o) => o !== a) : p.value.push(a), be("selectLegend", y.value);
     }
-    function Te() {
+    function Se() {
       return y.value;
     }
     const U = d(() => {
@@ -185,7 +197,7 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
         t.value
       ]);
       return { head: a, body: o };
-    }), D = d(() => {
+    }), L = d(() => {
       const a = U.value.head, o = y.value.map((l) => [
         `<span style="color:${l.color}">⬤</span> ${l.name}`,
         `${Number(l.percentage ?? 0).toFixed(e.value.table.td.roundingPercentage).toLocaleString()}%`,
@@ -205,34 +217,34 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
       };
       return { head: a, body: o, config: t, colNames: a };
     });
-    function re() {
-      Se(() => {
-        const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = U.value.head, t = U.value.body, l = a.concat([o]).concat(t), f = Ve(l);
-        Xe({ csvContent: f, title: e.value.style.chart.title.text || "vue-ui-onion" });
+    function ie() {
+      Le(() => {
+        const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = U.value.head, t = U.value.body, l = a.concat([o]).concat(t), f = He(l);
+        We({ csvContent: f, title: e.value.style.chart.title.text || "vue-ui-onion" });
       });
     }
-    const m = u(void 0), O = u(!1);
-    function _e(a) {
-      O.value = a, K.value += 1;
+    const m = u(void 0), I = u(!1);
+    function Me(a) {
+      I.value = a, J.value += 1;
     }
     const E = u(null);
-    function se({ datapoint: a, seriesIndex: o, show: t = !0 }) {
+    function ce({ datapoint: a, seriesIndex: o, show: t = !0 }) {
       const l = a.absoluteIndex;
       m.value = o, E.value = {
         datapoint: a,
         seriesIndex: l,
         series: c.value,
         config: e.value
-      }, R.value = t;
+      }, A.value = t;
       let f = "";
-      const I = e.value.style.chart.tooltip.customFormat;
-      if (ce(I) && Ge(() => I({
+      const S = e.value.style.chart.tooltip.customFormat;
+      if (ge(S) && je(() => S({
         seriesIndex: l,
         datapoint: a,
         series: c.value,
         config: e.value
       })))
-        X.value = I({
+        X.value = S({
           seriesIndex: l,
           datapoint: a,
           series: c.value,
@@ -240,10 +252,10 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
         });
       else {
         const H = e.value.style.chart.tooltip.showPercentage, W = e.value.style.chart.tooltip.showValue;
-        f += `<div style="width: 100%; border-bottom: 1px solid ${e.value.style.chart.tooltip.borderColor}; padding-bottom: 6px;margin-bottom:3px;display:flex;flex-direction:row;gap:3px;align-items:center"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${a.color}"/></svg><span></span>${a.name}</span></div>`, f += `<div style="width:100%;text-align:left;"><b>${H ? S({ p: "", v: a.percentage, s: "%", r: e.value.style.chart.tooltip.roundingPercentage }) : ""}</b> ${H && W ? "(" : ""}${W ? J(
+        f += `<div style="width: 100%; border-bottom: 1px solid ${e.value.style.chart.tooltip.borderColor}; padding-bottom: 6px;margin-bottom:3px;display:flex;flex-direction:row;gap:3px;align-items:center"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${a.color}"/></svg><span></span>${a.name}</span></div>`, f += `<div style="width:100%;text-align:left;"><b>${H ? N({ p: "", v: a.percentage, s: "%", r: e.value.style.chart.tooltip.roundingPercentage }) : ""}</b> ${H && W ? "(" : ""}${W ? q(
           e.value.style.chart.layout.labels.value.formatter,
           a.value,
-          S({
+          N({
             p: a.prefix || "",
             v: a.value,
             s: a.suffix || "",
@@ -253,33 +265,34 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
         ) : ""}${H && W ? ")" : ""}</div>`, X.value = `<div>${f}</div>`;
       }
     }
-    function ue() {
-      k.value.showTable = !k.value.showTable;
+    function de() {
+      $.value.showTable = !$.value.showTable;
     }
-    function ne() {
-      k.value.showTooltip = !k.value.showTooltip;
+    function ve() {
+      $.value.showTooltip = !$.value.showTooltip;
     }
-    return he({
-      getData: Te,
-      generatePdf: ae,
-      generateCsv: re,
-      generateImage: le,
-      toggleTable: ue,
-      toggleTooltip: ne
+    return me({
+      getData: Se,
+      generatePdf: re,
+      generateCsv: ie,
+      generateImage: se,
+      toggleTable: de,
+      toggleTooltip: ve
     }), (a, o) => (s(), n("div", {
-      class: L(`vue-ui-onion ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      class: z(`vue-ui-onion ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "onionChart",
-      ref: _,
-      id: `vue-ui-onion_${x.value}`,
-      style: z(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`)
+      ref: P,
+      id: `vue-ui-onion_${C.value}`,
+      style: Y(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`)
     }, [
       e.value.style.chart.title.text ? (s(), n("div", {
         key: 0,
         ref_key: "chartTitle",
-        ref: Q,
-        style: z(`width:100%;background:${e.value.style.chart.backgroundColor}`)
+        ref: K,
+        style: Y(`width:100%;background:${e.value.style.chart.backgroundColor}`)
       }, [
-        j(He, {
+        (s(), x(Ke, {
+          key: `title_${Z.value}`,
           config: {
             title: {
               cy: "onion-div-title",
@@ -290,34 +303,34 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
               ...e.value.style.chart.title.subtitle
             }
           }
-        }, null, 8, ["config"])
+        }, null, 8, ["config"]))
       ], 4)) : b("", !0),
-      e.value.userOptions.show && N.value ? (s(), Y(je, {
+      e.value.userOptions.show && R.value ? (s(), x(Ze, {
         ref_key: "details",
-        ref: pe,
-        key: `user_options${K.value}`,
+        ref: $e,
+        key: `user_options${J.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: v(te),
-        isPrinting: v(ee),
-        uid: x.value,
+        isImaging: v(oe),
+        isPrinting: v(le),
+        uid: C.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
         hasXls: e.value.userOptions.buttons.csv,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: O.value,
-        isTooltip: k.value.showTooltip,
+        isFullscreen: I.value,
+        isTooltip: $.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: _.value,
-        onToggleFullscreen: _e,
-        onGeneratePdf: v(ae),
-        onGenerateCsv: re,
-        onGenerateImage: v(le),
-        onToggleTable: ue,
-        onToggleTooltip: ne
-      }, Me({ _: 2 }, [
+        chartElement: P.value,
+        onToggleFullscreen: Me,
+        onGeneratePdf: v(re),
+        onGenerateCsv: ie,
+        onGenerateImage: v(se),
+        onToggleTable: de,
+        onToggleTooltip: ve
+      }, Re({ _: 2 }, [
         a.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: h(() => [
@@ -361,144 +374,144 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
           key: "5"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : b("", !0),
-      N.value ? (s(), n("svg", {
+      R.value ? (s(), n("svg", {
         key: 2,
-        xmlns: v(Be),
-        class: L({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
+        xmlns: v(Ee),
+        class: z({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
         viewBox: `0 0 ${r.value.width <= 0 ? 1e-4 : r.value.width} ${r.value.height <= 0 ? 1e-4 : r.value.height}`,
-        style: z(`max-width:100%;overflow:visible;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
+        style: Y(`max-width:100%;overflow:visible;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
       }, [
         (s(!0), n(M, null, F(y.value, (t, l) => (s(), n("circle", {
           cx: i.value.centerX,
           cy: i.value.centerY,
           r: t.radius <= 0 ? 1e-4 : t.radius,
           stroke: e.value.style.chart.layout.gutter.color,
-          "stroke-width": $.value.gutter,
+          "stroke-width": w.value.gutter,
           fill: "none",
           "stroke-dasharray": t.path.bgDashArray,
           "stroke-dashoffset": t.path.fullOffset,
           "stroke-linecap": "round",
-          class: L({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(m.value) && m.value !== l }),
+          class: z({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(m.value) && m.value !== l }),
           style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
-        }, null, 10, lt))), 256)),
+        }, null, 10, nt))), 256)),
         (s(!0), n(M, null, F(y.value, (t, l) => (s(), n("circle", {
           cx: i.value.centerX,
           cy: i.value.centerY,
           r: t.radius < 0 ? 1e-4 : t.radius,
           stroke: `${t.color}`,
-          "stroke-width": $.value.track,
+          "stroke-width": w.value.track,
           fill: "none",
           "stroke-dasharray": t.path.dashArray,
           "stroke-dashoffset": t.path.dashOffset,
-          class: L({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(m.value) && m.value !== l }),
+          class: z({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(m.value) && m.value !== l }),
           "stroke-linecap": "round",
           style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
-        }, null, 10, ot))), 256)),
-        C("defs", null, [
-          C("filter", {
-            id: `blur_${x.value}`,
+        }, null, 10, it))), 256)),
+        T("defs", null, [
+          T("filter", {
+            id: `blur_${C.value}`,
             x: "-50%",
             y: "-50%",
             width: "200%",
             height: "200%"
           }, [
-            C("feGaussianBlur", {
+            T("feGaussianBlur", {
               in: "SourceGraphic",
               stdDeviation: 100 / e.value.style.chart.gradientIntensity
-            }, null, 8, st)
-          ], 8, rt)
+            }, null, 8, dt)
+          ], 8, ct)
         ]),
         e.value.style.chart.useGradient ? (s(), n("g", {
           key: 0,
-          filter: `url(#blur_${x.value})`
+          filter: `url(#blur_${C.value})`
         }, [
           (s(!0), n(M, null, F(y.value, (t, l) => (s(), n("circle", {
             cx: i.value.centerX,
             cy: i.value.centerY,
             r: t.radius <= 0 ? 1e-4 : t.radius,
             stroke: "white",
-            "stroke-width": $.value.track / 3,
+            "stroke-width": w.value.track / 3,
             fill: "none",
             "stroke-linecap": "round",
             "stroke-dasharray": t.path.dashArray,
             "stroke-dashoffset": t.path.dashOffset,
             style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
-          }, null, 8, nt))), 256))
-        ], 8, ut)) : b("", !0),
+          }, null, 8, ht))), 256))
+        ], 8, vt)) : b("", !0),
         (s(!0), n(M, null, F(y.value, (t, l) => (s(), n("circle", {
           "data-cy-trap": "",
           cx: i.value.centerX,
           cy: i.value.centerY,
           r: t.radius <= 0 ? 1e-4 : t.radius,
           stroke: "transparent",
-          "stroke-width": Math.max($.value.track, $.value.gutter),
+          "stroke-width": Math.max(w.value.track, w.value.gutter),
           fill: "none",
           "stroke-dasharray": t.path.bgDashArray,
           "stroke-dashoffset": t.path.fullOffset,
           "stroke-linecap": "round",
           class: "vue-ui-onion-path",
           style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" },
-          onMouseenter: (f) => se({
+          onMouseenter: (f) => ce({
             datapoint: t,
             show: !0,
             seriesIndex: l
           }),
           onMouseleave: o[0] || (o[0] = (f) => {
-            m.value = void 0, R.value = !1;
+            m.value = void 0, A.value = !1;
           })
-        }, null, 40, it))), 256)),
-        e.value.style.chart.layout.labels.show ? (s(), n("g", ct, [
+        }, null, 40, ft))), 256)),
+        e.value.style.chart.layout.labels.show ? (s(), n("g", gt, [
           (s(!0), n(M, null, F(y.value, (t, l) => (s(), n("g", {
-            onMouseenter: (f) => se({
+            onMouseenter: (f) => ce({
               datapoint: t,
               show: !0,
               seriesIndex: l
             }),
             onMouseleave: o[1] || (o[1] = (f) => {
-              m.value = void 0, R.value = !1;
+              m.value = void 0, A.value = !1;
             })
           }, [
             p.value.includes(t.id) ? b("", !0) : (s(), n("text", {
               key: 0,
-              x: r.value.width / 2 - $.value.gutter * 0.8 + e.value.style.chart.layout.labels.offsetX,
+              x: r.value.width / 2 - w.value.gutter * 0.8 + e.value.style.chart.layout.labels.offsetX,
               y: t.labelY + e.value.style.chart.layout.labels.offsetY,
               "text-anchor": "end",
               "font-size": e.value.style.chart.layout.labels.fontSize,
               fill: e.value.useBlurOnHover && ![null, void 0].includes(m.value) && m.value === l ? t.color : e.value.style.chart.layout.labels.color,
               "font-weight": e.value.style.chart.layout.labels.bold ? "bold" : "normal"
-            }, T(t.name ? t.name + ": " : "") + " " + T(e.value.style.chart.layout.labels.percentage.show ? v(S)({
+            }, _(t.name ? t.name + ": " : "") + " " + _(e.value.style.chart.layout.labels.percentage.show ? v(N)({
               v: t.percentage,
               s: "%",
               r: e.value.style.chart.layout.labels.roundingPercentage
-            }) : "") + " " + T(!e.value.style.chart.layout.labels.percentage.show && e.value.style.chart.layout.labels.value.show ? `: ${v(J)(
+            }) : "") + " " + _(!e.value.style.chart.layout.labels.percentage.show && e.value.style.chart.layout.labels.value.show ? `: ${v(q)(
               e.value.style.chart.layout.labels.value.formatter,
               t.value,
-              v(S)({
+              v(N)({
                 p: t.prefix || "",
                 v: t.value || 0,
                 s: t.suffix || "",
                 r: e.value.style.chart.layout.labels.roundingValue
               }),
               { datapoint: t, seriesIndex: l }
-            )}` : `${e.value.style.chart.layout.labels.value.show && t.value ? `(${v(J)(
+            )}` : `${e.value.style.chart.layout.labels.value.show && t.value ? `(${v(q)(
               e.value.style.chart.layout.labels.value.formatter,
               t.value,
-              v(S)({
+              v(N)({
                 p: t.prefix || "",
                 v: t.value || 0,
                 s: t.suffix || "",
                 r: e.value.style.chart.layout.labels.roundingValue
               }),
               { datapoint: t, seriesIndex: l }
-            )})` : ""}`), 9, vt))
-          ], 40, dt))), 256))
+            )})` : ""}`), 9, yt))
+          ], 40, pt))), 256))
         ])) : b("", !0),
         g(a.$slots, "svg", { svg: r.value }, void 0, !0)
-      ], 14, at)) : b("", !0),
-      a.$slots.watermark ? (s(), n("div", ht, [
-        g(a.$slots, "watermark", B(V({ isPrinting: v(ee) || v(te) })), void 0, !0)
+      ], 14, ut)) : b("", !0),
+      a.$slots.watermark ? (s(), n("div", mt, [
+        g(a.$slots, "watermark", B(V({ isPrinting: v(le) || v(oe) })), void 0, !0)
       ])) : b("", !0),
-      N.value ? b("", !0) : (s(), Y(Qe, {
+      R.value ? b("", !0) : (s(), x(lt, {
         key: 4,
         config: {
           type: "onion",
@@ -510,22 +523,22 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
           }
         }
       }, null, 8, ["config"])),
-      C("div", {
+      T("div", {
         ref_key: "chartLegend",
-        ref: Z
+        ref: Q
       }, [
-        e.value.style.chart.legend.show ? (s(), Y(qe, {
-          key: 0,
+        e.value.style.chart.legend.show ? (s(), x(et, {
+          key: `legend_${te.value}`,
           legendSet: c.value,
-          config: $e.value,
-          onClickMarker: o[2] || (o[2] = ({ legend: t }) => oe(t.id))
+          config: Pe.value,
+          onClickMarker: o[2] || (o[2] = ({ legend: t }) => ne(t.id))
         }, {
           item: h(({ legend: t }) => [
-            C("div", {
+            T("div", {
               "data-cy-legend-item": "",
               onClick: (l) => t.segregate(),
-              style: z(`opacity:${p.value.includes(t.id) ? 0.5 : 1}`)
-            }, T(t.name ? t.name + ": " : "") + " " + T((t.percentage || 0).toFixed(e.value.style.chart.legend.roundingPercentage)) + "% ", 13, ft)
+              style: Y(`opacity:${p.value.includes(t.id) ? 0.5 : 1}`)
+            }, _(t.name ? t.name + ": " : "") + " " + _((t.percentage || 0).toFixed(e.value.style.chart.legend.roundingPercentage)) + "% ", 13, bt)
           ]),
           _: 1
         }, 8, ["legendSet", "config"])) : g(a.$slots, "legend", {
@@ -533,8 +546,8 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
           legend: c.value
         }, void 0, !0)
       ], 512),
-      j(Ke, {
-        show: k.value.showTooltip && R.value,
+      Ae(at, {
+        show: $.value.showTooltip && A.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -544,9 +557,9 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: _.value,
+        parent: P.value,
         content: X.value,
-        isCustom: v(ce)(e.value.style.chart.tooltip.customFormat)
+        isCustom: v(ge)(e.value.style.chart.tooltip.customFormat)
       }, {
         "tooltip-before": h(() => [
           g(a.$slots, "tooltip-before", B(V({ ...E.value })), void 0, !0)
@@ -556,11 +569,11 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
-      N.value ? (s(), Y(Ze, {
+      R.value ? (s(), x(ot, {
         key: 5,
         hideDetails: "",
         config: {
-          open: k.value.showTable,
+          open: $.value.showTable,
           maxHeight: 1e4,
           head: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -573,28 +586,29 @@ const tt = ["id"], at = ["xmlns", "viewBox"], lt = ["cx", "cy", "r", "stroke", "
         }
       }, {
         content: h(() => [
-          j(Je, {
-            colNames: D.value.colNames,
-            head: D.value.head,
-            body: D.value.body,
-            config: D.value.config,
+          (s(), x(tt, {
+            key: `table_${ee.value}`,
+            colNames: L.value.colNames,
+            head: L.value.head,
+            body: L.value.body,
+            config: L.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: o[3] || (o[3] = (t) => k.value.showTable = !1)
+            onClose: o[3] || (o[3] = (t) => $.value.showTable = !1)
           }, {
             th: h(({ th: t }) => [
-              Fe(T(t), 1)
+              De(_(t), 1)
             ]),
             td: h(({ td: t }) => [
-              C("div", { innerHTML: t }, null, 8, gt)
+              T("div", { innerHTML: t }, null, 8, kt)
             ]),
             _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"])
+          }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : b("", !0)
-    ], 14, tt));
+    ], 14, st));
   }
-}, It = /* @__PURE__ */ et(pt, [["__scopeId", "data-v-74ab3911"]]);
+}, Rt = /* @__PURE__ */ rt($t, [["__scopeId", "data-v-d5a5e6fb"]]);
 export {
-  It as default
+  Rt as default
 };