vue-data-ui 2.4.57 → 2.4.59

package/dist/{vue-ui-onion-CTLBemDj.js → vue-ui-onion-wBz5dln6.js}

@@ -1,22 +1,22 @@
-import { computed as v, ref as s, watch as ke, onMounted as Be, onBeforeUnmount as Ue, openBlock as n, createElementBlock as u, normalizeClass as B, normalizeStyle as U, unref as i, createBlock as C, createCommentVNode as p, createSlots as Xe, withCtx as h, renderSlot as f, normalizeProps as S, guardReactiveProps as M, createVNode as $e, Fragment as F, renderList as N, createElementVNode as O, toDisplayString as P, createTextVNode as Ge, nextTick as He } from "vue";
-import { u as Ee, c as We, t as je, a as qe, p as we, b as Je, o as Ke, e as K, d as Qe, X as Ze, f as R, i as Q, x as Ce, q as et, r as tt, y as at } from "./index-CI-N9klv.js";
+import { computed as v, ref as s, watch as ke, onMounted as Be, onBeforeUnmount as Ue, openBlock as n, createElementBlock as u, normalizeClass as B, normalizeStyle as U, unref as i, createBlock as C, createCommentVNode as f, createSlots as Xe, withCtx as g, renderSlot as h, normalizeProps as S, guardReactiveProps as M, createVNode as we, Fragment as F, renderList as N, createElementVNode as O, toDisplayString as P, createTextVNode as Ge, nextTick as Ee } from "vue";
+import { u as He, c as We, t as je, a as qe, p as $e, b as Je, o as Ke, e as K, d as Qe, X as Ze, f as R, i as Q, x as Ce, q as et, r as tt, y as at } from "./index-B9RAElpI.js";
 import { t as lt, u as ot } from "./useResponsive-CoxXLe23.js";
