vue-data-ui 3.0.2 → 3.0.4

package/dist/{vue-ui-scatter-D_BP7XBR.js → vue-ui-scatter-l4Q3KmVI.js}

@@ -1,34 +1,34 @@
-import { defineAsyncComponent as de, computed as T, ref as x, toRefs as Yt, watch as Ee, shallowRef as pt, onMounted as Dt, onBeforeUnmount as Rt, createElementBlock as i, openBlock as u, unref as n, normalizeStyle as ae, normalizeClass as gt, createBlock as oe, createCommentVNode as g, createElementVNode as k, createVNode as Fe, createSlots as jt, withCtx as O, renderSlot as N, normalizeProps as he, guardReactiveProps as fe, Fragment as q, renderList as K, toDisplayString as X, createTextVNode as Vt, nextTick as Ut } from "vue";
-import { u as Gt, c as qt, t as Ht, a as Zt, p as ie, b as Jt, o as mt, f as Ie, d as Kt, g as xt, Y as Qt, e as We, a3 as el, V as tl, X as ll, s as Xe, Z as al, k as se, h as Y, i as H, v as ol, w as sl, y as ul, z as nl } from "./index-B9Ct1B_p.js";
-import { t as il, u as rl } from "./useResponsive-DfdjqQps.js";
-import { u as vl, B as yl } from "./useLoading-D7YHNtLX.js";
-import { u as cl } from "./usePrinter-DcZXg1hH.js";
-import { u as bt } from "./useNestedProp-C0gKxLur.js";
-import { u as dl } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as hl } from "./useChartAccessibility-9icAAmYg.js";
-import fl from "./Legend-CQsASoei.js";
-import pl from "./Title-CntvKJss.js";
-import { _ as kt } from "./Shape-0sW2StrO.js";
-import gl from "./img-Cv4nScI0.js";
-import { _ as ml } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { key: 1 }, _l = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ml = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], $l = { key: 2 }, Al = ["points", "fill", "stroke-width", "stroke-dasharray", "stroke"], Cl = { key: 0 }, Sl = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onMouseover", "onMouseleave", "onClick"], Ll = { key: 1 }, zl = { key: 3 }, Tl = ["id"], Bl = ["stop-color"], Pl = ["stop-color"], Ol = ["id"], Nl = ["stop-color"], El = ["stop-color"], Fl = ["x", "y", "width", "height", "fill", "stroke", "stroke-width", "rx"], Il = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], Wl = { key: 0 }, Xl = ["d", "stroke", "stroke-width"], Yl = ["d", "stroke", "stroke-width"], Dl = ["d", "stroke", "stroke-width"], Rl = ["d", "stroke", "stroke-width"], jl = {
+import { defineAsyncComponent as de, computed as T, ref as m, toRefs as Dt, watch as Ee, shallowRef as gt, onMounted as Rt, onBeforeUnmount as jt, createElementBlock as i, openBlock as u, unref as n, normalizeStyle as oe, normalizeClass as mt, createBlock as K, createCommentVNode as g, createElementVNode as b, createVNode as Fe, createSlots as Vt, withCtx as N, renderSlot as E, normalizeProps as he, guardReactiveProps as fe, Fragment as q, renderList as Q, toDisplayString as Y, Teleport as Ut, createTextVNode as Gt, nextTick as qt } from "vue";
+import { u as Ht, c as Zt, t as Jt, a as Kt, p as ie, b as Qt, o as xt, f as Ie, d as el, g as bt, Y as tl, e as We, a3 as ll, V as al, X as ol, s as Xe, Z as sl, k as se, h as D, i as H, v as ul, w as nl, y as il, z as rl } from "./index-q-LPw2IT.js";
+import { t as vl, u as yl } from "./useResponsive-DfdjqQps.js";
+import { u as cl, B as dl } from "./useLoading-D7YHNtLX.js";
+import { u as hl } from "./usePrinter-DX7efa1s.js";
+import { u as kt } from "./useNestedProp-04aFeUYu.js";
+import { u as fl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as pl } from "./useChartAccessibility-9icAAmYg.js";
+import gl from "./Legend-DcDSkq99.js";
+import ml from "./Title-B55R8CAZ.js";
+import { _ as wt } from "./Shape-DHIaJs9G.js";
+import xl from "./img-Ctts6JQb.js";
+import { _ as bl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const kl = ["id"], wl = ["id"], _l = ["xmlns", "viewBox"], $l = ["width", "height"], Ml = { key: 1 }, Al = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Cl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Sl = { key: 2 }, Ll = ["points", "fill", "stroke-width", "stroke-dasharray", "stroke"], zl = { key: 0 }, Tl = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onMouseover", "onMouseleave", "onClick"], Bl = { key: 1 }, Pl = { key: 3 }, Ol = ["id"], Nl = ["stop-color"], El = ["stop-color"], Fl = ["id"], Il = ["stop-color"], Wl = ["stop-color"], Xl = ["x", "y", "width", "height", "fill", "stroke", "stroke-width", "rx"], Yl = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], Dl = { key: 0 }, Rl = ["d", "stroke", "stroke-width"], jl = ["d", "stroke", "stroke-width"], Vl = ["d", "stroke", "stroke-width"], Ul = ["d", "stroke", "stroke-width"], Gl = {
   key: 4,
   style: { "pointer-events": "none !important" }
-}, Vl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Gl = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], ql = ["x", "y", "font-size", "fill", "font-weight"], Hl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Zl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Jl = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], Kl = ["id", "transform", "font-size", "font-weight", "fill"], Ql = ["font-size", "fill", "transform"], ea = ["transform", "font-size", "fill"], ta = ["x", "y", "font-size", "fill"], la = ["x", "y", "font-size", "fill"], aa = ["font-size", "font-weight", "fill", "x", "y"], oa = ["id"], sa = ["x", "y", "width", "height"], ua = {
+}, ql = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Hl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Zl = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], Jl = ["x", "y", "font-size", "fill", "font-weight"], Kl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ql = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ea = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], ta = ["id", "transform", "font-size", "font-weight", "fill"], la = ["font-size", "fill", "transform"], aa = ["transform", "font-size", "fill"], oa = ["x", "y", "font-size", "fill"], sa = ["x", "y", "font-size", "fill"], ua = ["font-size", "font-weight", "fill", "x", "y"], na = ["id"], ia = ["x", "y", "width", "height"], ra = {
   key: 9,
   style: { pointerEvents: "none" }
-}, na = ["x1", "x2", "y1", "y2", "stroke-dasharray", "stroke", "stroke-width", "clip-path"], ia = ["x", "y", "fill", "font-size", "font-weight"], ra = {
+}, va = ["x1", "x2", "y1", "y2", "stroke-dasharray", "stroke", "stroke-width", "clip-path"], ya = ["x", "y", "fill", "font-size", "font-weight"], ca = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, va = ["onClick"], ya = {
+}, da = ["id"], ha = ["onClick"], fa = {
   key: 0,
   style: { width: "100%", display: "flex", "align-items": "center", "justify-content": "center" }
-}, ca = {
+}, pa = {
   viewBox: "0 0 20 20",
   height: "20",
   width: "20",
   style: { overflow: "hidden", background: "transparent" }
-}, da = { key: 0 }, ha = ["innerHTML"], fa = {
+}, ga = { key: 0 }, ma = ["innerHTML"], xa = {
   __name: "vue-ui-scatter",
   props: {
     config: {
@@ -44,41 +44,41 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
       }
     }
   },
