vue-data-ui 3.5.2 → 3.7.0

package/dist/vue-ui-radar-BSfxyur3.js

@@ -1,984 +0,0 @@
-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-CReNavA0.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-BzH_LEA3.js";
-import da from "./Legend-G6GMcdAc.js";
-import { t as va } from "./themes-AUNCOb2G.js";
-import { u as pa } from "./useSvgExport-DrjCWun4.js";
-import { _ as ha } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ga = ["id"], fa = ["id"], ya = ["xmlns", "viewBox"], ma = ["width", "height"], ba = ["id"], ka = ["stop-color"], wa = ["stop-color"], Ca = { key: 1 }, $a = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], _a = { key: 0 }, Ta = ["d", "stroke", "stroke-width"], Sa = ["d", "stroke", "stroke-width"], Aa = { key: 2 }, Pa = ["x", "y", "text-anchor", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], Oa = ["points", "stroke", "stroke-width"], xa = ["points", "stroke", "stroke-width", "fill"], Fa = { key: 3 }, Ia = ["cx", "cy", "fill", "r", "stroke"], La = {
-  key: 4,
-  class: "vue-data-ui-watermark"
-}, Na = ["id"], Ra = ["onClick"], Va = {
-  key: 0,
-  style: { "max-width": "200px", margin: "0 auto" }
-}, Da = {
-  class: "vue-ui-radar-tooltip-datalabel",
-  style: { width: "100%" }
-}, za = { class: "vue-ui-radar-tooltip-datalabel-name" }, Ua = { key: 0 }, Ba = {
-  __name: "vue-ui-radar",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  emits: ["selectLegend"],
-  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-BDCocMLI.js")), rt = S(() => import("./vue-ui-accordion-BmFTVF1a.js")), ut = S(() => import("./DataTable-BT7VF2ua.js")), it = S(() => import("./PenAndPaper-SZQIAgkg.js")), ct = S(() => import("./UserOptions-CGnQt6Fd.js")), dt = S(() => import("./PackageVersion-Y7t79Jtq.js")), vt = S(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_radar: pt } = aa(), F = tt, fe = v(() => !!F.dataset && Object.keys(F.dataset).length), b = c(Mt()), te = c(!1), ae = c(""), ye = c(0), T = c(null), me = c(null), be = c(null), ke = c(null), we = c(null), Ce = c(0), $e = c(0), _e = c(0), Te = c(!1), W = c(null), oe = c(null), e = c(ne()), { loading: Se, FINAL_DATASET: I } = oa({
-      ...Vt(F),
-      FINAL_CONFIG: e,
-      prepareConfig: ne,
-      callback: () => {
-        Promise.resolve().then(async () => {
-          await qe(), y.value.showTable = e.value.table.show;
-        });
-      },
-      skeletonDataset: {
-        categories: [{ name: "_", color: "#6A6A6A" }],
-        series: [
-          { name: "_", values: [0.6], target: 1 },
-          { name: "_", values: [0.6], target: 1 },
-          { name: "_", values: [0.6], target: 1 },
-          { name: "_", values: [0.6], target: 1 },
-          { name: "_", values: [0.6], target: 1 },
-          { name: "_", values: [0.6], target: 1 }
-        ]
-      },
-      skeletonConfig: Gt({
-        defaultConfig: e.value,
-        userConfig: {
-          userOptions: { show: !1 },
-          table: { show: !1 },
-          useCssAnimation: !1,
-          style: {
-            chart: {
-              backgroundColor: "#99999930",
-              layout: {
-                grid: {
-                  stroke: "#6A6A6A90"
-                },
-                labels: {
-                  dataLabels: { show: !1 }
-                },
-                outerPolygon: {
-                  stroke: "#6A6A6A"
-                }
-              },
-              legend: {
-                backgroundColor: "transparent"
-              }
-            }
-          }
-        }
-      })
-    }), { 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 ? {
-        ...et({
-          userConfig: va.vue_ui_radar[t.theme] || F.config,
-          defaultConfig: t
-        }),
-        customPalette: Wt[t.theme] || z
-      } : t;
-    }
-    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 A = He(null), B = He(null), L = v(() => e.value.debug);
-    function Oe() {
-      if (Xt(F.dataset) && U({
-        componentName: "VueUiRadar",
-        type: "dataset",
-        debug: L.value
-      }), e.value.responsive) {
-        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, Ue();
-          });
-        });
-        A.value && (B.value && A.value.unobserve(B.value), A.value.disconnect()), A.value = new ResizeObserver(t), B.value = T.value.parentNode, A.value.observe(B.value);
-      }
-      Ue();
-    }
-    Dt(() => {
-      Te.value = !0, Oe();
-    }), zt(() => {
-      A.value && (B.value && A.value.unobserve(B.value), A.value.disconnect());
-    });
-    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
-    }), 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
-    }), gt = v(() => ({
-      style: {
-        backgroundColor: "#FFFFFF00",
-        animation: {
-          show: e.value.style.chart.tooltip.animation.show,
-          animationFrames: e.value.style.chart.tooltip.animation.animationFrames
-        },
-        labels: {
-          fontSize: e.value.style.chart.tooltip.fontSize,
-          name: {
-            color: e.value.style.chart.tooltip.color
-          }
-        },
-        gutter: {
-          backgroundColor: "#CCCCCC",
-          opacity: 30
-        }
-      }
-    })), i = c({
-      height: 312,
-      width: 512
-    }), 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 yt() {
-      return O.value.map((t) => ({
-        name: t.name,
-        color: t.color,
-        proportion: t.totalProportion
-      }));
-    }
-    function mt() {
-      const t = I.value;
-      if ([null, void 0].includes(t?.categories)) {
-        U({
-          componentName: "VueUiRadar",
-          type: "dataset",
-          debug: L.value
-        }), U({
-          componentName: "VueUiRadar",
-          type: "datasetAttribute",
-          property: "categories ({ name: string; prefix?: string; suffix?: string}[])",
-          debug: L.value
-        });
-        return;
-      }
-      t.categories.length === 0 ? U({
-        componentName: "VueUiRadar",
-        type: "datasetAttributeEmpty",
-        property: "categories",
-        debug: L.value
-      }) : t.categories.forEach((o, a) => {
-        Ze({
-          datasetObject: o,
-          requiredAttributes: ["name"]
-        }).forEach((l) => {
-          U({
-            componentName: "VueUiRadar",
-            type: "datasetAttribute",
-            property: `category.${l} at index ${a}`,
-            index: a,
-            debug: L.value
-          });
-        });
-      }), [null, void 0].includes(t?.series) ? U({
-        componentName: "VueUiRadar",
-        type: "datasetAttribute",
-        property: "series ({ name: string; values: number[]; color?: string; target: number}[])",
-        debug: L.value
-      }) : t.series.forEach((o, a) => {
-        Ze({
-          datasetObject: o,
-          requiredAttributes: ["name", "values", "target"]
-        }).forEach((l) => {
-          U({
-            componentName: "VueUiRadar",
-            type: "datasetSerieAttribute",
-            key: "series",
-            property: l,
-            index: a,
-            debug: L.value
-          });
-        });
-      });
-    }
-    ve(
-      () => I.value,
-      () => mt(),
-      { deep: !0, immediate: !0 }
-    );
-    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] || z[l % z.length],
-        prefix: a?.prefix ?? "",
-        suffix: a?.suffix ?? ""
-      }));
-    }), k = v(() => I.value.series.map((t, o) => ({
-      ...t,
-      color: Qe(t.color) || Ne.value[o] || z[o] || z[o % z.length],
-      serieId: `radar_serie_${b.value}_${o}`,
-      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
-    })), 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;
-    }), P = v(() => ze.value.coordinates.map((t, o) => {
-      const a = k.value[o].values.map((l) => $t({
-        centerX: i.value.width / 2,
-        centerY: i.value.height / 2,
-        apexX: t.x,
-        apexY: t.y,
-        proportion: l / (k.value[o].target || Ve.value)
-      }));
-      return {
-        ...t,
-        ...k.value[o],
-        plots: a
-      };
-    }).map((t) => ({
-      ...t,
-      labelX: re(t).x,
-      labelY: re(t).y,
-      labelAnchor: re(t).anchor
-    })));
-    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 Ct = v({
-      get: () => e.value.style.chart.layout.labels.dataLabels.fontSize,
-      set: (t) => t
-    }), { autoSizeLabels: Ue } = ua({
-      svgRef: j,
-      fontSize: e.value.style.chart.layout.labels.dataLabels.fontSize,
-      minFontSize: 6,
-      sizeRef: Ct,
-      labelClass: ".vue-ui-radar-apex-label"
-    });
-    function $t({ centerX: t, centerY: o, apexX: a, apexY: l, proportion: n }) {
-      return {
-        x: t + (a - t) * n,
-        y: o + (l - o) * n
-      };
-    }
-    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: f.value.includes(a) ? 0.5 : 1,
-          segregate: () => q(a),
-          isSegregated: f.value.includes(a),
-          display: `${o.name}: ${G({
-            v: (l ?? 0) * 100,
-            s: "%",
-            r: e.value.style.chart.legend.roundingPercentage
-          })}`
-        };
-      });
-    }), _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(() => {
-      const t = [
-        { name: e.value.translations.datapoint, color: "" },
-        { name: e.value.translations.target, color: "" },
-        ...O.value
-      ], o = I.value.series.map((l) => [
-        l.name,
-        he(
-          l.formatter,
-          l.target,
-          G({
-            p: l.prefix,
-            v: l.target,
-            s: l.suffix,
-            r: e.value.table.td.roundingValue
-          })
-        ),
-        ...l.values.map((n, h) => `${he(
-          l.formatter,
-          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
-        })})`)
-      ]), a = {
-        th: {
-          backgroundColor: e.value.table.th.backgroundColor,
-          color: e.value.table.th.color,
-          outline: e.value.table.th.outline
-        },
-        td: {
-          backgroundColor: e.value.table.td.backgroundColor,
-          color: e.value.table.td.color,
-          outline: e.value.table.td.outline
-        },
-        breakpoint: e.value.table.responsiveBreakpoint
-      };
-      return { head: t, body: o, config: a, colNames: t };
-    }), 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 St(t, o) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
-    }
-    function At(t, o) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o });
-      const a = _.value.slice();
-      ue.value = [], J.value = o, te.value = !0, ie.value = {
-        datapoint: t,
-        seriesIndex: o,
-        series: {
-          categories: a,
-          datapoints: k.value,
-          radar: P.value
-        },
-        config: e.value
-      };
-      const l = e.value.style.chart.tooltip.customFormat;
-      if (Kt(l) && Zt(() => l({
-        seriesIndex: o,
-        datapoint: t,
-        series: { categories: a, datapoints: k.value, radar: P.value },
-        config: e.value
-      }))) {
-        ae.value = l({
-          seriesIndex: o,
-          datapoint: t,
-          series: { categories: a, datapoints: k.value, radar: P.value },
-          config: e.value
-        });
-        return;
-      }
-      ae.value = `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`;
-      for (let 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: _.value[n].prefix,
-              v: m,
-              s: _.value[n].suffix,
-              r: e.value.style.chart.tooltip.roundingValue
-            }),
-            { datapoint: t }
-          ), Ye = G({
-            v: Xe,
-            s: "%",
-            r: e.value.style.chart.tooltip.roundingPercentage
-          }), 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 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 N = c(!1);
-    function Be(t) {
-      N.value = t, ye.value += 1;
-    }
-    function Ee() {
-      y.value.showTable = !y.value.showTable;
-    }
-    function Me() {
-      y.value.showTooltip = !y.value.showTooltip;
-    }
-    const K = c(!1);
-    function de() {
-      K.value = !K.value;
-    }
-    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: n,
-        base64: h,
-        title: e.value.style.chart.title.text,
-        width: o,
-        height: a,
-        aspectRatio: l
-      };
-    }
-    const Y = v(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, o = y.value.showTable;
-      return {
-        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: N.value,
-          fullscreenParent: T.value,
-          forcedWidth: Math.min(800, window.innerWidth * 0.8)
-        } : {
-          hideDetails: !0,
-          config: {
-            open: o,
-            maxHeight: 1e4,
-            body: {
-              backgroundColor: e.value.style.chart.backgroundColor,
-              color: e.value.style.chart.color
-            },
-            head: {
-              backgroundColor: e.value.style.chart.backgroundColor,
-              color: e.value.style.chart.color
-            }
-          }
-        }
-      };
-    });
-    ve(() => y.value.showTable, (t) => {
-      e.value.table.show || (t && e.value.table.useDialog && W.value ? W.value.open() : "close" in W.value && W.value.close());
-    });
-    function Ge() {
-      y.value.showTable = !1, oe.value && oe.value.setTableIconState(!1);
-    }
-    const Ot = v(() => O.value.map((t) => ({
-      ...t,
-      name: t.display
-    }))), xt = v(() => e.value.style.chart.backgroundColor), Ft = v(() => e.value.style.chart.legend), It = v(() => e.value.style.chart.title), { exportSvg: Lt, getSvg: Nt } = pa({
-      svg: j,
-      title: It,
-      legend: Ft,
-      legendItems: Ot,
-      backgroundColor: xt
-    });
-    async function We({ isCb: t }) {
-      if (t) {
-        const { blob: o, url: a, text: l, dataUrl: n } = await Nt();
-        e.value.userOptions.callbacks.svg({ blob: o, url: a, text: l, dataUrl: n });
-      } else
-        Lt();
-    }
-    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) => (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: T,
-      id: `vue-ui-radar_${b.value}`,
-      style: Z(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      onMouseenter: o[2] || (o[2] = () => u(Ae)(!0)),
-      onMouseleave: o[3] || (o[3] = () => u(Ae)(!1))
-    }, [
-      e.value.userOptions.buttons.annotator ? (s(), x(u(it), {
-        key: 0,
-        svgRef: u(j),
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        active: K.value,
-        onClose: 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: we,
-        class: "vue-data-ui-no-title-space",
-        style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : g("", !0),
-      e.value.style.chart.title.text ? (s(), r("div", {
-        key: 2,
-        ref_key: "chartTitle",
-        ref: me,
-        style: "width:100%;background:transparent;padding-bottom:12px"
-      }, [
-        (s(), x(ca, {
-          key: `title_${Ce.value}`,
-          config: {
-            title: {
-              cy: "radar-div-title",
-              ...e.value.style.chart.title
-            },
-            subtitle: {
-              cy: "radar-div-subtitle",
-              ...e.value.style.chart.title.subtitle
-            }
-          }
-        }, null, 8, ["config"]))
-      ], 512)) : g("", !0),
-      w("div", {
-        id: `legend-top-${b.value}`
-      }, null, 8, fa),
-      e.value.userOptions.show && fe.value && (u(Pe) || u(le)) ? (s(), x(u(ct), {
-        ref_key: "userOptionsRef",
-        ref: oe,
-        key: `user_options_${ye.value}`,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        isImaging: u(Fe),
-        isPrinting: u(xe),
-        uid: b.value,
-        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
-        hasPdf: e.value.userOptions.buttons.pdf,
-        hasImg: e.value.userOptions.buttons.img,
-        hasSvg: e.value.userOptions.buttons.svg,
-        hasXls: e.value.userOptions.buttons.csv,
-        hasTable: e.value.userOptions.buttons.table,
-        hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: N.value,
-        isTooltip: y.value.showTooltip,
-        titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: T.value,
-        position: e.value.userOptions.position,
-        hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: K.value,
-        callbacks: e.value.userOptions.callbacks,
-        printScale: e.value.userOptions.print.scale,
-        tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: Be,
-        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"
-        })
-      }, je({ _: 2 }, [
-        t.$slots.menuIcon ? {
-          name: "menuIcon",
-          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: d(() => [
-            p(t.$slots, "optionTooltip", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        t.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: d(() => [
-            p(t.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        t.$slots.optionCsv ? {
-          name: "optionCsv",
-          fn: d(() => [
-            p(t.$slots, "optionCsv", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        t.$slots.optionImg ? {
-          name: "optionImg",
-          fn: d(() => [
-            p(t.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        t.$slots.optionSvg ? {
-          name: "optionSvg",
-          fn: d(() => [
-            p(t.$slots, "optionSvg", {}, void 0, !0)
-          ]),
-          key: "5"
-        } : void 0,
-        t.$slots.optionTable ? {
-          name: "optionTable",
-          fn: d(() => [
-            p(t.$slots, "optionTable", {}, void 0, !0)
-          ]),
-          key: "6"
-        } : void 0,
-        t.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          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: 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"])) : g("", !0),
-      (s(), r("svg", {
-        ref_key: "svgRef",
-        ref: j,
-        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: Z(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
-      }, [
-        ee(u(dt)),
-        t.$slots["chart-background"] ? (s(), r("foreignObject", {
-          key: 0,
-          x: 0,
-          y: 0,
-          width: i.value.width <= 0 ? 10 : i.value.width,
-          height: i.value.height <= 0 ? 10 : i.value.height,
-          style: {
-            pointerEvents: "none"
-          }
-        }, [
-          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%",
-            fx: "50%",
-            fy: "50%",
-            id: `radar_gradient_${b.value}_${l}`
-          }, [
-            w("stop", {
-              offset: "0%",
-              "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(ge)(a.color, e.value.style.chart.layout.dataPolygon.opacity)
-            }, null, 8, wa)
-          ], 8, ba))), 256))
-        ]),
-        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, $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,
-                rotation: 0
-              }).path,
-              fill: "none",
-              stroke: e.value.style.chart.layout.grid.stroke,
-              "stroke-width": e.value.style.chart.layout.grid.strokeWidth
-            }, 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, 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: (n) => At(a, l),
-            onMouseleave: (n) => Tt(a, l),
-            onClick: (n) => St(a, l)
-          }, D(a.name), 41, Pa))), 256))
-        ])) : g("", !0),
-        (s(!0), r(R, null, V(_.value, (a, l) => (s(), r("g", null, [
-          w("g", null, [
-            e.value.useCssAnimation || !e.value.useCssAnimation && !f.value.includes(l) ? (s(), r("polygon", {
-              key: 0,
-              points: u(Ke)(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": f.value.includes(l) && e.value.useCssAnimation, "animated-in": E.value && X.value === l && e.value.useCssAnimation })
-            }, null, 10, Oa)) : g("", !0),
-            e.value.useCssAnimation || !e.value.useCssAnimation && !f.value.includes(l) ? (s(), r("polygon", {
-              key: 1,
-              points: u(Ke)(P.value.map((n) => n.plots[l]), !1, !0),
-              stroke: a.color,
-              "stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth,
-              fill: e.value.style.chart.layout.dataPolygon.transparent ? "transparent" : e.value.style.chart.layout.dataPolygon.useGradient ? `url(#radar_gradient_${b.value}_${l})` : u(ge)(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 ? (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": f.value.includes(h) && e.value.useCssAnimation, "animated-in": E.value && X.value === h && e.value.useCssAnimation })
-            }, null, 10, Ia))), 256))
-          ]))), 256))
-        ])) : 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, Na),
-      Te.value ? (s(), x(Ut, {
-        key: 5,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
-      }, [
-        w("div", {
-          ref_key: "chartLegend",
-          ref: be
-        }, [
-          e.value.style.chart.legend.show ? (s(), x(da, {
-            key: `legend_${_e.value}`,
-            legendSet: O.value,
-            config: _t.value,
-            onClickMarker: o[0] || (o[0] = ({ i: a }) => q(a))
-          }, {
-            item: d(({ legend: a, index: l }) => [
-              u(Se) ? g("", !0) : (s(), r("div", {
-                key: 0,
-                onClick: (n) => a.segregate(),
-                style: Z(`opacity:${f.value.includes(l) ? 0.5 : 1}`)
-              }, D(a.display), 13, Ra))
-            ]),
-            _: 1
-          }, 8, ["legendSet", "config"])) : p(t.$slots, "legend", {
-            key: 1,
-            legend: O.value
-          }, void 0, !0)
-        ], 512)
-      ], 8, ["to"])) : g("", !0),
-      t.$slots.source ? (s(), r("div", {
-        key: 6,
-        ref_key: "source",
-        ref: ke,
-        dir: "auto"
-      }, [
-        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,
-        borderColor: e.value.style.chart.tooltip.borderColor,
-        borderWidth: e.value.style.chart.tooltip.borderWidth,
-        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
-        fontSize: e.value.style.chart.tooltip.fontSize,
-        position: e.value.style.chart.tooltip.position,
-        offsetY: e.value.style.chart.tooltip.offsetY,
-        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": d(() => [
-          p(t.$slots, "tooltip-before", C($({ ...ie.value })), void 0, !0)
-        ]),
-        "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": 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"])
-          ])),
-          p(t.$slots, "tooltip-after", C($({ ...ie.value })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "fontSize", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      fe.value && e.value.userOptions.buttons.table ? (s(), x(Bt(Y.value.component), Et({ key: 7 }, Y.value.props, {
-        ref_key: "tableUnit",
-        ref: W,
-        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: Ge
-          }, {
-            th: d(({ th: a }) => [
-              pe(D(a.name), 1)
-            ]),
-            td: d(({ td: a }) => [
-              pe(D(a), 1)
-            ]),
-            _: 1
-          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
-        ]),
-        _: 2
-      }, [
-        e.value.table.useDialog ? {
-          name: "title",
-          fn: d(() => [
-            pe(D(Y.value.title), 1)
-          ]),
-          key: "0"
-        } : void 0,
-        e.value.table.useDialog ? {
-          name: "actions",
-          fn: d(() => [
-            w("button", {
-              tabindex: "0",
-              class: "vue-ui-user-options-button",
-              onClick: o[1] || (o[1] = (a) => ce(e.value.userOptions.callbacks.csv))
-            }, [
-              ee(u(nt), {
-                name: "excel",
-                stroke: Y.value.props.color
-              }, null, 8, ["stroke"])
-            ])
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1040)) : g("", !0),
-      u(Se) ? (s(), x(la, { key: 8 })) : g("", !0)
-    ], 46, ga));
-  }
-}, ao = /* @__PURE__ */ ha(Ba, [["__scopeId", "data-v-6e33b912"]]);
-export {
-  ao as default
-};