vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-mood-radar-CBE02TpQ.js

@@ -0,0 +1,1086 @@
+import { defineAsyncComponent as N, ref as i, computed as d, toRefs as Mt, onMounted as Nt, watch as Be, openBlock as u, createElementBlock as m, normalizeStyle as B, normalizeClass as Ee, createElementVNode as n, toDisplayString as E, createBlock as k, createCommentVNode as f, unref as l, withCtx as y, renderSlot as v, normalizeProps as C, guardReactiveProps as w, createVNode as te, createSlots as Re, Fragment as Ve, renderList as Ke, Teleport as Lt, resolveDynamicComponent as Dt, mergeProps as It, createTextVNode as Ue, nextTick as fe } from "vue";
+import { j as Ft, t as je, o as Bt, q as We, A as Et, k as he, l as R, X as Rt, u as T, v as Vt, ah as Kt, a0 as Ut, a1 as jt } from "./lib-DBptbyyI.js";
+import { t as Wt, u as zt } from "./useResponsive-DfdjqQps.js";
+import { u as Gt } from "./useConfig-DO94Aj5s.js";
+import { u as Ht, B as Xt } from "./BaseScanner-BhhkKVoj.js";
+import { u as qt } from "./usePrinter-CEpYU3r5.js";
+import { u as Yt } from "./useSvgExport-ByUukOZt.js";
+import { u as ge } from "./useNestedProp-Bf5XFbs8.js";
+import { u as Jt } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as Qt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Zt } from "./useChartAccessibility-9icAAmYg.js";
+import eo from "./img-LXxMLmCg.js";
+import to from "./Title-BeMKE1cj.js";
+import oo from "./vue_ui_mood_radar-BUs6Fdn8.js";
+import ao from "./Legend-CS7Xo5LK.js";
+import { A as lo } from "./A11yDataTable-KcVAX2cP.js";
+import { _ as no } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const so = ["id"], ro = ["id"], uo = ["id"], io = { style: { position: "relative" } }, co = ["xmlns", "aria-describedby", "viewBox"], vo = ["width", "height"], yo = ["id"], fo = ["stop-color"], ho = ["stop-color"], go = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], po = ["d", "stroke", "stroke-width"], mo = ["transform"], bo = ["stroke"], ko = ["aria-label", "fill"], Co = ["transform"], wo = ["stroke"], $o = ["aria-label", "fill"], xo = ["transform"], Ao = ["stroke"], Po = ["aria-label", "fill"], To = ["transform"], Oo = ["stroke"], _o = ["aria-label", "fill"], So = ["transform"], Mo = ["stroke"], No = ["aria-label", "fill"], Lo = ["d", "stroke", "stroke-width", "fill"], Do = ["x1", "y1", "x2", "y2", "stroke"], Io = ["cx", "cy", "fill", "stroke"], Fo = ["cx", "cy", "fill", "stroke"], Bo = ["x", "y", "fill", "font-weight"], Eo = ["x", "y", "fill"], Ro = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Vo = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, Ko = ["id"], Uo = ["onClick", "onKeydown"], jo = ["innerHTML"], Wo = {
+  __name: "vue-ui-mood-radar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["copyAlt"],
+  setup(ze, { expose: Ge, emit: He }) {
+    const L = N(() => import("./BaseIcon-Cb3zzG6s.js")), Xe = N(() => import("./vue-ui-accordion-nvggWcGN.js")), qe = N(() => import("./DataTable-DT2kIdQ6.js")), Ye = N(() => import("./PenAndPaper-Ct3qJ4lA.js")), Je = N(() => import("./UserOptions-rW2fRf3V.js")), Qe = N(() => import("./PackageVersion-DPO-OOVI.js")), Ze = N(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_mood_radar: et } = Gt(), { isThemeValid: tt, warnInvalidTheme: ot } = Jt(), $ = ze, at = He, b = i(Ft()), A = i(null), p = i(null), pe = i(null), lt = i(0), nt = i(0), me = i(0), be = i(null), ke = i(null), V = i(null), Y = i(null), Ce = i(null), we = i(!1), K = i(null), oe = i(null), J = i(!1), Q = i(!1), O = i(null), ae = i(!1), $e = d(() => !!$.dataset && Object.keys($.dataset).length), e = i(se()), D = d(() => e.value.userOptions.useCursorPointer), st = d(() => je({
+      defaultConfig: {
+        userOptions: { show: !1 },
+        table: { show: !1 },
+        style: {
+          chart: {
+            backgroundColor: "#99999930",
+            layout: {
+              grid: {
+                stroke: "#6A6A6A"
+              },
+              outerPolygon: {
+                stroke: "#6A6A6A"
+              },
+              dataPolygon: {
+                color: "#6A6A6A",
+                opacity: 30,
+                stroke: "#6A6A6A"
+              },
+              smileys: {
+                colors: {
+                  1: "#DBDBDB",
+                  2: "#C4C4C4",
+                  3: "#ADADAD",
+                  4: "#969696",
+                  5: "#808080"
+                }
+              },
+              dataLabel: {
+                color: "transparent"
+              }
+            },
+            legend: {
+              backgroundColor: "transparent"
+            }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: le, FINAL_DATASET: _ } = Ht({
+      ...Mt($),
+      FINAL_CONFIG: e,
+      prepareConfig: se,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await fe(), S.value.showTable = e.value.table.show;
+        });
+      },
+      skeletonDataset: $.config?.skeletonDataset ?? {
+        1: 1,
+        2: 1,
+        3: 1,
+        4: 1,
+        5: 1
+      },
+      skeletonConfig: je({
+        defaultConfig: e.value,
+        userConfig: st.value
+      })
+    });
+    Nt(() => {
+      we.value = !0, xe();
+    });
+    const rt = d(() => e.value.debug);
+    function xe() {
+      if (Bt($.dataset) && We({
+        componentName: "VueUiMoodRadar",
+        type: "dataset",
+        debug: rt.value
+      }), e.value.responsive) {
+        const t = Wt(() => {
+          const { width: a, height: o } = zt({
+            chart: A.value,
+            title: e.value.style.chart.title.text ? be.value : null,
+            legend: e.value.style.chart.legend.show ? ke.value : null,
+            noTitle: pe.value,
+            source: Ce.value
+          });
+          requestAnimationFrame(() => {
+            r.value.width = a, r.value.height = o - 12;
+          });
+        });
+        V.value && (Y.value && V.value.unobserve(Y.value), V.value.disconnect()), V.value = new ResizeObserver(t), Y.value = A.value.parentNode, V.value.observe(Y.value);
+      }
+    }
+    const { userOptionsVisible: ne, setUserOptionsVisibility: Ae, keepUserOptionState: Pe } = Qt({ config: e.value }), { svgRef: U } = Zt({ config: e.value.style.chart.title });
+    function se() {
+      const t = ge({
+        userConfig: $.config,
+        defaultConfig: et
+      }), a = t.theme;
+      if (!a) return t;
+      if (!tt.value(t))
+        return ot(t), t;
+      const o = ge({
+        userConfig: oo[a] || $.config,
+        defaultConfig: t
+      });
+      return ge({
+        userConfig: $.config,
+        defaultConfig: o
+      });
+    }
+    Be(() => $.config, (t) => {
+      e.value = se(), ne.value = !e.value.userOptions.showOnChartHover, xe(), lt.value += 1, nt.value += 1, me.value += 1, S.value.showTable = e.value.table.show;
+    }, { deep: !0 });
+    const { isPrinting: re, isImaging: ue, generatePdf: Te, generateImage: Oe } = qt({
+      elementId: b.value,
+      fileName: e.value.style.chart.title.text || "vue-ui-mood-radar",
+      options: e.value.userOptions.print
+    }), ut = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), S = i({
+      showTable: e.value.table.show
+    }), r = i({
+      height: 256,
+      width: 256
+    }), it = {
+      5: { x: 128, y: 35 },
+      4: { x: 218, y: 98.5 },
+      3: { x: 185, y: 204 },
+      2: { x: 70, y: 204 },
+      1: { x: 38.5, y: 98.5 }
+    }, ct = d(() => {
+      const t = {};
+      return ce.value.forEach((a) => {
+        t[a.key] = { x: a.x, y: a.y };
+      }), t;
+    });
+    function j(t) {
+      const a = it[t], o = ct.value[t] || a;
+      return `translate(${o.x - a.x}, ${o.y - a.y})`;
+    }
+    const ie = d(() => Et({
+      plot: { x: r.value.width / 2, y: r.value.height / 2 },
+      radius: Math.min(r.value.height, r.value.width) * 0.35,
+      sides: 5,
+      rotation: 11
+    }));
+    function dt({ centerX: t, centerY: a, apexX: o, apexY: s, proportion: g, key: c, value: ee }) {
+      return {
+        x: t + (o - t) * g,
+        y: a + (s - a) * g,
+        key: c,
+        value: ee
+      };
+    }
+    const vt = d(() => Math.max(...Object.values(_.value).map((t) => isNaN(t) ? 0 : t))), x = d(() => Object.values(_.value).reduce((t, a) => (isNaN(t) ? 0 : t) + (isNaN(a) ? 0 : a), 0)), h = d(() => Object.keys(_.value).map((t, a) => {
+      const o = typeof _.value[t] != "number" || isNaN(_.value[t]) ? 0 : _.value[t];
+      return {
+        index: a,
+        key: t,
+        value: o,
+        proportion: o / x.value,
+        color: e.value.style.chart.layout.smileys.colors[t]
+      };
+    }).sort((t, a) => a.key - t.key)), _e = d(() => h.value.map((t, a) => ({
+      ...t,
+      display: `${he(
+        e.value.style.chart.layout.dataLabel.formatter,
+        t.value,
+        R({
+          p: e.value.style.chart.layout.dataLabel.prefix,
+          v: t.value,
+          s: e.value.style.chart.layout.dataLabel.suffix,
+          r: e.value.style.chart.layout.dataLabel.roundingValue
+        })
+      )}${le.value ? "" : ` (${R({
+        v: t.proportion * 100,
+        s: "%",
+        r: e.value.style.chart.legend.roundingPercentage
+      })})`}`
+    }))), ce = d(() => (["1", "2", "3", "4", "5"].forEach((t) => {
+      [null, void 0].includes(_.value[t]) && We({
+        componentName: "VueUiMoodRadar",
+        type: "datasetAttribute",
+        property: t
+      });
+    }), ie.value.coordinates.map((t, a) => {
+      const o = dt({
+        centerX: r.value.width / 2,
+        centerY: r.value.height / 2,
+        apexX: t.x,
+        apexY: t.y,
+        proportion: h.value[a].value / vt.value,
+        key: h.value[a].key,
+        value: h.value[a].value
+      });
+      return {
+        ...t,
+        plots: o,
+        key: h.value[a].key
+      };
+    }))), yt = d(() => ({
+      cy: "mood-radar-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" : ""
+    }));
+    function Z(t) {
+      t === p.value ? p.value = null : (p.value = t, I(t));
+    }
+    function W(t) {
+      p.value = t;
+      const a = h.value.find((o) => o.key === t);
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: a, seriesIndex: a.index });
+    }
+    function z(t) {
+      p.value = null;
+      const a = h.value.find((o) => o.key === t);
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: a.index });
+    }
+    function I(t) {
+      const a = h.value.find((o) => o.key === t);
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: a, seriesIndex: a.index });
+    }
+    const P = d(() => {
+      const t = h.value.map((o) => ({
+        name: o.key,
+        color: o.color
+      })), a = h.value.map((o) => isNaN(o.value) ? 0 : o.value);
+      return { head: t, body: a };
+    });
+    function de(t = null) {
+      fe(() => {
+        const a = P.value.head.map((g, c) => [[
+          g.name
+        ], [P.value.body[c]], [isNaN(P.value.body[c] / x.value) ? "-" : P.value.body[c] / x.value * 100]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), s = Ut(o);
+        t ? t(s) : jt({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-mood-radar" });
+      });
+    }
+    const G = d(() => {
+      const t = [
+        ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
+        Number(x.value.toFixed(e.value.table.td.roundingValue)).toLocaleString(),
+        "100%"
+      ], a = P.value.head.map((g, c) => [
+        {
+          color: g.color,
+          name: g.name
+        },
+        P.value.body[c].toFixed(e.value.table.td.roundingValue),
+        isNaN(P.value.body[c] / x.value) ? "-" : (P.value.body[c] / x.value * 100).toFixed(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
+      }, s = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value,
+        e.value.table.columnNames.percentage
+      ];
+      return {
+        head: t,
+        body: a,
+        config: o,
+        colNames: s
+      };
+    });
+    function ft() {
+      return h.value;
+    }
+    function Se() {
+      S.value.showTable = !S.value.showTable;
+    }
+    const F = i(!1);
+    function Me(t) {
+      F.value = t;
+    }
+    const H = i(!1);
+    function ve() {
+      H.value = !H.value;
+    }
+    async function ht({ scale: t = 2 } = {}) {
+      if (!A.value) return;
+      const { width: a, height: o } = A.value.getBoundingClientRect(), s = a / o, { imageUri: g, base64: c } = await eo({ domElement: A.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: g,
+        base64: c,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: o,
+        aspectRatio: s
+      };
+    }
+    const X = d(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = S.value.showTable;
+      return {
+        component: t ? Ze : Xe,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: t ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: F.value,
+          fullscreenParent: A.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: D.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    Be(() => S.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && K.value ? K.value.open() : "close" in K.value && K.value.close());
+    });
+    function Ne() {
+      S.value.showTable = !1, oe.value && oe.value.setTableIconState(!1);
+    }
+    const gt = d(() => _e.value.map((t) => ({
+      ...t,
+      name: t.display,
+      shape: "circle"
+    }))), pt = d(() => e.value.style.chart.backgroundColor), mt = d(() => e.value.style.chart.legend), bt = d(() => e.value.style.chart.title), { exportSvg: kt, getSvg: Ct } = Yt({
+      svg: U,
+      title: bt,
+      legend: mt,
+      legendItems: gt,
+      backgroundColor: pt
+    });
+    async function Le({ isCb: t }) {
+      Q.value = !0, await fe();
+      try {
+        if (t) {
+          const { blob: a, url: o, text: s, dataUrl: g } = await Ct();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: a, url: o, text: s, dataUrl: g }));
+        } else
+          await Promise.resolve(kt());
+      } finally {
+        Q.value = !1;
+      }
+    }
+    function wt(t) {
+      if (t?.stage === "start") {
+        J.value = !0;
+        return;
+      }
+      if (t?.stage === "end") {
+        J.value = !1;
+        return;
+      }
+      Oe();
+    }
+    async function De() {
+      if (at("copyAlt", {
+        config: e.value,
+        dataset: h.value
+      }), !e.value.userOptions.callbacks.altCopy) {
+        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+        return;
+      }
+      await Promise.resolve(e.value.userOptions.callbacks.altCopy({
+        config: e.value,
+        dataset: h.value
+      }));
+    }
+    const M = d(() => h.value.map((t) => String(t.key)));
+    function $t() {
+      Ae(!0);
+    }
+    function xt() {
+      Ae(!1);
+    }
+    function At(t) {
+      return h.value.find((a) => String(a.key) === String(t));
+    }
+    function Ie(t, a, o) {
+      return he(
+        e.value.style.chart.layout.dataLabel.formatter,
+        t,
+        R({
+          p: e.value.style.chart.layout.dataLabel.prefix,
+          v: t,
+          s: e.value.style.chart.layout.dataLabel.suffix,
+          r: e.value.style.chart.layout.dataLabel.roundingValue
+        }),
+        { datapoint: o, seriesIndex: a }
+      );
+    }
+    function Fe(t) {
+      return R({
+        v: x.value ? t / x.value * 100 : 0,
+        s: "%",
+        r: e.value.style.chart.layout.dataLabel.roundingPercentage
+      });
+    }
+    function q(t) {
+      const a = At(t);
+      return a ? `${t}, ${Ie(a.value, a.index, a)}, ${Fe(a.value)}` : `${t}`;
+    }
+    function Pt(t) {
+      const a = M.value[t];
+      a && (O.value = t, p.value = a);
+    }
+    function Tt() {
+      ae.value = !0;
+    }
+    function Ot() {
+      O.value = null, p.value = null, ae.value = !1;
+    }
+    function _t(t) {
+      if (!U.value || !M.value.length || H.value || document.activeElement !== U.value) return;
+      const a = ["ArrowLeft", "ArrowUp"].includes(t.key), o = ["ArrowRight", "ArrowDown"].includes(t.key), s = t.key === "Enter" || t.key === " ", g = t.key === "Escape";
+      if (!a && !o && !s && !g) return;
+      if (t.preventDefault(), t.stopPropagation(), g) {
+        O.value = null, p.value = null;
+        return;
+      }
+      if (s) {
+        if (O.value === null) return;
+        const ee = M.value[O.value];
+        if (!ee) return;
+        Z(ee);
+        return;
+      }
+      let c = O.value;
+      c === null || c < 0 || c >= M.value.length ? c = o ? 0 : M.value.length - 1 : o ? (c += 1, c >= M.value.length && (c = 0)) : a && (c -= 1, c < 0 && (c = M.value.length - 1)), Pt(c);
+    }
+    function St(t, a) {
+      const o = t.key === "Enter" || t.key === " ", s = t.key === "Escape";
+      if (!(!o && !s)) {
+        if (t.preventDefault(), t.stopPropagation(), s) {
+          O.value = null, p.value = null;
+          return;
+        }
+        Z(String(a));
+      }
+    }
+    const ye = d(() => {
+      const t = G.value?.colNames ?? [], a = h.value.map((o) => [
+        String(o.key),
+        Ie(o.value, o.index, o),
+        Fe(o.value)
+      ]);
+      return { headers: t, rows: a };
+    });
+    return Ge({
+      getData: ft,
+      getImage: ht,
+      generatePdf: Te,
+      generateCsv: de,
+      generateImage: Oe,
+      generateSvg: Le,
+      toggleTable: Se,
+      toggleAnnotator: ve,
+      toggleFullscreen: Me,
+      copyAlt: De
+    }), (t, a) => (u(), m("div", {
+      class: Ee(`vue-data-ui-component vue-ui-mood-radar ${F.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref_key: "moodRadarChart",
+      ref: A,
+      id: `${b.value}`,
+      style: B(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      onMouseenter: $t,
+      onMouseleave: xt
+    }, [
+      n("div", {
+        id: `chart-instructions-${b.value}`,
+        class: "sr-only"
+      }, [
+        n("p", null, E(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, ro),
+      ye.value?.rows?.length ? (u(), k(lo, {
+        key: 0,
+        uid: b.value,
+        head: ye.value.headers,
+        body: ye.value.rows,
+        notice: e.value.a11y.translations.tableAvailable,
+        caption: e.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : f("", !0),
+      e.value.userOptions.buttons.annotator ? (u(), k(l(Ye), {
+        key: 1,
+        svgRef: l(U),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: H.value,
+        isCursorPointer: D.value,
+        onClose: ve
+      }, {
+        "annotator-action-close": y(() => [
+          v(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": y(({ color: o }) => [
+          v(t.$slots, "annotator-action-color", C(w({ color: o })), void 0, !0)
+        ]),
+        "annotator-action-draw": y(({ mode: o }) => [
+          v(t.$slots, "annotator-action-draw", C(w({ mode: o })), void 0, !0)
+        ]),
+        "annotator-action-undo": y(({ disabled: o }) => [
+          v(t.$slots, "annotator-action-undo", C(w({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-redo": y(({ disabled: o }) => [
+          v(t.$slots, "annotator-action-redo", C(w({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-delete": y(({ disabled: o }) => [
+          v(t.$slots, "annotator-action-delete", C(w({ disabled: o })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : f("", !0),
+      ut.value ? (u(), m("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: pe,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : f("", !0),
+      e.value.style.chart.title.text ? (u(), m("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: be,
+        style: "width:100%;background:transparent"
+      }, [
+        te(to, {
+          config: {
+            title: {
+              cy: "mood-radar-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "mood-radar-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"])
+      ], 512)) : f("", !0),
+      n("div", {
+        id: `legend-top-${b.value}`
+      }, null, 8, uo),
+      e.value.userOptions.show && $e.value && (l(Pe) || l(ne)) ? (u(), k(l(Je), {
+        key: 4,
+        ref_key: "userOptionsRef",
+        ref: oe,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: l(re),
+        isImaging: l(ue),
+        uid: b.value,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        hasAltCopy: e.value.userOptions.buttons.altCopy,
+        isFullscreen: F.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: A.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,
+        tableDialog: e.value.table.useDialog,
+        isCursorPointer: D.value,
+        onToggleFullscreen: Me,
+        onGeneratePdf: l(Te),
+        onGenerateCsv: de,
+        onGenerateImage: wt,
+        onGenerateSvg: Le,
+        onToggleTable: Se,
+        onToggleAnnotator: ve,
+        onCopyAlt: De,
+        style: B({
+          visibility: l(Pe) ? l(ne) ? "visible" : "hidden" : "visible"
+        })
+      }, Re({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: y(({ isOpen: o, color: s }) => [
+            v(t.$slots, "menuIcon", C(w({ isOpen: o, color: s })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: y(() => [
+            v(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: y(() => [
+            v(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: y(() => [
+            v(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: y(() => [
+            v(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: y(() => [
+            v(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: y(({ toggleFullscreen: o, isFullscreen: s }) => [
+            v(t.$slots, "optionFullscreen", C(w({ toggleFullscreen: o, isFullscreen: s })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: y(({ toggleAnnotator: o, isAnnotator: s }) => [
+            v(t.$slots, "optionAnnotator", C(w({ toggleAnnotator: o, isAnnotator: s })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: y(({ altCopy: o }) => [
+            v(t.$slots, "optionAltCopy", C(w({ altCopy: o })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : f("", !0),
+      n("div", io, [
+        (u(), m("svg", {
+          ref_key: "svgRef",
+          ref: U,
+          xmlns: l(Rt),
+          "aria-describedby": `chart-instructions-${b.value}`,
+          viewBox: `0 0 ${r.value.width} ${r.value.height}`,
+          class: Ee({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value }),
+          style: B(`overflow:visible;background:transparent;color:${e.value.style.chart.color}`),
+          tabindex: "0",
+          onFocus: Tt,
+          onBlur: Ot,
+          onKeydown: _t
+        }, [
+          te(l(Qe)),
+          t.$slots["chart-background"] ? (u(), m("foreignObject", {
+            key: 0,
+            x: 0,
+            y: 0,
+            width: r.value.width,
+            height: r.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            v(t.$slots, "chart-background", {}, void 0, !0)
+          ], 8, vo)) : f("", !0),
+          n("defs", null, [
+            n("radialGradient", {
+              cx: "50%",
+              cy: "50%",
+              r: "50%",
+              fx: "50%",
+              fy: "50%",
+              id: `mood_radar_gradient_${b.value}`
+            }, [
+              n("stop", {
+                offset: "0%",
+                "stop-color": l(T)(e.value.style.chart.layout.dataPolygon.color, e.value.style.chart.layout.dataPolygon.opacity)
+              }, null, 8, fo),
+              n("stop", {
+                offset: "100%",
+                "stop-color": l(T)(l(Vt)(e.value.style.chart.layout.dataPolygon.color, e.value.style.chart.layout.dataPolygon.gradient.intensity / 100), e.value.style.chart.layout.dataPolygon.opacity)
+              }, null, 8, ho)
+            ], 8, yo)
+          ]),
+          (u(!0), m(Ve, null, Ke(ie.value.coordinates, (o) => (u(), m("line", {
+            x1: r.value.width / 2,
+            y1: r.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, go))), 256)),
+          n("path", {
+            d: ie.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, po),
+          n("g", {
+            transform: j("5")
+          }, [
+            n("path", {
+              fill: "none",
+              stroke: e.value.style.chart.layout.smileys.colors[5],
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              d: "M119 25A1 1 0 00137 25 1 1 0 00119 25M123 26C124 33 132 33 133 26L123 26M123 22A1 1 0 00126 22 1 1 0 00123 22M130 22A1 1 0 00133 22 1 1 0 00130 22"
+            }, null, 8, bo),
+            n("circle", {
+              role: "button",
+              class: "vue-ui-mood-radar-trap",
+              cx: "128",
+              cy: "25",
+              r: "20",
+              "aria-label": q("5"),
+              fill: p.value === "5" ? l(T)(e.value.style.chart.layout.smileys.colors[5], 20) : "transparent",
+              onMouseenter: a[0] || (a[0] = (o) => W("5")),
+              onMouseleave: a[1] || (a[1] = (o) => z("5")),
+              onClick: a[2] || (a[2] = (o) => I("5"))
+            }, null, 40, ko)
+          ], 8, mo),
+          n("g", {
+            transform: j("4")
+          }, [
+            n("path", {
+              fill: "none",
+              stroke: e.value.style.chart.layout.smileys.colors[4],
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              d: "M218 95A1 1 0 00236 95 1 1 0 00218 95M222 97C225 99 229 99 232 97M222 92A1 1 0 00225 92 1 1 0 00222 92M229 92A1 1 0 00232 92 1 1 0 00229 92"
+            }, null, 8, wo),
+            n("circle", {
+              class: "vue-ui-mood-radar-trap",
+              cx: "227",
+              cy: "95.5",
+              r: "20",
+              "aria-label": q("4"),
+              fill: p.value === "4" ? l(T)(e.value.style.chart.layout.smileys.colors[4], 20) : "transparent",
+              onMouseenter: a[3] || (a[3] = (o) => W("4")),
+              onMouseleave: a[4] || (a[4] = (o) => z("4")),
+              onClick: a[5] || (a[5] = (o) => I("4"))
+            }, null, 40, $o)
+          ], 8, Co),
+          n("g", {
+            transform: j("3")
+          }, [
+            n("path", {
+              fill: "none",
+              stroke: e.value.style.chart.layout.smileys.colors[3],
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              d: "M181 213A1 1 0 00199 213 1 1 0 00181 213M185 210A1 1 0 00188 210 1 1 0 00185 210M192 210A1 1 0 00195 210 1 1 0 00192 210M185 215 195 215"
+            }, null, 8, Ao),
+            n("circle", {
+              class: "vue-ui-mood-radar-trap",
+              cx: "190",
+              cy: "213.5",
+              r: "20",
+              "aria-label": q("3"),
+              fill: p.value === "3" ? l(T)(e.value.style.chart.layout.smileys.colors[3], 20) : "transparent",
+              onMouseenter: a[6] || (a[6] = (o) => W("3")),
+              onMouseleave: a[7] || (a[7] = (o) => z("3")),
+              onClick: a[8] || (a[8] = (o) => I("3"))
+            }, null, 40, Po)
+          ], 8, xo),
+          n("g", {
+            transform: j("2")
+          }, [
+            n("path", {
+              fill: "none",
+              stroke: e.value.style.chart.layout.smileys.colors[2],
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              d: "M56 213A1 1 0 0074 213 1 1 0 0056 213M60 216C63 214 67 214 70 216M60 210A1 1 0 0063 210 1 1 0 0060 210M67 210A1 1 0 0070 210 1 1 0 0067 210"
+            }, null, 8, Oo),
+            n("circle", {
+              class: "vue-ui-mood-radar-trap",
+              cx: "65",
+              cy: "213.5",
+              r: "20",
+              "aria-label": q("2"),
+              fill: p.value === "2" ? l(T)(e.value.style.chart.layout.smileys.colors[2], 20) : "transparent",
+              onMouseenter: a[9] || (a[9] = (o) => W("2")),
+              onMouseleave: a[10] || (a[10] = (o) => z("2")),
+              onClick: a[11] || (a[11] = (o) => I("2"))
+            }, null, 40, _o)
+          ], 8, To),
+          n("g", {
+            transform: j("1")
+          }, [
+            n("path", {
+              fill: "none",
+              stroke: e.value.style.chart.layout.smileys.colors[1],
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              d: "M20 96A1 1 0 0038 96 1 1 0 0020 96M24 100C25 95 33 95 34 100L24 100M24 93A1 1 0 0027 93 1 1 0 0024 93M31 93A1 1 0 0034 93 1 1 0 0031 93"
+            }, null, 8, Mo),
+            n("circle", {
+              class: "vue-ui-mood-radar-trap",
+              cx: "29",
+              cy: "95.5",
+              r: "20",
+              "aria-label": q("1"),
+              fill: p.value === "1" ? l(T)(e.value.style.chart.layout.smileys.colors[1], 20) : "transparent",
+              onMouseenter: a[12] || (a[12] = (o) => W("1")),
+              onMouseleave: a[13] || (a[13] = (o) => z("1")),
+              onClick: a[14] || (a[14] = (o) => I("1"))
+            }, null, 40, No)
+          ], 8, So),
+          n("path", {
+            d: l(Kt)(ce.value.map((o) => o.plots)),
+            stroke: e.value.style.chart.layout.dataPolygon.stroke,
+            "stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: e.value.style.chart.layout.dataPolygon.gradient.show ? `url(#mood_radar_gradient_${b.value})` : l(T)(e.value.style.chart.layout.dataPolygon.color, e.value.style.chart.layout.dataPolygon.opacity)
+          }, null, 8, Lo),
+          (u(!0), m(Ve, null, Ke(ce.value.map((o) => o.plots), (o, s) => (u(), m("g", {
+            class: "vue-ui-mood-radar-trap",
+            style: B(`opacity:${p.value == o.key ? "1" : "0"}`)
+          }, [
+            n("line", {
+              x1: o.x,
+              y1: o.y,
+              x2: r.value.width / 2,
+              y2: r.value.height / 2,
+              stroke: e.value.style.chart.layout.smileys.colors[o.key]
+            }, null, 8, Do),
+            n("circle", {
+              cx: o.x,
+              cy: o.y,
+              fill: e.value.style.chart.layout.smileys.colors[o.key],
+              r: "3",
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": 0.5
+            }, null, 8, Io),
+            n("circle", {
+              cx: r.value.width / 2,
+              cy: r.value.height / 2,
+              fill: e.value.style.chart.layout.smileys.colors[o.key],
+              r: "3",
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": 0.5
+            }, null, 8, Fo),
+            n("text", {
+              x: r.value.width / 2,
+              y: ["5", 5].includes(o.key) ? r.value.height / 2 * 1.13 : r.value.height / 2 * 0.9375,
+              fill: e.value.style.chart.layout.dataLabel.color,
+              "font-size": "12",
+              "text-anchor": "middle",
+              "font-weight": e.value.style.chart.layout.dataLabel.bold ? "bold" : "normal"
+            }, E(l(he)(
+              e.value.style.chart.layout.dataLabel.formatter,
+              o.value,
+              l(R)({
+                p: e.value.style.chart.layout.dataLabel.prefix,
+                v: o.value,
+                s: e.value.style.chart.layout.dataLabel.suffix,
+                r: e.value.style.chart.layout.dataLabel.roundingValue
+              }),
+              { datapoint: o, seriesIndex: s }
+            )), 9, Bo),
+            n("text", {
+              x: r.value.width / 2,
+              y: ["5", 5].includes(o.key) ? r.value.height / 2 * 1.273 : r.value.height / 2 * 0.7968,
+              fill: e.value.style.chart.layout.dataLabel.color,
+              "font-size": "12",
+              "text-anchor": "middle"
+            }, " (" + E(l(R)({
+              v: o.value / x.value * 100,
+              s: "%",
+              r: e.value.style.chart.layout.dataLabel.roundingPercentage
+            })) + ") ", 9, Eo)
+          ], 4))), 256)),
+          v(t.$slots, "svg", {
+            svg: {
+              ...r.value,
+              isPrintingImg: l(re) | l(ue) | J.value,
+              isPrintingSvg: Q.value
+            }
+          }, void 0, !0)
+        ], 46, co)),
+        t.$slots.hint ? (u(), m("div", Ro, [
+          v(t.$slots, "hint", C(w({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: ae.value })), void 0, !0)
+        ])) : f("", !0)
+      ]),
+      t.$slots.watermark ? (u(), m("div", Vo, [
+        v(t.$slots, "watermark", C(w({ isPrinting: l(re) || l(ue) || J.value || Q.value })), void 0, !0)
+      ])) : f("", !0),
+      n("div", {
+        id: `legend-bottom-${b.value}`
+      }, null, 8, Ko),
+      we.value ? (u(), k(Lt, {
+        key: 6,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
+      }, [
+        n("div", {
+          ref_key: "chartLegend",
+          ref: ke
+        }, [
+          e.value.style.chart.legend.show ? (u(), k(ao, {
+            legendSet: _e.value,
+            config: yt.value,
+            key: `legend_${me.value}`,
+            isCursorPointer: D.value,
+            style: { display: "flex", "row-gap": "6px" },
+            onFocusMarker: a[15] || (a[15] = ({ legend: o }) => Z(o.key))
+          }, {
+            item: y(({ legend: o, index: s }) => [
+              n("div", {
+                role: "button",
+                onClick: () => Z(o.key),
+                style: { display: "flex", "flex-direction": "row", gap: "3px", "align-items": "center", margin: "3px 0" },
+                onKeydown: (g) => St(g, String(o.key))
+              }, [
+                o.key == 1 ? (u(), k(l(L), {
+                  key: 0,
+                  strokeWidth: 1,
+                  name: "moodSad",
+                  stroke: e.value.style.chart.layout.smileys.colors[o.key]
+                }, null, 8, ["stroke"])) : f("", !0),
+                o.key == 2 ? (u(), k(l(L), {
+                  key: 1,
+                  strokeWidth: 1,
+                  name: "moodFlat",
+                  stroke: e.value.style.chart.layout.smileys.colors[o.key]
+                }, null, 8, ["stroke"])) : f("", !0),
+                o.key == 3 ? (u(), k(l(L), {
+                  key: 2,
+                  strokeWidth: 1,
+                  name: "moodNeutral",
+                  stroke: e.value.style.chart.layout.smileys.colors[o.key]
+                }, null, 8, ["stroke"])) : f("", !0),
+                o.key == 4 ? (u(), k(l(L), {
+                  key: 3,
+                  strokeWidth: 1,
+                  name: "smiley",
+                  stroke: e.value.style.chart.layout.smileys.colors[o.key]
+                }, null, 8, ["stroke"])) : f("", !0),
+                o.key == 5 ? (u(), k(l(L), {
+                  key: 4,
+                  strokeWidth: 1,
+                  name: "moodHappy",
+                  stroke: e.value.style.chart.layout.smileys.colors[o.key]
+                }, null, 8, ["stroke"])) : f("", !0),
+                l(le) ? f("", !0) : (u(), m("span", {
+                  key: 5,
+                  style: B({ fontWeight: e.value.style.chart.legend.bold ? "bold" : "normal" })
+                }, E(o.display), 5))
+              ], 40, Uo)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config", "isCursorPointer"])) : f("", !0),
+          v(t.$slots, "legend", { legend: h.value }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : f("", !0),
+      t.$slots.source ? (u(), m("div", {
+        key: 7,
+        ref_key: "source",
+        ref: Ce,
+        dir: "auto"
+      }, [
+        v(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : f("", !0),
+      $e.value && e.value.userOptions.buttons.table ? (u(), k(Dt(X.value.component), It({ key: 8 }, X.value.props, {
+        ref_key: "tableUnit",
+        ref: K,
+        onClose: Ne
+      }), Re({
+        content: y(() => [
+          te(l(qe), {
+            colNames: G.value.colNames,
+            head: G.value.head,
+            body: G.value.body,
+            config: G.value.config,
+            title: e.value.table.useDialog ? "" : X.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            isCursorPointer: D.value,
+            onClose: Ne
+          }, {
+            th: y(({ th: o }) => [
+              n("div", {
+                innerHTML: o,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, jo)
+            ]),
+            td: y(({ td: o }) => [
+              Ue(E(o.name || o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"])
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: y(() => [
+            Ue(E(X.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: y(() => [
+            n("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[16] || (a[16] = (o) => de(e.value.userOptions.callbacks.csv)),
+              style: B({ cursor: D.value ? "pointer" : "default" })
+            }, [
+              te(l(L), {
+                name: "fileCsv",
+                stroke: X.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : f("", !0),
+      v(t.$slots, "skeleton", {}, () => [
+        l(le) ? (u(), k(Xt, { key: 0 })) : f("", !0)
+      ], !0)
+    ], 46, so));
+  }
+}, ua = /* @__PURE__ */ no(Wo, [["__scopeId", "data-v-33a34595"]]);
+export {
+  ua as default
+};