vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,023 lines (1,022 loc) • 45.8 kB
JavaScript
import { computed as m, ref as p, watch as oe, onMounted as le, onBeforeUnmount as se, openBlock as a, createElementBlock as n, normalizeClass as Vt, unref as t, normalizeStyle as Y, createBlock as j, createCommentVNode as d, createSlots as ae, withCtx as _, renderSlot as M, normalizeProps as Q, guardReactiveProps as Z, createVNode as ft, createElementVNode as h, Fragment as N, renderList as X, toDisplayString as C, createTextVNode as re, nextTick as ie } from "vue";
import { u as ne, c as ue, t as ye, a as ce, p as q, o as de, e as gt, b as he, g as Et, T as pe, R as fe, W as ge, X as ve, U as xe, s as vt, i as V, v as z, f as P, x as me, y as be, q as ke, r as we } from "./index-WrV3SAID.js";
import { t as _e, u as Me } from "./useResponsive-CoxXLe23.js";
import { _ as $e } from "./Title-BR-xoRp4.js";
import { u as Ce, U as ze } from "./usePrinter-kVpf1iV8.js";
import { _ as Ae } from "./Tooltip-ho4JxRm-.js";
import { L as Se } from "./Legend-7H4oi6Sq.js";
import { _ as Ut } from "./Shape-DNIrFW-J.js";
import { D as Le } from "./DataTable-DNPvKWC0.js";
import Te from "./vue-ui-skeleton-Qec_XSRf.js";
import Be from "./vue-ui-accordion-BQCDXXDs.js";
import { u as Gt } from "./useNestedProp-Cj0kHD7k.js";
import { _ as Oe } from "./PackageVersion-1NslmM8M.js";
import { P as Ne } from "./PenAndPaper-BF1ZRVm3.js";
import { u as Pe } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as We } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Fe = ["id"], Xe = ["xmlns", "viewBox"], Ie = ["width", "height"], De = { key: 1 }, Ye = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], je = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ve = { key: 2 }, Ee = ["points", "fill", "stroke-width", "stroke-dasharray", "stroke"], Ue = { key: 0 }, Ge = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onMouseover"], Re = { key: 1 }, qe = { key: 3 }, He = ["id"], Je = ["stop-color"], Ke = ["stop-color"], Qe = ["id"], Ze = ["stop-color"], to = ["stop-color"], eo = ["x", "y", "width", "height", "fill", "stroke", "stroke-width", "rx"], oo = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], lo = { key: 0 }, so = ["d", "stroke", "stroke-width"], ao = ["d", "stroke", "stroke-width"], ro = ["d", "stroke", "stroke-width"], io = ["d", "stroke", "stroke-width"], no = {
key: 4,
style: { "pointer-events": "none !important" }
}, uo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], yo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], co = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], ho = ["x", "y", "font-size", "fill", "font-weight"], po = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], fo = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], go = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], vo = { key: 5 }, xo = ["x", "y", "font-size", "fill"], mo = ["x", "y", "font-size", "fill"], bo = ["id", "transform", "font-size", "font-weight", "fill"], ko = { key: 6 }, wo = ["x", "y", "font-size", "fill"], _o = ["x", "y", "font-size", "fill"], Mo = ["font-size", "font-weight", "fill", "x", "y"], $o = ["id"], Co = ["x", "y", "width", "height"], zo = { key: 7 }, Ao = ["x1", "x2", "y1", "y2", "stroke-dasharray", "stroke", "stroke-width", "clip-path"], So = ["x", "y", "fill", "font-size", "font-weight"], Lo = {
key: 5,
class: "vue-data-ui-watermark"
}, To = ["onClick"], Bo = {
key: 0,
style: { width: "100%", display: "flex", "align-items": "center", "justify-content": "center" }
}, Oo = {
viewBox: "0 0 20 20",
height: "20",
width: "20",
style: { overflow: "hidden", background: "transparent" }
}, No = { key: 0 }, Po = ["innerHTML"], Wo = {
__name: "vue-ui-scatter",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(Rt, { expose: qt }) {
const { vue_ui_scatter: Ht } = ne(), W = Rt, tt = m(() => !!W.dataset && W.dataset.length), A = p(ue()), Jt = p(null), rt = p(!1), it = p(""), xt = p(0), H = p(null), mt = p(null), bt = p(null), kt = p(null), wt = p(null), _t = p(0), Mt = p(0), $t = p(0), e = m({
get: () => At(),
set: (o) => o
}), { userOptionsVisible: nt, setUserOptionsVisibility: Ct, keepUserOptionState: zt } = Pe({ config: e.value });
function At() {
const o = Gt({
userConfig: W.config,
defaultConfig: Ht
});
return o.theme ? {
...Gt({
userConfig: ye.vue_ui_scatter[o.theme] || W.config,
defaultConfig: o
}),
customPalette: ce[o.theme] || q
} : o;
}
oe(() => W.config, (o) => {
e.value = At(), nt.value = !e.value.showOnChartHover, St(), _t.value += 1, Mt.value += 1, $t.value += 1;
}, { deep: !0 });
const et = p(null);
le(() => {
St();
});
function St() {
if (de(W.dataset) && gt({
componentName: "VueUiScatter",
type: "dataset"
}), e.value.responsive) {
const o = _e(() => {
const { width: i, height: l } = Me({
chart: H.value,
title: e.value.style.title.text ? mt.value : null,
legend: e.value.style.legend.show ? bt.value : null,
source: kt.value,
noTitle: wt.value
});
b.value.width = i, b.value.height = l;
});
et.value = new ResizeObserver(o), et.value.observe(H.value.parentNode);
}
}
se(() => {
et.value && et.value.disconnect();
});
const { isPrinting: Lt, isImaging: Tt, generatePdf: Bt, generateImage: Ot } = Ce({
elementId: `vue-ui-scatter_${A.value}`,
fileName: e.value.style.title.text || "vue-ui-scatter"
}), Kt = m(() => e.value.userOptions.show && !e.value.style.title.text), Nt = m(() => he(e.value.customPalette)), I = p({
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
}), b = p({
height: e.value.style.layout.height,
width: e.value.style.layout.width
}), ot = m(() => e.value.style.layout.marginalBars.show ? e.value.style.layout.marginalBars.size + e.value.style.layout.marginalBars.offset : 0), u = m(() => ({
top: e.value.style.layout.padding.top + ot.value,
right: b.value.width - e.value.style.layout.padding.right - ot.value,
bottom: b.value.height - e.value.style.layout.padding.bottom,
left: e.value.style.layout.padding.left,
height: b.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - ot.value,
width: b.value.width - e.value.style.layout.padding.left - e.value.style.layout.padding.right - ot.value
})), f = m(() => {
W.dataset.forEach((s, y) => {
Et({
datasetObject: s,
requiredAttributes: ["values"]
}).forEach((k) => {
gt({
componentName: "VueUiScatter",
type: "datasetSerieAttribute",
property: k,
index: y
});
}), s.values && s.values.forEach((k, U) => {
Et({
datasetObject: k,
requiredAttributes: ["x", "y"]
}).forEach((K) => {
gt({
componentName: "VueUiScatter",
type: "datasetSerieAttribute",
property: `values.${K}`,
index: `${y} - ${U}`
});
});
});
});
const o = Math.min(...E.value.filter((s) => !x.value.includes(s.id)).flatMap((s) => s.values.map((y) => y.x))), i = Math.max(...E.value.filter((s) => !x.value.includes(s.id)).flatMap((s) => s.values.map((y) => y.x))), l = Math.min(...E.value.filter((s) => !x.value.includes(s.id)).flatMap((s) => s.values.map((y) => y.y))), r = Math.max(...E.value.filter((s) => !x.value.includes(s.id)).flatMap((s) => s.values.map((y) => y.y)));
return { xMin: o >= 0 ? 0 : o, xMax: i, yMin: l >= 0 ? 0 : l, yMax: r };
}), g = m(() => ({
x: u.value.left + Math.abs(f.value.xMin) / (f.value.xMax + Math.abs(f.value.xMin)) * u.value.width,
y: u.value.bottom - Math.abs(f.value.yMin) / (f.value.yMax + Math.abs(f.value.yMin)) * u.value.height
})), E = m(() => W.dataset.map((o, i) => {
const l = `cluster_${A.value}_${i}`;
return {
...o,
values: pe({
data: o.values,
threshold: e.value.downsample.threshold
}),
id: l,
color: o.color ? o.color : Nt.value[i] || q[i] || q[i % q.length],
opacity: x.value.includes(l) ? 0.5 : 1,
shape: o.shape ?? "circle",
segregate: () => It(l),
isSegregated: x.value.includes(l)
};
})), Qt = m(() => ({
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" : ""
})), ut = m(() => E.value.map((o, i) => ({
...o,
plots: o.values.map((l) => ({
x: u.value.left + (l.x + Math.abs(f.value.xMin)) / (f.value.xMax + Math.abs(f.value.xMin)) * u.value.width,
y: u.value.bottom - (l.y + Math.abs(f.value.yMin)) / (f.value.yMax + Math.abs(f.value.yMin)) * u.value.height,
v: {
...l,
name: l.name || ""
},
clusterName: o.name,
color: o.color ? o.color : Nt.value[i] || q[i] || q[i % q.length],
id: `plot_${A.value}_${Math.random()}`,
weight: l.weight ?? e.value.style.layout.plots.radius
}))
})).filter((o) => !x.value.includes(o.id))), S = m(() => ut.value.map((o) => {
const i = o.plots.reduce((v, G) => v + G.x, 0) / o.plots.length, l = o.plots.reduce((v, G) => v + G.y, 0) / o.plots.length;
let r = 0, s = 0, y = 0;
for (const v of o.plots)
r += (v.x - i) * (v.y - l), s += (v.x - i) ** 2, y += (v.y - l) ** 2;
const k = r / Math.sqrt(s * y), U = k * (Math.sqrt(y) / Math.sqrt(s)), K = l - U * i, O = {
x1: u.value.left,
x2: u.value.right,
y1: U * u.value.left + K,
y2: U * u.value.right + K,
coefficient: k
}, $ = (O.y2 - O.y1) / (O.x2 - O.x1), T = O.y1 - $ * O.x1, F = Math.min(b.value.width - e.value.style.layout.padding.right, Math.max(e.value.style.layout.padding.left, (u.value.top - T) / $)), at = {
x: F,
y: $ * F + T <= e.value.style.layout.padding.top ? u.value.top : $ * F + T
};
return {
...o,
correlation: O,
label: at,
plots: o.plots.map((v) => {
const G = (v.x + $ * v.y - $ * T) / (1 + Math.pow($, 2)), dt = ($ * v.x + Math.pow($, 2) * v.y + T) / (1 + Math.pow($, 2)), w = Math.sqrt(Math.pow(v.x - G, 2) + Math.pow(v.y - dt, 2));
return {
...v,
deviation: w,
shape: o.shape,
color: o.color
};
})
};
})), Pt = m(() => Math.max(...S.value.flatMap((o) => o.plots.map((i) => Math.abs(i.deviation)))));
function Zt() {
return S.value;
}
function Wt(o, i) {
const l = Array.isArray(o) ? o.flatMap((w) => w.plots.map((R) => ({
x: R.x,
y: R.y
}))) : o.plots.map((w) => ({
x: w.x,
y: w.y
}));
let r = 1 / 0, s = -1 / 0, y = 1 / 0, k = -1 / 0;
l.forEach(({ x: w, y: R }) => {
r = Math.min(r, w), s = Math.max(s, w), y = Math.min(y, R), k = Math.max(k, R);
});
const U = s - r, K = k - y, O = U / i, $ = K / i, T = Array(i).fill(0), F = Array(i).fill(0);
l.forEach(({ x: w, y: R }) => {
const ht = Math.floor((w - r) / O), pt = Math.floor((R - y) / $);
T[ht] || (T[ht] = 0), F[pt] || (F[pt] = 0), T[ht] += 1, F[pt] += 1;
});
const at = [], v = [];
for (let w = 0; w < i; w += 1)
at.push(r + (w + 0.5) * O), v.push(y + (w + 0.5) * $);
const G = Math.max(...T), dt = Math.max(...F);
return { x: T, y: F, avgX: at, avgY: v, maxX: G, maxY: dt };
}
const D = m(() => e.value.style.layout.marginalBars.tranches), L = m(() => Wt(ut.value, D.value)), te = m(() => {
const o = u.value.top - e.value.style.layout.marginalBars.offset, i = u.value.right + e.value.style.layout.marginalBars.offset;
return ut.value.map((l) => {
const r = Wt(l, D.value);
return {
coords: r,
dX: fe(r.avgX.map((s, y) => ({
x: s,
y: o - r.x[y] / r.maxX * e.value.style.layout.marginalBars.size
}))),
dY: ge(r.avgY.map((s, y) => ({
y: s,
x: i + e.value.style.layout.marginalBars.size * r.y[y] / r.maxY
}))),
color: l.color,
id: l.id
};
});
}), B = p(void 0), c = p(null), yt = p(null);
function Ft(o, i) {
B.value = o.id, c.value = o;
let l = "";
yt.value = {
datapoint: o,
seriesIndex: i,
series: S.value,
config: e.value
};
const r = e.value.style.tooltip.customFormat;
me(r) && be(() => r({
datapoint: o,
seriesIndex: i,
series: S.value,
config: e.value
})) ? it.value = r({
datapoint: o,
seriesIndex: i,
series: S.value,
config: e.value
}) : (o.clusterName && (l += `<div style="display:flex;gap:3px;align-items:center">${o.clusterName}</div>`), o.v.name && (l += `<div>${o.v.name}</div>`), l += `<div style="text-align:left;margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, l += `<div>${e.value.style.layout.dataLabels.xAxis.name}: <b>${isNaN(o.v.x) ? "-" : V(
e.value.style.layout.plots.selectors.labels.x.formatter,
o.v.x,
P({
p: e.value.style.tooltip.prefix,
v: o.v.x,
s: e.value.style.tooltip.suffix,
r: e.value.style.tooltip.roundingValue
}),
{ datapoint: o, seriesIndex: i }
)}</b></div>`, l += `<div>${e.value.style.layout.dataLabels.yAxis.name}: <b>${isNaN(o.v.y) ? "-" : V(
e.value.style.layout.plots.selectors.labels.y.formatter,
o.v.y,
P({
p: e.value.style.tooltip.prefix,
v: o.v.y,
s: e.value.style.tooltip.suffix,
r: e.value.style.tooltip.roundingValue
}),
{ datapoint: o, seriesIndex: i }
)}</b></div>`, l += `${e.value.style.layout.plots.deviation.translation}: <b>${P({
v: o.deviation,
r: e.value.style.layout.plots.deviation.roundingValue
})}</b>`, l += "</div>", it.value = `<div>${l}</div>`), rt.value = !0;
}
function Xt() {
rt.value = !1, B.value = void 0, c.value = null;
}
const x = p([]);
function It(o) {
x.value.includes(o) ? x.value = x.value.filter((i) => i !== o) : x.value.length < W.dataset.length - 1 && x.value.push(o);
}
function Dt() {
ie(() => {
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}`], i = S.value.map((s) => [
s.name,
s.correlation.coefficient,
s.plots.length,
s.plots.map((y) => y.v.x).reduce((y, k) => y + k, 0) / s.plots.length,
s.plots.map((y) => y.v.y).reduce((y, k) => y + k, 0) / s.plots.length
]), l = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([o]).concat(i), r = ke(l);
we({ csvContent: r, title: e.value.style.title.text || "vue-ui-heatmap" });
});
}
const lt = m(() => {
const o = [
e.value.table.translations.series,
e.value.table.translations.correlationCoefficient,
e.value.table.translations.nbrPlots,
`${e.value.style.layout.dataLabels.xAxis.name} ${e.value.table.translations.average}`,
`${e.value.style.layout.dataLabels.yAxis.name} ${e.value.table.translations.average}`
], i = S.value.map((r) => [
{
shape: r.shape,
content: r.name,
color: r.color
},
Number((r.correlation.coefficient ?? 0).toFixed(e.value.table.td.roundingValue)).toLocaleString(),
r.plots.length.toLocaleString(),
Number((r.plots.map((s) => s.v.x ?? 0).reduce((s, y) => s + y, 0) / r.plots.length).toFixed(e.value.table.td.roundingAverage)).toLocaleString(),
Number((r.plots.map((s) => s.v.y ?? 0).reduce((s, y) => s + y, 0) / r.plots.length).toFixed(e.value.table.td.roundingAverage)).toLocaleString()
]), l = {
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: o, body: i, config: l, colNames: o };
}), J = p(!1);
function ee(o) {
J.value = o, xt.value += 1;
}
function Yt() {
I.value.showTable = !I.value.showTable;
}
function jt() {
I.value.showTooltip = !I.value.showTooltip;
}
const st = p(!1);
function ct() {
st.value = !st.value;
}
return qt({
getData: Zt,
generatePdf: Bt,
generateCsv: Dt,
generateImage: Ot,
toggleTable: Yt,
toggleTooltip: jt,
toggleAnnotator: ct
}), (o, i) => (a(), n("div", {
class: Vt(`vue-ui-scatter ${t(J) ? "vue-data-ui-wrapper-fullscreen" : ""} ${t(e).useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "scatterChart",
ref: H,
id: `vue-ui-scatter_${t(A)}`,
style: Y(`font-family:${t(e).style.fontFamily};width:100%; text-align:center;background:${t(e).style.backgroundColor};${t(e).responsive ? "height: 100%" : ""}`),
onMouseenter: i[2] || (i[2] = () => t(Ct)(!0)),
onMouseleave: i[3] || (i[3] = () => t(Ct)(!1))
}, [
t(e).userOptions.buttons.annotator ? (a(), j(Ne, {
key: 0,
parent: t(H),
backgroundColor: t(e).style.backgroundColor,
color: t(e).style.color,
active: t(st),
onClose: ct
}, null, 8, ["parent", "backgroundColor", "color", "active"])) : d("", !0),
t(Kt) ? (a(), n("div", {
key: 1,
ref_key: "noTitle",
ref: wt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : d("", !0),
t(e).style.title.text ? (a(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: mt,
style: "width:100%;background:transparent"
}, [
(a(), j($e, {
key: `title_${t(_t)}`,
config: {
title: {
cy: "scatter-div-title",
...t(e).style.title
},
subtitle: {
cy: "scatter-div-subtitle",
...t(e).style.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : d("", !0),
t(e).userOptions.show && t(tt) && (t(zt) || t(nt)) ? (a(), j(ze, {
ref_key: "details",
ref: Jt,
key: `user_options_${t(xt)}`,
backgroundColor: t(e).style.backgroundColor,
color: t(e).style.color,
isImaging: t(Tt),
isPrinting: t(Lt),
uid: t(A),
hasTooltip: t(e).userOptions.buttons.tooltip && t(e).style.tooltip.show,
hasPdf: t(e).userOptions.buttons.pdf,
hasImg: t(e).userOptions.buttons.img,
hasXls: t(e).userOptions.buttons.csv,
hasTable: t(e).userOptions.buttons.table,
hasFullscreen: t(e).userOptions.buttons.fullscreen,
isTooltip: t(I).showTooltip,
isFullscreen: t(J),
titles: { ...t(e).userOptions.buttonTitles },
chartElement: t(H),
position: t(e).userOptions.position,
hasAnnotator: t(e).userOptions.buttons.annotator,
isAnnotation: t(st),
onToggleFullscreen: ee,
onGeneratePdf: t(Bt),
onGenerateCsv: Dt,
onGenerateImage: t(Ot),
onToggleTable: Yt,
onToggleTooltip: jt,
onToggleAnnotator: ct,
style: Y({
visibility: t(zt) ? t(nt) ? "visible" : "hidden" : "visible"
})
}, ae({ _: 2 }, [
o.$slots.optionTooltip ? {
name: "optionTooltip",
fn: _(() => [
M(o.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "0"
} : void 0,
o.$slots.optionPdf ? {
name: "optionPdf",
fn: _(() => [
M(o.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
o.$slots.optionCsv ? {
name: "optionCsv",
fn: _(() => [
M(o.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
o.$slots.optionImg ? {
name: "optionImg",
fn: _(() => [
M(o.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
o.$slots.optionTable ? {
name: "optionTable",
fn: _(() => [
M(o.$slots, "optionTable", {}, void 0, !0)
]),
key: "4"
} : void 0,
o.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: _(({ toggleFullscreen: l, isFullscreen: r }) => [
M(o.$slots, "optionFullscreen", Q(Z({ toggleFullscreen: l, isFullscreen: r })), void 0, !0)
]),
key: "5"
} : void 0,
o.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: _(({ toggleAnnotator: l, isAnnotator: r }) => [
M(o.$slots, "optionAnnotator", Q(Z({ toggleAnnotator: l, isAnnotator: r })), void 0, !0)
]),
key: "6"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : d("", !0),
t(tt) ? (a(), n("svg", {
key: 4,
xmlns: t(ve),
class: Vt({ "vue-data-ui-fullscreen--on": t(J), "vue-data-ui-fulscreen--off": !t(J) }),
viewBox: `0 0 ${t(b).width <= 0 ? 10 : t(b).width} ${t(b).height <= 0 ? 10 : t(b).height}`,
style: Y(`max-width:100%;overflow:visible;background:transparent;color:${t(e).style.color}`)
}, [
ft(Oe),
o.$slots["chart-background"] ? (a(), n("foreignObject", {
key: 0,
x: 0,
y: 0,
width: t(b).width <= 0 ? 10 : t(b).width,
height: t(b).height <= 0 ? 10 : t(b).height,
style: {
pointerEvents: "none"
}
}, [
M(o.$slots, "chart-background", {}, void 0, !0)
], 8, Ie)) : d("", !0),
t(e).style.layout.axis.show ? (a(), n("g", De, [
h("line", {
x1: t(g).x,
x2: t(g).x,
y1: t(u).top,
y2: t(u).bottom,
stroke: t(e).style.layout.axis.stroke,
"stroke-width": t(e).style.layout.axis.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Ye),
h("line", {
x1: t(u).left,
x2: t(u).right,
y1: t(g).y,
y2: t(g).y,
stroke: t(e).style.layout.axis.stroke,
"stroke-width": t(e).style.layout.axis.strokeWidth,
"stroke-linecap": "round"
}, null, 8, je)
])) : d("", !0),
t(e).style.layout.plots.giftWrap.show ? (a(), n("g", Ve, [
(a(!0), n(N, null, X(t(S), (l, r) => (a(), n("g", null, [
l.plots.length > 2 ? (a(), n("polygon", {
key: 0,
points: t(xe)({ series: l.plots }),
fill: t(vt)(l.color, t(e).style.layout.plots.giftWrap.fillOpacity * 100),
"stroke-width": t(e).style.layout.plots.giftWrap.strokeWidth,
"stroke-dasharray": t(e).style.layout.plots.giftWrap.strokeDasharray,
stroke: l.color,
"stroke-linejoin": "round",
"stroke-linecap": "round"
}, null, 8, Ee)) : d("", !0)
]))), 256))
])) : d("", !0),
(a(!0), n(N, null, X(t(S), (l, r) => (a(), n("g", null, [
!l.shape || l.shape === "circle" ? (a(), n("g", Ue, [
(a(!0), n(N, null, X(l.plots, (s, y) => (a(), n("circle", {
cx: s.x,
cy: s.y,
r: t(B) && t(B) === s.id ? s.weight * 2 : s.weight,
fill: t(vt)(l.color, t(e).style.layout.plots.opacity * 100),
stroke: t(e).style.layout.plots.stroke,
"stroke-width": t(e).style.layout.plots.strokeWidth,
onMouseover: (k) => Ft(s, r),
onMouseleave: Xt,
style: Y(`opacity:${t(B) && t(B) === s.id ? 1 : t(e).style.layout.plots.significance.useDistanceOpacity ? 1 - Math.abs(s.deviation) / t(Pt) : t(e).style.layout.plots.significance.show && Math.abs(s.deviation) > t(e).style.layout.plots.significance.deviationThreshold ? t(e).style.layout.plots.significance.opacity : 1}`)
}, null, 44, Ge))), 256))
])) : (a(), n("g", Re, [
(a(!0), n(N, null, X(l.plots, (s, y) => (a(), j(Ut, {
plot: { x: s.x, y: s.y },
radius: t(B) && t(B) === s.id ? s.weight * 2 : s.weight,
shape: l.shape,
color: t(vt)(l.color, t(e).style.layout.plots.opacity * 100),
stroke: t(e).style.layout.plots.stroke,
strokeWidth: t(e).style.layout.plots.strokeWidth,
onMouseover: (k) => Ft(s, r),
onMouseleave: Xt,
style: Y(`opacity:${t(B) && t(B) === s.id ? 1 : t(e).style.layout.plots.significance.useDistanceOpacity ? 1 - Math.abs(s.deviation) / t(Pt) : t(e).style.layout.plots.significance.show && Math.abs(s.deviation) > t(e).style.layout.plots.significance.deviationThreshold ? t(e).style.layout.plots.significance.opacity : 1}`)
}, null, 8, ["plot", "radius", "shape", "color", "stroke", "strokeWidth", "onMouseover", "style"]))), 256))
]))
]))), 256)),
t(e).style.layout.marginalBars.show ? (a(), n("g", qe, [
h("defs", null, [
h("linearGradient", {
id: `marginal_x_${t(A)}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
h("stop", {
offset: "0%",
"stop-color": t(e).style.layout.marginalBars.fill
}, null, 8, Je),
h("stop", {
offset: "100%",
"stop-color": t(e).style.backgroundColor
}, null, 8, Ke)
], 8, He),
h("linearGradient", {
id: `marginal_y_${t(A)}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%"
}, [
h("stop", {
offset: "0%",
"stop-color": t(e).style.backgroundColor
}, null, 8, Ze),
h("stop", {
offset: "100%",
"stop-color": t(e).style.layout.marginalBars.fill
}, null, 8, to)
], 8, Qe)
]),
(a(!0), n(N, null, X(t(L).x, (l, r) => (a(), n("g", null, [
l && t(L).avgX[r] ? (a(), n("rect", {
key: 0,
x: t(L).avgX[r] - t(u).width / t(D) / 2,
y: t(u).top - t(e).style.layout.marginalBars.offset - l / t(L).maxX * t(e).style.layout.marginalBars.size,
width: t(u).width / t(D) <= 0 ? 1e-4 : t(u).width / t(D),
height: l / t(L).maxX * t(e).style.layout.marginalBars.size <= 0 ? 1e-4 : l / t(L).maxX * t(e).style.layout.marginalBars.size,
fill: t(e).style.layout.marginalBars.useGradient ? `url(#marginal_x_${t(A)})` : t(e).style.layout.marginalBars.fill,
style: Y(`opacity:${t(e).style.layout.marginalBars.opacity}`),
stroke: t(e).style.backgroundColor,
"stroke-width": t(e).style.layout.marginalBars.strokeWidth,
rx: t(e).style.layout.marginalBars.borderRadius
}, null, 12, eo)) : d("", !0)
]))), 256)),
(a(!0), n(N, null, X(t(L).y, (l, r) => (a(), n("g", null, [
l && t(L).avgY[r] ? (a(), n("rect", {
key: 0,
x: t(u).right + t(e).style.layout.marginalBars.offset,
y: t(L).avgY[r] - t(u).height / t(D) / 2,
height: t(u).height / t(D) <= 0 ? 1e-4 : t(u).height / t(D),
width: l / t(L).maxY * t(e).style.layout.marginalBars.size <= 0 ? 1e-4 : l / t(L).maxY * t(e).style.layout.marginalBars.size,
fill: t(e).style.layout.marginalBars.useGradient ? `url(#marginal_y_${t(A)})` : t(e).style.layout.marginalBars.fill,
style: Y(`opacity:${t(e).style.layout.marginalBars.opacity}`),
stroke: t(e).style.backgroundColor,
"stroke-width": t(e).style.layout.marginalBars.strokeWidth,
rx: t(e).style.layout.marginalBars.borderRadius
}, null, 12, oo)) : d("", !0)
]))), 256)),
t(e).style.layout.marginalBars.showLines ? (a(), n("g", lo, [
(a(!0), n(N, null, X(t(te), (l) => (a(), n(N, null, [
t(x).includes(l.id) ? d("", !0) : (a(), n("path", {
key: 0,
d: `M ${l.dX}`,
stroke: t(e).style.backgroundColor,
"stroke-width": t(e).style.layout.marginalBars.linesStrokeWidth + 1,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, so)),
t(x).includes(l.id) ? d("", !0) : (a(), n("path", {
key: 1,
d: `M ${l.dX}`,
stroke: l.color,
"stroke-width": t(e).style.layout.marginalBars.linesStrokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, ao)),
t(x).includes(l.id) ? d("", !0) : (a(), n("path", {
key: 2,
d: `M ${l.dY}`,
stroke: t(e).style.backgroundColor,
"stroke-width": t(e).style.layout.marginalBars.linesStrokeWidth + 1,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, ro)),
t(x).includes(l.id) ? d("", !0) : (a(), n("path", {
key: 3,
d: `M ${l.dY}`,
stroke: l.color,
"stroke-width": t(e).style.layout.marginalBars.linesStrokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, io))
], 64))), 256))
])) : d("", !0)
])) : d("", !0),
t(c) && t(e).style.layout.plots.selectors.show ? (a(), n("g", no, [
h("line", {
x1: t(g).x,
x2: t(c).x,
y1: t(c).y,
y2: t(c).y,
stroke: t(e).style.layout.plots.selectors.stroke,
"stroke-width": t(e).style.layout.plots.selectors.strokeWidth,
"stroke-dasharray": t(e).style.layout.plots.selectors.strokeDasharray,
"stroke-linecap": "round",
class: "line-pointer"
}, null, 8, uo),
h("line", {
x1: t(c).x,
x2: t(c).x,
y1: t(g).y,
y2: t(c).y,
stroke: t(e).style.layout.plots.selectors.stroke,
"stroke-width": t(e).style.layout.plots.selectors.strokeWidth,
"stroke-dasharray": t(e).style.layout.plots.selectors.strokeDasharray,
"stroke-linecap": "round",
class: "line-pointer"
}, null, 8, yo),
h("text", {
x: t(g).x + (t(c).x > t(g).x ? -6 : 6),
y: t(c).y + t(e).style.layout.plots.selectors.labels.fontSize / 3,
"font-size": t(e).style.layout.plots.selectors.labels.fontSize,
fill: t(e).style.layout.plots.selectors.labels.color,
"font-weight": t(e).style.layout.plots.selectors.labels.bold ? "bold" : "normal",
"text-anchor": t(c).x > t(g).x ? "end" : "start"
}, C(t(V)(
t(e).style.layout.plots.selectors.labels.y.formatter,
t(z)(t(c).v.y),
t(P)({
p: t(e).style.layout.plots.selectors.labels.prefix,
v: t(z)(t(c).v.y),
s: t(e).style.layout.plots.selectors.labels.suffix,
r: t(e).style.layout.plots.selectors.labels.rounding
}),
{ datapoint: t(c) }
)), 9, co),
h("text", {
x: t(c).x,
y: t(g).y + (t(c).y > t(g).y ? -6 : t(e).style.layout.plots.selectors.labels.fontSize + 6),
"font-size": t(e).style.layout.plots.selectors.labels.fontSize,
fill: t(e).style.layout.plots.selectors.labels.color,
"font-weight": t(e).style.layout.plots.selectors.labels.bold ? "bold" : "normal",
"text-anchor": "middle"
}, C(t(V)(
t(e).style.layout.plots.selectors.labels.y.formatter,
t(z)(t(c).v.x),
t(P)({
p: t(e).style.layout.plots.selectors.labels.prefix,
v: t(z)(t(c).v.x),
s: t(e).style.layout.plots.selectors.labels.suffix,
r: t(e).style.layout.plots.selectors.labels.rounding
}),
{ datapoint: t(c) }
)), 9, ho),
h("circle", {
cx: t(g).x,
cy: t(c).y,
r: t(e).style.layout.plots.selectors.markers.radius,
fill: t(e).style.layout.plots.selectors.markers.fill,
stroke: t(e).style.layout.plots.selectors.markers.stroke,
"stroke-width": t(e).style.layout.plots.selectors.markers.strokeWidth,
class: "line-pointer"
}, null, 8, po),
h("circle", {
cx: t(c).x,
cy: t(g).y,
r: t(e).style.layout.plots.selectors.markers.radius,
fill: t(e).style.layout.plots.selectors.markers.fill,
stroke: t(e).style.layout.plots.selectors.markers.stroke,
"stroke-width": t(e).style.layout.plots.selectors.markers.strokeWidth,
class: "line-pointer"
}, null, 8, fo),
t(e).style.layout.plots.selectors.labels.showName ? (a(), n("text", {
key: 0,
x: t(c).x,
y: t(c).y + (t(c).y < t(g).y ? -t(e).style.layout.plots.selectors.labels.fontSize / 2 : t(e).style.layout.plots.selectors.labels.fontSize),
"font-size": t(e).style.layout.plots.selectors.labels.fontSize,
fill: t(e).style.layout.plots.selectors.labels.color,
"font-weight": t(e).style.layout.plots.selectors.labels.bold ? "bold" : "normal",
"text-anchor": t(c).x < t(u).left + 100 ? "start" : t(c).x > t(u).right - 100 ? "end" : t(c).x > t(g).x ? "start" : "end"
}, C(t(c).v.name), 9, go)) : d("", !0)
])) : d("", !0),
t(e).style.layout.dataLabels.xAxis.show ? (a(), n("g", vo, [
h("text", {
x: t(u).left - 5,
y: t(g).y + t(e).style.layout.dataLabels.xAxis.fontSize / 3,
"text-anchor": "end",
"font-size": t(e).style.layout.dataLabels.xAxis.fontSize,
fill: t(e).style.layout.dataLabels.xAxis.color
}, C(t(V)(
t(e).style.layout.plots.selectors.labels.x.formatter,
t(z)(t(f).xMin),
t(P)({
p: t(e).style.layout.plots.selectors.labels.prefix,
v: t(z)(t(f).xMin),
s: t(e).style.layout.plots.selectors.labels.suffix,
r: t(e).style.layout.dataLabels.xAxis.rounding
})
)), 9, xo),
h("text", {
x: t(u).right + 3,
y: t(g).y + t(e).style.layout.dataLabels.xAxis.fontSize / 3,
"text-anchor": "start",
"font-size": t(e).style.layout.dataLabels.xAxis.fontSize,
fill: t(e).style.layout.dataLabels.xAxis.color
}, C(t(V)(
t(e).style.layout.plots.selectors.labels.x.formatter,
t(z)(t(f).xMax),
t(P)({
p: t(e).style.layout.plots.selectors.labels.prefix,
v: t(z)(t(f).xMax),
s: t(e).style.layout.plots.selectors.labels.suffix,
r: t(e).style.layout.dataLabels.xAxis.rounding
})
)), 9, mo),
h("text", {
id: `vue-ui-scatter-xAxis-label-${t(A)}`,
transform: `translate(${t(e).style.layout.dataLabels.xAxis.fontSize * 2}, ${t(u).top + t(u).height / 2}), rotate(-90)`,
"text-anchor": "middle",
"font-size": t(e).style.layout.dataLabels.xAxis.fontSize,
"font-weight": t(e).style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
fill: t(e).style.layout.dataLabels.xAxis.color
}, C(t(e).style.layout.dataLabels.xAxis.name), 9, bo)
])) : d("", !0),
t(e).style.layout.dataLabels.yAxis.show ? (a(), n("g", ko, [
h("text", {
x: t(g).x,
y: t(u).bottom + t(e).style.layout.dataLabels.yAxis.fontSize + 3,
"text-anchor": "middle",
"font-size": t(e).style.layout.dataLabels.yAxis.fontSize,
fill: t(e).style.layout.dataLabels.yAxis.color
}, C(t(V)(
t(e).style.layout.plots.selectors.labels.y.formatter,
t(z)(t(f).yMin),
t(P)({
p: t(e).style.layout.plots.selectors.labels.prefix,
v: t(z)(t(f).yMin),
s: t(e).style.layout.plots.selectors.labels.suffix,
r: t(e).style.layout.dataLabels.yAxis.rounding
})
)), 9, wo),
h("text", {
x: t(g).x,
y: t(u).top - t(e).style.layout.dataLabels.yAxis.fontSize / 2,
"text-anchor": "middle",
"font-size": t(e).style.layout.dataLabels.yAxis.fontSize,
fill: t(e).style.layout.dataLabels.yAxis.color
}, C(t(V)(
t(e).style.layout.plots.selectors.labels.y.formatter,
t(z)(t(f).yMax),
t(P)({
p: t(e).style.layout.plots.selectors.labels.prefix,
v: t(z)(t(f).yMax),
s: t(e).style.layout.plots.selectors.labels.suffix,
r: t(e).style.layout.dataLabels.yAxis.rounding
})
)), 9, _o),
h("text", {
"text-anchor": "middle",
"font-size": t(e).style.layout.dataLabels.yAxis.fontSize,
"font-weight": t(e).style.layout.dataLabels.yAxis.bold ? "bold" : "normal",
fill: t(e).style.layout.dataLabels.yAxis.color,
x: t(u).left + t(u).width / 2,
y: t(u).bottom + 8 + t(e).style.layout.dataLabels.yAxis.fontSize * 2
}, C(t(e).style.layout.dataLabels.yAxis.name), 9, Mo)
])) : d("", !0),
h("clipPath", {
id: `clip_path_${t(A)}`
}, [
h("rect", {
x: t(u).left,
y: t(u).top,
width: t(u).width <= 0 ? 1e-4 : t(u).width,
height: t(u).height <= 0 ? 1e-4 : t(u).height
}, null, 8, Co)
], 8, $o),
t(e).style.layout.correlation.show ? (a(), n("g", zo, [
(a(!0), n(N, null, X(t(S), (l, r) => (a(), n("line", {
x1: l.correlation.x1,
x2: l.correlation.x2,
y1: l.correlation.y1,
y2: l.correlation.y2,
"stroke-dasharray": t(e).style.layout.correlation.strokeDasharray,
stroke: l.color,
"stroke-width": t(e).style.layout.correlation.strokeWidth,
"clip-path": `url(#clip_path_${t(A)})`
}, null, 8, Ao))), 256)),
(a(!0), n(N, null, X(t(S), (l, r) => (a(), n("g", null, [
t(e).style.layout.correlation.label.show ? (a(), n("text", {
key: 0,
x: l.label.x,
y: l.label.y,
fill: t(e).style.layout.correlation.label.useSerieColor ? l.color : t(e).style.layout.correlation.label.color,
"font-size": t(e).style.layout.correlation.label.fontSize,
"font-weight": t(e).style.layout.correlation.label.bold ? "bold" : "normal"
}, C(t(P)({
v: t(z)(l.correlation.coefficient),
r: t(e).style.layout.correlation.label.roundingValue
})), 9, So)) : d("", !0)
]))), 256))
])) : d("", !0),
M(o.$slots, "svg", { svg: t(b) }, void 0, !0)
], 14, Xe)) : d("", !0),
o.$slots.watermark ? (a(), n("div", Lo, [
M(o.$slots, "watermark", Q(Z({ isPrinting: t(Lt) || t(Tt) })), void 0, !0)
])) : d("", !0),
t(tt) ? d("", !0) : (a(), j(Te, {
key: 6,
config: {
type: "quadrant",
style: {
backgroundColor: t(e).style.backgroundColor,
quadrant: {
grid: {
color: t(e).style.layout.axis.stroke
},
plots: {
color: t(e).style.layout.axis.stroke,
radius: 1
}
}
}
}
}, null, 8, ["config"])),
h("div", {
ref_key: "chartLegend",
ref: bt
}, [
t(e).style.legend.show ? (a(), j(Se, {
key: `legend_${t($t)}`,
legendSet: t(E),
config: t(Qt),
onClickMarker: i[0] || (i[0] = ({ legend: l }) => It(l.id))
}, {
item: _(({ legend: l }) => [
h("div", {
onClick: (r) => l.segregate(),
style: Y(`opacity:${t(x).includes(l.id) ? 0.5 : 1}`)
}, C(l.name), 13, To)
]),
_: 1
}, 8, ["legendSet", "config"])) : M(o.$slots, "legend", {
key: 1,
legend: t(E)
}, void 0, !0)
], 512),
o.$slots.source ? (a(), n("div", {
key: 7,
ref_key: "source",
ref: kt,
dir: "auto"
}, [
M(o.$slots, "source", {}, void 0, !0)
], 512)) : d("", !0),
ft(Ae, {
show: t(I).showTooltip && t(rt),
backgroundColor: t(e).style.tooltip.backgroundColor,
color: t(e).style.tooltip.color,
borderRadius: t(e).style.tooltip.borderRadius,
borderColor: t(e).style.tooltip.borderColor,
borderWidth: t(e).style.tooltip.borderWidth,
fontSize: t(e).style.tooltip.fontSize,
backgroundOpacity: t(e).style.tooltip.backgroundOpacity,
position: t(e).style.tooltip.position,
offsetY: t(e).style.tooltip.offsetY,
parent: t(H),
content: t(it),
isFullscreen: t(J),
isCustom: t(e).style.tooltip.customFormat && typeof t(e).style.tooltip.customFormat == "function"
}, {
"tooltip-before": _(() => [
M(o.$slots, "tooltip-before", Q(Z({ ...t(yt) })), void 0, !0)
]),
"tooltip-after": _(() => [
M(o.$slots, "tooltip-after", Q(Z({ ...t(yt) })), void 0, !0)
]),
default: _(() => [
t(e).style.tooltip.showShape ? (a(), n("div", Bo, [
(a(), n("svg", Oo, [
ft(Ut, {
shape: t(c).shape,
color: t(c).color,
plot: { x: 10, y: 10 },
radius: 7
}, null, 8, ["shape", "color"])
]))
])) : d("", !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
t(tt) ? (a(), j(Be, {
key: 8,
hideDetails: "",
config: {
open: t(I).showTable,
maxHeight: 1e4,
body: {
backgroundColor: t(e).style.backgroundColor,
color: t(e).style.color
},
head: {
backgroundColor: t(e).style.backgroundColor,
color: t(e).style.color
}
}
}, {
content: _(() => [
(a(), j(Le, {
key: `table_${t(Mt)}`,
colNames: t(lt).colNames,
head: t(lt).head,
body: t(lt).body,
config: t(lt).config,
title: `${t(e).style.title.text}${t(e).style.title.subtitle.text ? ` : ${t(e).style.title.subtitle.text}` : ""}`,
onClose: i[1] || (i[1] = (l) => t(I).showTable = !1)
}, {
th: _(({ th: l }) => [
re(C(l), 1)
]),
td: _(({ td: l }) => [
l.shape ? (a(), n("div", No, [
h("span", null, C(l.content), 1)
])) : (a(), n("div", {
key: 1,
innerHTML: l
}, null, 8, Po))
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : d("", !0)
], 46, Fe));
}
}, Zo = /* @__PURE__ */ We(Wo, [["__scopeId", "data-v-b497363e"]]);
export {
Zo as default
};