-  setup(wt, { expose: _t }) {
-    const Mt = de(() => import("./vue-ui-accordion-B31QK9Hj.js")), $t = de(() => import("./DataTable-osx68WLA.js")), At = de(() => import("./PackageVersion-DZGrOKw5.js")), Ct = de(() => import("./PenAndPaper-CdXspg5R.js")), St = de(() => import("./Tooltip-DF8e4iB9.js")), Lt = de(() => import("./UserOptions-DQyIO0ts.js")), { vue_ui_scatter: zt } = Gt(), Z = wt, Ye = T(() => !!Z.dataset && Z.dataset.length), D = x(qt()), Tt = x(null), _e = x(!1), Me = x(""), De = x(0), Q = x(null), Re = x(null), je = x(null), Ve = x(null), Ue = x(null), Ge = x(0), qe = x(0), He = x(0), L = x([]), $e = x(null), Bt = x(null), Pt = x(null), Ae = x(null), e = x(ze());
-    function Ot(l = 100, s = 0.8, t = {}) {
+  setup(_t, { expose: $t }) {
+    const Mt = de(() => import("./vue-ui-accordion-D46i_gkB.js")), At = de(() => import("./DataTable-rj9-mAwF.js")), Ct = de(() => import("./PackageVersion-5ZjKSIei.js")), St = de(() => import("./PenAndPaper-BJ0hcgsa.js")), Lt = de(() => import("./Tooltip-BMOddG-M.js")), zt = de(() => import("./UserOptions-DVzyjG-W.js")), { vue_ui_scatter: Tt } = Ht(), Z = _t, Ye = T(() => !!Z.dataset && Z.dataset.length), B = m(Zt()), Bt = m(null), _e = m(!1), $e = m(""), De = m(0), ee = m(null), Re = m(null), je = m(null), Ve = m(null), Ue = m(null), Ge = m(0), qe = m(0), He = m(0), L = m([]), Ze = m(!1), Me = m(null), Pt = m(null), Ot = m(null), Ae = m(null), e = m(ze());
+    function Nt(l = 100, s = 0.8, t = {}) {
       const { meanX: a = 0, sdX: o = 1, meanY: r = 0, sdY: h = 1, seed: C } = t;
       let S = (C ?? Math.floor(Math.random() * 2 ** 31)) >>> 0;
-      const B = () => (S = S * 1664525 + 1013904223 >>> 0, S / 2 ** 32), E = () => {
-        let y = 0, $ = 0;
-        for (; y === 0; ) y = B();
-        for (; $ === 0; ) $ = B();
-        return Math.sqrt(-2 * Math.log(y)) * Math.cos(2 * Math.PI * $);
-      }, d = l / 2, b = Array.from({ length: d }, E), W = Array.from({ length: d }, E), w = (y) => y.reduce(($, me) => $ + me, 0) / y.length, F = w(b), J = w(W);
+      const P = () => (S = S * 1664525 + 1013904223 >>> 0, S / 2 ** 32), F = () => {
+        let y = 0, M = 0;
+        for (; y === 0; ) y = P();
+        for (; M === 0; ) M = P();
+        return Math.sqrt(-2 * Math.log(y)) * Math.cos(2 * Math.PI * M);
+      }, d = l / 2, k = Array.from({ length: d }, F), X = Array.from({ length: d }, F), w = (y) => y.reduce((M, me) => M + me, 0) / y.length, I = w(k), J = w(X);
       for (let y = 0; y < d; y += 1)
-        b[y] -= F, W[y] -= J;
-      const _ = (y, $) => y.reduce((me, we, Ne) => me + we * $[Ne], 0), p = (y) => _(y, y), v = _(W, b) / p(b), m = W.map((y, $) => y - v * b[$]), I = p(b) / d, U = p(m) / d, le = Math.sqrt((1 - s * s) * I / U), P = b.map((y, $) => s * y + le * m[$]), ne = b.concat(b.map((y) => -y)), Oe = P.concat(P.map((y) => -y)), pe = (y) => Math.sqrt(p(y) / y.length), ye = (y, $, me) => {
+        k[y] -= I, X[y] -= J;
+      const _ = (y, M) => y.reduce((me, we, Ne) => me + we * M[Ne], 0), p = (y) => _(y, y), v = _(X, k) / p(k), x = X.map((y, M) => y - v * k[M]), W = p(k) / d, U = p(x) / d, ae = Math.sqrt((1 - s * s) * W / U), O = k.map((y, M) => s * y + ae * x[M]), ne = k.concat(k.map((y) => -y)), Oe = O.concat(O.map((y) => -y)), pe = (y) => Math.sqrt(p(y) / y.length), ye = (y, M, me) => {
         const we = pe(y);
-        return y.map((Ne) => me + (we ? Ne / we * $ : 0));
+        return y.map((Ne) => me + (we ? Ne / we * M : 0));
       }, ce = ye(ne, o, a), ge = ye(Oe, h, r);
       for (let y = ce.length - 1; y > 0; y -= 1) {
-        const $ = Math.floor(B() * (y + 1));
-        [ce[y], ce[$]] = [ce[$], ce[y]], [ge[y], ge[$]] = [ge[$], ge[y]];
+        const M = Math.floor(P() * (y + 1));
+        [ce[y], ce[M]] = [ce[M], ce[y]], [ge[y], ge[M]] = [ge[M], ge[y]];
       }
-      return ce.map((y, $) => ({ x: y, y: ge[$] }));
+      return ce.map((y, M) => ({ x: y, y: ge[M] }));
     }
-    const { loading: Ze, FINAL_DATASET: Ce, manualLoading: Se } = vl({
-      ...Yt(Z),
+    const { loading: Je, FINAL_DATASET: Ce, manualLoading: Se } = cl({
+      ...Dt(Z),
       FINAL_CONFIG: e,
       prepareConfig: ze,
       skeletonDataset: [
         {
           name: "",
           color: "#999999",
-          values: Ot(100, 0.5, { seed: 42 })
+          values: Nt(100, 0.5, { seed: 42 })
         }
       ],
-      skeletonConfig: Ht({
+      skeletonConfig: Jt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -111,39 +111,39 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
           }
         }
       })
-    }), { userOptionsVisible: Le, setUserOptionsVisibility: Je, keepUserOptionState: Ke } = dl({ config: e.value }), { svgRef: Qe } = hl({ config: e.value.style.title });
+    }), { userOptionsVisible: Le, setUserOptionsVisibility: Ke, keepUserOptionState: Qe } = fl({ config: e.value }), { svgRef: et } = pl({ config: e.value.style.title });
     function ze() {
-      const l = bt({
+      const l = kt({
         userConfig: Z.config,
-        defaultConfig: zt
+        defaultConfig: Tt
       });
       return l.theme ? {
-        ...bt({
-          userConfig: Jt.vue_ui_scatter[l.theme] || Z.config,
+        ...kt({
+          userConfig: Qt.vue_ui_scatter[l.theme] || Z.config,
           defaultConfig: l
         }),
-        customPalette: Zt[l.theme] || ie
+        customPalette: Kt[l.theme] || ie
       } : l;
     }
     Ee(() => Z.config, (l) => {
-      Ze.value || (e.value = ze()), Le.value = !e.value.userOptions.showOnChartHover, et(), Ge.value += 1, qe.value += 1, He.value += 1, R.value.showTable = e.value.table.show, R.value.showTooltip = e.value.style.tooltip.show;
+      Je.value || (e.value = ze()), Le.value = !e.value.userOptions.showOnChartHover, tt(), Ge.value += 1, qe.value += 1, He.value += 1, R.value.showTable = e.value.table.show, R.value.showTooltip = e.value.style.tooltip.show;
     }, { deep: !0 }), Ee(() => Z.dataset, (l) => {
       Array.isArray(l) && l.length > 0 && (Se.value = !1);
     }, { deep: !0 });
-    const ee = pt(null), re = pt(null);
-    Dt(() => {
-      et();
+    const te = gt(null), re = gt(null);
+    Rt(() => {
+      Ze.value = !0, tt();
     });
-    const Nt = T(() => !!e.value.debug);
-    function et() {
-      if (mt(Z.dataset) && (Ie({
+    const Et = T(() => !!e.value.debug);
+    function tt() {
+      if (xt(Z.dataset) && (Ie({
         componentName: "VueUiScatter",
         type: "dataset",
-        debug: Nt.value
-      }), Se.value = !0), mt(Z.dataset) || (Se.value = e.value.loading), e.value.responsive) {
-        const l = il(() => {
-          const { width: s, height: t } = rl({
-            chart: Q.value,
+        debug: Et.value
+      }), Se.value = !0), xt(Z.dataset) || (Se.value = e.value.loading), e.value.responsive) {
+        const l = vl(() => {
+          const { width: s, height: t } = yl({
+            chart: ee.value,
             title: e.value.style.title.text ? Re.value : null,
             legend: e.value.style.legend.show ? je.value : null,
             source: Ve.value,
@@ -153,17 +153,17 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             z.value.width = s, z.value.height = t;
           });
         });
-        ee.value && (re.value && ee.value.unobserve(re.value), ee.value.disconnect()), ee.value = new ResizeObserver(l), re.value = Q.value.parentNode, ee.value.observe(re.value);
+        te.value && (re.value && te.value.unobserve(re.value), te.value.disconnect()), te.value = new ResizeObserver(l), re.value = ee.value.parentNode, te.value.observe(re.value);
       }
     }
-    Rt(() => {
-      ee.value && (re.value && ee.value.unobserve(re.value), ee.value.disconnect());
+    jt(() => {
+      te.value && (re.value && te.value.unobserve(re.value), te.value.disconnect());
     });
-    const { isPrinting: tt, isImaging: lt, generatePdf: at, generateImage: ot } = cl({
-      elementId: `vue-ui-scatter_${D.value}`,
+    const { isPrinting: lt, isImaging: at, generatePdf: ot, generateImage: st } = hl({
+      elementId: `vue-ui-scatter_${B.value}`,
       fileName: e.value.style.title.text || "vue-ui-scatter",
       options: e.value.userOptions.print
-    }), Et = T(() => e.value.userOptions.show && !e.value.style.title.text), st = T(() => Kt(e.value.customPalette)), R = x({
+    }), Ft = T(() => e.value.userOptions.show && !e.value.style.title.text), ut = T(() => el(e.value.customPalette)), R = m({
       showTable: e.value.table.show,
       showTooltip: e.value.style.tooltip.show
     });
@@ -173,12 +173,12 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
         showTooltip: e.value.style.tooltip.show
       };
     }, { immediate: !0 });
-    const z = x({
+    const z = m({
       height: e.value.style.layout.height,
       width: e.value.style.layout.width
     }), xe = T(() => e.value.style.layout.marginalBars.show ? e.value.style.layout.marginalBars.size + e.value.style.layout.marginalBars.offset : 0), c = T(() => {
       let l = 0, s = 0;
-      return $e.value && (l = $e.value.getBBox().width + 6), Ae.value && (s = Ae.value.getBBox().height + 6), {
+      return Me.value && (l = Me.value.getBBox().width + 6), Ae.value && (s = Ae.value.getBBox().height + 6), {
         top: e.value.style.layout.padding.top + xe.value + e.value.style.layout.dataLabels.yAxis.fontSize * 2,
         right: z.value.width - e.value.style.layout.padding.right - xe.value - 6,
         bottom: z.value.height - e.value.style.layout.padding.bottom - s,
@@ -186,9 +186,9 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
         height: z.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - xe.value - s - e.value.style.layout.dataLabels.yAxis.fontSize * 2,
         width: z.value.width - e.value.style.layout.padding.left - e.value.style.layout.padding.right - xe.value - l - 6
       };
-    }), M = T(() => {
+    }), $ = T(() => {
       Ce.value.forEach((o, r) => {
-        xt({
+        bt({
           datasetObject: o,
           requiredAttributes: ["values"]
         }).forEach((h) => {
@@ -199,7 +199,7 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             index: r
           });
         }), o.values && o.values.forEach((h, C) => {
-          xt({
+          bt({
             datasetObject: h,
             requiredAttributes: ["x", "y"]
           }).forEach((S) => {
@@ -215,24 +215,24 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
       const l = Math.min(...ue.value.filter((o) => !L.value.includes(o.id)).flatMap((o) => o.values.map((r) => r.x))), s = Math.max(...ue.value.filter((o) => !L.value.includes(o.id)).flatMap((o) => o.values.map((r) => r.x))), t = Math.min(...ue.value.filter((o) => !L.value.includes(o.id)).flatMap((o) => o.values.map((r) => r.y))), a = Math.max(...ue.value.filter((o) => !L.value.includes(o.id)).flatMap((o) => o.values.map((r) => r.y)));
       return { xMin: l >= 0 ? 0 : l, xMax: s, yMin: t >= 0 ? 0 : t, yMax: a };
     }), A = T(() => ({
-      x: c.value.left + Math.abs(M.value.xMin) / (M.value.xMax + Math.abs(M.value.xMin)) * c.value.width,
-      y: c.value.bottom - Math.abs(M.value.yMin) / (M.value.yMax + Math.abs(M.value.yMin)) * c.value.height
+      x: c.value.left + Math.abs($.value.xMin) / ($.value.xMax + Math.abs($.value.xMin)) * c.value.width,
+      y: c.value.bottom - Math.abs($.value.yMin) / ($.value.yMax + Math.abs($.value.yMin)) * c.value.height
     })), ue = T(() => Ce.value.map((l, s) => {
-      const t = `cluster_${D.value}_${s}`;
+      const t = `cluster_${B.value}_${s}`;
       return {
         ...l,
-        values: Qt({
+        values: tl({
           data: l.values,
           threshold: e.value.downsample.threshold
         }),
         id: t,
-        color: l.color ? l.color : st.value[s] || ie[s] || ie[s % ie.length],
+        color: l.color ? l.color : ut.value[s] || ie[s] || ie[s % ie.length],
         opacity: L.value.includes(t) ? 0.5 : 1,
         shape: l.shape ?? "circle",
-        segregate: () => yt(t),
+        segregate: () => ct(t),
         isSegregated: L.value.includes(t)
       };
-    })), Ft = T(() => ({
+    })), It = T(() => ({
       cy: "scatter-div-legend",
       backgroundColor: e.value.style.legend.backgroundColor,
       color: e.value.style.legend.color,
@@ -242,63 +242,63 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
     })), Te = T(() => ue.value.map((l, s) => ({
       ...l,
       plots: l.values.map((t) => ({
-        x: c.value.left + (t.x + Math.abs(M.value.xMin)) / (M.value.xMax + Math.abs(M.value.xMin)) * c.value.width,
-        y: c.value.bottom - (t.y + Math.abs(M.value.yMin)) / (M.value.yMax + Math.abs(M.value.yMin)) * c.value.height,
+        x: c.value.left + (t.x + Math.abs($.value.xMin)) / ($.value.xMax + Math.abs($.value.xMin)) * c.value.width,
+        y: c.value.bottom - (t.y + Math.abs($.value.yMin)) / ($.value.yMax + Math.abs($.value.yMin)) * c.value.height,
         v: {
           ...t,
           name: t.name || ""
         },
         clusterName: l.name,
-        color: l.color ? l.color : st.value[s] || ie[s] || ie[s % ie.length],
-        id: `plot_${D.value}_${Math.random()}`,
+        color: l.color ? l.color : ut.value[s] || ie[s] || ie[s % ie.length],
+        id: `plot_${B.value}_${Math.random()}`,
         weight: t.weight ?? e.value.style.layout.plots.radius
       }))
     })).filter((l) => !L.value.includes(l.id))), j = T(() => {
       const s = ({ m: t, b: a, rect: o, verticalX: r = null }) => {
-        const { left: h, right: C, top: S, bottom: B } = o, E = [], d = (p, v) => {
-          Number.isFinite(p) && Number.isFinite(v) && E.push({ x: p, y: v });
-        }, b = ({ x: p, y: v }) => p >= h - 1e-9 && p <= C + 1e-9 && v >= S - 1e-9 && v <= B + 1e-9;
-        r !== null ? r >= h - 1e-9 && r <= C + 1e-9 && (d(r, S), d(r, B)) : Number.isFinite(t) && (d(h, t * h + a), d(C, t * C + a), Math.abs(t) > 1e-9 ? (d((S - a) / t, S), d((B - a) / t, B)) : a >= S - 1e-9 && a <= B + 1e-9 && (d(h, a), d(C, a)));
-        const W = E.filter(b), w = [];
-        for (const p of W)
+        const { left: h, right: C, top: S, bottom: P } = o, F = [], d = (p, v) => {
+          Number.isFinite(p) && Number.isFinite(v) && F.push({ x: p, y: v });
+        }, k = ({ x: p, y: v }) => p >= h - 1e-9 && p <= C + 1e-9 && v >= S - 1e-9 && v <= P + 1e-9;
+        r !== null ? r >= h - 1e-9 && r <= C + 1e-9 && (d(r, S), d(r, P)) : Number.isFinite(t) && (d(h, t * h + a), d(C, t * C + a), Math.abs(t) > 1e-9 ? (d((S - a) / t, S), d((P - a) / t, P)) : a >= S - 1e-9 && a <= P + 1e-9 && (d(h, a), d(C, a)));
+        const X = F.filter(k), w = [];
+        for (const p of X)
           w.some((v) => Math.abs(v.x - p.x) < 1e-6 && Math.abs(v.y - p.y) < 1e-6) || w.push(p);
         if (w.length < 2) return null;
-        let F = w[0], J = w[1], _ = 0;
+        let I = w[0], J = w[1], _ = 0;
         for (let p = 0; p < w.length; p += 1)
           for (let v = p + 1; v < w.length; v += 1) {
-            const m = w[p].x - w[v].x, I = w[p].y - w[v].y, U = m * m + I * I;
-            U > _ && (_ = U, F = w[p], J = w[v]);
+            const x = w[p].x - w[v].x, W = w[p].y - w[v].y, U = x * x + W * W;
+            U > _ && (_ = U, I = w[p], J = w[v]);
           }
-        return { x1: F.x, y1: F.y, x2: J.x, y2: J.y };
+        return { x1: I.x, y1: I.y, x2: J.x, y2: J.y };
       };
       return Te.value.map((t) => {
-        const a = t.plots.length, o = t.plots.reduce((v, m) => v + m.x, 0) / a, r = t.plots.reduce((v, m) => v + m.y, 0) / a;
+        const a = t.plots.length, o = t.plots.reduce((v, x) => v + x.x, 0) / a, r = t.plots.reduce((v, x) => v + x.y, 0) / a;
         let h = 0, C = 0;
         for (const v of t.plots) {
-          const m = v.x - o, I = v.y - r;
-          h += m * I, C += m * m;
+          const x = v.x - o, W = v.y - r;
+          h += x * W, C += x * x;
         }
-        let S, B, E = null;
-        C < 1e-9 ? (E = o, S = 1 / 0, B = null) : (S = h / C, B = r - S * o);
-        let d, b;
-        E !== null ? (d = 1 / 0, b = null) : (d = S, b = B);
-        const W = t.plots.every((v) => v.v && typeof v.v.x == "number" && typeof v.v.y == "number");
+        let S, P, F = null;
+        C < 1e-9 ? (F = o, S = 1 / 0, P = null) : (S = h / C, P = r - S * o);
+        let d, k;
+        F !== null ? (d = 1 / 0, k = null) : (d = S, k = P);
+        const X = t.plots.every((v) => v.v && typeof v.v.x == "number" && typeof v.v.y == "number");
         let w = NaN;
         if (a >= 2) {
-          let v = 0, m = 0;
-          W ? (v = t.plots.reduce((P, ne) => P + ne.v.x, 0) / a, m = t.plots.reduce((P, ne) => P + ne.v.y, 0) / a) : (v = o, m = -r);
-          let I = 0, U = 0, le = 0;
-          for (const P of t.plots) {
-            const ne = W ? P.v.x : P.x, Oe = W ? P.v.y : -P.y, pe = ne - v, ye = Oe - m;
-            I += pe * ye, U += pe * pe, le += ye * ye;
+          let v = 0, x = 0;
+          X ? (v = t.plots.reduce((O, ne) => O + ne.v.x, 0) / a, x = t.plots.reduce((O, ne) => O + ne.v.y, 0) / a) : (v = o, x = -r);
+          let W = 0, U = 0, ae = 0;
+          for (const O of t.plots) {
+            const ne = X ? O.v.x : O.x, Oe = X ? O.v.y : -O.y, pe = ne - v, ye = Oe - x;
+            W += pe * ye, U += pe * pe, ae += ye * ye;
           }
-          if (U >= 1e-9 && le >= 1e-9) {
-            const P = I / Math.sqrt(U * le);
-            w = Math.max(-1, Math.min(1, P));
+          if (U >= 1e-9 && ae >= 1e-9) {
+            const O = W / Math.sqrt(U * ae);
+            w = Math.max(-1, Math.min(1, O));
           }
         }
-        const F = s({ m: d, b, rect: c.value, verticalX: E });
-        if (!F)
+        const I = s({ m: d, b: k, rect: c.value, verticalX: F });
+        if (!I)
           return {
             ...t,
             correlation: null,
@@ -310,33 +310,33 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
               color: We(t.color)
             }))
           };
-        const J = (F.x1 + F.x2) / 2, _ = (F.y1 + F.y2) / 2, p = { x: J, y: _ };
+        const J = (I.x1 + I.x2) / 2, _ = (I.y1 + I.y2) / 2, p = { x: J, y: _ };
         return {
           ...t,
           color: We(t.color),
           correlation: {
-            ...F,
+            ...I,
             coefficient: w
           },
           label: p,
           plots: t.plots.map((v) => {
-            let m, I;
-            E !== null ? (m = E, I = v.y) : Math.abs(d) < 1e-9 ? (m = v.x, I = b) : (m = (v.x + d * v.y - d * b) / (1 + d * d), I = (d * v.x + d * d * v.y + b) / (1 + d * d));
-            const U = v.x - m, le = v.y - I, P = Math.sqrt(U * U + le * le);
+            let x, W;
+            F !== null ? (x = F, W = v.y) : Math.abs(d) < 1e-9 ? (x = v.x, W = k) : (x = (v.x + d * v.y - d * k) / (1 + d * d), W = (d * v.x + d * d * v.y + k) / (1 + d * d));
+            const U = v.x - x, ae = v.y - W, O = Math.sqrt(U * U + ae * ae);
             return {
               ...v,
-              deviation: P,
+              deviation: O,
               shape: t.shape,
               color: We(t.color)
             };
           })
         };
       });
-    }), ut = T(() => Math.max(...j.value.flatMap((l) => l.plots.map((s) => Math.abs(s.deviation)))));
-    function It() {
+    }), nt = T(() => Math.max(...j.value.flatMap((l) => l.plots.map((s) => Math.abs(s.deviation)))));
+    function Wt() {
       return j.value;
     }
-    function nt(l, s) {
+    function it(l, s) {
       const t = Array.isArray(l) ? l.flatMap((_) => _.plots.map((p) => ({
         x: p.x,
         y: p.y
@@ -348,28 +348,28 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
       t.forEach(({ x: _, y: p }) => {
         a = Math.min(a, _), o = Math.max(o, _), r = Math.min(r, p), h = Math.max(h, p);
       });
-      const C = o - a, S = h - r, B = C / s, E = S / s, d = Array(s).fill(0), b = Array(s).fill(0);
+      const C = o - a, S = h - r, P = C / s, F = S / s, d = Array(s).fill(0), k = Array(s).fill(0);
       t.forEach(({ x: _, y: p }) => {
-        const v = Math.floor((_ - a) / B), m = Math.floor((p - r) / E);
-        d[v] || (d[v] = 0), b[m] || (b[m] = 0), d[v] += 1, b[m] += 1;
+        const v = Math.floor((_ - a) / P), x = Math.floor((p - r) / F);
+        d[v] || (d[v] = 0), k[x] || (k[x] = 0), d[v] += 1, k[x] += 1;
       });
-      const W = [], w = [];
+      const X = [], w = [];
       for (let _ = 0; _ < s; _ += 1)
-        W.push(a + (_ + 0.5) * B), w.push(r + (_ + 0.5) * E);
-      const F = Math.max(...d), J = Math.max(...b);
-      return { x: d, y: b, avgX: W, avgY: w, maxX: F, maxY: J };
+        X.push(a + (_ + 0.5) * P), w.push(r + (_ + 0.5) * F);
+      const I = Math.max(...d), J = Math.max(...k);
+      return { x: d, y: k, avgX: X, avgY: w, maxX: I, maxY: J };
     }
-    const te = T(() => e.value.style.layout.marginalBars.tranches), V = T(() => nt(Te.value, te.value)), Wt = T(() => {
+    const le = T(() => e.value.style.layout.marginalBars.tranches), V = T(() => it(Te.value, le.value)), Xt = T(() => {
       const l = c.value.top - e.value.style.layout.marginalBars.offset, s = c.value.right + e.value.style.layout.marginalBars.offset;
       return Te.value.map((t) => {
-        const a = nt(t, te.value);
+        const a = it(t, le.value);
         return {
           coords: a,
-          dX: tl(a.avgX.map((o, r) => ({
+          dX: al(a.avgX.map((o, r) => ({
             x: o,
             y: l - a.x[r] / a.maxX * e.value.style.layout.marginalBars.size
           }))),
-          dY: el(a.avgY.map((o, r) => ({
+          dY: ll(a.avgY.map((o, r) => ({
             y: o,
             x: s + e.value.style.layout.marginalBars.size * a.y[r] / a.maxY
           }))),
@@ -377,8 +377,8 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
           id: t.id
         };
       });
-    }), G = x(void 0), f = x(null), Be = x(null);
-    function it(l, s) {
+    }), G = m(void 0), f = m(null), Be = m(null);
+    function rt(l, s) {
       G.value = l.id, f.value = l;
       let t = "";
       e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: s }), Be.value = {
@@ -388,12 +388,12 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
         config: e.value
       };
       const a = e.value.style.tooltip.customFormat;
-      ul(a) && nl(() => a({
+      il(a) && rl(() => a({
         datapoint: l,
         seriesIndex: s,
         series: j.value,
         config: e.value
-      })) ? Me.value = a({
+      })) ? $e.value = a({
         datapoint: l,
         seriesIndex: s,
         series: j.value,
@@ -421,27 +421,27 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
       )}</b></div>`, t += `${e.value.style.layout.plots.deviation.translation}: <b>${H({
         v: l.deviation,
         r: e.value.style.layout.plots.deviation.roundingValue
-      })}</b>`, t += "</div>", Me.value = `<div>${t}</div>`), _e.value = !0;
+      })}</b>`, t += "</div>", $e.value = `<div>${t}</div>`), _e.value = !0;
     }
-    function rt(l, s) {
+    function vt(l, s) {
       e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: s }), _e.value = !1, G.value = void 0, f.value = null;
     }
-    function vt(l, s) {
+    function yt(l, s) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: s });
     }
-    function yt(l) {
+    function ct(l) {
       L.value.includes(l) ? L.value = L.value.filter((s) => s !== l) : L.value.length < Ce.value.length - 1 && L.value.push(l);
     }
-    function ct(l = null) {
-      Ut(() => {
+    function dt(l = null) {
+      qt(() => {
         const s = ["", e.value.table.translations.correlationCoefficient, e.value.table.translations.nbrPlots, `${e.value.style.layout.dataLabels.xAxis.name} ${e.value.table.translations.average}`, `${e.value.style.layout.dataLabels.yAxis.name} ${e.value.table.translations.average}`], t = j.value.map((r) => [
           r.name,
           r.correlation.coefficient,
           r.plots.length,
           r.plots.map((h) => h.v.x).reduce((h, C) => h + C, 0) / r.plots.length,
           r.plots.map((h) => h.v.y).reduce((h, C) => h + C, 0) / r.plots.length
-        ]), a = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([s]).concat(t), o = ol(a);
-        l ? l(o) : sl({ csvContent: o, title: e.value.style.title.text || "vue-ui-heatmap" });
+        ]), a = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([s]).concat(t), o = ul(a);
+        l ? l(o) : nl({ csvContent: o, title: e.value.style.title.text || "vue-ui-heatmap" });
       });
     }
     const be = T(() => {
@@ -475,23 +475,23 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
         breakpoint: e.value.table.responsiveBreakpoint
       };
       return { head: l, body: s, config: t, colNames: l };
-    }), ve = x(!1);
-    function dt(l) {
+    }), ve = m(!1);
+    function ht(l) {
       ve.value = l, De.value += 1;
     }
-    function ht() {
+    function ft() {
       R.value.showTable = !R.value.showTable;
     }
-    function ft() {
+    function pt() {
       R.value.showTooltip = !R.value.showTooltip;
     }
-    const ke = x(!1);
+    const ke = m(!1);
     function Pe() {
       ke.value = !ke.value;
     }
-    async function Xt({ scale: l = 2 } = {}) {
-      if (!Q.value) return;
-      const { width: s, height: t } = Q.value.getBoundingClientRect(), a = s / t, { imageUri: o, base64: r } = await gl({ domElement: Q.value, base64: !0, img: !0, scale: l });
+    async function Yt({ scale: l = 2 } = {}) {
+      if (!ee.value) return;
+      const { width: s, height: t } = ee.value.getBoundingClientRect(), a = s / t, { imageUri: o, base64: r } = await xl({ domElement: ee.value, base64: !0, img: !0, scale: l });
       return {
         imageUri: o,
         base64: r,
@@ -501,34 +501,34 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
         aspectRatio: a
       };
     }
-    return _t({
-      getData: It,
-      getImage: Xt,
-      generatePdf: at,
-      generateCsv: ct,
-      generateImage: ot,
-      toggleTable: ht,
-      toggleTooltip: ft,
+    return $t({
+      getData: Wt,
+      getImage: Yt,
+      generatePdf: ot,
+      generateCsv: dt,
+      generateImage: st,
+      toggleTable: ft,
+      toggleTooltip: pt,
       toggleAnnotator: Pe,
-      toggleFullscreen: dt
+      toggleFullscreen: ht
     }), (l, s) => (u(), i("div", {
-      class: gt(`vue-ui-scatter ${ve.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      class: mt(`vue-ui-scatter ${ve.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "scatterChart",
-      ref: Q,
-      id: `vue-ui-scatter_${D.value}`,
-      style: ae(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
-      onMouseenter: s[2] || (s[2] = () => n(Je)(!0)),
-      onMouseleave: s[3] || (s[3] = () => n(Je)(!1))
+      ref: ee,
+      id: `vue-ui-scatter_${B.value}`,
+      style: oe(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
+      onMouseenter: s[2] || (s[2] = () => n(Ke)(!0)),
+      onMouseleave: s[3] || (s[3] = () => n(Ke)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (u(), oe(n(Ct), {
+      e.value.userOptions.buttons.annotator ? (u(), K(n(St), {
         key: 0,
-        svgRef: n(Qe),
+        svgRef: n(et),
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
         active: ke.value,
         onClose: Pe
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
-      Et.value ? (u(), i("div", {
+      Ft.value ? (u(), i("div", {
         key: 1,
         ref_key: "noTitle",
         ref: Ue,
@@ -541,7 +541,7 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
         ref: Re,
         style: "width:100%;background:transparent"
       }, [
-        (u(), oe(pl, {
+        (u(), K(ml, {
           key: `title_${Ge.value}`,
           config: {
             title: {
@@ -555,15 +555,18 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
           }
         }, null, 8, ["config"]))
       ], 512)) : g("", !0),
-      e.value.userOptions.show && Ye.value && (n(Ke) || n(Le)) ? (u(), oe(n(Lt), {
+      b("div", {
+        id: `legend-top-${B.value}`
+      }, null, 8, wl),
+      e.value.userOptions.show && Ye.value && (n(Qe) || n(Le)) ? (u(), K(n(zt), {
         ref_key: "details",
-        ref: Tt,
+        ref: Bt,
         key: `user_options_${De.value}`,
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
-        isImaging: n(lt),
-        isPrinting: n(tt),
-        uid: D.value,
+        isImaging: n(at),
+        isPrinting: n(lt),
+        uid: B.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -573,89 +576,89 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
         isTooltip: R.value.showTooltip,
         isFullscreen: ve.value,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: Q.value,
+        chartElement: ee.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: ke.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: dt,
-        onGeneratePdf: n(at),
-        onGenerateCsv: ct,
-        onGenerateImage: n(ot),
-        onToggleTable: ht,
-        onToggleTooltip: ft,
+        onToggleFullscreen: ht,
+        onGeneratePdf: n(ot),
+        onGenerateCsv: dt,
+        onGenerateImage: n(st),
+        onToggleTable: ft,
+        onToggleTooltip: pt,
         onToggleAnnotator: Pe,
-        style: ae({
-          visibility: n(Ke) ? n(Le) ? "visible" : "hidden" : "visible"
+        style: oe({
+          visibility: n(Qe) ? n(Le) ? "visible" : "hidden" : "visible"
         })
-      }, jt({ _: 2 }, [
+      }, Vt({ _: 2 }, [
         l.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: O(({ isOpen: t, color: a }) => [
-            N(l.$slots, "menuIcon", he(fe({ isOpen: t, color: a })), void 0, !0)
+          fn: N(({ isOpen: t, color: a }) => [
+            E(l.$slots, "menuIcon", he(fe({ isOpen: t, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         l.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: O(() => [
-            N(l.$slots, "optionTooltip", {}, void 0, !0)
+          fn: N(() => [
+            E(l.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         l.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: O(() => [
-            N(l.$slots, "optionPdf", {}, void 0, !0)
+          fn: N(() => [
+            E(l.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         l.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: O(() => [
-            N(l.$slots, "optionCsv", {}, void 0, !0)
+          fn: N(() => [
+            E(l.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         l.$slots.optionImg ? {
           name: "optionImg",
-          fn: O(() => [
-            N(l.$slots, "optionImg", {}, void 0, !0)
+          fn: N(() => [
+            E(l.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         l.$slots.optionTable ? {
           name: "optionTable",
-          fn: O(() => [
-            N(l.$slots, "optionTable", {}, void 0, !0)
+          fn: N(() => [
+            E(l.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         l.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: O(({ toggleFullscreen: t, isFullscreen: a }) => [
-            N(l.$slots, "optionFullscreen", he(fe({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
+          fn: N(({ toggleFullscreen: t, isFullscreen: a }) => [
+            E(l.$slots, "optionFullscreen", he(fe({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         l.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: O(({ toggleAnnotator: t, isAnnotator: a }) => [
-            N(l.$slots, "optionAnnotator", he(fe({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
+          fn: N(({ toggleAnnotator: t, isAnnotator: a }) => [
+            E(l.$slots, "optionAnnotator", he(fe({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
           ]),
           key: "7"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
       (u(), i("svg", {
         ref_key: "svgRef",
-        ref: Qe,
-        xmlns: n(ll),
-        class: gt({ "vue-data-ui-fullscreen--on": ve.value, "vue-data-ui-fulscreen--off": !ve.value, animated: e.value.useCssAnimation }),
+        ref: et,
+        xmlns: n(ol),
+        class: mt({ "vue-data-ui-fullscreen--on": ve.value, "vue-data-ui-fulscreen--off": !ve.value, animated: e.value.useCssAnimation }),
         viewBox: `0 0 ${z.value.width <= 0 ? 10 : z.value.width} ${z.value.height <= 0 ? 10 : z.value.height}`,
-        style: ae(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
+        style: oe(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
       }, [
-        Fe(n(At)),
+        Fe(n(Ct)),
         l.$slots["chart-background"] ? (u(), i("foreignObject", {
           key: 0,
           x: 0,
@@ -666,10 +669,10 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             pointerEvents: "none"
           }
         }, [
-          N(l.$slots, "chart-background", {}, void 0, !0)
-        ], 8, kl)) : g("", !0),
-        e.value.style.layout.axis.show ? (u(), i("g", wl, [
-          k("line", {
+          E(l.$slots, "chart-background", {}, void 0, !0)
+        ], 8, $l)) : g("", !0),
+        e.value.style.layout.axis.show ? (u(), i("g", Ml, [
+          b("line", {
             x1: A.value.x,
             x2: A.value.x,
             y1: c.value.top,
@@ -677,8 +680,8 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             stroke: e.value.style.layout.axis.stroke,
             "stroke-width": e.value.style.layout.axis.strokeWidth,
             "stroke-linecap": "round"
-          }, null, 8, _l),
-          k("line", {
+          }, null, 8, Al),
+          b("line", {
             x1: c.value.left,
             x2: c.value.right,
             y1: A.value.y,
@@ -686,116 +689,116 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             stroke: e.value.style.layout.axis.stroke,
             "stroke-width": e.value.style.layout.axis.strokeWidth,
             "stroke-linecap": "round"
-          }, null, 8, Ml)
+          }, null, 8, Cl)
         ])) : g("", !0),
-        e.value.style.layout.plots.giftWrap.show ? (u(), i("g", $l, [
-          (u(!0), i(q, null, K(j.value, (t, a) => (u(), i("g", null, [
+        e.value.style.layout.plots.giftWrap.show ? (u(), i("g", Sl, [
+          (u(!0), i(q, null, Q(j.value, (t, a) => (u(), i("g", null, [
             t.plots.length > 2 ? (u(), i("polygon", {
               key: 0,
-              points: n(al)({ series: t.plots }),
+              points: n(sl)({ series: t.plots }),
               fill: n(Xe)(t.color, e.value.style.layout.plots.giftWrap.fillOpacity * 100),
               "stroke-width": e.value.style.layout.plots.giftWrap.strokeWidth,
               "stroke-dasharray": e.value.style.layout.plots.giftWrap.strokeDasharray,
               stroke: t.color,
               "stroke-linejoin": "round",
               "stroke-linecap": "round"
-            }, null, 8, Al)) : g("", !0)
+            }, null, 8, Ll)) : g("", !0)
           ]))), 256))
         ])) : g("", !0),
-        (u(!0), i(q, null, K(j.value, (t, a) => (u(), i("g", null, [
-          !t.shape || t.shape === "circle" ? (u(), i("g", Cl, [
-            (u(!0), i(q, null, K(t.plots, (o, r) => (u(), i("circle", {
+        (u(!0), i(q, null, Q(j.value, (t, a) => (u(), i("g", null, [
+          !t.shape || t.shape === "circle" ? (u(), i("g", zl, [
+            (u(!0), i(q, null, Q(t.plots, (o, r) => (u(), i("circle", {
               cx: o.x,
               cy: o.y,
               r: G.value && G.value === o.id ? o.weight * 2 : o.weight,
               fill: n(Xe)(t.color, e.value.style.layout.plots.opacity * 100),
               stroke: e.value.style.layout.plots.stroke,
               "stroke-width": e.value.style.layout.plots.strokeWidth,
-              style: ae(`opacity:${G.value && G.value === o.id ? 1 : e.value.style.layout.plots.significance.useDistanceOpacity ? 1 - Math.abs(o.deviation) / ut.value : e.value.style.layout.plots.significance.show && Math.abs(o.deviation) > e.value.style.layout.plots.significance.deviationThreshold ? e.value.style.layout.plots.significance.opacity : 1}`),
-              onMouseover: (h) => it(o, a),
-              onMouseleave: (h) => rt(o, a),
-              onClick: (h) => vt(o, a)
-            }, null, 44, Sl))), 256))
-          ])) : (u(), i("g", Ll, [
-            (u(!0), i(q, null, K(t.plots, (o, r) => (u(), oe(kt, {
+              style: oe(`opacity:${G.value && G.value === o.id ? 1 : e.value.style.layout.plots.significance.useDistanceOpacity ? 1 - Math.abs(o.deviation) / nt.value : e.value.style.layout.plots.significance.show && Math.abs(o.deviation) > e.value.style.layout.plots.significance.deviationThreshold ? e.value.style.layout.plots.significance.opacity : 1}`),
+              onMouseover: (h) => rt(o, a),
+              onMouseleave: (h) => vt(o, a),
+              onClick: (h) => yt(o, a)
+            }, null, 44, Tl))), 256))
+          ])) : (u(), i("g", Bl, [
+            (u(!0), i(q, null, Q(t.plots, (o, r) => (u(), K(wt, {
               plot: { x: o.x, y: o.y },
               radius: G.value && G.value === o.id ? o.weight * 2 : o.weight,
               shape: t.shape,
               color: n(Xe)(t.color, e.value.style.layout.plots.opacity * 100),
               stroke: e.value.style.layout.plots.stroke,
               strokeWidth: e.value.style.layout.plots.strokeWidth,
-              style: ae(`opacity:${G.value && G.value === o.id ? 1 : e.value.style.layout.plots.significance.useDistanceOpacity ? 1 - Math.abs(o.deviation) / ut.value : e.value.style.layout.plots.significance.show && Math.abs(o.deviation) > e.value.style.layout.plots.significance.deviationThreshold ? e.value.style.layout.plots.significance.opacity : 1}`),
-              onMouseover: (h) => it(o, a),
-              onMouseleave: (h) => rt(o, a),
-              onClick: (h) => vt(o, a)
+              style: oe(`opacity:${G.value && G.value === o.id ? 1 : e.value.style.layout.plots.significance.useDistanceOpacity ? 1 - Math.abs(o.deviation) / nt.value : e.value.style.layout.plots.significance.show && Math.abs(o.deviation) > e.value.style.layout.plots.significance.deviationThreshold ? e.value.style.layout.plots.significance.opacity : 1}`),
+              onMouseover: (h) => rt(o, a),
+              onMouseleave: (h) => vt(o, a),
+              onClick: (h) => yt(o, a)
             }, null, 8, ["plot", "radius", "shape", "color", "stroke", "strokeWidth", "style", "onMouseover", "onMouseleave", "onClick"]))), 256))
           ]))
         ]))), 256)),
-        e.value.style.layout.marginalBars.show ? (u(), i("g", zl, [
-          k("defs", null, [
-            k("linearGradient", {
-              id: `marginal_x_${D.value}`,
+        e.value.style.layout.marginalBars.show ? (u(), i("g", Pl, [
+          b("defs", null, [
+            b("linearGradient", {
+              id: `marginal_x_${B.value}`,
               x1: "0%",
               y1: "0%",
               x2: "0%",
               y2: "100%"
             }, [
-              k("stop", {
+              b("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.layout.marginalBars.fill
-              }, null, 8, Bl),
-              k("stop", {
+              }, null, 8, Nl),
+              b("stop", {
                 offset: "100%",
                 "stop-color": e.value.style.backgroundColor
-              }, null, 8, Pl)
-            ], 8, Tl),
-            k("linearGradient", {
-              id: `marginal_y_${D.value}`,
+              }, null, 8, El)
+            ], 8, Ol),
+            b("linearGradient", {
+              id: `marginal_y_${B.value}`,
               x1: "0%",
               x2: "100%",
               y1: "0%",
               y2: "0%"
             }, [
-              k("stop", {
+              b("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.backgroundColor
-              }, null, 8, Nl),
-              k("stop", {
+              }, null, 8, Il),
+              b("stop", {
                 offset: "100%",
                 "stop-color": e.value.style.layout.marginalBars.fill
-              }, null, 8, El)
-            ], 8, Ol)
+              }, null, 8, Wl)
+            ], 8, Fl)
           ]),
-          (u(!0), i(q, null, K(V.value.x, (t, a) => (u(), i("g", null, [
+          (u(!0), i(q, null, Q(V.value.x, (t, a) => (u(), i("g", null, [
             t && V.value.avgX[a] ? (u(), i("rect", {
               key: 0,
-              x: V.value.avgX[a] - c.value.width / te.value / 2,
+              x: V.value.avgX[a] - c.value.width / le.value / 2,
               y: c.value.top - e.value.style.layout.marginalBars.offset - t / V.value.maxX * e.value.style.layout.marginalBars.size,
-              width: c.value.width / te.value <= 0 ? 1e-4 : c.value.width / te.value,
+              width: c.value.width / le.value <= 0 ? 1e-4 : c.value.width / le.value,
               height: t / V.value.maxX * e.value.style.layout.marginalBars.size <= 0 ? 1e-4 : t / V.value.maxX * e.value.style.layout.marginalBars.size,
-              fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_x_${D.value})` : e.value.style.layout.marginalBars.fill,
-              style: ae(`opacity:${e.value.style.layout.marginalBars.opacity}`),
+              fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_x_${B.value})` : e.value.style.layout.marginalBars.fill,
+              style: oe(`opacity:${e.value.style.layout.marginalBars.opacity}`),
               stroke: e.value.style.backgroundColor,
               "stroke-width": e.value.style.layout.marginalBars.strokeWidth,
               rx: e.value.style.layout.marginalBars.borderRadius
-            }, null, 12, Fl)) : g("", !0)
+            }, null, 12, Xl)) : g("", !0)
           ]))), 256)),
-          (u(!0), i(q, null, K(V.value.y, (t, a) => (u(), i("g", null, [
+          (u(!0), i(q, null, Q(V.value.y, (t, a) => (u(), i("g", null, [
             t && V.value.avgY[a] ? (u(), i("rect", {
               key: 0,
               x: c.value.right + e.value.style.layout.marginalBars.offset,
-              y: V.value.avgY[a] - c.value.height / te.value / 2,
-              height: c.value.height / te.value <= 0 ? 1e-4 : c.value.height / te.value,
+              y: V.value.avgY[a] - c.value.height / le.value / 2,
+              height: c.value.height / le.value <= 0 ? 1e-4 : c.value.height / le.value,
               width: t / V.value.maxY * e.value.style.layout.marginalBars.size <= 0 ? 1e-4 : t / V.value.maxY * e.value.style.layout.marginalBars.size,
-              fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_y_${D.value})` : e.value.style.layout.marginalBars.fill,
-              style: ae(`opacity:${e.value.style.layout.marginalBars.opacity}`),
+              fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_y_${B.value})` : e.value.style.layout.marginalBars.fill,
+              style: oe(`opacity:${e.value.style.layout.marginalBars.opacity}`),
               stroke: e.value.style.backgroundColor,
               "stroke-width": e.value.style.layout.marginalBars.strokeWidth,
               rx: e.value.style.layout.marginalBars.borderRadius
-            }, null, 12, Il)) : g("", !0)
+            }, null, 12, Yl)) : g("", !0)
           ]))), 256)),
-          e.value.style.layout.marginalBars.showLines ? (u(), i("g", Wl, [
-            (u(!0), i(q, null, K(Wt.value, (t) => (u(), i(q, null, [
+          e.value.style.layout.marginalBars.showLines ? (u(), i("g", Dl, [
+            (u(!0), i(q, null, Q(Xt.value, (t) => (u(), i(q, null, [
               L.value.includes(t.id) ? g("", !0) : (u(), i("path", {
                 key: 0,
                 d: `M ${t.dX}`,
@@ -804,7 +807,7 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 fill: "none"
-              }, null, 8, Xl)),
+              }, null, 8, Rl)),
               L.value.includes(t.id) ? g("", !0) : (u(), i("path", {
                 key: 1,
                 d: `M ${t.dX}`,
@@ -813,7 +816,7 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 fill: "none"
-              }, null, 8, Yl)),
+              }, null, 8, jl)),
               L.value.includes(t.id) ? g("", !0) : (u(), i("path", {
                 key: 2,
                 d: `M ${t.dY}`,
@@ -822,7 +825,7 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 fill: "none"
-              }, null, 8, Dl)),
+              }, null, 8, Vl)),
               L.value.includes(t.id) ? g("", !0) : (u(), i("path", {
                 key: 3,
                 d: `M ${t.dY}`,
@@ -831,12 +834,12 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 fill: "none"
-              }, null, 8, Rl))
+              }, null, 8, Ul))
             ], 64))), 256))
           ])) : g("", !0)
         ])) : g("", !0),
-        f.value && e.value.style.layout.plots.selectors.show ? (u(), i("g", jl, [
-          k("line", {
+        f.value && e.value.style.layout.plots.selectors.show ? (u(), i("g", Gl, [
+          b("line", {
             x1: A.value.x,
             x2: f.value.x,
             y1: f.value.y,
@@ -846,8 +849,8 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             "stroke-dasharray": e.value.style.layout.plots.selectors.strokeDasharray,
             "stroke-linecap": "round",
             class: "line-pointer"
-          }, null, 8, Vl),
-          k("line", {
+          }, null, 8, ql),
+          b("line", {
             x1: f.value.x,
             x2: f.value.x,
             y1: A.value.y,
@@ -857,44 +860,44 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             "stroke-dasharray": e.value.style.layout.plots.selectors.strokeDasharray,
             "stroke-linecap": "round",
             class: "line-pointer"
-          }, null, 8, Ul),
-          k("text", {
+          }, null, 8, Hl),
+          b("text", {
             x: A.value.x + (f.value.x > A.value.x ? -6 : 6),
             y: f.value.y + e.value.style.layout.plots.selectors.labels.fontSize / 3,
             "font-size": e.value.style.layout.plots.selectors.labels.fontSize,
             fill: e.value.style.layout.plots.selectors.labels.color,
             "font-weight": e.value.style.layout.plots.selectors.labels.bold ? "bold" : "normal",
             "text-anchor": f.value.x > A.value.x ? "end" : "start"
-          }, X(n(se)(
+          }, Y(n(se)(
             e.value.style.layout.plots.selectors.labels.y.formatter,
-            n(Y)(f.value.v.y),
+            n(D)(f.value.v.y),
             n(H)({
               p: e.value.style.layout.plots.selectors.labels.prefix,
-              v: n(Y)(f.value.v.y),
+              v: n(D)(f.value.v.y),
               s: e.value.style.layout.plots.selectors.labels.suffix,
               r: e.value.style.layout.plots.selectors.labels.rounding
             }),
             { datapoint: f.value }
-          )), 9, Gl),
-          k("text", {
+          )), 9, Zl),
+          b("text", {
             x: f.value.x,
             y: A.value.y + (f.value.y > A.value.y ? -6 : e.value.style.layout.plots.selectors.labels.fontSize + 6),
             "font-size": e.value.style.layout.plots.selectors.labels.fontSize,
             fill: e.value.style.layout.plots.selectors.labels.color,
             "font-weight": e.value.style.layout.plots.selectors.labels.bold ? "bold" : "normal",
             "text-anchor": "middle"
-          }, X(n(se)(
+          }, Y(n(se)(
             e.value.style.layout.plots.selectors.labels.y.formatter,
-            n(Y)(f.value.v.x),
+            n(D)(f.value.v.x),
             n(H)({
               p: e.value.style.layout.plots.selectors.labels.prefix,
-              v: n(Y)(f.value.v.x),
+              v: n(D)(f.value.v.x),
               s: e.value.style.layout.plots.selectors.labels.suffix,
               r: e.value.style.layout.plots.selectors.labels.rounding
             }),
             { datapoint: f.value }
-          )), 9, ql),
-          k("circle", {
+          )), 9, Jl),
+          b("circle", {
             cx: A.value.x,
             cy: f.value.y,
             r: e.value.style.layout.plots.selectors.markers.radius,
@@ -902,8 +905,8 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             stroke: e.value.style.layout.plots.selectors.markers.stroke,
             "stroke-width": e.value.style.layout.plots.selectors.markers.strokeWidth,
             class: "line-pointer"
-          }, null, 8, Hl),
-          k("circle", {
+          }, null, 8, Kl),
+          b("circle", {
             cx: f.value.x,
             cy: A.value.y,
             r: e.value.style.layout.plots.selectors.markers.radius,
@@ -911,7 +914,7 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             stroke: e.value.style.layout.plots.selectors.markers.stroke,
             "stroke-width": e.value.style.layout.plots.selectors.markers.strokeWidth,
             class: "line-pointer"
-          }, null, 8, Zl),
+          }, null, 8, Ql),
           e.value.style.layout.plots.selectors.labels.showName ? (u(), i("text", {
             key: 0,
             x: f.value.x,
@@ -920,116 +923,116 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             fill: e.value.style.layout.plots.selectors.labels.color,
             "font-weight": e.value.style.layout.plots.selectors.labels.bold ? "bold" : "normal",
             "text-anchor": f.value.x < c.value.left + 100 ? "start" : f.value.x > c.value.right - 100 ? "end" : f.value.x > A.value.x ? "start" : "end"
-          }, X(f.value.v.name), 9, Jl)) : g("", !0)
+          }, Y(f.value.v.name), 9, ea)) : g("", !0)
         ])) : g("", !0),
         e.value.style.layout.dataLabels.xAxis.show ? (u(), i("g", {
           key: 5,
           ref_key: "xAxisLabelLeft",
-          ref: $e
+          ref: Me
         }, [
-          k("text", {
-            id: `vue-ui-scatter-xAxis-label-${D.value}`,
+          b("text", {
+            id: `vue-ui-scatter-xAxis-label-${B.value}`,
             transform: `translate(${e.value.style.layout.dataLabels.xAxis.fontSize}, ${c.value.top + c.value.height / 2}), rotate(-90)`,
             "text-anchor": "middle",
             "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
             "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
             fill: e.value.style.layout.dataLabels.xAxis.color
-          }, X(e.value.style.layout.dataLabels.xAxis.name), 9, Kl),
-          k("text", {
+          }, Y(e.value.style.layout.dataLabels.xAxis.name), 9, ta),
+          b("text", {
             "text-anchor": "middle",
             "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
             fill: e.value.style.layout.dataLabels.xAxis.color,
             transform: `translate(${e.value.style.layout.dataLabels.xAxis.name ? e.value.style.layout.dataLabels.xAxis.fontSize * 3 : 0}, ${A.value.y + e.value.style.layout.dataLabels.xAxis.fontSize / 3}), rotate(-90)`
-          }, X(n(se)(
+          }, Y(n(se)(
             e.value.style.layout.plots.selectors.labels.x.formatter,
-            n(Y)(M.value.xMin),
+            n(D)($.value.xMin),
             n(H)({
               p: e.value.style.layout.plots.selectors.labels.prefix,
-              v: n(Y)(M.value.xMin),
+              v: n(D)($.value.xMin),
               s: e.value.style.layout.plots.selectors.labels.suffix,
               r: e.value.style.layout.dataLabels.xAxis.rounding
             })
-          )), 9, Ql)
+          )), 9, la)
         ], 512)) : g("", !0),
         e.value.style.layout.dataLabels.xAxis.show ? (u(), i("text", {
           key: 6,
           ref_key: "xAxisLabelRight",
-          ref: Bt,
+          ref: Pt,
           "text-anchor": "middle",
           transform: `translate(${c.value.right + e.value.style.layout.padding.right + 6}, ${A.value.y + e.value.style.layout.dataLabels.xAxis.fontSize / 3}), rotate(-90)`,
           "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
           fill: e.value.style.layout.dataLabels.xAxis.color
-        }, X(n(se)(
+        }, Y(n(se)(
           e.value.style.layout.plots.selectors.labels.x.formatter,
-          n(Y)(M.value.xMax),
+          n(D)($.value.xMax),
           n(H)({
             p: e.value.style.layout.plots.selectors.labels.prefix,
-            v: n(Y)(M.value.xMax),
+            v: n(D)($.value.xMax),
             s: e.value.style.layout.plots.selectors.labels.suffix,
             r: e.value.style.layout.dataLabels.xAxis.rounding
           })
-        )), 9, ea)) : g("", !0),
+        )), 9, aa)) : g("", !0),
         e.value.style.layout.dataLabels.yAxis.show ? (u(), i("text", {
           key: 7,
           ref_key: "yAxisLabelTop",
-          ref: Pt,
+          ref: Ot,
           x: A.value.x,
           y: c.value.top - e.value.style.layout.dataLabels.yAxis.fontSize,
           "text-anchor": "middle",
           "font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
           fill: e.value.style.layout.dataLabels.yAxis.color
-        }, X(n(se)(
+        }, Y(n(se)(
           e.value.style.layout.plots.selectors.labels.y.formatter,
-          n(Y)(M.value.yMax),
+          n(D)($.value.yMax),
           n(H)({
             p: e.value.style.layout.plots.selectors.labels.prefix,
-            v: n(Y)(M.value.yMax),
+            v: n(D)($.value.yMax),
             s: e.value.style.layout.plots.selectors.labels.suffix,
             r: e.value.style.layout.dataLabels.yAxis.rounding
           })
-        )), 9, ta)) : g("", !0),
+        )), 9, oa)) : g("", !0),
         e.value.style.layout.dataLabels.yAxis.show ? (u(), i("g", {
           key: 8,
           ref_key: "yAxisLabelBottom",
           ref: Ae
         }, [
-          k("text", {
+          b("text", {
             x: A.value.x,
             y: z.value.height - e.value.style.layout.dataLabels.yAxis.fontSize * 2,
             "text-anchor": "middle",
             "font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
             fill: e.value.style.layout.dataLabels.yAxis.color
-          }, X(n(se)(
+          }, Y(n(se)(
             e.value.style.layout.plots.selectors.labels.y.formatter,
-            n(Y)(M.value.yMin),
+            n(D)($.value.yMin),
             n(H)({
               p: e.value.style.layout.plots.selectors.labels.prefix,
-              v: n(Y)(M.value.yMin),
+              v: n(D)($.value.yMin),
               s: e.value.style.layout.plots.selectors.labels.suffix,
               r: e.value.style.layout.dataLabels.yAxis.rounding
             })
-          )), 9, la),
-          k("text", {
+          )), 9, sa),
+          b("text", {
             "text-anchor": "middle",
             "font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
             "font-weight": e.value.style.layout.dataLabels.yAxis.bold ? "bold" : "normal",
             fill: e.value.style.layout.dataLabels.yAxis.color,
             x: c.value.left + c.value.width / 2,
             y: z.value.height
-          }, X(e.value.style.layout.dataLabels.yAxis.name), 9, aa)
+          }, Y(e.value.style.layout.dataLabels.yAxis.name), 9, ua)
         ], 512)) : g("", !0),
-        k("clipPath", {
-          id: `clip_path_${D.value}`
+        b("clipPath", {
+          id: `clip_path_${B.value}`
         }, [
-          k("rect", {
+          b("rect", {
             x: c.value.left,
             y: c.value.top,
             width: c.value.width <= 0 ? 1e-4 : c.value.width,
             height: c.value.height <= 0 ? 1e-4 : c.value.height
-          }, null, 8, sa)
-        ], 8, oa),
-        e.value.style.layout.correlation.show ? (u(), i("g", ua, [
-          (u(!0), i(q, null, K(j.value, (t, a) => (u(), i("line", {
+          }, null, 8, ia)
+        ], 8, na),
+        e.value.style.layout.correlation.show ? (u(), i("g", ra, [
+          (u(!0), i(q, null, Q(j.value, (t, a) => (u(), i("line", {
             x1: t.correlation.x1,
             x2: t.correlation.x2,
             y1: t.correlation.y1,
@@ -1037,9 +1040,9 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             "stroke-dasharray": e.value.style.layout.correlation.strokeDasharray,
             stroke: t.color,
             "stroke-width": e.value.style.layout.correlation.strokeWidth,
-            "clip-path": `url(#clip_path_${D.value})`
-          }, null, 8, na))), 256)),
-          (u(!0), i(q, null, K(j.value, (t, a) => (u(), i("g", null, [
+            "clip-path": `url(#clip_path_${B.value})`
+          }, null, 8, va))), 256)),
+          (u(!0), i(q, null, Q(j.value, (t, a) => (u(), i("g", null, [
             e.value.style.layout.correlation.label.show ? (u(), i("text", {
               key: 0,
               x: t.correlation.x2,
@@ -1048,48 +1051,56 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
               "text-anchor": "end",
               "font-size": e.value.style.layout.correlation.label.fontSize,
               "font-weight": e.value.style.layout.correlation.label.bold ? "bold" : "normal"
-            }, X(n(H)({
-              v: n(Y)(t.correlation.coefficient),
+            }, Y(n(H)({
+              v: n(D)(t.correlation.coefficient),
               r: e.value.style.layout.correlation.label.roundingValue
-            })), 9, ia)) : g("", !0)
+            })), 9, ya)) : g("", !0)
           ]))), 256))
         ])) : g("", !0),
-        N(l.$slots, "svg", { svg: z.value }, void 0, !0)
-      ], 14, bl)),
-      l.$slots.watermark ? (u(), i("div", ra, [
-        N(l.$slots, "watermark", he(fe({ isPrinting: n(tt) || n(lt) })), void 0, !0)
+        E(l.$slots, "svg", { svg: z.value }, void 0, !0)
+      ], 14, _l)),
+      l.$slots.watermark ? (u(), i("div", ca, [
+        E(l.$slots, "watermark", he(fe({ isPrinting: n(lt) || n(at) })), void 0, !0)
       ])) : g("", !0),
-      k("div", {
-        ref_key: "chartLegend",
-        ref: je
+      b("div", {
+        id: `legend-bottom-${B.value}`
+      }, null, 8, da),
+      Ze.value ? (u(), K(Ut, {
+        key: 5,
+        to: e.value.style.legend.position === "top" ? `#legend-top-${B.value}` : `#legend-bottom-${B.value}`
       }, [
-        e.value.style.legend.show ? (u(), oe(fl, {
-          key: `legend_${He.value}`,
-          legendSet: ue.value,
-          config: Ft.value,
-          onClickMarker: s[0] || (s[0] = ({ legend: t }) => yt(t.id))
-        }, {
-          item: O(({ legend: t }) => [
-            k("div", {
-              onClick: (a) => t.segregate(),
-              style: ae(`opacity:${L.value.includes(t.id) ? 0.5 : 1}`)
-            }, X(t.name), 13, va)
-          ]),
-          _: 1
-        }, 8, ["legendSet", "config"])) : N(l.$slots, "legend", {
-          key: 1,
-          legend: ue.value
-        }, void 0, !0)
-      ], 512),
+        b("div", {
+          ref_key: "chartLegend",
+          ref: je
+        }, [
+          e.value.style.legend.show ? (u(), K(gl, {
+            key: `legend_${He.value}`,
+            legendSet: ue.value,
+            config: It.value,
+            onClickMarker: s[0] || (s[0] = ({ legend: t }) => ct(t.id))
+          }, {
+            item: N(({ legend: t }) => [
+              b("div", {
+                onClick: (a) => t.segregate(),
+                style: oe(`opacity:${L.value.includes(t.id) ? 0.5 : 1}`)
+              }, Y(t.name), 13, ha)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : E(l.$slots, "legend", {
+            key: 1,
+            legend: ue.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : g("", !0),
       l.$slots.source ? (u(), i("div", {
-        key: 5,
+        key: 6,
         ref_key: "source",
         ref: Ve,
         dir: "auto"
       }, [
-        N(l.$slots, "source", {}, void 0, !0)
+        E(l.$slots, "source", {}, void 0, !0)
       ], 512)) : g("", !0),
-      Fe(n(St), {
+      Fe(n(Lt), {
         show: R.value.showTooltip && _e.value,
         backgroundColor: e.value.style.tooltip.backgroundColor,
         color: e.value.style.tooltip.color,
@@ -1100,23 +1111,23 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
         backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
         position: e.value.style.tooltip.position,
         offsetY: e.value.style.tooltip.offsetY,
-        parent: Q.value,
-        content: Me.value,
+        parent: ee.value,
+        content: $e.value,
         isFullscreen: ve.value,
         isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function",
         smooth: e.value.style.tooltip.smooth,
         backdropFilter: e.value.style.tooltip.backdropFilter
       }, {
-        "tooltip-before": O(() => [
-          N(l.$slots, "tooltip-before", he(fe({ ...Be.value })), void 0, !0)
+        "tooltip-before": N(() => [
+          E(l.$slots, "tooltip-before", he(fe({ ...Be.value })), void 0, !0)
         ]),
-        "tooltip-after": O(() => [
-          N(l.$slots, "tooltip-after", he(fe({ ...Be.value })), void 0, !0)
+        "tooltip-after": N(() => [
+          E(l.$slots, "tooltip-after", he(fe({ ...Be.value })), void 0, !0)
         ]),
-        default: O(() => [
-          e.value.style.tooltip.showShape ? (u(), i("div", ya, [
-            (u(), i("svg", ca, [
-              Fe(kt, {
+        default: N(() => [
+          e.value.style.tooltip.showShape ? (u(), i("div", fa, [
+            (u(), i("svg", pa, [
+              Fe(wt, {
                 shape: f.value.shape,
                 color: f.value.color,
                 plot: { x: 10, y: 10 },
@@ -1127,8 +1138,8 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
-      Ye.value ? (u(), oe(n(Mt), {
-        key: 6,
+      Ye.value ? (u(), K(n(Mt), {
+        key: 7,
         hideDetails: "",
         config: {
           open: R.value.showTable,
@@ -1143,8 +1154,8 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
           }
         }
       }, {
-        content: O(() => [
-          (u(), oe(n($t), {
+        content: N(() => [
+          (u(), K(n(At), {
             key: `table_${qe.value}`,
             colNames: be.value.colNames,
             head: be.value.head,
@@ -1153,26 +1164,26 @@ const xl = ["id"], bl = ["xmlns", "viewBox"], kl = ["width", "height"], wl = { k
             title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? ` : ${e.value.style.title.subtitle.text}` : ""}`,
             onClose: s[1] || (s[1] = (t) => R.value.showTable = !1)
           }, {
-            th: O(({ th: t }) => [
-              Vt(X(t), 1)
+            th: N(({ th: t }) => [
+              Gt(Y(t), 1)
             ]),
-            td: O(({ td: t }) => [
-              t.shape ? (u(), i("div", da, [
-                k("span", null, X(t.content), 1)
+            td: N(({ td: t }) => [
+              t.shape ? (u(), i("div", ga, [
+                b("span", null, Y(t.content), 1)
               ])) : (u(), i("div", {
                 key: 1,
                 innerHTML: t
-              }, null, 8, ha))
+              }, null, 8, ma))
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : g("", !0),
-      n(Ze) ? (u(), oe(yl, { key: 7 })) : g("", !0)
-    ], 46, xl));
+      n(Je) ? (u(), K(dl, { key: 8 })) : g("", !0)
+    ], 46, kl));
   }
-}, La = /* @__PURE__ */ ml(fa, [["__scopeId", "data-v-1fb1905d"]]);
+}, Pa = /* @__PURE__ */ bl(xa, [["__scopeId", "data-v-5baae5ec"]]);
 export {
-  La as default
+  Pa as default
 };