vue-data-ui 3.4.9 → 3.5.0

package/dist/{vue-ui-radar-DNI9WI2R.js → vue-ui-radar-C5V4hhbW.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 _, 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 { t as ea, u as ta } from "./useResponsive-DfdjqQps.js";
+import { u as aa, a as et } from "./useNestedProp-BjZe1Y85.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 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 { 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 = {
   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 = _(() => 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),
       FINAL_CONFIG: e,
-      prepareConfig: le,
+      prepareConfig: se,
       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 } = na({ config: e.value }), { svgRef: j } = ra({ config: e.value.style.chart.title });
+    function se() {
+      const t = et({
+        userConfig: x.config,
+        defaultConfig: pt
       });
       return t.theme ? {
-        ...Ze({
-          userConfig: ia.vue_ui_radar[t.theme] || S.config,
+        ...et({
+          userConfig: da.vue_ui_radar[t.theme] || x.config,
           defaultConfig: t
         }),
-        customPalette: Et[t.theme] || D
+        customPalette: Wt[t.theme] || V
       } : 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;
+    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;
     }, { deep: !0 });
-    const T = Ye(null), V = Ye(null), x = v(() => e.value.debug);
-    function Se() {
-      if (Mt(S.dataset) && z({
+    const T = He(null), z = He(null), F = v(() => e.value.debug);
+    function xe() {
+      if (Xt(x.dataset) && D({
         componentName: "VueUiRadar",
         type: "dataset",
-        debug: x.value
+        debug: F.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: a, height: o } = ta({
+            chart: $.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
           });
           requestAnimationFrame(() => {
-            i.value.width = o, i.value.height = a, Ve();
+            i.value.width = a, i.value.height = o, 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);
+        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);
       }
-      Ve();
+      Ue();
     }
-    Nt(() => {
-      $e.value = !0, Se();
-    }), Rt(() => {
-      T.value && (V.value && T.value.unobserve(V.value), T.value.disconnect());
+    Dt(() => {
+      Te.value = !0, xe();
+    }), zt(() => {
+      T.value && (z.value && T.value.unobserve(z.value), T.value.disconnect());
     });
-    const { isPrinting: Oe, isImaging: xe, generatePdf: Fe, generateImage: Ie } = aa({
+    const { isPrinting: Oe, isImaging: Fe, generatePdf: Ie, generateImage: Le } = sa({
       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,180 +163,197 @@ 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) => ({
-        name: o.name,
-        color: o.color,
-        proportion: o.totalProportion
+    }), ft = ot, h = c([]), X = c(null), U = 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
       })));
     }
-    function ft() {
-      return F.value.map((t) => ({
+    function yt() {
+      return A.value.map((t) => ({
         name: t.name,
         color: t.color,
         proportion: t.totalProportion
       }));
     }
-    function yt() {
+    function mt() {
       const t = O.value;
       if ([null, void 0].includes(t?.categories)) {
-        z({
+        D({
           componentName: "VueUiRadar",
           type: "dataset",
-          debug: x.value
-        }), z({
+          debug: F.value
+        }), D({
           componentName: "VueUiRadar",
           type: "datasetAttribute",
           property: "categories ({ name: string; prefix?: string; suffix?: string}[])",
-          debug: x.value
+          debug: F.value
         });
         return;
       }
-      t.categories.length === 0 ? z({
+      t.categories.length === 0 ? D({
         componentName: "VueUiRadar",
         type: "datasetAttributeEmpty",
         property: "categories",
-        debug: x.value
-      }) : t.categories.forEach((o, a) => {
-        Ke({
-          datasetObject: o,
+        debug: F.value
+      }) : t.categories.forEach((a, o) => {
+        Ze({
+          datasetObject: a,
           requiredAttributes: ["name"]
         }).forEach((l) => {
-          z({
+          D({
             componentName: "VueUiRadar",
             type: "datasetAttribute",
-            property: `category.${l} at index ${a}`,
-            index: a,
-            debug: x.value
+            property: `category.${l} at index ${o}`,
+            index: o,
+            debug: F.value
           });
         });
-      }), [null, void 0].includes(t?.series) ? z({
+      }), [null, void 0].includes(t?.series) ? D({
         componentName: "VueUiRadar",
         type: "datasetAttribute",
         property: "series ({ name: string; values: number[]; color?: string; target: number}[])",
-        debug: x.value
-      }) : t.series.forEach((o, a) => {
-        Ke({
-          datasetObject: o,
+        debug: F.value
+      }) : t.series.forEach((a, o) => {
+        Ze({
+          datasetObject: a,
           requiredAttributes: ["name", "values", "target"]
         }).forEach((l) => {
-          z({
+          D({
             componentName: "VueUiRadar",
             type: "datasetSerieAttribute",
             key: "series",
             property: l,
-            index: a,
-            debug: x.value
+            index: o,
+            debug: F.value
           });
         });
       });
     }
-    ve(
+    de(
       () => O.value,
-      () => yt(),
+      () => mt(),
       { deep: !0, immediate: !0 }
     );
-    const C = v(() => {
-      const t = Array.isArray(O.value?.categories) ? O.value.categories : [], o = Le.value ?? D;
-      return t.map((a, l) => ({
-        name: a?.name ?? "",
+    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 ?? "",
         categoryId: `radar_category_${b.value}_${l}`,
-        color: qe(a?.color) || o[l] || D[l % D.length],
-        prefix: a?.prefix ?? "",
-        suffix: a?.suffix ?? ""
+        color: Qe(o?.color) || a[l] || V[l % V.length],
+        prefix: o?.prefix ?? "",
+        suffix: o?.suffix ?? ""
       }));
-    }), w = v(() => O.value.series.map((t, o) => ({
+    }), k = v(() => O.value.series.map((t, a) => ({
       ...t,
-      color: qe(t.color) || Le.value[o] || D[o] || D[o % D.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({
+      color: Qe(t.color) || Ne.value[a] || V[a] || V[a % V.length],
+      serieId: `radar_serie_${b.value}_${a}`,
+      formatter: t.formatter || null,
+      absoluteIndex: a
+    })));
+    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);
+    }
+    function bt(t) {
+      const a = Re(t);
+      a !== null && h.value.includes(a.absoluteIndex) && q(a.absoluteIndex);
+    }
+    function kt(t) {
+      const a = Re(t);
+      a !== null && (h.value.includes(a.absoluteIndex) || q(a.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({
       plot: { x: i.value.width / 2, y: i.value.height / 2 },
-      radius: se.value,
+      radius: ne.value,
       sides: De.value,
       rotation: 0
-    })), mt = v(() => {
+    })), Ct = v(() => {
       const t = [];
-      for (let o = 0; o < se.value; o += se.value / e.value.style.chart.layout.grid.graduations)
-        t.push(o);
+      for (let a = 0; a < ne.value; a += ne.value / e.value.style.chart.layout.grid.graduations)
+        t.push(a);
       return t;
-    }), A = v(() => ze.value.coordinates.map((t, o) => {
-      const a = w.value[o].values.map((l) => kt({
+    }), S = v(() => ze.value.coordinates.map((t, a) => {
+      const o = k.value[a].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[a].target || Ve.value)
       }));
       return {
         ...t,
-        ...w.value[o],
-        plots: a
+        ...k.value[a],
+        plots: o
       };
     }).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 }) {
-      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 };
+    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 };
     }
-    const bt = v({
+    const wt = 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: wt,
       labelClass: ".vue-ui-radar-apex-label"
     });
-    function kt({ centerX: t, centerY: o, apexX: a, apexY: l, proportion: s }) {
+    function $t({ centerX: t, centerY: a, apexX: o, apexY: l, proportion: s }) {
       return {
-        x: t + (a - t) * s,
-        y: o + (l - o) * s
+        x: t + (o - t) * s,
+        y: a + (l - a) * s
       };
     }
-    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 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);
         return {
-          ...o,
+          ...a,
+          absoluteIndex: o,
           totalProportion: l,
           shape: "circle",
-          opacity: g.value.includes(a) ? 0.5 : 1,
-          segregate: () => Ne(a),
-          isSegregated: g.value.includes(a),
-          display: `${o.name}: ${G({
+          opacity: h.value.includes(o) ? 0.5 : 1,
+          segregate: () => q(o),
+          isSegregated: h.value.includes(o),
+          display: `${a.name}: ${G({
             v: (l ?? 0) * 100,
             s: "%",
             r: e.value.style.chart.legend.roundingPercentage
           })}`
         };
       });
-    }), 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) => [
+        ...A.value
+      ], a = O.value.series.map((l) => [
         l.name,
-        pe(
+        he(
           l.formatter,
           l.target,
           G({
@@ -346,16 +363,16 @@ 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((s, d) => `${he(
           l.formatter,
           s,
-          G({ p: C.value[d]?.prefix ?? "", v: s, s: C.value[d]?.suffix ?? "", r: e.value.table.td.roundingValue })
+          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,
           s: "%",
           r: e.value.table.td.roundingPercentage
         })})`)
-      ]), a = {
+      ]), o = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
@@ -368,110 +385,110 @@ 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 });
+      return { head: t, body: a, config: o, 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 _t(t, o) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
+    function St(t, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
     }
-    function $t(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 = {
+    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 = {
         datapoint: t,
-        seriesIndex: o,
+        seriesIndex: a,
         series: {
-          categories: a,
-          datapoints: w.value,
-          radar: A.value
+          categories: o,
+          datapoints: k.value,
+          radar: S.value
         },
         config: e.value
       };
       const l = e.value.style.chart.tooltip.customFormat;
-      if (qt(l) && Qt(() => l({
-        seriesIndex: o,
+      if (Kt(l) && Zt(() => l({
+        seriesIndex: a,
         datapoint: t,
-        series: { categories: a, datapoints: w.value, radar: A.value },
+        series: { categories: o, datapoints: k.value, radar: S.value },
         config: e.value
       }))) {
-        te.value = l({
-          seriesIndex: o,
+        ae.value = l({
+          seriesIndex: a,
           datapoint: t,
-          series: { categories: a, datapoints: w.value, radar: A.value },
+          series: { categories: o, datapoints: k.value, radar: S.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>`;
+      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 (!g.value.includes(s)) {
-          const d = a[s], m = t.values[s], We = isNaN(m / t.target) ? 0 : m / t.target * 100, U = pe(
+        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(
             t.formatter,
             m,
             G({
-              p: C.value[s].prefix,
+              p: w.value[s].prefix,
               v: m,
-              s: C.value[s].suffix,
+              s: w.value[s].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({
+          }), 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}` : "";
+          ue.value.push({
             name: d?.name ?? `#${s + 1}`,
             value: t.values[s] / t.target * 100,
             color: d?.color,
-            suffix: It,
+            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 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 I = c(!1);
     function Be(t) {
-      I.value = t, fe.value += 1;
+      I.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 ve() {
+      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 (!$.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 });
       return {
         imageUri: s,
         base64: d,
         title: e.value.style.chart.title.text,
-        width: o,
-        height: a,
+        width: a,
+        height: o,
         aspectRatio: l
       };
     }
     const Y = v(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, o = y.value.showTable;
+      const t = e.value.table.useDialog && !e.value.table.show, a = y.value.showTable;
       return {
-        component: t ? vt : nt,
+        component: t ? dt : 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,
@@ -479,12 +496,12 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
           isFullscreen: I.value,
-          fullscreenParent: _.value,
+          fullscreenParent: $.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8)
         } : {
           hideDetails: !0,
           config: {
-            open: o,
+            open: a,
             maxHeight: 1e4,
             body: {
               backgroundColor: e.value.style.chart.backgroundColor,
@@ -498,72 +515,74 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
         }
       };
     });
-    ve(() => y.value.showTable, (t) => {
+    de(() => 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 xt = v(() => A.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({
+    }))), 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({
       svg: j,
-      title: Ot,
-      legend: St,
-      legendItems: At,
-      backgroundColor: Pt
+      title: It,
+      legend: Ft,
+      legendItems: xt,
+      backgroundColor: Ot
     });
-    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: a, url: o, text: l, dataUrl: s } = await Nt();
+        e.value.userOptions.callbacks.svg({ blob: a, url: o, text: l, dataUrl: s });
       } 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: ve,
       toggleFullscreen: Be
-    }), (t, o) => (n(), r("div", {
+    }), (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"}`),
       ref_key: "radarChart",
-      ref: _,
+      ref: $,
       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}`),
-      onMouseenter: o[2] || (o[2] = () => u(Ae)(!0)),
-      onMouseleave: o[3] || (o[3] = () => u(Ae)(!1))
+      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))
     }, [
-      e.value.userOptions.buttons.annotator ? (n(), P(u(ut), {
+      e.value.userOptions.buttons.annotator ? (n(), P(u(it), {
         key: 0,
         svgRef: u(j),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: J.value,
-        onClose: ce
+        active: K.value,
+        onClose: ve
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
-      pt.value ? (n(), r("div", {
+      ht.value ? (n(), r("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: ke,
+        ref: Ce,
         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", {
         key: 2,
         ref_key: "chartTitle",
-        ref: ye,
+        ref: me,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (n(), P(ra, {
-          key: `title_${Ce.value}`,
+        (n(), P(ca, {
+          key: `title_${we.value}`,
           config: {
             title: {
               cy: "radar-div-title",
@@ -576,16 +595,16 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
           }
         }, null, 8, ["config"]))
       ], 512)) : p("", !0),
-      k("div", {
+      C("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)) ? (n(), P(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),
+        isImaging: u(Fe),
         isPrinting: u(Oe),
         uid: b.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
@@ -598,85 +617,85 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
         isFullscreen: I.value,
         isTooltip: y.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: _.value,
+        chartElement: $.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: ve,
+        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: g(({ isOpen: o, color: l }) => [
+            f(t.$slots, "menuIcon", E(M({ isOpen: o, color: l })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: h(() => [
+          fn: g(() => [
             f(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: h(() => [
+          fn: g(() => [
             f(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: h(() => [
+          fn: g(() => [
             f(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: h(() => [
+          fn: g(() => [
             f(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionSvg ? {
           name: "optionSvg",
-          fn: h(() => [
+          fn: g(() => [
             f(t.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: h(() => [
+          fn: g(() => [
             f(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: g(({ toggleFullscreen: o, isFullscreen: l }) => [
+            f(t.$slots, "optionFullscreen", E(M({ toggleFullscreen: o, 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: g(({ toggleAnnotator: o, isAnnotator: l }) => [
+            f(t.$slots, "optionAnnotator", E(M({ toggleAnnotator: o, isAnnotator: l })), void 0, !0)
           ]),
           key: "8"
         } : void 0
@@ -684,12 +703,12 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
       (n(), r("svg", {
         ref_key: "svgRef",
         ref: j,
-        xmlns: u(Xt),
+        xmlns: u(jt),
         class: H({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.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)),
+        ee(u(vt)),
         t.$slots["chart-background"] ? (n(), r("foreignObject", {
           key: 0,
           x: 0,
@@ -701,9 +720,9 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
           }
         }, [
           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", {
+        ], 8, ma)) : p("", !0),
+        C("defs", null, [
+          (n(!0), r(L, null, N(w.value, (o, l) => (n(), r("radialGradient", {
             cx: "50%",
             cy: "50%",
             r: "50%",
@@ -711,139 +730,139 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
             fy: "50%",
             id: `radar_gradient_${b.value}_${l}`
           }, [
-            k("stop", {
+            C("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)(o.color, 0.05), e.value.style.chart.layout.dataPolygon.opacity)
+            }, null, 8, ka),
+            C("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)(o.color, e.value.style.chart.layout.dataPolygon.opacity)
+            }, null, 8, Ca)
+          ], 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 ? (n(), r("g", wa, [
+          (n(!0), r(L, null, N(S.value, (o) => (n(), r("line", {
             x1: i.value.width / 2,
             y1: i.value.height / 2,
-            x2: a.x,
-            y2: a.y,
+            x2: o.x,
+            y2: o.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 ? (n(), r("g", _a, [
+            (n(!0), r(L, null, N(Ct.value, (o) => (n(), r("path", {
+              d: u(Je)({
                 plot: { x: i.value.width / 2, y: i.value.height / 2 },
-                radius: a,
+                radius: o,
                 sides: De.value,
                 rotation: 0
               }).path,
               fill: "none",
               stroke: e.value.style.chart.layout.grid.stroke,
               "stroke-width": e.value.style.chart.layout.grid.strokeWidth
-            }, null, 8, wa))), 256))
+            }, null, 8, Ta))), 256))
           ])) : p("", !0)
         ])) : p("", !0),
-        k("path", {
+        C("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 ? (n(), r("g", Aa, [
+          (n(!0), r(L, null, N(S.value, (o, l) => (n(), r("text", {
             class: "vue-ui-radar-apex-label",
-            x: a.labelX,
-            y: a.labelY,
-            "text-anchor": a.labelAnchor,
+            x: o.labelX,
+            y: o.labelY,
+            "text-anchor": o.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))
+            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(C.value, (a, l) => (n(), r("g", null, [
-          k("g", null, [
-            e.value.useCssAnimation || !e.value.useCssAnimation && !g.value.includes(l) ? (n(), r("polygon", {
+        (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", {
               key: 0,
-              points: u(Je)(A.value.map((s) => s.plots[l]), !1, !0),
+              points: u(Ke)(S.value.map((s) => s.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": 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", {
               key: 1,
-              points: u(Je)(A.value.map((s) => s.plots[l]), !1, !0),
-              stroke: a.color,
+              points: u(Ke)(S.value.map((s) => s.plots[l]), !1, !0),
+              stroke: o.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)(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)
           ])
         ]))), 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", {
+        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: 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,
+              fill: h.value.includes(d) ? "transparent" : w.value[d] ? w.value[d].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-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": h.value.includes(d) && e.value.useCssAnimation, "animated-in": U.value && X.value === d && 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)
+      ], 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),
-      k("div", {
+      C("div", {
         id: `legend-bottom-${b.value}`
-      }, null, 8, Fa),
-      $e.value ? (n(), P(Dt, {
+      }, null, 8, Na),
+      Te.value ? (n(), P(Ut, {
         key: 5,
         to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
       }, [
-        k("div", {
+        C("div", {
           ref_key: "chartLegend",
-          ref: me
+          ref: be
         }, [
-          e.value.style.chart.legend.show ? (n(), P(ua, {
+          e.value.style.chart.legend.show ? (n(), P(va, {
             key: `legend_${_e.value}`,
-            legendSet: F.value,
-            config: Ct.value,
-            onClickMarker: o[0] || (o[0] = ({ i: a }) => Ne(a))
+            legendSet: A.value,
+            config: _t.value,
+            onClickMarker: a[0] || (a[0] = ({ i: o }) => q(o))
           }, {
-            item: h(({ legend: a, index: l }) => [
-              u(Te) ? p("", !0) : (n(), r("div", {
+            item: g(({ legend: o, index: l }) => [
+              u(Se) ? p("", !0) : (n(), r("div", {
                 key: 0,
-                onClick: (s) => a.segregate(),
-                style: K(`opacity:${g.value.includes(l) ? 0.5 : 1}`)
-              }, R(a.display), 13, Ia))
+                onClick: (s) => o.segregate(),
+                style: Z(`opacity:${h.value.includes(l) ? 0.5 : 1}`)
+              }, R(o.display), 13, Ra))
             ]),
             _: 1
           }, 8, ["legendSet", "config"])) : f(t.$slots, "legend", {
             key: 1,
-            legend: F.value
+            legend: A.value
           }, void 0, !0)
         ], 512)
       ], 8, ["to"])) : p("", !0),
       t.$slots.source ? (n(), 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,
+      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,8 +872,8 @@ 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,
+        parent: $.value,
+        content: ae.value,
         isFullscreen: I.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
         smooth: e.value.style.chart.tooltip.smooth,
@@ -862,50 +881,50 @@ const da = ["id"], pa = ["id"], ha = ["xmlns", "viewBox"], ga = ["width", "heigh
         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": g(() => [
+          f(t.$slots, "tooltip-before", E(M({ ...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": g(() => [
+          ["function"].includes(typeof e.value.style.chart.tooltip.customFormat) ? p("", !0) : (n(), r("div", Va, [
+            ee(u(nt), {
+              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": 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)
                 ])
               ]),
               _: 1
             }, 8, ["dataset", "config"])
           ])),
-          f(t.$slots, "tooltip-after", E(M({ ...ue.value })), void 0, !0)
+          f(t.$slots, "tooltip-after", E(M({ ...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 ? (n(), P(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: g(() => [
+          (n(), P(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: g(({ th: o }) => [
+              pe(R(o.name), 1)
             ]),
-            td: h(({ td: a }) => [
-              de(R(a), 1)
+            td: g(({ td: o }) => [
+              pe(R(o), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -914,20 +933,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: g(() => [
+            pe(R(Y.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: h(() => [
-            k("button", {
+          fn: g(() => [
+            C("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: o[1] || (o[1] = (a) => ie(e.value.userOptions.callbacks.csv))
+              onClick: a[1] || (a[1] = (o) => ce(e.value.userOptions.callbacks.csv))
             }, [
-              Z(u(lt), {
+              ee(u(st), {
                 name: "excel",
                 stroke: Y.value.props.color
               }, null, 8, ["stroke"])
@@ -936,10 +955,10 @@ 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));
+      u(Se) ? (n(), P(la, { key: 8 })) : p("", !0)
+    ], 46, ga));
   }
-}, Za = /* @__PURE__ */ va(za, [["__scopeId", "data-v-5ffe4c34"]]);
+}, ao = /* @__PURE__ */ ha(Ba, [["__scopeId", "data-v-e4b61e07"]]);
 export {
-  Za as default
+  ao as default
 };