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