vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,046 lines (1,045 loc) • 48.3 kB
JavaScript
import { defineAsyncComponent as Z, computed as b, ref as h, watch as ht, shallowRef as Ge, onMounted as pt, onBeforeUnmount as ft, createElementBlock as r, openBlock as s, unref as u, normalizeStyle as j, normalizeClass as qe, createBlock as E, createCommentVNode as c, createElementVNode as d, createVNode as ge, createSlots as gt, withCtx as _, renderSlot as M, normalizeProps as te, guardReactiveProps as le, Fragment as W, renderList as Y, toDisplayString as C, createTextVNode as mt, nextTick as xt } from "vue";
import { u as bt, c as kt, t as wt, p as J, a as _t, o as Mt, e as me, b as $t, g as He, Y as Ct, a1 as At, V as St, X as zt, s as xe, Z as Tt, i as U, v as A, f as F, q as Lt, r as Bt, x as Ot, y as Nt } from "./index-BLtEpj8j.js";
import { t as Pt, u as Wt } from "./useResponsive-DfdjqQps.js";
import { u as Ze } from "./useNestedProp-Bw1KcAmj.js";
import { u as Ft } from "./usePrinter-DnRwTdvS.js";
import { u as It } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Xt } from "./useChartAccessibility-9icAAmYg.js";
import Yt from "./Legend-E7G897sw.js";
import Dt from "./Title-DkG60EPg.js";
import { _ as Je } from "./Shape-Cqnzky8X.js";
import Rt from "./img-D-vWHxhM.js";
import { _ as Vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const jt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["width", "height"], Gt = { key: 1 }, qt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ht = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Zt = { key: 2 }, Jt = ["points", "fill", "stroke-width", "stroke-dasharray", "stroke"], Kt = { key: 0 }, Qt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onMouseover"], el = { key: 1 }, tl = { key: 3 }, ll = ["id"], al = ["stop-color"], ol = ["stop-color"], sl = ["id"], ul = ["stop-color"], il = ["stop-color"], rl = ["x", "y", "width", "height", "fill", "stroke", "stroke-width", "rx"], nl = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], vl = { key: 0 }, yl = ["d", "stroke", "stroke-width"], cl = ["d", "stroke", "stroke-width"], dl = ["d", "stroke", "stroke-width"], hl = ["d", "stroke", "stroke-width"], pl = {
key: 4,
style: { "pointer-events": "none !important" }
}, fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], gl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ml = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], xl = ["x", "y", "font-size", "fill", "font-weight"], bl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], kl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], wl = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], _l = { key: 5 }, Ml = ["x", "y", "font-size", "fill"], $l = ["x", "y", "font-size", "fill"], Cl = ["id", "transform", "font-size", "font-weight", "fill"], Al = { key: 6 }, Sl = ["x", "y", "font-size", "fill"], zl = ["x", "y", "font-size", "fill"], Tl = ["font-size", "font-weight", "fill", "x", "y"], Ll = ["id"], Bl = ["x", "y", "width", "height"], Ol = { key: 7 }, Nl = ["x1", "x2", "y1", "y2", "stroke-dasharray", "stroke", "stroke-width", "clip-path"], Pl = ["x", "y", "fill", "font-size", "font-weight"], Wl = {
key: 5,
class: "vue-data-ui-watermark"
}, Fl = ["onClick"], Il = {
key: 0,
style: { width: "100%", display: "flex", "align-items": "center", "justify-content": "center" }
}, Xl = {
viewBox: "0 0 20 20",
height: "20",
width: "20",
style: { overflow: "hidden", background: "transparent" }
}, Yl = { key: 0 }, Dl = ["innerHTML"], Rl = {
__name: "vue-ui-scatter",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(Ke, { expose: Qe }) {
const et = Z(() => import("./vue-ui-accordion-B6Svdk-2.js")), tt = Z(() => import("./DataTable-CS_V_Adx.js")), lt = Z(() => import("./PackageVersion-CnRyWKP-.js")), at = Z(() => import("./PenAndPaper-7BWf7zgA.js")), ot = Z(() => import("./vue-ui-skeleton-CsMU8DwQ.js")), st = Z(() => import("./Tooltip-CuHsd1IQ.js")), ut = Z(() => import("./UserOptions-DGw0HvSp.js")), { vue_ui_scatter: it } = bt(), I = Ke, ae = b(() => !!I.dataset && I.dataset.length), S = h(kt()), rt = h(null), re = h(!1), ne = h(""), be = h(0), D = h(null), ke = h(null), we = h(null), _e = h(null), Me = h(null), $e = h(0), Ce = h(0), Ae = h(0), x = h([]), e = b({
get: () => Le(),
set: (t) => t
}), { userOptionsVisible: ve, setUserOptionsVisibility: Se, keepUserOptionState: ze } = It({ config: e.value }), { svgRef: Te } = Xt({ config: e.value.style.title });
function Le() {
const t = Ze({
userConfig: I.config,
defaultConfig: it
});
return t.theme ? {
...Ze({
userConfig: _t.vue_ui_scatter[t.theme] || I.config,
defaultConfig: t
}),
customPalette: wt[t.theme] || J
} : t;
}
ht(() => I.config, (t) => {
e.value = Le(), ve.value = !e.value.userOptions.showOnChartHover, Be(), $e.value += 1, Ce.value += 1, Ae.value += 1, O.value.showTable = e.value.table.show, O.value.showTooltip = e.value.style.tooltip.show;
}, { deep: !0 });
const R = Ge(null), K = Ge(null);
pt(() => {
Be();
});
function Be() {
if (Mt(I.dataset) && me({
componentName: "VueUiScatter",
type: "dataset"
}), e.value.responsive) {
const t = Pt(() => {
const { width: i, height: l } = Wt({
chart: D.value,
title: e.value.style.title.text ? ke.value : null,
legend: e.value.style.legend.show ? we.value : null,
source: _e.value,
noTitle: Me.value
});
requestAnimationFrame(() => {
k.value.width = i, k.value.height = l;
});
});
R.value && (K.value && R.value.unobserve(K.value), R.value.disconnect()), R.value = new ResizeObserver(t), K.value = D.value.parentNode, R.value.observe(K.value);
}
}
ft(() => {
R.value && (K.value && R.value.unobserve(K.value), R.value.disconnect());
});
const { isPrinting: Oe, isImaging: Ne, generatePdf: Pe, generateImage: We } = Ft({
elementId: `vue-ui-scatter_${S.value}`,
fileName: e.value.style.title.text || "vue-ui-scatter",
options: e.value.userOptions.print
}), nt = b(() => e.value.userOptions.show && !e.value.style.title.text), Fe = b(() => $t(e.value.customPalette)), O = h({
showTable: e.value.table.show,
showTooltip: e.value.style.tooltip.show
}), k = h({
height: e.value.style.layout.height,
width: e.value.style.layout.width
}), oe = b(() => e.value.style.layout.marginalBars.show ? e.value.style.layout.marginalBars.size + e.value.style.layout.marginalBars.offset : 0), n = b(() => ({
top: e.value.style.layout.padding.top + oe.value,
right: k.value.width - e.value.style.layout.padding.right - oe.value,
bottom: k.value.height - e.value.style.layout.padding.bottom,
left: e.value.style.layout.padding.left,
height: k.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - oe.value,
width: k.value.width - e.value.style.layout.padding.left - e.value.style.layout.padding.right - oe.value
})), p = b(() => {
I.dataset.forEach((a, v) => {
He({
datasetObject: a,
requiredAttributes: ["values"]
}).forEach((f) => {
me({
componentName: "VueUiScatter",
type: "datasetSerieAttribute",
property: f,
index: v
});
}), a.values && a.values.forEach((f, L) => {
He({
datasetObject: f,
requiredAttributes: ["x", "y"]
}).forEach((ee) => {
me({
componentName: "VueUiScatter",
type: "datasetSerieAttribute",
property: `values.${ee}`,
index: `${v} - ${L}`
});
});
});
});
const t = Math.min(...G.value.filter((a) => !x.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.x))), i = Math.max(...G.value.filter((a) => !x.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.x))), l = Math.min(...G.value.filter((a) => !x.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.y))), o = Math.max(...G.value.filter((a) => !x.value.includes(a.id)).flatMap((a) => a.values.map((v) => v.y)));
return { xMin: t >= 0 ? 0 : t, xMax: i, yMin: l >= 0 ? 0 : l, yMax: o };
}), g = b(() => ({
x: n.value.left + Math.abs(p.value.xMin) / (p.value.xMax + Math.abs(p.value.xMin)) * n.value.width,
y: n.value.bottom - Math.abs(p.value.yMin) / (p.value.yMax + Math.abs(p.value.yMin)) * n.value.height
})), G = b(() => I.dataset.map((t, i) => {
const l = `cluster_${S.value}_${i}`;
return {
...t,
values: Ct({
data: t.values,
threshold: e.value.downsample.threshold
}),
id: l,
color: t.color ? t.color : Fe.value[i] || J[i] || J[i % J.length],
opacity: x.value.includes(l) ? 0.5 : 1,
shape: t.shape ?? "circle",
segregate: () => Re(l),
isSegregated: x.value.includes(l)
};
})), vt = b(() => ({
cy: "scatter-div-legend",
backgroundColor: e.value.style.legend.backgroundColor,
color: e.value.style.legend.color,
fontSize: e.value.style.legend.fontSize,
paddingBottom: 12,
fontWeight: e.value.style.legend.bold ? "bold" : ""
})), ye = b(() => G.value.map((t, i) => ({
...t,
plots: t.values.map((l) => ({
x: n.value.left + (l.x + Math.abs(p.value.xMin)) / (p.value.xMax + Math.abs(p.value.xMin)) * n.value.width,
y: n.value.bottom - (l.y + Math.abs(p.value.yMin)) / (p.value.yMax + Math.abs(p.value.yMin)) * n.value.height,
v: {
...l,
name: l.name || ""
},
clusterName: t.name,
color: t.color ? t.color : Fe.value[i] || J[i] || J[i % J.length],
id: `plot_${S.value}_${Math.random()}`,
weight: l.weight ?? e.value.style.layout.plots.radius
}))
})).filter((t) => !x.value.includes(t.id))), z = b(() => ye.value.map((t) => {
const i = t.plots.reduce((m, q) => m + q.x, 0) / t.plots.length, l = t.plots.reduce((m, q) => m + q.y, 0) / t.plots.length;
let o = 0, a = 0, v = 0;
for (const m of t.plots)
o += (m.x - i) * (m.y - l), a += (m.x - i) ** 2, v += (m.y - l) ** 2;
const f = o / Math.sqrt(a * v), L = f * (Math.sqrt(v) / Math.sqrt(a)), ee = l - L * i, P = {
x1: n.value.left,
x2: n.value.right,
y1: L * n.value.left + ee,
y2: L * n.value.right + ee,
coefficient: f
}, $ = (P.y2 - P.y1) / (P.x2 - P.x1), B = P.y1 - $ * P.x1, X = Math.min(k.value.width - e.value.style.layout.padding.right, Math.max(e.value.style.layout.padding.left, (n.value.top - B) / $)), ie = {
x: X,
y: $ * X + B <= e.value.style.layout.padding.top ? n.value.top : $ * X + B
};
return {
...t,
correlation: P,
label: ie,
plots: t.plots.map((m) => {
const q = (m.x + $ * m.y - $ * B) / (1 + Math.pow($, 2)), he = ($ * m.x + Math.pow($, 2) * m.y + B) / (1 + Math.pow($, 2)), w = Math.sqrt(Math.pow(m.x - q, 2) + Math.pow(m.y - he, 2));
return {
...m,
deviation: w,
shape: t.shape,
color: t.color
};
})
};
})), Ie = b(() => Math.max(...z.value.flatMap((t) => t.plots.map((i) => Math.abs(i.deviation)))));
function yt() {
return z.value;
}
function Xe(t, i) {
const l = Array.isArray(t) ? t.flatMap((w) => w.plots.map((H) => ({
x: H.x,
y: H.y
}))) : t.plots.map((w) => ({
x: w.x,
y: w.y
}));
let o = 1 / 0, a = -1 / 0, v = 1 / 0, f = -1 / 0;
l.forEach(({ x: w, y: H }) => {
o = Math.min(o, w), a = Math.max(a, w), v = Math.min(v, H), f = Math.max(f, H);
});
const L = a - o, ee = f - v, P = L / i, $ = ee / i, B = Array(i).fill(0), X = Array(i).fill(0);
l.forEach(({ x: w, y: H }) => {
const pe = Math.floor((w - o) / P), fe = Math.floor((H - v) / $);
B[pe] || (B[pe] = 0), X[fe] || (X[fe] = 0), B[pe] += 1, X[fe] += 1;
});
const ie = [], m = [];
for (let w = 0; w < i; w += 1)
ie.push(o + (w + 0.5) * P), m.push(v + (w + 0.5) * $);
const q = Math.max(...B), he = Math.max(...X);
return { x: B, y: X, avgX: ie, avgY: m, maxX: q, maxY: he };
}
const V = b(() => e.value.style.layout.marginalBars.tranches), T = b(() => Xe(ye.value, V.value)), ct = b(() => {
const t = n.value.top - e.value.style.layout.marginalBars.offset, i = n.value.right + e.value.style.layout.marginalBars.offset;
return ye.value.map((l) => {
const o = Xe(l, V.value);
return {
coords: o,
dX: St(o.avgX.map((a, v) => ({
x: a,
y: t - o.x[v] / o.maxX * e.value.style.layout.marginalBars.size
}))),
dY: At(o.avgY.map((a, v) => ({
y: a,
x: i + e.value.style.layout.marginalBars.size * o.y[v] / o.maxY
}))),
color: l.color,
id: l.id
};
});
}), N = h(void 0), y = h(null), ce = h(null);
function Ye(t, i) {
N.value = t.id, y.value = t;
let l = "";
ce.value = {
datapoint: t,
seriesIndex: i,
series: z.value,
config: e.value
};
const o = e.value.style.tooltip.customFormat;
Ot(o) && Nt(() => o({
datapoint: t,
seriesIndex: i,
series: z.value,
config: e.value
})) ? ne.value = o({
datapoint: t,
seriesIndex: i,
series: z.value,
config: e.value
}) : (t.clusterName && (l += `<div style="display:flex;gap:3px;align-items:center">${t.clusterName}</div>`), t.v.name && (l += `<div>${t.v.name}</div>`), l += `<div style="text-align:left;margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, l += `<div>${e.value.style.layout.dataLabels.xAxis.name}: <b>${isNaN(t.v.x) ? "-" : U(
e.value.style.layout.plots.selectors.labels.x.formatter,
t.v.x,
F({
p: e.value.style.tooltip.prefix,
v: t.v.x,
s: e.value.style.tooltip.suffix,
r: e.value.style.tooltip.roundingValue
}),
{ datapoint: t, seriesIndex: i }
)}</b></div>`, l += `<div>${e.value.style.layout.dataLabels.yAxis.name}: <b>${isNaN(t.v.y) ? "-" : U(
e.value.style.layout.plots.selectors.labels.y.formatter,
t.v.y,
F({
p: e.value.style.tooltip.prefix,
v: t.v.y,
s: e.value.style.tooltip.suffix,
r: e.value.style.tooltip.roundingValue
}),
{ datapoint: t, seriesIndex: i }
)}</b></div>`, l += `${e.value.style.layout.plots.deviation.translation}: <b>${F({
v: t.deviation,
r: e.value.style.layout.plots.deviation.roundingValue
})}</b>`, l += "</div>", ne.value = `<div>${l}</div>`), re.value = !0;
}
function De() {
re.value = !1, N.value = void 0, y.value = null;
}
function Re(t) {
x.value.includes(t) ? x.value = x.value.filter((i) => i !== t) : x.value.length < I.dataset.length - 1 && x.value.push(t);
}
function Ve(t = null) {
xt(() => {
const i = ["", e.value.table.translations.correlationCoefficient, e.value.table.translations.nbrPlots, `${e.value.style.layout.dataLabels.xAxis.name} ${e.value.table.translations.average}`, `${e.value.style.layout.dataLabels.yAxis.name} ${e.value.table.translations.average}`], l = z.value.map((v) => [
v.name,
v.correlation.coefficient,
v.plots.length,
v.plots.map((f) => f.v.x).reduce((f, L) => f + L, 0) / v.plots.length,
v.plots.map((f) => f.v.y).reduce((f, L) => f + L, 0) / v.plots.length
]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([i]).concat(l), a = Lt(o);
t ? t(a) : Bt({ csvContent: a, title: e.value.style.title.text || "vue-ui-heatmap" });
});
}
const se = b(() => {
const t = [
e.value.table.translations.series,
e.value.table.translations.correlationCoefficient,
e.value.table.translations.nbrPlots,
`${e.value.style.layout.dataLabels.xAxis.name} ${e.value.table.translations.average}`,
`${e.value.style.layout.dataLabels.yAxis.name} ${e.value.table.translations.average}`
], i = z.value.map((o) => [
{
shape: o.shape,
content: o.name,
color: o.color
},
Number((o.correlation.coefficient ?? 0).toFixed(e.value.table.td.roundingValue)).toLocaleString(),
o.plots.length.toLocaleString(),
Number((o.plots.map((a) => a.v.x ?? 0).reduce((a, v) => a + v, 0) / o.plots.length).toFixed(e.value.table.td.roundingAverage)).toLocaleString(),
Number((o.plots.map((a) => a.v.y ?? 0).reduce((a, v) => a + v, 0) / o.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: t, body: i, config: l, colNames: t };
}), Q = h(!1);
function je(t) {
Q.value = t, be.value += 1;
}
function Ee() {
O.value.showTable = !O.value.showTable;
}
function Ue() {
O.value.showTooltip = !O.value.showTooltip;
}
const ue = h(!1);
function de() {
ue.value = !ue.value;
}
async function dt({ scale: t = 2 } = {}) {
if (!D.value) return;
const { width: i, height: l } = D.value.getBoundingClientRect(), o = i / l, { imageUri: a, base64: v } = await Rt({ domElement: D.value, base64: !0, img: !0, scale: t });
return {
imageUri: a,
base64: v,
title: e.value.style.title.text,
width: i,
height: l,
aspectRatio: o
};
}
return Qe({
getData: yt,
getImage: dt,
generatePdf: Pe,
generateCsv: Ve,
generateImage: We,
toggleTable: Ee,
toggleTooltip: Ue,
toggleAnnotator: de,
toggleFullscreen: je
}), (t, i) => (s(), r("div", {
class: qe(`vue-ui-scatter ${Q.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "scatterChart",
ref: D,
id: `vue-ui-scatter_${S.value}`,
style: j(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: i[2] || (i[2] = () => u(Se)(!0)),
onMouseleave: i[3] || (i[3] = () => u(Se)(!1))
}, [
e.value.userOptions.buttons.annotator ? (s(), E(u(at), {
key: 0,
svgRef: u(Te),
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
active: ue.value,
onClose: de
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : c("", !0),
nt.value ? (s(), r("div", {
key: 1,
ref_key: "noTitle",
ref: Me,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : c("", !0),
e.value.style.title.text ? (s(), r("div", {
key: 2,
ref_key: "chartTitle",
ref: ke,
style: "width:100%;background:transparent"
}, [
(s(), E(Dt, {
key: `title_${$e.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)) : c("", !0),
e.value.userOptions.show && ae.value && (u(ze) || u(ve)) ? (s(), E(u(ut), {
ref_key: "details",
ref: rt,
key: `user_options_${be.value}`,
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
isImaging: u(Ne),
isPrinting: u(Oe),
uid: S.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: O.value.showTooltip,
isFullscreen: Q.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: D.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: ue.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: je,
onGeneratePdf: u(Pe),
onGenerateCsv: Ve,
onGenerateImage: u(We),
onToggleTable: Ee,
onToggleTooltip: Ue,
onToggleAnnotator: de,
style: j({
visibility: u(ze) ? u(ve) ? "visible" : "hidden" : "visible"
})
}, gt({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: _(({ isOpen: l, color: o }) => [
M(t.$slots, "menuIcon", te(le({ isOpen: l, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: _(() => [
M(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: _(() => [
M(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: _(() => [
M(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: _(() => [
M(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: _(() => [
M(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: _(({ toggleFullscreen: l, isFullscreen: o }) => [
M(t.$slots, "optionFullscreen", te(le({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: _(({ toggleAnnotator: l, isAnnotator: o }) => [
M(t.$slots, "optionAnnotator", te(le({ toggleAnnotator: l, isAnnotator: o })), 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"])) : c("", !0),
ae.value ? (s(), r("svg", {
key: 4,
ref_key: "svgRef",
ref: Te,
xmlns: u(zt),
class: qe({ "vue-data-ui-fullscreen--on": Q.value, "vue-data-ui-fulscreen--off": !Q.value }),
viewBox: `0 0 ${k.value.width <= 0 ? 10 : k.value.width} ${k.value.height <= 0 ? 10 : k.value.height}`,
style: j(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
}, [
ge(u(lt)),
t.$slots["chart-background"] ? (s(), r("foreignObject", {
key: 0,
x: 0,
y: 0,
width: k.value.width <= 0 ? 10 : k.value.width,
height: k.value.height <= 0 ? 10 : k.value.height,
style: {
pointerEvents: "none"
}
}, [
M(t.$slots, "chart-background", {}, void 0, !0)
], 8, Ut)) : c("", !0),
e.value.style.layout.axis.show ? (s(), r("g", Gt, [
d("line", {
x1: g.value.x,
x2: g.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, qt),
d("line", {
x1: n.value.left,
x2: n.value.right,
y1: g.value.y,
y2: g.value.y,
stroke: e.value.style.layout.axis.stroke,
"stroke-width": e.value.style.layout.axis.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Ht)
])) : c("", !0),
e.value.style.layout.plots.giftWrap.show ? (s(), r("g", Zt, [
(s(!0), r(W, null, Y(z.value, (l, o) => (s(), r("g", null, [
l.plots.length > 2 ? (s(), r("polygon", {
key: 0,
points: u(Tt)({ series: l.plots }),
fill: u(xe)(l.color, e.value.style.layout.plots.giftWrap.fillOpacity * 100),
"stroke-width": e.value.style.layout.plots.giftWrap.strokeWidth,
"stroke-dasharray": e.value.style.layout.plots.giftWrap.strokeDasharray,
stroke: l.color,
"stroke-linejoin": "round",
"stroke-linecap": "round"
}, null, 8, Jt)) : c("", !0)
]))), 256))
])) : c("", !0),
(s(!0), r(W, null, Y(z.value, (l, o) => (s(), r("g", null, [
!l.shape || l.shape === "circle" ? (s(), r("g", Kt, [
(s(!0), r(W, null, Y(l.plots, (a, v) => (s(), r("circle", {
cx: a.x,
cy: a.y,
r: N.value && N.value === a.id ? a.weight * 2 : a.weight,
fill: u(xe)(l.color, e.value.style.layout.plots.opacity * 100),
stroke: e.value.style.layout.plots.stroke,
"stroke-width": e.value.style.layout.plots.strokeWidth,
onMouseover: (f) => Ye(a, o),
onMouseleave: De,
style: j(`opacity:${N.value && N.value === a.id ? 1 : e.value.style.layout.plots.significance.useDistanceOpacity ? 1 - Math.abs(a.deviation) / Ie.value : e.value.style.layout.plots.significance.show && Math.abs(a.deviation) > e.value.style.layout.plots.significance.deviationThreshold ? e.value.style.layout.plots.significance.opacity : 1}`)
}, null, 44, Qt))), 256))
])) : (s(), r("g", el, [
(s(!0), r(W, null, Y(l.plots, (a, v) => (s(), E(Je, {
plot: { x: a.x, y: a.y },
radius: N.value && N.value === a.id ? a.weight * 2 : a.weight,
shape: l.shape,
color: u(xe)(l.color, e.value.style.layout.plots.opacity * 100),
stroke: e.value.style.layout.plots.stroke,
strokeWidth: e.value.style.layout.plots.strokeWidth,
onMouseover: (f) => Ye(a, o),
onMouseleave: De,
style: j(`opacity:${N.value && N.value === a.id ? 1 : e.value.style.layout.plots.significance.useDistanceOpacity ? 1 - Math.abs(a.deviation) / Ie.value : e.value.style.layout.plots.significance.show && Math.abs(a.deviation) > e.value.style.layout.plots.significance.deviationThreshold ? e.value.style.layout.plots.significance.opacity : 1}`)
}, null, 8, ["plot", "radius", "shape", "color", "stroke", "strokeWidth", "onMouseover", "style"]))), 256))
]))
]))), 256)),
e.value.style.layout.marginalBars.show ? (s(), r("g", tl, [
d("defs", null, [
d("linearGradient", {
id: `marginal_x_${S.value}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
d("stop", {
offset: "0%",
"stop-color": e.value.style.layout.marginalBars.fill
}, null, 8, al),
d("stop", {
offset: "100%",
"stop-color": e.value.style.backgroundColor
}, null, 8, ol)
], 8, ll),
d("linearGradient", {
id: `marginal_y_${S.value}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%"
}, [
d("stop", {
offset: "0%",
"stop-color": e.value.style.backgroundColor
}, null, 8, ul),
d("stop", {
offset: "100%",
"stop-color": e.value.style.layout.marginalBars.fill
}, null, 8, il)
], 8, sl)
]),
(s(!0), r(W, null, Y(T.value.x, (l, o) => (s(), r("g", null, [
l && T.value.avgX[o] ? (s(), r("rect", {
key: 0,
x: T.value.avgX[o] - n.value.width / V.value / 2,
y: n.value.top - e.value.style.layout.marginalBars.offset - l / T.value.maxX * e.value.style.layout.marginalBars.size,
width: n.value.width / V.value <= 0 ? 1e-4 : n.value.width / V.value,
height: l / T.value.maxX * e.value.style.layout.marginalBars.size <= 0 ? 1e-4 : l / T.value.maxX * e.value.style.layout.marginalBars.size,
fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_x_${S.value})` : e.value.style.layout.marginalBars.fill,
style: j(`opacity:${e.value.style.layout.marginalBars.opacity}`),
stroke: e.value.style.backgroundColor,
"stroke-width": e.value.style.layout.marginalBars.strokeWidth,
rx: e.value.style.layout.marginalBars.borderRadius
}, null, 12, rl)) : c("", !0)
]))), 256)),
(s(!0), r(W, null, Y(T.value.y, (l, o) => (s(), r("g", null, [
l && T.value.avgY[o] ? (s(), r("rect", {
key: 0,
x: n.value.right + e.value.style.layout.marginalBars.offset,
y: T.value.avgY[o] - n.value.height / V.value / 2,
height: n.value.height / V.value <= 0 ? 1e-4 : n.value.height / V.value,
width: l / T.value.maxY * e.value.style.layout.marginalBars.size <= 0 ? 1e-4 : l / T.value.maxY * e.value.style.layout.marginalBars.size,
fill: e.value.style.layout.marginalBars.useGradient ? `url(#marginal_y_${S.value})` : e.value.style.layout.marginalBars.fill,
style: j(`opacity:${e.value.style.layout.marginalBars.opacity}`),
stroke: e.value.style.backgroundColor,
"stroke-width": e.value.style.layout.marginalBars.strokeWidth,
rx: e.value.style.layout.marginalBars.borderRadius
}, null, 12, nl)) : c("", !0)
]))), 256)),
e.value.style.layout.marginalBars.showLines ? (s(), r("g", vl, [
(s(!0), r(W, null, Y(ct.value, (l) => (s(), r(W, null, [
x.value.includes(l.id) ? c("", !0) : (s(), r("path", {
key: 0,
d: `M ${l.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, yl)),
x.value.includes(l.id) ? c("", !0) : (s(), r("path", {
key: 1,
d: `M ${l.dX}`,
stroke: l.color,
"stroke-width": e.value.style.layout.marginalBars.linesStrokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, cl)),
x.value.includes(l.id) ? c("", !0) : (s(), r("path", {
key: 2,
d: `M ${l.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, dl)),
x.value.includes(l.id) ? c("", !0) : (s(), r("path", {
key: 3,
d: `M ${l.dY}`,
stroke: l.color,
"stroke-width": e.value.style.layout.marginalBars.linesStrokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, hl))
], 64))), 256))
])) : c("", !0)
])) : c("", !0),
y.value && e.value.style.layout.plots.selectors.show ? (s(), r("g", pl, [
d("line", {
x1: g.value.x,
x2: y.value.x,
y1: y.value.y,
y2: y.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, fl),
d("line", {
x1: y.value.x,
x2: y.value.x,
y1: g.value.y,
y2: y.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, gl),
d("text", {
x: g.value.x + (y.value.x > g.value.x ? -6 : 6),
y: y.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": y.value.x > g.value.x ? "end" : "start"
}, C(u(U)(
e.value.style.layout.plots.selectors.labels.y.formatter,
u(A)(y.value.v.y),
u(F)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: u(A)(y.value.v.y),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.plots.selectors.labels.rounding
}),
{ datapoint: y.value }
)), 9, ml),
d("text", {
x: y.value.x,
y: g.value.y + (y.value.y > g.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"
}, C(u(U)(
e.value.style.layout.plots.selectors.labels.y.formatter,
u(A)(y.value.v.x),
u(F)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: u(A)(y.value.v.x),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.plots.selectors.labels.rounding
}),
{ datapoint: y.value }
)), 9, xl),
d("circle", {
cx: g.value.x,
cy: y.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, bl),
d("circle", {
cx: y.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, kl),
e.value.style.layout.plots.selectors.labels.showName ? (s(), r("text", {
key: 0,
x: y.value.x,
y: y.value.y + (y.value.y < g.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": y.value.x < n.value.left + 100 ? "start" : y.value.x > n.value.right - 100 ? "end" : y.value.x > g.value.x ? "start" : "end"
}, C(y.value.v.name), 9, wl)) : c("", !0)
])) : c("", !0),
e.value.style.layout.dataLabels.xAxis.show ? (s(), r("g", _l, [
d("text", {
x: n.value.left - 5,
y: g.value.y + e.value.style.layout.dataLabels.xAxis.fontSize / 3,
"text-anchor": "end",
"font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
fill: e.value.style.layout.dataLabels.xAxis.color
}, C(u(U)(
e.value.style.layout.plots.selectors.labels.x.formatter,
u(A)(p.value.xMin),
u(F)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: u(A)(p.value.xMin),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.dataLabels.xAxis.rounding
})
)), 9, Ml),
d("text", {
x: n.value.right + 3,
y: g.value.y + e.value.style.layout.dataLabels.xAxis.fontSize / 3,
"text-anchor": "start",
"font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
fill: e.value.style.layout.dataLabels.xAxis.color
}, C(u(U)(
e.value.style.layout.plots.selectors.labels.x.formatter,
u(A)(p.value.xMax),
u(F)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: u(A)(p.value.xMax),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.dataLabels.xAxis.rounding
})
)), 9, $l),
d("text", {
id: `vue-ui-scatter-xAxis-label-${S.value}`,
transform: `translate(${e.value.style.layout.dataLabels.xAxis.fontSize * 2}, ${n.value.top + n.value.height / 2}), rotate(-90)`,
"text-anchor": "middle",
"font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
"font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
fill: e.value.style.layout.dataLabels.xAxis.color
}, C(e.value.style.layout.dataLabels.xAxis.name), 9, Cl)
])) : c("", !0),
e.value.style.layout.dataLabels.yAxis.show ? (s(), r("g", Al, [
d("text", {
x: g.value.x,
y: n.value.bottom + e.value.style.layout.dataLabels.yAxis.fontSize + 3,
"text-anchor": "middle",
"font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
fill: e.value.style.layout.dataLabels.yAxis.color
}, C(u(U)(
e.value.style.layout.plots.selectors.labels.y.formatter,
u(A)(p.value.yMin),
u(F)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: u(A)(p.value.yMin),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.dataLabels.yAxis.rounding
})
)), 9, Sl),
d("text", {
x: g.value.x,
y: n.value.top - 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
}, C(u(U)(
e.value.style.layout.plots.selectors.labels.y.formatter,
u(A)(p.value.yMax),
u(F)({
p: e.value.style.layout.plots.selectors.labels.prefix,
v: u(A)(p.value.yMax),
s: e.value.style.layout.plots.selectors.labels.suffix,
r: e.value.style.layout.dataLabels.yAxis.rounding
})
)), 9, zl),
d("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: n.value.bottom + 8 + e.value.style.layout.dataLabels.yAxis.fontSize * 2
}, C(e.value.style.layout.dataLabels.yAxis.name), 9, Tl)
])) : c("", !0),
d("clipPath", {
id: `clip_path_${S.value}`
}, [
d("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, Bl)
], 8, Ll),
e.value.style.layout.correlation.show ? (s(), r("g", Ol, [
(s(!0), r(W, null, Y(z.value, (l, o) => (s(), r("line", {
x1: l.correlation.x1,
x2: l.correlation.x2,
y1: l.correlation.y1,
y2: l.correlation.y2,
"stroke-dasharray": e.value.style.layout.correlation.strokeDasharray,
stroke: l.color,
"stroke-width": e.value.style.layout.correlation.strokeWidth,
"clip-path": `url(#clip_path_${S.value})`
}, null, 8, Nl))), 256)),
(s(!0), r(W, null, Y(z.value, (l, o) => (s(), r("g", null, [
e.value.style.layout.correlation.label.show ? (s(), r("text", {
key: 0,
x: l.label.x,
y: l.label.y,
fill: e.value.style.layout.correlation.label.useSerieColor ? l.color : e.value.style.layout.correlation.label.color,
"font-size": e.value.style.layout.correlation.label.fontSize,
"font-weight": e.value.style.layout.correlation.label.bold ? "bold" : "normal"
}, C(u(F)({
v: u(A)(l.correlation.coefficient),
r: e.value.style.layout.correlation.label.roundingValue
})), 9, Pl)) : c("", !0)
]))), 256))
])) : c("", !0),
M(t.$slots, "svg", { svg: k.value }, void 0, !0)
], 14, Et)) : c("", !0),
t.$slots.watermark ? (s(), r("div", Wl, [
M(t.$slots, "watermark", te(le({ isPrinting: u(Oe) || u(Ne) })), void 0, !0)
])) : c("", !0),
ae.value ? c("", !0) : (s(), E(u(ot), {
key: 6,
config: {
type: "quadrant",
style: {
backgroundColor: e.value.style.backgroundColor,
quadrant: {
grid: {
color: e.value.style.layout.axis.stroke
},
plots: {
color: e.value.style.layout.axis.stroke,
radius: 1
}
}
}
}
}, null, 8, ["config"])),
d("div", {
ref_key: "chartLegend",
ref: we
}, [
e.value.style.legend.show ? (s(), E(Yt, {
key: `legend_${Ae.value}`,
legendSet: G.value,
config: vt.value,
onClickMarker: i[0] || (i[0] = ({ legend: l }) => Re(l.id))
}, {
item: _(({ legend: l }) => [
d("div", {
onClick: (o) => l.segregate(),
style: j(`opacity:${x.value.includes(l.id) ? 0.5 : 1}`)
}, C(l.name), 13, Fl)
]),
_: 1
}, 8, ["legendSet", "config"])) : M(t.$slots, "legend", {
key: 1,
legend: G.value
}, void 0, !0)
], 512),
t.$slots.source ? (s(), r("div", {
key: 7,
ref_key: "source",
ref: _e,
dir: "auto"
}, [
M(t.$slots, "source", {}, void 0, !0)
], 512)) : c("", !0),
ge(u(st), {
show: O.value.showTooltip && re.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: D.value,
content: ne.value,
isFullscreen: Q.value,
isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function"
}, {
"tooltip-before": _(() => [
M(t.$slots, "tooltip-before", te(le({ ...ce.value })), void 0, !0)
]),
"tooltip-after": _(() => [
M(t.$slots, "tooltip-after", te(le({ ...ce.value })), void 0, !0)
]),
default: _(() => [
e.value.style.tooltip.showShape ? (s(), r("div", Il, [
(s(), r("svg", Xl, [
ge(Je, {
shape: y.value.shape,
color: y.value.color,
plot: { x: 10, y: 10 },
radius: 7
}, null, 8, ["shape", "color"])
]))
])) : c("", !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
ae.value ? (s(), E(u(et), {
key: 8,
hideDetails: "",
config: {
open: O.value.showTable,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
},
head: {
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color
}
}
}, {
content: _(() => [
(s(), E(u(tt), {
key: `table_${Ce.value}`,
colNames: se.value.colNames,
head: se.value.head,
body: se.value.body,
config: se.value.config,
title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? ` : ${e.value.style.title.subtitle.text}` : ""}`,
onClose: i[1] || (i[1] = (l) => O.value.showTable = !1)
}, {
th: _(({ th: l }) => [
mt(C(l), 1)
]),
td: _(({ td: l }) => [
l.shape ? (s(), r("div", Yl, [
d("span", null, C(l.content), 1)
])) : (s(), r("div", {
key: 1,
innerHTML: l
}, null, 8, Dl))
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : c("", !0)
], 46, jt));
}
}, ta = /* @__PURE__ */ Vt(Rl, [["__scopeId", "data-v-3b36f62b"]]);
export {
ta as default
};