vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,620 lines • 78 kB
JavaScript
import { defineAsyncComponent as ue, computed as D, ref as $, toRefs as _l, watch as Fe, shallowRef as Dt, onMounted as Ml, onBeforeUnmount as Bl, createElementBlock as c, openBlock as i, unref as y, normalizeStyle as ie, normalizeClass as Ft, createBlock as se, createCommentVNode as b, createElementVNode as C, createVNode as we, withCtx as T, renderSlot as F, normalizeProps as K, guardReactiveProps as Q, createSlots as zt, Fragment as Z, renderList as le, toDisplayString as G, Teleport as Sl, resolveDynamicComponent as Ll, mergeProps as Tl, createTextVNode as Et, nextTick as Dl } from "vue";
import { c as Fl, t as zl, i as El, j as de, o as Pt, g as Ke, k as Pl, l as Ot, ai as Ol, m as Qe, ak as Nl, A as Wl, s as ze, X as Il, aj as Xl, a as ve, U as q, d as oe, v as Yl, r as Rl, y as jl, _ as Ul } from "./lib-2iaAPQ_c.js";
import { t as Vl, u as Gl } from "./useResponsive-DfdjqQps.js";
import { u as ql, a as et } from "./useNestedProp-2p4Tjzc8.js";
import { u as Hl, B as Zl } from "./BaseScanner-BMpwQAfz.js";
import { u as Jl } from "./usePrinter-ChVMpU2f.js";
import { u as Kl } from "./useSvgExport-ByUukOZt.js";
import { u as Ql } from "./useThemeCheck-DGJ31Vi5.js";
import { u as eo } from "./useUserOptionState-BIvW1Kz7.js";
import { u as to } from "./useChartAccessibility-9icAAmYg.js";
import lo from "./Legend-D2xmnFPH.js";
import oo from "./Title-DSOZzIrU.js";
import { _ as tt } from "./Shape-12_eh8zD.js";
import ao from "./img-CqYIrJ8I.js";
import { _ as so } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Nt = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { axis: { stroke: "#5A5A5A" }, marginalBars: { fill: "#5A5A5A" }, plots: { stroke: "#1A1A1A", selectors: { stroke: "#5A5A5A", labels: { color: "#CCCCCC" }, markers: { stroke: "#1A1A1A", fill: "#5A5A5A" } } }, correlation: { label: { color: "#CCCCCC" } }, dataLabels: { xAxis: { color: "#CCCCCC" }, yAxis: { color: "#CCCCCC" } } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Wt = { style: { backgroundColor: "#FFF8E1", color: "#424242", layout: { axis: { stroke: "#5D403790" }, marginalBars: { fill: "#5D4037" }, plots: { stroke: "#FFF8E1", selectors: { stroke: "#5D4037", labels: { color: "#424242" }, markers: { stroke: "#FFF8E1", fill: "#D32F2F" } } }, correlation: { label: { color: "#424242" } }, dataLabels: { xAxis: { color: "#424242" }, yAxis: { color: "#424242" } } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, It = { style: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { axis: { stroke: "#5D4037" }, marginalBars: { fill: "#D32F2F" }, plots: { stroke: "#1E1E1E", selectors: { stroke: "#BDBDBD", labels: { color: "#BDBDBD" }, markers: { stroke: "#BDBDBD", fill: "#D32F2F" } } }, correlation: { label: { color: "#BDBDBD" } }, dataLabels: { xAxis: { color: "#BDBDBD" }, yAxis: { color: "#BDBDBD" } } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Xt = { style: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { axis: { stroke: "#334C33" }, marginalBars: { fill: "#66CC66" }, plots: { stroke: "#1A1A1A", selectors: { stroke: "#66CC66", labels: { color: "#AACCAA" }, markers: { stroke: "#66CC66", fill: "#1A1A1A" } } }, correlation: { label: { color: "#AACCAA" } }, dataLabels: { xAxis: { color: "#AACCAA" }, yAxis: { color: "#AACCAA" } } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Yt = { style: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { axis: { stroke: "transparent" }, marginalBars: { fill: "#B0B9A8" }, plots: { stroke: "#fbfafa", selectors: { stroke: "#4F5B75", labels: { color: "#928A98" }, markers: { stroke: "#4F5B75", fill: "#fbfafa" } } }, correlation: { label: { color: "#928A98" } }, dataLabels: { xAxis: { color: "#928A98" }, yAxis: { color: "#928A98" } } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Rt = { style: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { axis: { stroke: "#92B0B5" }, marginalBars: { fill: "#ABB1BC" }, plots: { stroke: "#fbfafa", selectors: { stroke: "#4F5B75", labels: { color: "#404C4D" }, markers: { stroke: "#4F5B75", fill: "#f6f6fb" } } }, correlation: { label: { color: "#61747E" } }, dataLabels: { xAxis: { color: "#61747E" }, yAxis: { color: "#61747E" } } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, jt = {
default: {},
dark: Nt,
celebration: Wt,
celebrationNight: It,
hack: Xt,
zen: Yt,
concrete: Rt
}, Pa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Wt,
celebrationNight: It,
concrete: Rt,
dark: Nt,
default: jt,
hack: Xt,
zen: Yt
}, Symbol.toStringTag, { value: "Module" })), no = ["id"], ro = ["id"], uo = ["xmlns", "viewBox"], io = ["width", "height"], vo = { key: 1 }, co = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], yo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ho = { key: 2 }, fo = ["id"], go = ["stop-color"], po = ["stop-color"], mo = ["id"], bo = ["stop-color"], ko = ["stop-color"], xo = ["x", "y", "width", "height", "fill", "stroke", "stroke-width", "rx"], Co = ["x", "y", "width", "height", "onMouseenter"], Ao = {
key: 2,
style: { "pointer-events": "none" }
}, wo = ["x", "y", "width", "height", "fill", "fill-opacity"], $o = ["x1", "x2", "y2", "stroke", "stroke-dasharray", "stroke-width"], _o = ["x1", "x2", "y2", "stroke", "stroke-dasharray", "stroke-width"], Mo = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], Bo = ["x", "y", "width", "height", "onMouseenter"], So = {
key: 2,
style: { "pointer-events": "none" }
}, Lo = ["x", "y", "width", "height", "fill", "fill-opacity"], To = ["x1", "x2", "y1", "y2", "stroke", "stroke-dasharray", "stroke-width"], Do = ["x1", "x2", "y1", "y2", "stroke", "stroke-dasharray", "stroke-width"], Fo = {
key: 0,
style: { "pointer-events": "none" }
}, zo = ["d", "stroke", "stroke-width"], Eo = ["d", "stroke", "stroke-width"], Po = ["d", "stroke", "stroke-width"], Oo = ["d", "stroke", "stroke-width"], No = { key: 3 }, Wo = ["points", "fill", "stroke-width", "stroke-dasharray", "stroke"], Io = { key: 0 }, Xo = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onMouseover", "onMouseleave", "onClick"], Yo = { key: 1 }, Ro = ["clip-path"], jo = ["d", "fill", "stroke", "stroke-width", "stroke-opacity"], Uo = {
key: 0,
style: { "pointer-events": "none" }
}, Vo = ["x", "y", "width", "height"], Go = {
key: 6,
style: { "pointer-events": "none !important" }
}, qo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Ho = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Zo = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], Jo = ["x", "y", "font-size", "fill", "font-weight"], Ko = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Qo = ["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"], oa = ["transform", "font-size", "fill"], aa = ["x", "y", "font-size", "fill"], sa = ["x", "y", "font-size", "fill"], na = ["font-size", "font-weight", "fill", "x", "y"], ra = ["id"], ua = ["x", "y", "width", "height"], ia = {
key: 11,
style: { pointerEvents: "none" }
}, va = ["x1", "x2", "y1", "y2", "stroke-dasharray", "stroke", "stroke-width", "clip-path"], ca = ["x", "y", "fill", "font-size", "font-weight"], ya = {
key: 4,
class: "vue-data-ui-watermark"
}, da = ["id"], ha = ["onClick"], fa = {
key: 0,
style: { width: "100%", display: "flex", "align-items": "center", "justify-content": "center" }
}, ga = {
viewBox: "0 0 20 20",
height: "20",
width: "20",
style: { overflow: "hidden", background: "transparent" }
}, pa = { key: 0 }, ma = ["innerHTML"], ba = {
__name: "vue-ui-scatter",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(Ut, { expose: Vt }) {
const Gt = ue(() => import("./Tooltip-D0pGX8qz.js")), qt = ue(() => import("./BaseIcon-CbVDYv89.js")), Ht = ue(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), Zt = ue(() => import("./DataTable-BT_IeqPe.js")), Jt = ue(() => import("./PenAndPaper-CvyKWfNl.js")), Kt = ue(() => import("./UserOptions-BQO4YFrn.js")), Qt = ue(() => import("./PackageVersion-Br3DrrFh.js")), el = ue(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_scatter: tl } = ql(), { isThemeValid: ll, warnInvalidTheme: ol } = Ql(), ee = Ut, lt = D(() => !!ee.dataset && ee.dataset.length), X = $(Fl()), Ee = $(!1), Pe = $(""), ot = $(0), ae = $(null), at = $(null), st = $(null), nt = $(null), rt = $(null), ut = $(0), it = $(0), vt = $(0), W = $([]), ct = $(!1), pe = $(null), me = $(null), be = $(null), Oe = $(null), Ne = $(null), al = $(null), sl = $(null), We = $(null), e = $(Re());
function nl(l = 100, o = 0.8, t = {}) {
const { meanX: a = 0, sdX: s = 1, meanY: r = 0, sdY: u = 1, seed: f } = t;
let v = (f ?? Math.floor(Math.random() * 2 ** 31)) >>> 0;
const p = () => (v = v * 1664525 + 1013904223 >>> 0, v / 2 ** 32), S = () => {
let m = 0, N = 0;
for (; m === 0; ) m = p();
for (; N === 0; ) N = p();
return Math.sqrt(-2 * Math.log(m)) * Math.cos(2 * Math.PI * N);
}, d = l / 2, w = Array.from({ length: d }, S), O = Array.from({ length: d }, S), _ = (m) => m.reduce((N, Ae) => N + Ae, 0) / m.length, z = _(w), Y = _(O);
for (let m = 0; m < d; m += 1)
w[m] -= z, O[m] -= Y;
const L = (m, N) => m.reduce((Ae, De, Je) => Ae + De * N[Je], 0), A = (m) => L(m, m), h = L(O, w) / A(w), B = O.map((m, N) => m - h * w[N]), V = A(w) / d, J = A(B) / d, re = Math.sqrt((1 - o * o) * V / J), j = w.map((m, N) => o * m + re * B[N]), ye = w.concat(w.map((m) => -m)), Ze = j.concat(j.map((m) => -m)), xe = (m) => Math.sqrt(A(m) / m.length), fe = (m, N, Ae) => {
const De = xe(m);
return m.map((Je) => Ae + (De ? Je / De * N : 0));
}, ge = fe(ye, s, a), Ce = fe(Ze, u, r);
for (let m = ge.length - 1; m > 0; m -= 1) {
const N = Math.floor(p() * (m + 1));
[ge[m], ge[N]] = [ge[N], ge[m]], [Ce[m], Ce[N]] = [Ce[N], Ce[m]];
}
return ge.map((m, N) => ({ x: m, y: Ce[N] }));
}
const { loading: yt, FINAL_DATASET: Ie, manualLoading: Xe } = Hl({
..._l(ee),
FINAL_CONFIG: e,
prepareConfig: Re,
skeletonDataset: [
{
name: "",
color: "#999999",
values: nl(100, 0.5, { seed: 42 })
}
],
skeletonConfig: zl({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
useCssAnimation: !1,
style: {
backgroundColor: "#99999930",
layout: {
axis: {
stroke: "#6A6A6A"
},
correlation: {
label: { show: !1 }
},
dataLabels: {
xAxis: { show: !1 },
yAxis: { show: !1 }
},
marginalBars: {
fill: "#99999960"
},
padding: { top: 12, right: 12, bottom: 12, left: 12 },
plots: {
stroke: "#6A6A6A"
}
},
legend: {
backgroundColor: "transparent"
}
}
}
})
}), { userOptionsVisible: Ye, setUserOptionsVisibility: dt, keepUserOptionState: ht } = eo({ config: e.value }), { svgRef: $e } = to({ config: e.value.style.title });
function Re() {
const l = et({
userConfig: ee.config,
defaultConfig: tl
}), o = l.theme;
if (!o) return l;
if (!ll.value(l))
return ol(l), l;
const t = et({
userConfig: jt[o] || ee.config,
defaultConfig: l
}), a = et({
userConfig: ee.config,
defaultConfig: t
});
return {
...a,
customPalette: a.customPalette.length ? a.customPalette : El[o] || de
};
}
Fe(() => ee.config, (l) => {
yt.value || (e.value = Re()), Ye.value = !e.value.userOptions.showOnChartHover, gt(), ut.value += 1, it.value += 1, vt.value += 1, H.value.showTable = e.value.table.show, H.value.showTooltip = e.value.style.tooltip.show, ft.value && e.value.usePerformanceMode && console.warn(`VueUiScatter : You are using performance mode
- downsampling is disabled in this mode, all plots are rendered
- plot significance is not active in this mode (all plots have the same opacity)
- Depending on plot density, shapes might not display a border (stroke) to avoid fuzziness
ℹ️ To remove this warning, set config.debug to false.`);
}, { deep: !0 }), Fe(() => ee.dataset, (l) => {
Array.isArray(l) && l.length > 0 && (Xe.value = !1);
}, { deep: !0 });
const ne = Dt(null), he = Dt(null);
Ml(() => {
ct.value = !0, gt();
});
const ft = D(() => !!e.value.debug);
function gt() {
if (Pt(ee.dataset) && (Ke({
componentName: "VueUiScatter",
type: "dataset",
debug: ft.value
}), Xe.value = !0), Pt(ee.dataset) || (Xe.value = e.value.loading), e.value.responsive) {
const l = Vl(() => {
const { width: o, height: t } = Gl({
chart: ae.value,
title: e.value.style.title.text ? at.value : null,
legend: e.value.style.legend.show ? st.value : null,
source: nt.value,
noTitle: rt.value
});
requestAnimationFrame(() => {
I.value.width = o, I.value.height = t;
});
});
ne.value && (he.value && ne.value.unobserve(he.value), ne.value.disconnect()), ne.value = new ResizeObserver(l), he.value = ae.value.parentNode, ne.value.observe(he.value);
}
}
Bl(() => {
ne.value && (he.value && ne.value.unobserve(he.value), ne.value.disconnect());
});
const { isPrinting: pt, isImaging: mt, generatePdf: bt, generateImage: kt } = Jl({
elementId: `vue-ui-scatter_${X.value}`,
fileName: e.value.style.title.text || "vue-ui-scatter",
options: e.value.userOptions.print
}), rl = D(() => e.value.userOptions.show && !e.value.style.title.text), xt = D(() => Pl(e.value.customPalette)), H = $({
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
});
Fe(e, () => {
H.value = {
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
};
}, { immediate: !0 });
const I = $({
height: e.value.style.layout.height,
width: e.value.style.layout.width
}), _e = D(() => e.value.style.layout.marginalBars.show ? e.value.style.layout.marginalBars.size + e.value.style.layout.marginalBars.offset : 0), n = D(() => {
let l = 0, o = 0;
return Ne.value && (l = Ne.value.getBBox().width + 6), We.value && (o = We.value.getBBox().height + 6), {
top: e.value.style.layout.padding.top + _e.value + e.value.style.layout.dataLabels.yAxis.fontSize * 2,
right: I.value.width - e.value.style.layout.padding.right - _e.value - 6,
bottom: I.value.height - e.value.style.layout.padding.bottom - o,
left: e.value.style.layout.padding.left + l,
height: I.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - _e.value - o - e.value.style.layout.dataLabels.yAxis.fontSize * 2,
width: I.value.width - e.value.style.layout.padding.left - e.value.style.layout.padding.right - _e.value - l - 6
};
}), E = D(() => {
Ie.value.forEach((s, r) => {
Ot({
datasetObject: s,
requiredAttributes: ["values"]
}).forEach((u) => {
Ke({
componentName: "VueUiScatter",
type: "datasetSerieAttribute",
property: u,
index: r
});
}), s.values && s.values.forEach((u, f) => {
Ot({
datasetObject: u,
requiredAttributes: ["x", "y"]
}).forEach((v) => {
Ke({
componentName: "VueUiScatter",
type: "datasetSerieAttribute",
property: `values.${v}`,
index: `${r} - ${f}`
});
});
});
});
const l = Math.min(...te.value.filter((s) => !W.value.includes(s.id)).flatMap((s) => s.values.map((r) => r.x))), o = Math.max(...te.value.filter((s) => !W.value.includes(s.id)).flatMap((s) => s.values.map((r) => r.x))), t = Math.min(...te.value.filter((s) => !W.value.includes(s.id)).flatMap((s) => s.values.map((r) => r.y))), a = Math.max(...te.value.filter((s) => !W.value.includes(s.id)).flatMap((s) => s.values.map((r) => r.y)));
return { xMin: l >= 0 ? 0 : l, xMax: o, yMin: t >= 0 ? 0 : t, yMax: a };
}), P = D(() => ({
x: n.value.left + Math.abs(E.value.xMin) / (E.value.xMax + Math.abs(E.value.xMin)) * n.value.width,
y: n.value.bottom - Math.abs(E.value.yMin) / (E.value.yMax + Math.abs(E.value.yMin)) * n.value.height
})), te = D(() => Ie.value.map((l, o) => {
const t = `cluster_${X.value}_${o}`;
return {
...l,
values: Ol({
data: l.values,
threshold: e.value.usePerformanceMode ? l.values.length + 1 : e.value.downsample.threshold
}),
id: t,
color: l.color ? l.color : xt.value[o] || de[o] || de[o % de.length],
opacity: W.value.includes(t) ? 0.5 : 1,
shape: l.shape ?? "circle",
segregate: () => Se(t),
isSegregated: W.value.includes(t)
};
})), ul = D(() => ({
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" : ""
})), Me = D(() => te.value.map((l, o) => ({
...l,
plots: l.values.map((t) => ({
x: n.value.left + (t.x + Math.abs(E.value.xMin)) / (E.value.xMax + Math.abs(E.value.xMin)) * n.value.width,
y: n.value.bottom - (t.y + Math.abs(E.value.yMin)) / (E.value.yMax + Math.abs(E.value.yMin)) * n.value.height,
v: {
...t,
name: t.name || ""
},
clusterName: l.name,
color: l.color ? l.color : xt.value[o] || de[o] || de[o % de.length],
id: `plot_${X.value}_${Math.random()}`,
weight: t.weight ?? e.value.style.layout.plots.radius
}))
})).filter((l) => !W.value.includes(l.id))), U = D(() => {
const o = ({ m: t, b: a, rect: s, verticalX: r = null }) => {
const { left: u, right: f, top: v, bottom: p } = s, S = [], d = (A, h) => {
Number.isFinite(A) && Number.isFinite(h) && S.push({ x: A, y: h });
}, w = ({ x: A, y: h }) => A >= u - 1e-9 && A <= f + 1e-9 && h >= v - 1e-9 && h <= p + 1e-9;
r !== null ? r >= u - 1e-9 && r <= f + 1e-9 && (d(r, v), d(r, p)) : Number.isFinite(t) && (d(u, t * u + a), d(f, t * f + a), Math.abs(t) > 1e-9 ? (d((v - a) / t, v), d((p - a) / t, p)) : a >= v - 1e-9 && a <= p + 1e-9 && (d(u, a), d(f, a)));
const O = S.filter(w), _ = [];
for (const A of O)
_.some((h) => Math.abs(h.x - A.x) < 1e-6 && Math.abs(h.y - A.y) < 1e-6) || _.push(A);
if (_.length < 2) return null;
let z = _[0], Y = _[1], L = 0;
for (let A = 0; A < _.length; A += 1)
for (let h = A + 1; h < _.length; h += 1) {
const B = _[A].x - _[h].x, V = _[A].y - _[h].y, J = B * B + V * V;
J > L && (L = J, z = _[A], Y = _[h]);
}
return { x1: z.x, y1: z.y, x2: Y.x, y2: Y.y };
};
return Me.value.map((t) => {
const a = t.plots.length, s = t.plots.reduce((h, B) => h + B.x, 0) / a, r = t.plots.reduce((h, B) => h + B.y, 0) / a;
let u = 0, f = 0;
for (const h of t.plots) {
const B = h.x - s, V = h.y - r;
u += B * V, f += B * B;
}
let v, p, S = null;
f < 1e-9 ? (S = s, v = 1 / 0, p = null) : (v = u / f, p = r - v * s);
let d, w;
S !== null ? (d = 1 / 0, w = null) : (d = v, w = p);
const O = t.plots.every((h) => h.v && typeof h.v.x == "number" && typeof h.v.y == "number");
let _ = NaN;
if (a >= 2) {
let h = 0, B = 0;
O ? (h = t.plots.reduce((j, ye) => j + ye.v.x, 0) / a, B = t.plots.reduce((j, ye) => j + ye.v.y, 0) / a) : (h = s, B = -r);
let V = 0, J = 0, re = 0;
for (const j of t.plots) {
const ye = O ? j.v.x : j.x, Ze = O ? j.v.y : -j.y, xe = ye - h, fe = Ze - B;
V += xe * fe, J += xe * xe, re += fe * fe;
}
if (J >= 1e-9 && re >= 1e-9) {
const j = V / Math.sqrt(J * re);
_ = Math.max(-1, Math.min(1, j));
}
}
const z = o({ m: d, b: w, rect: n.value, verticalX: S });
if (!z)
return {
...t,
correlation: null,
label: null,
plots: t.plots.map((h) => ({
...h,
deviation: 0,
shape: t.shape,
color: Qe(t.color)
}))
};
const Y = (z.x1 + z.x2) / 2, L = (z.y1 + z.y2) / 2, A = { x: Y, y: L };
return {
...t,
color: Qe(t.color),
correlation: {
...z,
coefficient: _
},
label: A,
plots: t.plots.map((h) => {
let B, V;
S !== null ? (B = S, V = h.y) : Math.abs(d) < 1e-9 ? (B = h.x, V = w) : (B = (h.x + d * h.y - d * w) / (1 + d * d), V = (d * h.x + d * d * h.y + w) / (1 + d * d));
const J = h.x - B, re = h.y - V, j = Math.sqrt(J * J + re * re);
return {
...h,
deviation: j,
shape: t.shape,
color: Qe(t.color)
};
})
};
});
}), Ct = D(() => Math.max(...U.value.flatMap((l) => l.plots.map((o) => Math.abs(o.deviation)))));
function il() {
return U.value;
}
function At(l, o) {
const t = Array.isArray(l) ? l.flatMap((L) => L.plots.map((A) => ({
x: A.x,
y: A.y
}))) : l.plots.map((L) => ({
x: L.x,
y: L.y
}));
let a = 1 / 0, s = -1 / 0, r = 1 / 0, u = -1 / 0;
t.forEach(({ x: L, y: A }) => {
a = Math.min(a, L), s = Math.max(s, L), r = Math.min(r, A), u = Math.max(u, A);
});
const f = s - a, v = u - r, p = f / o, S = v / o, d = Array(o).fill(0), w = Array(o).fill(0);
t.forEach(({ x: L, y: A }) => {
const h = Math.floor((L - a) / p), B = Math.floor((A - r) / S);
d[h] || (d[h] = 0), w[B] || (w[B] = 0), d[h] += 1, w[B] += 1;
});
const O = [], _ = [];
for (let L = 0; L < o; L += 1)
O.push(a + (L + 0.5) * p), _.push(r + (L + 0.5) * S);
const z = Math.max(...d), Y = Math.max(...w);
return { x: d, y: w, avgX: O, avgY: _, maxX: z, maxY: Y };
}
const k = D(() => e.value.style.layout.marginalBars.tranches), M = D(() => At(Me.value, k.value)), vl = D(() => {
const l = n.value.top - e.value.style.layout.marginalBars.offset, o = n.value.right + e.value.style.layout.marginalBars.offset;
return Me.value.map((t) => {
const a = At(t, k.value);
return {
coords: a,
dX: Wl(a.avgX.map((s, r) => ({
x: s,
y: l - a.x[r] / a.maxX * e.value.style.layout.marginalBars.size
}))),
dY: Nl(a.avgY.map((s, r) => ({
y: s,
x: o + e.value.style.layout.marginalBars.size * a.y[r] / a.maxY
}))),
color: t.color,
id: t.id
};
});
}), R = $(void 0), g = $(null), je = $(null);
function Ue(l, o) {
R.value = l.id, g.value = l;
let t = "";
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: o }), je.value = {
datapoint: l,
seriesIndex: o,
series: U.value,
config: e.value
};
const a = e.value.style.tooltip.customFormat;
jl(a) && Ul(() => a({
datapoint: l,
seriesIndex: o,
series: U.value,
config: e.value
})) ? Pe.value = a({
datapoint: l,
seriesIndex: o,
series: U.value,
config: e.value
}) : (l.clusterName && (t += `<div style="display:flex;gap:3px;align-items:center">${l.clusterName}</div>`), l.v.name && (t += `<div>${l.v.name}</div>`), t += `<div style="text-align:left;margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, t += `<div>${e.value.style.layout.dataLabels.xAxis.name}: <b>${isNaN(l.v.x) ? "-" : ve(
e.value.style.layout.plots.selectors.labels.x.formatter,
l.v.x,
oe({
p: e.value.style.tooltip.prefix,
v: l.v.x,
s: e.value.style.tooltip.suffix,
r: e.value.style.tooltip.roundingValue
}),
{ datapoint: l, seriesIndex: o }
)}</b></div>`, t += `<div>${e.value.style.layout.dataLabels.yAxis.name}: <b>${isNaN(l.v.y) ? "-" : ve(
e.value.style.layout.plots.selectors.labels.y.formatter,
l.v.y,
oe({
p: e.value.style.tooltip.prefix,
v: l.v.y,
s: e.value.style.tooltip.suffix,
r: e.value.style.tooltip.roundingValue
}),
{ datapoint: l, seriesIndex: o }
)}</b></div>`, t += `${e.value.style.layout.plots.deviation.translation}: <b>${oe({
v: l.deviation,
r: e.value.style.layout.plots.deviation.roundingValue
})}</b>`, t += "</div>", Pe.value = `<div>${t}</div>`), Ee.value = !0;
}
function Be(l, o) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: o }), Ee.value = !1, R.value = void 0, g.value = null;
}
function Ve(l, o) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: o });
}
function Se(l) {
W.value.includes(l) ? W.value = W.value.filter((o) => o !== l) : W.value.length < Ie.value.length - 1 && W.value.push(l);
}
function wt(l) {
if (!te.value.length)
return e.value.debug && console.warn("VueUiScatter - There are no series to show."), null;
const o = te.value.find((t) => t.name === l);
return o || (e.value.debug && console.warn(`VueUiScatter - Series name not found "${l}"`), null);
}
function cl(l) {
const o = wt(l);
o !== null && W.value.includes(o.id) && Se(o.id);
}
function yl(l) {
const o = wt(l);
o !== null && (W.value.includes(o.id) || Se(o.id));
}
function Ge(l = null) {
Dl(() => {
const o = ["", 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 = U.value.map((r) => [
r.name,
r.correlation.coefficient,
r.plots.length,
r.plots.map((u) => u.v.x).reduce((u, f) => u + f, 0) / r.plots.length,
r.plots.map((u) => u.v.y).reduce((u, f) => u + f, 0) / r.plots.length
]), a = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([o]).concat(t), s = Yl(a);
l ? l(s) : Rl({ csvContent: s, title: e.value.style.title.text || "vue-ui-heatmap" });
});
}
const Le = D(() => {
const l = [
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}`
], o = U.value.map((a) => [
{
shape: a.shape,
content: a.name,
color: a.color
},
Number((a.correlation.coefficient ?? 0).toFixed(e.value.table.td.roundingValue)).toLocaleString(),
a.plots.length.toLocaleString(),
Number((a.plots.map((s) => s.v.x ?? 0).reduce((s, r) => s + r, 0) / a.plots.length).toFixed(e.value.table.td.roundingAverage)).toLocaleString(),
Number((a.plots.map((s) => s.v.y ?? 0).reduce((s, r) => s + r, 0) / a.plots.length).toFixed(e.value.table.td.roundingAverage)).toLocaleString()
]), t = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
};
return { head: l, body: o, config: t, colNames: l };
}), ce = $(!1);
function $t(l) {
ce.value = l, ot.value += 1;
}
function _t() {
H.value.showTable = !H.value.showTable;
}
function Mt() {
H.value.showTooltip = !H.value.showTooltip;
}
const Te = $(!1);
function qe() {
Te.value = !Te.value;
}
async function dl({ scale: l = 2 } = {}) {
if (!ae.value) return;
const { width: o, height: t } = ae.value.getBoundingClientRect(), a = o / t, { imageUri: s, base64: r } = await ao({ domElement: ae.value, base64: !0, img: !0, scale: l });
return {
imageUri: s,
base64: r,
title: e.value.style.title.text,
width: o,
height: t,
aspectRatio: a
};
}
function hl(l) {
pe.value = l, e.value.style.layout.marginalBars.highlighter.highlightBothAxes && (me.value = M.value.y.length - 2 - l);
}
function fl(l) {
me.value = l, e.value.style.layout.marginalBars.highlighter.highlightBothAxes && (pe.value = l);
}
function He() {
pe.value = null, me.value = null;
}
const Bt = {
circle: 1,
square: 1,
diamond: 1,
triangle: 1.2,
star: 1.3,
pentagon: 1.3,
hexagon: 1.3
}, x = (l) => l.toFixed(3);
function gl({ shape: l = "circle", cx: o, cy: t, r: a }) {
if (!e.value.usePerformanceMode) return "";
const s = Bt[l] * a;
switch (l) {
case "circle": {
const r = x(o - s), u = x(t), f = x(o + s), v = x(s);
return `M ${r} ${u} A ${v} ${v} 0 1 0 ${f} ${u} A ${v} ${v} 0 1 0 ${r} ${u} Z`;
}
case "square": {
const r = x(o - s), u = x(t - s), f = x(o + s), v = x(t + s);
return `M ${r} ${u} L ${f} ${u} L ${f} ${v} L ${r} ${v} Z`;
}
case "diamond": {
const r = x(o), u = x(t);
return `M ${r} ${x(t - s)} L ${x(o + s)} ${u} L ${r} ${x(t + s)} L ${x(o - s)} ${u} Z`;
}
case "triangle": {
const r = s * Math.sqrt(3), u = o, f = t - 2 / 3 * r, v = o - s, p = t + 1 / 3 * r, S = o + s, d = p;
return `M ${x(u)} ${x(f)} L ${x(v)} ${x(p)} L ${x(S)} ${x(d)} Z`;
}
case "star": {
const r = s, u = s * 0.5, f = [];
for (let p = 0; p < 10; p += 1) {
const S = (-90 + p * 36) * Math.PI / 180, d = p % 2 === 0 ? r : u;
f.push([o + d * Math.cos(S), t + d * Math.sin(S)]);
}
let v = `M ${x(f[0][0])} ${x(f[0][1])}`;
for (let p = 1; p < f.length; p += 1)
v += ` L ${x(f[p][0])} ${x(f[p][1])}`;
return v + " Z";
}
case "pentagon": {
const u = [];
for (let v = 0; v < 5; v += 1) {
const p = (-90 + v * 72) * Math.PI / 180;
u.push([o + s * Math.cos(p), t + s * Math.sin(p)]);
}
let f = `M ${x(u[0][0])} ${x(u[0][1])}`;
for (let v = 1; v < 5; v += 1) f += ` L ${x(u[v][0])} ${x(u[v][1])}`;
return f + " Z";
}
case "hexagon": {
const u = [];
for (let v = 0; v < 6; v += 1) {
const p = (-60 + v * 60) * Math.PI / 180;
u.push([o + s * Math.cos(p), t + s * Math.sin(p)]);
}
let f = `M ${x(u[0][0])} ${x(u[0][1])}`;
for (let v = 1; v < 6; v += 1) f += ` L ${x(u[v][0])} ${x(u[v][1])}`;
return f + " Z";
}
default: {
const r = x(o - s), u = x(t), f = x(o + s), v = x(s);
return `M ${r} ${u} A ${v} ${v} 0 1 0 ${f} ${u} A ${v} ${v} 0 1 0 ${r} ${u} Z`;
}
}
}
const pl = D(() => {
if (!e.value.usePerformanceMode) return [""];
const { left: l, right: o, top: t, bottom: a } = n.value, s = Math.max(1, (o - l) * (a - t)), r = (d) => d / s * 1e4, u = 2.5, f = 1e3, v = e.value.style.layout.plots.stroke, p = e.value.style.layout.plots.strokeWidth, S = e.value.style.layout.plots.opacity;
return U.value.map((d) => {
const w = [];
for (const _ of d.plots) {
const z = _.x, Y = _.y;
if (z < l || z > o || Y < t || Y > a) continue;
const L = Math.max(e.value.style.layout.plots.radius, _.weight);
w.push(gl({
shape: d.shape || "circle",
cx: z,
cy: Y,
r: L
}));
}
if (!w.length) return null;
const O = r(d.plots.length) > u || d.plots.length > f;
return {
id: d.id,
d: w.join(""),
fill: ze(d.color, S * 100),
stroke: O ? "none" : v,
strokeWidth: O ? 0 : p,
strokeOpacity: 1
};
}).filter(Boolean);
});
function ml() {
return e.value.usePerformanceMode ? (l) => {
const o = $e.value;
if (!o) return;
const t = o.createSVGPoint();
t.x = l.clientX, t.y = l.clientY;
const a = o.getScreenCTM();
if (!a) return;
const s = a.inverse(), r = t.matrixTransform(s), u = 8, f = u * u;
let v = null, p = 1 / 0, S = -1;
if (U.value.forEach((d, w) => {
d.plots.forEach((O) => {
const _ = O.x - r.x, z = O.y - r.y, Y = _ * _ + z * z;
Y <= f && Y < p && (p = Y, v = O, S = w);
});
}), v)
R.value !== v.id && (R.value = v.id, Ue(v, S));
else if (R.value) {
const d = g.value;
R.value = void 0, Be(d, S);
}
} : () => null;
}
const St = ml();
function bl() {
if (R.value) {
const l = g.value;
R.value = void 0, Be(l, null);
}
}
function kl(l) {
const o = g.value;
if (o) {
const t = U.value.findIndex((a) => a.id === o.clusterId);
Ve(o, t >= 0 ? t : 0);
}
}
const ke = D(() => {
const l = e.value.table.useDialog && !e.value.table.show, o = H.value.showTable;
return {
component: l ? el : Ht,
title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? `: ${e.value.style.title.subtitle.text}` : ""}`,
props: l ? {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
headerColor: e.value.table.th.color,
headerBg: e.value.table.th.backgroundColor,
isFullscreen: ce.value,
fullscreenParent: ae.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: o,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
},
head: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
}
}
}
};
});
Fe(() => H.value.showTable, (l) => {
e.value.table.show || (l && e.value.table.useDialog && be.value ? be.value.open() : "close" in be.value && be.value.close());
});
function Lt() {
H.value.showTable = !1, Oe.value && Oe.value.setTableIconState(!1);
}
const xl = D(() => e.value.style.backgroundColor), Cl = D(() => e.value.style.legend), Al = D(() => e.value.style.title), { exportSvg: wl, getSvg: $l } = Kl({
svg: $e,
title: Al,
legend: Cl,
legendItems: te,
backgroundColor: xl
});
async function Tt({ isCb: l }) {
if (l) {
const { blob: o, url: t, text: a, dataUrl: s } = await $l();
e.value.userOptions.callbacks.svg({ blob: o, url: t, text: a, dataUrl: s });
} else
wl();
}
return Vt({
getData: il,
getImage: dl,
generatePdf: bt,
generateCsv: Ge,
generateImage: kt,
generateSvg: Tt,
hideSeries: yl,
showSeries: cl,
toggleTable: _t,
toggleTooltip: Mt,
toggleAnnotator: qe,
toggleFullscreen: $t
}), (l, o) => (i(), c("div", {
class: Ft(`vue-data-ui-component vue-ui-scatter ${ce.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "scatterChart",
ref: ae,
id: `vue-ui-scatter_${X.value}`,
style: ie(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: o[5] || (o[5] = () => y(dt)(!0)),
onMouseleave: o[6] || (o[6] = () => y(dt)(!1))
}, [
e.value.userOptions.buttons.annotator ? (i(), se(y(Jt), {
key: 0,
svgRef: y($e),
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
active: Te.value,
onClose: qe
}, {
"annotator-action-close": T(() => [
F(l.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": T(({ color: t }) => [
F(l.$slots, "annotator-action-color", K(Q({ color: t })), void 0, !0)
]),
"annotator-action-draw": T(({ mode: t }) => [
F(l.$slots, "annotator-action-draw", K(Q({ mode: t })), void 0, !0)
]),
"annotator-action-undo": T(({ disabled: t }) => [
F(l.$slots, "annotator-action-undo", K(Q({ disabled: t })), void 0, !0)
]),
"annotator-action-redo": T(({ disabled: t }) => [
F(l.$slots, "annotator-action-redo", K(Q({ disabled: t })), void 0, !0)
]),
"annotator-action-delete": T(({ disabled: t }) => [
F(l.$slots, "annotator-action-delete", K(Q({ disabled: t })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : b("", !0),
rl.value ? (i(), c("div", {
key: 1,
ref_key: "noTitle",
ref: rt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : b("", !0),
e.value.style.title.text ? (i(), c("div", {
key: 2,
ref_key: "chartTitle",
ref: at,
style: "width:100%;background:transparent"
}, [
(i(), se(oo, {
key: `title_${ut.value}`,
config: {
title: {
cy: "scatter-div-title",
...e.value.style.title
},
subtitle: {
cy: "scatter-div-subtitle",
...e.value.style.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : b("", !0),
C("div", {
id: `legend-top-${X.value}`
}, null, 8, ro),
e.value.userOptions.show && lt.value && (y(ht) || y(Ye)) ? (i(), se(y(Kt), {
ref_key: "userOptionsRef",
ref: Oe,
key: `user_options_${ot.value}`,
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
isImaging: y(mt),
isPrinting: y(pt),
uid: X.value,
hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isTooltip: H.value.showTooltip,
isFullscreen: ce.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: ae.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: Te.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: $t,
onGeneratePdf: y(bt),
onGenerateCsv: Ge,
onGenerateImage: y(kt),
onGenerateSvg: Tt,
onToggleTable: _t,
onToggleTooltip: Mt,
onToggleAnnotator: qe,
style: ie({
visibility: y(ht) ? y(Ye) ? "visible" : "hidden" : "visible"
})
}, zt({ _: 2 }, [
l.$slots.menuIcon ? {
name: "menuIcon",
fn: T(({ isOpen: t, color: a }) => [
F(l.$slots, "menuIcon", K(Q({ isOpen: t, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
l.$slots.optionTooltip ? {
name: "optionTooltip",
fn: T(() => [
F(l.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
l.$slots.optionPdf ? {
name: "optionPdf",
fn: T(() => [
F(l.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
l.$slots.optionCsv ? {
name: "optionCsv",
fn: T(() => [
F(l.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
l.$slots.optionImg ? {
name: "optionImg",
fn: T(() => [
F(l.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
l.$slots.optionSvg ? {
name: "optionSvg",
fn: T(() => [
F(l.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
l.$slots.optionTable ? {
name: "optionTable",
fn: T(() => [
F(l.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
l.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: T(({ toggleFullscreen: t, isFullscreen: a }) => [
F(l.$slots, "optionFullscreen", K(Q({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
]),
key: "7"
} : void 0,
l.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: T(({ toggleAnnotator: t, isAnnotator: a }) => [
F(l.$slots, "optionAnnotator", K(Q({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : b("", !0),
(i(), c("svg", {
ref_key: "svgRef",
ref: $e,
xmlns: y(Il),
class: Ft({ "vue-data-ui-fullscreen--on": ce.value, "vue-data-ui-fulscreen--off": !ce.value, animated: e.value.useCssAnimation }),
viewBox: `0 0 ${I.value.width <= 0 ? 10 : I.value.width} ${I.value.height <= 0 ? 10 : I.value.height}`,
style: ie(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`),
onMouseleave: He
}, [
we(y(Qt)),
l.$slots["chart-background"] ? (i(), c("foreignObject", {
key: 0,
x: 0,
y: 0,
width: I.value.width <= 0 ? 10 : I.value.width,
height: I.value.height <= 0 ? 10 : I.value.height,
style: {
pointerEvents: "none"
}
}, [
F(l.$slots, "chart-background", {}, void 0, !0)
], 8, io)) : b("", !0),
e.value.style.layout.axis.show ? (i(), c("g", vo, [
C("line", {
x1: P.value.x,
x2: P.value.x,
y1: n.value.top,
y2: n.value.bottom,
stroke: e.value.style.layout.axis.stroke,
"stroke-width": e.value.style.layout.axis.strokeWidth,
"stroke-linecap": "round"
}, null, 8, co),
C("line", {
x1: n.value.left,
x2: n.value.right,
y1: P.value.y,
y2: P.value.y,
stroke: e.value.style.layout.axis.stroke,
"stroke-width": e.value.style.layout.axis.strokeWidth,
"stroke-linecap": "round"
}, null, 8, yo)
])) : b("", !0),
e.value.style.layout.marginalBars.show ? (i(), c("g", ho, [
C("defs", null, [
C("linearGradient", {
id: `marginal_x_${X.value}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
C("stop", {
offset: "0%",
"stop-color": e.value.style.layout.marginalBars.fill
}, null, 8, go),
C("stop", {
offset: "100%",
"stop-color": e.value.style.backgroundColor
}, null, 8, po)
], 8, fo),
C("linearGradient", {
id: `marginal_y_${X.value}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%"
}, [
C("stop", {
offset: "0%",
"stop-color": e.value.style.backgroundColor
}, null, 8, bo),
C("stop", {
offset: "100%",
"stop-color": e.value.style.layout.marginalBars.fill
}, null, 8, ko)
], 8, mo)
]),
(i(!0), c(Z, null, le(M.value.x, (t, a) => (i(), c("g", null, [
t && M.value.avgX[a] ? (i(), c("rect", {
key: 0,
x: M.value.avgX[a] - n.value.width / k.value / 2,
y: n.value.top - e.value.style.layout.marginalBars.offset - t / M.value.maxX * e.value.style.layout.marginalBars.size,
width: n.value.width / k.value <= 0 ? 1e-4 : n.value.width / k.value,
height: t / M.value.maxX * e.value.style.layout.marginalBars.size <= 0 ? 1e-4 : t / M.value.maxX * e.value.style.layout.marginalBars.size,
fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_x_${X.value})` : e.value.style.layout.marginalBars.fill,
style: ie([`opacity:${e.value.style.layout.marginalBars.opacity}`, { "pointer-events": "none" }]),
stroke: e.value.style.backgroundColor,
"stroke-width": e.value.style.layout.marginalBars.strokeWidth,
rx: e.value.style.layout.marginalBars.borderRadius
}, null, 12, xo)) : b("", !0),
M.value.avgX[a] ? (i(), c("rect", {
key: 1,
x: M.value.avgX[a] - n.value.width / k.value / 2,
y: n.value.top - e.value.style.layout.marginalBars.offset - e.value.style.layout.marginalBars.size,
width: n.value.width / k.value <= 0 ? 1e-4 : n.value.width / k.value,
height: Math.max(0.1, e.value.style.layout.marginalBars.size),
fill: "transparent",
onMouseenter: (s) => hl(a),
onMouseleave: o[0] || (o[0] = (s) => He())
}, null, 40, Co)) : b("", !0),
M.value.avgX[a] && pe.value != null && pe.value === a ? (i(), c("g", Ao, [
C("rect", {
x: M.value.avgX[a] - n.value.width / k.value / 2,
y: n.value.top,
width: n.value.width / k.value <= 0 ? 1e-4 : n.value.width / k.value,
height: n.value.height,
fill: e.value.style.layout.marginalBars.highlighter.color,
"fill-opacity": e.value.style.layout.marginalBars.highlighter.opacity
}, null, 8, wo),
C("line", {
x1: M.value.avgX[a] - n.value.width / k.value / 2,
x2: M.value.avgX[a] - n.value.width / k.value / 2,
y1: 0,
y2: n.value.top + n.value.height,
stroke: e.value.style.layout.marginalBars.highlighter.stroke,
"stroke-dasharray": e.value.style.layout.marginalBars.highlighter.strokeDasharray,
"stroke-width": e.value.style.layout.marginalBars.highlighter.strokeWidth,
style: { transition: "none !important", animation: "none !important" }
}, null, 8, $o),
C("line", {
x1: M.value.avgX[a] - n.value.width / k.value / 2 + (n.value.width / k.value <= 0 ? 1e-4 : n.value.width / k.value),
x2: M.value.avgX[a] - n.value.width / k.value / 2 + (n.value.width / k.value <= 0 ? 1e-4 : n.value.width / k.value),
y1: 0,
y2: n.value.top + n.value.height,
stroke: e.value.style.layout.marginalBars.highlighter.stroke,
"stroke-dasharray": e.value.style.layout.marginalBars.highlighter.strokeDasharray,
"stroke-width": e.value.style.layout.marginalBars.highlighter.strokeWidth,
style: { transition: "none !important", animation: "none !important" }
}, null, 8, _o)
])) : b("", !0)
]))), 256)),
(i(!0), c(Z, null, le(M.value.y, (t, a) => (i(), c("g", null, [
t && M.value.avgY[a] ? (i(), c("rect", {
key: 0,
x: n.value.right + e.value.style.layout.marginalBars.offset,
y: M.value.avgY[a] - n.value.height / k.value / 2,
height: n.value.height / k.value <= 0 ? 1e-4 : n.value.height / k.value,
width: t / M.value.maxY * e.value.style.layout.marginalBars.size <= 0 ? 1e-4 : t / M.value.maxY * e.value.style.layout.marginalBars.size,
fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_y_${X.value})` : e.value.style.layout.marginalBars.fill,
style: ie([`opacity:${e.value.style.layout.marginalBars.opacity}`, { "pointer-events": "none" }]),
stroke: e.value.style.backgroundColor,
"stroke-width": e.value.style.layout.marginalBars.strokeWidth,
rx: e.value.style.layout.marginalBars.borderRadius
}, null, 12, Mo)) : b("", !0),
M.value.avgY[a] ? (i(), c("rect", {
key: 1,
x: n.value.right + e.value.style.layout.marginalBars.offset,
y: M.value.avgY[a] - n.value.height / k.value / 2,
width: Math.max(0.1, e.value.style.layout.marginalBars.size),
height: n.value.height / k.value <= 0 ? 1e-4 : n.value.height / k.value,
fill: "transparent",
onMouseenter: (s) => fl(a),
onMouseleave: o[1] || (o[1] = (s) => He())
}, null, 40, Bo)) : b("", !0),
M.value.avgY[a] && me.value != null && me.value === a ? (i(), c("g", So, [
C("rect", {
x: n.value.left,
y: M.value.avgY[a] - n.value.height / k.value / 2,
width: n.value.width,
height: n.value.height / k.value <= 0 ? 1e-4 : n.value.height / k.value,
fill: e.value.style.layout.marginalBars.highlighter.color,
"fill-opacity": e.value.style.layout.marginalBars.highlighter.opacity
}, null, 8, Lo),
C("line", {
x1: n.value.left,
x2: I.value.width,
y1: M.value.avgY[a] - n.value.height / k.value / 2,
y2: M.value.avgY[a] - n.value.height / k.value / 2,
stroke: e.value.style.layout.marginalBars.highlighter.stroke,
"stroke-dasharray": e.value.style.layout.marginalBars.highlighter.strokeDasharray,
"stroke-width": e.value.style.layout.marginalBars.highlighter.strokeWidth,
style: { transition: "none !important", animation: "none !important" }
}, null, 8, To),
C("line", {
x1: n.value.left,
x2: I.value.width,
y1: M.value.avgY[a] - n.value.height / k.value / 2 + (n.value.height / k.value <= 0 ? 1e-4 : n.value.height / k.value),
y2: M.value.avgY[a] - n.value.height / k.value / 2 + (n.value.height / k.value <= 0 ? 1e-4 : n.value.height / k.value),
stroke: e.value.style.layout.marginalBars.highlighter.stroke,
"stroke-dasharray": e.value.style.layout.marginalBars.highlighter.strokeDasharray,
"stroke-width": e.value.style.layout.marginalBars.highlighter.strokeWidth,
style: { transition: "none !important", animation: "none !important" }
}, null, 8, Do)
])) : b("", !0)
]))), 256)),
e.value.style.layout.marginalBars.showLines ? (i(), c("g", Fo, [
(i(!0), c(Z, null, le(vl.value, (t) => (i(), c(Z, null, [
W.value.includes(t.id) ? b("", !0) : (i(), c("path", {
key: 0,
d: `M ${t.dX}`,
stroke: e.value.style.backgroundColor,
"stroke-width": e.value.style.layout.marginalBars.linesStrokeWidth + 1,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, zo)),
W.value.includes(t.id) ? b("", !0) : (i(), c("path", {
key: 1,
d: `M ${t.dX}`,
stroke: t.color,
"stroke-width": e.value.style.layout.marginalBars.linesStrokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, Eo)),
W.value.includes(t.id) ? b("", !0) : (i(), c("path", {
key: 2,
d: `M ${t.dY}`,
stroke: e.value.style.backgroundColor,
"stroke-width": e.value.style.layout.marginalBars.linesStrokeWidth + 1,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, Po)),
W.value.includes(t.id) ? b("", !0) : (i(), c("path", {
key: 3,
d: `M ${t.dY}`,
stroke: t.color,
"stroke-width": e.value.style.layout.marginalBars.linesStrokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, Oo))
], 64))), 256))
])) : b("", !0)
])) : b("", !0),
e.value.style.layout.plots.giftWrap.show ? (i(), c("g", No, [
(i(!0), c(Z, null, le(U.value, (t, a) => (i(), c("g", null, [
t.plots.length > 2 ? (i(), c("polygon", {
key: 0,
points: y(Xl)({ series: t.plots }),
fill: y(ze)(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, Wo)) : b("", !0)
]))), 256))
])) : b("", !0),
e.value.usePerformanceMode ? b("", !0) : (i(!0), c(Z, { key: 4 }, le(U.value, (t, a) => (i(), c("g", null, [
!t.shape || t.shape === "circle" ? (i(), c("g", Io, [
(i(!0), c(Z, null, le(t.plots, (s, r) => (i(), c("circle", {
cx: s.x,
cy: s.y,
r: R.value && R.value === s.id ? s.weight * 2 : s.weight,
fill: y(ze)(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: ie(`opacity:${R.value && R.value === s.id ? 1 : e.value.style.layout.plots.significance.useDistanceOpacity ? 1 - Math.abs(s.deviation) / Ct.value : e.value.style.layout.plots.significance.show && Math.abs(s.deviation) > e.value.style.layout.plots.significance.deviationThreshold ? e.value.style.layout.plots.significance.opacity : 1}`),
onMouseover: (u) => Ue(s, a),
onMouseleave: (u) => Be(s, a),
onClick: (u) => Ve(s, a)
}, null, 44, Xo))), 256))
])) : (i(), c("g", Yo, [
(i(!0), c(Z, null, le(t.plots, (s, r) => (i(), se(tt, {
plot: { x: s.x, y: s.y },
radius: R.value && R.value === s.id ? s.weight * 2 : s.weight,
shape: t.shape,
color: y(ze)(t.color, e.value.style.layout.plots.opacity * 100),
stroke: e.value.style.layout.plots.stroke,
strokeWidth: e.value.style.layout.plots.strokeWidth,
style: ie(`opacity:${R.value && R.value === s.id ? 1 : e.value.style.layout.plots.significance.useDistanceOpacity ? 1 - Math.abs(s.deviation) / Ct.value : e.value.style.layout.plots.significance.show && Math.abs(s.deviation) > e.value.style.layout.plots.significance.deviationThreshold ? e.value.style.layout.plots.significance.opacity : 1}`),
onMouseover: (u) => Ue(s, a),
onMouseleave: (u) => Be(s, a),
onClick: (u) => Ve(s, a)
}, null, 8, ["plot", "radius", "shape", "color", "stroke", "strokeWidth", "style", "onMouseover", "onMouseleave", "onClick"]))), 256))
]))
]))), 256)),
e.value.usePerformanceMode ? (i(), c(Z, { key: 5 }, [
C("g", {
"clip-path": `url(#clip_path_${X.value})`
}, [
(i(!0), c(Z, null, le(pl.value, (t) => (i(), c("path", {
key: t.id,
d: t.d,
fill: t.fill,
stroke: t.stroke,
"stroke-width": t.strokeWidth,
"stroke-opacity": t.strokeOpacity,
"vector-effect": "non-scaling-stroke",
"paint-order": "fill"
}, null, 8, jo))), 128))
], 8, Ro),
g.value && e.value.style.layout.plots.selectors.show ? (i(), c("g", Uo, [
we(tt, {
shape: g.value.shape || "circle",
color: g.value.color,
plot: { x: g.value.x, y: g.value.y },
radius: Math.max(4 * Bt[g.value.shape || "circle"], g.value.weight * 2),
stroke: e.value.style.layout.plots.stroke,
strokeWidth: e.value.style.layout.plots.strokeWidth
}, null, 8, ["shape", "color", "plot", "radius", "stroke", "strokeWidth"])
])) : b("", !0),
C("rect", {
x: n.value.left,
y: n.value.top,
width: Math.max(1e-4, n.value.width),
height: Math.max(1e-4, n.value.height),
fill: "transparent",
onMousemove: o[2] || (o[2] = (...t) => y(St) && y(St)(...t)),
onMouseleave: bl,
onClick: kl
}, null, 40, Vo)
], 64)) : b("", !0),
g.value && e.value.style.layout.plots.selectors.show ? (i(), c("g", Go, [
C("line", {
x1: P.value.x,
x2: g.value.x,
y1: g.value.y,
y2: g.value.y,
stroke: e.value.style.layout.plots.selectors.stroke,
"stroke-width": e.value.style.layout.plots.selectors.strokeWidth,
"stroke-dasharray": e.value.style.layout.plots.selectors.strokeDasharray,
"stroke-linecap": "round",
class: "line-pointer"
}, null, 8, qo),
C("line", {
x1: g.value.x,
x2: g.value.x,
y1: P.value.y,
y2: g.value.y,
stroke: e.value.style.layout.plots.selectors.stroke,
"stroke-width": e.value.style.layout.plots.selectors.strokeWidth,
"stroke-dasharray": e.value.style.layout.plots.selectors.strokeDasharray,
"stroke-linecap": "round",
class: "line-pointer"
}, null, 8, Ho),
C("text", {
x: P.value.x + (g.value.x > P.value.x ? -6 : 6),
y: g.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": g.value.x > P.value.x ? "end" : "start"
}, G(y(ve)(
e.value.style.layout.plots.selectors.labels.y.formatter,
y(q)(g.value.v.y),
y(oe)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: y(q)(g.value.v.y),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.plots.selectors.labels.rounding
}),
{ datapoint: g.value }
)), 9, Zo),
C("text", {
x: g.value.x,
y: P.value.y + (g.value.y > P.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"
}, G(y(ve)(
e.value.style.layout.plots.selectors.labels.y.formatter,
y(q)(g.value.v.x),
y(oe)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: y(q)(g.value.v.x),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.plots.selectors.labels.rounding
}),
{ datapoint: g.value }
)), 9, Jo),
C("circle", {
cx: P.value.x,
cy: g.value.y,
r: e.value.style.layout.plots.selectors.markers.radius,
fill: e.value.style.layout.plots.selectors.markers.fill,
stroke: e.value.style.layout.plots.selectors.markers.stroke,
"stroke-width": e.value.style.layout.plots.selectors.markers.strokeWidth,
class: "line-pointer"
}, null, 8, Ko),
C("circle", {
cx: g.value.x,
cy: P.value.y,
r: e.value.style.layout.plots.selectors.markers.radius,
fill: e.value.style.layout.plots.selectors.markers.fill,
stroke: e.value.style.layout.plots.selectors.markers.stroke,
"stroke-width": e.value.style.layout.plots.selectors.markers.strokeWidth,
class: "line-pointer"
}, null, 8, Qo),
e.value.style.layout.plots.selectors.labels.showName ? (i(), c("text", {
key: 0,
x: g.value.x,
y: g.value.y + (g.value.y < P.value.y ? -e.value.style.layout.plots.selectors.labels.fontSize / 2 : e.value.style.layout.plots.selectors.labels.fontSize),
"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": g.value.x < n.value.left + 100 ? "start" : g.value.x > n.value.right - 100 ? "end" : g.value.x > P.value.x ? "start" : "end"
}, G(g.value.v.name), 9, ea)) : b("", !0)
])) : b("", !0),
e.value.style.layout.dataLabels.xAxis.show ? (i(), c("g", {
key: 7,
ref_key: "xAxisLabelLeft",
ref: Ne
}, [
C("text", {
id: `vue-ui-scatter-xAxis-label-${X.value}`,
transform: `translate(${e.value.style.layout.dataLabels.xAxis.fontSize}, ${n.value.top + n.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
}, G(e.value.style.layout.dataLabels.xAxis.name), 9, ta),
C("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}, ${P.value.y + e.value.style.layout.dataLabels.xAxis.fontSize / 3}), rotate(-90)`
}, G(y(ve)(
e.value.style.layout.plots.selectors.labels.x.formatter,
y(q)(E.value.xMin),
y(oe)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: y(q)(E.value.xMin),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.dataLabels.xAxis.rounding
})
)), 9, la)
], 512)) : b("", !0),
e.value.style.layout.dataLabels.xAxis.show ? (i(), c("text", {
key: 8,
ref_key: "xAxisLabelRight",
ref: al,
"text-anchor": "middle",
transform: `translate(${n.value.right + e.value.style.layout.padding.right + 6}, ${P.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
}, G(y(ve)(
e.value.style.layout.plots.selectors.labels.x.formatter,
y(q)(E.value.xMax),
y(oe)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: y(q)(E.value.xMax),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.dataLabels.xAxis.rounding
})
)), 9, oa)) : b("", !0),
e.value.style.layout.dataLabels.yAxis.show ? (i(), c("text", {
key: 9,
ref_key: "yAxisLabelTop",
ref: sl,
x: P.value.x,
y: n.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
}, G(y(ve)(
e.value.style.layout.plots.selectors.labels.y.formatter,
y(q)(E.value.yMax),
y(oe)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: y(q)(E.value.yMax),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.dataLabels.yAxis.rounding
})
)), 9, aa)) : b("", !0),
e.value.style.layout.dataLabels.yAxis.show ? (i(), c("g", {
key: 10,
ref_key: "yAxisLabelBottom",
ref: We
}, [
C("text", {
x: P.value.x,
y: I.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
}, G(y(ve)(
e.value.style.layout.plots.selectors.labels.y.formatter,
y(q)(E.value.yMin),
y(oe)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: y(q)(E.value.yMin),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.dataLabels.yAxis.rounding
})
)), 9, sa),
C("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: n.value.left + n.value.width / 2,
y: I.value.height
}, G(e.value.style.layout.dataLabels.yAxis.name), 9, na)
], 512)) : b("", !0),
C("clipPath", {
id: `clip_path_${X.value}`
}, [
C("rect", {
x: n.value.left,
y: n.value.top,
width: n.value.width <= 0 ? 1e-4 : n.value.width,
height: n.value.height <= 0 ? 1e-4 : n.value.height
}, null, 8, ua)
], 8, ra),
e.value.style.layout.correlation.show ? (i(), c("g", ia, [
(i(!0), c(Z, null, le(U.value, (t, a) => (i(), c("line", {
x1: t.correlation.x1,
x2: t.correlation.x2,
y1: t.correlation.y1,
y2: t.correlation.y2,
"stroke-dasharray": e.value.style.layout.correlation.strokeDasharray,
stroke: t.color,
"stroke-width": e.value.style.layout.correlation.strokeWidth,
"clip-path": `url(#clip_path_${X.value})`
}, null, 8, va))), 256)),
(i(!0), c(Z, null, le(U.value, (t, a) => (i(), c("g", null, [
e.value.style.layout.correlation.label.show ? (i(), c("text", {
key: 0,
x: t.correlation.x2,
y: t.correlation.y2,
fill: e.value.style.layout.correlation.label.useSerieColor ? t.color : e.value.style.layout.correlation.label.color,
"text-anchor": "end",
"font-size": e.value.style.layout.correlation.label.fontSize,
"font-weight": e.value.style.layout.correlation.label.bold ? "bold" : "normal"
}, G(y(oe)({
v: y(q)(t.correlation.coefficient),
r: e.value.style.layout.correlation.label.roundingValue
})), 9, ca)) : b("", !0)
]))), 256))
])) : b("", !0),
F(l.$slots, "svg", {
svg: {
...I.value,
drawingArea: {
...n.value,
zero: P.value
},
data: Me.value
}
}, void 0, !0)
], 46, uo)),
l.$slots.watermark ? (i(), c("div", ya, [
F(l.$slots, "watermark", K(Q({ isPrinting: y(pt) || y(mt) })), void 0, !0)
])) : b("", !0),
C("div", {
id: `legend-bottom-${X.value}`
}, null, 8, da),
ct.value ? (i(), se(Sl, {
key: 5,
to: e.value.style.legend.position === "top" ? `#legend-top-${X.value}` : `#legend-bottom-${X.value}`
}, [
C("div", {
ref_key: "chartLegend",
ref: st
}, [
e.value.style.legend.show ? (i(), se(lo, {
key: `legend_${vt.value}`,
legendSet: te.value,
config: ul.value,
onClickMarker: o[3] || (o[3] = ({ legend: t }) => Se(t.id))
}, {
item: T(({ legend: t }) => [
C("div", {
onClick: (a) => t.segregate(),
style: ie(`opacity:${W.value.includes(t.id) ? 0.5 : 1}`)
}, G(t.name), 13, ha)
]),
_: 1
}, 8, ["legendSet", "config"])) : F(l.$slots, "legend", {
key: 1,
legend: te.value
}, void 0, !0)
], 512)
], 8, ["to"])) : b("", !0),
l.$slots.source ? (i(), c("div", {
key: 6,
ref_key: "source",
ref: nt,
dir: "auto"
}, [
F(l.$slots, "source", {}, void 0, !0)
], 512)) : b("", !0),
we(y(Gt), {
show: H.value.showTooltip && Ee.value,
backgroundColor: e.value.style.tooltip.backgroundColor,
color: e.value.style.tooltip.color,
borderRadius: e.value.style.tooltip.borderRadius,
borderColor: e.value.style.tooltip.borderColor,
borderWidth: e.value.style.tooltip.borderWidth,
fontSize: e.value.style.tooltip.fontSize,
backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
position: e.value.style.tooltip.position,
offsetY: e.value.style.tooltip.offsetY,
parent: ae.value,
content: Pe.value,
isFullscreen: ce.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,
smoothForce: e.value.style.tooltip.smoothForce,
smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
}, {
"tooltip-before": T(() => [
F(l.$slots, "tooltip-before", K(Q({ ...je.value })), void 0, !0)
]),
"tooltip-after": T(() => [
F(l.$slots, "tooltip-after", K(Q({ ...je.value })), void 0, !0)
]),
default: T(() => [
e.value.style.tooltip.showShape ? (i(), c("div", fa, [
(i(), c("svg", ga, [
we(tt, {
shape: g.value.shape,
color: g.value.color,
plot: { x: 10, y: 10 },
radius: 7
}, null, 8, ["shape", "color"])
]))
])) : b("", !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
lt.value && e.value.userOptions.buttons.table ? (i(), se(Ll(ke.value.component), Tl({ key: 7 }, ke.value.props, {
ref_key: "tableUnit",
ref: be,
onClose: Lt
}), zt({
content: T(() => [
(i(), se(y(Zt), {
key: `table_${it.value}`,
colNames: Le.value.colNames,
head: Le.value.head,
body: Le.value.body,
config: Le.value.config,
title: e.value.table.useDialog ? "" : ke.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: Lt
}, {
th: T(({ th: t }) => [
Et(G(t), 1)
]),
td: T(({ td: t }) => [
t.shape ? (i(), c("div", pa, [
C("span", null, G(t.content), 1)
])) : (i(), c("div", {
key: 1,
innerHTML: t
}, null, 8, ma))
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: T(() => [
Et(G(ke.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: T(() => [
C("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: o[4] || (o[4] = (t) => Ge(e.value.userOptions.callbacks.csv))
}, [
we(y(qt), {
name: "excel",
stroke: ke.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : b("", !0),
y(yt) ? (i(), se(Zl, { key: 8 })) : b("", !0)
], 46, no));
}
}, ka = /* @__PURE__ */ so(ba, [["__scopeId", "data-v-0b372a51"]]), Oa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: ka
}, Symbol.toStringTag, { value: "Module" }));
export {
Pa as a,
Oa as b,
ka as v
};