vue-data-ui 3.0.0-next.4 → 3.0.0-next.41

package/dist/{vue-ui-scatter-DS6-kGZL.js → vue-ui-scatter-CmFDRXa2.js}

@@ -1,22 +1,22 @@
-import { defineAsyncComponent as Z, computed as b, ref as h, watch as ht, shallowRef as Ge, onMounted as pt, onBeforeUnmount as ft, createElementBlock as r, openBlock as s, unref as u, normalizeStyle as j, normalizeClass as qe, createBlock as E, createCommentVNode as c, createElementVNode as d, createVNode as ge, createSlots as gt, withCtx as _, renderSlot as M, normalizeProps as te, guardReactiveProps as le, Fragment as W, renderList as Y, toDisplayString as C, createTextVNode as mt, nextTick as xt } from "vue";
-import { u as bt, c as kt, t as wt, p as J, a as _t, o as Mt, e as me, b as $t, g as He, Y as Ct, a4 as At, V as St, X as zt, s as xe, Z as Tt, i as U, v as A, f as F, q as Lt, r as Bt, x as Ot, y as Nt } from "./index-BnnNoGGd.js";
-import { t as Pt, u as Wt } from "./useResponsive-DfdjqQps.js";
-import { u as Ze } from "./useNestedProp-B6Dz15k2.js";
-import { u as Ft } from "./usePrinter-Dd-RkmL8.js";
+import { defineAsyncComponent as Z, computed as x, ref as h, watch as ht, shallowRef as Ge, onMounted as pt, onBeforeUnmount as ft, createElementBlock as r, openBlock as s, unref as u, normalizeStyle as j, normalizeClass as qe, createBlock as E, createCommentVNode as c, createElementVNode as d, createVNode as ge, createSlots as gt, withCtx as _, renderSlot as M, normalizeProps as te, guardReactiveProps as le, Fragment as F, renderList as Y, toDisplayString as C, createTextVNode as mt, nextTick as bt } from "vue";
+import { u as xt, c as kt, t as wt, p as J, a as _t, o as Mt, e as me, b as $t, g as He, Y as Ct, a4 as At, V as zt, X as St, s as be, Z as Tt, i as U, w as A, f as W, q as Lt, r as Bt, y as Ot, z as Nt } from "./index-D-ozSgn5.js";
+import { t as Pt, u as Ft } from "./useResponsive-DfdjqQps.js";
+import { u as Ze } from "./useNestedProp-xgFDyd-D.js";
+import { u as Wt } from "./usePrinter-CyhyubAW.js";
 import { u as It } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as Xt } from "./useChartAccessibility-9icAAmYg.js";
