vue-data-ui 2.3.28 → 2.3.29

package/dist/{vue-ui-onion-BamHJBdP.js → vue-ui-onion-B_khL0Kv.js}

@@ -1,19 +1,19 @@
-import { computed as d, ref as n, onMounted as _e, onBeforeUnmount as Pe, watch as Oe, openBlock as s, createElementBlock as u, normalizeClass as A, normalizeStyle as D, createVNode as W, createCommentVNode as m, createBlock as L, unref as k, createSlots as Fe, withCtx as v, renderSlot as h, normalizeProps as z, guardReactiveProps as B, Fragment as F, renderList as I, createElementVNode as C, toDisplayString as T, createTextVNode as Ie, nextTick as Se } from "vue";
-import { u as Me, c as Ne, t as Re, a as Ae, p as ne, b as De, o as Le, e as j, d as ze, X as Be, v as ue, n as Ve, q as Ye, w as Xe, f as ie } from "./index-BhCM2QF1.js";
-import { t as Ge, u as Ue } from "./useResponsive-NZB-WLRF.js";
-import { _ as Ee } from "./Title-CtWGLaoz.js";
-import { u as He, U as We } from "./usePrinter-B75HLwzw.js";
-import { L as je } from "./Legend-DwludSgp.js";
-import { D as qe } from "./DataTable-bEXuvNn5.js";
-import { _ as Je } from "./Tooltip-D6BUVHr1.js";
-import Ke from "./vue-ui-skeleton-_VMQ594N.js";
-import Qe from "./vue-ui-accordion-CSZdj7wA.js";
-import { u as ce } from "./useNestedProp-CH3PVhvc.js";
-import { _ as Ze } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], lt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], ot = ["id"], rt = ["stdDeviation"], st = ["filter"], nt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], ut = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter"], it = { key: 1 }, ct = ["onMouseenter"], dt = ["x", "y", "font-size", "fill", "font-weight"], vt = {
+import { computed as d, ref as u, onMounted as Pe, onBeforeUnmount as Oe, watch as Ie, openBlock as s, createElementBlock as n, normalizeClass as D, normalizeStyle as L, createVNode as j, createCommentVNode as b, createBlock as z, unref as v, createSlots as Fe, withCtx as h, renderSlot as f, normalizeProps as B, guardReactiveProps as V, Fragment as I, renderList as F, createElementVNode as C, toDisplayString as T, createTextVNode as Se, nextTick as Me } 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 Be, X as Ve, f as S, i as J, w as ce, q as Ye, r as Xe, x as Ge } from "./index-BlXzlBwZ.js";
+import { t as Ue, u as Ee } from "./useResponsive-NZB-WLRF.js";
+import { _ as He } from "./Title-eBTH8iGJ.js";
+import { u as We, U as je } from "./usePrinter-CZ8F5Cth.js";
+import { L as qe } from "./Legend-CkQ_zypV.js";
+import { D as Je } from "./DataTable-CsPidn0_.js";
+import { _ as Ke } from "./Tooltip-B11OahTD.js";
+import Qe from "./vue-ui-skeleton-CJ2R5R6u.js";
+import Ze from "./vue-ui-accordion-wHRG3nXl.js";
+import { u as de } from "./useNestedProp-BoNl5H_z.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 = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, ht = ["onClick"], ft = ["innerHTML"], gt = {
+}, ft = ["onClick"], gt = ["innerHTML"], pt = {
   __name: "vue-ui-onion",
   props: {
     config: {
@@ -30,26 +30,26 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "
     }
   },
   emits: ["selectLegend"],
-  setup(de, { expose: ve, emit: he }) {
-    const $ = de, { vue_ui_onion: fe } = Me(), S = d(() => !!$.dataset && $.dataset.length), x = n(Ne()), ge = n(null), q = n(0), M = n(!1), V = n(""), f = n([]), _ = n(null), J = n(null), K = n(null), e = d(() => {
-      const a = ce({
-        userConfig: $.config,
-        defaultConfig: fe
+  setup(ve, { expose: he, emit: fe }) {
+    const w = ve, { vue_ui_onion: ge } = Ne(), M = d(() => !!w.dataset && w.dataset.length), x = u(Re()), pe = u(null), K = u(0), N = u(!1), Y = u(""), g = u([]), _ = u(null), Q = u(null), Z = u(null), e = d(() => {
+      const a = de({
+        userConfig: w.config,
+        defaultConfig: ge
       });
       return a.theme ? {
-        ...ce({
-          userConfig: Re.vue_ui_onion[a.theme] || $.config,
+        ...de({
+          userConfig: Ae.vue_ui_onion[a.theme] || w.config,
           defaultConfig: a
         }),
-        customPalette: Ae[a.theme] || ne
+        customPalette: De[a.theme] || ie
       } : a;
-    }), { isPrinting: Q, isImaging: Z, generatePdf: ee, generateImage: te } = He({
+    }), { isPrinting: ee, isImaging: te, generatePdf: ae, generateImage: le } = We({
       elementId: `vue-ui-onion_${x.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-onion"
-    }), pe = d(() => De(e.value.customPalette)), b = n({
+    }), ye = d(() => Le(e.value.customPalette)), k = u({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
-    }), r = n({
+    }), r = u({
       height: 512,
       width: 512,
       padding: {
@@ -59,24 +59,24 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "
         bottom: 64
       },
       minRadius: 64
-    }), N = n(null);
-    _e(() => {
-      if (Le($.dataset) && j({
+    }), R = u(null);
+    Pe(() => {
+      if (ze(w.dataset) && q({
         componentName: "VueUiOnion",
         type: "dataset"
       }), e.value.responsive) {
-        const o = Ge(() => {
-          const { width: t, height: l } = Ue({
+        const o = Ue(() => {
+          const { width: t, height: l } = Ee({
             chart: _.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 ? Z.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;
         });
-        N.value = new ResizeObserver(o), N.value.observe(_.value.parentNode);
+        R.value = new ResizeObserver(o), R.value.observe(_.value.parentNode);
       }
-    }), Pe(() => {
-      N.value && N.value.disconnect();
+    }), Oe(() => {
+      R.value && R.value.disconnect();
     });
     const i = d(() => ({
       top: r.value.padding.top,
@@ -89,41 +89,41 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["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(() => ($.dataset.forEach((a, o) => {
-      [null, void 0].includes(a.name) && j({
+    })), c = d(() => (w.dataset.forEach((a, o) => {
+      [null, void 0].includes(a.name) && q({
         componentName: "VueUiOnion",
         type: "datasetSerieAttribute",
         property: "name",
         index: o
-      }), [void 0].includes(a.percentage) && j({
+      }), [void 0].includes(a.percentage) && q({
         componentName: "VueUiOnion",
         type: "datasetSerieAttribute",
         property: "percentage",
         index: o
       });
-    }), $.dataset.map((a, o) => {
+    }), w.dataset.map((a, o) => {
       const t = `onion_serie_${o}_${x.value}`;
       return {
         ...a,
         percentage: a.percentage || 0,
         targetPercentage: a.percentage || 0,
-        color: ze(a.color) || pe.value[o] || ne[o],
+        color: Be(a.color) || ye.value[o] || ie[o],
         id: t,
         shape: "circle",
-        opacity: f.value.includes(t) ? 0.5 : 1,
+        opacity: g.value.includes(t) ? 0.5 : 1,
         absoluteIndex: o,
-        segregate: () => ae(t),
-        isSegregated: f.value.includes(t)
+        segregate: () => oe(t),
+        isSegregated: g.value.includes(t)
       };
-    }))), P = n(c.value), ye = d(() => e.value.useStartAnimation), me = n(null), be = d(() => Math.max(...c.value.map((a) => a.percentage))), Y = n(!1);
-    Oe(() => c.value, ke, { immediate: !0 });
-    function ke() {
-      if (ye.value && !Y.value) {
+    }))), P = u(c.value), me = d(() => e.value.useStartAnimation), be = u(null), ke = d(() => Math.max(...c.value.map((a) => a.percentage))), X = u(!1);
+    Ie(() => c.value, we, { immediate: !0 });
+    function we() {
+      if (me.value && !X.value) {
         let o = function() {
-          a >= be.value ? (cancelAnimationFrame(me.value), P.value = c.value, Y.value = !0) : (P.value = c.value.map((t) => ({
+          a >= ke.value ? (cancelAnimationFrame(be.value), P.value = c.value, X.value = !0) : (P.value = c.value.map((t) => ({
             ...t,
             percentage: a < t.targetPercentage ? a : t.targetPercentage
-          })), a += 1, requestAnimationFrame(o), Y.value = !0);
+          })), a += 1, requestAnimationFrame(o), X.value = !0);
         };
         P.value = c.value.map((t) => ({
           ...t,
@@ -141,23 +141,23 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), we = d(() => c.value.filter((a) => !f.value.includes(a.id)).length), w = d(() => {
+    })), xe = d(() => c.value.filter((a) => !g.value.includes(a.id)).length), $ = 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
       };
-    }), g = d(() => P.value.filter((a) => !f.value.includes(a.id)).map((a, o) => {
-      const t = (i.value.maxRadius - w.value.track) / we.value / 2 * (1 + o), l = i.value.centerY - t;
+    }), p = d(() => P.value.filter((a) => !g.value.includes(a.id)).map((a, o) => {
+      const t = (i.value.maxRadius - $.value.track) / xe.value / 2 * (1 + o), l = i.value.centerY - t;
       return {
         percentage: a.percentage || 0,
         ...a,
         labelY: l,
         radius: t,
-        path: xe(t, a.percentage || 0)
+        path: Ce(t, a.percentage || 0)
       };
     }));
-    function xe(a, o) {
+    function Ce(a, o) {
       const t = a * (1.5 + (o / 100 > 0.3333333333333333 ? 0 : 1 - o / 100)) * Math.PI, l = a * 1.5 * Math.PI;
       return {
         bgDashArray: `${l} ${l}`,
@@ -168,21 +168,21 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "
         active: `M${i.value.centerX},${i.value.centerY} A ${a},${a} 0 0 0 ${i.value.right},${i.value.top}`
       };
     }
-    function ae(a) {
-      f.value.includes(a) ? f.value = f.value.filter((o) => o !== a) : f.value.push(a), he("selectLegend", g.value);
+    function oe(a) {
+      g.value.includes(a) ? g.value = g.value.filter((o) => o !== a) : g.value.push(a), fe("selectLegend", p.value);
     }
-    function Ce() {
-      return g.value;
+    function Te() {
+      return p.value;
     }
-    const X = d(() => {
-      const a = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], o = g.value.map((t) => [
+    const G = d(() => {
+      const a = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], o = p.value.map((t) => [
         t.name,
         t.percentage,
         t.value
       ]);
       return { head: a, body: o };
-    }), R = d(() => {
-      const a = X.value.head, o = g.value.map((l) => [
+    }), A = d(() => {
+      const a = G.value.head, o = p.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 || ""}`
@@ -201,71 +201,81 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "
       };
       return { head: a, body: o, config: t, colNames: a };
     });
-    function le() {
-      Se(() => {
-        const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = X.value.head, t = X.value.body, l = a.concat([o]).concat(t), y = Ve(l);
-        Ye({ csvContent: y, title: e.value.style.chart.title.text || "vue-ui-onion" });
+    function re() {
+      Me(() => {
+        const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = G.value.head, t = G.value.body, l = a.concat([o]).concat(t), m = Ye(l);
+        Xe({ csvContent: m, title: e.value.style.chart.title.text || "vue-ui-onion" });
       });
     }
-    const p = n(void 0), O = n(!1);
-    function Te(a) {
-      O.value = a, q.value += 1;
+    const y = u(void 0), O = u(!1);
+    function _e(a) {
+      O.value = a, K.value += 1;
     }
-    const G = n(null);
-    function oe({ datapoint: a, seriesIndex: o, show: t = !0 }) {
+    const U = u(null);
+    function se({ datapoint: a, seriesIndex: o, show: t = !0 }) {
       const l = a.absoluteIndex;
-      p.value = o, G.value = {
+      y.value = o, U.value = {
         datapoint: a,
         seriesIndex: l,
         series: c.value,
         config: e.value
-      }, M.value = t;
-      let y = "";
-      const U = e.value.style.chart.tooltip.customFormat;
-      if (ue(U) && Xe(() => U({
+      }, N.value = t;
+      let m = "";
+      const E = e.value.style.chart.tooltip.customFormat;
+      if (ce(E) && Ge(() => E({
         seriesIndex: l,
         datapoint: a,
         series: c.value,
         config: e.value
       })))
-        V.value = U({
+        Y.value = E({
           seriesIndex: l,
           datapoint: a,
           series: c.value,
           config: e.value
         });
       else {
-        const E = e.value.style.chart.tooltip.showPercentage, H = e.value.style.chart.tooltip.showValue;
-        y += `<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>`, y += `<div style="width:100%;text-align:left;"><b>${E ? ie({ p: "", v: a.percentage, s: "%", r: e.value.style.chart.tooltip.roundingPercentage }) : ""}</b> ${E && H ? "(" : ""}${H ? ie({ p: a.prefix || "", v: a.value, s: a.suffix || "", r: e.value.style.chart.tooltip.roundingValue }) : ""}${E && H ? ")" : ""}</div>`, V.value = `<div>${y}</div>`;
+        const H = e.value.style.chart.tooltip.showPercentage, W = e.value.style.chart.tooltip.showValue;
+        m += `<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>`, m += `<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(
+          e.value.style.chart.layout.labels.value.formatter,
+          a.value,
+          S({
+            p: a.prefix || "",
+            v: a.value,
+            s: a.suffix || "",
+            r: e.value.style.chart.tooltip.roundingValue
+          }),
+          { datapoint: a, seriesIndex: o }
+        ) : ""}${H && W ? ")" : ""}</div>`, Y.value = `<div>${m}</div>`;
       }
     }
-    function re() {
-      b.value.showTable = !b.value.showTable;
+    function ue() {
+      k.value.showTable = !k.value.showTable;
     }
-    function se() {
-      b.value.showTooltip = !b.value.showTooltip;
+    function ne() {
+      k.value.showTooltip = !k.value.showTooltip;
     }
-    return ve({
-      getData: Ce,
-      generatePdf: ee,
-      generateCsv: le,
-      generateImage: te,
-      toggleTable: re,
-      toggleTooltip: se
-    }), (a, o) => (s(), u("div", {
-      class: A(`vue-ui-onion ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+    return he({
+      getData: Te,
+      generatePdf: ae,
+      generateCsv: re,
+      generateImage: le,
+      toggleTable: ue,
+      toggleTooltip: ne
+    }), (a, o) => (s(), n("div", {
+      class: D(`vue-ui-onion ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "onionChart",
       ref: _,
       id: `vue-ui-onion_${x.value}`,
-      style: D(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`)
+      style: L(`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(), u("div", {
+      e.value.style.chart.title.text ? (s(), n("div", {
         key: 0,
         ref_key: "chartTitle",
-        ref: J,
-        style: D(`width:100%;background:${e.value.style.chart.backgroundColor}`)
+        ref: Q,
+        style: L(`width:100%;background:${e.value.style.chart.backgroundColor}`)
       }, [
-        W(Ee, {
+        j(He, {
           config: {
             title: {
               cy: "onion-div-title",
@@ -277,15 +287,15 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "
             }
           }
         }, null, 8, ["config"])
-      ], 4)) : m("", !0),
-      e.value.userOptions.show && S.value ? (s(), L(We, {
+      ], 4)) : b("", !0),
+      e.value.userOptions.show && M.value ? (s(), z(je, {
         ref_key: "details",
-        ref: ge,
-        key: `user_options${q.value}`,
+        ref: pe,
+        key: `user_options${K.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: k(Z),
-        isPrinting: k(Q),
+        isImaging: v(te),
+        isPrinting: v(ee),
         uid: x.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -294,92 +304,92 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: O.value,
-        isTooltip: b.value.showTooltip,
+        isTooltip: k.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: _.value,
-        onToggleFullscreen: Te,
-        onGeneratePdf: k(ee),
-        onGenerateCsv: le,
-        onGenerateImage: k(te),
-        onToggleTable: re,
-        onToggleTooltip: se
+        onToggleFullscreen: _e,
+        onGeneratePdf: v(ae),
+        onGenerateCsv: re,
+        onGenerateImage: v(le),
+        onToggleTable: ue,
+        onToggleTooltip: ne
       }, Fe({ _: 2 }, [
         a.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: v(() => [
-            h(a.$slots, "optionTooltip", {}, void 0, !0)
+          fn: h(() => [
+            f(a.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         a.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: v(() => [
-            h(a.$slots, "optionPdf", {}, void 0, !0)
+          fn: h(() => [
+            f(a.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         a.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: v(() => [
-            h(a.$slots, "optionCsv", {}, void 0, !0)
+          fn: h(() => [
+            f(a.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         a.$slots.optionImg ? {
           name: "optionImg",
-          fn: v(() => [
-            h(a.$slots, "optionImg", {}, void 0, !0)
+          fn: h(() => [
+            f(a.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         a.$slots.optionTable ? {
           name: "optionTable",
-          fn: v(() => [
-            h(a.$slots, "optionTable", {}, void 0, !0)
+          fn: h(() => [
+            f(a.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         a.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: v(({ toggleFullscreen: t, isFullscreen: l }) => [
-            h(a.$slots, "optionFullscreen", z(B({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
+          fn: h(({ toggleFullscreen: t, isFullscreen: l }) => [
+            f(a.$slots, "optionFullscreen", B(V({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
           ]),
           key: "5"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : m("", !0),
-      S.value ? (s(), u("svg", {
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : b("", !0),
+      M.value ? (s(), n("svg", {
         key: 2,
-        xmlns: k(Be),
-        class: A({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
+        xmlns: v(Ve),
+        class: D({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
         viewBox: `0 0 ${r.value.width <= 0 ? 1e-4 : r.value.width} ${r.value.height <= 0 ? 1e-4 : r.value.height}`,
-        style: D(`max-width:100%;overflow:visible;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
+        style: L(`max-width:100%;overflow:visible;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
       }, [
-        (s(!0), u(F, null, I(g.value, (t, l) => (s(), u("circle", {
+        (s(!0), n(I, null, F(p.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": w.value.gutter,
+          "stroke-width": $.value.gutter,
           fill: "none",
           "stroke-dasharray": t.path.bgDashArray,
           "stroke-dashoffset": t.path.fullOffset,
           "stroke-linecap": "round",
-          class: A({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(p.value) && p.value !== l }),
+          class: D({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(y.value) && y.value !== l }),
           style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
-        }, null, 10, at))), 256)),
-        (s(!0), u(F, null, I(g.value, (t, l) => (s(), u("circle", {
+        }, null, 10, lt))), 256)),
+        (s(!0), n(I, null, F(p.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": w.value.track,
+          "stroke-width": $.value.track,
           fill: "none",
           "stroke-dasharray": t.path.dashArray,
           "stroke-dashoffset": t.path.dashOffset,
-          class: A({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(p.value) && p.value !== l }),
+          class: D({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(y.value) && y.value !== l }),
           "stroke-linecap": "round",
           style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
-        }, null, 10, lt))), 256)),
+        }, null, 10, ot))), 256)),
         C("defs", null, [
           C("filter", {
             id: `blur_${x.value}`,
@@ -391,76 +401,100 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "
             C("feGaussianBlur", {
               in: "SourceGraphic",
               stdDeviation: 100 / e.value.style.chart.gradientIntensity
-            }, null, 8, rt)
-          ], 8, ot)
+            }, null, 8, st)
+          ], 8, rt)
         ]),
-        e.value.style.chart.useGradient ? (s(), u("g", {
+        e.value.style.chart.useGradient ? (s(), n("g", {
           key: 0,
           filter: `url(#blur_${x.value})`
         }, [
-          (s(!0), u(F, null, I(g.value, (t, l) => (s(), u("circle", {
+          (s(!0), n(I, null, F(p.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": w.value.track / 3,
+            "stroke-width": $.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, st)) : m("", !0),
-        (s(!0), u(F, null, I(g.value, (t, l) => (s(), u("circle", {
+        ], 8, ut)) : b("", !0),
+        (s(!0), n(I, null, F(p.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(w.value.track, w.value.gutter),
+          "stroke-width": Math.max($.value.track, $.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: (y) => oe({
+          onMouseenter: (m) => se({
             datapoint: t,
             show: !0,
             seriesIndex: l
           }),
-          onMouseleave: o[0] || (o[0] = (y) => {
-            p.value = void 0, M.value = !1;
+          onMouseleave: o[0] || (o[0] = (m) => {
+            y.value = void 0, N.value = !1;
           })
-        }, null, 40, ut))), 256)),
-        e.value.style.chart.layout.labels.show ? (s(), u("g", it, [
-          (s(!0), u(F, null, I(g.value, (t, l) => (s(), u("g", {
-            onMouseenter: (y) => oe({
+        }, null, 40, it))), 256)),
+        e.value.style.chart.layout.labels.show ? (s(), n("g", ct, [
+          (s(!0), n(I, null, F(p.value, (t, l) => (s(), n("g", {
+            onMouseenter: (m) => se({
               datapoint: t,
               show: !0,
               seriesIndex: l
             }),
-            onMouseleave: o[1] || (o[1] = (y) => {
-              p.value = void 0, M.value = !1;
+            onMouseleave: o[1] || (o[1] = (m) => {
+              y.value = void 0, N.value = !1;
             })
           }, [
-            f.value.includes(t.id) ? m("", !0) : (s(), u("text", {
+            g.value.includes(t.id) ? b("", !0) : (s(), n("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: 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(p.value) && p.value === l ? t.color : e.value.style.chart.layout.labels.color,
+              fill: e.value.useBlurOnHover && ![null, void 0].includes(y.value) && y.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 ? `${(t.percentage || 0).toFixed(e.value.style.chart.layout.labels.roundingPercentage)}%` : "") + " " + T(!e.value.style.chart.layout.labels.percentage.show && e.value.style.chart.layout.labels.value.show ? ` : ${t.value ? `${t.prefix || ""}${t.value.toFixed(e.value.style.chart.layout.labels.roundingValue)}${t.suffix || ""}` : ""}` : `${e.value.style.chart.layout.labels.value.show && t.value ? `(${t.prefix || ""}${t.value.toFixed(e.value.style.chart.layout.labels.roundingValue)}${t.suffix || ""})` : ""}`), 9, dt))
-          ], 40, ct))), 256))
-        ])) : m("", !0),
-        h(a.$slots, "svg", { svg: r.value }, void 0, !0)
-      ], 14, tt)) : m("", !0),
-      a.$slots.watermark ? (s(), u("div", vt, [
-        h(a.$slots, "watermark", z(B({ isPrinting: k(Q) || k(Z) })), void 0, !0)
-      ])) : m("", !0),
-      S.value ? m("", !0) : (s(), L(Ke, {
+            }, T(t.name ? t.name + ": " : "") + " " + T(e.value.style.chart.layout.labels.percentage.show ? v(S)({
+              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.value.formatter,
+              t.value,
+              v(S)({
+                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.formatter,
+              t.value,
+              v(S)({
+                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))
+        ])) : b("", !0),
+        f(a.$slots, "svg", { svg: r.value }, void 0, !0)
+      ], 14, at)) : b("", !0),
+      a.$slots.watermark ? (s(), n("div", ht, [
+        f(a.$slots, "watermark", B(V({ isPrinting: v(ee) || v(te) })), void 0, !0)
+      ])) : b("", !0),
+      M.value ? b("", !0) : (s(), z(Qe, {
         key: 4,
         config: {
           type: "onion",
@@ -474,29 +508,29 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "
       }, null, 8, ["config"])),
       C("div", {
         ref_key: "chartLegend",
-        ref: K
+        ref: Z
       }, [
-        e.value.style.chart.legend.show ? (s(), L(je, {
+        e.value.style.chart.legend.show ? (s(), z(qe, {
           key: 0,
           legendSet: c.value,
           config: $e.value,
-          onClickMarker: o[2] || (o[2] = ({ legend: t }) => ae(t.id))
+          onClickMarker: o[2] || (o[2] = ({ legend: t }) => oe(t.id))
         }, {
-          item: v(({ legend: t }) => [
+          item: h(({ legend: t }) => [
             C("div", {
               "data-cy-legend-item": "",
               onClick: (l) => t.segregate(),
-              style: D(`opacity:${f.value.includes(t.id) ? 0.5 : 1}`)
-            }, T(t.name ? t.name + ": " : "") + " " + T((t.percentage || 0).toFixed(e.value.style.chart.legend.roundingPercentage)) + "% ", 13, ht)
+              style: L(`opacity:${g.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)
           ]),
           _: 1
-        }, 8, ["legendSet", "config"])) : h(a.$slots, "legend", {
+        }, 8, ["legendSet", "config"])) : f(a.$slots, "legend", {
           key: 1,
           legend: c.value
         }, void 0, !0)
       ], 512),
-      W(Je, {
-        show: b.value.showTooltip && M.value,
+      j(Ke, {
+        show: k.value.showTooltip && N.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -507,22 +541,22 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: _.value,
-        content: V.value,
-        isCustom: k(ue)(e.value.style.chart.tooltip.customFormat)
+        content: Y.value,
+        isCustom: v(ce)(e.value.style.chart.tooltip.customFormat)
       }, {
-        "tooltip-before": v(() => [
-          h(a.$slots, "tooltip-before", z(B({ ...G.value })), void 0, !0)
+        "tooltip-before": h(() => [
+          f(a.$slots, "tooltip-before", B(V({ ...U.value })), void 0, !0)
         ]),
-        "tooltip-after": v(() => [
-          h(a.$slots, "tooltip-after", z(B({ ...G.value })), void 0, !0)
+        "tooltip-after": h(() => [
+          f(a.$slots, "tooltip-after", B(V({ ...U.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
-      S.value ? (s(), L(Qe, {
+      M.value ? (s(), z(Ze, {
         key: 5,
         hideDetails: "",
         config: {
-          open: b.value.showTable,
+          open: k.value.showTable,
           maxHeight: 1e4,
           head: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -534,29 +568,29 @@ const et = ["id"], tt = ["xmlns", "viewBox"], at = ["cx", "cy", "r", "stroke", "
           }
         }
       }, {
-        content: v(() => [
-          W(qe, {
-            colNames: R.value.colNames,
-            head: R.value.head,
-            body: R.value.body,
-            config: R.value.config,
+        content: h(() => [
+          j(Je, {
+            colNames: A.value.colNames,
+            head: A.value.head,
+            body: A.value.body,
+            config: A.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) => b.value.showTable = !1)
+            onClose: o[3] || (o[3] = (t) => k.value.showTable = !1)
           }, {
-            th: v(({ th: t }) => [
-              Ie(T(t), 1)
+            th: h(({ th: t }) => [
+              Se(T(t), 1)
             ]),
-            td: v(({ td: t }) => [
-              C("div", { innerHTML: t }, null, 8, ft)
+            td: h(({ td: t }) => [
+              C("div", { innerHTML: t }, null, 8, gt)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"])
         ]),
         _: 1
-      }, 8, ["config"])) : m("", !0)
-    ], 14, et));
+      }, 8, ["config"])) : b("", !0)
+    ], 14, tt));
   }
-}, Ot = /* @__PURE__ */ Ze(gt, [["__scopeId", "data-v-d5bc0216"]]);
+}, It = /* @__PURE__ */ et(pt, [["__scopeId", "data-v-92cdbc16"]]);
 export {
-  Ot as default
+  It as default
 };