vue-data-ui 3.0.23 → 3.1.0

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

@@ -0,0 +1,858 @@
+import { defineAsyncComponent as $, computed as v, ref as c, toRefs as Ct, watch as Me, shallowRef as Ee, onMounted as wt, onBeforeUnmount as $t, createElementBlock as u, openBlock as n, unref as r, normalizeStyle as J, normalizeClass as X, createBlock as P, createCommentVNode as d, createElementVNode as _, createVNode as K, createSlots as Ue, withCtx as h, renderSlot as g, normalizeProps as B, guardReactiveProps as M, Fragment as S, renderList as I, toDisplayString as E, Teleport as _t, resolveDynamicComponent as Tt, mergeProps as At, createTextVNode as ce, nextTick as Ve } from "vue";
+import { u as Pt, c as xt, t as Ft, a as Ot, p as N, b as St, o as It, f as U, d as Nt, g as We, e as Ge, R as Xe, h as Lt, k as Ye, i as Y, X as Rt, s as ve, x as zt, S as He, v as Dt, w as Bt, y as Mt, z as Et } from "./index-CDQbCd41.js";
+import { t as Ut, u as Vt } from "./useResponsive-DfdjqQps.js";
+import { u as Wt, B as Gt } from "./BaseScanner-BgWxam9d.js";
+import { u as Xt } from "./usePrinter-Bnl1YeUU.js";
+import { u as je } from "./useNestedProp-BPEHGiYX.js";
+import { u as Yt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Ht } from "./useChartAccessibility-9icAAmYg.js";
+import { u as jt } from "./useAutoSizeLabelsInsideViewbox-Bky5KGFZ.js";
+import qt from "./img-JOqdlnUs.js";
+import Jt from "./Title-Dq2_Z9kR.js";
+import Kt from "./Legend-2-dC7DVb.js";
+import { _ as Qt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Zt = ["id"], ea = ["id"], ta = ["xmlns", "viewBox"], aa = ["width", "height"], oa = ["id"], la = ["stop-color"], na = ["stop-color"], sa = { key: 1 }, ra = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], ua = { key: 0 }, ia = ["d", "stroke", "stroke-width"], ca = ["d", "stroke", "stroke-width"], va = { key: 2 }, da = ["x", "y", "text-anchor", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], pa = ["points", "stroke", "stroke-width"], ha = ["points", "stroke", "stroke-width", "fill"], ga = { key: 3 }, fa = ["cx", "cy", "fill", "r", "stroke"], ya = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, ma = ["id"], ba = ["onClick"], ka = {
+  key: 0,
+  style: { "max-width": "200px", margin: "0 auto" }
+}, Ca = {
+  __name: "vue-ui-radar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["selectLegend"],
+  setup(qe, { expose: Je, emit: Ke }) {
+    const Qe = $(() => import("./Tooltip-Y219DXZO.js")), Ze = $(() => import("./BaseIcon-DHtro8us.js")), et = $(() => import("./vue-ui-sparkbar-V3eJ0w0t.js")), tt = $(() => import("./vue-ui-accordion-Bf_LHFFX.js")), at = $(() => import("./DataTable-DJjA2_wf.js")), ot = $(() => import("./PenAndPaper-B7QEDgx4.js")), lt = $(() => import("./UserOptions-BuGfCdAY.js")), nt = $(() => import("./PackageVersion-DU12WH3O.js")), st = $(() => import("./BaseDraggableDialog-O7900pGp.js")), { vue_ui_radar: rt } = Pt(), x = qe, de = v(() => !!x.dataset && Object.keys(x.dataset).length), b = c(xt()), ut = c(null), Q = c(!1), Z = c(""), pe = c(0), C = c(null), he = c(null), ge = c(null), fe = c(null), ye = c(null), me = c(0), be = c(0), ke = c(0), Ce = c(!1), V = c(null), e = c(ae()), { loading: we, FINAL_DATASET: w } = Wt({
+      ...Ct(x),
+      FINAL_CONFIG: e,
+      prepareConfig: ae,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Ve(), f.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: Ft({
+        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: ee, setUserOptionsVisibility: $e, keepUserOptionState: _e } = Yt({ config: e.value }), { svgRef: te } = Ht({ config: e.value.style.chart.title });
+    function ae() {
+      const t = je({
+        userConfig: x.config,
+        defaultConfig: rt
+      });
+      return t.theme ? {
+        ...je({
+          userConfig: St.vue_ui_radar[t.theme] || x.config,
+          defaultConfig: t
+        }),
+        customPalette: Ot[t.theme] || N
+      } : t;
+    }
+    Me(() => x.config, (t) => {
+      e.value = ae(), ee.value = !e.value.userOptions.showOnChartHover, Te(), me.value += 1, be.value += 1, ke.value += 1, f.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, f.value.showTable = e.value.table.show, f.value.showTooltip = e.value.style.chart.tooltip ? e.value.style.chart.tooltip.show : !1;
+    }, { deep: !0 });
+    const T = Ee(null), L = Ee(null), R = v(() => e.value.debug);
+    function Te() {
+      if (It(x.dataset) && U({
+        componentName: "VueUiRadar",
+        type: "dataset",
+        debug: R.value
+      }), e.value.responsive) {
+        const t = Ut(() => {
+          const { width: a, height: o } = Vt({
+            chart: C.value,
+            title: e.value.style.chart.title.text ? he.value : null,
+            legend: e.value.style.chart.legend.show ? ge.value : null,
+            source: fe.value,
+            noTitle: ye.value
+          });
+          requestAnimationFrame(() => {
+            i.value.width = a, i.value.height = o, Re();
+          });
+        });
+        T.value && (L.value && T.value.unobserve(L.value), T.value.disconnect()), T.value = new ResizeObserver(t), L.value = C.value.parentNode, T.value.observe(L.value);
+      }
+      Re();
+    }
+    wt(() => {
+      Ce.value = !0, Te();
+    }), $t(() => {
+      T.value && (L.value && T.value.unobserve(L.value), T.value.disconnect());
+    });
+    const { isPrinting: Ae, isImaging: Pe, generatePdf: xe, generateImage: Fe } = Xt({
+      elementId: `vue-ui-radar_${b.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-radar",
+      options: e.value.userOptions.print
+    }), it = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), Oe = v(() => Nt(e.value.customPalette)), f = c({
+      dataLabels: {
+        show: e.value.style.chart.layout.labels.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    }), ct = 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
+    }), vt = Ke, p = c([]), W = c(null), z = c(!1);
+    function Se(t) {
+      z.value = !0, p.value.includes(t) ? (W.value = t, p.value = p.value.filter((a) => a !== t), setTimeout(() => {
+        z.value = !1, W.value = null;
+      }, 500)) : (p.value.push(t), setTimeout(() => {
+        z.value = !1;
+      }, 500)), vt("selectLegend", D.value.filter((a, o) => !p.value.includes(o)).map((a) => ({
+        name: a.name,
+        color: a.color,
+        proportion: a.totalProportion
+      })));
+    }
+    function dt() {
+      return D.value.map((t) => ({
+        name: t.name,
+        color: t.color,
+        proportion: t.totalProportion
+      }));
+    }
+    const y = v(() => [null, void 0].includes(w.value.categories) ? (U({
+      componentName: "VueUiRadar",
+      type: "datasetAttribute",
+      property: "categories ({ name: string; prefix?: string; suffix?: string}[])",
+      debug: R.value
+    }), []) : (w.value.categories.length === 0 ? U({
+      componentName: "VueUiRadar",
+      type: "datasetAttributeEmpty",
+      property: "categories",
+      debug: R.value
+    }) : w.value.categories.forEach((t, a) => {
+      We({
+        datasetObject: t,
+        requiredAttributes: ["name"]
+      }).forEach((o) => {
+        U({
+          componentName: "VueUiRadar",
+          type: "datasetAttribute",
+          property: `category.${o} at index ${a}`,
+          index: a,
+          debug: R.value
+        });
+      });
+    }), [null, void 0].includes(w.value.series) ? U({
+      componentName: "VueUiRadar",
+      type: "datasetAttribute",
+      property: "series ({ name: string; values: number[]; color?: string; target: number}[])",
+      debug: R.value
+    }) : w.value.series.forEach((t, a) => {
+      We({
+        datasetObject: t,
+        requiredAttributes: ["name", "values", "target"]
+      }).forEach((o) => {
+        U({
+          componentName: "VueUiRadar",
+          type: "datasetSerieAttribute",
+          key: "series",
+          property: o,
+          index: a,
+          debug: R.value
+        });
+      });
+    }), w.value.categories.map((t, a) => ({
+      name: t.name,
+      categoryId: `radar_category_${b.value}_${a}`,
+      color: Ge(t.color) || Oe.value[a] || N[a] || N[a % N.length],
+      prefix: t.prefix ?? "",
+      suffix: t.suffix ?? ""
+    })))), k = v(() => w.value.series.map((t, a) => ({
+      ...t,
+      color: Ge(t.color) || Oe.value[a] || N[a] || N[a % N.length],
+      serieId: `radar_serie_${b.value}_${a}`,
+      formatter: t.formatter || null
+    }))), Ie = v(() => Math.max(...k.value.flatMap((t) => t.values))), Ne = v(() => k.value.length), oe = v(() => Math.min(i.value.width, i.value.height) / 3), Le = v(() => Xe({
+      plot: { x: i.value.width / 2, y: i.value.height / 2 },
+      radius: oe.value,
+      sides: Ne.value,
+      rotation: 0
+    })), pt = v(() => {
+      const t = [];
+      for (let a = 0; a < oe.value; a += oe.value / e.value.style.chart.layout.grid.graduations)
+        t.push(a);
+      return t;
+    }), A = v(() => Le.value.coordinates.map((t, a) => {
+      const o = k.value[a].values.map((l) => gt({
+        centerX: i.value.width / 2,
+        centerY: i.value.height / 2,
+        apexX: t.x,
+        apexY: t.y,
+        proportion: l / (k.value[a].target || Ie.value)
+      }));
+      return {
+        ...t,
+        ...k.value[a],
+        plots: o
+      };
+    }).map((t) => ({
+      ...t,
+      labelX: le(t).x,
+      labelY: le(t).y,
+      labelAnchor: le(t).anchor
+    })));
+    function le({ 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 ht = v({
+      get: () => e.value.style.chart.layout.labels.dataLabels.fontSize,
+      set: (t) => t
+    }), { autoSizeLabels: Re } = jt({
+      svgRef: te,
+      fontSize: e.value.style.chart.layout.labels.dataLabels.fontSize,
+      minFontSize: 6,
+      sizeRef: ht,
+      labelClass: ".vue-ui-radar-apex-label"
+    });
+    function gt({ centerX: t, centerY: a, apexX: o, apexY: l, proportion: s }) {
+      return {
+        x: t + (o - t) * s,
+        y: a + (l - a) * s
+      };
+    }
+    const D = v(() => {
+      const t = k.value.map((a, o) => a.values.map((l) => l / (a.target || Ie.value)));
+      return y.value.map((a, o) => ({
+        ...a,
+        totalProportion: Lt(t.map((l) => l[o]).reduce((l, s) => l + s, 0) / k.value.length),
+        shape: "circle",
+        opacity: p.value.includes(o) ? 0.5 : 1,
+        segregate: () => Se(o),
+        isSegregated: p.value.includes(o)
+      }));
+    }), ft = 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" : ""
+    })), H = v(() => {
+      const t = [
+        { name: e.value.translations.datapoint, color: "" },
+        { name: e.value.translations.target, color: "" },
+        ...D.value
+      ], a = w.value.series.map((l) => [
+        l.name,
+        Ye(
+          l.formatter,
+          l.target,
+          Y({
+            p: l.prefix,
+            v: l.target,
+            s: l.suffix,
+            r: e.value.table.td.roundingValue
+          })
+        ),
+        ...l.values.map((s, m) => `${Ye(
+          l.formatter,
+          s,
+          Y({ p: y.value[m].prefix, v: s, s: y.value[m].suffix, r: e.value.table.td.roundingValue })
+        )} (${isNaN(s / l.target) ? "" : Y({
+          v: s / l.target * 100,
+          s: "%",
+          r: e.value.table.td.roundingPercentage
+        })})`)
+      ]), o = {
+        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: a, config: o, colNames: t };
+    }), j = c(null), ne = c([]), se = c(null);
+    function yt(t, a) {
+      Q.value = !1, j.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
+    }
+    function mt(t, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
+    }
+    function bt(t, a) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), ne.value = [], j.value = a, Q.value = !0;
+      let o = "";
+      se.value = {
+        datapoint: t,
+        seriesIndex: a,
+        series: {
+          categories: y.value,
+          datapoints: k.value,
+          radar: A.value
+        },
+        config: e.value
+      };
+      const l = e.value.style.chart.tooltip.customFormat;
+      if (Mt(l) && Et(() => l({
+        seriesIndex: a,
+        datapoint: t,
+        series: { categories: y.value, datapoints: k.value, radar: A.value },
+        config: e.value
+      })))
+        Z.value = l({
+          seriesIndex: a,
+          datapoint: t,
+          series: { categories: y.value, datapoints: k.value, radar: A.value },
+          config: e.value
+        });
+      else {
+        o += `<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)
+          p.value.includes(s) || ne.value.push({
+            name: y.value[s].name,
+            value: t.values[s] / t.target * 100,
+            color: y.value[s].color,
+            suffix: "%)",
+            prefix: `${Y({ p: y.value[s].prefix ?? "", v: t.values[s], s: y.value[s].suffix ?? "", r: e.value.style.chart.tooltip.roundingValue })} (`,
+            rounding: e.value.style.chart.tooltip.roundingPercentage,
+            formatter: t.formatter
+          });
+        Z.value = o;
+      }
+    }
+    function re(t = null) {
+      Ve(() => {
+        const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = [[""], [e.value.translations.target], ...D.value.flatMap((O) => [[O.name], ["%"]])], l = w.value.series.map((O, wa) => [O.name, O.target, ...O.values.flatMap((ie) => [
+          ie,
+          isNaN(ie / O.target) ? "" : ie / O.target * 100
+        ])]), s = a.concat([o]).concat(l), m = Dt(s);
+        t ? t(m) : Bt({ csvContent: m, title: e.value.style.chart.title.text || "vue-ui-radar" });
+      });
+    }
+    const F = c(!1);
+    function ze(t) {
+      F.value = t, pe.value += 1;
+    }
+    function De() {
+      f.value.showTable = !f.value.showTable;
+    }
+    function Be() {
+      f.value.showTooltip = !f.value.showTooltip;
+    }
+    const q = c(!1);
+    function ue() {
+      q.value = !q.value;
+    }
+    async function kt({ scale: t = 2 } = {}) {
+      if (!C.value) return;
+      const { width: a, height: o } = C.value.getBoundingClientRect(), l = a / o, { imageUri: s, base64: m } = await qt({ domElement: C.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: s,
+        base64: m,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: o,
+        aspectRatio: l
+      };
+    }
+    const G = v(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = f.value.showTable;
+      return {
+        component: t ? st : tt,
+        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: F.value,
+          fullscreenParent: C.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            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
+            }
+          }
+        }
+      };
+    });
+    return Me(() => f.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && V.value ? V.value.open() : "close" in V.value && V.value.close());
+    }), Je({
+      getData: dt,
+      getImage: kt,
+      generatePdf: xe,
+      generateCsv: re,
+      generateImage: Fe,
+      toggleTable: De,
+      toggleTooltip: Be,
+      toggleAnnotator: ue,
+      toggleFullscreen: ze
+    }), (t, a) => (n(), u("div", {
+      class: X(`vue-ui-radar ${F.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref_key: "radarChart",
+      ref: C,
+      id: `vue-ui-radar_${b.value}`,
+      style: J(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      onMouseenter: a[4] || (a[4] = () => r($e)(!0)),
+      onMouseleave: a[5] || (a[5] = () => r($e)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (n(), P(r(ot), {
+        key: 0,
+        svgRef: r(te),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: q.value,
+        onClose: ue
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : d("", !0),
+      it.value ? (n(), u("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: ye,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : d("", !0),
+      e.value.style.chart.title.text ? (n(), u("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: he,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (n(), P(Jt, {
+          key: `title_${me.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)) : d("", !0),
+      _("div", {
+        id: `legend-top-${b.value}`
+      }, null, 8, ea),
+      e.value.userOptions.show && de.value && (r(_e) || r(ee)) ? (n(), P(r(lt), {
+        ref_key: "details",
+        ref: ut,
+        key: `user_options_${pe.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isImaging: r(Pe),
+        isPrinting: r(Ae),
+        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,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: F.value,
+        isTooltip: f.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: C.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: q.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: ze,
+        onGeneratePdf: r(xe),
+        onGenerateCsv: re,
+        onGenerateImage: r(Fe),
+        onToggleTable: De,
+        onToggleTooltip: Be,
+        onToggleAnnotator: ue,
+        style: J({
+          visibility: r(_e) ? r(ee) ? "visible" : "hidden" : "visible"
+        })
+      }, Ue({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: h(({ isOpen: o, color: l }) => [
+            g(t.$slots, "menuIcon", B(M({ isOpen: o, color: l })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: h(() => [
+            g(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: h(() => [
+            g(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: h(() => [
+            g(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: h(() => [
+            g(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: h(() => [
+            g(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: h(({ toggleFullscreen: o, isFullscreen: l }) => [
+            g(t.$slots, "optionFullscreen", B(M({ toggleFullscreen: o, isFullscreen: l })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: h(({ toggleAnnotator: o, isAnnotator: l }) => [
+            g(t.$slots, "optionAnnotator", B(M({ toggleAnnotator: o, isAnnotator: l })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : d("", !0),
+      (n(), u("svg", {
+        ref_key: "svgRef",
+        ref: te,
+        xmlns: r(Rt),
+        class: X({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value }),
+        viewBox: `0 0 ${i.value.width <= 0 ? 10 : i.value.width} ${i.value.height <= 0 ? 10 : i.value.height}`,
+        style: J(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        K(r(nt)),
+        t.$slots["chart-background"] ? (n(), u("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"
+          }
+        }, [
+          g(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, aa)) : d("", !0),
+        _("defs", null, [
+          (n(!0), u(S, null, I(y.value, (o, l) => (n(), u("radialGradient", {
+            cx: "50%",
+            cy: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%",
+            id: `radar_gradient_${b.value}_${l}`
+          }, [
+            _("stop", {
+              offset: "0%",
+              "stop-color": r(ve)(r(zt)(o.color, 0.05), e.value.style.chart.layout.dataPolygon.opacity)
+            }, null, 8, la),
+            _("stop", {
+              offset: "100%",
+              "stop-color": r(ve)(o.color, e.value.style.chart.layout.dataPolygon.opacity)
+            }, null, 8, na)
+          ], 8, oa))), 256))
+        ]),
+        e.value.style.chart.layout.grid.show ? (n(), u("g", sa, [
+          (n(!0), u(S, null, I(A.value, (o) => (n(), u("line", {
+            x1: i.value.width / 2,
+            y1: i.value.height / 2,
+            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, ra))), 256)),
+          e.value.style.chart.layout.grid.graduations > 0 ? (n(), u("g", ua, [
+            (n(!0), u(S, null, I(pt.value, (o) => (n(), u("path", {
+              d: r(Xe)({
+                plot: { x: i.value.width / 2, y: i.value.height / 2 },
+                radius: o,
+                sides: Ne.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, ia))), 256))
+          ])) : d("", !0)
+        ])) : d("", !0),
+        _("path", {
+          d: Le.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, ca),
+        e.value.style.chart.layout.labels.dataLabels.show ? (n(), u("g", va, [
+          (n(!0), u(S, null, I(A.value, (o, l) => (n(), u("text", {
+            class: "vue-ui-radar-apex-label",
+            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) => bt(o, l),
+            onMouseleave: (s) => yt(o, l),
+            onClick: (s) => mt(o, l)
+          }, E(o.name), 41, da))), 256))
+        ])) : d("", !0),
+        (n(!0), u(S, null, I(y.value, (o, l) => (n(), u("g", null, [
+          _("g", null, [
+            e.value.useCssAnimation || !e.value.useCssAnimation && !p.value.includes(l) ? (n(), u("polygon", {
+              key: 0,
+              points: r(He)(A.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: X({ "animated-out": p.value.includes(l) && e.value.useCssAnimation, "animated-in": z.value && W.value === l && e.value.useCssAnimation })
+            }, null, 10, pa)) : d("", !0),
+            e.value.useCssAnimation || !e.value.useCssAnimation && !p.value.includes(l) ? (n(), u("polygon", {
+              key: 1,
+              points: r(He)(A.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})` : r(ve)(o.color, e.value.style.chart.layout.dataPolygon.opacity),
+              class: X({ "animated-out": p.value.includes(l) && e.value.useCssAnimation, "animated-in": z.value && W.value === l && e.value.useCssAnimation })
+            }, null, 10, ha)) : d("", !0)
+          ])
+        ]))), 256)),
+        e.value.style.chart.layout.plots.show ? (n(), u("g", ga, [
+          (n(!0), u(S, null, I(A.value, (o, l) => (n(), u("g", null, [
+            (n(!0), u(S, null, I(o.plots, (s, m) => (n(), u("circle", {
+              cx: s.x,
+              cy: s.y,
+              fill: p.value.includes(m) ? "transparent" : y.value[m] ? y.value[m].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: p.value.includes(m) ? "transparent" : e.value.style.chart.backgroundColor,
+              "stroke-width": 0.5,
+              class: X({ "animated-out": p.value.includes(m) && e.value.useCssAnimation, "animated-in": z.value && W.value === m && e.value.useCssAnimation })
+            }, null, 10, fa))), 256))
+          ]))), 256))
+        ])) : d("", !0),
+        g(t.$slots, "svg", { svg: i.value }, void 0, !0)
+      ], 14, ta)),
+      t.$slots.watermark ? (n(), u("div", ya, [
+        g(t.$slots, "watermark", B(M({ isPrinting: r(Ae) || r(Pe) })), void 0, !0)
+      ])) : d("", !0),
+      _("div", {
+        id: `legend-bottom-${b.value}`
+      }, null, 8, ma),
+      Ce.value ? (n(), P(_t, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
+      }, [
+        _("div", {
+          ref_key: "chartLegend",
+          ref: ge
+        }, [
+          e.value.style.chart.legend.show ? (n(), P(Kt, {
+            key: `legend_${ke.value}`,
+            legendSet: D.value,
+            config: ft.value,
+            onClickMarker: a[0] || (a[0] = ({ i: o }) => Se(o))
+          }, {
+            item: h(({ legend: o, index: l }) => [
+              r(we) ? d("", !0) : (n(), u("div", {
+                key: 0,
+                onClick: (s) => o.segregate(),
+                style: J(`opacity:${p.value.includes(l) ? 0.5 : 1}`)
+              }, E(o.name) + ": " + E(r(Y)({
+                v: o.totalProportion * 100,
+                s: "%",
+                r: e.value.style.chart.legend.roundingPercentage
+              })), 13, ba))
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : g(t.$slots, "legend", {
+            key: 1,
+            legend: D.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : d("", !0),
+      t.$slots.source ? (n(), u("div", {
+        key: 6,
+        ref_key: "source",
+        ref: fe,
+        dir: "auto"
+      }, [
+        g(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : d("", !0),
+      K(r(Qe), {
+        show: f.value.showTooltip && Q.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: C.value,
+        content: Z.value,
+        isFullscreen: F.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
+      }, {
+        "tooltip-before": h(() => [
+          g(t.$slots, "tooltip-before", B(M({ ...se.value })), void 0, !0)
+        ]),
+        "tooltip-after": h(() => [
+          ["function"].includes(typeof e.value.style.chart.tooltip.customFormat) ? d("", !0) : (n(), u("div", ka, [
+            K(r(et), {
+              dataset: ne.value,
+              config: ct.value,
+              backgroundOpacity: 0
+            }, null, 8, ["dataset", "config"])
+          ])),
+          g(t.$slots, "tooltip-after", B(M({ ...se.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "fontSize", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
+      de.value ? (n(), P(Tt(G.value.component), At({ key: 7 }, G.value.props, {
+        ref_key: "tableUnit",
+        ref: V,
+        onClose: a[3] || (a[3] = (o) => f.value.showTable = !1)
+      }), Ue({
+        content: h(() => [
+          (n(), P(r(at), {
+            key: `table_${be.value}`,
+            colNames: H.value.colNames,
+            head: H.value.head,
+            body: H.value.body,
+            config: H.value.config,
+            title: e.value.table.useDialog ? "" : G.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: a[2] || (a[2] = (o) => f.value.showTable = !1)
+          }, {
+            th: h(({ th: o }) => [
+              ce(E(o.name), 1)
+            ]),
+            td: h(({ td: o }) => [
+              ce(E(o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: h(() => [
+            ce(E(G.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: h(() => [
+            _("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[1] || (a[1] = (o) => re(e.value.userOptions.callbacks.csv))
+            }, [
+              K(r(Ze), {
+                name: "excel",
+                stroke: G.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : d("", !0),
+      r(we) ? (n(), P(Gt, { key: 8 })) : d("", !0)
+    ], 46, Zt));
+  }
+}, za = /* @__PURE__ */ Qt(Ca, [["__scopeId", "data-v-97b97b94"]]);
+export {
+  za as default
+};