-import Yt from "./Legend-Bow74t3d.js";
-import Dt from "./Title-FiH2Kirc.js";
-import { _ as Je } from "./Shape-BsptIVCm.js";
-import Rt from "./img-CP2uNkKq.js";
+import Yt from "./Legend-BY-3lPeC.js";
+import Dt from "./Title-C2MeWc6b.js";
+import { _ as Je } from "./Shape-ClINMlel.js";
+import Rt from "./img-1ZBpWF3A.js";
 import { _ as Vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { key: 1 }, qt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ht = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Zt = { key: 2 }, Jt = ["points", "fill", "stroke-width", "stroke-dasharray", "stroke"], Kt = { key: 0 }, Qt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onMouseover"], el = { key: 1 }, tl = { key: 3 }, ll = ["id"], al = ["stop-color"], ol = ["stop-color"], sl = ["id"], ul = ["stop-color"], il = ["stop-color"], rl = ["x", "y", "width", "height", "fill", "stroke", "stroke-width", "rx"], nl = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], vl = { key: 0 }, yl = ["d", "stroke", "stroke-width"], cl = ["d", "stroke", "stroke-width"], dl = ["d", "stroke", "stroke-width"], hl = ["d", "stroke", "stroke-width"], pl = {
   key: 4,
   style: { "pointer-events": "none !important" }
-}, fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], gl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ml = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], xl = ["x", "y", "font-size", "fill", "font-weight"], bl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], kl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], wl = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], _l = { key: 5 }, Ml = ["x", "y", "font-size", "fill"], $l = ["x", "y", "font-size", "fill"], Cl = ["id", "transform", "font-size", "font-weight", "fill"], Al = { key: 6 }, Sl = ["x", "y", "font-size", "fill"], zl = ["x", "y", "font-size", "fill"], Tl = ["font-size", "font-weight", "fill", "x", "y"], Ll = ["id"], Bl = ["x", "y", "width", "height"], Ol = { key: 7 }, Nl = ["x1", "x2", "y1", "y2", "stroke-dasharray", "stroke", "stroke-width", "clip-path"], Pl = ["x", "y", "fill", "font-size", "font-weight"], Wl = {
+}, fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], gl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ml = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], bl = ["x", "y", "font-size", "fill", "font-weight"], xl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], kl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], wl = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], _l = { key: 5 }, Ml = ["x", "y", "font-size", "fill"], $l = ["x", "y", "font-size", "fill"], Cl = ["id", "transform", "font-size", "font-weight", "fill"], Al = { key: 6 }, zl = ["x", "y", "font-size", "fill"], Sl = ["x", "y", "font-size", "fill"], Tl = ["font-size", "font-weight", "fill", "x", "y"], Ll = ["id"], Bl = ["x", "y", "width", "height"], Ol = { key: 7 }, Nl = ["x1", "x2", "y1", "y2", "stroke-dasharray", "stroke", "stroke-width", "clip-path"], Pl = ["x", "y", "fill", "font-size", "font-weight"], Fl = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Fl = ["onClick"], Il = {
+}, Wl = ["onClick"], Il = {
   key: 0,
   style: { width: "100%", display: "flex", "align-items": "center", "justify-content": "center" }
 }, Xl = {
@@ -41,10 +41,10 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
     }
   },
   setup(Ke, { expose: Qe }) {
-    const et = Z(() => import("./vue-ui-accordion-qNR0BQCP.js")), tt = Z(() => import("./DataTable-kd4xY9pT.js")), lt = Z(() => import("./PackageVersion-3ZfzB951.js")), at = Z(() => import("./PenAndPaper-BZddJqUG.js")), ot = Z(() => import("./vue-ui-skeleton-gHkpLBcj.js")), st = Z(() => import("./Tooltip-BLtR7DBZ.js")), ut = Z(() => import("./UserOptions-DOwmMJId.js")), { vue_ui_scatter: it } = bt(), I = Ke, ae = b(() => !!I.dataset && I.dataset.length), S = h(kt()), rt = h(null), re = h(!1), ne = h(""), be = h(0), D = h(null), ke = h(null), we = h(null), _e = h(null), Me = h(null), $e = h(0), Ce = h(0), Ae = h(0), x = h([]), e = b({
+    const et = Z(() => import("./vue-ui-accordion-CzcfvDc6.js")), tt = Z(() => import("./DataTable-CyFoVhAB.js")), lt = Z(() => import("./PackageVersion-QefvdSlr.js")), at = Z(() => import("./PenAndPaper-CeTnED7E.js")), ot = Z(() => import("./vue-ui-skeleton-CIU55VVP.js")), st = Z(() => import("./Tooltip-CyC0lofV.js")), ut = Z(() => import("./UserOptions-Q4MLYmK1.js")), { vue_ui_scatter: it } = xt(), I = Ke, ae = x(() => !!I.dataset && I.dataset.length), z = h(kt()), rt = h(null), re = h(!1), ne = h(""), xe = h(0), D = h(null), ke = h(null), we = h(null), _e = h(null), Me = h(null), $e = h(0), Ce = h(0), Ae = h(0), b = h([]), e = x({
       get: () => Le(),
       set: (t) => t
-    }), { userOptionsVisible: ve, setUserOptionsVisibility: Se, keepUserOptionState: ze } = It({ config: e.value }), { svgRef: Te } = Xt({ config: e.value.style.title });
+    }), { userOptionsVisible: ve, setUserOptionsVisibility: ze, keepUserOptionState: Se } = It({ config: e.value }), { svgRef: Te } = Xt({ config: e.value.style.title });
     function Le() {
       const t = Ze({
         userConfig: I.config,
@@ -71,7 +71,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
         type: "dataset"
       }), e.value.responsive) {
         const t = Pt(() => {
-          const { width: i, height: l } = Wt({
+          const { width: i, height: l } = Ft({
             chart: D.value,
             title: e.value.style.title.text ? ke.value : null,
             legend: e.value.style.legend.show ? we.value : null,
@@ -88,24 +88,24 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
     ft(() => {
       R.value && (K.value && R.value.unobserve(K.value), R.value.disconnect());
     });
-    const { isPrinting: Oe, isImaging: Ne, generatePdf: Pe, generateImage: We } = Ft({
-      elementId: `vue-ui-scatter_${S.value}`,
+    const { isPrinting: Oe, isImaging: Ne, generatePdf: Pe, generateImage: Fe } = Wt({
+      elementId: `vue-ui-scatter_${z.value}`,
       fileName: e.value.style.title.text || "vue-ui-scatter",
       options: e.value.userOptions.print
-    }), nt = b(() => e.value.userOptions.show && !e.value.style.title.text), Fe = b(() => $t(e.value.customPalette)), O = h({
+    }), nt = x(() => e.value.userOptions.show && !e.value.style.title.text), We = x(() => $t(e.value.customPalette)), O = h({
       showTable: e.value.table.show,
       showTooltip: e.value.style.tooltip.show
     }), k = h({
       height: e.value.style.layout.height,
       width: e.value.style.layout.width
-    }), oe = b(() => e.value.style.layout.marginalBars.show ? e.value.style.layout.marginalBars.size + e.value.style.layout.marginalBars.offset : 0), n = b(() => ({
+    }), oe = x(() => e.value.style.layout.marginalBars.show ? e.value.style.layout.marginalBars.size + e.value.style.layout.marginalBars.offset : 0), n = x(() => ({
       top: e.value.style.layout.padding.top + oe.value,
       right: k.value.width - e.value.style.layout.padding.right - oe.value,
       bottom: k.value.height - e.value.style.layout.padding.bottom,
       left: e.value.style.layout.padding.left,
       height: k.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - oe.value,
       width: k.value.width - e.value.style.layout.padding.left - e.value.style.layout.padding.right - oe.value
-    })), p = b(() => {
+    })), p = x(() => {
       I.dataset.forEach((a, v) => {
         He({
           datasetObject: a,
@@ -131,13 +131,13 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           });
         });
       });
-      const t = Math.min(...G.value.filter((a) => !x.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.x))), i = Math.max(...G.value.filter((a) => !x.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.x))), l = Math.min(...G.value.filter((a) => !x.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.y))), o = Math.max(...G.value.filter((a) => !x.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.y)));
+      const t = Math.min(...G.value.filter((a) => !b.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.x))), i = Math.max(...G.value.filter((a) => !b.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.x))), l = Math.min(...G.value.filter((a) => !b.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.y))), o = Math.max(...G.value.filter((a) => !b.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.y)));
       return { xMin: t >= 0 ? 0 : t, xMax: i, yMin: l >= 0 ? 0 : l, yMax: o };
-    }), g = b(() => ({
+    }), g = x(() => ({
       x: n.value.left + Math.abs(p.value.xMin) / (p.value.xMax + Math.abs(p.value.xMin)) * n.value.width,
       y: n.value.bottom - Math.abs(p.value.yMin) / (p.value.yMax + Math.abs(p.value.yMin)) * n.value.height
-    })), G = b(() => I.dataset.map((t, i) => {
-      const l = `cluster_${S.value}_${i}`;
+    })), G = x(() => I.dataset.map((t, i) => {
+      const l = `cluster_${z.value}_${i}`;
       return {
         ...t,
         values: Ct({
@@ -145,20 +145,20 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           threshold: e.value.downsample.threshold
         }),
         id: l,
-        color: t.color ? t.color : Fe.value[i] || J[i] || J[i % J.length],
-        opacity: x.value.includes(l) ? 0.5 : 1,
+        color: t.color ? t.color : We.value[i] || J[i] || J[i % J.length],
+        opacity: b.value.includes(l) ? 0.5 : 1,
         shape: t.shape ?? "circle",
         segregate: () => Re(l),
-        isSegregated: x.value.includes(l)
+        isSegregated: b.value.includes(l)
       };
-    })), vt = b(() => ({
+    })), vt = x(() => ({
       cy: "scatter-div-legend",
       backgroundColor: e.value.style.legend.backgroundColor,
       color: e.value.style.legend.color,
       fontSize: e.value.style.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.legend.bold ? "bold" : ""
-    })), ye = b(() => G.value.map((t, i) => ({
+    })), ye = x(() => G.value.map((t, i) => ({
       ...t,
       plots: t.values.map((l) => ({
         x: n.value.left + (l.x + Math.abs(p.value.xMin)) / (p.value.xMax + Math.abs(p.value.xMin)) * n.value.width,
@@ -168,11 +168,11 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           name: l.name || ""
         },
         clusterName: t.name,
-        color: t.color ? t.color : Fe.value[i] || J[i] || J[i % J.length],
-        id: `plot_${S.value}_${Math.random()}`,
+        color: t.color ? t.color : We.value[i] || J[i] || J[i % J.length],
+        id: `plot_${z.value}_${Math.random()}`,
         weight: l.weight ?? e.value.style.layout.plots.radius
       }))
-    })).filter((t) => !x.value.includes(t.id))), z = b(() => ye.value.map((t) => {
+    })).filter((t) => !b.value.includes(t.id))), S = x(() => ye.value.map((t) => {
       const i = t.plots.reduce((m, q) => m + q.x, 0) / t.plots.length, l = t.plots.reduce((m, q) => m + q.y, 0) / t.plots.length;
       let o = 0, a = 0, v = 0;
       for (const m of t.plots)
@@ -201,9 +201,9 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           };
         })
       };