-import { _ as rt } from "./Title-DLjHHdyq.js";
-import { u as nt, U as st } from "./usePrinter-CXc8xCKk.js";
-import { L as ut } from "./Legend-HooNAKB_.js";
-import { D as it } from "./DataTable-DgbrnD__.js";
-import { _ as ct } from "./Tooltip-BDaa-67h.js";
-import dt from "./vue-ui-skeleton-owIhXtQF.js";
-import vt from "./vue-ui-accordion-CYLks1fW.js";
-import { u as xe } from "./useNestedProp-D1eJ0dvv.js";
-import { _ as ht } from "./PackageVersion-S3SzpuwC.js";
-import { P as ft } from "./PenAndPaper-v846FwcH.js";
-import { u as pt } from "./useUserOptionState-BIvW1Kz7.js";
-import { _ as gt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], kt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], $t = ["id"], wt = ["stdDeviation"], Ct = ["filter"], xt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Tt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter"], _t = { key: 1 }, Ot = ["onMouseenter"], Pt = ["x", "y", "font-size", "fill", "font-weight"], At = {
+import { _ as rt } from "./Title-zZtEcB9F.js";
+import { u as nt, U as st } from "./usePrinter-CwTAwqtF.js";
+import { L as ut } from "./Legend-f52bnttJ.js";
+import { D as it } from "./DataTable-CFUKU8PU.js";
+import { _ as ct } from "./Tooltip-DDJ2Wvjy.js";
+import dt from "./vue-ui-skeleton-DVYD_VSe.js";
+import vt from "./vue-ui-accordion-rNA598L6.js";
+import { u as xe } from "./useNestedProp-DuruL3Nt.js";
+import { _ as ht } from "./PackageVersion-C_FFs0BP.js";
+import { P as ft } from "./PenAndPaper-Dx24BtRW.js";
+import { u as gt } from "./useUserOptionState-BIvW1Kz7.js";
+import { _ as pt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["width", "height"], kt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], wt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], $t = ["id"], Ct = ["stdDeviation"], xt = ["filter"], Tt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], _t = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter"], Ot = { key: 2 }, Pt = ["onMouseenter"], At = ["x", "y", "font-size", "fill", "font-weight"], It = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, It = ["onClick"], St = ["innerHTML"], Mt = {
+}, St = ["onClick"], Mt = ["innerHTML"], Ft = {
   __name: "vue-ui-onion",
   props: {
     config: {
@@ -34,10 +34,10 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
   },
   emits: ["selectLegend"],
   setup(Te, { expose: _e, emit: Oe }) {
-    const k = Te, { vue_ui_onion: Pe } = Ee(), D = v(() => !!k.dataset && k.dataset.length), x = s(We()), Ae = s(null), Z = s(0), L = s(!1), X = s(""), y = s([]), T = s(null), ee = s(null), te = s(null), ae = s(null), le = s(null), oe = s(0), re = s(0), ne = s(0), e = v({
+    const k = Te, { vue_ui_onion: Pe } = He(), D = v(() => !!k.dataset && k.dataset.length), x = s(We()), Ae = s(null), Z = s(0), L = s(!1), X = s(""), y = s([]), T = s(null), ee = s(null), te = s(null), ae = s(null), le = s(null), oe = s(0), re = s(0), ne = s(0), e = v({
       get: () => ie(),
       set: (t) => t
-    }), { userOptionsVisible: G, setUserOptionsVisibility: se, keepUserOptionState: ue } = pt({ config: e.value });
+    }), { userOptionsVisible: G, setUserOptionsVisibility: se, keepUserOptionState: ue } = gt({ config: e.value });
     function ie() {
       const t = xe({
         userConfig: k.config,
@@ -48,7 +48,7 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
           userConfig: je.vue_ui_onion[t.theme] || k.config,
           defaultConfig: t
         }),
-        customPalette: qe[t.theme] || we
+        customPalette: qe[t.theme] || $e
       } : t;
     }
     ke(() => k.config, (t) => {
@@ -57,7 +57,7 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
     const { isPrinting: ce, isImaging: de, generatePdf: ve, generateImage: he } = nt({
       elementId: `vue-ui-onion_${x.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-onion"
-    }), Ie = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), Se = v(() => Je(e.value.customPalette)), $ = s({
+    }), Ie = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), Se = v(() => Je(e.value.customPalette)), w = s({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     }), r = s({
@@ -124,23 +124,23 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
         ...t,
         percentage: t.percentage || 0,
         targetPercentage: t.percentage || 0,
-        color: Qe(t.color) || Se.value[o] || we[o],
+        color: Qe(t.color) || Se.value[o] || $e[o],
         id: a,
         shape: "circle",
         opacity: y.value.includes(a) ? 0.5 : 1,
         absoluteIndex: o,
-        segregate: () => pe(a),
+        segregate: () => ge(a),
         isSegregated: y.value.includes(a)
       };
-    }))), A = s(d.value), Me = v(() => e.value.useStartAnimation), Fe = s(null), Ne = v(() => Math.max(...d.value.map((t) => t.percentage))), H = s(!1);
+    }))), A = s(d.value), Me = v(() => e.value.useStartAnimation), Fe = s(null), Ne = v(() => Math.max(...d.value.map((t) => t.percentage))), E = s(!1);
     ke(() => d.value, Re, { immediate: !0 });
     function Re() {
-      if (Me.value && !H.value) {
+      if (Me.value && !E.value) {
         let o = function() {
-          t >= Ne.value ? (cancelAnimationFrame(Fe.value), A.value = d.value, H.value = !0) : (A.value = d.value.map((a) => ({
+          t >= Ne.value ? (cancelAnimationFrame(Fe.value), A.value = d.value, E.value = !0) : (A.value = d.value.map((a) => ({
             ...a,
             percentage: t < a.targetPercentage ? t : a.targetPercentage
-          })), t += 1, requestAnimationFrame(o), H.value = !0);
+          })), t += 1, requestAnimationFrame(o), E.value = !0);
         };
         A.value = d.value.map((a) => ({
           ...a,
@@ -158,14 +158,14 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), Le = v(() => d.value.filter((t) => !y.value.includes(t.id)).length), w = v(() => {
+    })), Le = v(() => d.value.filter((t) => !y.value.includes(t.id)).length), $ = v(() => {
       const t = Math.min(c.value.width, c.value.height) / 2 / d.value.length;
       return {
         gutter: (t > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : t) * e.value.style.chart.layout.gutter.width,
         track: (t > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : t) * e.value.style.chart.layout.track.width
       };
     }), m = v(() => A.value.filter((t) => !y.value.includes(t.id)).map((t, o) => {
-      const a = (c.value.maxRadius - w.value.track) / Le.value / 2 * (1 + o), l = c.value.centerY - a;
+      const a = (c.value.maxRadius - $.value.track) / Le.value / 2 * (1 + o), l = c.value.centerY - a;
       return {
         percentage: t.percentage || 0,
         ...t,
@@ -175,11 +175,11 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
       };
     }));
     function Ve(t, o) {
-      const a = 2 * Math.PI * t, l = a * 0.75, g = `${l} ${a}`, I = l * (1 - o / 100);
+      const a = 2 * Math.PI * t, l = a * 0.75, p = `${l} ${a}`, I = l * (1 - o / 100);
       return {
         bgDashArray: `${l} ${a}`,
         bgDashOffset: 0,
-        dashArray: g,
+        dashArray: p,
         dashOffset: I,
         fullOffset: 0,
         active: `
@@ -189,13 +189,13 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
         `.trim()
       };
     }
-    function pe(t) {
+    function ge(t) {
       y.value.includes(t) ? y.value = y.value.filter((o) => o !== t) : y.value.push(t), Oe("selectLegend", m.value);
     }
     function ze() {
       return m.value;
     }
-    const E = v(() => {
+    const H = v(() => {
       const t = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], o = m.value.map((a) => [
         a.name,
         a.percentage,
@@ -203,7 +203,7 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
       ]);
       return { head: t, body: o };
     }), z = v(() => {
-      const t = E.value.head, o = m.value.map((l) => [
+      const t = H.value.head, o = m.value.map((l) => [
         `<span style="color:${l.color}">⬤</span> ${l.name}`,
         `${Number(l.percentage ?? 0).toFixed(e.value.table.td.roundingPercentage).toLocaleString()}%`,
         `${l.prefix || ""}${[null, void 0, NaN, "NaN"].includes(l.value) ? "-" : l.value.toFixed(e.value.table.td.roundingValue).toLocaleString()}${l.suffix || ""}`
@@ -222,10 +222,10 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
       };
       return { head: t, body: o, config: a, colNames: t };
     });
-    function ge() {
-      He(() => {
-        const t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = E.value.head, a = E.value.body, l = t.concat([o]).concat(a), g = et(l);
-        tt({ csvContent: g, title: e.value.style.chart.title.text || "vue-ui-onion" });
+    function pe() {
+      Ee(() => {
+        const t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = H.value.head, a = H.value.body, l = t.concat([o]).concat(a), p = et(l);
+        tt({ csvContent: p, title: e.value.style.chart.title.text || "vue-ui-onion" });
       });
     }
     const b = s(void 0), _ = s(!1);
@@ -241,7 +241,7 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
         series: d.value,
         config: e.value
       }, L.value = a;
-      let g = "";
+      let p = "";
       const I = e.value.style.chart.tooltip.customFormat;
       if (Ce(I) && at(() => I({
         seriesIndex: l,
@@ -257,7 +257,7 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
         });
       else {
         const q = e.value.style.chart.tooltip.showPercentage, J = e.value.style.chart.tooltip.showValue;
-        g += `<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="${t.color}"/></svg><span></span>${t.name}</span></div>`, g += `<div style="width:100%;text-align:left;"><b>${q ? R({ p: "", v: t.percentage, s: "%", r: e.value.style.chart.tooltip.roundingPercentage }) : ""}</b> ${q && J ? "(" : ""}${J ? Q(
+        p += `<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="${t.color}"/></svg><span></span>${t.name}</span></div>`, p += `<div style="width:100%;text-align:left;"><b>${q ? R({ p: "", v: t.percentage, s: "%", r: e.value.style.chart.tooltip.roundingPercentage }) : ""}</b> ${q && J ? "(" : ""}${J ? Q(
           e.value.style.chart.layout.labels.value.formatter,
           t.value,
           R({
@@ -267,14 +267,14 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
             r: e.value.style.chart.tooltip.roundingValue
           }),
           { datapoint: t, seriesIndex: o }
-        ) : ""}${q && J ? ")" : ""}</div>`, X.value = `<div>${g}</div>`;
+        ) : ""}${q && J ? ")" : ""}</div>`, X.value = `<div>${p}</div>`;
       }
     }
     function me() {
-      $.value.showTable = !$.value.showTable;
+      w.value.showTable = !w.value.showTable;
     }
     function be() {
-      $.value.showTooltip = !$.value.showTooltip;
+      w.value.showTooltip = !w.value.showTooltip;
     }
     const Y = s(!1);
     function j() {
@@ -283,7 +283,7 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
     return _e({
       getData: ze,
       generatePdf: ve,
-      generateCsv: ge,
+      generateCsv: pe,
       generateImage: he,
       toggleTable: me,
       toggleTooltip: be,
@@ -304,14 +304,14 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
         color: e.value.style.chart.color,
         active: Y.value,
         onClose: j
-      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : p("", !0),
+      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : f("", !0),
       Ie.value ? (n(), u("div", {
         key: 1,
         ref_key: "noTitle",
         ref: le,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : p("", !0),
+      }, null, 512)) : f("", !0),
       e.value.style.chart.title.text ? (n(), u("div", {
         key: 2,
         ref_key: "chartTitle",
@@ -331,7 +331,7 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : p("", !0),
+      ], 512)) : f("", !0),
       e.value.userOptions.show && D.value && (i(ue) || i(G)) ? (n(), C(st, {
         ref_key: "details",
         ref: Ae,
@@ -348,7 +348,7 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: _.value,
-        isTooltip: $.value.showTooltip,
+        isTooltip: w.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: T.value,
         position: e.value.userOptions.position,
@@ -356,7 +356,7 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
         isAnnotation: Y.value,
         onToggleFullscreen: Ye,
         onGeneratePdf: i(ve),
-        onGenerateCsv: ge,
+        onGenerateCsv: pe,
         onGenerateImage: i(he),
         onToggleTable: me,
         onToggleTooltip: be,
@@ -367,88 +367,100 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
       }, Xe({ _: 2 }, [
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: h(() => [
-            f(t.$slots, "optionTooltip", {}, void 0, !0)
+          fn: g(() => [
+            h(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: h(() => [
-            f(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: g(() => [
+            h(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: h(() => [
-            f(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: g(() => [
+            h(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: h(() => [
-            f(t.$slots, "optionImg", {}, void 0, !0)
+          fn: g(() => [
+            h(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: h(() => [
-            f(t.$slots, "optionTable", {}, void 0, !0)
+          fn: g(() => [
+            h(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: h(({ toggleFullscreen: a, isFullscreen: l }) => [
-            f(t.$slots, "optionFullscreen", S(M({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
+          fn: g(({ toggleFullscreen: a, isFullscreen: l }) => [
+            h(t.$slots, "optionFullscreen", S(M({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: h(({ toggleAnnotator: a, isAnnotator: l }) => [
-            f(t.$slots, "optionAnnotator", S(M({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
+          fn: g(({ toggleAnnotator: a, isAnnotator: l }) => [
+            h(t.$slots, "optionAnnotator", S(M({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
           ]),
           key: "6"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
       D.value ? (n(), u("svg", {
         key: 4,
         xmlns: i(Ze),
         class: B({ "vue-data-ui-fullscreen--on": _.value, "vue-data-ui-fulscreen--off": !_.value }),
-        viewBox: `0 0 ${r.value.width <= 0 ? 1e-4 : r.value.width} ${r.value.height <= 0 ? 1e-4 : r.value.height}`,
+        viewBox: `0 0 ${r.value.width <= 0 ? 10 : r.value.width} ${r.value.height <= 0 ? 10 : r.value.height}`,
         style: U(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        $e(ht),
+        we(ht),
+        t.$slots["chart-background"] ? (n(), u("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: r.value.width <= 0 ? 10 : r.value.width,
+          height: r.value.height <= 0 ? 10 : r.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          h(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, bt)) : f("", !0),
         (n(!0), u(F, null, N(m.value, (a, l) => (n(), u("circle", {
           cx: c.value.centerX,
           cy: c.value.centerY,
           r: a.radius <= 0 ? 1e-4 : a.radius,
           stroke: e.value.style.chart.layout.gutter.color,
-          "stroke-width": w.value.gutter,
+          "stroke-width": $.value.gutter,
           fill: "none",
           "stroke-dasharray": a.path.bgDashArray,
           "stroke-dashoffset": a.path.fullOffset,
           "stroke-linecap": "round",
           class: B({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(b.value) && b.value !== l }),
           style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
-        }, null, 10, bt))), 256)),
+        }, null, 10, kt))), 256)),
         (n(!0), u(F, null, N(m.value, (a, l) => (n(), u("circle", {
           cx: c.value.centerX,
           cy: c.value.centerY,
           r: a.radius < 0 ? 1e-4 : a.radius,
           stroke: `${a.color}`,
-          "stroke-width": w.value.track,
+          "stroke-width": $.value.track,
           fill: "none",
           "stroke-dasharray": a.path.dashArray,
           "stroke-dashoffset": a.path.dashOffset,
           class: B({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(b.value) && b.value !== l }),
           "stroke-linecap": "round",
           style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
-        }, null, 10, kt))), 256)),
+        }, null, 10, wt))), 256)),
         O("defs", null, [
           O("filter", {
             id: `blur_${x.value}`,
@@ -460,11 +472,11 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
             O("feGaussianBlur", {
               in: "SourceGraphic",
               stdDeviation: 100 / e.value.style.chart.gradientIntensity
-            }, null, 8, wt)
+            }, null, 8, Ct)
           ], 8, $t)
         ]),
         e.value.style.chart.useGradient ? (n(), u("g", {
-          key: 0,
+          key: 1,
           filter: `url(#blur_${x.value})`
         }, [
           (n(!0), u(F, null, N(m.value, (a, l) => (n(), u("circle", {
@@ -472,50 +484,50 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
             cy: c.value.centerY,
             r: a.radius <= 0 ? 1e-4 : a.radius,
             stroke: "white",
-            "stroke-width": w.value.track / 3,
+            "stroke-width": $.value.track / 3,
             fill: "none",
             "stroke-linecap": "round",
             "stroke-dasharray": a.path.dashArray,
             "stroke-dashoffset": a.path.dashOffset,
             style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
-          }, null, 8, xt))), 256))
-        ], 8, Ct)) : p("", !0),
+          }, null, 8, Tt))), 256))
+        ], 8, xt)) : f("", !0),
         (n(!0), u(F, null, N(m.value, (a, l) => (n(), u("circle", {
           "data-cy-trap": "",
           cx: c.value.centerX,
           cy: c.value.centerY,
           r: a.radius <= 0 ? 1e-4 : a.radius,
           stroke: "transparent",
-          "stroke-width": Math.max(w.value.track, w.value.gutter),
+          "stroke-width": Math.max($.value.track, $.value.gutter),
           fill: "none",
           "stroke-dasharray": a.path.bgDashArray,
           "stroke-dashoffset": a.path.fullOffset,
           "stroke-linecap": "round",
           class: "vue-ui-onion-path",
           style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" },
-          onMouseenter: (g) => ye({
+          onMouseenter: (p) => ye({
             datapoint: a,
             show: !0,
             seriesIndex: l
           }),
-          onMouseleave: o[0] || (o[0] = (g) => {
+          onMouseleave: o[0] || (o[0] = (p) => {
             b.value = void 0, L.value = !1;
           })
-        }, null, 40, Tt))), 256)),
-        e.value.style.chart.layout.labels.show ? (n(), u("g", _t, [
+        }, null, 40, _t))), 256)),
+        e.value.style.chart.layout.labels.show ? (n(), u("g", Ot, [
           (n(!0), u(F, null, N(m.value, (a, l) => (n(), u("g", {
-            onMouseenter: (g) => ye({
+            onMouseenter: (p) => ye({
               datapoint: a,
               show: !0,
               seriesIndex: l
             }),
-            onMouseleave: o[1] || (o[1] = (g) => {
+            onMouseleave: o[1] || (o[1] = (p) => {
               b.value = void 0, L.value = !1;
             })
           }, [
-            y.value.includes(a.id) ? p("", !0) : (n(), u("text", {
+            y.value.includes(a.id) ? f("", !0) : (n(), u("text", {
               key: 0,
-              x: r.value.width / 2 - w.value.gutter * 0.8 + e.value.style.chart.layout.labels.offsetX,
+              x: r.value.width / 2 - $.value.gutter * 0.8 + e.value.style.chart.layout.labels.offsetX,
               y: a.labelY + e.value.style.chart.layout.labels.offsetY,
               "text-anchor": "end",
               "font-size": e.value.style.chart.layout.labels.fontSize,
@@ -545,15 +557,15 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
                 r: e.value.style.chart.layout.labels.roundingValue
               }),
               { datapoint: a, seriesIndex: l }
-            )})` : ""}`), 9, Pt))
-          ], 40, Ot))), 256))
-        ])) : p("", !0),
-        f(t.$slots, "svg", { svg: r.value }, void 0, !0)
-      ], 14, mt)) : p("", !0),
-      t.$slots.watermark ? (n(), u("div", At, [
-        f(t.$slots, "watermark", S(M({ isPrinting: i(ce) || i(de) })), void 0, !0)
-      ])) : p("", !0),
-      D.value ? p("", !0) : (n(), C(dt, {
+            )})` : ""}`), 9, At))
+          ], 40, Pt))), 256))
+        ])) : f("", !0),
+        h(t.$slots, "svg", { svg: r.value }, void 0, !0)
+      ], 14, mt)) : f("", !0),
+      t.$slots.watermark ? (n(), u("div", It, [
+        h(t.$slots, "watermark", S(M({ isPrinting: i(ce) || i(de) })), void 0, !0)
+      ])) : f("", !0),
+      D.value ? f("", !0) : (n(), C(dt, {
         key: 6,
         config: {
           type: "onion",
@@ -573,17 +585,17 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
           key: `legend_${ne.value}`,
           legendSet: d.value,
           config: De.value,
-          onClickMarker: o[2] || (o[2] = ({ legend: a }) => pe(a.id))
+          onClickMarker: o[2] || (o[2] = ({ legend: a }) => ge(a.id))
         }, {
-          item: h(({ legend: a }) => [
+          item: g(({ legend: a }) => [
             O("div", {
               "data-cy-legend-item": "",
               onClick: (l) => a.segregate(),
               style: U(`opacity:${y.value.includes(a.id) ? 0.5 : 1}`)
-            }, P(a.name ? a.name + ": " : "") + " " + P((a.percentage || 0).toFixed(e.value.style.chart.legend.roundingPercentage)) + "% ", 13, It)
+            }, P(a.name ? a.name + ": " : "") + " " + P((a.percentage || 0).toFixed(e.value.style.chart.legend.roundingPercentage)) + "% ", 13, St)
           ]),
           _: 1
-        }, 8, ["legendSet", "config"])) : f(t.$slots, "legend", {
+        }, 8, ["legendSet", "config"])) : h(t.$slots, "legend", {
           key: 1,
           legend: d.value
         }, void 0, !0)
