vue-data-ui 3.5.0 → 3.5.2

package/dist/{vue-ui-radar-C5V4hhbW.js → vue-ui-radar-BSfxyur3.js}

@@ -1,19 +1,19 @@
-import { defineAsyncComponent as _, computed as v, ref as c, toRefs as Vt, watch as de, shallowRef as He, onMounted as Dt, onBeforeUnmount as zt, createElementBlock as r, openBlock as n, unref as u, normalizeStyle as Z, normalizeClass as H, createBlock as P, createCommentVNode as p, createElementVNode as C, createVNode as ee, createSlots as je, withCtx as g, renderSlot as f, normalizeProps as E, guardReactiveProps as M, Fragment as L, renderList as N, toDisplayString as R, Teleport as Ut, resolveDynamicComponent as Bt, mergeProps as Et, createTextVNode as pe, nextTick as qe } from "vue";
-import { c as Mt, t as Gt, b as Wt, p as V, o as Xt, f as D, e as Yt, h as Qe, k as Je, x as Ht, d as G, a as he, X as jt, s as ge, i as qt, a8 as Ke, g as Ze, P as Qt, Q as Jt, G as Kt, H as Zt } from "./lib-C_mNZmhD.js";
+import { defineAsyncComponent as S, computed as v, ref as c, toRefs as Vt, watch as ve, shallowRef as He, onMounted as Dt, onBeforeUnmount as zt, createElementBlock as r, openBlock as s, unref as u, normalizeStyle as Z, normalizeClass as H, createBlock as x, createCommentVNode as g, createElementVNode as w, createVNode as ee, withCtx as d, renderSlot as p, normalizeProps as C, guardReactiveProps as $, createSlots as je, Fragment as R, renderList as V, toDisplayString as D, Teleport as Ut, resolveDynamicComponent as Bt, mergeProps as Et, createTextVNode as pe, nextTick as qe } from "vue";
+import { c as Mt, t as Gt, b as Wt, p as z, o as Xt, f as U, e as Yt, h as Qe, k as Je, x as Ht, d as G, a as he, X as jt, s as ge, i as qt, a8 as Ke, g as Ze, P as Qt, Q as Jt, G as Kt, H as Zt } from "./lib-C_mNZmhD.js";
 import { t as ea, u as ta } from "./useResponsive-DfdjqQps.js";
-import { u as aa, a as et } from "./useNestedProp-BjZe1Y85.js";
+import { u as aa, a as et } from "./useNestedProp-CReNavA0.js";
 import { u as oa, B as la } from "./BaseScanner-BgWxam9d.js";
-import { u as sa } from "./usePrinter-DTzqpYKF.js";
-import { u as na } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as na } from "./usePrinter-DTzqpYKF.js";
+import { u as sa } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as ra } from "./useChartAccessibility-9icAAmYg.js";
 import { u as ua } from "./useAutoSizeLabelsInsideViewbox-BhzfwQ_k.js";
 import ia from "./img-BecE5qXd.js";
