vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-galaxy-CGykxsAI.js

@@ -0,0 +1,1012 @@
+import { defineAsyncComponent as L, ref as n, computed as d, toRefs as Kt, onMounted as Yt, watch as Qe, openBlock as u, createElementBlock as p, unref as r, normalizeStyle as X, normalizeClass as le, createElementVNode as C, toDisplayString as ae, createBlock as $, createCommentVNode as h, withCtx as i, renderSlot as c, normalizeProps as b, guardReactiveProps as m, createSlots as Ze, createVNode as ke, Fragment as et, renderList as tt, Teleport as qt, resolveDynamicComponent as Jt, mergeProps as Qt, createTextVNode as lt, nextTick as oe } from "vue";
+import { j as at, t as ot, o as Zt, q as nt, r as el, m as tl, p as ne, n as ll, a8 as st, s as al, ad as ol, k as ut, l as D, X as nl, T as rt, a0 as sl, a1 as ul, U as rl } from "./lib-DBptbyyI.js";
+import { b as il } from "./labelUtils-CqTHa20R.js";
+import { t as cl, u as vl } from "./useResponsive-DfdjqQps.js";
+import { u as dl } from "./useConfig-DO94Aj5s.js";
+import { u as hl, B as gl } from "./BaseScanner-BhhkKVoj.js";
+import { u as pl } from "./usePrinter-CEpYU3r5.js";
+import { u as fl } from "./useSvgExport-ByUukOZt.js";
+import { u as Ce } from "./useNestedProp-Bf5XFbs8.js";
+import { u as yl } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as bl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ml } from "./useChartAccessibility-9icAAmYg.js";
+import kl from "./img-LXxMLmCg.js";
+import Cl from "./Title-BeMKE1cj.js";
+import wl from "./Legend-CS7Xo5LK.js";
+import Tl from "./vue_ui_galaxy-D95AN4FT.js";
+import { A as $l } from "./A11yDataTable-KcVAX2cP.js";
+import { B as xl } from "./BaseLegendToggle-BQVIawmA.js";
+import { _ as Sl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Pl = ["id"], Al = ["id"], Ol = ["id"], Il = { style: { position: "relative" } }, Ll = ["xmlns", "aria-describedby", "viewBox"], Dl = ["width", "height"], _l = ["id"], Fl = ["stdDeviation"], Nl = ["d", "stroke", "stroke-width"], Bl = ["d", "stroke", "stroke-width"], Vl = ["filter"], El = ["d", "stroke", "stroke-width"], Ml = ["data-a11y-serie-id", "d", "stroke-width", "aria-label", "onMouseenter", "onMouseleave", "onClick"], Rl = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Ul = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, zl = ["id"], Wl = ["onClick"], Gl = ["innerHTML"], Hl = {
+  __name: "vue-ui-galaxy",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint", "copyAlt"],
+  setup(it, { expose: ct, emit: vt }) {
+    const dt = L(() => import("./Tooltip-Bf-kM3_A.js")), ht = L(() => import("./BaseIcon-Cb3zzG6s.js")), gt = L(() => import("./vue-ui-accordion-nvggWcGN.js")), pt = L(() => import("./DataTable-DT2kIdQ6.js")), ft = L(() => import("./PenAndPaper-Ct3qJ4lA.js")), yt = L(() => import("./UserOptions-rW2fRf3V.js")), bt = L(() => import("./PackageVersion-DPO-OOVI.js")), mt = L(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_galaxy: kt } = dl(), { isThemeValid: Ct, warnInvalidTheme: wt } = yl(), T = it, k = n(at()), x = n(null), j = n(!1), se = n(""), P = n(null), we = n(0), Te = n(0), $e = n(0), xe = n(0), Se = n(null), Pe = n(null), Ae = n(null), Oe = n(null), M = n(null), K = n(null), Ie = n(!1), R = n(null), ue = n(null), Y = n(!1), q = n(!1), B = n(null), J = n(null), Le = n({ x: 0, y: 0 }), re = n("pointer"), Q = n(!1), De = d(() => !!T.dataset && T.dataset.length), e = n(ce()), U = d(() => e.value.userOptions.useCursorPointer), Tt = d(() => ot({
+      defaultConfig: {
+        userOptions: { show: !1 },
+        table: { show: !1 },
+        useCssAnimation: !1,
+        style: {
+          chart: {
+            backgroundColor: "#99999930",
+            legend: {
+              backgroundColor: "transparent"
+            }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: Z, FINAL_DATASET: _e } = hl({
+      ...Kt(T),
+      FINAL_CONFIG: e,
+      prepareConfig: ce,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await oe(), f.value.showTable = e.value.table.show;
+        });
+      },
+      skeletonDataset: T.config?.skeletonDataset ?? [
+        { name: "_", values: [21], color: "#DBDBDB" },
+        { name: "_", values: [13], color: "#C4C4C4" },
+        { name: "_", values: [8], color: "#ADADAD" }
+      ],
+      skeletonConfig: ot({
+        defaultConfig: e.value,
+        userConfig: Tt.value
+      })
+    });
+    Yt(() => {
+      Ie.value = !0, Ne();
+    });
+    const Fe = d(() => !!e.value.debug);
+    function Ne() {
+      if (Zt(T.dataset) ? nt({
+        componentName: "VueUiGalaxy",
+        type: "dataset",
+        debug: Fe.value
+      }) : T.dataset.forEach((t, a) => {
+        el({
+          datasetObject: t,
+          requiredAttributes: ["name", "values"]
+        }).forEach((l) => {
+          nt({
+            componentName: "VueUiGalaxy",
+            type: "datasetSerieAttribute",
+            property: l,
+            index: a,
+            debug: Fe.value
+          });
+        });
+      }), e.value.responsive) {
+        const t = cl(() => {
+          const { width: a, height: l } = vl({
+            chart: x.value,
+            title: e.value.style.chart.title.text ? Se.value : null,
+            legend: e.value.style.chart.legend.show ? Pe.value : null,
+            noTitle: Oe.value,
+            source: Ae.value
+          });
+          requestAnimationFrame(() => {
+            ee.value = Math.max(0.1, a), te.value = Math.max(0.1, l - 12);
+          });
+        });
+        M.value && (K.value && M.value.unobserve(K.value), M.value.disconnect()), M.value = new ResizeObserver(t), K.value = x.value.parentNode, M.value.observe(K.value);
+      }
+    }
+    const { userOptionsVisible: ie, setUserOptionsVisibility: Be, keepUserOptionState: Ve } = bl({ config: e.value }), { svgRef: _ } = ml({ config: e.value.style.chart.title });
+    function ce() {
+      const t = Ce({
+        userConfig: T.config,
+        defaultConfig: kt
+      }), a = t.theme;
+      if (!a) return t;
+      if (!Ct.value(t))
+        return wt(t), t;
+      const l = Ce({
+        userConfig: Tl[a] || T.config,
+        defaultConfig: t
+      }), o = Ce({
+        userConfig: T.config,
+        defaultConfig: l
+      });
+      return {
+        ...o,
+        customPalette: o.customPalette.length ? o.customPalette : tl[a] || ne
+      };
+    }
+    Qe(() => T.config, (t) => {
+      e.value = ce(), ie.value = !e.value.userOptions.showOnChartHover, Ne(), Te.value += 1, $e.value += 1, xe.value += 1, f.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, f.value.showTable = e.value.table.show, f.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const { isPrinting: ve, isImaging: de, generatePdf: Ee, generateImage: Me } = pl({
+      elementId: `galaxy_${k.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-galaxy",
+      options: e.value.userOptions.print
+    }), $t = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), xt = d(() => ll(e.value.customPalette)), f = n({
+      dataLabels: {
+        show: e.value.style.chart.layout.labels.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    }), ee = n(250), te = n(180), St = n(0), Pt = n(0), A = d(() => ({
+      width: ee.value,
+      height: te.value,
+      viewBox: `${St.value} ${Pt.value} ${ee.value} ${te.value}`
+    })), he = vt, g = n([]);
+    function At() {
+      g.value.length ? g.value = [] : W.value.forEach((t) => {
+        g.value.push(t.id);
+      });
+    }
+    function z(t) {
+      g.value.includes(t.id) ? g.value = g.value.filter((a) => a !== t.id) : g.value.push(t.id), he("selectLegend", V.value.map((a) => ({
+        name: a.name,
+        color: a.color,
+        value: a.value
+      })));
+    }
+    function Re(t) {
+      if (!w.value.length)
+        return e.value.debug && console.warn("VueUiGalaxy - There are no series to show."), null;
+      const a = w.value.find((l) => l.name === t);
+      return a || (e.value.debug && console.warn(`VueUiGalaxy - Series name not found "${t}"`), null);
+    }
+    function Ot(t) {
+      const a = Re(t);
+      a !== null && g.value.includes(a.id) && z({ id: a.id });
+    }
+    function It(t) {
+      const a = Re(t);
+      a !== null && (g.value.includes(a.id) || z({ id: a.id }));
+    }
+    const w = d(() => _e.value.map((t, a) => ({
+      name: t.name,
+      color: al(t.color) || xt.value[a] || ne[a] || ne[a % ne.length],
+      value: t.values ? st(t.values).reduce((l, o) => l + o, 0) : 0,
+      absoluteValues: st(t.values),
+      id: at()
+    })).sort((t, a) => a.value - t.value).map((t, a) => ({
+      ...t,
+      absoluteIndex: a
+    })));
+    function Lt() {
+      return w.value.map((t) => ({
+        name: t.name,
+        color: t.color,
+        value: t.value
+      }));
+    }
+    const S = d(() => w.value.filter((t) => !g.value.includes(t.id)).map((t) => t.value).reduce((t, a) => t + a, 0)), Ue = n(190), ze = d(() => w.value.filter((t) => !g.value.includes(t.id))), Dt = d(
+      () => (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) / 2 + (e.value.style.chart.layout.padding ?? 12)
+    ), _t = d(() => ol({
+      maxPoints: Ue.value,
+      a: e.value.style.chart.layout.arcs.a ?? 6,
+      b: e.value.style.chart.layout.arcs.b ?? 6,
+      angleStep: e.value.style.chart.layout.arcs.angleStep ?? 0.07,
+      startX: A.value.width / 2 + e.value.style.chart.layout.arcs.offsetX,
+      startY: A.value.height / 2 + e.value.style.chart.layout.arcs.offsetY,
+      boxWidth: A.value.width,
+      boxHeight: A.value.height,
+      padding: Dt.value
+    })), V = d(() => {
+      const t = [];
+      for (let a = 0; a < ze.value.length; a += 1) {
+        const l = ze.value[a], o = l.value / S.value * Ue.value + (a > 0 && t.length ? t[a - 1].points : 0);
+        t.push({
+          points: o,
+          ...l,
+          seriesIndex: a,
+          proportion: l.value / S.value,
+          path: _t.value(o)
+        });
+      }
+      return t.filter((a) => !g.value.includes(a.id)).toSorted((a, l) => l.points - a.points);
+    });
+    function ge(t) {
+      const a = Math.min(ee.value, te.value), l = P.value === t.id && e.value.style.chart.layout.arcs.hoverEffect.show ? e.value.style.chart.layout.arcs.hoverEffect.multiplicator : 1, o = (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) * l, v = e.value.style.chart.layout.arcs.strokeWidth * l, s = e.value.style.chart.layout.arcs.strokeWidth / 2 * l;
+      return {
+        border: o / 180 * a,
+        path: v / 180 * a,
+        blur: s / 180 * a
+      };
+    }
+    const F = n(!1);
+    function We(t) {
+      F.value = t, we.value += 1;
+    }
+    const pe = n(null);
+    function fe() {
+      j.value = !1, P.value = null, B.value = null, J.value = null;
+    }
+    function Ft(t) {
+      if (!_.value || !t) return;
+      const a = _.value.querySelector(`[data-a11y-serie-id="${t}"]`);
+      if (!a) return;
+      const l = a.getBoundingClientRect();
+      Le.value = {
+        x: l.left + l.width / 2,
+        y: l.top + l.height / 2
+      };
+    }
+    function Nt(t) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex }), !(J.value === t.id && re.value === "keyboard") && (j.value = !1, P.value = null);
+    }
+    function Ge(t) {
+      he("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.absoluteIndex });
+    }
+    function He({
+      val: t,
+      percentage: a,
+      showVal: l,
+      showPercentage: o
+    }) {
+      const v = e.value.style.chart.layout.labels.dataLabels;
+      return il({
+        config: v,
+        val: t,
+        percentage: a,
+        showVal: l,
+        showPercentage: o
+      });
+    }
+    function Xe({ datapoint: t, _relativeIndex: a, seriesIndex: l, show: o = !1, triggerMode: v = "pointer", flatIndex: s = null }) {
+      if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.absoluteIndex }), !f.value.showTooltip) return;
+      re.value = v, B.value = s, J.value = t.id, pe.value = {
+        datapoint: t,
+        seriesIndex: l,
+        series: w.value,
+        config: e.value
+      }, j.value = o, P.value = t.id;
+      let y = "";
+      const I = e.value.style.chart.tooltip.customFormat;
+      rt(I) && rl(() => I({
+        seriesIndex: l,
+        datapoint: t,
+        series: w.value,
+        config: e.value
+      })) ? se.value = I({
+        seriesIndex: l,
+        datapoint: t,
+        series: w.value,
+        config: e.value
+      }) : (y += `<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>`, y += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg>`, y += `<b>${He({
+        showVal: e.value.style.chart.tooltip.showValue,
+        showPercentage: e.value.style.chart.tooltip.showPercentage,
+        val: ut(
+          e.value.style.chart.layout.labels.dataLabels.formatter,
+          t.value,
+          D({
+            p: e.value.style.chart.layout.labels.dataLabels.prefix,
+            v: t.value,
+            s: e.value.style.chart.layout.labels.dataLabels.suffix,
+            r: e.value.style.chart.tooltip.roundingValue
+          }),
+          { datapoint: t, seriesIndex: l }
+        ),
+        percentage: D({
+          v: t.proportion * 100,
+          s: "%",
+          r: e.value.style.chart.tooltip.roundingPercentage
+        })
+      })}</b></div>`, se.value = `<div>${y}</div>`), v === "keyboard" && oe(() => {
+        Ft(t.id);
+      });
+    }
+    const W = d(() => w.value.map((t, a) => {
+      const l = ut(e.value.style.chart.layout.labels.dataLabels.formatter, t.value, D({
+        p: e.value.style.chart.layout.labels.dataLabels.prefix,
+        v: t.value,
+        s: e.value.style.chart.layout.labels.dataLabels.suffix,
+        r: e.value.style.chart.legend.roundingValue
+      }), { datapoint: t, index: a }), o = isNaN(t.value / S.value) || g.value.includes(t.id) ? "-" : D({ v: t.value / S.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage }), v = He({
+        showVal: e.value.style.chart.legend.showValue,
+        showPercentage: e.value.style.chart.legend.showPercentage,
+        val: l,
+        percentage: o
+      });
+      return {
+        ...t,
+        proportion: (t.value || 0) / _e.value.map((s) => (s.values || []).reduce((y, I) => y + I, 0)).reduce((s, y) => s + y, 0),
+        opacity: g.value.includes(t.id) ? 0.5 : 1,
+        shape: t.shape || "circle",
+        segregate: () => z(t),
+        isSegregated: g.value.includes(t.id),
+        display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${v}`
+      };
+    })), Bt = d(() => ({
+      cy: "galaxy-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" : ""
+    })), O = d(() => {
+      const t = V.value.map((l) => ({
+        name: l.name,
+        color: l.color
+      })), a = V.value.map((l) => l.value);
+      return { head: t, body: a };
+    });
+    function ye(t = null) {
+      oe(() => {
+        const a = O.value.head.map((v, s) => [[
+          v.name
+        ], [O.value.body[s]], [isNaN(O.value.body[s] / S.value) ? "-" : O.value.body[s] / S.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = sl(l);
+        t ? t(o) : ul({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-galaxy" });
+      });
+    }
+    const E = 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>',
+        D({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: S.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
+        "100%"
+      ], a = O.value.head.map((v, s) => {
+        const y = D({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: O.value.body[s], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue });
+        return [
+          {
+            color: v.color,
+            name: v.name
+          },
+          y,
+          isNaN(O.value.body[s] / S.value) ? "-" : D({
+            v: O.value.body[s] / S.value * 100,
+            s: "%",
+            r: 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 {
+        colNames: [
+          e.value.table.columnNames.series,
+          e.value.table.columnNames.value,
+          e.value.table.columnNames.percentage
+        ],
+        head: t,
+        body: a,
+        config: l
+      };
+    });
+    function je() {
+      f.value.showTable = !f.value.showTable;
+    }
+    function Ke() {
+      f.value.showTooltip = !f.value.showTooltip;
+    }
+    const G = n(!1);
+    function be() {
+      G.value = !G.value;
+    }
+    async function Vt({ scale: t = 2 } = {}) {
+      if (!x.value) return;
+      const { width: a, height: l } = x.value.getBoundingClientRect(), o = a / l, { imageUri: v, base64: s } = await kl({ domElement: x.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: v,
+        base64: s,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: l,
+        aspectRatio: o
+      };
+    }
+    const H = d(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = f.value.showTable;
+      return {
+        component: t ? mt : gt,
+        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: x.value,
+          forcedWidth: Math.min(500, window.innerWidth * 0.8),
+          isCursorPointer: U.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
+            }
+          }
+        }
+      };
+    });
+    Qe(() => f.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && R.value ? R.value.open() : "close" in R.value && R.value.close());
+    });
+    function Ye() {
+      f.value.showTable = !1, ue.value && ue.value.setTableIconState(!1);
+    }
+    const Et = d(() => W.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), Mt = d(() => e.value.style.chart.backgroundColor), Rt = d(() => e.value.style.chart.legend), Ut = d(() => e.value.style.chart.title), { exportSvg: zt, getSvg: Wt } = fl({
+      svg: _,
+      title: Ut,
+      legend: Rt,
+      legendItems: Et,
+      backgroundColor: Mt
+    });
+    async function qe({ isCb: t }) {
+      q.value = !0, await oe();
+      try {
+        if (t) {
+          const { blob: a, url: l, text: o, dataUrl: v } = await Wt();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: v }));
+        } else
+          await Promise.resolve(zt());
+      } finally {
+        q.value = !1;
+      }
+    }
+    function Gt(t) {
+      if (t?.stage === "start") {
+        Y.value = !0;
+        return;
+      }
+      if (t?.stage === "end") {
+        Y.value = !1;
+        return;
+      }
+      Me();
+    }
+    async function Je() {
+      if (he("copyAlt", {
+        config: e.value,
+        dataset: w.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: w.value
+      }));
+    }
+    function Ht() {
+      B.value = null, J.value = null, Q.value = !0;
+    }
+    function Xt() {
+      fe(), Q.value = !1;
+    }
+    function jt(t) {
+      if (!_.value || G.value || document.activeElement !== _.value || !N.value.length) return;
+      const a = t.key === "ArrowLeft" || t.key === "ArrowUp", l = t.key === "ArrowRight" || t.key === "ArrowDown", o = t.key === "Enter" || t.key === " ", v = t.key === "Escape";
+      if (!a && !l && !o && !v) return;
+      if (t.preventDefault(), t.stopPropagation(), v) {
+        fe();
+        return;
+      }
+      if (o) {
+        if (B.value === null) return;
+        const I = N.value[B.value];
+        if (!I) return;
+        Ge(I.datapoint);
+        return;
+      }
+      let s = B.value;
+      s === null || s < 0 || s >= N.value.length ? s = l ? 0 : N.value.length - 1 : (s += l ? 1 : -1, s < 0 && (s = N.value.length - 1), s >= N.value.length && (s = 0));
+      const y = N.value[s];
+      y && Xe({
+        datapoint: y.datapoint,
+        seriesIndex: y.datapoint.seriesIndex,
+        show: !0,
+        triggerMode: "keyboard",
+        flatIndex: s
+      });
+    }
+    const me = d(() => {
+      const t = E.value?.colNames ?? [], a = E.value?.body ?? [];
+      return { headers: t, rows: a };
+    }), N = d(() => V.value.map((t, a) => ({
+      datapoint: t,
+      index: a
+    })));
+    return ct({
+      getData: Lt,
+      getImage: Vt,
+      generatePdf: Ee,
+      generateCsv: ye,
+      generateImage: Me,
+      generateSvg: qe,
+      hideSeries: It,
+      showSeries: Ot,
+      toggleTable: je,
+      toggleTooltip: Ke,
+      toggleAnnotator: be,
+      toggleFullscreen: We,
+      copyAlt: Je
+    }), (t, a) => (u(), p("div", {
+      ref_key: "galaxyChart",
+      ref: x,
+      class: le(`vue-data-ui-component vue-ui-galaxy ${F.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"} ${r(Z) ? "loading" : ""}`),
+      style: X(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;${e.value.style.chart.title.text ? "" : "padding-top:36px"};background:${e.value.style.chart.backgroundColor}`),
+      id: `galaxy_${k.value}`,
+      onMouseenter: a[2] || (a[2] = () => r(Be)(!0)),
+      onMouseleave: a[3] || (a[3] = () => {
+        r(Be)(!1), Q.value || fe();
+      })
+    }, [
+      C("div", {
+        id: `chart-instructions-${k.value}`,
+        class: "sr-only"
+      }, [
+        C("p", null, ae(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, Al),
+      me.value?.rows?.length ? (u(), $($l, {
+        key: 0,
+        uid: k.value,
+        head: me.value.headers,
+        body: me.value.rows,
+        notice: e.value.a11y.translations.tableAvailable,
+        caption: e.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : h("", !0),
+      e.value.userOptions.buttons.annotator ? (u(), $(r(ft), {
+        key: 1,
+        svgRef: r(_),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: G.value,
+        isCursorPointer: U.value,
+        onClose: be
+      }, {
+        "annotator-action-close": i(() => [
+          c(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": i(({ color: l }) => [
+          c(t.$slots, "annotator-action-color", b(m({ color: l })), void 0, !0)
+        ]),
+        "annotator-action-draw": i(({ mode: l }) => [
+          c(t.$slots, "annotator-action-draw", b(m({ mode: l })), void 0, !0)
+        ]),
+        "annotator-action-undo": i(({ disabled: l }) => [
+          c(t.$slots, "annotator-action-undo", b(m({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-redo": i(({ disabled: l }) => [
+          c(t.$slots, "annotator-action-redo", b(m({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-delete": i(({ disabled: l }) => [
+          c(t.$slots, "annotator-action-delete", b(m({ disabled: l })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : h("", !0),
+      $t.value ? (u(), p("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: Oe,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : h("", !0),
+      e.value.style.chart.title.text ? (u(), p("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: Se,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (u(), $(Cl, {
+          key: `title_${Te.value}`,
+          config: {
+            title: {
+              cy: "galaxy-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "galaxy-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : h("", !0),
+      C("div", {
+        id: `legend-top-${k.value}`
+      }, null, 8, Ol),
+      e.value.userOptions.show && De.value && (r(Ve) || r(ie)) ? (u(), $(r(yt), {
+        ref_key: "userOptionsRef",
+        ref: ue,
+        key: `user_option_${we.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: r(ve),
+        isImaging: r(de),
+        uid: k.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
+        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,
+        isTooltip: f.value.showTooltip,
+        isFullscreen: F.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: x.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: G.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        isCursorPointer: U.value,
+        onToggleFullscreen: We,
+        onGeneratePdf: r(Ee),
+        onGenerateCsv: ye,
+        onGenerateImage: Gt,
+        onGenerateSvg: qe,
+        onToggleTable: je,
+        onToggleTooltip: Ke,
+        onToggleAnnotator: be,
+        onCopyAlt: Je,
+        style: X({
+          visibility: r(Ve) ? r(ie) ? "visible" : "hidden" : "visible"
+        })
+      }, Ze({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: i(({ isOpen: l, color: o }) => [
+            c(t.$slots, "menuIcon", b(m({ isOpen: l, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: i(() => [
+            c(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: i(() => [
+            c(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: i(() => [
+            c(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: i(() => [
+            c(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: i(() => [
+            c(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: i(() => [
+            c(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: i(({ toggleFullscreen: l, isFullscreen: o }) => [
+            c(t.$slots, "optionFullscreen", b(m({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: i(({ toggleAnnotator: l, isAnnotator: o }) => [
+            c(t.$slots, "optionAnnotator", b(m({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        t.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: i(({ altCopy: l }) => [
+            c(t.$slots, "optionAltCopy", b(m({ altCopy: l })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "hasAltCopy", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : h("", !0),
+      C("div", Il, [
+        (u(), p("svg", {
+          ref_key: "svgRef",
+          ref: _,
+          xmlns: r(nl),
+          "aria-describedby": `chart-instructions-${k.value}`,
+          class: le({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value }),
+          viewBox: A.value.viewBox,
+          style: X(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`),
+          tabindex: "0",
+          onFocus: Ht,
+          onBlur: Xt,
+          onKeydown: jt
+        }, [
+          ke(r(bt)),
+          t.$slots["chart-background"] ? (u(), p("foreignObject", {
+            key: 0,
+            x: 0,
+            y: 0,
+            width: A.value.width,
+            height: A.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            c(t.$slots, "chart-background", {}, void 0, !0)
+          ], 8, Dl)) : h("", !0),
+          C("defs", null, [
+            C("filter", {
+              id: `blur_${k.value}`,
+              x: "-50%",
+              y: "-50%",
+              width: "200%",
+              height: "200%"
+            }, [
+              C("feGaussianBlur", {
+                in: "SourceGraphic",
+                stdDeviation: 100 / e.value.style.chart.layout.arcs.gradient.intensity
+              }, null, 8, Fl)
+            ], 8, _l)
+          ]),
+          (u(!0), p(et, null, tt(V.value, (l) => (u(), p("g", null, [
+            l.value ? (u(), p("path", {
+              key: 0,
+              d: l.path,
+              fill: "none",
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": ge(l).border,
+              "stroke-linecap": "round"
+            }, null, 8, Nl)) : h("", !0),
+            l.value ? (u(), p("path", {
+              key: 1,
+              d: l.path,
+              fill: "none",
+              stroke: l.color,
+              "stroke-width": ge(l).path,
+              "stroke-linecap": "round",
+              class: le(`${P.value && P.value !== l.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
+            }, null, 10, Bl)) : h("", !0),
+            l.value && e.value.style.chart.layout.arcs.gradient.show ? (u(), p("g", {
+              key: 2,
+              filter: `url(#blur_${k.value})`
+            }, [
+              C("path", {
+                d: l.path,
+                fill: "none",
+                stroke: e.value.style.chart.layout.arcs.gradient.color,
+                "stroke-width": ge(l).blur,
+                "stroke-linecap": "round",
+                class: le(`vue-ui-galaxy-gradient ${P.value && P.value !== l.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
+              }, null, 10, El)
+            ], 8, Vl)) : h("", !0)
+          ]))), 256)),
+          (u(!0), p(et, null, tt(V.value, (l, o) => (u(), p("g", null, [
+            l.value ? (u(), p("path", {
+              key: 0,
+              "data-a11y-serie-id": l.id,
+              d: l.path,
+              fill: "none",
+              stroke: "transparent",
+              "stroke-width": e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth,
+              "stroke-linecap": "round",
+              "aria-label": `${l.name}: ${r(D)({
+                p: e.value.style.chart.layout.labels.dataLabels.prefix,
+                v: l.value,
+                s: e.value.style.chart.layout.labels.dataLabels.suffix,
+                r: e.value.style.chart.tooltip.roundingValue
+              })}`,
+              onMouseenter: (v) => Xe({
+                datapoint: l,
+                seriesIndex: l.seriesIndex,
+                show: !0,
+                triggerMode: "pointer",
+                flatIndex: o
+              }),
+              onMouseleave: (v) => Nt(l),
+              onClick: (v) => Ge(l)
+            }, null, 40, Ml)) : h("", !0)
+          ]))), 256)),
+          c(t.$slots, "svg", {
+            svg: {
+              ...A.value,
+              isPrintingImg: r(ve) | r(de) | Y.value,
+              isPrintingSvg: q.value
+            }
+          }, void 0, !0)
+        ], 46, Ll)),
+        t.$slots.hint ? (u(), p("div", Rl, [
+          c(t.$slots, "hint", b(m({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: Q.value })), void 0, !0)
+        ])) : h("", !0)
+      ]),
+      t.$slots.watermark ? (u(), p("div", Ul, [
+        c(t.$slots, "watermark", b(m({ isPrinting: r(ve) || r(de) || Y.value || q.value })), void 0, !0)
+      ])) : h("", !0),
+      C("div", {
+        id: `legend-bottom-${k.value}`
+      }, null, 8, zl),
+      Ie.value ? (u(), $(qt, {
+        key: 6,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${k.value}` : `#legend-bottom-${k.value}`
+      }, [
+        C("div", {
+          ref_key: "chartLegend",
+          ref: Pe
+        }, [
+          e.value.style.chart.legend.show ? (u(), $(wl, {
+            key: `legend_${xe.value}`,
+            legendSet: W.value,
+            config: Bt.value,
+            onClickMarker: a[0] || (a[0] = ({ legend: l }) => z(l))
+          }, {
+            item: i(({ legend: l, index: o }) => [
+              r(Z) ? h("", !0) : (u(), p("div", {
+                key: 0,
+                onClick: (v) => z(l),
+                style: X(`opacity:${g.value.includes(l.id) ? 0.5 : 1}`)
+              }, ae(l.display), 13, Wl))
+            ]),
+            legendToggle: i(() => [
+              W.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !r(Z) ? (u(), $(xl, {
+                key: 0,
+                backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
+                color: e.value.style.chart.legend.selectAllToggle.color,
+                fontSize: e.value.style.chart.legend.fontSize,
+                checked: g.value.length > 0,
+                onToggle: At
+              }, null, 8, ["backgroundColor", "color", "fontSize", "checked"])) : h("", !0)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : h("", !0),
+          c(t.$slots, "legend", { legend: W.value }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : h("", !0),
+      t.$slots.source ? (u(), p("div", {
+        key: 7,
+        ref_key: "source",
+        ref: Ae,
+        dir: "auto"
+      }, [
+        c(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      ke(r(dt), {
+        teleportTo: e.value.style.chart.tooltip.teleportTo,
+        show: f.value.showTooltip && j.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,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: x.value,
+        content: se.value,
+        isFullscreen: F.value,
+        isCustom: r(rt)(e.value.style.chart.tooltip.customFormat),
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter,
+        smoothForce: e.value.style.chart.tooltip.smoothForce,
+        smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold,
+        isA11yMode: re.value === "keyboard",
+        a11yPosition: Le.value
+      }, {
+        "tooltip-before": i(() => [
+          c(t.$slots, "tooltip-before", b(m({ ...pe.value })), void 0, !0)
+        ]),
+        "tooltip-after": i(() => [
+          c(t.$slots, "tooltip-after", b(m({ ...pe.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
+      De.value && e.value.userOptions.buttons.table ? (u(), $(Jt(H.value.component), Qt({ key: 8 }, H.value.props, {
+        ref_key: "tableUnit",
+        ref: R,
+        onClose: Ye
+      }), Ze({
+        content: i(() => [
+          (u(), $(r(pt), {
+            key: `table_${$e.value}`,
+            colNames: E.value.colNames,
+            head: E.value.head,
+            body: E.value.body,
+            config: E.value.config,
+            title: e.value.table.useDialog ? "" : H.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            isCursorPointer: U.value,
+            onClose: Ye
+          }, {
+            th: i(({ th: l }) => [
+              C("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Gl)
+            ]),
+            td: i(({ td: l }) => [
+              lt(ae(l.name || l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: i(() => [
+            lt(ae(H.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: i(() => [
+            C("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[1] || (a[1] = (l) => ye(e.value.userOptions.callbacks.csv)),
+              style: X({ cursor: U.value ? "pointer" : "default" })
+            }, [
+              ke(r(ht), {
+                name: "fileCsv",
+                stroke: H.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : h("", !0),
+      c(t.$slots, "skeleton", {}, () => [
+        r(Z) ? (u(), $(gl, { key: 0 })) : h("", !0)
+      ], !0)
+    ], 46, Pl));
+  }
+}, va = /* @__PURE__ */ Sl(Hl, [["__scopeId", "data-v-8cc4168c"]]);
+export {
+  va as default
+};