vue-data-ui 3.6.0 → 3.7.0

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

@@ -0,0 +1,837 @@
+import { defineAsyncComponent as S, ref as n, computed as d, toRefs as Bt, onMounted as Et, watch as Ee, createElementBlock as v, openBlock as r, unref as s, normalizeStyle as G, normalizeClass as W, createBlock as F, createCommentVNode as h, createElementVNode as $, createVNode as le, withCtx as i, renderSlot as c, normalizeProps as p, guardReactiveProps as y, createSlots as Ie, Fragment as Le, renderList as Ne, Teleport as It, toDisplayString as ae, resolveDynamicComponent as Lt, mergeProps as Nt, createTextVNode as Ve, nextTick as Me } from "vue";
+import { c as Re, t as Vt, o as Mt, g as ze, k as Rt, i as zt, p as U, j as Gt, a5 as Ge, l as Wt, a9 as Ut, a as We, d as D, X as Ht, x as Ue, u as jt, q as Xt, R as Yt } from "./lib-C5BH09_g.js";
+import { t as qt, u as Jt } from "./useResponsive-DfdjqQps.js";
+import { u as Kt, a as ne } from "./useNestedProp-CWo6bftQ.js";
+import { u as Qt, B as Zt } from "./BaseScanner-BgWxam9d.js";
+import { u as eo } from "./usePrinter-DCJzEiS8.js";
+import { u as to } from "./useSvgExport-DrjCWun4.js";
+import { u as oo } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as lo } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ao } from "./useChartAccessibility-9icAAmYg.js";
+import no from "./img-DUzJeMlr.js";
+import ro from "./Title-DfFUb9hd.js";
+import so from "./Legend-Web3GjlR.js";
+import { _ as uo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const He = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, je = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { arcs: { gradient: { show: !1 } } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Xe = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { arcs: { gradient: { show: !1 } } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { arcs: { gradient: { color: "#1A1A1A" } } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, qe = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { arcs: { gradient: { color: "#fbfafa" } } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Je = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { arcs: { gradient: { show: !1 } } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Ke = {
+  default: {},
+  dark: He,
+  celebration: je,
+  celebrationNight: Xe,
+  hack: Ye,
+  zen: qe,
+  concrete: Je
+}, zo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: je,
+  celebrationNight: Xe,
+  concrete: Je,
+  dark: He,
+  default: Ke,
+  hack: Ye,
+  zen: qe
+}, Symbol.toStringTag, { value: "Module" })), io = ["id"], co = ["id"], vo = ["xmlns", "viewBox"], ho = ["width", "height"], go = ["id"], fo = ["stdDeviation"], bo = ["d", "stroke", "stroke-width"], po = ["d", "stroke", "stroke-width"], yo = ["filter"], mo = ["d", "stroke", "stroke-width"], Co = ["d", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], ko = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, wo = ["id"], Ao = ["onClick"], $o = ["innerHTML"], To = {
+  __name: "vue-ui-galaxy",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint"],
+  setup(Qe, { expose: Ze, emit: et }) {
+    const tt = S(() => import("./Tooltip-WD0Ros6G.js")), ot = S(() => import("./BaseIcon-CofSxalQ.js")), lt = S(() => import("./vue-ui-accordion-DSdZUn2C.js")), at = S(() => import("./DataTable-CHaOCmsE.js")), nt = S(() => import("./PenAndPaper-HCZQTkqi.js")), rt = S(() => import("./UserOptions-B3I-s3Lw.js")), st = S(() => import("./PackageVersion-Bq_mtsqr.js")), ut = S(() => import("./BaseDraggableDialog-CRF94NJQ.js")), { vue_ui_galaxy: it } = Kt(), { isThemeValid: ct, warnInvalidTheme: dt } = oo(), m = Qe, C = n(Re()), k = n(null), H = n(!1), j = n(""), O = n(null), re = n(0), se = n(0), ue = n(0), ie = n(0), ce = n(null), de = n(null), ve = n(null), he = n(null), _ = n(null), N = n(null), ge = n(!1), B = n(null), X = n(null), fe = d(() => !!m.dataset && m.dataset.length), e = n(K()), { loading: Y, FINAL_DATASET: be } = Qt({
+      ...Bt(m),
+      FINAL_CONFIG: e,
+      prepareConfig: K,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Me(), f.value.showTable = e.value.table.show;
+        });
+      },
+      skeletonDataset: [
+        { name: "_", values: [21], color: "#DBDBDB" },
+        { name: "_", values: [13], color: "#C4C4C4" },
+        { name: "_", values: [8], color: "#ADADAD" }
+      ],
+      skeletonConfig: Vt({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          useCssAnimation: !1,
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              legend: {
+                backgroundColor: "transparent"
+              }
+            }
+          }
+        }
+      })
+    });
+    Et(() => {
+      ge.value = !0, ye();
+    });
+    const pe = d(() => !!e.value.debug);
+    function ye() {
+      if (Mt(m.dataset) ? ze({
+        componentName: "VueUiGalaxy",
+        type: "dataset",
+        debug: pe.value
+      }) : m.dataset.forEach((t, l) => {
+        Rt({
+          datasetObject: t,
+          requiredAttributes: ["name", "values"]
+        }).forEach((o) => {
+          ze({
+            componentName: "VueUiGalaxy",
+            type: "datasetSerieAttribute",
+            property: o,
+            index: l,
+            debug: pe.value
+          });
+        });
+      }), e.value.responsive) {
+        const t = qt(() => {
+          const { width: l, height: o } = Jt({
+            chart: k.value,
+            title: e.value.style.chart.title.text ? ce.value : null,
+            legend: e.value.style.chart.legend.show ? de.value : null,
+            noTitle: he.value,
+            source: ve.value
+          });
+          requestAnimationFrame(() => {
+            V.value = Math.max(0.1, l), M.value = Math.max(0.1, o - 12);
+          });
+        });
+        _.value && (N.value && _.value.unobserve(N.value), _.value.disconnect()), _.value = new ResizeObserver(t), N.value = k.value.parentNode, _.value.observe(N.value);
+      }
+    }
+    const { userOptionsVisible: q, setUserOptionsVisibility: me, keepUserOptionState: Ce } = lo({ config: e.value }), { svgRef: J } = ao({ config: e.value.style.chart.title });
+    function K() {
+      const t = ne({
+        userConfig: m.config,
+        defaultConfig: it
+      }), l = t.theme;
+      if (!l) return t;
+      if (!ct.value(t))
+        return dt(t), t;
+      const o = ne({
+        userConfig: Ke[l] || m.config,
+        defaultConfig: t
+      }), a = ne({
+        userConfig: m.config,
+        defaultConfig: o
+      });
+      return {
+        ...a,
+        customPalette: a.customPalette.length ? a.customPalette : zt[l] || U
+      };
+    }
+    Ee(() => m.config, (t) => {
+      e.value = K(), q.value = !e.value.userOptions.showOnChartHover, ye(), se.value += 1, ue.value += 1, ie.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: ke, isImaging: we, generatePdf: Ae, generateImage: $e } = eo({
+      elementId: `galaxy_${C.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-galaxy",
+      options: e.value.userOptions.print
+    }), vt = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), ht = d(() => Gt(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
+    }), V = n(250), M = n(180), gt = n(0), ft = n(0), T = d(() => ({
+      width: V.value,
+      height: M.value,
+      viewBox: `${gt.value} ${ft.value} ${V.value} ${M.value}`
+    })), Te = et, b = n([]);
+    function E(t) {
+      b.value.includes(t.id) ? b.value = b.value.filter((l) => l !== t.id) : b.value.push(t.id), Te("selectLegend", I.value.map((l) => ({
+        name: l.name,
+        color: l.color,
+        value: l.value
+      })));
+    }
+    function xe(t) {
+      if (!w.value.length)
+        return e.value.debug && console.warn("VueUiGalaxy - There are no series to show."), null;
+      const l = w.value.find((o) => o.name === t);
+      return l || (e.value.debug && console.warn(`VueUiGalaxy - Series name not found "${t}"`), null);
+    }
+    function bt(t) {
+      const l = xe(t);
+      l !== null && b.value.includes(l.id) && E({ id: l.id });
+    }
+    function pt(t) {
+      const l = xe(t);
+      l !== null && (b.value.includes(l.id) || E({ id: l.id }));
+    }
+    const w = d(() => be.value.map((t, l) => ({
+      name: t.name,
+      color: Wt(t.color) || ht.value[l] || U[l] || U[l % U.length],
+      value: t.values ? Ge(t.values).reduce((o, a) => o + a, 0) : 0,
+      absoluteValues: Ge(t.values),
+      id: Re()
+    })).sort((t, l) => l.value - t.value).map((t, l) => ({
+      ...t,
+      absoluteIndex: l
+    })));
+    function yt() {
+      return w.value.map((t) => ({
+        name: t.name,
+        color: t.color,
+        value: t.value
+      }));
+    }
+    const A = d(() => w.value.filter((t) => !b.value.includes(t.id)).map((t) => t.value).reduce((t, l) => t + l, 0)), Se = n(190), Fe = d(() => w.value.filter((t) => !b.value.includes(t.id))), mt = d(
+      () => (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) / 2 + (e.value.style.chart.layout.padding ?? 12)
+    ), Ct = d(() => Ut({
+      maxPoints: Se.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: T.value.width / 2 + e.value.style.chart.layout.arcs.offsetX,
+      startY: T.value.height / 2 + e.value.style.chart.layout.arcs.offsetY,
+      boxWidth: T.value.width,
+      boxHeight: T.value.height,
+      padding: mt.value
+    })), I = d(() => {
+      const t = [];
+      for (let l = 0; l < Fe.value.length; l += 1) {
+        const o = Fe.value[l], a = o.value / A.value * Se.value + (l > 0 && t.length ? t[l - 1].points : 0);
+        t.push({
+          points: a,
+          ...o,
+          seriesIndex: l,
+          proportion: o.value / A.value,
+          path: Ct.value(a)
+        });
+      }
+      return t.filter((l) => !b.value.includes(l.id)).toSorted((l, o) => o.points - l.points);
+    });
+    function Q(t) {
+      const l = Math.min(V.value, M.value), o = O.value === t.id && e.value.style.chart.layout.arcs.hoverEffect.show ? e.value.style.chart.layout.arcs.hoverEffect.multiplicator : 1, a = (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) * o, u = e.value.style.chart.layout.arcs.strokeWidth * o, g = e.value.style.chart.layout.arcs.strokeWidth / 2 * o;
+      return {
+        border: a / 180 * l,
+        path: u / 180 * l,
+        blur: g / 180 * l
+      };
+    }
+    const P = n(!1);
+    function De(t) {
+      P.value = t, re.value += 1;
+    }
+    const Z = n(null);
+    function kt(t) {
+      H.value = !1, O.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex });
+    }
+    function wt(t) {
+      Te("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.absoluteIndex });
+    }
+    function At({ datapoint: t, _relativeIndex: l, seriesIndex: o, show: a = !1 }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.absoluteIndex }), Z.value = {
+        datapoint: t,
+        seriesIndex: o,
+        series: w.value,
+        config: e.value
+      }, H.value = a, O.value = t.id;
+      let u = "";
+      const g = e.value.style.chart.tooltip.customFormat;
+      Ue(g) && Yt(() => g({
+        seriesIndex: o,
+        datapoint: t,
+        series: w.value,
+        config: e.value
+      })) ? j.value = g({
+        seriesIndex: o,
+        datapoint: t,
+        series: w.value,
+        config: e.value
+      }) : (u += `<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>`, u += `<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>`, e.value.style.chart.tooltip.showValue && (u += `<b>${We(
+        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: o }
+      )}</b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? u += `<span>(${D({
+        v: t.proportion * 100,
+        s: "%",
+        r: e.value.style.chart.tooltip.roundingPercentage
+      })})</span></div>` : u += `<b>${D({
+        v: t.proportion * 100,
+        s: "%",
+        r: e.value.style.chart.tooltip.roundingPercentage
+      })}</b></div>`), j.value = `<div>${u}</div>`);
+    }
+    const ee = d(() => w.value.map((t, l) => ({
+      ...t,
+      proportion: (t.value || 0) / be.value.map((o) => (o.values || []).reduce((a, u) => a + u, 0)).reduce((o, a) => o + a, 0),
+      opacity: b.value.includes(t.id) ? 0.5 : 1,
+      shape: t.shape || "circle",
+      segregate: () => E(t),
+      isSegregated: b.value.includes(t.id),
+      display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${e.value.style.chart.legend.showValue ? We(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: l }) : ""}${e.value.style.chart.legend.showPercentage ? b.value.includes(t.id) ? `${e.value.style.chart.legend.showValue ? " (" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? " (" : ""}${isNaN(t.value / A.value) ? "-" : D({ v: t.value / A.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""}`
+    }))), $t = 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" : ""
+    })), x = d(() => {
+      const t = I.value.map((o) => ({
+        name: o.name,
+        color: o.color
+      })), l = I.value.map((o) => o.value);
+      return { head: t, body: l };
+    });
+    function te(t = null) {
+      Me(() => {
+        const l = x.value.head.map((u, g) => [[
+          u.name
+        ], [x.value.body[g]], [isNaN(x.value.body[g] / A.value) ? "-" : x.value.body[g] / A.value * 100]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(l), a = jt(o);
+        t ? t(a) : Xt({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-galaxy" });
+      });
+    }
+    const R = 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: A.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
+        "100%"
+      ], l = x.value.head.map((u, g) => {
+        const _t = D({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: x.value.body[g], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue });
+        return [
+          {
+            color: u.color,
+            name: u.name
+          },
+          _t,
+          isNaN(x.value.body[g] / A.value) ? "-" : D({
+            v: x.value.body[g] / A.value * 100,
+            s: "%",
+            r: e.value.table.td.roundingPercentage
+          })
+        ];
+      }), o = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      };
+      return {
+        colNames: [
+          e.value.table.columnNames.series,
+          e.value.table.columnNames.value,
+          e.value.table.columnNames.percentage
+        ],
+        head: t,
+        body: l,
+        config: o
+      };
+    });
+    function Oe() {
+      f.value.showTable = !f.value.showTable;
+    }
+    function Pe() {
+      f.value.showTooltip = !f.value.showTooltip;
+    }
+    const z = n(!1);
+    function oe() {
+      z.value = !z.value;
+    }
+    async function Tt({ scale: t = 2 } = {}) {
+      if (!k.value) return;
+      const { width: l, height: o } = k.value.getBoundingClientRect(), a = l / o, { imageUri: u, base64: g } = await no({ domElement: k.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: u,
+        base64: g,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: o,
+        aspectRatio: a
+      };
+    }
+    const L = d(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, l = f.value.showTable;
+      return {
+        component: t ? ut : lt,
+        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: P.value,
+          fullscreenParent: k.value,
+          forcedWidth: Math.min(500, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: l,
+            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
+            }
+          }
+        }
+      };
+    });
+    Ee(() => f.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && B.value ? B.value.open() : "close" in B.value && B.value.close());
+    });
+    function _e() {
+      f.value.showTable = !1, X.value && X.value.setTableIconState(!1);
+    }
+    const xt = d(() => ee.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), St = d(() => e.value.style.chart.backgroundColor), Ft = d(() => e.value.style.chart.legend), Dt = d(() => e.value.style.chart.title), { exportSvg: Ot, getSvg: Pt } = to({
+      svg: J,
+      title: Dt,
+      legend: Ft,
+      legendItems: xt,
+      backgroundColor: St
+    });
+    async function Be({ isCb: t }) {
+      if (t) {
+        const { blob: l, url: o, text: a, dataUrl: u } = await Pt();
+        e.value.userOptions.callbacks.svg({ blob: l, url: o, text: a, dataUrl: u });
+      } else
+        Ot();
+    }
+    return Ze({
+      getData: yt,
+      getImage: Tt,
+      generatePdf: Ae,
+      generateCsv: te,
+      generateImage: $e,
+      generateSvg: Be,
+      hideSeries: pt,
+      showSeries: bt,
+      toggleTable: Oe,
+      toggleTooltip: Pe,
+      toggleAnnotator: oe,
+      toggleFullscreen: De
+    }), (t, l) => (r(), v("div", {
+      ref_key: "galaxyChart",
+      ref: k,
+      class: W(`vue-data-ui-component vue-ui-galaxy ${P.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"} ${s(Y) ? "loading" : ""}`),
+      style: G(`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_${C.value}`,
+      onMouseenter: l[2] || (l[2] = () => s(me)(!0)),
+      onMouseleave: l[3] || (l[3] = () => s(me)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (r(), F(s(nt), {
+        key: 0,
+        svgRef: s(J),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: z.value,
+        onClose: oe
+      }, {
+        "annotator-action-close": i(() => [
+          c(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": i(({ color: o }) => [
+          c(t.$slots, "annotator-action-color", p(y({ color: o })), void 0, !0)
+        ]),
+        "annotator-action-draw": i(({ mode: o }) => [
+          c(t.$slots, "annotator-action-draw", p(y({ mode: o })), void 0, !0)
+        ]),
+        "annotator-action-undo": i(({ disabled: o }) => [
+          c(t.$slots, "annotator-action-undo", p(y({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-redo": i(({ disabled: o }) => [
+          c(t.$slots, "annotator-action-redo", p(y({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-delete": i(({ disabled: o }) => [
+          c(t.$slots, "annotator-action-delete", p(y({ disabled: o })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
+      vt.value ? (r(), v("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: he,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : h("", !0),
+      e.value.style.chart.title.text ? (r(), v("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ce,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (r(), F(ro, {
+          key: `title_${se.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),
+      $("div", {
+        id: `legend-top-${C.value}`
+      }, null, 8, co),
+      e.value.userOptions.show && fe.value && (s(Ce) || s(q)) ? (r(), F(s(rt), {
+        ref_key: "userOptionsRef",
+        ref: X,
+        key: `user_option_${re.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: s(ke),
+        isImaging: s(we),
+        uid: C.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,
+        isTooltip: f.value.showTooltip,
+        isFullscreen: P.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: k.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: z.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleFullscreen: De,
+        onGeneratePdf: s(Ae),
+        onGenerateCsv: te,
+        onGenerateImage: s($e),
+        onGenerateSvg: Be,
+        onToggleTable: Oe,
+        onToggleTooltip: Pe,
+        onToggleAnnotator: oe,
+        style: G({
+          visibility: s(Ce) ? s(q) ? "visible" : "hidden" : "visible"
+        })
+      }, Ie({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: i(({ isOpen: o, color: a }) => [
+            c(t.$slots, "menuIcon", p(y({ isOpen: o, color: a })), 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: o, isFullscreen: a }) => [
+            c(t.$slots, "optionFullscreen", p(y({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: i(({ toggleAnnotator: o, isAnnotator: a }) => [
+            c(t.$slots, "optionAnnotator", p(y({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
+      (r(), v("svg", {
+        ref_key: "svgRef",
+        ref: J,
+        xmlns: s(Ht),
+        class: W({ "vue-data-ui-fullscreen--on": P.value, "vue-data-ui-fulscreen--off": !P.value }),
+        viewBox: T.value.viewBox,
+        style: G(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        le(s(st)),
+        t.$slots["chart-background"] ? (r(), v("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: T.value.width,
+          height: T.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          c(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, ho)) : h("", !0),
+        $("defs", null, [
+          $("filter", {
+            id: `blur_${C.value}`,
+            x: "-50%",
+            y: "-50%",
+            width: "200%",
+            height: "200%"
+          }, [
+            $("feGaussianBlur", {
+              in: "SourceGraphic",
+              stdDeviation: 100 / e.value.style.chart.layout.arcs.gradient.intensity
+            }, null, 8, fo)
+          ], 8, go)
+        ]),
+        (r(!0), v(Le, null, Ne(I.value, (o) => (r(), v("g", null, [
+          o.value ? (r(), v("path", {
+            key: 0,
+            d: o.path,
+            fill: "none",
+            stroke: e.value.style.chart.backgroundColor,
+            "stroke-width": Q(o).border,
+            "stroke-linecap": "round"
+          }, null, 8, bo)) : h("", !0),
+          o.value ? (r(), v("path", {
+            key: 1,
+            d: o.path,
+            fill: "none",
+            stroke: o.color,
+            "stroke-width": Q(o).path,
+            "stroke-linecap": "round",
+            class: W(`${O.value && O.value !== o.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
+          }, null, 10, po)) : h("", !0),
+          o.value && e.value.style.chart.layout.arcs.gradient.show ? (r(), v("g", {
+            key: 2,
+            filter: `url(#blur_${C.value})`
+          }, [
+            $("path", {
+              d: o.path,
+              fill: "none",
+              stroke: e.value.style.chart.layout.arcs.gradient.color,
+              "stroke-width": Q(o).blur,
+              "stroke-linecap": "round",
+              class: W(`vue-ui-galaxy-gradient ${O.value && O.value !== o.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
+            }, null, 10, mo)
+          ], 8, yo)) : h("", !0)
+        ]))), 256)),
+        (r(!0), v(Le, null, Ne(I.value, (o, a) => (r(), v("g", null, [
+          o.value ? (r(), v("path", {
+            key: 0,
+            d: o.path,
+            fill: "none",
+            stroke: "transparent",
+            "stroke-width": e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth,
+            "stroke-linecap": "round",
+            onMouseenter: (u) => At({
+              datapoint: o,
+              seriesIndex: o.seriesIndex,
+              show: !0
+            }),
+            onMouseleave: (u) => kt(o),
+            onClick: (u) => wt(o)
+          }, null, 40, Co)) : h("", !0)
+        ]))), 256)),
+        c(t.$slots, "svg", { svg: T.value }, void 0, !0)
+      ], 14, vo)),
+      t.$slots.watermark ? (r(), v("div", ko, [
+        c(t.$slots, "watermark", p(y({ isPrinting: s(ke) || s(we) })), void 0, !0)
+      ])) : h("", !0),
+      $("div", {
+        id: `legend-bottom-${C.value}`
+      }, null, 8, wo),
+      ge.value ? (r(), F(It, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${C.value}` : `#legend-bottom-${C.value}`
+      }, [
+        $("div", {
+          ref_key: "chartLegend",
+          ref: de
+        }, [
+          e.value.style.chart.legend.show ? (r(), F(so, {
+            key: `legend_${ie.value}`,
+            legendSet: ee.value,
+            config: $t.value,
+            onClickMarker: l[0] || (l[0] = ({ legend: o }) => E(o))
+          }, {
+            item: i(({ legend: o, index: a }) => [
+              s(Y) ? h("", !0) : (r(), v("div", {
+                key: 0,
+                onClick: (u) => E(o),
+                style: G(`opacity:${b.value.includes(o.id) ? 0.5 : 1}`)
+              }, ae(o.display), 13, Ao))
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : h("", !0),
+          c(t.$slots, "legend", { legend: ee.value }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : h("", !0),
+      t.$slots.source ? (r(), v("div", {
+        key: 6,
+        ref_key: "source",
+        ref: ve,
+        dir: "auto"
+      }, [
+        c(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      le(s(tt), {
+        show: f.value.showTooltip && H.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: k.value,
+        content: j.value,
+        isFullscreen: P.value,
+        isCustom: s(Ue)(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
+      }, {
+        "tooltip-before": i(() => [
+          c(t.$slots, "tooltip-before", p(y({ ...Z.value })), void 0, !0)
+        ]),
+        "tooltip-after": i(() => [
+          c(t.$slots, "tooltip-after", p(y({ ...Z.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
+      fe.value && e.value.userOptions.buttons.table ? (r(), F(Lt(L.value.component), Nt({ key: 7 }, L.value.props, {
+        ref_key: "tableUnit",
+        ref: B,
+        onClose: _e
+      }), Ie({
+        content: i(() => [
+          (r(), F(s(at), {
+            key: `table_${ue.value}`,
+            colNames: R.value.colNames,
+            head: R.value.head,
+            body: R.value.body,
+            config: R.value.config,
+            title: e.value.table.useDialog ? "" : L.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: _e
+          }, {
+            th: i(({ th: o }) => [
+              $("div", {
+                innerHTML: o,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, $o)
+            ]),
+            td: i(({ td: o }) => [
+              Ve(ae(o.name || o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: i(() => [
+            Ve(ae(L.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: i(() => [
+            $("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[1] || (l[1] = (o) => te(e.value.userOptions.callbacks.csv))
+            }, [
+              le(s(ot), {
+                name: "excel",
+                stroke: L.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : h("", !0),
+      s(Y) ? (r(), F(Zt, { key: 8 })) : h("", !0)
+    ], 46, io));
+  }
+}, xo = /* @__PURE__ */ uo(To, [["__scopeId", "data-v-0d1007ad"]]), Go = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: xo
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  zo as a,
+  Go as b,
+  xo as v
+};