vue-data-ui 3.0.2 → 3.0.4

package/dist/{vue-ui-waffle-hpsuszbt.js → vue-ui-waffle-CSKAC_dQ.js}

@@ -1,20 +1,20 @@
-import { defineAsyncComponent as G, useSlots as Ct, computed as f, ref as i, toRefs as $t, watch as ee, shallowRef as We, onMounted as It, onBeforeUnmount as _t, createElementBlock as v, openBlock as n, unref as c, normalizeStyle as te, normalizeClass as je, createBlock as N, createCommentVNode as b, createElementVNode as C, createVNode as fe, createSlots as qe, withCtx as g, renderSlot as y, normalizeProps as W, guardReactiveProps as j, Fragment as $, renderList as F, mergeProps as He, toDisplayString as q, createTextVNode as Tt, nextTick as At } from "vue";
-import { u as St, c as Pt, t as Lt, a as Ot, p as V, b as Ft, o as Xe, f as pe, g as Bt, d as zt, k as Y, i as P, X as Nt, s as Vt, x as Mt, F as Dt, e as Rt, v as Et, w as Ut, L as Gt, y as Wt, z as jt } from "./index-B9Ct1B_p.js";
-import { t as qt, u as Ht } from "./useResponsive-DfdjqQps.js";
-import { u as Ye } from "./useNestedProp-C0gKxLur.js";
-import { u as Xt } from "./usePrinter-DcZXg1hH.js";
-import { u as Yt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Jt } from "./useChartAccessibility-9icAAmYg.js";
-import Kt from "./Title-CntvKJss.js";
-import Qt from "./Legend-CQsASoei.js";
-import { _ as Zt } from "./Shape-0sW2StrO.js";
-import el from "./img-Cv4nScI0.js";
-import { u as tl, B as ll } from "./useLoading-D7YHNtLX.js";
-import { _ as al } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"], rl = ["stop-color"], il = ["id"], vl = ["x", "y", "height", "width"], cl = ["height", "width"], dl = { key: 0 }, hl = ["rx", "x", "y", "height", "width", "stroke", "stroke-width", "filter"], fl = ["rx", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "filter"], pl = { key: 1 }, yl = ["rx", "x", "y", "height", "width", "fill", "filter"], gl = ["textContent", "x", "y", "font-size", "fill", "filter"], ml = ["x", "y", "height", "width", "onMouseover", "onMouseleave", "onClick"], bl = {
+import { defineAsyncComponent as G, useSlots as $t, computed as p, ref as i, toRefs as It, watch as ee, shallowRef as je, onMounted as _t, onBeforeUnmount as Tt, createElementBlock as v, openBlock as s, unref as c, normalizeStyle as te, normalizeClass as qe, createBlock as F, createCommentVNode as b, createElementVNode as x, createVNode as pe, createSlots as He, withCtx as m, renderSlot as y, normalizeProps as W, guardReactiveProps as j, Fragment as $, renderList as B, mergeProps as Xe, toDisplayString as q, Teleport as At, createTextVNode as St, nextTick as Pt } from "vue";
+import { u as Lt, c as Ot, t as Ft, a as Bt, p as V, b as zt, o as Ye, f as fe, g as Nt, d as Vt, k as Y, i as P, X as Mt, s as Dt, x as Rt, F as Et, e as Ut, v as Gt, w as Wt, L as jt, y as qt, z as Ht } from "./index-q-LPw2IT.js";
+import { t as Xt, u as Yt } from "./useResponsive-DfdjqQps.js";
+import { u as Je } from "./useNestedProp-04aFeUYu.js";
+import { u as Jt } from "./usePrinter-DX7efa1s.js";
+import { u as Kt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Qt } from "./useChartAccessibility-9icAAmYg.js";
+import Zt from "./Title-B55R8CAZ.js";
+import el from "./Legend-DcDSkq99.js";
+import { _ as tl } from "./Shape-DHIaJs9G.js";
+import ll from "./img-Ctts6JQb.js";
+import { u as al, B as ol } from "./useLoading-D7YHNtLX.js";
+import { _ as ul } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const sl = ["id"], nl = ["id"], rl = ["xmlns", "viewBox"], il = ["id"], vl = ["stop-color"], cl = ["stop-color"], dl = ["id"], hl = ["x", "y", "height", "width"], pl = ["height", "width"], fl = { key: 0 }, yl = ["rx", "x", "y", "height", "width", "stroke", "stroke-width", "filter"], gl = ["rx", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "filter"], ml = { key: 1 }, bl = ["rx", "x", "y", "height", "width", "fill", "filter"], wl = ["textContent", "x", "y", "font-size", "fill", "filter"], kl = ["x", "y", "height", "width", "onMouseover", "onMouseleave", "onClick"], xl = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, wl = ["onClick"], kl = ["innerHTML"], xl = {
+}, Cl = ["id"], $l = ["onClick"], Il = ["innerHTML"], _l = {
   __name: "vue-ui-waffle",
   props: {
     config: {
@@ -31,9 +31,9 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
     }
   },
   emits: ["selectLegend"],
-  setup(Je, { expose: Ke, emit: Qe }) {
-    const Ze = G(() => import("./DataTable-osx68WLA.js")), et = G(() => import("./PenAndPaper-CdXspg5R.js")), tt = G(() => import("./vue-ui-accordion-B31QK9Hj.js")), lt = G(() => import("./Tooltip-DF8e4iB9.js")), at = G(() => import("./UserOptions-DQyIO0ts.js")), ot = G(() => import("./PackageVersion-DZGrOKw5.js")), { vue_ui_waffle: ut } = St(), m = Je, st = Ct(), le = f(() => !!m.dataset && m.dataset.length), k = i(Pt()), nt = i(null), ae = i(!1), oe = i(""), M = i(null), ye = i(0), L = i(null), ge = i(null), me = i(null), be = i(null), we = i(null), ke = i(0), xe = i(0), Ce = i(0), e = i(ne()), { loading: $e, FINAL_DATASET: J, manualLoading: ue } = tl({
-      ...$t(m),
+  setup(Ke, { expose: Qe, emit: Ze }) {
+    const et = G(() => import("./DataTable-rj9-mAwF.js")), tt = G(() => import("./PenAndPaper-BJ0hcgsa.js")), lt = G(() => import("./vue-ui-accordion-D46i_gkB.js")), at = G(() => import("./Tooltip-BMOddG-M.js")), ot = G(() => import("./UserOptions-DVzyjG-W.js")), ut = G(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_waffle: st } = Lt(), w = Ke, nt = $t(), le = p(() => !!w.dataset && w.dataset.length), g = i(Ot()), rt = i(null), ae = i(!1), oe = i(""), M = i(null), ye = i(0), L = i(null), ge = i(null), me = i(null), be = i(null), we = i(null), ke = i(0), xe = i(0), Ce = i(0), $e = i(!1), e = i(ne()), { loading: Ie, FINAL_DATASET: J, manualLoading: ue } = al({
+      ...It(w),
       FINAL_CONFIG: e,
       prepareConfig: ne,
       callback: () => {
@@ -58,7 +58,7 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
           color: "#CACACA"
         }
       ],
-      skeletonConfig: Lt({
+      skeletonConfig: Ft({
         defaultConfig: e.value,
         userConfig: {
           useCustomCells: !1,
@@ -84,45 +84,45 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
           }
         }
       })
-    }), { userOptionsVisible: se, setUserOptionsVisibility: Ie, keepUserOptionState: _e } = Yt({ config: e.value }), { svgRef: Te } = Jt({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: se, setUserOptionsVisibility: _e, keepUserOptionState: Te } = Kt({ config: e.value }), { svgRef: Ae } = Qt({ config: e.value.style.chart.title });
     function ne() {
-      const t = Ye({
-        userConfig: m.config,
-        defaultConfig: ut
+      const t = Je({
+        userConfig: w.config,
+        defaultConfig: st
       });
       return t.theme ? {
-        ...Ye({
-          userConfig: Ft.vue_ui_waffle[t.theme] || m.config,
+        ...Je({
+          userConfig: zt.vue_ui_waffle[t.theme] || w.config,
           defaultConfig: t
         }),
-        customPalette: Ot[t.theme] || V
+        customPalette: Bt[t.theme] || V
       } : t;
     }
-    ee(() => m.config, (t) => {
-      $e.value || (e.value = ne()), se.value = !e.value.userOptions.showOnChartHover, Se(), ke.value += 1, xe.value += 1, Ce.value += 1, x.value.showTable = e.value.table.show, x.value.showTooltip = e.value.style.chart.tooltip.show;
+    ee(() => w.config, (t) => {
+      Ie.value || (e.value = ne()), se.value = !e.value.userOptions.showOnChartHover, Pe(), ke.value += 1, xe.value += 1, Ce.value += 1, C.value.showTable = e.value.table.show, C.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const O = We(null), D = We(null), Ae = f(() => !!e.value.debug);
-    function Se() {
-      if (Xe(m.dataset) ? (pe({
+    const O = je(null), D = je(null), Se = p(() => !!e.value.debug);
+    function Pe() {
+      if (Ye(w.dataset) ? (fe({
         componentName: "VueUiWaffle",
         type: "dataset",
-        debug: Ae.value
-      }), le.value = !1, ue.value = !0) : m.dataset.forEach((t, a) => {
-        Bt({
+        debug: Se.value
+      }), le.value = !1, ue.value = !0) : w.dataset.forEach((t, a) => {
+        Nt({
           datasetObject: t,
           requiredAttributes: ["name", "values"]
         }).forEach((l) => {
-          pe({
+          fe({
             componentName: "VueUiWaffle",
             type: "datasetSerieAttribute",
             property: l,
             index: a,
-            debug: Ae.value
+            debug: Se.value
           });
         });
-      }), Xe(m.dataset) || (ue.value = e.value.loading), e.value.responsive) {
-        const t = qt(() => {
-          const { width: a, height: l } = Ht({
+      }), Ye(w.dataset) || (ue.value = e.value.loading), e.value.responsive) {
+        const t = Xt(() => {
+          const { width: a, height: l } = Yt({
             chart: L.value,
             title: e.value.style.chart.title.text ? ge.value : null,
             legend: e.value.style.chart.legend.show ? me.value : null,
@@ -130,32 +130,32 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
             noTitle: we.value
           });
           requestAnimationFrame(() => {
-            B.value.width = a, B.value.height = l, I.value.width = a, I.value.height = l;
+            z.value.width = a, z.value.height = l, I.value.width = a, I.value.height = l;
           });
         });
         O.value && (D.value && O.value.unobserve(D.value), O.value.disconnect()), O.value = new ResizeObserver(t), D.value = L.value.parentNode, O.value.observe(D.value);
       }
     }
-    It(() => {
-      Se();
-    }), _t(() => {
+    _t(() => {
+      $e.value = !0, Pe();
+    }), Tt(() => {
       O.value && (D.value && O.value.unobserve(D.value), O.value.disconnect());
     });
-    const { isPrinting: Pe, isImaging: Le, generatePdf: Oe, generateImage: Fe } = Xt({
-      elementId: `vue-ui-waffle_${k.value}`,
+    const { isPrinting: Le, isImaging: Oe, generatePdf: Fe, generateImage: Be } = Jt({
+      elementId: `vue-ui-waffle_${g.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-waffle",
       options: e.value.userOptions.print
-    }), rt = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), Be = f(() => zt(e.value.customPalette)), x = i({
+    }), it = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), ze = p(() => Vt(e.value.customPalette)), C = i({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     });
     ee(e, () => {
-      x.value = {
+      C.value = {
         showTable: e.value.table.show,
         showTooltip: e.value.style.chart.tooltip.show
       };
     }, { immediate: !0 });
-    const B = i({
+    const z = i({
       height: 512,
       width: 512
     }), I = i({
@@ -163,13 +163,13 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
       left: 0,
       height: 512,
       width: 512
-    }), _ = f(() => (I.value.width - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), T = f(() => (I.value.height - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), it = f(() => Math.max(1e-4, I.value.width / e.value.style.chart.layout.grid.size)), ze = f(() => Math.max(1e-4, I.value.height / e.value.style.chart.layout.grid.size));
-    function Ne(t) {
-      const a = e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.size, l = t.reduce((w, he) => w + he, 0), o = t.map((w) => w / l * a), u = o.map(Math.floor), s = o.map((w) => w % 1);
-      let d = a - u.reduce((w, he) => w + he, 0);
+    }), _ = p(() => (I.value.width - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), T = p(() => (I.value.height - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), vt = p(() => Math.max(1e-4, I.value.width / e.value.style.chart.layout.grid.size)), Ne = p(() => Math.max(1e-4, I.value.height / e.value.style.chart.layout.grid.size));
+    function Ve(t) {
+      const a = e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.size, l = t.reduce((k, he) => k + he, 0), o = t.map((k) => k / l * a), u = o.map(Math.floor), n = o.map((k) => k % 1);
+      let d = a - u.reduce((k, he) => k + he, 0);
       for (; d > 0; ) {
-        let w = s.indexOf(Math.max(...s));
-        u[w] += 1, s[w] = 0, d -= 1;
+        let k = n.indexOf(Math.max(...n));
+        u[k] += 1, n[k] = 0, d -= 1;
       }
       return u;
     }
@@ -177,68 +177,68 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
     function re() {
       return H.value = J.value.flatMap((t) => t.values.reduce((a, l) => a + l, 0)).reduce((t, a) => t + a, 0) === 0, J.value.map((t, a) => ({
         ...t,
-        color: Rt(t.color) || Be.value[a] || V[a] || V[a % V.length],
+        color: Ut(t.color) || ze.value[a] || V[a] || V[a % V.length],
         uid: `serie_${a}`,
         absoluteIndex: a
       }));
     }
-    const ie = f(() => re()), h = i(ie.value);
-    ee(() => m.dataset, (t) => {
+    const ie = p(() => re()), h = i(ie.value);
+    ee(() => w.dataset, (t) => {
       Array.isArray(t) && t.length > 0 && (ue.value = !1);
-    }, { immediate: !0 }), ee(() => m.dataset, (t) => {
+    }, { immediate: !0 }), ee(() => w.dataset, (t) => {
       h.value = re();
     }, { deep: !0 });
-    const vt = f(() => {
-      const t = h.value.filter((a, l) => !p.value.includes(a.uid)).map((a, l) => H.value ? 1 : (a.values || []).reduce((o, u) => o + u, 0));
-      return Ne(t);
-    }), ct = f(() => {
+    const ct = p(() => {
+      const t = h.value.filter((a, l) => !f.value.includes(a.uid)).map((a, l) => H.value ? 1 : (a.values || []).reduce((o, u) => o + u, 0));
+      return Ve(t);
+    }), dt = p(() => {
       const t = h.value.map((a, l) => H.value ? 1 : (a.values || []).reduce((o, u) => o + u));
-      return Ne(t);
-    }), X = f(() => (J.value.forEach((t, a) => {
-      [null, void 0].includes(t.values) && pe({
+      return Ve(t);
+    }), X = p(() => (J.value.forEach((t, a) => {
+      [null, void 0].includes(t.values) && fe({
         componentName: "VueUiWaffle",
         type: "datasetSerieAttribute",
         property: "values (number[])",
         index: a
       });
-    }), h.value.filter((t, a) => !p.value.includes(t.uid)).map((t, a) => ({
+    }), h.value.filter((t, a) => !f.value.includes(t.uid)).map((t, a) => ({
       absoluteIndex: t.absoluteIndex,
       uid: t.uid,
       name: t.name,
       color: t.color,
       value: (t.values || []).reduce((l, o) => l + o, 0),
       absoluteValues: t.values || [],
-      proportion: vt.value[a]
-    })))), dt = f(() => h.value.map((t, a) => ({
+      proportion: ct.value[a]
+    })))), ht = p(() => h.value.map((t, a) => ({
       absoluteIndex: t.absoluteIndex,
       uid: t.uid,
       name: t.name,
       color: t.color,
       value: (t.values || []).reduce((l, o) => l + o, 0),
       absoluteValues: t.values || [],
-      proportion: ct.value[a]
+      proportion: dt.value[a]
     })));
-    function ht() {
-      return dt.value.map((t) => ({
+    function pt() {
+      return ht.value.map((t) => ({
         name: t.name,
         color: t.color,
         value: t.value,
         proportion: t.proportion
       }));
     }
-    const ft = f(() => {
+    const ft = p(() => {
       let t = 0;
       return X.value.map((a, l) => {
-        const o = t, u = o + a.proportion, s = [];
+        const o = t, u = o + a.proportion, n = [];
         for (let d = Math.floor(o); d < Math.floor(u); d += 1)
-          s.push(d);
+          n.push(d);
         return t = u, {
           ...a,
           start: o,
-          rects: s
+          rects: n
         };
       });
-    }), r = f(() => ft.value.flatMap((t, a) => t.rects.map((l, o) => ({
+    }), r = p(() => ft.value.flatMap((t, a) => t.rects.map((l, o) => ({
       isFirst: o === 0,
       isLongEnough: l.length > 2,
       name: t.name,
@@ -251,7 +251,7 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
     }))).map((t, a) => ({
       ...t,
       isAbsoluteFirst: a % e.value.style.chart.layout.grid.size === 0
-    }))), R = f(() => {
+    }))), R = p(() => {
       const t = [];
       for (let a = 0; a < e.value.style.chart.layout.grid.size; a += 1)
         for (let l = 0; l < e.value.style.chart.layout.grid.size; l += 1)
@@ -262,42 +262,42 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
             y: (e.value.style.chart.layout.grid.vertical ? l : a) * (T.value + e.value.style.chart.layout.grid.spaceBetween) + I.value.top
           });
       return t;
-    }), p = i([]), z = i(!1), Ve = i(null), Me = i(null);
-    function De(t) {
+    }), f = i([]), N = i(!1), Me = i(null), De = i(null);
+    function Re(t) {
       if (H.value) return;
       if (!e.value.useAnimation) {
-        p.value.includes(t) ? p.value = p.value.filter((u) => u !== t) : p.value.length < E.value.length - 1 && E.value.length > 1 && p.value.push(t);
+        f.value.includes(t) ? f.value = f.value.filter((u) => u !== t) : f.value.length < E.value.length - 1 && E.value.length > 1 && f.value.push(t);
         return;
       }
-      const a = ie.value.find((u) => u.uid === t).values.reduce((u, s) => u + s, 0), l = h.value.find((u) => u.uid === t).values.reduce((u, s) => u + s, 0);
+      const a = ie.value.find((u) => u.uid === t).values.reduce((u, n) => u + n, 0), l = h.value.find((u) => u.uid === t).values.reduce((u, n) => u + n, 0);
       let o = l;
       if (!(l === 0 && a === 0)) {
-        if (p.value.includes(t)) {
-          let s = function() {
-            o > u ? (cancelAnimationFrame(Ve.value), h.value = h.value.map((d, w) => d.uid === t ? {
+        if (f.value.includes(t)) {
+          let n = function() {
+            o > u ? (cancelAnimationFrame(Me.value), h.value = h.value.map((d, k) => d.uid === t ? {
               ...d,
               values: [u]
-            } : d), z.value = !1) : (z.value = !0, o += u * 0.025, h.value = h.value.map((d, w) => d.uid === t ? {
+            } : d), N.value = !1) : (N.value = !0, o += u * 0.025, h.value = h.value.map((d, k) => d.uid === t ? {
               ...d,
               values: [o]
-            } : d), Ve.value = requestAnimationFrame(s));
+            } : d), Me.value = requestAnimationFrame(n));
           };
-          p.value = p.value.filter((d) => d !== t);
+          f.value = f.value.filter((d) => d !== t);
           const u = a;
-          s();
-        } else if (p.value.length < E.value.length - 1 && E.value.length > 1) {
+          n();
+        } else if (f.value.length < E.value.length - 1 && E.value.length > 1) {
           let u = function() {
-            o < l / 100 ? (cancelAnimationFrame(Me.value), p.value.push(t), h.value = h.value.map((s, d) => s.uid === t ? {
-              ...s,
+            o < l / 100 ? (cancelAnimationFrame(De.value), f.value.push(t), h.value = h.value.map((n, d) => n.uid === t ? {
+              ...n,
               values: [0]
-            } : s), z.value = !1) : (z.value = !0, o /= 1.15, h.value = h.value.map((s) => s.uid === t ? {
-              ...s,
+            } : n), N.value = !1) : (N.value = !0, o /= 1.15, h.value = h.value.map((n) => n.uid === t ? {
+              ...n,
               values: [o]
-            } : s), Me.value = requestAnimationFrame(u));
+            } : n), De.value = requestAnimationFrame(u));
           };
           u();
         }
-        bt("selectLegend", X.value.map((u) => ({
+        wt("selectLegend", X.value.map((u) => ({
           name: u.name,
           color: u.color,
           value: u.value,
@@ -305,36 +305,36 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
         })));
       }
     }
-    const E = f(() => h.value.map((t, a) => ({
+    const E = p(() => h.value.map((t, a) => ({
       name: t.name,
-      color: t.color || Be[a] || V[a] || V[a % V.length],
+      color: t.color || ze[a] || V[a] || V[a % V.length],
       value: (t.values || []).reduce((l, o) => l + o, 0),
       uid: t.uid,
       shape: "square"
     })).map((t) => ({
       ...t,
       proportion: t.value / h.value.map((a) => (a.values || []).reduce((l, o) => l + o, 0)).reduce((a, l) => a + l, 0),
-      opacity: p.value.includes(t.uid) ? 0.5 : 1,
-      segregate: () => De(t.uid),
-      isSegregated: p.value.includes(t.uid)
-    }))), pt = f(() => ({
+      opacity: f.value.includes(t.uid) ? 0.5 : 1,
+      segregate: () => Re(t.uid),
+      isSegregated: f.value.includes(t.uid)
+    }))), yt = p(() => ({
       cy: "waffle-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" : ""
-    })), A = f(() => X.value.map((t) => t.value).reduce((t, a) => t + a, 0)), ve = i(null), ce = i(null);
-    function yt(t) {
+    })), A = p(() => X.value.map((t) => t.value).reduce((t, a) => t + a, 0)), ve = i(null), ce = i(null);
+    function gt(t) {
       const a = r.value[t];
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: a, seriesIndex: a.serieIndex });
     }
-    function gt(t) {
+    function mt(t) {
       const a = r.value[t];
       e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: a.serieIndex }), ce.value = null, ae.value = !1, M.value = null;
     }
-    function mt(t) {
-      if (p.value.length === m.dataset.length) return;
+    function bt(t) {
+      if (f.value.length === w.dataset.length) return;
       const a = r.value[t];
       ve.value = {
         datapoint: a,
@@ -343,7 +343,7 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
         config: e.value
       }, e.value.events.datapointEnter && ce.value !== a.serieIndex && e.value.events.datapointEnter({ datapoint: a, seriesIndex: a.serieIndex }), ce.value = a.serieIndex, ae.value = !0, M.value = r.value[t].serieIndex;
       const l = e.value.style.chart.tooltip.customFormat;
-      if (Wt(l) && jt(() => l({
+      if (qt(l) && Ht(() => l({
         seriesIndex: r.value[t].absoluteIndex,
         datapoint: a,
         series: h.value,
@@ -357,7 +357,7 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
         });
       else {
         let o = "";
-        if (o += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${a.name}</div>`, o += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><rect x="0" y="0" height="60" width="60" stroke="none" rx="1" fill="${a.color}" />${st.pattern ? `<rect x="0" y="0" height="60" width="60" stroke="none" rx="1" stroke="none" fill="url(#pattern_${k.value}_${a.absoluteIndex})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (o += `<b>${Y(
+        if (o += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${a.name}</div>`, o += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><rect x="0" y="0" height="60" width="60" stroke="none" rx="1" fill="${a.color}" />${nt.pattern ? `<rect x="0" y="0" height="60" width="60" stroke="none" rx="1" stroke="none" fill="url(#pattern_${g.value}_${a.absoluteIndex})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (o += `<b>${Y(
           e.value.style.chart.layout.labels.dataLabels.formatter,
           a.value,
           P({
@@ -382,7 +382,7 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
         oe.value = o;
       }
     }
-    const bt = Qe, S = f(() => {
+    const wt = Ze, S = p(() => {
       const t = X.value.map((l) => ({
         name: l.name,
         color: l.color
@@ -390,12 +390,12 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
       return { head: t, body: a };
     });
     function K(t) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(M.value) && M.value !== t ? `url(#blur_${k.value})` : "";
+      return e.value.useBlurOnHover && ![null, void 0].includes(M.value) && M.value !== t ? `url(#blur_${g.value})` : "";
     }
-    function wt(t, a) {
-      return e.value.style.chart.layout.labels.captions.show ? r.value.length && !z.value && !e.value.style.chart.layout.grid.vertical && (r.value[t].isFirst && a.position < e.value.style.chart.layout.grid.size - 2 || r.value[t].isAbsoluteFirst && t % e.value.style.chart.layout.grid.size === 0 && r.value[t].absoluteStartIndex) : !1;
+    function kt(t, a) {
+      return e.value.style.chart.layout.labels.captions.show ? r.value.length && !N.value && !e.value.style.chart.layout.grid.vertical && (r.value[t].isFirst && a.position < e.value.style.chart.layout.grid.size - 2 || r.value[t].isAbsoluteFirst && t % e.value.style.chart.layout.grid.size === 0 && r.value[t].absoluteStartIndex) : !1;
     }
-    function kt(t, a = null) {
+    function xt(t, a = null) {
       const l = Y(
         e.value.style.chart.layout.labels.dataLabels.formatter,
         r.value[t].value,
@@ -406,19 +406,19 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
           r: e.value.style.chart.layout.labels.captions.roundingValue
         }),
         { datapoint: r.value[t], position: a }
-      ), o = P({ v: r.value[t].proportion, s: "%", r: e.value.style.chart.layout.labels.captions.roundingPercentage }), u = (e.value.style.chart.layout.labels.captions.serieNameAbbreviation ? Gt({ source: r.value[t].name, length: e.value.style.chart.layout.labels.captions.serieNameMaxAbbreviationSize }) : r.value[t].name) + (e.value.style.chart.layout.labels.captions.showPercentage || e.value.style.chart.layout.labels.captions.showValue ? ":" : ""), s = e.value.style.chart.layout.labels.captions.showSerieName ? u : "";
+      ), o = P({ v: r.value[t].proportion, s: "%", r: e.value.style.chart.layout.labels.captions.roundingPercentage }), u = (e.value.style.chart.layout.labels.captions.serieNameAbbreviation ? jt({ source: r.value[t].name, length: e.value.style.chart.layout.labels.captions.serieNameMaxAbbreviationSize }) : r.value[t].name) + (e.value.style.chart.layout.labels.captions.showPercentage || e.value.style.chart.layout.labels.captions.showValue ? ":" : ""), n = e.value.style.chart.layout.labels.captions.showSerieName ? u : "";
       let d = "";
-      return e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? d = `${o} (${l})` : e.value.style.chart.layout.labels.captions.showPercentage && !e.value.style.chart.layout.labels.captions.showValue ? d = o : !e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue && (d = l), `${s}${d}`;
+      return e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? d = `${o} (${l})` : e.value.style.chart.layout.labels.captions.showPercentage && !e.value.style.chart.layout.labels.captions.showValue ? d = o : !e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue && (d = l), `${n}${d}`;
     }
-    function Re(t = null) {
-      At(() => {
-        const a = S.value.head.map((u, s) => [[
+    function Ee(t = null) {
+      Pt(() => {
+        const a = S.value.head.map((u, n) => [[
           u.name
-        ], [S.value.body[s]], [isNaN(S.value.body[s] / A.value) ? "-" : S.value.body[s] / A.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = Et(l);
-        t ? t(o) : Ut({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-waffle" });
+        ], [S.value.body[n]], [isNaN(S.value.body[n] / A.value) ? "-" : S.value.body[n] / A.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = Gt(l);
+        t ? t(o) : Wt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-waffle" });
       });
     }
-    const Q = f(() => {
+    const Q = p(() => {
       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>',
         Y(
@@ -432,23 +432,23 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
           })
         ),
         "100%"
-      ], a = S.value.head.map((u, s) => [
+      ], a = S.value.head.map((u, n) => [
         {
           color: u.color,
           name: u.name
         },
         Y(
           e.value.style.chart.layout.labels.dataLabels.formatter,
-          S.value.body[s],
+          S.value.body[n],
           P({
             p: e.value.style.chart.layout.labels.dataLabels.prefix,
-            v: S.value.body[s],
+            v: S.value.body[n],
             s: e.value.style.chart.layout.labels.dataLabels.suffix,
             r: e.value.table.td.roundingValue
           })
         ),
-        isNaN(S.value.body[s] / A.value) ? "-" : P({
-          v: S.value.body[s] / A.value * 100,
+        isNaN(S.value.body[n] / A.value) ? "-" : P({
+          v: S.value.body[n] / A.value * 100,
           s: "%",
           r: e.value.table.td.roundingPercentage
         })
@@ -477,72 +477,72 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
         colNames: o
       };
     }), U = i(!1);
-    function Ee(t) {
+    function Ue(t) {
       U.value = t, ye.value += 1;
     }
-    function Ue() {
-      x.value.showTable = !x.value.showTable;
-    }
     function Ge() {
-      x.value.showTooltip = !x.value.showTooltip;
+      C.value.showTable = !C.value.showTable;
+    }
+    function We() {
+      C.value.showTooltip = !C.value.showTooltip;
     }
     const Z = i(!1);
     function de() {
       Z.value = !Z.value;
     }
-    async function xt({ scale: t = 2 } = {}) {
+    async function Ct({ scale: t = 2 } = {}) {
       if (!L.value) return;
-      const { width: a, height: l } = L.value.getBoundingClientRect(), o = a / l, { imageUri: u, base64: s } = await el({ domElement: L.value, base64: !0, img: !0, scale: t });
+      const { width: a, height: l } = L.value.getBoundingClientRect(), o = a / l, { imageUri: u, base64: n } = await ll({ domElement: L.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: u,
-        base64: s,
+        base64: n,
         title: e.value.style.chart.title.text,
         width: a,
         height: l,
         aspectRatio: o
       };
     }
-    return Ke({
-      getData: ht,
-      getImage: xt,
-      generatePdf: Oe,
-      generateCsv: Re,
-      generateImage: Fe,
-      toggleTable: Ue,
-      toggleTooltip: Ge,
+    return Qe({
+      getData: pt,
+      getImage: Ct,
+      generatePdf: Fe,
+      generateCsv: Ee,
+      generateImage: Be,
+      toggleTable: Ge,
+      toggleTooltip: We,
       toggleAnnotator: de,
-      toggleFullscreen: Ee
-    }), (t, a) => (n(), v("div", {
-      class: je(`vue-ui-waffle ${U.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      toggleFullscreen: Ue
+    }), (t, a) => (s(), v("div", {
+      class: qe(`vue-ui-waffle ${U.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       ref_key: "waffleChart",
       ref: L,
-      id: `vue-ui-waffle_${k.value}`,
+      id: `vue-ui-waffle_${g.value}`,
       style: te(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
-      onMouseenter: a[2] || (a[2] = () => c(Ie)(!0)),
-      onMouseleave: a[3] || (a[3] = () => c(Ie)(!1))
+      onMouseenter: a[2] || (a[2] = () => c(_e)(!0)),
+      onMouseleave: a[3] || (a[3] = () => c(_e)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (n(), N(c(et), {
+      e.value.userOptions.buttons.annotator ? (s(), F(c(tt), {
         key: 0,
-        svgRef: c(Te),
+        svgRef: c(Ae),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: Z.value,
         onClose: de
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : b("", !0),
-      rt.value ? (n(), v("div", {
+      it.value ? (s(), v("div", {
         key: 1,
         ref_key: "noTitle",
         ref: we,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : b("", !0),
-      e.value.style.chart.title.text ? (n(), v("div", {
+      e.value.style.chart.title.text ? (s(), v("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: ge,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (n(), N(Kt, {
+        (s(), F(Zt, {
           key: `title_${ke.value}`,
           config: {
             title: {
@@ -556,15 +556,18 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
           }
         }, null, 8, ["config"]))
       ], 512)) : b("", !0),
-      e.value.userOptions.show && le.value && (c(_e) || c(se)) ? (n(), N(c(at), {
+      x("div", {
+        id: `legend-top-${g.value}`
+      }, null, 8, nl),
+      e.value.userOptions.show && le.value && (c(Te) || c(se)) ? (s(), F(c(ot), {
         ref_key: "details",
-        ref: nt,
+        ref: rt,
         key: `user_options_${ye.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: c(Pe),
-        isImaging: c(Le),
-        uid: k.value,
+        isPrinting: c(Le),
+        isImaging: c(Oe),
+        uid: g.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -572,7 +575,7 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: U.value,
-        isTooltip: x.value.showTooltip,
+        isTooltip: C.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: L.value,
         position: e.value.userOptions.position,
@@ -580,130 +583,130 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
         isAnnotation: Z.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: Ee,
-        onGeneratePdf: c(Oe),
-        onGenerateCsv: Re,
-        onGenerateImage: c(Fe),
-        onToggleTable: Ue,
-        onToggleTooltip: Ge,
+        onToggleFullscreen: Ue,
+        onGeneratePdf: c(Fe),
+        onGenerateCsv: Ee,
+        onGenerateImage: c(Be),
+        onToggleTable: Ge,
+        onToggleTooltip: We,
         onToggleAnnotator: de,
         style: te({
-          visibility: c(_e) ? c(se) ? "visible" : "hidden" : "visible"
+          visibility: c(Te) ? c(se) ? "visible" : "hidden" : "visible"
         })
-      }, qe({ _: 2 }, [
+      }, He({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: g(({ isOpen: l, color: o }) => [
+          fn: m(({ isOpen: l, color: o }) => [
             y(t.$slots, "menuIcon", W(j({ isOpen: l, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: g(() => [
+          fn: m(() => [
             y(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: g(() => [
+          fn: m(() => [
             y(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: g(() => [
+          fn: m(() => [
             y(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: g(() => [
+          fn: m(() => [
             y(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: g(() => [
+          fn: m(() => [
             y(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: g(({ toggleFullscreen: l, isFullscreen: o }) => [
+          fn: m(({ toggleFullscreen: l, isFullscreen: o }) => [
             y(t.$slots, "optionFullscreen", W(j({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: g(({ toggleAnnotator: l, isAnnotator: o }) => [
+          fn: m(({ toggleAnnotator: l, isAnnotator: o }) => [
             y(t.$slots, "optionAnnotator", W(j({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
           ]),
           key: "7"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : b("", !0),
-      (n(), v("svg", {
+      (s(), v("svg", {
         ref_key: "svgRef",
-        ref: Te,
-        xmlns: c(Nt),
-        class: je({ "vue-data-ui-fullscreen--on": U.value, "vue-data-ui-fulscreen--off": !U.value }),
-        viewBox: `0 0 ${B.value.width <= 0 ? 10 : B.value.width} ${B.value.height <= 0 ? 10 : B.value.height}`,
+        ref: Ae,
+        xmlns: c(Mt),
+        class: qe({ "vue-data-ui-fullscreen--on": U.value, "vue-data-ui-fulscreen--off": !U.value }),
+        viewBox: `0 0 ${z.value.width <= 0 ? 10 : z.value.width} ${z.value.height <= 0 ? 10 : z.value.height}`,
         style: te(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        fe(c(ot)),
-        C("defs", null, [
-          (n(!0), v($, null, F(r.value, (l, o) => (n(), v("radialGradient", {
+        pe(c(ut)),
+        x("defs", null, [
+          (s(!0), v($, null, B(r.value, (l, o) => (s(), v("radialGradient", {
             cx: "50%",
             cy: "50%",
             r: "50%",
             fx: "50%",
             fy: "50%",
-            id: `gradient_${k.value}_${o}`
+            id: `gradient_${g.value}_${o}`
           }, [
-            C("stop", {
+            x("stop", {
               offset: "0%",
-              "stop-color": c(Vt)(c(Mt)(l.color, 0.05), 100 - e.value.style.chart.layout.rect.gradientIntensity)
-            }, null, 8, nl),
-            C("stop", {
+              "stop-color": c(Dt)(c(Rt)(l.color, 0.05), 100 - e.value.style.chart.layout.rect.gradientIntensity)
+            }, null, 8, vl),
+            x("stop", {
               offset: "100%",
               "stop-color": l.color
-            }, null, 8, rl)
-          ], 8, sl))), 256))
+            }, null, 8, cl)
+          ], 8, il))), 256))
         ]),
-        C("defs", null, [
-          C("filter", {
-            id: `blur_${k.value}`,
+        x("defs", null, [
+          x("filter", {
+            id: `blur_${g.value}`,
             x: "-50%",
             y: "-50%",
             width: "200%",
             height: "200%"
           }, [...a[4] || (a[4] = [
-            C("feGaussianBlur", {
+            x("feGaussianBlur", {
               in: "SourceGraphic",
               stdDeviation: 2
             }, null, -1),
-            C("feColorMatrix", {
+            x("feColorMatrix", {
               type: "saturate",
               values: "0"
             }, null, -1)
-          ])], 8, il)
+          ])], 8, dl)
         ]),
-        e.value.useCustomCells && r.value.length ? (n(!0), v($, { key: 0 }, F(R.value, (l, o) => (n(), v("foreignObject", {
+        e.value.useCustomCells && r.value.length ? (s(!0), v($, { key: 0 }, B(R.value, (l, o) => (s(), v("foreignObject", {
           x: l.x,
           y: l.y,
           height: T.value <= 0 ? 1e-4 : T.value,
           width: _.value <= 0 ? 1e-4 : _.value,
           class: "vue-ui-waffle-custom-cell-foreignObject"
         }, [
-          y(t.$slots, "cell", He({ ref_for: !0 }, { cell: { ...l, color: r.value[o].color, ...r.value[o] }, isSelected: [null, void 0].includes(M.value) ? !0 : r.value[o].serieIndex === M.value }), void 0, !0)
-        ], 8, vl))), 256)) : b("", !0),
-        !r.value.length && !e.value.useCustomCells ? (n(), v("rect", {
+          y(t.$slots, "cell", Xe({ ref_for: !0 }, { cell: { ...l, color: r.value[o].color, ...r.value[o] }, isSelected: [null, void 0].includes(M.value) ? !0 : r.value[o].serieIndex === M.value }), void 0, !0)
+        ], 8, hl))), 256)) : b("", !0),
+        !r.value.length && !e.value.useCustomCells ? (s(), v("rect", {
           key: 1,
           x: 12,
           y: 12,
@@ -712,13 +715,13 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
           rx: 3,
           fill: "none",
           stroke: "black"
-        }, null, 8, cl)) : r.value.length && !e.value.useCustomCells ? (n(), v($, { key: 2 }, [
-          t.$slots.pattern ? (n(), v("g", dl, [
-            (n(!0), v($, null, F(ie.value, (l) => (n(), v("defs", null, [
-              y(t.$slots, "pattern", He({ ref_for: !0 }, { seriesIndex: l.absoluteIndex, patternId: `pattern_${k.value}_${l.absoluteIndex}` }), void 0, !0)
+        }, null, 8, pl)) : r.value.length && !e.value.useCustomCells ? (s(), v($, { key: 2 }, [
+          t.$slots.pattern ? (s(), v("g", fl, [
+            (s(!0), v($, null, B(ie.value, (l) => (s(), v("defs", null, [
+              y(t.$slots, "pattern", Xe({ ref_for: !0 }, { seriesIndex: l.absoluteIndex, patternId: `pattern_${g.value}_${l.absoluteIndex}` }), void 0, !0)
             ]))), 256))
           ])) : b("", !0),
-          (n(!0), v($, null, F(R.value, (l, o) => (n(), v("rect", {
+          (s(!0), v($, null, B(R.value, (l, o) => (s(), v("rect", {
             rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
             x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
             y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
@@ -728,115 +731,123 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
             stroke: e.value.style.chart.layout.rect.stroke,
             "stroke-width": e.value.style.chart.layout.rect.strokeWidth,
             filter: K(r.value[o].serieIndex)
-          }, null, 8, hl))), 256)),
-          (n(!0), v($, null, F(R.value, (l, o) => (n(), v("rect", {
+          }, null, 8, yl))), 256)),
+          (s(!0), v($, null, B(R.value, (l, o) => (s(), v("rect", {
             rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
             x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
             y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
             height: T.value <= 0 ? 1e-4 : T.value,
             width: _.value <= 0 ? 1e-4 : _.value,
-            fill: e.value.style.chart.layout.rect.useGradient && e.value.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${k.value}_${o})` : r.value[o].color,
+            fill: e.value.style.chart.layout.rect.useGradient && e.value.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${g.value}_${o})` : r.value[o].color,
             stroke: e.value.style.chart.layout.rect.stroke,
             "stroke-width": e.value.style.chart.layout.rect.strokeWidth,
             filter: K(r.value[o].serieIndex)
-          }, null, 8, fl))), 256)),
-          t.$slots.pattern ? (n(), v("g", pl, [
-            (n(!0), v($, null, F(R.value, (l, o) => (n(), v("rect", {
+          }, null, 8, gl))), 256)),
+          t.$slots.pattern ? (s(), v("g", ml, [
+            (s(!0), v($, null, B(R.value, (l, o) => (s(), v("rect", {
               rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
               x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
               y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
               height: T.value <= 0 ? 1e-4 : T.value,
               width: _.value <= 0 ? 1e-4 : _.value,
-              fill: `url(#pattern_${k.value}_${r.value[o].absoluteIndex})`,
+              fill: `url(#pattern_${g.value}_${r.value[o].absoluteIndex})`,
               stroke: "none",
               filter: K(r.value[o].serieIndex)
-            }, null, 8, yl))), 256))
+            }, null, 8, bl))), 256))
           ])) : b("", !0)
         ], 64)) : b("", !0),
-        (n(!0), v($, null, F(R.value, (l, o) => (n(), v($, null, [
-          wt(o, l) ? (n(), v("text", {
+        (s(!0), v($, null, B(R.value, (l, o) => (s(), v($, null, [
+          kt(o, l) ? (s(), v("text", {
             key: `datalabel_${o}`,
-            textContent: q(kt(o, l)),
+            textContent: q(xt(o, l)),
             x: l.x + e.value.style.chart.layout.labels.captions.offsetX + e.value.style.chart.layout.grid.spaceBetween / 2 + 6,
-            y: l.y + e.value.style.chart.layout.labels.captions.offsetY + e.value.style.chart.layout.grid.spaceBetween / 2 + ze.value / 2 + e.value.style.chart.layout.labels.captions.fontSize / 3,
+            y: l.y + e.value.style.chart.layout.labels.captions.offsetY + e.value.style.chart.layout.grid.spaceBetween / 2 + Ne.value / 2 + e.value.style.chart.layout.labels.captions.fontSize / 3,
             "font-size": e.value.style.chart.layout.labels.captions.fontSize,
-            fill: c(Dt)(r.value[o].color),
+            fill: c(Et)(r.value[o].color),
             filter: K(r.value[o].serieIndex)
-          }, null, 8, gl)) : b("", !0)
+          }, null, 8, wl)) : b("", !0)
         ], 64))), 256)),
-        (n(!0), v($, null, F(R.value, (l, o) => (n(), v("rect", {
+        (s(!0), v($, null, B(R.value, (l, o) => (s(), v("rect", {
           x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
           y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
-          height: ze.value,
-          width: it.value,
+          height: Ne.value,
+          width: vt.value,
           fill: "transparent",
           stroke: "none",
-          onMouseover: (u) => mt(o),
-          onMouseleave: (u) => gt(o),
-          onClick: (u) => yt(o)
-        }, null, 40, ml))), 256)),
-        y(t.$slots, "svg", { svg: B.value }, void 0, !0)
-      ], 14, ul)),
-      t.$slots.watermark ? (n(), v("div", bl, [
-        y(t.$slots, "watermark", W(j({ isPrinting: c(Pe) || c(Le) })), void 0, !0)
+          onMouseover: (u) => bt(o),
+          onMouseleave: (u) => mt(o),
+          onClick: (u) => gt(o)
+        }, null, 40, kl))), 256)),
+        y(t.$slots, "svg", { svg: z.value }, void 0, !0)
+      ], 14, rl)),
+      t.$slots.watermark ? (s(), v("div", xl, [
+        y(t.$slots, "watermark", W(j({ isPrinting: c(Le) || c(Oe) })), void 0, !0)
       ])) : b("", !0),
-      C("div", {
-        ref_key: "chartLegend",
-        ref: me
+      x("div", {
+        id: `legend-bottom-${g.value}`
+      }, null, 8, Cl),
+      $e.value ? (s(), F(At, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${g.value}` : `#legend-bottom-${g.value}`
       }, [
-        e.value.style.chart.legend.show ? (n(), N(Qt, {
-          key: `legend_${Ce.value}`,
-          legendSet: E.value,
-          config: pt.value,
-          onClickMarker: a[0] || (a[0] = ({ legend: l }) => De(l.uid))
-        }, qe({
-          item: g(({ legend: l }) => [
-            C("div", {
-              onClick: (o) => l.segregate(),
-              style: te(`opacity:${p.value.includes(l.uid) ? 0.5 : 1}`)
-            }, q(l.name) + q(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + q(e.value.style.chart.legend.showValue ? c(Y)(
-              e.value.style.chart.layout.labels.dataLabels.formatter,
-              l.value,
-              c(P)({
-                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,
-                isAnimating: z.value
-              }),
-              { datapoint: l }
-            ) : "") + " " + q(e.value.style.chart.legend.showPercentage ? p.value.includes(l.uid) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(l.value / A.value) ? "-" : c(P)({ v: l.value / A.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage, isAnimating: z.value })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, wl)
-          ]),
-          _: 2
+        x("div", {
+          ref_key: "chartLegend",
+          ref: me
         }, [
-          t.$slots.pattern ? {
-            name: "legend-pattern",
-            fn: g(({ legend: l, index: o }) => [
-              fe(Zt, {
-                shape: l.shape,
-                radius: 30,
-                stroke: "none",
-                plot: { x: 30, y: 30 },
-                fill: `url(#pattern_${k.value}_${o})`
-              }, null, 8, ["shape", "fill"])
+          e.value.style.chart.legend.show ? (s(), F(el, {
+            key: `legend_${Ce.value}`,
+            legendSet: E.value,
+            config: yt.value,
+            onClickMarker: a[0] || (a[0] = ({ legend: l }) => Re(l.uid))
+          }, He({
+            item: m(({ legend: l }) => [
+              x("div", {
+                onClick: (o) => l.segregate(),
+                style: te(`opacity:${f.value.includes(l.uid) ? 0.5 : 1}`)
+              }, q(l.name) + q(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + q(e.value.style.chart.legend.showValue ? c(Y)(
+                e.value.style.chart.layout.labels.dataLabels.formatter,
+                l.value,
+                c(P)({
+                  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,
+                  isAnimating: N.value
+                }),
+                { datapoint: l }
+              ) : "") + " " + q(e.value.style.chart.legend.showPercentage ? f.value.includes(l.uid) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(l.value / A.value) ? "-" : c(P)({ v: l.value / A.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage, isAnimating: N.value })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, $l)
             ]),
-            key: "0"
-          } : void 0
-        ]), 1032, ["legendSet", "config"])) : y(t.$slots, "legend", {
-          key: 1,
-          legend: E.value
-        }, void 0, !0)
-      ], 512),
-      t.$slots.source ? (n(), v("div", {
-        key: 5,
+            _: 2
+          }, [
+            t.$slots.pattern ? {
+              name: "legend-pattern",
+              fn: m(({ legend: l, index: o }) => [
+                pe(tl, {
+                  shape: l.shape,
+                  radius: 30,
+                  stroke: "none",
+                  plot: { x: 30, y: 30 },
+                  fill: `url(#pattern_${g.value}_${o})`
+                }, null, 8, ["shape", "fill"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["legendSet", "config"])) : y(t.$slots, "legend", {
+            key: 1,
+            legend: E.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : b("", !0),
+      t.$slots.source ? (s(), v("div", {
+        key: 6,
         ref_key: "source",
         ref: be,
         dir: "auto"
       }, [
         y(t.$slots, "source", {}, void 0, !0)
       ], 512)) : b("", !0),
-      fe(c(lt), {
-        show: x.value.showTooltip && ae.value && p.value.length < m.dataset.length,
+      pe(c(at), {
+        show: C.value.showTooltip && ae.value && f.value.length < w.dataset.length,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -853,19 +864,19 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter
       }, {
-        "tooltip-before": g(() => [
+        "tooltip-before": m(() => [
           y(t.$slots, "tooltip-before", W(j({ ...ve.value })), void 0, !0)
         ]),
-        "tooltip-after": g(() => [
+        "tooltip-after": m(() => [
           y(t.$slots, "tooltip-after", W(j({ ...ve.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "fontSize", "isFullscreen", "smooth", "backdropFilter"]),
-      le.value ? (n(), N(c(tt), {
-        key: 6,
+      le.value ? (s(), F(c(lt), {
+        key: 7,
         hideDetails: "",
         config: {
-          open: x.value.showTable,
+          open: C.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -877,34 +888,34 @@ const ol = ["id"], ul = ["xmlns", "viewBox"], sl = ["id"], nl = ["stop-color"],
           }
         }
       }, {
-        content: g(() => [
-          (n(), N(c(Ze), {
+        content: m(() => [
+          (s(), F(c(et), {
             key: `table_${xe.value}`,
             colNames: Q.value.colNames,
             head: Q.value.head,
             body: Q.value.body,
             config: Q.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: a[1] || (a[1] = (l) => x.value.showTable = !1)
+            onClose: a[1] || (a[1] = (l) => C.value.showTable = !1)
           }, {
-            th: g(({ th: l }) => [
-              C("div", {
+            th: m(({ th: l }) => [
+              x("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, kl)
+              }, null, 8, Il)
             ]),
-            td: g(({ td: l }) => [
-              Tt(q(l.name || l), 1)
+            td: m(({ td: l }) => [
+              St(q(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : b("", !0),
-      c($e) ? (n(), N(ll, { key: 7 })) : b("", !0)
-    ], 46, ol));
+      c(Ie) ? (s(), F(ol, { key: 8 })) : b("", !0)
+    ], 46, sl));
   }
-}, Nl = /* @__PURE__ */ al(xl, [["__scopeId", "data-v-b038175e"]]);
+}, Rl = /* @__PURE__ */ ul(_l, [["__scopeId", "data-v-3c406d34"]]);
 export {
-  Nl as default
+  Rl as default
 };