vue-data-ui 3.0.2 → 3.0.4

package/dist/{vue-ui-galaxy-Crh7xV6s.js → vue-ui-galaxy-BnPiyPdD.js}

@@ -1,17 +1,17 @@
-import { defineAsyncComponent as C, ref as u, computed as v, toRefs as ut, onMounted as nt, watch as rt, createElementBlock as i, openBlock as n, unref as o, normalizeStyle as z, normalizeClass as R, createBlock as S, createCommentVNode as d, createElementVNode as O, createVNode as Te, createSlots as it, withCtx as g, renderSlot as h, normalizeProps as _, guardReactiveProps as I, Fragment as Se, renderList as Pe, toDisplayString as F, createTextVNode as ct, nextTick as vt } from "vue";
-import { u as dt, c as Oe, t as ht, o as gt, f as _e, g as pt, a as yt, p as W, b as ft, d as bt, G as Ie, e as mt, M as kt, i as $, X as wt, k as Le, y as Ae, v as Ct, w as $t, z as xt } from "./index-B9Ct1B_p.js";
-import { t as Tt, u as St } from "./useResponsive-DfdjqQps.js";
-import { u as Pt, B as Ot } from "./useLoading-D7YHNtLX.js";
-import { u as _t } from "./usePrinter-DcZXg1hH.js";
-import { u as Ne } from "./useNestedProp-C0gKxLur.js";
-import { u as It } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Lt } from "./useChartAccessibility-9icAAmYg.js";
-import At from "./img-Cv4nScI0.js";
-import { _ as Nt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["id"], Mt = ["stdDeviation"], Et = ["d", "stroke", "stroke-width"], zt = ["d", "stroke", "stroke-width"], Rt = ["filter"], Wt = ["d", "stroke", "stroke-width"], Gt = ["d", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], Ht = {
+import { defineAsyncComponent as $, ref as s, computed as d, toRefs as nt, onMounted as rt, watch as it, createElementBlock as i, openBlock as n, unref as o, normalizeStyle as z, normalizeClass as R, createBlock as x, createCommentVNode as c, createElementVNode as T, createVNode as _e, createSlots as ct, withCtx as g, renderSlot as h, normalizeProps as I, guardReactiveProps as L, Fragment as Se, renderList as Pe, Teleport as vt, toDisplayString as F, createTextVNode as dt, nextTick as ht } from "vue";
+import { u as gt, c as Oe, t as pt, o as yt, f as Ie, g as ft, a as bt, p as W, b as mt, d as kt, G as Le, e as wt, M as Ct, i as _, X as $t, k as Ae, y as Ne, v as xt, w as Tt, z as _t } from "./index-q-LPw2IT.js";
+import { t as St, u as Pt } from "./useResponsive-DfdjqQps.js";
+import { u as Ot, B as It } from "./useLoading-D7YHNtLX.js";
+import { u as Lt } from "./usePrinter-DX7efa1s.js";
+import { u as Fe } from "./useNestedProp-04aFeUYu.js";
+import { u as At } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Nt } from "./useChartAccessibility-9icAAmYg.js";
+import Ft from "./img-Ctts6JQb.js";
+import { _ as Vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Dt = ["id"], Bt = ["id"], Mt = ["xmlns", "viewBox"], Et = ["width", "height"], zt = ["id"], Rt = ["stdDeviation"], Wt = ["d", "stroke", "stroke-width"], Gt = ["d", "stroke", "stroke-width"], Ht = ["filter"], Ut = ["d", "stroke", "stroke-width"], Xt = ["d", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], Yt = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Ut = ["onClick"], Xt = ["innerHTML"], Yt = {
+}, jt = ["id"], qt = ["onClick"], Jt = ["innerHTML"], Kt = {
   __name: "vue-ui-galaxy",
   props: {
     config: {
@@ -28,9 +28,9 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
     }
   },
   emits: ["selectLegend", "selectDatapoint"],
-  setup(Fe, { expose: Ve, emit: De }) {
-    const Be = C(() => import("./Title-CntvKJss.js")), Me = C(() => import("./Legend-CQsASoei.js")), Ee = C(() => import("./vue-ui-accordion-B31QK9Hj.js")), ze = C(() => import("./DataTable-osx68WLA.js")), Re = C(() => import("./Tooltip-DF8e4iB9.js")), We = C(() => import("./PenAndPaper-CdXspg5R.js")), Ge = C(() => import("./UserOptions-DQyIO0ts.js")), He = C(() => import("./PackageVersion-DZGrOKw5.js")), { vue_ui_galaxy: Ue } = dt(), b = Fe, L = u(Oe()), m = u(null), Xe = u(null), G = u(!1), H = u(""), x = u(null), Q = u(0), Z = u(0), ee = u(0), te = u(0), le = u(null), ae = u(null), oe = u(null), se = u(null), A = u(null), V = u(null), ue = v(() => !!b.dataset && b.dataset.length), e = u(Y()), { loading: U, FINAL_DATASET: ne } = Pt({
-      ...ut(b),
+  setup(Ve, { expose: De, emit: Be }) {
+    const Me = $(() => import("./Title-B55R8CAZ.js")), Ee = $(() => import("./Legend-DcDSkq99.js")), ze = $(() => import("./vue-ui-accordion-D46i_gkB.js")), Re = $(() => import("./DataTable-rj9-mAwF.js")), We = $(() => import("./Tooltip-BMOddG-M.js")), Ge = $(() => import("./PenAndPaper-BJ0hcgsa.js")), He = $(() => import("./UserOptions-DVzyjG-W.js")), Ue = $(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_galaxy: Xe } = gt(), m = Ve, f = s(Oe()), k = s(null), Ye = s(null), G = s(!1), H = s(""), S = s(null), Q = s(0), Z = s(0), ee = s(0), te = s(0), le = s(null), ae = s(null), oe = s(null), se = s(null), A = s(null), V = s(null), ue = s(!1), ne = d(() => !!m.dataset && m.dataset.length), e = s(Y()), { loading: U, FINAL_DATASET: re } = Ot({
+      ...nt(m),
       FINAL_CONFIG: e,
       prepareConfig: Y,
       skeletonDataset: [
@@ -38,7 +38,7 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
         { name: "_", values: [13], color: "#C4C4C4" },
         { name: "_", values: [8], color: "#ADADAD" }
       ],
-      skeletonConfig: ht({
+      skeletonConfig: pt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -55,32 +55,32 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
         }
       })
     });
-    nt(() => {
-      ie();
+    rt(() => {
+      ue.value = !0, ce();
     });
-    const re = v(() => !!e.value.debug);
-    function ie() {
-      if (gt(b.dataset) ? _e({
+    const ie = d(() => !!e.value.debug);
+    function ce() {
+      if (yt(m.dataset) ? Ie({
         componentName: "VueUiGalaxy",
         type: "dataset",
-        debug: re.value
-      }) : b.dataset.forEach((t, a) => {
-        pt({
+        debug: ie.value
+      }) : m.dataset.forEach((t, a) => {
+        ft({
           datasetObject: t,
           requiredAttributes: ["name", "values"]
         }).forEach((l) => {
-          _e({
+          Ie({
             componentName: "VueUiGalaxy",
             type: "datasetSerieAttribute",
             property: l,
             index: a,
-            debug: re.value
+            debug: ie.value
           });
         });
       }), e.value.responsive) {
-        const t = Tt(() => {
-          const { width: a, height: l } = St({
-            chart: m.value,
+        const t = St(() => {
+          const { width: a, height: l } = Pt({
+            chart: k.value,
             title: e.value.style.chart.title.text ? le.value : null,
             legend: e.value.style.chart.legend.show ? ae.value : null,
             noTitle: se.value,
@@ -90,193 +90,193 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
             D.value = Math.max(0.1, a), B.value = Math.max(0.1, l - 12);
           });
         });
-        A.value && (V.value && A.value.unobserve(V.value), A.value.disconnect()), A.value = new ResizeObserver(t), V.value = m.value.parentNode, A.value.observe(V.value);
+        A.value && (V.value && A.value.unobserve(V.value), A.value.disconnect()), A.value = new ResizeObserver(t), V.value = k.value.parentNode, A.value.observe(V.value);
       }
     }
-    const { userOptionsVisible: X, setUserOptionsVisibility: ce, keepUserOptionState: ve } = It({ config: e.value }), { svgRef: de } = Lt({ config: e.value.style.chart.title });
+    const { userOptionsVisible: X, setUserOptionsVisibility: ve, keepUserOptionState: de } = At({ config: e.value }), { svgRef: he } = Nt({ config: e.value.style.chart.title });
     function Y() {
-      const t = Ne({
-        userConfig: b.config,
-        defaultConfig: Ue
+      const t = Fe({
+        userConfig: m.config,
+        defaultConfig: Xe
       });
       return t.theme ? {
-        ...Ne({
-          userConfig: ft.vue_ui_galaxy[t.theme] || b.config,
+        ...Fe({
+          userConfig: mt.vue_ui_galaxy[t.theme] || m.config,
           defaultConfig: t
         }),
-        customPalette: yt[t.theme] || W
+        customPalette: bt[t.theme] || W
       } : t;
     }
-    rt(() => b.config, (t) => {
-      e.value = Y(), X.value = !e.value.userOptions.showOnChartHover, ie(), Z.value += 1, ee.value += 1, te.value += 1, p.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, p.value.showTable = e.value.table.show, p.value.showTooltip = e.value.style.chart.tooltip.show;
+    it(() => m.config, (t) => {
+      e.value = Y(), X.value = !e.value.userOptions.showOnChartHover, ce(), Z.value += 1, ee.value += 1, te.value += 1, p.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, p.value.showTable = e.value.table.show, p.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const { isPrinting: he, isImaging: ge, generatePdf: pe, generateImage: ye } = _t({
-      elementId: `galaxy_${L.value}`,
+    const { isPrinting: ge, isImaging: pe, generatePdf: ye, generateImage: fe } = Lt({
+      elementId: `galaxy_${f.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-galaxy",
       options: e.value.userOptions.print
-    }), Ye = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), je = v(() => bt(e.value.customPalette)), p = u({
+    }), je = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), qe = d(() => kt(e.value.customPalette)), p = s({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
-    }), D = u(250), B = u(180), qe = u(0), Je = u(0), k = v(() => ({
+    }), D = s(250), B = s(180), Je = s(0), Ke = s(0), w = d(() => ({
       width: D.value,
       height: B.value,
-      viewBox: `${qe.value} ${Je.value} ${D.value} ${B.value}`
-    })), fe = De, y = u([]);
+      viewBox: `${Je.value} ${Ke.value} ${D.value} ${B.value}`
+    })), be = Be, y = s([]);
     function j(t) {
-      y.value.includes(t.id) ? y.value = y.value.filter((a) => a !== t.id) : y.value.push(t.id), fe("selectLegend", N.value.map((a) => ({
+      y.value.includes(t.id) ? y.value = y.value.filter((a) => a !== t.id) : y.value.push(t.id), be("selectLegend", N.value.map((a) => ({
         name: a.name,
         color: a.color,
         value: a.value
       })));
     }
-    const T = v(() => ne.value.map((t, a) => ({
+    const P = d(() => re.value.map((t, a) => ({
       name: t.name,
-      color: mt(t.color) || je.value[a] || W[a] || W[a % W.length],
-      value: t.values ? Ie(t.values).reduce((l, s) => l + s, 0) : 0,
-      absoluteValues: Ie(t.values),
+      color: wt(t.color) || qe.value[a] || W[a] || W[a % W.length],
+      value: t.values ? Le(t.values).reduce((l, u) => l + u, 0) : 0,
+      absoluteValues: Le(t.values),
       id: Oe()
     })).sort((t, a) => a.value - t.value).map((t, a) => ({
       ...t,
       absoluteIndex: a
     })));
-    function Ke() {
-      return T.value.map((t) => ({
+    function Qe() {
+      return P.value.map((t) => ({
         name: t.name,
         color: t.color,
         value: t.value
       }));
     }
-    const f = v(() => T.value.filter((t) => !y.value.includes(t.id)).map((t) => t.value).reduce((t, a) => t + a, 0)), be = u(190), me = v(() => T.value.filter((t) => !y.value.includes(t.id))), Qe = v(
+    const b = d(() => P.value.filter((t) => !y.value.includes(t.id)).map((t) => t.value).reduce((t, a) => t + a, 0)), me = s(190), ke = d(() => P.value.filter((t) => !y.value.includes(t.id))), Ze = d(
       () => (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) / 2 + (e.value.style.chart.layout.padding ?? 12)
-    ), Ze = v(() => kt({
-      maxPoints: be.value,
+    ), et = d(() => Ct({
+      maxPoints: me.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: k.value.width / 2 + e.value.style.chart.layout.arcs.offsetX,
-      startY: k.value.height / 2 + e.value.style.chart.layout.arcs.offsetY,
-      boxWidth: k.value.width,
-      boxHeight: k.value.height,
-      padding: Qe.value
-    })), N = v(() => {
+      startX: w.value.width / 2 + e.value.style.chart.layout.arcs.offsetX,
+      startY: w.value.height / 2 + e.value.style.chart.layout.arcs.offsetY,
+      boxWidth: w.value.width,
+      boxHeight: w.value.height,
+      padding: Ze.value
+    })), N = d(() => {
       const t = [];
-      for (let a = 0; a < me.value.length; a += 1) {
-        const l = me.value[a], s = l.value / f.value * be.value + (a > 0 && t.length ? t[a - 1].points : 0);
+      for (let a = 0; a < ke.value.length; a += 1) {
+        const l = ke.value[a], u = l.value / b.value * me.value + (a > 0 && t.length ? t[a - 1].points : 0);
         t.push({
-          points: s,
+          points: u,
           ...l,
           seriesIndex: a,
-          proportion: l.value / f.value,
-          path: Ze.value(s)
+          proportion: l.value / b.value,
+          path: et.value(u)
         });
       }
       return t.filter((a) => !y.value.includes(a.id)).toSorted((a, l) => l.points - a.points);
     });
     function q(t) {
-      const a = Math.min(D.value, B.value), l = x.value === t.id && e.value.style.chart.layout.arcs.hoverEffect.show ? e.value.style.chart.layout.arcs.hoverEffect.multiplicator : 1, s = (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) * l, r = e.value.style.chart.layout.arcs.strokeWidth * l, c = e.value.style.chart.layout.arcs.strokeWidth / 2 * l;
+      const a = Math.min(D.value, B.value), l = S.value === t.id && e.value.style.chart.layout.arcs.hoverEffect.show ? e.value.style.chart.layout.arcs.hoverEffect.multiplicator : 1, u = (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) * l, r = e.value.style.chart.layout.arcs.strokeWidth * l, v = e.value.style.chart.layout.arcs.strokeWidth / 2 * l;
       return {
-        border: s / 180 * a,
+        border: u / 180 * a,
         path: r / 180 * a,
-        blur: c / 180 * a
+        blur: v / 180 * a
       };
     }
-    const P = u(!1);
-    function ke(t) {
-      P.value = t, Q.value += 1;
-    }
-    const J = u(null);
-    function et(t) {
-      G.value = !1, x.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex });
+    const O = s(!1);
+    function we(t) {
+      O.value = t, Q.value += 1;
     }
+    const J = s(null);
     function tt(t) {
-      fe("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.absoluteIndex });
+      G.value = !1, S.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex });
+    }
+    function lt(t) {
+      be("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.absoluteIndex });
     }
-    function lt({ datapoint: t, _relativeIndex: a, seriesIndex: l, show: s = !1 }) {
+    function at({ datapoint: t, _relativeIndex: a, seriesIndex: l, show: u = !1 }) {
       e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.absoluteIndex }), J.value = {
         datapoint: t,
         seriesIndex: l,
-        series: T.value,
+        series: P.value,
         config: e.value
-      }, G.value = s, x.value = t.id;
+      }, G.value = u, S.value = t.id;
       let r = "";
-      const c = e.value.style.chart.tooltip.customFormat;
-      Ae(c) && xt(() => c({
+      const v = e.value.style.chart.tooltip.customFormat;
+      Ne(v) && _t(() => v({
         seriesIndex: l,
         datapoint: t,
-        series: T.value,
+        series: P.value,
         config: e.value
-      })) ? H.value = c({
+      })) ? H.value = v({
         seriesIndex: l,
         datapoint: t,
-        series: T.value,
+        series: P.value,
         config: e.value
-      }) : (r += `<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>`, r += `<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 && (r += `<b>${Le(
+      }) : (r += `<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>`, r += `<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 && (r += `<b>${Ae(
         e.value.style.chart.layout.labels.dataLabels.formatter,
         t.value,
-        $({
+        _({
           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 }
-      )}</b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? r += `<span>(${$({
+      )}</b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? r += `<span>(${_({
         v: t.proportion * 100,
         s: "%",
         r: e.value.style.chart.tooltip.roundingPercentage
-      })})</span></div>` : r += `<b>${$({
+      })})</span></div>` : r += `<b>${_({
         v: t.proportion * 100,
         s: "%",
         r: e.value.style.chart.tooltip.roundingPercentage
       })}</b></div>`), H.value = `<div>${r}</div>`);
     }
-    const we = v(() => T.value.map((t, a) => ({
+    const Ce = d(() => P.value.map((t, a) => ({
       ...t,
-      proportion: (t.value || 0) / ne.value.map((l) => (l.values || []).reduce((s, r) => s + r, 0)).reduce((l, s) => l + s, 0),
+      proportion: (t.value || 0) / re.value.map((l) => (l.values || []).reduce((u, r) => u + r, 0)).reduce((l, u) => l + u, 0),
       opacity: y.value.includes(t.id) ? 0.5 : 1,
       shape: t.shape || "circle",
       segregate: () => j(t),
       isSegregated: y.value.includes(t.id)
-    }))), at = v(() => ({
+    }))), ot = 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" : ""
-    })), w = v(() => {
+    })), C = d(() => {
       const t = N.value.map((l) => ({
         name: l.name,
         color: l.color
       })), a = N.value.map((l) => l.value);
       return { head: t, body: a };
     });
-    function Ce(t = null) {
-      vt(() => {
-        const a = w.value.head.map((r, c) => [[
+    function $e(t = null) {
+      ht(() => {
+        const a = C.value.head.map((r, v) => [[
           r.name
-        ], [w.value.body[c]], [isNaN(w.value.body[c] / f.value) ? "-" : w.value.body[c] / f.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), s = Ct(l);
-        t ? t(s) : $t({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-galaxy" });
+        ], [C.value.body[v]], [isNaN(C.value.body[v] / b.value) ? "-" : C.value.body[v] / b.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), u = xt(l);
+        t ? t(u) : Tt({ csvContent: u, title: e.value.style.chart.title.text || "vue-ui-galaxy" });
       });
     }
-    const M = v(() => {
+    const M = 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>',
-        $({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: f.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
+        _({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: b.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
         "100%"
-      ], a = w.value.head.map((r, c) => {
-        const st = $({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: w.value.body[c], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue });
+      ], a = C.value.head.map((r, v) => {
+        const ut = _({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: C.value.body[v], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue });
         return [
           {
             color: r.color,
             name: r.name
           },
-          st,
-          isNaN(w.value.body[c] / f.value) ? "-" : $({
-            v: w.value.body[c] / f.value * 100,
+          ut,
+          isNaN(C.value.body[v] / b.value) ? "-" : _({
+            v: C.value.body[v] / b.value * 100,
             s: "%",
             r: e.value.table.td.roundingPercentage
           })
@@ -305,69 +305,69 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
         config: l
       };
     });
-    function $e() {
+    function xe() {
       p.value.showTable = !p.value.showTable;
     }
-    function xe() {
+    function Te() {
       p.value.showTooltip = !p.value.showTooltip;
     }
-    const E = u(!1);
+    const E = s(!1);
     function K() {
       E.value = !E.value;
     }
-    async function ot({ scale: t = 2 } = {}) {
-      if (!m.value) return;
-      const { width: a, height: l } = m.value.getBoundingClientRect(), s = a / l, { imageUri: r, base64: c } = await At({ domElement: m.value, base64: !0, img: !0, scale: t });
+    async function st({ scale: t = 2 } = {}) {
+      if (!k.value) return;
+      const { width: a, height: l } = k.value.getBoundingClientRect(), u = a / l, { imageUri: r, base64: v } = await Ft({ domElement: k.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: r,
-        base64: c,
+        base64: v,
         title: e.value.style.chart.title.text,
         width: a,
         height: l,
-        aspectRatio: s
+        aspectRatio: u
       };
     }
-    return Ve({
-      getData: Ke,
-      getImage: ot,
-      generatePdf: pe,
-      generateCsv: Ce,
-      generateImage: ye,
-      toggleTable: $e,
-      toggleTooltip: xe,
+    return De({
+      getData: Qe,
+      getImage: st,
+      generatePdf: ye,
+      generateCsv: $e,
+      generateImage: fe,
+      toggleTable: xe,
+      toggleTooltip: Te,
       toggleAnnotator: K,
-      toggleFullscreen: ke
+      toggleFullscreen: we
     }), (t, a) => (n(), i("div", {
       ref_key: "galaxyChart",
-      ref: m,
-      class: R(`vue-ui-galaxy ${P.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"} ${o(U) ? "loading" : ""}`),
+      ref: k,
+      class: R(`vue-ui-galaxy ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"} ${o(U) ? "loading" : ""}`),
       style: z(`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_${L.value}`,
-      onMouseenter: a[2] || (a[2] = () => o(ce)(!0)),
-      onMouseleave: a[3] || (a[3] = () => o(ce)(!1))
+      id: `galaxy_${f.value}`,
+      onMouseenter: a[2] || (a[2] = () => o(ve)(!0)),
+      onMouseleave: a[3] || (a[3] = () => o(ve)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (n(), S(o(We), {
+      e.value.userOptions.buttons.annotator ? (n(), x(o(Ge), {
         key: 0,
-        svgRef: o(de),
+        svgRef: o(he),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: E.value,
         onClose: K
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : d("", !0),
-      Ye.value ? (n(), i("div", {
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : c("", !0),
+      je.value ? (n(), i("div", {
         key: 1,
         ref_key: "noTitle",
         ref: se,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : d("", !0),
+      }, null, 512)) : c("", !0),
       e.value.style.chart.title.text ? (n(), i("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: le,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (n(), S(o(Be), {
+        (n(), x(o(Me), {
           key: `title_${Z.value}`,
           config: {
             title: {
@@ -380,16 +380,19 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : d("", !0),
-      e.value.userOptions.show && ue.value && (o(ve) || o(X)) ? (n(), S(o(Ge), {
+      ], 512)) : c("", !0),
+      T("div", {
+        id: `legend-top-${f.value}`
+      }, null, 8, Bt),
+      e.value.userOptions.show && ne.value && (o(de) || o(X)) ? (n(), x(o(He), {
         ref_key: "details",
-        ref: Xe,
+        ref: Ye,
         key: `user_option_${Q.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: o(he),
-        isImaging: o(ge),
-        uid: L.value,
+        isPrinting: o(ge),
+        isImaging: o(pe),
+        uid: f.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,
@@ -397,29 +400,29 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isTooltip: p.value.showTooltip,
-        isFullscreen: P.value,
+        isFullscreen: O.value,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: m.value,
+        chartElement: k.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: E.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: ke,
-        onGeneratePdf: o(pe),
-        onGenerateCsv: Ce,
-        onGenerateImage: o(ye),
-        onToggleTable: $e,
-        onToggleTooltip: xe,
+        onToggleFullscreen: we,
+        onGeneratePdf: o(ye),
+        onGenerateCsv: $e,
+        onGenerateImage: o(fe),
+        onToggleTable: xe,
+        onToggleTooltip: Te,
         onToggleAnnotator: K,
         style: z({
-          visibility: o(ve) ? o(X) ? "visible" : "hidden" : "visible"
+          visibility: o(de) ? o(X) ? "visible" : "hidden" : "visible"
         })
-      }, it({ _: 2 }, [
+      }, ct({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: g(({ isOpen: l, color: s }) => [
-            h(t.$slots, "menuIcon", _(I({ isOpen: l, color: s })), void 0, !0)
+          fn: g(({ isOpen: l, color: u }) => [
+            h(t.$slots, "menuIcon", I(L({ isOpen: l, color: u })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -460,53 +463,53 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: g(({ toggleFullscreen: l, isFullscreen: s }) => [
-            h(t.$slots, "optionFullscreen", _(I({ toggleFullscreen: l, isFullscreen: s })), void 0, !0)
+          fn: g(({ toggleFullscreen: l, isFullscreen: u }) => [
+            h(t.$slots, "optionFullscreen", I(L({ toggleFullscreen: l, isFullscreen: u })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: g(({ toggleAnnotator: l, isAnnotator: s }) => [
-            h(t.$slots, "optionAnnotator", _(I({ toggleAnnotator: l, isAnnotator: s })), void 0, !0)
+          fn: g(({ toggleAnnotator: l, isAnnotator: u }) => [
+            h(t.$slots, "optionAnnotator", I(L({ toggleAnnotator: l, isAnnotator: u })), void 0, !0)
           ]),
           key: "7"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : d("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
       (n(), i("svg", {
         ref_key: "svgRef",
-        ref: de,
-        xmlns: o(wt),
-        class: R({ "vue-data-ui-fullscreen--on": P.value, "vue-data-ui-fulscreen--off": !P.value }),
-        viewBox: k.value.viewBox,
+        ref: he,
+        xmlns: o($t),
+        class: R({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
+        viewBox: w.value.viewBox,
         style: z(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        Te(o(He)),
+        _e(o(Ue)),
         t.$slots["chart-background"] ? (n(), i("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
-          width: k.value.width,
-          height: k.value.height,
+          width: w.value.width,
+          height: w.value.height,
           style: {
             pointerEvents: "none"
           }
         }, [
           h(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Dt)) : d("", !0),
-        O("defs", null, [
-          O("filter", {
-            id: `blur_${L.value}`,
+        ], 8, Et)) : c("", !0),
+        T("defs", null, [
+          T("filter", {
+            id: `blur_${f.value}`,
             x: "-50%",
             y: "-50%",
             width: "200%",
             height: "200%"
           }, [
-            O("feGaussianBlur", {
+            T("feGaussianBlur", {
               in: "SourceGraphic",
               stdDeviation: 100 / e.value.style.chart.layout.arcs.gradient.intensity
-            }, null, 8, Mt)
-          ], 8, Bt)
+            }, null, 8, Rt)
+          ], 8, zt)
         ]),
         (n(!0), i(Se, null, Pe(N.value, (l) => (n(), i("g", null, [
           l.value ? (n(), i("path", {
@@ -516,7 +519,7 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
             stroke: e.value.style.chart.backgroundColor,
             "stroke-width": q(l).border,
             "stroke-linecap": "round"
-          }, null, 8, Et)) : d("", !0),
+          }, null, 8, Wt)) : c("", !0),
           l.value ? (n(), i("path", {
             key: 1,
             d: l.path,
@@ -524,23 +527,23 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
             stroke: l.color,
             "stroke-width": q(l).path,
             "stroke-linecap": "round",
-            class: R(`${x.value && x.value !== l.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
-          }, null, 10, zt)) : d("", !0),
+            class: R(`${S.value && S.value !== l.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
+          }, null, 10, Gt)) : c("", !0),
           l.value && e.value.style.chart.layout.arcs.gradient.show ? (n(), i("g", {
             key: 2,
-            filter: `url(#blur_${L.value})`
+            filter: `url(#blur_${f.value})`
           }, [
-            O("path", {
+            T("path", {
               d: l.path,
               fill: "none",
               stroke: e.value.style.chart.layout.arcs.gradient.color,
               "stroke-width": q(l).blur,
               "stroke-linecap": "round",
-              class: R(`vue-ui-galaxy-gradient ${x.value && x.value !== l.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
-            }, null, 10, Wt)
-          ], 8, Rt)) : d("", !0)
+              class: R(`vue-ui-galaxy-gradient ${S.value && S.value !== l.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
+            }, null, 10, Ut)
+          ], 8, Ht)) : c("", !0)
         ]))), 256)),
-        (n(!0), i(Se, null, Pe(N.value, (l, s) => (n(), i("g", null, [
+        (n(!0), i(Se, null, Pe(N.value, (l, u) => (n(), i("g", null, [
           l.value ? (n(), i("path", {
             key: 0,
             d: l.path,
@@ -548,64 +551,72 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
             stroke: "transparent",
             "stroke-width": e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth,
             "stroke-linecap": "round",
-            onMouseenter: (r) => lt({
+            onMouseenter: (r) => at({
               datapoint: l,
               seriesIndex: l.seriesIndex,
               show: !0
             }),
-            onMouseleave: (r) => et(l),
-            onClick: (r) => tt(l)
-          }, null, 40, Gt)) : d("", !0)
+            onMouseleave: (r) => tt(l),
+            onClick: (r) => lt(l)
+          }, null, 40, Xt)) : c("", !0)
         ]))), 256)),
-        h(t.$slots, "svg", { svg: k.value }, void 0, !0)
-      ], 14, Vt)),
-      t.$slots.watermark ? (n(), i("div", Ht, [
-        h(t.$slots, "watermark", _(I({ isPrinting: o(he) || o(ge) })), void 0, !0)
-      ])) : d("", !0),
-      O("div", {
-        ref_key: "chartLegend",
-        ref: ae
+        h(t.$slots, "svg", { svg: w.value }, void 0, !0)
+      ], 14, Mt)),
+      t.$slots.watermark ? (n(), i("div", Yt, [
+        h(t.$slots, "watermark", I(L({ isPrinting: o(ge) || o(pe) })), void 0, !0)
+      ])) : c("", !0),
+      T("div", {
+        id: `legend-bottom-${f.value}`
+      }, null, 8, jt),
+      ue.value ? (n(), x(vt, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${f.value}` : `#legend-bottom-${f.value}`
       }, [
-        e.value.style.chart.legend.show ? (n(), S(o(Me), {
-          key: `legend_${te.value}`,
-          legendSet: we.value,
-          config: at.value,
-          onClickMarker: a[0] || (a[0] = ({ legend: l }) => j(l))
-        }, {
-          item: g(({ legend: l, index: s }) => [
-            o(U) ? d("", !0) : (n(), i("div", {
-              key: 0,
-              onClick: (r) => j(l),
-              style: z(`opacity:${y.value.includes(l.id) ? 0.5 : 1}`)
-            }, F(l.name) + F(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + F(e.value.style.chart.legend.showValue ? o(Le)(
-              e.value.style.chart.layout.labels.dataLabels.formatter,
-              l.value,
-              o($)({
-                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.legend.roundingValue
-              }),
-              { datapoint: l, seriesIndex: s }
-            ) : "") + " " + F(e.value.style.chart.legend.showPercentage ? y.value.includes(l.id) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(l.value / f.value) ? "-" : o($)({
-              v: l.value / f.value * 100,
-              s: "%",
-              r: e.value.style.chart.legend.roundingPercentage
-            })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, Ut))
-          ]),
-          _: 1
-        }, 8, ["legendSet", "config"])) : d("", !0),
-        h(t.$slots, "legend", { legend: we.value }, void 0, !0)
-      ], 512),
+        T("div", {
+          ref_key: "chartLegend",
+          ref: ae
+        }, [
+          e.value.style.chart.legend.show ? (n(), x(o(Ee), {
+            key: `legend_${te.value}`,
+            legendSet: Ce.value,
+            config: ot.value,
+            onClickMarker: a[0] || (a[0] = ({ legend: l }) => j(l))
+          }, {
+            item: g(({ legend: l, index: u }) => [
+              o(U) ? c("", !0) : (n(), i("div", {
+                key: 0,
+                onClick: (r) => j(l),
+                style: z(`opacity:${y.value.includes(l.id) ? 0.5 : 1}`)
+              }, F(l.name) + F(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + F(e.value.style.chart.legend.showValue ? o(Ae)(
+                e.value.style.chart.layout.labels.dataLabels.formatter,
+                l.value,
+                o(_)({
+                  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.legend.roundingValue
+                }),
+                { datapoint: l, seriesIndex: u }
+              ) : "") + " " + F(e.value.style.chart.legend.showPercentage ? y.value.includes(l.id) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(l.value / b.value) ? "-" : o(_)({
+                v: l.value / b.value * 100,
+                s: "%",
+                r: e.value.style.chart.legend.roundingPercentage
+              })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, qt))
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : c("", !0),
+          h(t.$slots, "legend", { legend: Ce.value }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : c("", !0),
       t.$slots.source ? (n(), i("div", {
-        key: 5,
+        key: 6,
         ref_key: "source",
         ref: oe,
         dir: "auto"
       }, [
         h(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : d("", !0),
-      Te(o(Re), {
+      ], 512)) : c("", !0),
+      _e(o(We), {
         show: p.value.showTooltip && G.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
@@ -616,23 +627,23 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: m.value,
+        parent: k.value,
         content: H.value,
-        isFullscreen: P.value,
-        isCustom: o(Ae)(e.value.style.chart.tooltip.customFormat),
+        isFullscreen: O.value,
+        isCustom: o(Ne)(e.value.style.chart.tooltip.customFormat),
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter
       }, {
         "tooltip-before": g(() => [
-          h(t.$slots, "tooltip-before", _(I({ ...J.value })), void 0, !0)
+          h(t.$slots, "tooltip-before", I(L({ ...J.value })), void 0, !0)
         ]),
         "tooltip-after": g(() => [
-          h(t.$slots, "tooltip-after", _(I({ ...J.value })), void 0, !0)
+          h(t.$slots, "tooltip-after", I(L({ ...J.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
-      ue.value ? (n(), S(o(Ee), {
-        key: 6,
+      ne.value ? (n(), x(o(ze), {
+        key: 7,
         hideDetails: "",
         config: {
           open: p.value.showTable,
@@ -648,7 +659,7 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
         }
       }, {
         content: g(() => [
-          (n(), S(o(ze), {
+          (n(), x(o(Re), {
             key: `table_${ee.value}`,
             colNames: M.value.colNames,
             head: M.value.head,
@@ -658,23 +669,23 @@ const Ft = ["id"], Vt = ["xmlns", "viewBox"], Dt = ["width", "height"], Bt = ["i
             onClose: a[1] || (a[1] = (l) => p.value.showTable = !1)
           }, {
             th: g(({ th: l }) => [
-              O("div", {
+              T("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Xt)
+              }, null, 8, Jt)
             ]),
             td: g(({ td: l }) => [
-              ct(F(l.name || l), 1)
+              dt(F(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : d("", !0),
-      o(U) ? (n(), S(Ot, { key: 7 })) : d("", !0)
-    ], 46, Ft));
+      }, 8, ["config"])) : c("", !0),
+      o(U) ? (n(), x(It, { key: 8 })) : c("", !0)
+    ], 46, Dt));
   }
-}, ol = /* @__PURE__ */ Nt(Yt, [["__scopeId", "data-v-5de20f8f"]]);
+}, rl = /* @__PURE__ */ Vt(Kt, [["__scopeId", "data-v-f08fb5f3"]]);
 export {
-  ol as default
+  rl as default
 };