-import ca from "./Title-l36lOBMx.js";
-import va from "./Legend-G6GMcdAc.js";
-import { t as da } from "./themes-AUNCOb2G.js";
+import ca from "./Title-BzH_LEA3.js";
+import da from "./Legend-G6GMcdAc.js";
+import { t as va } from "./themes-AUNCOb2G.js";
 import { u as pa } from "./useSvgExport-DrjCWun4.js";
 import { _ as ha } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "height"], ba = ["id"], ka = ["stop-color"], Ca = ["stop-color"], wa = { key: 1 }, $a = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], _a = { key: 0 }, Ta = ["d", "stroke", "stroke-width"], Sa = ["d", "stroke", "stroke-width"], Aa = { key: 2 }, Pa = ["x", "y", "text-anchor", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], xa = ["points", "stroke", "stroke-width"], Oa = ["points", "stroke", "stroke-width", "fill"], Fa = { key: 3 }, Ia = ["cx", "cy", "fill", "r", "stroke"], La = {
+const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "height"], ba = ["id"], ka = ["stop-color"], wa = ["stop-color"], Ca = { key: 1 }, $a = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], _a = { key: 0 }, Ta = ["d", "stroke", "stroke-width"], Sa = ["d", "stroke", "stroke-width"], Aa = { key: 2 }, Pa = ["x", "y", "text-anchor", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], Oa = ["points", "stroke", "stroke-width"], xa = ["points", "stroke", "stroke-width", "fill"], Fa = { key: 3 }, Ia = ["cx", "cy", "fill", "r", "stroke"], La = {
   key: 4,
   class: "vue-data-ui-watermark"
 }, Na = ["id"], Ra = ["onClick"], Va = {
@@ -40,10 +40,10 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
   },
   emits: ["selectLegend"],
   setup(tt, { expose: at, emit: ot }) {
-    const lt = _(() => import("./Tooltip-oWCO1HKy.js")), st = _(() => import("./BaseIcon-BmMbm4d0.js")), nt = _(() => import("./vue-ui-sparkbar-DnKP55Vu.js")), rt = _(() => import("./vue-ui-accordion-CZ0thhxa.js")), ut = _(() => import("./DataTable-BT7VF2ua.js")), it = _(() => import("./PenAndPaper-DSvu9dwa.js")), ct = _(() => import("./UserOptions-CGnQt6Fd.js")), vt = _(() => import("./PackageVersion-Cyx_s25h.js")), dt = _(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_radar: pt } = aa(), x = tt, fe = v(() => !!x.dataset && Object.keys(x.dataset).length), b = c(Mt()), te = c(!1), ae = c(""), ye = c(0), $ = c(null), me = c(null), be = c(null), ke = c(null), Ce = c(null), we = c(0), $e = c(0), _e = c(0), Te = c(!1), W = c(null), oe = c(null), e = c(se()), { loading: Se, FINAL_DATASET: O } = oa({
-      ...Vt(x),
+    const lt = S(() => import("./Tooltip-oWCO1HKy.js")), nt = S(() => import("./BaseIcon-BmMbm4d0.js")), st = S(() => import("./vue-ui-sparkbar-BDCocMLI.js")), rt = S(() => import("./vue-ui-accordion-BmFTVF1a.js")), ut = S(() => import("./DataTable-BT7VF2ua.js")), it = S(() => import("./PenAndPaper-SZQIAgkg.js")), ct = S(() => import("./UserOptions-CGnQt6Fd.js")), dt = S(() => import("./PackageVersion-Y7t79Jtq.js")), vt = S(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_radar: pt } = aa(), F = tt, fe = v(() => !!F.dataset && Object.keys(F.dataset).length), b = c(Mt()), te = c(!1), ae = c(""), ye = c(0), T = c(null), me = c(null), be = c(null), ke = c(null), we = c(null), Ce = c(0), $e = c(0), _e = c(0), Te = c(!1), W = c(null), oe = c(null), e = c(ne()), { loading: Se, FINAL_DATASET: I } = oa({
+      ...Vt(F),
       FINAL_CONFIG: e,
-      prepareConfig: se,
+      prepareConfig: ne,
       callback: () => {
         Promise.resolve().then(async () => {
           await qe(), y.value.showTable = e.value.table.show;
@@ -87,52 +87,52 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
           }
         }
       })
-    }), { userOptionsVisible: le, setUserOptionsVisibility: Ae, keepUserOptionState: Pe } = na({ config: e.value }), { svgRef: j } = ra({ config: e.value.style.chart.title });
-    function se() {
+    }), { userOptionsVisible: le, setUserOptionsVisibility: Ae, keepUserOptionState: Pe } = sa({ config: e.value }), { svgRef: j } = ra({ config: e.value.style.chart.title });
+    function ne() {
       const t = et({
-        userConfig: x.config,
+        userConfig: F.config,
         defaultConfig: pt
       });
       return t.theme ? {
         ...et({
-          userConfig: da.vue_ui_radar[t.theme] || x.config,
+          userConfig: va.vue_ui_radar[t.theme] || F.config,
           defaultConfig: t
         }),
-        customPalette: Wt[t.theme] || V
+        customPalette: Wt[t.theme] || z
       } : t;
     }
-    de(() => x.config, (t) => {
-      e.value = se(), le.value = !e.value.userOptions.showOnChartHover, xe(), we.value += 1, $e.value += 1, _e.value += 1, y.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, y.value.showTable = e.value.table.show, y.value.showTooltip = e.value.style.chart.tooltip ? e.value.style.chart.tooltip.show : !1;
+    ve(() => F.config, (t) => {
+      e.value = ne(), le.value = !e.value.userOptions.showOnChartHover, Oe(), Ce.value += 1, $e.value += 1, _e.value += 1, y.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, y.value.showTable = e.value.table.show, y.value.showTooltip = e.value.style.chart.tooltip ? e.value.style.chart.tooltip.show : !1;
     }, { deep: !0 });
-    const T = He(null), z = He(null), F = v(() => e.value.debug);
-    function xe() {
-      if (Xt(x.dataset) && D({
+    const A = He(null), B = He(null), L = v(() => e.value.debug);
+    function Oe() {
+      if (Xt(F.dataset) && U({
         componentName: "VueUiRadar",
         type: "dataset",
-        debug: F.value
+        debug: L.value
       }), e.value.responsive) {
         const t = ea(() => {
-          const { width: a, height: o } = ta({
-            chart: $.value,
+          const { width: o, height: a } = ta({
+            chart: T.value,
             title: e.value.style.chart.title.text ? me.value : null,
             legend: e.value.style.chart.legend.show ? be.value : null,
             source: ke.value,
-            noTitle: Ce.value
+            noTitle: we.value
           });
           requestAnimationFrame(() => {
-            i.value.width = a, i.value.height = o, Ue();
+            i.value.width = o, i.value.height = a, Ue();
           });
         });
-        T.value && (z.value && T.value.unobserve(z.value), T.value.disconnect()), T.value = new ResizeObserver(t), z.value = $.value.parentNode, T.value.observe(z.value);
+        A.value && (B.value && A.value.unobserve(B.value), A.value.disconnect()), A.value = new ResizeObserver(t), B.value = T.value.parentNode, A.value.observe(B.value);
       }
       Ue();
     }
     Dt(() => {
-      Te.value = !0, xe();
+      Te.value = !0, Oe();
     }), zt(() => {
-      T.value && (z.value && T.value.unobserve(z.value), T.value.disconnect());
+      A.value && (B.value && A.value.unobserve(B.value), A.value.disconnect());
     });
-    const { isPrinting: Oe, isImaging: Fe, generatePdf: Ie, generateImage: Le } = sa({
+    const { isPrinting: xe, isImaging: Fe, generatePdf: Ie, generateImage: Le } = na({
       elementId: `vue-ui-radar_${b.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-radar",
       options: e.value.userOptions.print
@@ -163,136 +163,136 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
     })), i = c({
       height: 312,
       width: 512
-    }), ft = ot, h = c([]), X = c(null), U = c(!1);
+    }), ft = ot, f = c([]), X = c(null), E = c(!1);
     function q(t) {
-      U.value = !0, h.value.includes(t) ? (X.value = t, h.value = h.value.filter((a) => a !== t), setTimeout(() => {
-        U.value = !1, X.value = null;
-      }, 500)) : (h.value.push(t), setTimeout(() => {
-        U.value = !1;
-      }, 500)), ft("selectLegend", A.value.filter((a, o) => !h.value.includes(o)).map((a) => ({
-        name: a.name,
-        color: a.color,
-        proportion: a.totalProportion
+      E.value = !0, f.value.includes(t) ? (X.value = t, f.value = f.value.filter((o) => o !== t), setTimeout(() => {
+        E.value = !1, X.value = null;
+      }, 500)) : (f.value.push(t), setTimeout(() => {
+        E.value = !1;
+      }, 500)), ft("selectLegend", O.value.filter((o, a) => !f.value.includes(a)).map((o) => ({
+        name: o.name,
+        color: o.color,
+        proportion: o.totalProportion
       })));
     }
     function yt() {
-      return A.value.map((t) => ({
+      return O.value.map((t) => ({
         name: t.name,
         color: t.color,
         proportion: t.totalProportion
       }));
     }
     function mt() {
-      const t = O.value;
+      const t = I.value;
       if ([null, void 0].includes(t?.categories)) {
-        D({
+        U({
           componentName: "VueUiRadar",
           type: "dataset",
-          debug: F.value
-        }), D({
+          debug: L.value
+        }), U({
           componentName: "VueUiRadar",
           type: "datasetAttribute",
           property: "categories ({ name: string; prefix?: string; suffix?: string}[])",
-          debug: F.value
+          debug: L.value
         });
         return;
       }
-      t.categories.length === 0 ? D({
+      t.categories.length === 0 ? U({
         componentName: "VueUiRadar",
         type: "datasetAttributeEmpty",
         property: "categories",
-        debug: F.value
-      }) : t.categories.forEach((a, o) => {
+        debug: L.value
+      }) : t.categories.forEach((o, a) => {
         Ze({
-          datasetObject: a,
+          datasetObject: o,
           requiredAttributes: ["name"]
         }).forEach((l) => {
-          D({
+          U({
             componentName: "VueUiRadar",
             type: "datasetAttribute",
-            property: `category.${l} at index ${o}`,
-            index: o,
-            debug: F.value
+            property: `category.${l} at index ${a}`,
+            index: a,
+            debug: L.value
           });
         });
-      }), [null, void 0].includes(t?.series) ? D({
+      }), [null, void 0].includes(t?.series) ? U({
         componentName: "VueUiRadar",
         type: "datasetAttribute",
         property: "series ({ name: string; values: number[]; color?: string; target: number}[])",
-        debug: F.value
-      }) : t.series.forEach((a, o) => {
+        debug: L.value
+      }) : t.series.forEach((o, a) => {
         Ze({
-          datasetObject: a,
+          datasetObject: o,
           requiredAttributes: ["name", "values", "target"]
         }).forEach((l) => {
-          D({
+          U({
             componentName: "VueUiRadar",
             type: "datasetSerieAttribute",
             key: "series",
             property: l,
-            index: o,
-            debug: F.value
+            index: a,
+            debug: L.value
           });
         });
       });
     }
-    de(
-      () => O.value,
+    ve(
+      () => I.value,
       () => mt(),
       { deep: !0, immediate: !0 }
     );
-    const w = v(() => {
-      const t = Array.isArray(O.value?.categories) ? O.value.categories : [], a = Ne.value ?? V;
-      return t.map((o, l) => ({
-        name: o?.name ?? "",
+    const _ = v(() => {
+      const t = Array.isArray(I.value?.categories) ? I.value.categories : [], o = Ne.value ?? z;
+      return t.map((a, l) => ({
+        name: a?.name ?? "",
         categoryId: `radar_category_${b.value}_${l}`,
-        color: Qe(o?.color) || a[l] || V[l % V.length],
-        prefix: o?.prefix ?? "",
-        suffix: o?.suffix ?? ""
+        color: Qe(a?.color) || o[l] || z[l % z.length],
+        prefix: a?.prefix ?? "",
+        suffix: a?.suffix ?? ""
       }));
-    }), k = v(() => O.value.series.map((t, a) => ({
+    }), k = v(() => I.value.series.map((t, o) => ({
       ...t,
-      color: Qe(t.color) || Ne.value[a] || V[a] || V[a % V.length],
-      serieId: `radar_serie_${b.value}_${a}`,
+      color: Qe(t.color) || Ne.value[o] || z[o] || z[o % z.length],
+      serieId: `radar_serie_${b.value}_${o}`,
       formatter: t.formatter || null,
-      absoluteIndex: a
+      absoluteIndex: o
     })));
     function Re(t) {
       if (!k.value.length)
         return e.value.debug && console.warn("VueUiRadar - There are no series to show."), null;
-      const a = A.value.find((o) => o.name === t);
-      return a || (e.value.debug && console.warn(`VueUiRadar - Series name not found "${t}"`), null);
+      const o = O.value.find((a) => a.name === t);
+      return o || (e.value.debug && console.warn(`VueUiRadar - Series name not found "${t}"`), null);
     }
     function bt(t) {
-      const a = Re(t);
-      a !== null && h.value.includes(a.absoluteIndex) && q(a.absoluteIndex);
+      const o = Re(t);
+      o !== null && f.value.includes(o.absoluteIndex) && q(o.absoluteIndex);
     }
     function kt(t) {
-      const a = Re(t);
-      a !== null && (h.value.includes(a.absoluteIndex) || q(a.absoluteIndex));
+      const o = Re(t);
+      o !== null && (f.value.includes(o.absoluteIndex) || q(o.absoluteIndex));
     }
-    const Ve = v(() => Math.max(...k.value.flatMap((t) => t.values))), De = v(() => k.value.length), ne = v(() => Math.min(i.value.width, i.value.height) / 3), ze = v(() => Je({
+    const Ve = v(() => Math.max(...k.value.flatMap((t) => t.values))), De = v(() => k.value.length), se = v(() => Math.min(i.value.width, i.value.height) / 3), ze = v(() => Je({
       plot: { x: i.value.width / 2, y: i.value.height / 2 },
-      radius: ne.value,
+      radius: se.value,
       sides: De.value,
       rotation: 0
-    })), Ct = v(() => {
+    })), wt = v(() => {
       const t = [];
-      for (let a = 0; a < ne.value; a += ne.value / e.value.style.chart.layout.grid.graduations)
-        t.push(a);
+      for (let o = 0; o < se.value; o += se.value / e.value.style.chart.layout.grid.graduations)
+        t.push(o);
       return t;
-    }), S = v(() => ze.value.coordinates.map((t, a) => {
-      const o = k.value[a].values.map((l) => $t({
+    }), P = v(() => ze.value.coordinates.map((t, o) => {
+      const a = k.value[o].values.map((l) => $t({
         centerX: i.value.width / 2,
         centerY: i.value.height / 2,
         apexX: t.x,
         apexY: t.y,
-        proportion: l / (k.value[a].target || Ve.value)
+        proportion: l / (k.value[o].target || Ve.value)
       }));
       return {
         ...t,
-        ...k.value[a],
-        plots: o
+        ...k.value[o],
+        plots: a
       };
     }).map((t) => ({
       ...t,
@@ -300,39 +300,39 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
       labelY: re(t).y,
       labelAnchor: re(t).anchor
     })));
-    function re({ x: t, y: a }) {
-      let o = "middle";
-      return t = Math.round(t), a = Math.round(a), t > i.value.width / 2 && (t += 12, o = "start"), t < i.value.width / 2 && (t -= 12, o = "end"), a > i.value.height / 2 + 1 && (a += 20), a < i.value.height / 2 - 1 && (a -= 12), a === i.value.height / 2 && (a += 4), { x: t, y: a, anchor: o };
+    function re({ x: t, y: o }) {
+      let a = "middle";
+      return t = Math.round(t), o = Math.round(o), t > i.value.width / 2 && (t += 12, a = "start"), t < i.value.width / 2 && (t -= 12, a = "end"), o > i.value.height / 2 + 1 && (o += 20), o < i.value.height / 2 - 1 && (o -= 12), o === i.value.height / 2 && (o += 4), { x: t, y: o, anchor: a };
     }
-    const wt = v({
+    const Ct = v({
       get: () => e.value.style.chart.layout.labels.dataLabels.fontSize,
       set: (t) => t
     }), { autoSizeLabels: Ue } = ua({
       svgRef: j,
       fontSize: e.value.style.chart.layout.labels.dataLabels.fontSize,
       minFontSize: 6,
-      sizeRef: wt,
+      sizeRef: Ct,
       labelClass: ".vue-ui-radar-apex-label"
     });
-    function $t({ centerX: t, centerY: a, apexX: o, apexY: l, proportion: s }) {
+    function $t({ centerX: t, centerY: o, apexX: a, apexY: l, proportion: n }) {
       return {
-        x: t + (o - t) * s,
-        y: a + (l - a) * s
+        x: t + (a - t) * n,
+        y: o + (l - o) * n
       };
     }
-    const A = v(() => {
-      const t = k.value.map((a, o) => a.values.map((l) => l / (a.target || Ve.value)));
-      return w.value.map((a, o) => {
-        const l = Ht(t.map((s) => s[o]).reduce((s, d) => s + d, 0) / k.value.length);
+    const O = v(() => {
+      const t = k.value.map((o, a) => o.values.map((l) => l / (o.target || Ve.value)));
+      return _.value.map((o, a) => {
+        const l = Ht(t.map((n) => n[a]).reduce((n, h) => n + h, 0) / k.value.length);
         return {
-          ...a,
-          absoluteIndex: o,
+          ...o,
+          absoluteIndex: a,
           totalProportion: l,
           shape: "circle",
-          opacity: h.value.includes(o) ? 0.5 : 1,
-          segregate: () => q(o),
-          isSegregated: h.value.includes(o),
-          display: `${a.name}: ${G({
+          opacity: f.value.includes(a) ? 0.5 : 1,
+          segregate: () => q(a),
+          isSegregated: f.value.includes(a),
+          display: `${o.name}: ${G({
             v: (l ?? 0) * 100,
             s: "%",
             r: e.value.style.chart.legend.roundingPercentage
@@ -350,8 +350,8 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
       const t = [
         { name: e.value.translations.datapoint, color: "" },
         { name: e.value.translations.target, color: "" },
-        ...A.value
-      ], a = O.value.series.map((l) => [
+        ...O.value
+      ], o = I.value.series.map((l) => [
         l.name,
         he(
           l.formatter,
@@ -363,16 +363,16 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
             r: e.value.table.td.roundingValue
           })
         ),
-        ...l.values.map((s, d) => `${he(
+        ...l.values.map((n, h) => `${he(
           l.formatter,
-          s,
-          G({ p: w.value[d]?.prefix ?? "", v: s, s: w.value[d]?.suffix ?? "", r: e.value.table.td.roundingValue })
-        )} (${isNaN(s / l.target) ? "" : G({
-          v: s / l.target * 100,
+          n,
+          G({ p: _.value[h]?.prefix ?? "", v: n, s: _.value[h]?.suffix ?? "", r: e.value.table.td.roundingValue })
+        )} (${isNaN(n / l.target) ? "" : G({
+          v: n / l.target * 100,
           s: "%",
           r: e.value.table.td.roundingPercentage
         })})`)
-      ]), o = {
+      ]), a = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
@@ -385,52 +385,52 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
         },
         breakpoint: e.value.table.responsiveBreakpoint
       };
-      return { head: t, body: a, config: o, colNames: t };
+      return { head: t, body: o, config: a, colNames: t };
     }), J = c(null), ue = c([]), ie = c(null);
-    function Tt(t, a) {
-      te.value = !1, J.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
+    function Tt(t, o) {
+      te.value = !1, J.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
     }
-    function St(t, a) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
+    function St(t, o) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
     }
-    function At(t, a) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a });
-      const o = w.value.slice();
-      ue.value = [], J.value = a, te.value = !0, ie.value = {
+    function At(t, o) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o });
+      const a = _.value.slice();
+      ue.value = [], J.value = o, te.value = !0, ie.value = {
         datapoint: t,
-        seriesIndex: a,
+        seriesIndex: o,
         series: {
-          categories: o,
+          categories: a,
           datapoints: k.value,
-          radar: S.value
+          radar: P.value
         },
         config: e.value
       };
       const l = e.value.style.chart.tooltip.customFormat;
       if (Kt(l) && Zt(() => l({
-        seriesIndex: a,
+        seriesIndex: o,
         datapoint: t,
-        series: { categories: o, datapoints: k.value, radar: S.value },
+        series: { categories: a, datapoints: k.value, radar: P.value },
         config: e.value
       }))) {
         ae.value = l({
-          seriesIndex: a,
+          seriesIndex: o,
           datapoint: t,
-          series: { categories: o, datapoints: k.value, radar: S.value },
+          series: { categories: a, datapoints: k.value, radar: P.value },
           config: e.value
         });
         return;
       }
       ae.value = `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`;
-      for (let s = 0; s < t.values.length; s += 1)
-        if (!h.value.includes(s)) {
-          const d = o[s], m = t.values[s], Xe = isNaN(m / t.target) ? 0 : m / t.target * 100, B = he(
+      for (let n = 0; n < t.values.length; n += 1)
+        if (!f.value.includes(n)) {
+          const h = a[n], m = t.values[n], Xe = isNaN(m / t.target) ? 0 : m / t.target * 100, M = he(
             t.formatter,
             m,
             G({
-              p: w.value[s].prefix,
+              p: _.value[n].prefix,
               v: m,
-              s: w.value[s].suffix,
+              s: _.value[n].suffix,
               r: e.value.style.chart.tooltip.roundingValue
             }),
             { datapoint: t }
@@ -438,11 +438,11 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
             v: Xe,
             s: "%",
             r: e.value.style.chart.tooltip.roundingPercentage
-          }), Rt = e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${B} (${Ye})` : e.value.style.chart.tooltip.showValue && !e.value.style.chart.tooltip.showPercentage ? B : !e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${Ye}` : "";
+          }), Rt = e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${M} (${Ye})` : e.value.style.chart.tooltip.showValue && !e.value.style.chart.tooltip.showPercentage ? M : !e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${Ye}` : "";
           ue.value.push({
-            name: d?.name ?? `#${s + 1}`,
-            value: t.values[s] / t.target * 100,
-            color: d?.color,
+            name: h?.name ?? `#${n + 1}`,
+            value: t.values[n] / t.target * 100,
+            color: h?.color,
             suffix: Rt,
             prefix: "",
             rounding: e.value.style.chart.tooltip.roundingPercentage,
@@ -452,16 +452,16 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
     }
     function ce(t = null) {
       qe(() => {
-        const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = [[""], [e.value.translations.target], ...A.value.flatMap((m) => [[m.name], ["%"]])], l = O.value.series.map((m, Xe) => [m.name, m.target, ...m.values.flatMap((B) => [
-          B,
-          isNaN(B / m.target) ? "" : B / m.target * 100
-        ])]), s = a.concat([o]).concat(l), d = Qt(s);
-        t ? t(d) : Jt({ csvContent: d, title: e.value.style.chart.title.text || "vue-ui-radar" });
+        const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = [[""], [e.value.translations.target], ...O.value.flatMap((m) => [[m.name], ["%"]])], l = I.value.series.map((m, Xe) => [m.name, m.target, ...m.values.flatMap((M) => [
+          M,
+          isNaN(M / m.target) ? "" : M / m.target * 100
+        ])]), n = o.concat([a]).concat(l), h = Qt(n);
+        t ? t(h) : Jt({ csvContent: h, title: e.value.style.chart.title.text || "vue-ui-radar" });
       });
     }
-    const I = c(!1);
+    const N = c(!1);
     function Be(t) {
-      I.value = t, ye.value += 1;
+      N.value = t, ye.value += 1;
     }
     function Ee() {
       y.value.showTable = !y.value.showTable;
@@ -470,38 +470,38 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
       y.value.showTooltip = !y.value.showTooltip;
     }
     const K = c(!1);
-    function ve() {
+    function de() {
       K.value = !K.value;
     }
     async function Pt({ scale: t = 2 } = {}) {
-      if (!$.value) return;
-      const { width: a, height: o } = $.value.getBoundingClientRect(), l = a / o, { imageUri: s, base64: d } = await ia({ domElement: $.value, base64: !0, img: !0, scale: t });
+      if (!T.value) return;
+      const { width: o, height: a } = T.value.getBoundingClientRect(), l = o / a, { imageUri: n, base64: h } = await ia({ domElement: T.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: s,
-        base64: d,
+        imageUri: n,
+        base64: h,
         title: e.value.style.chart.title.text,
-        width: a,
-        height: o,
+        width: o,
+        height: a,
         aspectRatio: l
       };
     }
     const Y = v(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, a = y.value.showTable;
+      const t = e.value.table.useDialog && !e.value.table.show, o = y.value.showTable;
       return {
-        component: t ? dt : rt,
+        component: t ? vt : rt,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
         props: t ? {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: I.value,
-          fullscreenParent: $.value,
+          isFullscreen: N.value,
+          fullscreenParent: T.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8)
         } : {
           hideDetails: !0,
           config: {
-            open: a,
+            open: o,
             maxHeight: 1e4,
             body: {
               backgroundColor: e.value.style.chart.backgroundColor,
@@ -515,26 +515,26 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
         }
       };
     });
-    de(() => y.value.showTable, (t) => {
+    ve(() => y.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && W.value ? W.value.open() : "close" in W.value && W.value.close());
     });
     function Ge() {
       y.value.showTable = !1, oe.value && oe.value.setTableIconState(!1);
     }
-    const xt = v(() => A.value.map((t) => ({
+    const Ot = v(() => O.value.map((t) => ({
       ...t,
       name: t.display
-    }))), Ot = v(() => e.value.style.chart.backgroundColor), Ft = v(() => e.value.style.chart.legend), It = v(() => e.value.style.chart.title), { exportSvg: Lt, getSvg: Nt } = pa({
+    }))), xt = v(() => e.value.style.chart.backgroundColor), Ft = v(() => e.value.style.chart.legend), It = v(() => e.value.style.chart.title), { exportSvg: Lt, getSvg: Nt } = pa({
       svg: j,
       title: It,
       legend: Ft,
-      legendItems: xt,
-      backgroundColor: Ot
+      legendItems: Ot,
+      backgroundColor: xt
     });
     async function We({ isCb: t }) {
       if (t) {
-        const { blob: a, url: o, text: l, dataUrl: s } = await Nt();
-        e.value.userOptions.callbacks.svg({ blob: a, url: o, text: l, dataUrl: s });
+        const { blob: o, url: a, text: l, dataUrl: n } = await Nt();
+        e.value.userOptions.callbacks.svg({ blob: o, url: a, text: l, dataUrl: n });
       } else
         Lt();
     }
@@ -549,40 +549,60 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
       showSeries: bt,
       toggleTable: Ee,
       toggleTooltip: Me,
-      toggleAnnotator: ve,
+      toggleAnnotator: de,
       toggleFullscreen: Be
-    }), (t, a) => (n(), r("div", {
-      class: H(`vue-data-ui-component vue-ui-radar ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+    }), (t, o) => (s(), r("div", {
+      class: H(`vue-data-ui-component vue-ui-radar ${N.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "radarChart",
-      ref: $,
+      ref: T,
       id: `vue-ui-radar_${b.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}`),
-      onMouseenter: a[2] || (a[2] = () => u(Ae)(!0)),
-      onMouseleave: a[3] || (a[3] = () => u(Ae)(!1))
+      onMouseenter: o[2] || (o[2] = () => u(Ae)(!0)),
+      onMouseleave: o[3] || (o[3] = () => u(Ae)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (n(), P(u(it), {
+      e.value.userOptions.buttons.annotator ? (s(), x(u(it), {
         key: 0,
         svgRef: u(j),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: K.value,
-        onClose: ve
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
-      ht.value ? (n(), r("div", {
+        onClose: de
+      }, {
+        "annotator-action-close": d(() => [
+          p(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": d(({ color: a }) => [
+          p(t.$slots, "annotator-action-color", C($({ color: a })), void 0, !0)
+        ]),
+        "annotator-action-draw": d(({ mode: a }) => [
+          p(t.$slots, "annotator-action-draw", C($({ mode: a })), void 0, !0)
+        ]),
+        "annotator-action-undo": d(({ disabled: a }) => [
+          p(t.$slots, "annotator-action-undo", C($({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-redo": d(({ disabled: a }) => [
+          p(t.$slots, "annotator-action-redo", C($({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-delete": d(({ disabled: a }) => [
+          p(t.$slots, "annotator-action-delete", C($({ disabled: a })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
+      ht.value ? (s(), r("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Ce,
+        ref: we,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : p("", !0),
-      e.value.style.chart.title.text ? (n(), r("div", {
+      }, null, 512)) : g("", !0),
+      e.value.style.chart.title.text ? (s(), r("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: me,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (n(), P(ca, {
-          key: `title_${we.value}`,
+        (s(), x(ca, {
+          key: `title_${Ce.value}`,
           config: {
             title: {
               cy: "radar-div-title",
@@ -594,18 +614,18 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : p("", !0),
-      C("div", {
+      ], 512)) : g("", !0),
+      w("div", {
         id: `legend-top-${b.value}`
       }, null, 8, fa),
-      e.value.userOptions.show && fe.value && (u(Pe) || u(le)) ? (n(), P(u(ct), {
+      e.value.userOptions.show && fe.value && (u(Pe) || u(le)) ? (s(), x(u(ct), {
         ref_key: "userOptionsRef",
         ref: oe,
         key: `user_options_${ye.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isImaging: u(Fe),
-        isPrinting: u(Oe),
+        isPrinting: u(xe),
         uid: b.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -614,10 +634,10 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
         hasXls: e.value.userOptions.buttons.csv,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: I.value,
+        isFullscreen: N.value,
         isTooltip: y.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: $.value,
+        chartElement: T.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: K.value,
@@ -631,85 +651,85 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
         onGenerateSvg: We,
         onToggleTable: Ee,
         onToggleTooltip: Me,
-        onToggleAnnotator: ve,
+        onToggleAnnotator: de,
         style: Z({
           visibility: u(Pe) ? u(le) ? "visible" : "hidden" : "visible"
         })
       }, je({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: g(({ isOpen: o, color: l }) => [
-            f(t.$slots, "menuIcon", E(M({ isOpen: o, color: l })), void 0, !0)
+          fn: d(({ isOpen: a, color: l }) => [
+            p(t.$slots, "menuIcon", C($({ isOpen: a, color: l })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: g(() => [
-            f(t.$slots, "optionTooltip", {}, void 0, !0)
+          fn: d(() => [
+            p(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: g(() => [
-            f(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: d(() => [
+            p(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: g(() => [
-            f(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: d(() => [
+            p(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: g(() => [
-            f(t.$slots, "optionImg", {}, void 0, !0)
+          fn: d(() => [
+            p(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionSvg ? {
           name: "optionSvg",
-          fn: g(() => [
-            f(t.$slots, "optionSvg", {}, void 0, !0)
+          fn: d(() => [
+            p(t.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: g(() => [
-            f(t.$slots, "optionTable", {}, void 0, !0)
+          fn: d(() => [
+            p(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: g(({ toggleFullscreen: o, isFullscreen: l }) => [
-            f(t.$slots, "optionFullscreen", E(M({ toggleFullscreen: o, isFullscreen: l })), void 0, !0)
+          fn: d(({ toggleFullscreen: a, isFullscreen: l }) => [
+            p(t.$slots, "optionFullscreen", C($({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: g(({ toggleAnnotator: o, isAnnotator: l }) => [
-            f(t.$slots, "optionAnnotator", E(M({ toggleAnnotator: o, isAnnotator: l })), void 0, !0)
+          fn: d(({ toggleAnnotator: a, isAnnotator: l }) => [
+            p(t.$slots, "optionAnnotator", C($({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
           ]),
           key: "8"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
-      (n(), r("svg", {
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
+      (s(), r("svg", {
         ref_key: "svgRef",
         ref: j,
         xmlns: u(jt),
-        class: H({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
+        class: H({ "vue-data-ui-fullscreen--on": N.value, "vue-data-ui-fulscreen--off": !N.value }),
         viewBox: `0 0 ${i.value.width <= 0 ? 10 : i.value.width} ${i.value.height <= 0 ? 10 : i.value.height}`,
         style: Z(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        ee(u(vt)),
-        t.$slots["chart-background"] ? (n(), r("foreignObject", {
+        ee(u(dt)),
+        t.$slots["chart-background"] ? (s(), r("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -719,10 +739,10 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
             pointerEvents: "none"
           }
         }, [
-          f(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, ma)) : p("", !0),
-        C("defs", null, [
-          (n(!0), r(L, null, N(w.value, (o, l) => (n(), r("radialGradient", {
+          p(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, ma)) : g("", !0),
+        w("defs", null, [
+          (s(!0), r(R, null, V(_.value, (a, l) => (s(), r("radialGradient", {
             cx: "50%",
             cy: "50%",
             r: "50%",
@@ -730,30 +750,30 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
             fy: "50%",
             id: `radar_gradient_${b.value}_${l}`
           }, [
-            C("stop", {
+            w("stop", {
               offset: "0%",
-              "stop-color": u(ge)(u(qt)(o.color, 0.05), e.value.style.chart.layout.dataPolygon.opacity)
+              "stop-color": u(ge)(u(qt)(a.color, 0.05), e.value.style.chart.layout.dataPolygon.opacity)
             }, null, 8, ka),
-            C("stop", {
+            w("stop", {
               offset: "100%",
-              "stop-color": u(ge)(o.color, e.value.style.chart.layout.dataPolygon.opacity)
-            }, null, 8, Ca)
+              "stop-color": u(ge)(a.color, e.value.style.chart.layout.dataPolygon.opacity)
+            }, null, 8, wa)
           ], 8, ba))), 256))
         ]),
-        e.value.style.chart.layout.grid.show ? (n(), r("g", wa, [
-          (n(!0), r(L, null, N(S.value, (o) => (n(), r("line", {
+        e.value.style.chart.layout.grid.show ? (s(), r("g", Ca, [
+          (s(!0), r(R, null, V(P.value, (a) => (s(), r("line", {
             x1: i.value.width / 2,
             y1: i.value.height / 2,
-            x2: o.x,
-            y2: o.y,
+            x2: a.x,
+            y2: a.y,
             stroke: e.value.style.chart.layout.grid.stroke,
             "stroke-width": e.value.style.chart.layout.grid.strokeWidth
           }, null, 8, $a))), 256)),
-          e.value.style.chart.layout.grid.graduations > 0 ? (n(), r("g", _a, [
-            (n(!0), r(L, null, N(Ct.value, (o) => (n(), r("path", {
+          e.value.style.chart.layout.grid.graduations > 0 ? (s(), r("g", _a, [
+            (s(!0), r(R, null, V(wt.value, (a) => (s(), r("path", {
               d: u(Je)({
                 plot: { x: i.value.width / 2, y: i.value.height / 2 },
-                radius: o,
+                radius: a,
                 sides: De.value,
                 rotation: 0
               }).path,
@@ -761,9 +781,9 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
               stroke: e.value.style.chart.layout.grid.stroke,
               "stroke-width": e.value.style.chart.layout.grid.strokeWidth
             }, null, 8, Ta))), 256))
-          ])) : p("", !0)
-        ])) : p("", !0),
-        C("path", {
+          ])) : g("", !0)
+        ])) : g("", !0),
+        w("path", {
           d: ze.value.path,
           fill: "none",
           stroke: e.value.style.chart.layout.outerPolygon.stroke,
@@ -771,96 +791,96 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
           "stroke-linejoin": "round",
           "stroke-linecap": "round"
         }, null, 8, Sa),
-        e.value.style.chart.layout.labels.dataLabels.show ? (n(), r("g", Aa, [
-          (n(!0), r(L, null, N(S.value, (o, l) => (n(), r("text", {
+        e.value.style.chart.layout.labels.dataLabels.show ? (s(), r("g", Aa, [
+          (s(!0), r(R, null, V(P.value, (a, l) => (s(), r("text", {
             class: "vue-ui-radar-apex-label",
-            x: o.labelX,
-            y: o.labelY,
-            "text-anchor": o.labelAnchor,
+            x: a.labelX,
+            y: a.labelY,
+            "text-anchor": a.labelAnchor,
             "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
             fill: e.value.style.chart.layout.labels.dataLabels.color,
-            onMouseenter: (s) => At(o, l),
-            onMouseleave: (s) => Tt(o, l),
-            onClick: (s) => St(o, l)
-          }, R(o.name), 41, Pa))), 256))
-        ])) : p("", !0),
-        (n(!0), r(L, null, N(w.value, (o, l) => (n(), r("g", null, [
-          C("g", null, [
-            e.value.useCssAnimation || !e.value.useCssAnimation && !h.value.includes(l) ? (n(), r("polygon", {
+            onMouseenter: (n) => At(a, l),
+            onMouseleave: (n) => Tt(a, l),
+            onClick: (n) => St(a, l)
+          }, D(a.name), 41, Pa))), 256))
+        ])) : g("", !0),
+        (s(!0), r(R, null, V(_.value, (a, l) => (s(), r("g", null, [
+          w("g", null, [
+            e.value.useCssAnimation || !e.value.useCssAnimation && !f.value.includes(l) ? (s(), r("polygon", {
               key: 0,
-              points: u(Ke)(S.value.map((s) => s.plots[l]), !1, !0),
+              points: u(Ke)(P.value.map((n) => n.plots[l]), !1, !0),
               stroke: e.value.style.chart.backgroundColor,
               "stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth + 1,
               fill: "none",
-              class: H({ "animated-out": h.value.includes(l) && e.value.useCssAnimation, "animated-in": U.value && X.value === l && e.value.useCssAnimation })
-            }, null, 10, xa)) : p("", !0),
-            e.value.useCssAnimation || !e.value.useCssAnimation && !h.value.includes(l) ? (n(), r("polygon", {
+              class: H({ "animated-out": f.value.includes(l) && e.value.useCssAnimation, "animated-in": E.value && X.value === l && e.value.useCssAnimation })
+            }, null, 10, Oa)) : g("", !0),
+            e.value.useCssAnimation || !e.value.useCssAnimation && !f.value.includes(l) ? (s(), r("polygon", {
               key: 1,
-              points: u(Ke)(S.value.map((s) => s.plots[l]), !1, !0),
-              stroke: o.color,
+              points: u(Ke)(P.value.map((n) => n.plots[l]), !1, !0),
+              stroke: a.color,
               "stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth,
-              fill: e.value.style.chart.layout.dataPolygon.transparent ? "transparent" : e.value.style.chart.layout.dataPolygon.useGradient ? `url(#radar_gradient_${b.value}_${l})` : u(ge)(o.color, e.value.style.chart.layout.dataPolygon.opacity),
-              class: H({ "animated-out": h.value.includes(l) && e.value.useCssAnimation, "animated-in": U.value && X.value === l && e.value.useCssAnimation })
-            }, null, 10, Oa)) : p("", !0)
+              fill: e.value.style.chart.layout.dataPolygon.transparent ? "transparent" : e.value.style.chart.layout.dataPolygon.useGradient ? `url(#radar_gradient_${b.value}_${l})` : u(ge)(a.color, e.value.style.chart.layout.dataPolygon.opacity),
+              class: H({ "animated-out": f.value.includes(l) && e.value.useCssAnimation, "animated-in": E.value && X.value === l && e.value.useCssAnimation })
+            }, null, 10, xa)) : g("", !0)
           ])
         ]))), 256)),
-        e.value.style.chart.layout.plots.show ? (n(), r("g", Fa, [
-          (n(!0), r(L, null, N(S.value, (o, l) => (n(), r("g", null, [
-            (n(!0), r(L, null, N(o.plots, (s, d) => (n(), r("circle", {
-              cx: s.x,
-              cy: s.y,
-              fill: h.value.includes(d) ? "transparent" : w.value[d] ? w.value[d].color : "transparent",
+        e.value.style.chart.layout.plots.show ? (s(), r("g", Fa, [
+          (s(!0), r(R, null, V(P.value, (a, l) => (s(), r("g", null, [
+            (s(!0), r(R, null, V(a.plots, (n, h) => (s(), r("circle", {
+              cx: n.x,
+              cy: n.y,
+              fill: f.value.includes(h) ? "transparent" : _.value[h] ? _.value[h].color : "transparent",
               r: J.value !== null && J.value === l ? e.value.style.chart.layout.plots.radius * 1.6 : e.value.style.chart.layout.plots.radius,
-              stroke: h.value.includes(d) ? "transparent" : e.value.style.chart.backgroundColor,
+              stroke: f.value.includes(h) ? "transparent" : e.value.style.chart.backgroundColor,
               "stroke-width": 0.5,
-              class: H({ "animated-out": h.value.includes(d) && e.value.useCssAnimation, "animated-in": U.value && X.value === d && e.value.useCssAnimation })
+              class: H({ "animated-out": f.value.includes(h) && e.value.useCssAnimation, "animated-in": E.value && X.value === h && e.value.useCssAnimation })
             }, null, 10, Ia))), 256))
           ]))), 256))
-        ])) : p("", !0),
-        f(t.$slots, "svg", { svg: i.value }, void 0, !0)
+        ])) : g("", !0),
+        p(t.$slots, "svg", { svg: i.value }, void 0, !0)
       ], 14, ya)),
-      t.$slots.watermark ? (n(), r("div", La, [
-        f(t.$slots, "watermark", E(M({ isPrinting: u(Oe) || u(Fe) })), void 0, !0)
-      ])) : p("", !0),
-      C("div", {
+      t.$slots.watermark ? (s(), r("div", La, [
+        p(t.$slots, "watermark", C($({ isPrinting: u(xe) || u(Fe) })), void 0, !0)
+      ])) : g("", !0),
+      w("div", {
         id: `legend-bottom-${b.value}`
       }, null, 8, Na),
-      Te.value ? (n(), P(Ut, {
+      Te.value ? (s(), x(Ut, {
         key: 5,
         to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
       }, [
-        C("div", {
+        w("div", {
           ref_key: "chartLegend",
           ref: be
         }, [
-          e.value.style.chart.legend.show ? (n(), P(va, {
+          e.value.style.chart.legend.show ? (s(), x(da, {
             key: `legend_${_e.value}`,
-            legendSet: A.value,
+            legendSet: O.value,
             config: _t.value,
-            onClickMarker: a[0] || (a[0] = ({ i: o }) => q(o))
+            onClickMarker: o[0] || (o[0] = ({ i: a }) => q(a))
           }, {
-            item: g(({ legend: o, index: l }) => [
-              u(Se) ? p("", !0) : (n(), r("div", {
+            item: d(({ legend: a, index: l }) => [
+              u(Se) ? g("", !0) : (s(), r("div", {
                 key: 0,
-                onClick: (s) => o.segregate(),
-                style: Z(`opacity:${h.value.includes(l) ? 0.5 : 1}`)
-              }, R(o.display), 13, Ra))
+                onClick: (n) => a.segregate(),
+                style: Z(`opacity:${f.value.includes(l) ? 0.5 : 1}`)
+              }, D(a.display), 13, Ra))
             ]),
             _: 1
-          }, 8, ["legendSet", "config"])) : f(t.$slots, "legend", {
+          }, 8, ["legendSet", "config"])) : p(t.$slots, "legend", {
             key: 1,
-            legend: A.value
+            legend: O.value
           }, void 0, !0)
         ], 512)
-      ], 8, ["to"])) : p("", !0),
-      t.$slots.source ? (n(), r("div", {
+      ], 8, ["to"])) : g("", !0),
+      t.$slots.source ? (s(), r("div", {
         key: 6,
         ref_key: "source",
         ref: ke,
         dir: "auto"
       }, [
-        f(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : p("", !0),
+        p(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : g("", !0),
       ee(u(lt), {
         show: y.value.showTooltip && te.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
@@ -872,45 +892,45 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
         fontSize: e.value.style.chart.tooltip.fontSize,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: $.value,
+        parent: T.value,
         content: ae.value,
-        isFullscreen: I.value,
+        isFullscreen: N.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter,
         smoothForce: e.value.style.chart.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
       }, {
-        "tooltip-before": g(() => [
-          f(t.$slots, "tooltip-before", E(M({ ...ie.value })), void 0, !0)
+        "tooltip-before": d(() => [
+          p(t.$slots, "tooltip-before", C($({ ...ie.value })), void 0, !0)
         ]),
-        "tooltip-after": g(() => [
-          ["function"].includes(typeof e.value.style.chart.tooltip.customFormat) ? p("", !0) : (n(), r("div", Va, [
-            ee(u(nt), {
+        "tooltip-after": d(() => [
+          ["function"].includes(typeof e.value.style.chart.tooltip.customFormat) ? g("", !0) : (s(), r("div", Va, [
+            ee(u(st), {
               dataset: ue.value,
               config: gt.value,
               backgroundOpacity: 0
             }, {
-              "data-label": g(({ bar: o }) => [
-                C("div", Da, [
-                  C("span", za, R(o.name + (e.value.style.chart.tooltip.showValue || e.value.style.chart.tooltip.showPercentage ? ":" : "")), 1),
-                  e.value.style.chart.tooltip.showValue || e.value.style.chart.tooltip.showPercentage ? (n(), r("span", Ua, R(o.suffix), 1)) : p("", !0)
+              "data-label": d(({ bar: a }) => [
+                w("div", Da, [
+                  w("span", za, D(a.name + (e.value.style.chart.tooltip.showValue || e.value.style.chart.tooltip.showPercentage ? ":" : "")), 1),
+                  e.value.style.chart.tooltip.showValue || e.value.style.chart.tooltip.showPercentage ? (s(), r("span", Ua, D(a.suffix), 1)) : g("", !0)
                 ])
               ]),
               _: 1
             }, 8, ["dataset", "config"])
           ])),
-          f(t.$slots, "tooltip-after", E(M({ ...ie.value })), void 0, !0)
+          p(t.$slots, "tooltip-after", C($({ ...ie.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "fontSize", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      fe.value && e.value.userOptions.buttons.table ? (n(), P(Bt(Y.value.component), Et({ key: 7 }, Y.value.props, {
+      fe.value && e.value.userOptions.buttons.table ? (s(), x(Bt(Y.value.component), Et({ key: 7 }, Y.value.props, {
         ref_key: "tableUnit",
         ref: W,
         onClose: Ge
       }), je({
-        content: g(() => [
-          (n(), P(u(ut), {
+        content: d(() => [
+          (s(), x(u(ut), {
             key: `table_${$e.value}`,
             colNames: Q.value.colNames,
             head: Q.value.head,
@@ -920,11 +940,11 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
             withCloseButton: !e.value.table.useDialog,
             onClose: Ge
           }, {
-            th: g(({ th: o }) => [
-              pe(R(o.name), 1)
+            th: d(({ th: a }) => [
+              pe(D(a.name), 1)
             ]),
-            td: g(({ td: o }) => [
-              pe(R(o), 1)
+            td: d(({ td: a }) => [
+              pe(D(a), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -933,20 +953,20 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: g(() => [
-            pe(R(Y.value.title), 1)
+          fn: d(() => [
+            pe(D(Y.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: g(() => [
-            C("button", {
+          fn: d(() => [
+            w("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: a[1] || (a[1] = (o) => ce(e.value.userOptions.callbacks.csv))
+              onClick: o[1] || (o[1] = (a) => ce(e.value.userOptions.callbacks.csv))
             }, [
-              ee(u(st), {
+              ee(u(nt), {
                 name: "excel",
                 stroke: Y.value.props.color
               }, null, 8, ["stroke"])
@@ -954,11 +974,11 @@ const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "heigh
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : p("", !0),
-      u(Se) ? (n(), P(la, { key: 8 })) : p("", !0)
+      ]), 1040)) : g("", !0),
+      u(Se) ? (s(), x(la, { key: 8 })) : g("", !0)
     ], 46, ga));
   }
-}, ao = /* @__PURE__ */ ha(Ba, [["__scopeId", "data-v-e4b61e07"]]);
+}, ao = /* @__PURE__ */ ha(Ba, [["__scopeId", "data-v-6e33b912"]]);
 export {
   ao as default
 };