vue-data-ui 3.0.0-next.9 → 3.0.0

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

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