vue-data-ui 2.2.90 → 2.2.92

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

@@ -0,0 +1,853 @@
+import { computed as p, ref as v, onMounted as Te, openBlock as u, createElementBlock as n, normalizeStyle as P, unref as g, renderSlot as T, normalizeProps as Q, mergeProps as Ge, createCommentVNode as y, createElementVNode as k, toDisplayString as F, Fragment as N, renderList as M, guardReactiveProps as re, createBlock as K, onBeforeUnmount as We, normalizeClass as J, createVNode as oe, createSlots as je, withCtx as w, createTextVNode as $e, nextTick as Xe } from "vue";
+import { e as Pe, f as Se, p as S, g as Fe, i as Oe, j as R, k as he, h as pe, o as W, n as G, X as Ae, x as Ne, _ as qe, b as xe, L as we, D as He, y as Ye, z as Je, v as Ke, w as Qe } from "./data-table-d-VcuH-r.js";
+import { t as Ze, u as et } from "./vue-ui-age-pyramid-4hcuKpFY.js";
+import { t as Ie } from "./themes-lgjsYHsH.js";
+import { u as se, _ as tt } from "./title-BF-9Qcni.js";
+import { U as at } from "./user-options-DZgCz8UA.js";
+import { _ as lt } from "./tooltip-D85WEOKi.js";
+import { u as ze, S as Le, a as ot, A as rt } from "./vue-ui-3d-bar-DW7kGJSz.js";
+import { L as st } from "./legend-DJCYLsl_.js";
+const ut = ["onClick"], nt = { key: 1 }, it = ["xmlns", "viewBox"], dt = ["id"], ct = ["stop-color"], vt = ["stop-color"], gt = ["height", "width", "fill", "rx"], ht = ["height", "width", "fill", "rx"], pt = ["height", "width", "fill", "rx"], Me = {
+  __name: "vue-ui-sparkbar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * Used in VueUiRadar's tooltip exclusively
+     */
+    backgroundOpacity: {
+      type: Number,
+      default: 100
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(j, { emit: ue }) {
+    const _ = j, { vue_ui_sparkbar: f } = ze(), Z = p(() => !!_.dataset && _.dataset.length), I = v(Pe()), o = p(() => {
+      const r = se({
+        userConfig: _.config,
+        defaultConfig: f
+      });
+      return r.theme ? {
+        ...se({
+          userConfig: Ie.vue_ui_sparkbar[r.theme] || _.config,
+          defaultConfig: r
+        }),
+        customPalette: Se[r.theme] || S
+      } : r;
+    }), ne = p(() => Fe(o.value.customPalette)), z = v(_.dataset.map((r) => ({
+      ...r,
+      value: o.value.style.animation.show ? 0 : r.value || 0
+    })));
+    Te(() => {
+      if (Oe(_.dataset) && R({
+        componentName: "VueUiSparkbar",
+        type: "dataset"
+      }), o.value.style.animation.show) {
+        let q = function() {
+          O += i / r, O < i ? (z.value = z.value.map((h, V) => ({
+            ...h,
+            value: h.value += x[V]
+          })), requestAnimationFrame(q)) : z.value = _.dataset.map((h) => ({
+            ...h,
+            value: h.value || 0
+          }));
+        };
+        const r = o.value.style.animation.animationFrames, x = _.dataset.map((h, V) => h.value / r), i = _.dataset.map((h) => h.value || 0).reduce((h, V) => h + V, 0);
+        let O = 0;
+        q();
+      }
+    });
+    const C = v({
+      width: 500,
+      height: 16
+    }), ee = p(() => Math.max(..._.dataset.map((r) => r.value))), U = p(() => (_.dataset.forEach((r, x) => {
+      he({
+        datasetObject: r,
+        requiredAttributes: ["name", "value"]
+      }).forEach((i) => {
+        R({
+          componentName: "VueUiSparkbar",
+          type: "datasetSerieAttribute",
+          property: i,
+          index: x
+        });
+      });
+    }), z.value.map((r, x) => ({
+      ...r,
+      value: r.value || 0,
+      color: pe(r.color) || ne.value[x] || S[x] || S[x % S.length]
+    }))));
+    function te(r) {
+      return r / ee.value;
+    }
+    function X(r) {
+      return o.value.style.layout.independant ? r.target ? r.value / r.target : o.value.style.layout.percentage ? r.value / 100 : o.value.style.layout.target === 0 ? 1 : r.value / o.value.style.layout.target : te(r.value);
+    }
+    function e(r) {
+      return o.value.style.layout.independant && r.target || o.value.style.layout.target;
+    }
+    function D(r, x) {
+      ue("selectDatapoint", { datapoint: r, index: x });
+    }
+    return (r, x) => (u(), n("div", {
+      style: P({
+        width: "100%",
+        fontFamily: o.value.style.fontFamily,
+        background: o.value.style.backgroundColor + g(W)[_.backgroundOpacity]
+      })
+    }, [
+      r.$slots.title ? T(r.$slots, "title", Q(Ge({ key: 0 }, { title: { ...r.title, title: o.value.style.title.text, subtitle: o.value.style.title.subtitle.text } }))) : y("", !0),
+      !r.$slots.title && o.value.style.title.text ? (u(), n("div", {
+        key: 1,
+        class: "vue-ui-sparkbar-title-container",
+        style: P({
+          background: o.value.style.title.backgroundColor,
+          margin: o.value.style.title.margin,
+          textAlign: o.value.style.title.textAlign
+        })
+      }, [
+        k("div", {
+          class: "vue-ui-sparkbar-title",
+          style: P({
+            fontSize: o.value.style.title.fontSize + "px",
+            color: o.value.style.title.color,
+            fontWeight: o.value.style.title.bold ? "bold" : "normal"
+          })
+        }, F(o.value.style.title.text), 5),
+        o.value.style.title.subtitle.text ? (u(), n("div", {
+          key: 0,
+          class: "vue-ui-sparkbar-subtitle",
+          style: P({
+            fontSize: o.value.style.title.subtitle.fontSize + "px",
+            color: o.value.style.title.subtitle.color,
+            fontWeight: o.value.style.title.subtitle.bold ? "bold" : "normal"
+          })
+        }, F(o.value.style.title.subtitle.text), 5)) : y("", !0)
+      ], 4)) : y("", !0),
+      (u(!0), n(N, null, M(U.value, (i, O) => (u(), n(N, null, [
+        Z.value ? (u(), n("div", {
+          key: 0,
+          style: P(`display:flex !important;${["left", "right"].includes(o.value.style.labels.name.position) ? "flex-direction:row !important" : "flex-direction:column !important"};gap:${o.value.style.gap}px !important;${o.value.style.labels.name.position === "right" ? "row-reverse !important" : ""};align-items:center;${j.dataset.length > 0 && O !== j.dataset.length - 1 ? "margin-bottom:6px" : ""}`),
+          onClick: () => D(i, O)
+        }, [
+          T(r.$slots, "data-label", Q(re({ bar: {
+            ...i,
+            target: e(i),
+            valueLabel: g(G)({
+              p: i.prefix || "",
+              v: i.value,
+              s: i.suffix || "",
+              r: i.rounding || 0
+            }),
+            targetLabel: g(G)({
+              p: i.prefix || "",
+              v: e(i),
+              s: i.suffix || "",
+              r: i.rounding || 0
+            })
+          } }))),
+          r.$slots["data-label"] ? y("", !0) : (u(), n("div", {
+            key: 0,
+            style: P(`width:${o.value.style.labels.name.width};${["right", "top"].includes(o.value.style.labels.name.position) ? "text-align:left" : "text-align:right"};color:${o.value.style.labels.name.color};font-size:${o.value.style.labels.fontSize}px;font-weight:${o.value.style.labels.name.bold ? "bold" : "normal"}`)
+          }, [
+            k("span", null, F(i.name), 1),
+            o.value.style.labels.value.show ? (u(), n("span", {
+              key: 0,
+              style: P(`font-weight:${o.value.style.labels.value.bold ? "bold" : "normal"}`)
+            }, ": " + F(g(G)({
+              p: i.prefix || "",
+              v: i.value,
+              s: i.suffix || "",
+              r: i.rounding || 0
+            })), 5)) : y("", !0),
+            o.value.style.layout.showTargetValue ? (u(), n("span", nt, F(" " + o.value.style.layout.targetValueText) + " " + F(g(G)({
+              p: i.prefix || "",
+              v: e(i),
+              s: i.suffix || "",
+              r: i.rounding || 0
+            })), 1)) : y("", !0)
+          ], 4)),
+          (u(), n("svg", {
+            xmlns: g(Ae),
+            viewBox: `0 0 ${C.value.width} ${C.value.height}`,
+            width: "100%"
+          }, [
+            k("defs", null, [
+              k("linearGradient", {
+                x1: "0%",
+                y1: "0%",
+                x2: "100%",
+                y2: "0%",
+                id: `sparkbar_gradient_${O}_${I.value}`
+              }, [
+                k("stop", {
+                  offset: "0%",
+                  "stop-color": `${g(Ne)(i.color, 0.03)}${g(W)[100 - o.value.style.bar.gradient.intensity]}`
+                }, null, 8, ct),
+                k("stop", {
+                  offset: "100%",
+                  "stop-color": i.color
+                }, null, 8, vt)
+              ], 8, dt)
+            ]),
+            k("rect", {
+              height: C.value.height,
+              width: C.value.width,
+              x: 0,
+              y: 0,
+              fill: `${o.value.style.gutter.backgroundColor}${g(W)[o.value.style.gutter.opacity]}`,
+              rx: C.value.height / 2
+            }, null, 8, gt),
+            k("rect", {
+              height: C.value.height,
+              width: C.value.width * X(i),
+              x: 0,
+              y: 0,
+              fill: o.value.style.bar.gradient.underlayerColor,
+              rx: C.value.height / 2
+            }, null, 8, ht),
+            k("rect", {
+              height: C.value.height,
+              width: C.value.width * X(i),
+              x: 0,
+              y: 0,
+              fill: o.value.style.bar.gradient.show ? `url(#sparkbar_gradient_${O}_${I.value})` : i.color,
+              rx: C.value.height / 2
+            }, null, 8, pt)
+          ], 8, it))
+        ], 12, ut)) : y("", !0)
+      ], 64))), 256)),
+      Z.value ? y("", !0) : (u(), K(Le, {
+        key: 2,
+        config: {
+          type: "sparkbar",
+          style: {
+            backgroundColor: o.value.style.backgroundColor,
+            sparkbar: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"]))
+    ], 4));
+  }
+}, Xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Me
+}, Symbol.toStringTag, { value: "Module" })), yt = ["id"], ft = ["xmlns", "viewBox"], mt = ["id"], bt = ["stop-color"], kt = ["stop-color"], Ct = { key: 0 }, _t = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], $t = { key: 0 }, xt = ["d", "stroke", "stroke-width"], wt = ["d", "stroke", "stroke-width"], Tt = { key: 1 }, Pt = ["x", "y", "text-anchor", "font-size", "fill", "onMouseenter"], St = ["points", "stroke", "stroke-width"], Ft = ["points", "stroke", "stroke-width", "fill"], Ot = { key: 2 }, At = ["cx", "cy", "fill", "r", "stroke"], Nt = ["onClick"], It = {
+  key: 0,
+  style: { "max-width": "200px", margin: "0 auto" }
+}, zt = {
+  __name: "vue-ui-radar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["selectLegend"],
+  setup(j, { expose: ue, emit: _ }) {
+    const f = j, { vue_ui_radar: Z } = ze(), I = p(() => !!f.dataset && Object.keys(f.dataset).length), o = v(Pe()), ne = v(null), z = v(!1), C = v(""), ee = v(0), U = v(null), te = v(null), X = v(null), e = p(() => {
+      const t = se({
+        userConfig: f.config,
+        defaultConfig: Z
+      });
+      return t.theme ? {
+        ...se({
+          userConfig: Ie.vue_ui_radar[t.theme] || f.config,
+          defaultConfig: t
+        }),
+        customPalette: Se[t.theme] || S
+      } : t;
+    }), D = v(null);
+    Te(() => {
+      if (Oe(f.dataset) && R({
+        componentName: "VueUiRadar",
+        type: "dataset"
+      }), e.value.responsive) {
+        const t = Ze(() => {
+          const { width: a, height: l } = et({
+            chart: U.value,
+            title: e.value.style.chart.title.text ? te.value : null,
+            legend: e.value.style.chart.legend.show ? X.value : null
+          });
+          c.value.width = a, c.value.height = l;
+        });
+        D.value = new ResizeObserver(t), D.value.observe(U.value.parentNode);
+      }
+    }), We(() => {
+      D.value && D.value.disconnect();
+    });
+    const { isPrinting: r, isImaging: x, generatePdf: i, generateImage: O } = ot({
+      elementId: `vue-ui-radar_${o.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-radar"
+    }), q = p(() => Fe(e.value.customPalette)), h = v({
+      dataLabels: {
+        show: e.value.style.chart.layout.labels.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    }), V = p(() => ({
+      style: {
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        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
+        }
+      }
+    })), c = v({
+      height: 312,
+      width: 512
+    }), m = v([]), H = v(null), E = v(!1);
+    function ye(t) {
+      E.value = !0, m.value.includes(t) ? (H.value = t, m.value = m.value.filter((a) => a !== t), setTimeout(() => {
+        E.value = !1, H.value = null;
+      }, 500)) : (m.value.push(t), setTimeout(() => {
+        E.value = !1;
+      }, 500)), _("selectLegend", B.value.filter((a, l) => !m.value.includes(l)).map((a) => ({
+        name: a.name,
+        color: a.color,
+        proportion: a.totalProportion
+      })));
+    }
+    function Re() {
+      return B.value.map((t) => ({
+        name: t.name,
+        color: t.color,
+        proportion: t.totalProportion
+      }));
+    }
+    const $ = p(() => [null, void 0].includes(f.dataset.categories) ? (R({
+      componentName: "VueUiRadar",
+      type: "datasetAttribute",
+      property: "categories ({ name: string; prefix?: string; suffix?: string}[])"
+    }), []) : (f.dataset.categories.length === 0 ? R({
+      componentName: "VueUiRadar",
+      type: "datasetAttributeEmpty",
+      property: "categories"
+    }) : f.dataset.categories.forEach((t, a) => {
+      he({
+        datasetObject: t,
+        requiredAttributes: ["name"]
+      }).forEach((l) => {
+        R({
+          componentName: "VueUiRadar",
+          type: "datasetAttribute",
+          property: `category.${l} at index ${a}`,
+          index: a
+        });
+      });
+    }), [null, void 0].includes(f.dataset.series) ? R({
+      componentName: "VueUiRadar",
+      type: "datasetAttribute",
+      property: "series ({ name: string; values: number[]; color?: string; target: number}[])"
+    }) : f.dataset.series.forEach((t, a) => {
+      he({
+        datasetObject: t,
+        requiredAttributes: ["name", "values", "target"]
+      }).forEach((l) => {
+        R({
+          componentName: "VueUiRadar",
+          type: "datasetSerieAttribute",
+          key: "series",
+          property: l,
+          index: a
+        });
+      });
+    }), f.dataset.categories.map((t, a) => ({
+      name: t.name,
+      categoryId: `radar_category_${o.value}_${a}`,
+      color: pe(t.color) || q.value[a] || S[a] || S[a % S.length],
+      prefix: t.prefix ?? "",
+      suffix: t.suffix ?? ""
+    })))), A = p(() => I.value ? f.dataset.series.map((t, a) => ({
+      ...t,
+      color: pe(t.color) || q.value[a] || S[a] || S[a % S.length],
+      serieId: `radar_serie_${o.value}_${a}`
+    })) : []), fe = p(() => Math.max(...A.value.flatMap((t) => t.values))), me = p(() => A.value.length), ie = p(() => Math.min(c.value.width, c.value.height) / 3), be = p(() => xe({
+      plot: { x: c.value.width / 2, y: c.value.height / 2 },
+      radius: ie.value,
+      sides: me.value,
+      rotation: 0
+    })), Ue = p(() => {
+      const t = [];
+      for (let a = 0; a < ie.value; a += ie.value / e.value.style.chart.layout.grid.graduations)
+        t.push(a);
+      return t;
+    }), L = p(() => be.value.coordinates.map((t, a) => {
+      const l = A.value[a].values.map((s) => De({
+        centerX: c.value.width / 2,
+        centerY: c.value.height / 2,
+        apexX: t.x,
+        apexY: t.y,
+        proportion: s / (A.value[a].target || fe.value)
+      }));
+      return {
+        ...t,
+        ...A.value[a],
+        plots: l
+      };
+    }));
+    function de({ x: t, y: a }) {
+      let l = "middle";
+      return t = Math.round(t), a = Math.round(a), t > c.value.width / 2 && (t += 12, l = "start"), t < c.value.width / 2 && (t -= 12, l = "end"), a > c.value.height / 2 && (a += 20), a < c.value.height / 2 && (a -= 12), a === c.value.height / 2 && (a += 4), { x: t, y: a, anchor: l };
+    }
+    function De({ centerX: t, centerY: a, apexX: l, apexY: s, proportion: d }) {
+      return {
+        x: t + (l - t) * d,
+        y: a + (s - a) * d
+      };
+    }
+    const B = p(() => {
+      const t = A.value.map((a, l) => a.values.map((s) => s / (a.target || fe.value)));
+      return $.value.map((a, l) => ({
+        ...a,
+        totalProportion: t.map((s) => s[l]).reduce((s, d) => s + d, 0) / A.value.length,
+        shape: "circle",
+        opacity: m.value.includes(l) ? 0.5 : 1,
+        segregate: () => ye(l),
+        isSegregated: m.value.includes(l)
+      }));
+    }), Ve = p(() => ({
+      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" : ""
+    })), ae = p(() => {
+      const t = [
+        { name: e.value.translations.datapoint, color: "" },
+        { name: e.value.translations.target, color: "" },
+        ...B.value
+      ], a = f.dataset.series.map((s) => [
+        s.name,
+        s.target,
+        ...s.values.map((d, b) => `${G({ p: $.value[b].prefix, v: d, s: $.value[b].suffix, r: e.value.table.td.roundingValue })} (${isNaN(d / s.target) ? "" : (d / s.target * 100).toFixed(e.value.table.td.roundingPercentage)}%)`)
+      ]), l = {
+        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: l, colNames: t };
+    }), le = v(null), ce = v([]), ve = v(null);
+    function Ee(t, a) {
+      ce.value = [], le.value = a, z.value = !0;
+      let l = "";
+      ve.value = {
+        datapoint: t,
+        seriesIndex: a,
+        series: {
+          categories: $.value,
+          datapoints: A.value,
+          radar: L.value
+        },
+        config: e.value
+      };
+      const s = e.value.style.chart.tooltip.customFormat;
+      if (Ye(s) && Je(() => s({
+        seriesIndex: a,
+        datapoint: t,
+        series: { categories: $.value, datapoints: A.value, radar: L.value },
+        config: e.value
+      })))
+        C.value = s({
+          seriesIndex: a,
+          datapoint: t,
+          series: { categories: $.value, datapoints: A.value, radar: L.value },
+          config: e.value
+        });
+      else {
+        l += `<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 d = 0; d < t.values.length; d += 1)
+          m.value.includes(d) || ce.value.push({
+            name: $.value[d].name,
+            value: t.values[d] / t.target * 100,
+            color: $.value[d].color,
+            suffix: "%)",
+            prefix: `${G({ p: $.value[d].prefix ?? "", v: t.values[d], s: $.value[d].suffix ?? "", r: e.value.style.chart.tooltip.roundingValue })} (`,
+            rounding: e.value.style.chart.tooltip.roundingPercentage
+          });
+        C.value = l;
+      }
+    }
+    function ke() {
+      Xe(() => {
+        const t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = [[""], [e.value.translations.target], ...B.value.flatMap((b) => [[b.name], ["%"]])], l = f.dataset.series.map((b, Mt) => [b.name, b.target, ...b.values.flatMap((ge) => [
+          ge,
+          isNaN(ge / b.target) ? "" : ge / b.target * 100
+        ])]), s = t.concat([a]).concat(l), d = Ke(s);
+        Qe({ csvContent: d, title: e.value.style.chart.title.text || "vue-ui-radar" });
+      });
+    }
+    const Y = v(!1);
+    function Be(t) {
+      Y.value = t, ee.value += 1;
+    }
+    function Ce() {
+      h.value.showTable = !h.value.showTable;
+    }
+    function _e() {
+      h.value.showTooltip = !h.value.showTooltip;
+    }
+    return ue({
+      getData: Re,
+      generatePdf: i,
+      generateCsv: ke,
+      generateImage: O,
+      toggleTable: Ce,
+      toggleTooltip: _e
+    }), (t, a) => (u(), n("div", {
+      class: J(`vue-ui-radar ${Y.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref_key: "radarChart",
+      ref: U,
+      id: `vue-ui-radar_${o.value}`,
+      style: P(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;${e.value.style.chart.title.text ? "" : "padding-top:36px"};background:${e.value.style.chart.backgroundColor}`)
+    }, [
+      e.value.style.chart.title.text ? (u(), n("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: te,
+        style: P(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:12px`)
+      }, [
+        oe(tt, {
+          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"])
+      ], 4)) : y("", !0),
+      e.value.userOptions.show && I.value ? (u(), K(at, {
+        ref_key: "details",
+        ref: ne,
+        key: `user_options_${ee.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isImaging: g(x),
+        isPrinting: g(r),
+        uid: o.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: Y.value,
+        isTooltip: h.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: U.value,
+        onToggleFullscreen: Be,
+        onGeneratePdf: g(i),
+        onGenerateCsv: ke,
+        onGenerateImage: g(O),
+        onToggleTable: Ce,
+        onToggleTooltip: _e
+      }, je({ _: 2 }, [
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: w(() => [
+            T(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: w(() => [
+            T(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: w(() => [
+            T(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: w(() => [
+            T(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: w(() => [
+            T(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: w(({ toggleFullscreen: l, isFullscreen: s }) => [
+            T(t.$slots, "optionFullscreen", Q(re({ toggleFullscreen: l, isFullscreen: s })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : y("", !0),
+      I.value ? (u(), n("svg", {
+        key: 2,
+        xmlns: g(Ae),
+        class: J({ "vue-data-ui-fullscreen--on": Y.value, "vue-data-ui-fulscreen--off": !Y.value }),
+        viewBox: `0 0 ${c.value.width <= 0 ? 10 : c.value.width} ${c.value.height <= 0 ? 10 : c.value.height}`,
+        style: P(`max-width:100%;overflow:visible;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
+      }, [
+        k("defs", null, [
+          (u(!0), n(N, null, M($.value, (l, s) => (u(), n("radialGradient", {
+            cx: "50%",
+            cy: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%",
+            id: `radar_gradient_${o.value}_${s}`
+          }, [
+            k("stop", {
+              offset: "0%",
+              "stop-color": `${g(Ne)(l.color, 0.05)}${g(W)[e.value.style.chart.layout.dataPolygon.opacity]}`
+            }, null, 8, bt),
+            k("stop", {
+              offset: "100%",
+              "stop-color": l.color + g(W)[e.value.style.chart.layout.dataPolygon.opacity]
+            }, null, 8, kt)
+          ], 8, mt))), 256))
+        ]),
+        e.value.style.chart.layout.grid.show ? (u(), n("g", Ct, [
+          (u(!0), n(N, null, M(L.value, (l) => (u(), n("line", {
+            x1: c.value.width / 2,
+            y1: c.value.height / 2,
+            x2: l.x,
+            y2: l.y,
+            stroke: e.value.style.chart.layout.grid.stroke,
+            "stroke-width": e.value.style.chart.layout.grid.strokeWidth
+          }, null, 8, _t))), 256)),
+          e.value.style.chart.layout.grid.graduations > 0 ? (u(), n("g", $t, [
+            (u(!0), n(N, null, M(Ue.value, (l) => (u(), n("path", {
+              d: g(xe)({
+                plot: { x: c.value.width / 2, y: c.value.height / 2 },
+                radius: l,
+                sides: me.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, xt))), 256))
+          ])) : y("", !0)
+        ])) : y("", !0),
+        k("path", {
+          d: be.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, wt),
+        e.value.style.chart.layout.labels.dataLabels.show ? (u(), n("g", Tt, [
+          (u(!0), n(N, null, M(L.value, (l, s) => (u(), n("text", {
+            x: de(l).x,
+            y: de(l).y,
+            "text-anchor": de(l).anchor,
+            "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+            fill: e.value.style.chart.layout.labels.dataLabels.color,
+            onMouseenter: (d) => Ee(l, s),
+            onMouseleave: a[0] || (a[0] = (d) => {
+              z.value = !1, le.value = null;
+            })
+          }, F(l.name), 41, Pt))), 256))
+        ])) : y("", !0),
+        (u(!0), n(N, null, M($.value, (l, s) => (u(), n("g", null, [
+          k("g", null, [
+            e.value.useCssAnimation || !e.value.useCssAnimation && !m.value.includes(s) ? (u(), n("polygon", {
+              key: 0,
+              "data-cy-radar-path": "",
+              points: g(we)(L.value.map((d) => d.plots[s]), !1, !0),
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth + 1,
+              fill: "none",
+              class: J({ "animated-out": m.value.includes(s) && e.value.useCssAnimation, "animated-in": E.value && H.value === s && e.value.useCssAnimation })
+            }, null, 10, St)) : y("", !0),
+            e.value.useCssAnimation || !e.value.useCssAnimation && !m.value.includes(s) ? (u(), n("polygon", {
+              key: 1,
+              "data-cy-radar-path": "",
+              points: g(we)(L.value.map((d) => d.plots[s]), !1, !0),
+              stroke: l.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_${o.value}_${s})` : l.color + g(W)[e.value.style.chart.layout.dataPolygon.opacity],
+              class: J({ "animated-out": m.value.includes(s) && e.value.useCssAnimation, "animated-in": E.value && H.value === s && e.value.useCssAnimation })
+            }, null, 10, Ft)) : y("", !0)
+          ])
+        ]))), 256)),
+        e.value.style.chart.layout.plots.show ? (u(), n("g", Ot, [
+          (u(!0), n(N, null, M(L.value, (l, s) => (u(), n("g", null, [
+            (u(!0), n(N, null, M(l.plots, (d, b) => (u(), n("circle", {
+              cx: d.x,
+              cy: d.y,
+              fill: m.value.includes(b) ? "transparent" : $.value[b].color,
+              r: le.value !== null && le.value === s ? e.value.style.chart.layout.plots.radius * 1.6 : e.value.style.chart.layout.plots.radius,
+              stroke: m.value.includes(b) ? "transparent" : e.value.style.chart.backgroundColor,
+              "stroke-width": 0.5,
+              class: J({ "animated-out": m.value.includes(b) && e.value.useCssAnimation, "animated-in": E.value && H.value === b && e.value.useCssAnimation })
+            }, null, 10, At))), 256))
+          ]))), 256))
+        ])) : y("", !0),
+        T(t.$slots, "svg", { svg: c.value }, void 0, !0)
+      ], 14, ft)) : y("", !0),
+      I.value ? y("", !0) : (u(), K(Le, {
+        key: 3,
+        config: {
+          type: "radar",
+          style: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            radar: {
+              grid: {
+                color: e.value.style.chart.layout.outerPolygon.stroke
+              },
+              shapes: {
+                color: e.value.style.chart.layout.outerPolygon.stroke
+              }
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      k("div", {
+        ref_key: "chartLegend",
+        ref: X
+      }, [
+        e.value.style.chart.legend.show ? (u(), K(st, {
+          key: 0,
+          legendSet: B.value,
+          config: Ve.value,
+          onClickMarker: a[1] || (a[1] = ({ i: l }) => ye(l))
+        }, {
+          item: w(({ legend: l, index: s }) => [
+            k("div", {
+              "data-cy-legend-item": "",
+              onClick: (d) => l.segregate(),
+              style: P(`opacity:${m.value.includes(s) ? 0.5 : 1}`)
+            }, F(l.name) + ": " + F((l.totalProportion * 100).toFixed(e.value.style.chart.legend.roundingPercentage)) + "% ", 13, Nt)
+          ]),
+          _: 1
+        }, 8, ["legendSet", "config"])) : T(t.$slots, "legend", {
+          key: 1,
+          legend: B.value
+        }, void 0, !0)
+      ], 512),
+      oe(lt, {
+        show: h.value.showTooltip && z.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,
+        parent: U.value,
+        content: C.value,
+        isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function"
+      }, {
+        "tooltip-before": w(() => [
+          T(t.$slots, "tooltip-before", Q(re({ ...ve.value })), void 0, !0)
+        ]),
+        "tooltip-after": w(() => [
+          ["function"].includes(typeof e.value.style.chart.tooltip.customFormat) ? y("", !0) : (u(), n("div", It, [
+            oe(Me, {
+              dataset: ce.value,
+              config: V.value,
+              backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity
+            }, null, 8, ["dataset", "config", "backgroundOpacity"])
+          ])),
+          T(t.$slots, "tooltip-after", Q(re({ ...ve.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "fontSize", "parent", "content", "isCustom"]),
+      I.value ? (u(), K(rt, {
+        key: 4,
+        hideDetails: "",
+        config: {
+          open: h.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: w(() => [
+          oe(He, {
+            colNames: ae.value.colNames,
+            head: ae.value.head,
+            body: ae.value.body,
+            config: ae.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[2] || (a[2] = (l) => h.value.showTable = !1)
+          }, {
+            th: w(({ th: l }) => [
+              $e(F(l.name), 1)
+            ]),
+            td: w(({ td: l }) => [
+              $e(F(l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"])
+        ]),
+        _: 1
+      }, 8, ["config"])) : y("", !0)
+    ], 14, yt));
+  }
+}, Lt = /* @__PURE__ */ qe(zt, [["__scopeId", "data-v-f89a8c0a"]]), qt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Lt
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Me as _,
+  Xt as a,
+  qt as b,
+  Lt as v
+};