-    })), Ie = b(() => Math.max(...z.value.flatMap((t) => t.plots.map((i) => Math.abs(i.deviation)))));
+    })), Ie = x(() => Math.max(...S.value.flatMap((t) => t.plots.map((i) => Math.abs(i.deviation)))));
     function yt() {
-      return z.value;
+      return S.value;
     }
     function Xe(t, i) {
       const l = Array.isArray(t) ? t.flatMap((w) => w.plots.map((H) => ({
@@ -228,13 +228,13 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
       const q = Math.max(...B), he = Math.max(...X);
       return { x: B, y: X, avgX: ie, avgY: m, maxX: q, maxY: he };
     }
-    const V = b(() => e.value.style.layout.marginalBars.tranches), T = b(() => Xe(ye.value, V.value)), ct = b(() => {
+    const V = x(() => e.value.style.layout.marginalBars.tranches), T = x(() => Xe(ye.value, V.value)), ct = x(() => {
       const t = n.value.top - e.value.style.layout.marginalBars.offset, i = n.value.right + e.value.style.layout.marginalBars.offset;
       return ye.value.map((l) => {
         const o = Xe(l, V.value);
         return {
           coords: o,
-          dX: St(o.avgX.map((a, v) => ({
+          dX: zt(o.avgX.map((a, v) => ({
             x: a,
             y: t - o.x[v] / o.maxX * e.value.style.layout.marginalBars.size
           }))),
@@ -253,24 +253,24 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
       ce.value = {
         datapoint: t,
         seriesIndex: i,
-        series: z.value,
+        series: S.value,
         config: e.value
       };
       const o = e.value.style.tooltip.customFormat;
       Ot(o) && Nt(() => o({
         datapoint: t,
         seriesIndex: i,
-        series: z.value,
+        series: S.value,
         config: e.value
       })) ? ne.value = o({
         datapoint: t,
         seriesIndex: i,
-        series: z.value,
+        series: S.value,
         config: e.value
       }) : (t.clusterName && (l += `<div style="display:flex;gap:3px;align-items:center">${t.clusterName}</div>`), t.v.name && (l += `<div>${t.v.name}</div>`), l += `<div style="text-align:left;margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, l += `<div>${e.value.style.layout.dataLabels.xAxis.name}: <b>${isNaN(t.v.x) ? "-" : U(
         e.value.style.layout.plots.selectors.labels.x.formatter,
         t.v.x,
-        F({
+        W({
           p: e.value.style.tooltip.prefix,
           v: t.v.x,
           s: e.value.style.tooltip.suffix,
@@ -280,14 +280,14 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
       )}</b></div>`, l += `<div>${e.value.style.layout.dataLabels.yAxis.name}: <b>${isNaN(t.v.y) ? "-" : U(
         e.value.style.layout.plots.selectors.labels.y.formatter,
         t.v.y,
-        F({
+        W({
           p: e.value.style.tooltip.prefix,
           v: t.v.y,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         }),
         { datapoint: t, seriesIndex: i }
-      )}</b></div>`, l += `${e.value.style.layout.plots.deviation.translation}: <b>${F({
+      )}</b></div>`, l += `${e.value.style.layout.plots.deviation.translation}: <b>${W({
         v: t.deviation,
         r: e.value.style.layout.plots.deviation.roundingValue
       })}</b>`, l += "</div>", ne.value = `<div>${l}</div>`), re.value = !0;
@@ -296,11 +296,11 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
       re.value = !1, N.value = void 0, y.value = null;
     }
     function Re(t) {
-      x.value.includes(t) ? x.value = x.value.filter((i) => i !== t) : x.value.length < I.dataset.length - 1 && x.value.push(t);
+      b.value.includes(t) ? b.value = b.value.filter((i) => i !== t) : b.value.length < I.dataset.length - 1 && b.value.push(t);
     }
     function Ve(t = null) {
-      xt(() => {
-        const i = ["", 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}`], l = z.value.map((v) => [
+      bt(() => {
+        const i = ["", 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}`], l = S.value.map((v) => [
           v.name,
           v.correlation.coefficient,
           v.plots.length,
@@ -310,14 +310,14 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
         t ? t(a) : Bt({ csvContent: a, title: e.value.style.title.text || "vue-ui-heatmap" });
       });
     }
-    const se = b(() => {
+    const se = x(() => {
       const t = [
         e.value.table.translations.series,
         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}`
-      ], i = z.value.map((o) => [
+      ], i = S.value.map((o) => [
         {
           shape: o.shape,
           content: o.name,
@@ -343,7 +343,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
       return { head: t, body: i, config: l, colNames: t };
     }), Q = h(!1);
     function je(t) {
-      Q.value = t, be.value += 1;
+      Q.value = t, xe.value += 1;
     }
     function Ee() {
       O.value.showTable = !O.value.showTable;
@@ -372,7 +372,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
       getImage: dt,
       generatePdf: Pe,
       generateCsv: Ve,
-      generateImage: We,
+      generateImage: Fe,
       toggleTable: Ee,
       toggleTooltip: Ue,
       toggleAnnotator: de,
@@ -381,10 +381,10 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
       class: qe(`vue-ui-scatter ${Q.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "scatterChart",
       ref: D,
-      id: `vue-ui-scatter_${S.value}`,
+      id: `vue-ui-scatter_${z.value}`,
       style: j(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
-      onMouseenter: i[2] || (i[2] = () => u(Se)(!0)),
-      onMouseleave: i[3] || (i[3] = () => u(Se)(!1))
+      onMouseenter: i[2] || (i[2] = () => u(ze)(!0)),
+      onMouseleave: i[3] || (i[3] = () => u(ze)(!1))
     }, [
       e.value.userOptions.buttons.annotator ? (s(), E(u(at), {
         key: 0,
@@ -421,15 +421,15 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           }
         }, null, 8, ["config"]))
       ], 512)) : c("", !0),
-      e.value.userOptions.show && ae.value && (u(ze) || u(ve)) ? (s(), E(u(ut), {
+      e.value.userOptions.show && ae.value && (u(Se) || u(ve)) ? (s(), E(u(ut), {
         ref_key: "details",
         ref: rt,
-        key: `user_options_${be.value}`,
+        key: `user_options_${xe.value}`,
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
         isImaging: u(Ne),
         isPrinting: u(Oe),
-        uid: S.value,
+        uid: z.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -448,12 +448,12 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
         onToggleFullscreen: je,
         onGeneratePdf: u(Pe),
         onGenerateCsv: Ve,
-        onGenerateImage: u(We),
+        onGenerateImage: u(Fe),
         onToggleTable: Ee,
         onToggleTooltip: Ue,
         onToggleAnnotator: de,
         style: j({
-          visibility: u(ze) ? u(ve) ? "visible" : "hidden" : "visible"
+          visibility: u(Se) ? u(ve) ? "visible" : "hidden" : "visible"
         })
       }, gt({ _: 2 }, [
         t.$slots.menuIcon ? {
@@ -517,7 +517,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
         key: 4,
         ref_key: "svgRef",
         ref: Te,
-        xmlns: u(zt),
+        xmlns: u(St),
         class: qe({ "vue-data-ui-fullscreen--on": Q.value, "vue-data-ui-fulscreen--off": !Q.value }),
         viewBox: `0 0 ${k.value.width <= 0 ? 10 : k.value.width} ${k.value.height <= 0 ? 10 : k.value.height}`,
         style: j(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
@@ -556,11 +556,11 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           }, null, 8, Ht)
         ])) : c("", !0),
         e.value.style.layout.plots.giftWrap.show ? (s(), r("g", Zt, [
-          (s(!0), r(W, null, Y(z.value, (l, o) => (s(), r("g", null, [
+          (s(!0), r(F, null, Y(S.value, (l, o) => (s(), r("g", null, [
             l.plots.length > 2 ? (s(), r("polygon", {
               key: 0,
               points: u(Tt)({ series: l.plots }),
-              fill: u(xe)(l.color, e.value.style.layout.plots.giftWrap.fillOpacity * 100),
+              fill: u(be)(l.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: l.color,
@@ -569,13 +569,13 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
             }, null, 8, Jt)) : c("", !0)
           ]))), 256))
         ])) : c("", !0),
-        (s(!0), r(W, null, Y(z.value, (l, o) => (s(), r("g", null, [
+        (s(!0), r(F, null, Y(S.value, (l, o) => (s(), r("g", null, [
           !l.shape || l.shape === "circle" ? (s(), r("g", Kt, [
-            (s(!0), r(W, null, Y(l.plots, (a, v) => (s(), r("circle", {
+            (s(!0), r(F, null, Y(l.plots, (a, v) => (s(), r("circle", {
               cx: a.x,
               cy: a.y,
               r: N.value && N.value === a.id ? a.weight * 2 : a.weight,
-              fill: u(xe)(l.color, e.value.style.layout.plots.opacity * 100),
+              fill: u(be)(l.color, e.value.style.layout.plots.opacity * 100),
               stroke: e.value.style.layout.plots.stroke,
               "stroke-width": e.value.style.layout.plots.strokeWidth,
               onMouseover: (f) => Ye(a, o),
@@ -583,11 +583,11 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
               style: j(`opacity:${N.value && N.value === a.id ? 1 : e.value.style.layout.plots.significance.useDistanceOpacity ? 1 - Math.abs(a.deviation) / Ie.value : e.value.style.layout.plots.significance.show && Math.abs(a.deviation) > e.value.style.layout.plots.significance.deviationThreshold ? e.value.style.layout.plots.significance.opacity : 1}`)
             }, null, 44, Qt))), 256))
           ])) : (s(), r("g", el, [
-            (s(!0), r(W, null, Y(l.plots, (a, v) => (s(), E(Je, {
+            (s(!0), r(F, null, Y(l.plots, (a, v) => (s(), E(Je, {
               plot: { x: a.x, y: a.y },
               radius: N.value && N.value === a.id ? a.weight * 2 : a.weight,
               shape: l.shape,
-              color: u(xe)(l.color, e.value.style.layout.plots.opacity * 100),
+              color: u(be)(l.color, e.value.style.layout.plots.opacity * 100),
               stroke: e.value.style.layout.plots.stroke,
               strokeWidth: e.value.style.layout.plots.strokeWidth,
               onMouseover: (f) => Ye(a, o),
@@ -599,7 +599,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
         e.value.style.layout.marginalBars.show ? (s(), r("g", tl, [
           d("defs", null, [
             d("linearGradient", {
-              id: `marginal_x_${S.value}`,
+              id: `marginal_x_${z.value}`,
               x1: "0%",
               y1: "0%",
               x2: "0%",
@@ -615,7 +615,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
               }, null, 8, ol)
             ], 8, ll),
             d("linearGradient", {
-              id: `marginal_y_${S.value}`,
+              id: `marginal_y_${z.value}`,
               x1: "0%",
               x2: "100%",
               y1: "0%",
@@ -631,28 +631,28 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
               }, null, 8, il)
             ], 8, sl)
           ]),
-          (s(!0), r(W, null, Y(T.value.x, (l, o) => (s(), r("g", null, [
+          (s(!0), r(F, null, Y(T.value.x, (l, o) => (s(), r("g", null, [
             l && T.value.avgX[o] ? (s(), r("rect", {
               key: 0,
               x: T.value.avgX[o] - n.value.width / V.value / 2,
               y: n.value.top - e.value.style.layout.marginalBars.offset - l / T.value.maxX * e.value.style.layout.marginalBars.size,
               width: n.value.width / V.value <= 0 ? 1e-4 : n.value.width / V.value,
               height: l / T.value.maxX * e.value.style.layout.marginalBars.size <= 0 ? 1e-4 : l / T.value.maxX * e.value.style.layout.marginalBars.size,
-              fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_x_${S.value})` : e.value.style.layout.marginalBars.fill,
+              fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_x_${z.value})` : e.value.style.layout.marginalBars.fill,
               style: j(`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, rl)) : c("", !0)
           ]))), 256)),
-          (s(!0), r(W, null, Y(T.value.y, (l, o) => (s(), r("g", null, [
+          (s(!0), r(F, null, Y(T.value.y, (l, o) => (s(), r("g", null, [
             l && T.value.avgY[o] ? (s(), r("rect", {
               key: 0,
               x: n.value.right + e.value.style.layout.marginalBars.offset,
               y: T.value.avgY[o] - n.value.height / V.value / 2,
               height: n.value.height / V.value <= 0 ? 1e-4 : n.value.height / V.value,
               width: l / T.value.maxY * e.value.style.layout.marginalBars.size <= 0 ? 1e-4 : l / T.value.maxY * e.value.style.layout.marginalBars.size,
-              fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_y_${S.value})` : e.value.style.layout.marginalBars.fill,
+              fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_y_${z.value})` : e.value.style.layout.marginalBars.fill,
               style: j(`opacity:${e.value.style.layout.marginalBars.opacity}`),
               stroke: e.value.style.backgroundColor,
               "stroke-width": e.value.style.layout.marginalBars.strokeWidth,
@@ -660,8 +660,8 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
             }, null, 12, nl)) : c("", !0)
           ]))), 256)),
           e.value.style.layout.marginalBars.showLines ? (s(), r("g", vl, [
-            (s(!0), r(W, null, Y(ct.value, (l) => (s(), r(W, null, [
-              x.value.includes(l.id) ? c("", !0) : (s(), r("path", {
+            (s(!0), r(F, null, Y(ct.value, (l) => (s(), r(F, null, [
+              b.value.includes(l.id) ? c("", !0) : (s(), r("path", {
                 key: 0,
                 d: `M ${l.dX}`,
                 stroke: e.value.style.backgroundColor,
@@ -670,7 +670,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
                 "stroke-linejoin": "round",
                 fill: "none"
               }, null, 8, yl)),
-              x.value.includes(l.id) ? c("", !0) : (s(), r("path", {
+              b.value.includes(l.id) ? c("", !0) : (s(), r("path", {
                 key: 1,
                 d: `M ${l.dX}`,
                 stroke: l.color,
@@ -679,7 +679,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
                 "stroke-linejoin": "round",
                 fill: "none"
               }, null, 8, cl)),
-              x.value.includes(l.id) ? c("", !0) : (s(), r("path", {
+              b.value.includes(l.id) ? c("", !0) : (s(), r("path", {
                 key: 2,
                 d: `M ${l.dY}`,
                 stroke: e.value.style.backgroundColor,
@@ -688,7 +688,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
                 "stroke-linejoin": "round",
                 fill: "none"
               }, null, 8, dl)),
-              x.value.includes(l.id) ? c("", !0) : (s(), r("path", {
+              b.value.includes(l.id) ? c("", !0) : (s(), r("path", {
                 key: 3,
                 d: `M ${l.dY}`,
                 stroke: l.color,
@@ -733,7 +733,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           }, C(u(U)(
             e.value.style.layout.plots.selectors.labels.y.formatter,
             u(A)(y.value.v.y),
-            u(F)({
+            u(W)({
               p: e.value.style.layout.plots.selectors.labels.prefix,
               v: u(A)(y.value.v.y),
               s: e.value.style.layout.plots.selectors.labels.suffix,
@@ -751,14 +751,14 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           }, C(u(U)(
             e.value.style.layout.plots.selectors.labels.y.formatter,
             u(A)(y.value.v.x),
-            u(F)({
+            u(W)({
               p: e.value.style.layout.plots.selectors.labels.prefix,
               v: u(A)(y.value.v.x),
               s: e.value.style.layout.plots.selectors.labels.suffix,
               r: e.value.style.layout.plots.selectors.labels.rounding
             }),
             { datapoint: y.value }
-          )), 9, xl),
+          )), 9, bl),
           d("circle", {
             cx: g.value.x,
             cy: y.value.y,
@@ -767,7 +767,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { 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, bl),
+          }, null, 8, xl),
           d("circle", {
             cx: y.value.x,
             cy: g.value.y,
@@ -797,7 +797,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           }, C(u(U)(
             e.value.style.layout.plots.selectors.labels.x.formatter,
             u(A)(p.value.xMin),
-            u(F)({
+            u(W)({
               p: e.value.style.layout.plots.selectors.labels.prefix,
               v: u(A)(p.value.xMin),
               s: e.value.style.layout.plots.selectors.labels.suffix,
@@ -813,7 +813,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           }, C(u(U)(
             e.value.style.layout.plots.selectors.labels.x.formatter,
             u(A)(p.value.xMax),
-            u(F)({
+            u(W)({
               p: e.value.style.layout.plots.selectors.labels.prefix,
               v: u(A)(p.value.xMax),
               s: e.value.style.layout.plots.selectors.labels.suffix,
@@ -821,7 +821,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
             })
           )), 9, $l),
           d("text", {
-            id: `vue-ui-scatter-xAxis-label-${S.value}`,
+            id: `vue-ui-scatter-xAxis-label-${z.value}`,
             transform: `translate(${e.value.style.layout.dataLabels.xAxis.fontSize * 2}, ${n.value.top + n.value.height / 2}), rotate(-90)`,
             "text-anchor": "middle",
             "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
@@ -839,13 +839,13 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           }, C(u(U)(
             e.value.style.layout.plots.selectors.labels.y.formatter,
             u(A)(p.value.yMin),
-            u(F)({
+            u(W)({
               p: e.value.style.layout.plots.selectors.labels.prefix,
               v: u(A)(p.value.yMin),
               s: e.value.style.layout.plots.selectors.labels.suffix,
               r: e.value.style.layout.dataLabels.yAxis.rounding
             })
-          )), 9, Sl),
+          )), 9, zl),
           d("text", {
             x: g.value.x,
             y: n.value.top - e.value.style.layout.dataLabels.yAxis.fontSize / 2,
@@ -855,13 +855,13 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           }, C(u(U)(
             e.value.style.layout.plots.selectors.labels.y.formatter,
             u(A)(p.value.yMax),
-            u(F)({
+            u(W)({
               p: e.value.style.layout.plots.selectors.labels.prefix,
               v: u(A)(p.value.yMax),
               s: e.value.style.layout.plots.selectors.labels.suffix,
               r: e.value.style.layout.dataLabels.yAxis.rounding
             })
-          )), 9, zl),
+          )), 9, Sl),
           d("text", {
             "text-anchor": "middle",
             "font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
@@ -872,7 +872,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           }, C(e.value.style.layout.dataLabels.yAxis.name), 9, Tl)
         ])) : c("", !0),
         d("clipPath", {
-          id: `clip_path_${S.value}`
+          id: `clip_path_${z.value}`
         }, [
           d("rect", {
             x: n.value.left,
@@ -882,7 +882,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           }, null, 8, Bl)
         ], 8, Ll),
         e.value.style.layout.correlation.show ? (s(), r("g", Ol, [
-          (s(!0), r(W, null, Y(z.value, (l, o) => (s(), r("line", {
+          (s(!0), r(F, null, Y(S.value, (l, o) => (s(), r("line", {
             x1: l.correlation.x1,
             x2: l.correlation.x2,
             y1: l.correlation.y1,
@@ -890,9 +890,9 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
             "stroke-dasharray": e.value.style.layout.correlation.strokeDasharray,
             stroke: l.color,
             "stroke-width": e.value.style.layout.correlation.strokeWidth,
-            "clip-path": `url(#clip_path_${S.value})`
+            "clip-path": `url(#clip_path_${z.value})`
           }, null, 8, Nl))), 256)),
-          (s(!0), r(W, null, Y(z.value, (l, o) => (s(), r("g", null, [
+          (s(!0), r(F, null, Y(S.value, (l, o) => (s(), r("g", null, [
             e.value.style.layout.correlation.label.show ? (s(), r("text", {
               key: 0,
               x: l.label.x,
@@ -900,7 +900,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
               fill: e.value.style.layout.correlation.label.useSerieColor ? l.color : e.value.style.layout.correlation.label.color,
               "font-size": e.value.style.layout.correlation.label.fontSize,
               "font-weight": e.value.style.layout.correlation.label.bold ? "bold" : "normal"
-            }, C(u(F)({
+            }, C(u(W)({
               v: u(A)(l.correlation.coefficient),
               r: e.value.style.layout.correlation.label.roundingValue
             })), 9, Pl)) : c("", !0)
@@ -908,7 +908,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
         ])) : c("", !0),
         M(t.$slots, "svg", { svg: k.value }, void 0, !0)
       ], 14, Et)) : c("", !0),
-      t.$slots.watermark ? (s(), r("div", Wl, [
+      t.$slots.watermark ? (s(), r("div", Fl, [
         M(t.$slots, "watermark", te(le({ isPrinting: u(Oe) || u(Ne) })), void 0, !0)
       ])) : c("", !0),
       ae.value ? c("", !0) : (s(), E(u(ot), {
@@ -942,8 +942,8 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           item: _(({ legend: l }) => [
             d("div", {
               onClick: (o) => l.segregate(),
-              style: j(`opacity:${x.value.includes(l.id) ? 0.5 : 1}`)
-            }, C(l.name), 13, Fl)
+              style: j(`opacity:${b.value.includes(l.id) ? 0.5 : 1}`)
+            }, C(l.name), 13, Wl)
           ]),
           _: 1
         }, 8, ["legendSet", "config"])) : M(t.$slots, "legend", {
@@ -973,7 +973,9 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
         parent: D.value,
         content: ne.value,
         isFullscreen: Q.value,
-        isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function"
+        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": _(() => [
           M(t.$slots, "tooltip-before", te(le({ ...ce.value })), void 0, !0)
@@ -994,7 +996,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
           ])) : c("", !0)
         ]),
         _: 3
-      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
       ae.value ? (s(), E(u(et), {
         key: 8,
         hideDetails: "",
@@ -1039,7 +1041,7 @@ const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { k
       }, 8, ["config"])) : c("", !0)
     ], 46, jt));
   }
-}, ta = /* @__PURE__ */ Vt(Rl, [["__scopeId", "data-v-3b36f62b"]]);
+}, ta = /* @__PURE__ */ Vt(Rl, [["__scopeId", "data-v-bd20363e"]]);
 export {
   ta as default
 };