vue-data-ui 3.4.9 → 3.5.1

package/dist/{vue-ui-radar-DNI9WI2R.js → vue-ui-radar-B5Vkoz9M.js}

@@ -1,28 +1,28 @@
-import { defineAsyncComponent as $, computed as v, ref as c, toRefs as Lt, watch as ve, shallowRef as Ye, onMounted as Nt, onBeforeUnmount as Rt, createElementBlock as r, openBlock as n, unref as u, normalizeStyle as K, normalizeClass as H, createBlock as P, createCommentVNode as p, createElementVNode as k, createVNode as Z, createSlots as He, withCtx as h, renderSlot as f, normalizeProps as E, guardReactiveProps as M, Fragment as L, renderList as N, toDisplayString as R, Teleport as Dt, resolveDynamicComponent as zt, mergeProps as Vt, createTextVNode as de, nextTick as je } from "vue";
-import { c as Bt, t as Ut, b as Et, p as D, o as Mt, f as z, e as Gt, h as qe, k as Qe, x as Wt, d as G, a as pe, X as Xt, s as he, i as Yt, a8 as Je, g as Ke, P as Ht, Q as jt, G as qt, H as Qt } from "./lib-C_mNZmhD.js";
-import { t as Jt, u as Kt } from "./useResponsive-DfdjqQps.js";
-import { u as Zt, a as Ze } from "./useNestedProp-BjZe1Y85.js";
-import { u as ea, B as ta } from "./BaseScanner-BgWxam9d.js";
-import { u as aa } from "./usePrinter-DTzqpYKF.js";
-import { u as oa } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as la } from "./useChartAccessibility-9icAAmYg.js";
-import { u as sa } from "./useAutoSizeLabelsInsideViewbox-BhzfwQ_k.js";
-import na from "./img-BecE5qXd.js";
-import ra from "./Title-l36lOBMx.js";
-import ua from "./Legend-G6GMcdAc.js";
-import { t as ia } from "./themes-AUNCOb2G.js";
-import { u as ca } from "./useSvgExport-DrjCWun4.js";
-import { _ as va } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "height"], fa = ["id"], ya = ["stop-color"], ma = ["stop-color"], ba = { key: 1 }, ka = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Ca = { key: 0 }, wa = ["d", "stroke", "stroke-width"], _a = ["d", "stroke", "stroke-width"], $a = { key: 2 }, Ta = ["x", "y", "text-anchor", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], Aa = ["points", "stroke", "stroke-width"], Pa = ["points", "stroke", "stroke-width", "fill"], Sa = { key: 3 }, Oa = ["cx", "cy", "fill", "r", "stroke"], xa = {
+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-DjGXw6S9.js";
+import { u as oa, B as la } from "./BaseScanner-BgWxam9d.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-isbiM8i8.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"], 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"
-}, Fa = ["id"], Ia = ["onClick"], La = {
+}, Na = ["id"], Ra = ["onClick"], Va = {
   key: 0,
   style: { "max-width": "200px", margin: "0 auto" }
-}, Na = {
+}, Da = {
   class: "vue-ui-radar-tooltip-datalabel",
   style: { width: "100%" }
-}, Ra = { class: "vue-ui-radar-tooltip-datalabel-name" }, Da = { key: 0 }, za = {
+}, za = { class: "vue-ui-radar-tooltip-datalabel-name" }, Ua = { key: 0 }, Ba = {
   __name: "vue-ui-radar",
   props: {
     config: {
@@ -39,14 +39,14 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
     }
   },
   emits: ["selectLegend"],
-  setup(et, { expose: tt, emit: at }) {
-    const ot = $(() => import("./Tooltip-oWCO1HKy.js")), lt = $(() => import("./BaseIcon-BmMbm4d0.js")), st = $(() => import("./vue-ui-sparkbar-B44oER5n.js")), nt = $(() => import("./vue-ui-accordion-CZ0thhxa.js")), rt = $(() => import("./DataTable-BT7VF2ua.js")), ut = $(() => import("./PenAndPaper-DSvu9dwa.js")), it = $(() => import("./UserOptions-CGnQt6Fd.js")), ct = $(() => import("./PackageVersion-CTUqGqWV.js")), vt = $(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_radar: dt } = Zt(), S = et, ge = v(() => !!S.dataset && Object.keys(S.dataset).length), b = c(Bt()), ee = c(!1), te = c(""), fe = c(0), _ = c(null), ye = c(null), me = c(null), be = c(null), ke = c(null), Ce = c(0), we = c(0), _e = c(0), $e = c(!1), W = c(null), ae = c(null), e = c(le()), { loading: Te, FINAL_DATASET: O } = ea({
-      ...Lt(S),
+  setup(tt, { expose: at, emit: ot }) {
+    const lt = S(() => import("./Tooltip-oWCO1HKy.js")), nt = S(() => import("./BaseIcon-BmMbm4d0.js")), st = S(() => import("./vue-ui-sparkbar-Bvsi5DTT.js")), rt = S(() => import("./vue-ui-accordion-CqhVCfc2.js")), ut = S(() => import("./DataTable-BT7VF2ua.js")), it = S(() => import("./PenAndPaper-SZQIAgkg.js")), ct = S(() => import("./UserOptions-CGnQt6Fd.js")), dt = S(() => import("./PackageVersion-DQvyATVa.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: le,
+      prepareConfig: ne,
       callback: () => {
         Promise.resolve().then(async () => {
-          await je(), y.value.showTable = e.value.table.show;
+          await qe(), y.value.showTable = e.value.table.show;
         });
       },
       skeletonDataset: {
@@ -60,7 +60,7 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
           { name: "_", values: [0.6], target: 1 }
         ]
       },
-      skeletonConfig: Ut({
+      skeletonConfig: Gt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -87,62 +87,62 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
           }
         }
       })
-    }), { userOptionsVisible: oe, setUserOptionsVisibility: Ae, keepUserOptionState: Pe } = oa({ config: e.value }), { svgRef: j } = la({ config: e.value.style.chart.title });
-    function le() {
-      const t = Ze({
-        userConfig: S.config,
-        defaultConfig: dt
+    }), { 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: F.config,
+        defaultConfig: pt
       });
       return t.theme ? {
-        ...Ze({
-          userConfig: ia.vue_ui_radar[t.theme] || S.config,
+        ...et({
+          userConfig: va.vue_ui_radar[t.theme] || F.config,
           defaultConfig: t
         }),
-        customPalette: Et[t.theme] || D
+        customPalette: Wt[t.theme] || z
       } : t;
     }
-    ve(() => S.config, (t) => {
-      e.value = le(), oe.value = !e.value.userOptions.showOnChartHover, Se(), Ce.value += 1, we.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 = Ye(null), V = Ye(null), x = v(() => e.value.debug);
-    function Se() {
-      if (Mt(S.dataset) && z({
+    const A = He(null), B = He(null), L = v(() => e.value.debug);
+    function Oe() {
+      if (Xt(F.dataset) && U({
         componentName: "VueUiRadar",
         type: "dataset",
-        debug: x.value
+        debug: L.value
       }), e.value.responsive) {
-        const t = Jt(() => {
-          const { width: o, height: a } = Kt({
-            chart: _.value,
-            title: e.value.style.chart.title.text ? ye.value : null,
-            legend: e.value.style.chart.legend.show ? me.value : null,
-            source: be.value,
-            noTitle: ke.value
+        const t = ea(() => {
+          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: we.value
           });
           requestAnimationFrame(() => {
-            i.value.width = o, i.value.height = a, Ve();
+            i.value.width = o, i.value.height = a, Ue();
           });
         });
-        T.value && (V.value && T.value.unobserve(V.value), T.value.disconnect()), T.value = new ResizeObserver(t), V.value = _.value.parentNode, T.value.observe(V.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);
       }
-      Ve();
+      Ue();
     }
-    Nt(() => {
-      $e.value = !0, Se();
-    }), Rt(() => {
-      T.value && (V.value && T.value.unobserve(V.value), T.value.disconnect());
+    Dt(() => {
+      Te.value = !0, Oe();
+    }), zt(() => {
+      A.value && (B.value && A.value.unobserve(B.value), A.value.disconnect());
     });
-    const { isPrinting: Oe, isImaging: xe, generatePdf: Fe, generateImage: Ie } = aa({
+    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
-    }), pt = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), Le = v(() => Gt(e.value.customPalette)), y = c({
+    }), ht = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ne = v(() => Yt(e.value.customPalette)), y = c({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
-    }), ht = v(() => ({
+    }), gt = v(() => ({
       style: {
         backgroundColor: "#FFFFFF00",
         animation: {
@@ -163,158 +163,175 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
     })), i = c({
       height: 312,
       width: 512
-    }), gt = at, g = c([]), X = c(null), B = c(!1);
-    function Ne(t) {
-      B.value = !0, g.value.includes(t) ? (X.value = t, g.value = g.value.filter((o) => o !== t), setTimeout(() => {
-        B.value = !1, X.value = null;
-      }, 500)) : (g.value.push(t), setTimeout(() => {
-        B.value = !1;
-      }, 500)), gt("selectLegend", F.value.filter((o, a) => !g.value.includes(a)).map((o) => ({
+    }), ft = ot, f = c([]), X = c(null), E = c(!1);
+    function q(t) {
+      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 ft() {
-      return F.value.map((t) => ({
+    function yt() {
+      return O.value.map((t) => ({
         name: t.name,
         color: t.color,
         proportion: t.totalProportion
       }));
     }
-    function yt() {
-      const t = O.value;
+    function mt() {
+      const t = I.value;
       if ([null, void 0].includes(t?.categories)) {
-        z({
+        U({
           componentName: "VueUiRadar",
           type: "dataset",
-          debug: x.value
-        }), z({
+          debug: L.value
+        }), U({
           componentName: "VueUiRadar",
           type: "datasetAttribute",
           property: "categories ({ name: string; prefix?: string; suffix?: string}[])",
-          debug: x.value
+          debug: L.value
         });
         return;
       }
-      t.categories.length === 0 ? z({
+      t.categories.length === 0 ? U({
         componentName: "VueUiRadar",
         type: "datasetAttributeEmpty",
         property: "categories",
-        debug: x.value
+        debug: L.value
       }) : t.categories.forEach((o, a) => {
-        Ke({
+        Ze({
           datasetObject: o,
           requiredAttributes: ["name"]
         }).forEach((l) => {
-          z({
+          U({
             componentName: "VueUiRadar",
             type: "datasetAttribute",
             property: `category.${l} at index ${a}`,
             index: a,
-            debug: x.value
+            debug: L.value
           });
         });
-      }), [null, void 0].includes(t?.series) ? z({
+      }), [null, void 0].includes(t?.series) ? U({
         componentName: "VueUiRadar",
         type: "datasetAttribute",
         property: "series ({ name: string; values: number[]; color?: string; target: number}[])",
-        debug: x.value
+        debug: L.value
       }) : t.series.forEach((o, a) => {
-        Ke({
+        Ze({
           datasetObject: o,
           requiredAttributes: ["name", "values", "target"]
         }).forEach((l) => {
-          z({
+          U({
             componentName: "VueUiRadar",
             type: "datasetSerieAttribute",
             key: "series",
             property: l,
             index: a,
-            debug: x.value
+            debug: L.value
           });
         });
       });
     }
     ve(
-      () => O.value,
-      () => yt(),
+      () => I.value,
+      () => mt(),
       { deep: !0, immediate: !0 }
     );
-    const C = v(() => {
-      const t = Array.isArray(O.value?.categories) ? O.value.categories : [], o = Le.value ?? D;
+    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(a?.color) || o[l] || D[l % D.length],
+        color: Qe(a?.color) || o[l] || z[l % z.length],
         prefix: a?.prefix ?? "",
         suffix: a?.suffix ?? ""
       }));
-    }), w = v(() => O.value.series.map((t, o) => ({
+    }), k = v(() => I.value.series.map((t, o) => ({
       ...t,
-      color: qe(t.color) || Le.value[o] || D[o] || D[o % D.length],
+      color: Qe(t.color) || Ne.value[o] || z[o] || z[o % z.length],
       serieId: `radar_serie_${b.value}_${o}`,
-      formatter: t.formatter || null
-    }))), Re = v(() => Math.max(...w.value.flatMap((t) => t.values))), De = v(() => w.value.length), se = v(() => Math.min(i.value.width, i.value.height) / 3), ze = v(() => Qe({
+      formatter: t.formatter || null,
+      absoluteIndex: o
+    })));
+    function Re(t) {
+      if (!k.value.length)
+        return e.value.debug && console.warn("VueUiRadar - There are no series to show."), 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 o = Re(t);
+      o !== null && f.value.includes(o.absoluteIndex) && q(o.absoluteIndex);
+    }
+    function kt(t) {
+      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), 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: se.value,
       sides: De.value,
       rotation: 0
-    })), mt = v(() => {
+    })), wt = v(() => {
       const t = [];
       for (let o = 0; o < se.value; o += se.value / e.value.style.chart.layout.grid.graduations)
         t.push(o);
       return t;
-    }), A = v(() => ze.value.coordinates.map((t, o) => {
-      const a = w.value[o].values.map((l) => kt({
+    }), 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 / (w.value[o].target || Re.value)
+        proportion: l / (k.value[o].target || Ve.value)
       }));
       return {
         ...t,
-        ...w.value[o],
+        ...k.value[o],
         plots: a
       };
     }).map((t) => ({
       ...t,
-      labelX: ne(t).x,
-      labelY: ne(t).y,
-      labelAnchor: ne(t).anchor
+      labelX: re(t).x,
+      labelY: re(t).y,
+      labelAnchor: re(t).anchor
     })));
-    function ne({ x: t, y: 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 bt = v({
+    const Ct = v({
       get: () => e.value.style.chart.layout.labels.dataLabels.fontSize,
       set: (t) => t
-    }), { autoSizeLabels: Ve } = sa({
+    }), { autoSizeLabels: Ue } = ua({
       svgRef: j,
       fontSize: e.value.style.chart.layout.labels.dataLabels.fontSize,
       minFontSize: 6,
-      sizeRef: bt,
+      sizeRef: Ct,
       labelClass: ".vue-ui-radar-apex-label"
     });
-    function kt({ centerX: t, centerY: o, apexX: a, apexY: l, proportion: s }) {
+    function $t({ centerX: t, centerY: o, apexX: a, apexY: l, proportion: n }) {
       return {
-        x: t + (a - t) * s,
-        y: o + (l - o) * s
+        x: t + (a - t) * n,
+        y: o + (l - o) * n
       };
     }
-    const F = v(() => {
-      const t = w.value.map((o, a) => o.values.map((l) => l / (o.target || Re.value)));
-      return C.value.map((o, a) => {
-        const l = Wt(t.map((s) => s[a]).reduce((s, d) => s + d, 0) / w.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 {
           ...o,
+          absoluteIndex: a,
           totalProportion: l,
           shape: "circle",
-          opacity: g.value.includes(a) ? 0.5 : 1,
-          segregate: () => Ne(a),
-          isSegregated: g.value.includes(a),
+          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: "%",
@@ -322,21 +339,21 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
           })}`
         };
       });
-    }), Ct = v(() => ({
+    }), _t = v(() => ({
       cy: "radar-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), q = v(() => {
+    })), Q = v(() => {
       const t = [
         { name: e.value.translations.datapoint, color: "" },
         { name: e.value.translations.target, color: "" },
-        ...F.value
-      ], o = O.value.series.map((l) => [
+        ...O.value
+      ], o = I.value.series.map((l) => [
         l.name,
-        pe(
+        he(
           l.formatter,
           l.target,
           G({
@@ -346,12 +363,12 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
             r: e.value.table.td.roundingValue
           })
         ),
-        ...l.values.map((s, d) => `${pe(
+        ...l.values.map((n, h) => `${he(
           l.formatter,
-          s,
-          G({ p: C.value[d]?.prefix ?? "", v: s, s: C.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
         })})`)
@@ -369,99 +386,99 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
         breakpoint: e.value.table.responsiveBreakpoint
       };
       return { head: t, body: o, config: a, colNames: t };
-    }), Q = c(null), re = c([]), ue = c(null);
-    function wt(t, o) {
-      ee.value = !1, Q.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
+    }), J = c(null), ue = c([]), ie = c(null);
+    function Tt(t, o) {
+      te.value = !1, J.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
     }
-    function _t(t, o) {
+    function St(t, o) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
     }
-    function $t(t, o) {
+    function At(t, o) {
       e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o });
-      const a = C.value.slice();
-      re.value = [], Q.value = o, ee.value = !0, ue.value = {
+      const a = _.value.slice();
+      ue.value = [], J.value = o, te.value = !0, ie.value = {
         datapoint: t,
         seriesIndex: o,
         series: {
           categories: a,
-          datapoints: w.value,
-          radar: A.value
+          datapoints: k.value,
+          radar: P.value
         },
         config: e.value
       };
       const l = e.value.style.chart.tooltip.customFormat;
-      if (qt(l) && Qt(() => l({
+      if (Kt(l) && Zt(() => l({
         seriesIndex: o,
         datapoint: t,
-        series: { categories: a, datapoints: w.value, radar: A.value },
+        series: { categories: a, datapoints: k.value, radar: P.value },
         config: e.value
       }))) {
-        te.value = l({
+        ae.value = l({
           seriesIndex: o,
           datapoint: t,
-          series: { categories: a, datapoints: w.value, radar: A.value },
+          series: { categories: a, datapoints: k.value, radar: P.value },
           config: e.value
         });
         return;
       }
-      te.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 (!g.value.includes(s)) {
-          const d = a[s], m = t.values[s], We = isNaN(m / t.target) ? 0 : m / t.target * 100, U = pe(
+      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 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: C.value[s].prefix,
+              p: _.value[n].prefix,
               v: m,
-              s: C.value[s].suffix,
+              s: _.value[n].suffix,
               r: e.value.style.chart.tooltip.roundingValue
             }),
             { datapoint: t }
-          ), Xe = G({
-            v: We,
+          ), Ye = G({
+            v: Xe,
             s: "%",
             r: e.value.style.chart.tooltip.roundingPercentage
-          }), It = e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${U} (${Xe})` : e.value.style.chart.tooltip.showValue && !e.value.style.chart.tooltip.showPercentage ? U : !e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${Xe}` : "";
-          re.value.push({
-            name: d?.name ?? `#${s + 1}`,
-            value: t.values[s] / t.target * 100,
-            color: d?.color,
-            suffix: It,
+          }), 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: h?.name ?? `#${n + 1}`,
+            value: t.values[n] / t.target * 100,
+            color: h?.color,
+            suffix: Rt,
             prefix: "",
             rounding: e.value.style.chart.tooltip.roundingPercentage,
             formatter: t.formatter
           });
         }
     }
-    function ie(t = null) {
-      je(() => {
-        const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = [[""], [e.value.translations.target], ...F.value.flatMap((m) => [[m.name], ["%"]])], l = O.value.series.map((m, We) => [m.name, m.target, ...m.values.flatMap((U) => [
-          U,
-          isNaN(U / m.target) ? "" : U / m.target * 100
-        ])]), s = o.concat([a]).concat(l), d = Ht(s);
-        t ? t(d) : jt({ csvContent: d, title: e.value.style.chart.title.text || "vue-ui-radar" });
+    function ce(t = null) {
+      qe(() => {
+        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, fe.value += 1;
+      N.value = t, ye.value += 1;
     }
-    function Ue() {
+    function Ee() {
       y.value.showTable = !y.value.showTable;
     }
-    function Ee() {
+    function Me() {
       y.value.showTooltip = !y.value.showTooltip;
     }
-    const J = c(!1);
-    function ce() {
-      J.value = !J.value;
+    const K = c(!1);
+    function de() {
+      K.value = !K.value;
     }
-    async function Tt({ scale: t = 2 } = {}) {
-      if (!_.value) return;
-      const { width: o, height: a } = _.value.getBoundingClientRect(), l = o / a, { imageUri: s, base64: d } = await na({ domElement: _.value, base64: !0, img: !0, scale: t });
+    async function Pt({ scale: t = 2 } = {}) {
+      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: o,
         height: a,
@@ -471,15 +488,15 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
     const Y = v(() => {
       const t = e.value.table.useDialog && !e.value.table.show, o = y.value.showTable;
       return {
-        component: t ? vt : nt,
+        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,
@@ -501,68 +518,90 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
     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 Me() {
-      y.value.showTable = !1, ae.value && ae.value.setTableIconState(!1);
+    function Ge() {
+      y.value.showTable = !1, oe.value && oe.value.setTableIconState(!1);
     }
-    const At = v(() => F.value.map((t) => ({
+    const Ot = v(() => O.value.map((t) => ({
       ...t,
       name: t.display
-    }))), Pt = v(() => e.value.style.chart.backgroundColor), St = v(() => e.value.style.chart.legend), Ot = v(() => e.value.style.chart.title), { exportSvg: xt, getSvg: Ft } = ca({
+    }))), 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: Ot,
-      legend: St,
-      legendItems: At,
-      backgroundColor: Pt
+      title: It,
+      legend: Ft,
+      legendItems: Ot,
+      backgroundColor: xt
     });
-    async function Ge({ isCb: t }) {
+    async function We({ isCb: t }) {
       if (t) {
-        const { blob: o, url: a, text: l, dataUrl: s } = await Ft();
-        e.value.userOptions.callbacks.svg({ blob: o, url: a, 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
-        xt();
+        Lt();
     }
-    return tt({
-      getData: ft,
-      getImage: Tt,
-      generatePdf: Fe,
-      generateCsv: ie,
-      generateImage: Ie,
-      generateSvg: Ge,
-      toggleTable: Ue,
-      toggleTooltip: Ee,
-      toggleAnnotator: ce,
+    return at({
+      getData: yt,
+      getImage: Pt,
+      generatePdf: Ie,
+      generateCsv: ce,
+      generateImage: Le,
+      generateSvg: We,
+      hideSeries: kt,
+      showSeries: bt,
+      toggleTable: Ee,
+      toggleTooltip: Me,
+      toggleAnnotator: de,
       toggleFullscreen: Be
-    }), (t, o) => (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: K(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      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: o[2] || (o[2] = () => u(Ae)(!0)),
       onMouseleave: o[3] || (o[3] = () => u(Ae)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (n(), P(u(ut), {
+      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: J.value,
-        onClose: ce
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
-      pt.value ? (n(), r("div", {
+        active: K.value,
+        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: ke,
+        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: ye,
+        ref: me,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (n(), P(ra, {
+        (s(), x(ca, {
           key: `title_${Ce.value}`,
           config: {
             title: {
@@ -575,18 +614,18 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : p("", !0),
-      k("div", {
+      ], 512)) : g("", !0),
+      w("div", {
         id: `legend-top-${b.value}`
-      }, null, 8, pa),
-      e.value.userOptions.show && ge.value && (u(Pe) || u(oe)) ? (n(), P(u(it), {
+      }, null, 8, fa),
+      e.value.userOptions.show && fe.value && (u(Pe) || u(le)) ? (s(), x(u(ct), {
         ref_key: "userOptionsRef",
-        ref: ae,
-        key: `user_options_${fe.value}`,
+        ref: oe,
+        key: `user_options_${ye.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: u(xe),
-        isPrinting: u(Oe),
+        isImaging: u(Fe),
+        isPrinting: u(xe),
         uid: b.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -595,102 +634,102 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["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: J.value,
+        isAnnotation: K.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
         onToggleFullscreen: Be,
-        onGeneratePdf: u(Fe),
-        onGenerateCsv: ie,
-        onGenerateImage: u(Ie),
-        onGenerateSvg: Ge,
-        onToggleTable: Ue,
-        onToggleTooltip: Ee,
-        onToggleAnnotator: ce,
-        style: K({
-          visibility: u(Pe) ? u(oe) ? "visible" : "hidden" : "visible"
+        onGeneratePdf: u(Ie),
+        onGenerateCsv: ce,
+        onGenerateImage: u(Le),
+        onGenerateSvg: We,
+        onToggleTable: Ee,
+        onToggleTooltip: Me,
+        onToggleAnnotator: de,
+        style: Z({
+          visibility: u(Pe) ? u(le) ? "visible" : "hidden" : "visible"
         })
-      }, He({ _: 2 }, [
+      }, je({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: h(({ isOpen: a, color: l }) => [
-            f(t.$slots, "menuIcon", E(M({ isOpen: a, 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: h(() => [
-            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: h(() => [
-            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: h(() => [
-            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: h(() => [
-            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: h(() => [
-            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: h(() => [
-            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: h(({ toggleFullscreen: a, isFullscreen: l }) => [
-            f(t.$slots, "optionFullscreen", E(M({ toggleFullscreen: a, 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: h(({ toggleAnnotator: a, isAnnotator: l }) => [
-            f(t.$slots, "optionAnnotator", E(M({ toggleAnnotator: a, 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(Xt),
-        class: H({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
+        xmlns: u(jt),
+        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: K(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+        style: Z(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        Z(u(ct)),
-        t.$slots["chart-background"] ? (n(), r("foreignObject", {
+        ee(u(dt)),
+        t.$slots["chart-background"] ? (s(), r("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -700,10 +739,10 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
             pointerEvents: "none"
           }
         }, [
-          f(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, ga)) : p("", !0),
-        k("defs", null, [
-          (n(!0), r(L, null, N(C.value, (a, 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%",
@@ -711,28 +750,28 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
             fy: "50%",
             id: `radar_gradient_${b.value}_${l}`
           }, [
-            k("stop", {
+            w("stop", {
               offset: "0%",
-              "stop-color": u(he)(u(Yt)(a.color, 0.05), e.value.style.chart.layout.dataPolygon.opacity)
-            }, null, 8, ya),
-            k("stop", {
+              "stop-color": u(ge)(u(qt)(a.color, 0.05), e.value.style.chart.layout.dataPolygon.opacity)
+            }, null, 8, ka),
+            w("stop", {
               offset: "100%",
-              "stop-color": u(he)(a.color, e.value.style.chart.layout.dataPolygon.opacity)
-            }, null, 8, ma)
-          ], 8, fa))), 256))
+              "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", ba, [
-          (n(!0), r(L, null, N(A.value, (a) => (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: a.x,
             y2: a.y,
             stroke: e.value.style.chart.layout.grid.stroke,
             "stroke-width": e.value.style.chart.layout.grid.strokeWidth
-          }, null, 8, ka))), 256)),
-          e.value.style.chart.layout.grid.graduations > 0 ? (n(), r("g", Ca, [
-            (n(!0), r(L, null, N(mt.value, (a) => (n(), r("path", {
-              d: u(Qe)({
+          }, null, 8, $a))), 256)),
+          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: a,
                 sides: De.value,
@@ -741,109 +780,109 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
               fill: "none",
               stroke: e.value.style.chart.layout.grid.stroke,
               "stroke-width": e.value.style.chart.layout.grid.strokeWidth
-            }, null, 8, wa))), 256))
-          ])) : p("", !0)
-        ])) : p("", !0),
-        k("path", {
+            }, null, 8, Ta))), 256))
+          ])) : g("", !0)
+        ])) : g("", !0),
+        w("path", {
           d: ze.value.path,
           fill: "none",
           stroke: e.value.style.chart.layout.outerPolygon.stroke,
           "stroke-width": e.value.style.chart.layout.outerPolygon.strokeWidth,
           "stroke-linejoin": "round",
           "stroke-linecap": "round"
-        }, null, 8, _a),
-        e.value.style.chart.layout.labels.dataLabels.show ? (n(), r("g", $a, [
-          (n(!0), r(L, null, N(A.value, (a, l) => (n(), r("text", {
+        }, null, 8, Sa),
+        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: 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) => $t(a, l),
-            onMouseleave: (s) => wt(a, l),
-            onClick: (s) => _t(a, l)
-          }, R(a.name), 41, Ta))), 256))
-        ])) : p("", !0),
-        (n(!0), r(L, null, N(C.value, (a, l) => (n(), r("g", null, [
-          k("g", null, [
-            e.value.useCssAnimation || !e.value.useCssAnimation && !g.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(Je)(A.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": g.value.includes(l) && e.value.useCssAnimation, "animated-in": B.value && X.value === l && e.value.useCssAnimation })
-            }, null, 10, Aa)) : p("", !0),
-            e.value.useCssAnimation || !e.value.useCssAnimation && !g.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(Je)(A.value.map((s) => s.plots[l]), !1, !0),
+              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(he)(a.color, e.value.style.chart.layout.dataPolygon.opacity),
-              class: H({ "animated-out": g.value.includes(l) && e.value.useCssAnimation, "animated-in": B.value && X.value === l && e.value.useCssAnimation })
-            }, null, 10, Pa)) : 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", Sa, [
-          (n(!0), r(L, null, N(A.value, (a, l) => (n(), r("g", null, [
-            (n(!0), r(L, null, N(a.plots, (s, d) => (n(), r("circle", {
-              cx: s.x,
-              cy: s.y,
-              fill: g.value.includes(d) ? "transparent" : C.value[d] ? C.value[d].color : "transparent",
-              r: Q.value !== null && Q.value === l ? e.value.style.chart.layout.plots.radius * 1.6 : e.value.style.chart.layout.plots.radius,
-              stroke: g.value.includes(d) ? "transparent" : e.value.style.chart.backgroundColor,
+        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: f.value.includes(h) ? "transparent" : e.value.style.chart.backgroundColor,
               "stroke-width": 0.5,
-              class: H({ "animated-out": g.value.includes(d) && e.value.useCssAnimation, "animated-in": B.value && X.value === d && e.value.useCssAnimation })
-            }, null, 10, Oa))), 256))
+              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)
-      ], 14, ha)),
-      t.$slots.watermark ? (n(), r("div", xa, [
-        f(t.$slots, "watermark", E(M({ isPrinting: u(Oe) || u(xe) })), void 0, !0)
-      ])) : p("", !0),
-      k("div", {
+        ])) : g("", !0),
+        p(t.$slots, "svg", { svg: i.value }, void 0, !0)
+      ], 14, ya)),
+      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, Fa),
-      $e.value ? (n(), P(Dt, {
+      }, null, 8, Na),
+      Te.value ? (s(), x(Ut, {
         key: 5,
         to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
       }, [
-        k("div", {
+        w("div", {
           ref_key: "chartLegend",
-          ref: me
+          ref: be
         }, [
-          e.value.style.chart.legend.show ? (n(), P(ua, {
+          e.value.style.chart.legend.show ? (s(), x(da, {
             key: `legend_${_e.value}`,
-            legendSet: F.value,
-            config: Ct.value,
-            onClickMarker: o[0] || (o[0] = ({ i: a }) => Ne(a))
+            legendSet: O.value,
+            config: _t.value,
+            onClickMarker: o[0] || (o[0] = ({ i: a }) => q(a))
           }, {
-            item: h(({ legend: a, index: l }) => [
-              u(Te) ? p("", !0) : (n(), r("div", {
+            item: d(({ legend: a, index: l }) => [
+              u(Se) ? g("", !0) : (s(), r("div", {
                 key: 0,
-                onClick: (s) => a.segregate(),
-                style: K(`opacity:${g.value.includes(l) ? 0.5 : 1}`)
-              }, R(a.display), 13, Ia))
+                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: F.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: be,
+        ref: ke,
         dir: "auto"
       }, [
-        f(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : p("", !0),
-      Z(u(ot), {
-        show: y.value.showTooltip && ee.value,
+        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,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -853,59 +892,59 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["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,
-        content: te.value,
-        isFullscreen: I.value,
+        parent: T.value,
+        content: ae.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": h(() => [
-          f(t.$slots, "tooltip-before", E(M({ ...ue.value })), void 0, !0)
+        "tooltip-before": d(() => [
+          p(t.$slots, "tooltip-before", C($({ ...ie.value })), void 0, !0)
         ]),
-        "tooltip-after": h(() => [
-          ["function"].includes(typeof e.value.style.chart.tooltip.customFormat) ? p("", !0) : (n(), r("div", La, [
-            Z(u(st), {
-              dataset: re.value,
-              config: ht.value,
+        "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": h(({ bar: a }) => [
-                k("div", Na, [
-                  k("span", Ra, R(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 ? (n(), r("span", Da, R(a.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({ ...ue.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"]),
-      ge.value && e.value.userOptions.buttons.table ? (n(), P(zt(Y.value.component), Vt({ 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: Me
-      }), He({
-        content: h(() => [
-          (n(), P(u(rt), {
-            key: `table_${we.value}`,
-            colNames: q.value.colNames,
-            head: q.value.head,
-            body: q.value.body,
-            config: q.value.config,
+        onClose: Ge
+      }), je({
+        content: d(() => [
+          (s(), x(u(ut), {
+            key: `table_${$e.value}`,
+            colNames: Q.value.colNames,
+            head: Q.value.head,
+            body: Q.value.body,
+            config: Q.value.config,
             title: e.value.table.useDialog ? "" : Y.value.title,
             withCloseButton: !e.value.table.useDialog,
-            onClose: Me
+            onClose: Ge
           }, {
-            th: h(({ th: a }) => [
-              de(R(a.name), 1)
+            th: d(({ th: a }) => [
+              pe(D(a.name), 1)
             ]),
-            td: h(({ td: a }) => [
-              de(R(a), 1)
+            td: d(({ td: a }) => [
+              pe(D(a), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -914,20 +953,20 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: h(() => [
-            de(R(Y.value.title), 1)
+          fn: d(() => [
+            pe(D(Y.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: h(() => [
-            k("button", {
+          fn: d(() => [
+            w("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: o[1] || (o[1] = (a) => ie(e.value.userOptions.callbacks.csv))
+              onClick: o[1] || (o[1] = (a) => ce(e.value.userOptions.callbacks.csv))
             }, [
-              Z(u(lt), {
+              ee(u(nt), {
                 name: "excel",
                 stroke: Y.value.props.color
               }, null, 8, ["stroke"])
@@ -935,11 +974,11 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : p("", !0),
-      u(Te) ? (n(), P(ta, { key: 8 })) : p("", !0)
-    ], 46, da));
+      ]), 1040)) : g("", !0),
+      u(Se) ? (s(), x(la, { key: 8 })) : g("", !0)
+    ], 46, ga));
   }
-}, Za = /* @__PURE__ */ va(za, [["__scopeId", "data-v-5ffe4c34"]]);
+}, ao = /* @__PURE__ */ ha(Ba, [["__scopeId", "data-v-6e33b912"]]);
 export {
-  Za as default
+  ao as default
 };