@@ -594,10 +606,10 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
         ref: ae,
         dir: "auto"
       }, [
-        f(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : p("", !0),
-      $e(ct, {
-        show: $.value.showTooltip && L.value,
+        h(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : f("", !0),
+      we(ct, {
+        show: w.value.showTooltip && L.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -612,11 +624,11 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
         isFullscreen: _.value,
         isCustom: i(Ce)(e.value.style.chart.tooltip.customFormat)
       }, {
-        "tooltip-before": h(() => [
-          f(t.$slots, "tooltip-before", S(M({ ...W.value })), void 0, !0)
+        "tooltip-before": g(() => [
+          h(t.$slots, "tooltip-before", S(M({ ...W.value })), void 0, !0)
         ]),
-        "tooltip-after": h(() => [
-          f(t.$slots, "tooltip-after", S(M({ ...W.value })), void 0, !0)
+        "tooltip-after": g(() => [
+          h(t.$slots, "tooltip-after", S(M({ ...W.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
@@ -624,7 +636,7 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
         key: 8,
         hideDetails: "",
         config: {
-          open: $.value.showTable,
+          open: w.value.showTable,
           maxHeight: 1e4,
           head: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -636,7 +648,7 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
           }
         }
       }, {
-        content: h(() => [
+        content: g(() => [
           (n(), C(it, {
             key: `table_${re.value}`,
             colNames: z.value.colNames,
@@ -644,22 +656,22 @@ const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["cx", "cy", "r", "stroke", "
             body: z.value.body,
             config: z.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] = (a) => $.value.showTable = !1)
+            onClose: o[3] || (o[3] = (a) => w.value.showTable = !1)
           }, {
-            th: h(({ th: a }) => [
+            th: g(({ th: a }) => [
               Ge(P(a), 1)
             ]),
-            td: h(({ td: a }) => [
-              O("div", { innerHTML: a }, null, 8, St)
+            td: g(({ td: a }) => [
+              O("div", { innerHTML: a }, null, 8, Mt)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : p("", !0)
+      }, 8, ["config"])) : f("", !0)
     ], 46, yt));
   }
-}, jt = /* @__PURE__ */ gt(Mt, [["__scopeId", "data-v-0ce2c025"]]);
+}, qt = /* @__PURE__ */ pt(Ft, [["__scopeId", "data-v-2f5427dd"]]);
 export {
-  jt as default
+  qt as default
 };