vue-data-ui 3.4.0 → 3.4.2

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

@@ -0,0 +1,938 @@
+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-BcBZIm6u.js";
+import { t as Jt, u as Kt } from "./useResponsive-DfdjqQps.js";
+import { u as Zt, a as Ze } from "./useNestedProp-B7CiTRDS.js";
+import { u as ea, B as ta } from "./BaseScanner-BgWxam9d.js";
+import { u as aa } from "./usePrinter-C1GiglOH.js";
+import { u as oa } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as la } from "./useChartAccessibility-9icAAmYg.js";
+import { u as sa } from "./useAutoSizeLabelsInsideViewbox-BHq4FD8x.js";
+import na from "./img-CFY3JivG.js";
+import ra from "./Title-CFmv95In.js";
+import ua from "./Legend-C8u37J42.js";
+import { t as ia } from "./themes-Dw-dDudK.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 }, xa = ["cx", "cy", "fill", "r", "stroke"], Oa = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, Fa = ["id"], Ia = ["onClick"], La = {
+  key: 0,
+  style: { "max-width": "200px", margin: "0 auto" }
+}, Na = {
+  class: "vue-ui-radar-tooltip-datalabel",
+  style: { width: "100%" }
+}, Ra = { class: "vue-ui-radar-tooltip-datalabel-name" }, Da = { key: 0 }, za = {
+  __name: "vue-ui-radar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["selectLegend"],
+  setup(et, { expose: tt, emit: at }) {
+    const ot = $(() => import("./Tooltip-Cs4v8OnI.js")), lt = $(() => import("./BaseIcon-B5KaGWWC.js")), st = $(() => import("./vue-ui-sparkbar-DOC0sinb.js")), nt = $(() => import("./vue-ui-accordion-BKkTS12x.js")), rt = $(() => import("./DataTable-DOx3zgih.js")), ut = $(() => import("./PenAndPaper-Dj2diYr0.js")), it = $(() => import("./UserOptions-C0YT60JN.js")), ct = $(() => import("./PackageVersion-C6RwvG8P.js")), vt = $(() => import("./BaseDraggableDialog-CbuLbfrc.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: x } = ea({
+      ...Lt(S),
+      FINAL_CONFIG: e,
+      prepareConfig: le,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await je(), 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: Ut({
+        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: 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
+      });
+      return t.theme ? {
+        ...Ze({
+          userConfig: ia.vue_ui_radar[t.theme] || S.config,
+          defaultConfig: t
+        }),
+        customPalette: Et[t.theme] || D
+      } : 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;
+    }, { deep: !0 });
+    const T = Ye(null), V = Ye(null), O = v(() => e.value.debug);
+    function Se() {
+      if (Mt(S.dataset) && z({
+        componentName: "VueUiRadar",
+        type: "dataset",
+        debug: O.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
+          });
+          requestAnimationFrame(() => {
+            i.value.width = o, i.value.height = a, Ve();
+          });
+        });
+        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);
+      }
+      Ve();
+    }
+    Nt(() => {
+      $e.value = !0, Se();
+    }), Rt(() => {
+      T.value && (V.value && T.value.unobserve(V.value), T.value.disconnect());
+    });
+    const { isPrinting: xe, isImaging: Oe, generatePdf: Fe, generateImage: Ie } = aa({
+      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({
+      dataLabels: {
+        show: e.value.style.chart.layout.labels.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    }), ht = 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
+    }), 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
+      })));
+    }
+    function ft() {
+      return F.value.map((t) => ({
+        name: t.name,
+        color: t.color,
+        proportion: t.totalProportion
+      }));
+    }
+    function yt() {
+      const t = x.value;
+      if ([null, void 0].includes(t?.categories)) {
+        z({
+          componentName: "VueUiRadar",
+          type: "dataset",
+          debug: O.value
+        }), z({
+          componentName: "VueUiRadar",
+          type: "datasetAttribute",
+          property: "categories ({ name: string; prefix?: string; suffix?: string}[])",
+          debug: O.value
+        });
+        return;
+      }
+      t.categories.length === 0 ? z({
+        componentName: "VueUiRadar",
+        type: "datasetAttributeEmpty",
+        property: "categories",
+        debug: O.value
+      }) : t.categories.forEach((o, a) => {
+        Ke({
+          datasetObject: o,
+          requiredAttributes: ["name"]
+        }).forEach((l) => {
+          z({
+            componentName: "VueUiRadar",
+            type: "datasetAttribute",
+            property: `category.${l} at index ${a}`,
+            index: a,
+            debug: O.value
+          });
+        });
+      }), [null, void 0].includes(t?.series) ? z({
+        componentName: "VueUiRadar",
+        type: "datasetAttribute",
+        property: "series ({ name: string; values: number[]; color?: string; target: number}[])",
+        debug: O.value
+      }) : t.series.forEach((o, a) => {
+        Ke({
+          datasetObject: o,
+          requiredAttributes: ["name", "values", "target"]
+        }).forEach((l) => {
+          z({
+            componentName: "VueUiRadar",
+            type: "datasetSerieAttribute",
+            key: "series",
+            property: l,
+            index: a,
+            debug: O.value
+          });
+        });
+      });
+    }
+    ve(
+      () => x.value,
+      () => yt(),
+      { deep: !0, immediate: !0 }
+    );
+    const C = v(() => {
+      const t = Array.isArray(x.value?.categories) ? x.value.categories : [], o = Le.value ?? D;
+      return t.map((a, l) => ({
+        name: a?.name ?? "",
+        categoryId: `radar_category_${b.value}_${l}`,
+        color: qe(a?.color) || o[l] || D[l % D.length],
+        prefix: a?.prefix ?? "",
+        suffix: a?.suffix ?? ""
+      }));
+    }), w = v(() => x.value.series.map((t, o) => ({
+      ...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({
+      plot: { x: i.value.width / 2, y: i.value.height / 2 },
+      radius: se.value,
+      sides: De.value,
+      rotation: 0
+    })), mt = v(() => {
+      const t = [];
+      for (let o = 0; o < se.value; o += se.value / e.value.style.chart.layout.grid.graduations)
+        t.push(o);
+      return t;
+    }), A = v(() => ze.value.coordinates.map((t, o) => {
+      const a = w.value[o].values.map((l) => kt({
+        centerX: i.value.width / 2,
+        centerY: i.value.height / 2,
+        apexX: t.x,
+        apexY: t.y,
+        proportion: l / (w.value[o].target || Re.value)
+      }));
+      return {
+        ...t,
+        ...w.value[o],
+        plots: a
+      };
+    }).map((t) => ({
+      ...t,
+      labelX: ne(t).x,
+      labelY: ne(t).y,
+      labelAnchor: ne(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 };
+    }
+    const bt = v({
+      get: () => e.value.style.chart.layout.labels.dataLabels.fontSize,
+      set: (t) => t
+    }), { autoSizeLabels: Ve } = sa({
+      svgRef: j,
+      fontSize: e.value.style.chart.layout.labels.dataLabels.fontSize,
+      minFontSize: 6,
+      sizeRef: bt,
+      labelClass: ".vue-ui-radar-apex-label"
+    });
+    function kt({ centerX: t, centerY: o, apexX: a, apexY: l, proportion: s }) {
+      return {
+        x: t + (a - t) * s,
+        y: o + (l - o) * 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);
+        return {
+          ...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({
+            v: (l ?? 0) * 100,
+            s: "%",
+            r: e.value.style.chart.legend.roundingPercentage
+          })}`
+        };
+      });
+    }), Ct = 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: "" },
+        ...F.value
+      ], o = x.value.series.map((l) => [
+        l.name,
+        pe(
+          l.formatter,
+          l.target,
+          G({
+            p: l.prefix,
+            v: l.target,
+            s: l.suffix,
+            r: e.value.table.td.roundingValue
+          })
+        ),
+        ...l.values.map((s, d) => `${pe(
+          l.formatter,
+          s,
+          G({ p: C.value[d]?.prefix ?? "", v: s, s: C.value[d]?.suffix ?? "", r: e.value.table.td.roundingValue })
+        )} (${isNaN(s / l.target) ? "" : G({
+          v: s / l.target * 100,
+          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 };
+    }), 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 });
+    }
+    function _t(t, o) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
+    }
+    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 = {
+        datapoint: t,
+        seriesIndex: o,
+        series: {
+          categories: a,
+          datapoints: w.value,
+          radar: A.value
+        },
+        config: e.value
+      };
+      const l = e.value.style.chart.tooltip.customFormat;
+      if (qt(l) && Qt(() => l({
+        seriesIndex: o,
+        datapoint: t,
+        series: { categories: a, datapoints: w.value, radar: A.value },
+        config: e.value
+      }))) {
+        te.value = l({
+          seriesIndex: o,
+          datapoint: t,
+          series: { categories: a, datapoints: w.value, radar: A.value },
+          config: e.value
+        });
+        return;
+      }
+      te.value = `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`;
+      for (let s = 0; s < t.values.length; s += 1)
+        if (!g.value.includes(s)) {
+          const d = a[s], m = t.values[s], We = isNaN(m / t.target) ? 0 : m / t.target * 100, U = pe(
+            t.formatter,
+            m,
+            G({
+              p: C.value[s].prefix,
+              v: m,
+              s: C.value[s].suffix,
+              r: e.value.style.chart.tooltip.roundingValue
+            }),
+            { datapoint: t }
+          ), Xe = G({
+            v: We,
+            s: "%",
+            r: e.value.style.chart.tooltip.roundingPercentage
+          }), It = e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${U} (${Xe})` : e.value.style.chart.tooltip.showValue && !e.value.style.chart.tooltip.showPercentage ? U : !e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${Xe}` : "";
+          re.value.push({
+            name: d?.name ?? `#${s + 1}`,
+            value: t.values[s] / t.target * 100,
+            color: d?.color,
+            suffix: It,
+            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 = x.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" });
+      });
+    }
+    const I = c(!1);
+    function Be(t) {
+      I.value = t, fe.value += 1;
+    }
+    function Ue() {
+      y.value.showTable = !y.value.showTable;
+    }
+    function Ee() {
+      y.value.showTooltip = !y.value.showTooltip;
+    }
+    const J = c(!1);
+    function ce() {
+      J.value = !J.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 });
+      return {
+        imageUri: s,
+        base64: d,
+        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 : nt,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: t ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: I.value,
+          fullscreenParent: _.value,
+          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 Me() {
+      y.value.showTable = !1, ae.value && ae.value.setTableIconState(!1);
+    }
+    const At = v(() => F.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), Pt = v(() => e.value.style.chart.backgroundColor), St = v(() => e.value.style.chart.legend), xt = v(() => e.value.style.chart.title), { exportSvg: Ot, getSvg: Ft } = ca({
+      svg: j,
+      title: xt,
+      legend: St,
+      legendItems: At,
+      backgroundColor: Pt
+    });
+    async function Ge({ 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 });
+      } else
+        Ot();
+    }
+    return tt({
+      getData: ft,
+      getImage: Tt,
+      generatePdf: Fe,
+      generateCsv: ie,
+      generateImage: Ie,
+      generateSvg: Ge,
+      toggleTable: Ue,
+      toggleTooltip: Ee,
+      toggleAnnotator: ce,
+      toggleFullscreen: Be
+    }), (t, o) => (n(), r("div", {
+      class: H(`vue-data-ui-component vue-ui-radar ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref_key: "radarChart",
+      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))
+    }, [
+      e.value.userOptions.buttons.annotator ? (n(), P(u(ut), {
+        key: 0,
+        svgRef: u(j),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: J.value,
+        onClose: ce
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
+      pt.value ? (n(), r("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: ke,
+        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,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (n(), P(ra, {
+          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)) : p("", !0),
+      k("div", {
+        id: `legend-top-${b.value}`
+      }, null, 8, pa),
+      e.value.userOptions.show && ge.value && (u(Pe) || u(oe)) ? (n(), P(u(it), {
+        ref_key: "userOptionsRef",
+        ref: ae,
+        key: `user_options_${fe.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isImaging: u(Oe),
+        isPrinting: u(xe),
+        uid: b.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        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: I.value,
+        isTooltip: y.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: _.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: J.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"
+        })
+      }, He({ _: 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)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: h(() => [
+            f(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: h(() => [
+            f(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: h(() => [
+            f(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: h(() => [
+            f(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: h(() => [
+            f(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : 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)
+          ]),
+          key: "6"
+        } : 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)
+          ]),
+          key: "7"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
+      (n(), r("svg", {
+        ref_key: "svgRef",
+        ref: j,
+        xmlns: u(Xt),
+        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}`)
+      }, [
+        Z(u(ct)),
+        t.$slots["chart-background"] ? (n(), 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"
+          }
+        }, [
+          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", {
+            cx: "50%",
+            cy: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%",
+            id: `radar_gradient_${b.value}_${l}`
+          }, [
+            k("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", {
+              offset: "100%",
+              "stop-color": u(he)(a.color, e.value.style.chart.layout.dataPolygon.opacity)
+            }, null, 8, ma)
+          ], 8, fa))), 256))
+        ]),
+        e.value.style.chart.layout.grid.show ? (n(), r("g", ba, [
+          (n(!0), r(L, null, N(A.value, (a) => (n(), r("line", {
+            x1: i.value.width / 2,
+            y1: i.value.height / 2,
+            x2: a.x,
+            y2: a.y,
+            stroke: e.value.style.chart.layout.grid.stroke,
+            "stroke-width": e.value.style.chart.layout.grid.strokeWidth
+          }, null, 8, ka))), 256)),
+          e.value.style.chart.layout.grid.graduations > 0 ? (n(), r("g", Ca, [
+            (n(!0), r(L, null, N(mt.value, (a) => (n(), r("path", {
+              d: u(Qe)({
+                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, wa))), 256))
+          ])) : p("", !0)
+        ])) : p("", !0),
+        k("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", {
+            class: "vue-ui-radar-apex-label",
+            x: a.labelX,
+            y: a.labelY,
+            "text-anchor": a.labelAnchor,
+            "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+            fill: e.value.style.chart.layout.labels.dataLabels.color,
+            onMouseenter: (s) => $t(a, l),
+            onMouseleave: (s) => wt(a, l),
+            onClick: (s) => _t(a, l)
+          }, R(a.name), 41, Ta))), 256))
+        ])) : p("", !0),
+        (n(!0), r(L, null, N(C.value, (a, l) => (n(), r("g", null, [
+          k("g", null, [
+            e.value.useCssAnimation || !e.value.useCssAnimation && !g.value.includes(l) ? (n(), r("polygon", {
+              key: 0,
+              points: u(Je)(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: 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", {
+              key: 1,
+              points: u(Je)(A.value.map((s) => s.plots[l]), !1, !0),
+              stroke: a.color,
+              "stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth,
+              fill: e.value.style.chart.layout.dataPolygon.transparent ? "transparent" : e.value.style.chart.layout.dataPolygon.useGradient ? `url(#radar_gradient_${b.value}_${l})` : u(he)(a.color, e.value.style.chart.layout.dataPolygon.opacity),
+              class: H({ "animated-out": g.value.includes(l) && e.value.useCssAnimation, "animated-in": B.value && X.value === l && e.value.useCssAnimation })
+            }, null, 10, Pa)) : p("", !0)
+          ])
+        ]))), 256)),
+        e.value.style.chart.layout.plots.show ? (n(), r("g", Sa, [
+          (n(!0), r(L, null, N(A.value, (a, l) => (n(), r("g", null, [
+            (n(!0), r(L, null, N(a.plots, (s, d) => (n(), r("circle", {
+              cx: s.x,
+              cy: s.y,
+              fill: g.value.includes(d) ? "transparent" : C.value[d] ? C.value[d].color : "transparent",
+              r: Q.value !== null && Q.value === l ? e.value.style.chart.layout.plots.radius * 1.6 : e.value.style.chart.layout.plots.radius,
+              stroke: g.value.includes(d) ? "transparent" : e.value.style.chart.backgroundColor,
+              "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, xa))), 256))
+          ]))), 256))
+        ])) : p("", !0),
+        f(t.$slots, "svg", { svg: i.value }, void 0, !0)
+      ], 14, ha)),
+      t.$slots.watermark ? (n(), r("div", Oa, [
+        f(t.$slots, "watermark", E(M({ isPrinting: u(xe) || u(Oe) })), void 0, !0)
+      ])) : p("", !0),
+      k("div", {
+        id: `legend-bottom-${b.value}`
+      }, null, 8, Fa),
+      $e.value ? (n(), P(Dt, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
+      }, [
+        k("div", {
+          ref_key: "chartLegend",
+          ref: me
+        }, [
+          e.value.style.chart.legend.show ? (n(), P(ua, {
+            key: `legend_${_e.value}`,
+            legendSet: F.value,
+            config: Ct.value,
+            onClickMarker: o[0] || (o[0] = ({ i: a }) => Ne(a))
+          }, {
+            item: h(({ legend: a, index: l }) => [
+              u(Te) ? 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))
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : f(t.$slots, "legend", {
+            key: 1,
+            legend: F.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : p("", !0),
+      t.$slots.source ? (n(), r("div", {
+        key: 6,
+        ref_key: "source",
+        ref: be,
+        dir: "auto"
+      }, [
+        f(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : p("", !0),
+      Z(u(ot), {
+        show: y.value.showTooltip && ee.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: _.value,
+        content: te.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,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter,
+        smoothForce: e.value.style.chart.tooltip.smoothForce,
+        smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
+      }, {
+        "tooltip-before": h(() => [
+          f(t.$slots, "tooltip-before", E(M({ ...ue.value })), void 0, !0)
+        ]),
+        "tooltip-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,
+              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)
+                ])
+              ]),
+              _: 1
+            }, 8, ["dataset", "config"])
+          ])),
+          f(t.$slots, "tooltip-after", E(M({ ...ue.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, {
+        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,
+            title: e.value.table.useDialog ? "" : Y.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: Me
+          }, {
+            th: h(({ th: a }) => [
+              de(R(a.name), 1)
+            ]),
+            td: h(({ td: a }) => [
+              de(R(a), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: h(() => [
+            de(R(Y.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: h(() => [
+            k("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: o[1] || (o[1] = (a) => ie(e.value.userOptions.callbacks.csv))
+            }, [
+              Z(u(lt), {
+                name: "excel",
+                stroke: Y.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : p("", !0),
+      u(Te) ? (n(), P(ta, { key: 8 })) : p("", !0)
+    ], 46, da));
+  }
+}, Za = /* @__PURE__ */ va(za, [["__scopeId", "data-v-c8e9bea6"]]);
+export {
+  Za as default
+};