vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,565 lines (1,564 loc) • 57 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, D as n, G as r, Jt as i, Kt as a, Ot as o, Pt as s, S as c, X as l, Y as u, Zt as ee, _ as te, b as ne, ct as re, i as ie, jt as ae, pt as oe, q as se, qt as ce, t as le, tt as ue, w as de, x as d, xt as fe } from "./lib-Bttd6u5E.js";
import { n as pe, t as me } from "./useHints-Dq_w2E8B.js";
import { t as he } from "./useConfig-D3scuR88.js";
import { t as ge } from "./usePrinter-DN5bYhTG.js";
import { n as _e, t as ve } from "./BaseScanner-DZvpgOjM.js";
import { t as ye } from "./useSvgExport-DH-FfcqQ.js";
import { t as be } from "./useNestedProp-vPNvh7rV.js";
import { t as xe } from "./useThemeCheck-C43Tcqmk.js";
import { t as Se } from "./useTransitions-g_zBREk2.js";
import { t as Ce } from "./useTimeLabelCollider-AEcY4Ioe.js";
import { t as we } from "./img-Bnokohej.js";
import { n as Te } from "./Title-BE3qg9xl.js";
import { t as Ee } from "./Shape-C21CMlWS.js";
import { t as De } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as Oe, t as ke } from "./useResponsive-ZtArZtUf.js";
import { t as Ae } from "./DefGrad-DVBqDjhO.js";
import { t as je } from "./A11yDataTable-DdRsVULz.js";
import { t as Me } from "./useUserOptionState-DK-_1ddE.js";
import { t as Ne } from "./useChartAccessibility-DYqac8yF.js";
import { t as Pe } from "./vue_ui_strip_plot-BaHbnnwN.js";
import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createSlots as Fe, createTextVNode as Ie, createVNode as Le, defineAsyncComponent as v, guardReactiveProps as y, mergeProps as Re, nextTick as ze, normalizeClass as Be, normalizeProps as b, normalizeStyle as x, onBeforeUnmount as Ve, onMounted as He, openBlock as S, ref as C, renderList as w, renderSlot as T, resolveDynamicComponent as Ue, shallowRef as We, toDisplayString as E, toRefs as Ge, unref as D, watch as Ke, watchEffect as qe, withCtx as O } from "vue";
//#region src/components/vue-ui-strip-plot.vue
var Je = /* @__PURE__ */ e({ default: () => Et }), Ye = ["id"], Xe = ["id"], Ze = { style: { position: "relative" } }, Qe = [
"xmlns",
"viewBox",
"aria-describedby"
], $e = [
"x",
"y",
"width",
"height"
], et = { key: 1 }, tt = { key: 0 }, nt = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], rt = { key: 1 }, it = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], at = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], ot = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], st = [
"transform",
"fill",
"font-size"
], ct = [
"transform",
"font-size",
"fill",
"text-anchor"
], lt = [
"transform",
"font-size",
"fill",
"text-anchor",
"innerHTML"
], ut = [
"fill",
"font-size",
"transform"
], dt = [
"fill",
"font-size",
"x",
"y"
], ft = [
"x1",
"x2",
"y1",
"y2",
"stroke"
], pt = [
"cx",
"cy",
"fill"
], mt = [
"cx",
"cy",
"fill"
], ht = [
"d",
"fill",
"stroke",
"fill-opacity",
"stroke-opacity",
"stroke-width",
"onMouseenter"
], gt = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-opacity",
"stroke-width"
], _t = ["onMouseenter"], vt = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], yt = [
"x",
"y",
"width",
"height",
"fill",
"stroke",
"stroke-width",
"rx"
], bt = [
"cx",
"cy",
"r",
"fill",
"stroke"
], xt = { key: 1 }, St = [
"x",
"y",
"font-size",
"fill"
], Ct = {
key: 0,
style: {
position: "absolute",
top: "100%",
left: "0",
width: "100%"
},
"data-dom-to-png-ignore": "",
"aria-hidden": "true"
}, wt = {
key: 5,
class: "vue-data-ui-watermark"
}, Tt = ["innerHTML"], Et = /*#__PURE__*/ De({
__name: "vue-ui-strip-plot",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint", "copyAlt"],
setup(e, { expose: De, emit: Je }) {
let Et = v(() => import("./Tooltip-DhjyfHwz.js")), Dt = v(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), Ot = v(() => import("./vue-ui-accordion-BxGriZik.js").then((e) => e.n)), kt = v(() => import("./DataTable-BbKgJ5UI.js")), At = v(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), jt = v(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), Mt = v(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), Nt = v(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), Pt = [
"classic",
"scatter",
"violin"
], { vue_ui_strip_plot: Ft } = he(), { isThemeValid: It, warnInvalidTheme: Lt } = xe(), k = e, Rt = Je, zt = p({
get() {
return !!k.dataset && k.dataset.length;
},
set(e) {
return e;
}
}), A = C(se()), Bt = C(0), j = C(!1), Vt = C(""), M = C(null), Ht = C(null), Ut = C(null), Wt = C(null), Gt = C(!1), Kt = C(0), qt = C(0), Jt = C(null), Yt = C(null), Xt = C(!1), Zt = C(!1), Qt = C(null), $t = C(null), en = C(null), tn = C(null), nn = C(null), rn = C(null), N = C("pointer"), an = C({
x: 0,
y: 0
}), on = C(!1), P = C(gn());
pe({
config: () => P.value,
dataset: () => k.dataset,
component: "VueUiStripPlot",
rules: [me.emptyArray, {
test: (e) => e.length > 12,
message: [
"👀 The number of series is > 12. Consider:",
"",
"▶️ Using filters to let users choose a maximum number of series to display.",
"",
"▶️ Using multiple instances of the chart to display related series."
]
}]
});
let { transitionEnabled: sn } = Se({
config: () => P.value.transitions,
dataset: () => k.dataset
}), cn = p(() => _n(P.value.type)), F = p(() => P.value.userOptions.useCursorPointer), ln = p(() => i({
defaultConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: { chart: {
backgroundColor: "#99999930",
padding: {
top: 24,
left: 24,
right: 24,
bottom: 24
},
grid: {
stroke: "#6A6A6A",
horizontalGrid: { stroke: "#6A6A6A" },
verticalGrid: { stroke: "#6A6A6A" }
},
plots: { stroke: "#6A6A6A" },
labels: {
bestPlotLabel: { show: !1 },
axis: {
xLabel: "",
yLabel: ""
},
xAxisLabels: { show: !1 },
yAxisLabels: { show: !1 }
}
} }
},
userConfig: P.value.skeletonConfig ?? {}
})), { loading: un, FINAL_DATASET: dn, manualLoading: fn } = _e({
...Ge(k),
FINAL_CONFIG: P,
prepareConfig: gn,
skeletonDataset: k.config?.skeletonDataset ?? [
{
name: "_",
color: "#DBDBDB",
plots: [
{
name: "_",
value: 1
},
{
name: "_",
value: 2
},
{
name: "_",
value: 3
}
]
},
{
name: "_",
color: "#C4C4C4",
plots: [
{
name: "_",
value: 3
},
{
name: "_",
value: 5
},
{
name: "_",
value: 8
}
]
},
{
name: "_",
color: "#ADADAD",
plots: [
{
name: "_",
value: 8
},
{
name: "_",
value: 13
},
{
name: "_",
value: 21
}
]
},
{
name: "_",
color: "#969696",
plots: [
{
name: "_",
value: 21
},
{
name: "_",
value: 34
},
{
name: "_",
value: 55
}
]
},
{
name: "_",
color: "#808080",
plots: [
{
name: "_",
value: 55
},
{
name: "_",
value: 89
},
{
name: "_",
value: 144
}
]
}
],
skeletonConfig: i({
defaultConfig: P.value,
userConfig: ln.value
})
}), { userOptionsVisible: pn, setUserOptionsVisibility: mn, keepUserOptionState: hn } = Me({ config: P.value }), { svgRef: I } = Ne({ config: P.value.style.chart.title });
function gn() {
let e = be({
userConfig: k.config,
defaultConfig: Ft
}), t = e.theme;
if (!t) return e;
if (!It.value(e)) return Lt(e), e;
let n = be({
userConfig: Pe[t] || k.config,
defaultConfig: e
}), r = be({
userConfig: k.config,
defaultConfig: n
});
return {
...r,
customPalette: r.customPalette.length ? r.customPalette : a[t] || s
};
}
function _n(e) {
return Pt.includes(e) ? e : "classic";
}
Ke(() => k.config, async (e) => {
un.value || (P.value = gn()), pn.value = !P.value.userOptions.showOnChartHover, yn(), Kt.value += 1, qt.value += 1, V.value.dataLabels.show = P.value.style.chart.labels.bestPlotLabel.show, V.value.showTable = P.value.table.show, V.value.showTooltip = P.value.style.chart.tooltip.show, z.value = P.value.style.chart.width, B.value = P.value.style.chart.height, kn.value = P.value.style.chart.plots.radius;
}, { deep: !0 }), Ke(() => k.dataset, (e) => {
Array.isArray(e) && e.length > 0 && (fn.value = !1);
}, { deep: !0 });
let L = We(null), R = We(null);
He(() => {
yn();
});
let vn = p(() => !!P.value.debug);
function yn() {
if (ae(k.dataset) ? (ue({
componentName: "VueUiStripPlot",
type: "dataset",
debug: vn.value
}), fn.value = !0) : k.dataset.forEach((e, t) => {
oe({
datasetObject: e,
requiredAttributes: ["name", "plots"]
}).forEach((e) => {
zt.value = !1, ue({
componentName: "VueUiStripPlot",
type: "datasetSerieAttribute",
property: e,
index: t,
debug: vn.value
});
}), e.plots && e.plots.forEach((e, n) => {
oe({
datasetObject: e,
requiredAttributes: ["name", "value"]
}).forEach((e) => {
zt.value = !1, ue({
componentName: "VueUiStripPlot",
type: "datasetSerieAttribute",
property: e,
index: `${t},${n}`,
debug: vn.value
});
});
});
}), ae(k.dataset) || (fn.value = P.value.loading), P.value.responsive) {
let e = Oe(() => {
let { width: e, height: t } = ke({
chart: M.value,
title: P.value.style.chart.title.text ? Ht.value : null,
source: Ut.value,
noTitle: Wt.value
});
requestAnimationFrame(() => {
On.value = t, z.value = Math.max(.1, e), B.value = Math.max(.1, t - 12), P.value.responsiveProportionalSizing ? kn.value = ce({
relator: Math.min(t, e),
adjuster: 600,
source: P.value.style.chart.plots.radius,
threshold: 6,
fallback: 6
}) : kn.value = P.value.style.chart.plots.radius;
});
});
L.value && (R.value && L.value.unobserve(R.value), L.value.disconnect()), L.value = new ResizeObserver(e), R.value = M.value.parentNode, L.value.observe(R.value);
}
Gt.value = !0, setTimeout(() => {
En.value = !1;
}, In.value * 50);
}
Ve(() => {
L.value && (R.value && L.value.unobserve(R.value), L.value.disconnect());
});
let { isPrinting: bn, isImaging: xn, generatePdf: Sn, generateImage: Cn } = ge({
elementId: `strip-plot_${A.value}`,
fileName: P.value.style.chart.title.text || "vue-ui-strip-plot",
options: P.value.userOptions.print
}), wn = p(() => P.value.userOptions.show && !P.value.style.chart.title.text), Tn = p(() => de(P.value.customPalette)), En = C(P.value.useCssAnimation), Dn = C({
top: P.value.style.chart.padding.top,
bottom: P.value.style.chart.padding.bottom,
left: P.value.style.chart.padding.left,
right: P.value.style.chart.padding.right
}), z = C(P.value.style.chart.width), B = C(P.value.style.chart.height), On = C(P.value.style.chart.height), kn = C(P.value.style.chart.plots.radius), V = C({
showTable: P.value.table.show,
dataLabels: { show: P.value.style.chart.labels.bestPlotLabel.show },
showTooltip: P.value.style.chart.tooltip.show
});
Ke(P, () => {
V.value = {
showTable: P.value.table.show,
dataLabels: { show: P.value.style.chart.labels.bestPlotLabel.show },
showTooltip: P.value.style.chart.tooltip.show
}, z.value = P.value.style.chart.width, B.value = P.value.style.chart.height, kn.value = P.value.style.chart.plots.radius;
}, { immediate: !0 });
let H = p(() => Math.min(kn.value, W.value.stripWidth / 2 * .9));
function U(e) {
return Number.isFinite(e) ? Number(e.toFixed(2)) : 0;
}
function An() {
return Math.max(0, (W.value.stripWidth / 2 - H.value * 1.8) * .86) * Math.min(1, P.value.style.chart.violin.widthRatio);
}
function jn() {
let e = 0;
tn.value && (e = Array.from(tn.value.querySelectorAll("text")).reduce((e, t) => {
let n = t.getComputedTextLength();
return n > e ? n : e;
}, 0));
let t = $t.value ? $t.value.getBoundingClientRect().width : 0;
return e + t + (t ? 24 : 0);
}
let Mn = C(0), Nn = Oe((e) => {
Mn.value = e;
}, 100);
qe((e) => {
let t = en.value;
if (!t) return;
let n = new ResizeObserver((e) => {
Nn(e[0].contentRect.height);
});
n.observe(t), e(() => n.disconnect());
}), Ve(() => {
Mn.value = 0;
});
let Pn = p(() => {
let e = 0;
Qt.value && (e = Qt.value.getBBox().height + P.value.style.chart.labels.axis.fontSize / 3 + 12 + P.value.style.chart.labels.axis.xLabelOffsetY);
let t = 0;
return en.value && (t = Mn.value + 12), e + t;
}), W = p(() => {
let e = jn(), t = Dn.value.left + e + P.value.style.chart.labels.axis.yLabelOffsetX + 5, n = z.value - Dn.value.right, r = Math.max(0, n - t), i = Dn.value.top + P.value.style.chart.plots.radius + P.value.style.chart.labels.bestPlotLabel.fontSize, a = B.value - Dn.value.bottom - Pn.value, o = Math.max(0, a - i), s = Array.isArray(dn.value) ? dn.value.length : 0;
return {
left: t,
right: n,
top: i,
bottom: a,
width: r,
height: o,
stripWidth: s > 0 ? r / s : 0,
absoluteHeight: B.value
};
});
function Fn(e) {
return W.value.left + (e + 1) * W.value.stripWidth - W.value.stripWidth / 2;
}
let G = p(() => dn.value.map((e, t) => {
let n = se();
return {
...e,
id: n,
color: e.color ? c(e.color) : Tn.value[t] || s[t] || s[t % s.length],
plots: e.plots.map((r, i) => ({
...r,
value: ne(r.value),
parentId: n,
parentName: e.name,
parentIndex: t,
plotIndex: i,
color: e.color ? c(e.color) : Tn.value[t] || s[t] || s[t % s.length],
id: se()
})).sort((e, t) => e.value - t.value)
};
})), K = p(() => (G.value || []).map((e, t) => ({
...e,
plots: e.plots.map((e) => ({
...e,
x: Fn(t)
}))
}))), In = p(() => Math.max(...K.value.map((e) => e.plots.length))), Ln = p(() => {
let e = K.value.flatMap((e) => e.plots.map((e) => e.value));
return {
max: Math.max(...e),
min: Math.min(...e)
};
}), q = p(() => te(Ln.value.min < 0 ? Ln.value.min : 0, Ln.value.max, P.value.style.chart.grid.scaleSteps)), J = p(() => (K.value || []).map((e, t) => {
let n = e.plots.map((e) => ({
...e,
y: W.value.bottom - (e.value + Math.abs(q.value.min)) / (q.value.max + Math.abs(q.value.min)) * W.value.height
})), r = cn.value === "classic" ? n.map(() => 0) : Hn(n);
return {
...e,
plots: n.map((e, t) => ({
...e,
x: e.x + r[t]
}))
};
})), Y = p(() => cn.value === "violin" && !!P.value.style.chart.violin?.boxPlot?.show);
function Rn(e, t) {
if (!e.length) return 0;
if (e.length === 1) return e[0];
let n = (e.length - 1) * t, r = Math.floor(n), i = n - r, a = e[r + 1];
return a === void 0 ? e[r] : e[r] + i * (a - e[r]);
}
function zn(e) {
let t = q.value.max + Math.abs(q.value.min);
return t ? W.value.bottom - (e + Math.abs(q.value.min)) / t * W.value.height : W.value.bottom;
}
let X = p(() => Y.value ? J.value.map((e, t) => {
let n = e.plots.map((e) => e.value).sort((e, t) => e - t), r = Rn(n, .25), i = Rn(n, .5), a = Rn(n, .75), o = a - r, s = r - o * 1.5, c = a + o * 1.5, l = n.find((e) => e >= s), u = n.slice().reverse().find((e) => e <= c), ee = Fn(t), te = Math.max(H.value * 2.8, Math.min(An() * .32, W.value.stripWidth * .12)) * Math.min(1.5, P.value.style.chart.violin.boxPlot.widthRatio);
return {
id: e.id,
boxPlotColor: P.value.style.chart.violin.boxPlot.useSerieColor ? e.color : P.value.style.chart.violin.boxPlot.color,
color: e.color,
name: e.name,
count: n.length,
lowerAdjacent: l ?? n[0],
q1: r,
median: i,
q3: a,
upperAdjacent: u ?? n[n.length - 1],
iqr: o,
lowerFence: s,
upperFence: c,
centerX: ee,
boxLeft: ee - te / 2,
boxWidth: te,
q1Y: zn(r),
medianY: zn(i),
q3Y: zn(a),
lowerY: zn(l ?? n[0]),
upperY: zn(u ?? n[n.length - 1])
};
}) : []), Bn = p(() => [
P.value.table.columnNames.series,
P.value.style.chart.violin.tooltipLabels.lowerAdjacent,
P.value.style.chart.violin.tooltipLabels.q1,
P.value.style.chart.violin.tooltipLabels.median,
P.value.style.chart.violin.tooltipLabels.q3,
P.value.style.chart.violin.tooltipLabels.upperAdjacent,
P.value.style.chart.violin.tooltipLabels.iqr,
P.value.style.chart.violin.tooltipLabels.count
]);
function Vn(e) {
return l({
p: P.value.style.chart.labels.prefix,
v: e,
s: P.value.style.chart.labels.suffix,
r: P.value.table.td.roundingValue
});
}
function Hn(e) {
let t = cn.value === "violin" ? Math.max(0, An() - H.value * 1.15) : Math.max(0, W.value.stripWidth / 2 - H.value * 1.5);
if (!e.length || !t) return e.map(() => 0);
let n = e.map(() => 0), r = H.value * 2.1, i = Math.min(t, r), a = [0];
for (let e = i; e <= t + i / 2; e += i) a.push(-Math.min(e, t)), a.push(Math.min(e, t));
let o = [];
return e.forEach((e, t) => {
let i = a.find((t) => o.every((n) => {
let i = t - n.offset, a = e.y - n.y;
return Math.hypot(i, a) >= r;
})) ?? 0;
n[t] = i, o.push({
y: e.y,
offset: i
});
}), n;
}
let Un = p(() => cn.value === "violin" ? J.value.map((e, t) => ({
id: e.id,
color: P.value.style.chart.violin.useSerieColor ? e.color : P.value.style.chart.violin.stroke,
fill: P.value.style.chart.violin.useSerieColor ? e.color : P.value.style.chart.violin.fill,
path: Wn(e.plots, t),
connectors: Gn(e.plots, t)
})) : []);
function Wn(e, t) {
let n = An();
if (!e.length || !W.value.height || !n) return "";
let r = Fn(t), i = e.map((e) => e.y), a = Z(i), o = qn({
yValues: i,
bandwidth: a
});
return o.length > 1 ? o.map((e) => Yn({
yValues: e,
centerX: r,
maxWidth: Kn({
clusterLength: e.length,
totalLength: i.length,
maxWidth: n
}),
bandwidth: Z(e)
})).join(" ") : Yn({
yValues: i,
centerX: r,
maxWidth: n,
bandwidth: a
});
}
function Gn(e, t) {
if (!e.length) return [];
let n = Fn(t), r = e.map((e) => e.y), i = qn({
yValues: r,
bandwidth: Z(r)
});
return i.length < 2 ? [] : i.slice(1).map((e, t) => {
let r = i[t], a = Z(r), o = Z(e), s = d(Math.max(...r) + a * 2.35, W.value.top, W.value.bottom), c = d(Math.min(...e) - o * 2.35, W.value.top, W.value.bottom);
return {
x: U(n),
y1: U(s),
y2: U(c)
};
});
}
function Kn({ clusterLength: e, totalLength: t, maxWidth: n }) {
let r = (e / t) ** .6, i = e <= 2 ? .72 : 1;
return Math.max(H.value * 2.2, n * d(r * i, .18, 1));
}
function Z(e) {
let t = e.reduce((e, t) => e + t, 0) / Math.max(1, e.length), n = e.reduce((e, n) => e + (n - t) ** 2, 0) / Math.max(1, e.length), r = Math.sqrt(n), i = e.length < 2 ? Math.max(H.value * 2.6, W.value.height / 48) : H.value * 2.1;
return d(1.06 * r * e.length ** -.2, i, W.value.height / 5);
}
function qn({ yValues: e, bandwidth: t }) {
if (e.length < 2) return [e];
let n = [...e].sort((e, t) => e - t), r = Math.max(t * 1.45, H.value * 5), i = [], a = [n[0]];
for (let e = 1; e < n.length; e += 1) Math.abs(n[e] - n[e - 1]) > r ? (i.push(a), a = [n[e]]) : a.push(n[e]);
return i.push(a), Jn(i);
}
function Jn(e) {
return e.reduce((e, t) => {
let n = e[e.length - 1];
if (!n) return e.push(t), e;
let r = Z(n), i = Z(t);
return Math.max(...n) + r * 2.35 >= Math.min(...t) - i * 2.35 ? n.push(...t) : e.push(t), e;
}, []);
}
function Yn({ yValues: e, centerX: t, maxWidth: n, bandwidth: r }) {
let i = d(Math.min(...e) - r * 2.35, W.value.top, W.value.bottom), a = d(Math.max(...e) + r * 2.35, W.value.top, W.value.bottom), o = Math.max(48, Math.min(120, Math.round((a - i) / Math.max(1, r / 4)))), s = Array.from({ length: o }, (t, n) => {
let s = i + (a - i) * n / Math.max(1, o - 1);
return {
y: s,
density: e.reduce((e, t) => {
let n = (s - t) / r;
return e + Math.exp(-.5 * n * n);
}, 0)
};
}), c = Math.max(...s.map((e) => e.density));
if (!c) return "";
let l = s.map((e, t) => {
let r = t === 0 || t === s.length - 1 ? 0 : e.density / c * n;
return {
y: U(e.y),
width: U(r)
};
}), u = l.map((e) => ({
x: U(t - e.width),
y: e.y
})), ee = l.slice(0, -1).reverse().map((e) => ({
x: U(t + e.width),
y: e.y
}));
return `${Xn([...u, ...ee])} Z`;
}
function Xn(e) {
if (!e.length) return "";
if (e.length === 1) return `M ${e[0].x} ${e[0].y}`;
let t = `M ${e[0].x} ${e[0].y}`;
for (let n = 1; n < e.length - 1; n += 1) {
let r = e[n], i = e[n + 1], a = U((r.x + i.x) / 2), o = U((r.y + i.y) / 2);
t += ` Q ${r.x} ${r.y} ${a} ${o}`;
}
let n = e[e.length - 1];
return `${t} L ${n.x} ${n.y}`;
}
let Zn = p(() => q.value.ticks.map((e) => ({
y: W.value.bottom - W.value.height * ((e + Math.abs(q.value.min)) / (q.value.max + Math.abs(q.value.min))),
x1: W.value.left,
x2: W.value.right,
value: e
}))), Qn = C(null), Q = C(null);
function $n({ datapoint: e, seriesIndex: t }) {
N.value !== "keyboard" && (j.value = !1, Q.value = null, P.value.events.datapointLeave && P.value.events.datapointLeave({
datapoint: e,
seriesIndex: t
}));
}
function er({ datapoint: e, seriesIndex: t }) {
Rt("selectDatapoint", e), P.value.events.datapointClick && P.value.events.datapointClick({
datapoint: e,
seriesIndex: t
});
}
function tr(e, t = {}) {
return ie(P.value.style.chart.labels.formatter, e, l({
p: P.value.style.chart.labels.prefix,
v: e,
s: P.value.style.chart.labels.suffix,
r: P.value.style.chart.tooltip.roundingValue
}), t);
}
function nr({ datapoint: e, seriesIndex: t, triggerMode: n = "pointer" }) {
P.value.events.datapointEnter && P.value.events.datapointEnter({
datapoint: e,
seriesIndex: t
}), N.value = n, Qn.value = {
datapoint: e,
seriesIndex: t,
config: P.value,
series: G.value
}, j.value = !0, Q.value = e;
let r = P.value.style.chart.tooltip.customFormat;
if (fe(r) && re(() => r({
seriesIndex: t,
datapoint: e,
series: G.value,
config: P.value
}))) Vt.value = r({
seriesIndex: t,
datapoint: e,
series: G.value,
config: P.value
});
else {
let n = "";
n += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${P.value.style.chart.plots.gradient.show ? `url(#${e.parentId})` : e.color}"/></svg>${e.name}</div>`, n += `<div>${tr(e.value, {
datapoint: e,
seriesIndex: t
})}</div>`, Vt.value = `<div>${n}</div>`;
}
}
function rr() {
N.value !== "keyboard" && (j.value = !1, Q.value = null);
}
function ir({ boxPlot: e, seriesIndex: t, triggerMode: n = "pointer" }) {
N.value = n, Q.value = null, j.value = !0, Qn.value = {
boxPlot: e,
seriesIndex: t,
config: P.value,
series: G.value
};
let r = P.value.style.chart.tooltip.customFormat;
if (fe(r)) try {
let n = {
boxPlot: e,
seriesIndex: t,
series: G.value,
config: P.value
};
if (re(() => r(n))) {
Vt.value = r(n);
return;
}
} catch {}
let i = [
[P.value.style.chart.violin.tooltipLabels.upperAdjacent, e.upperAdjacent],
[P.value.style.chart.violin.tooltipLabels.q3, e.q3],
[P.value.style.chart.violin.tooltipLabels.median, e.median],
[P.value.style.chart.violin.tooltipLabels.q1, e.q1],
[P.value.style.chart.violin.tooltipLabels.lowerAdjacent, e.lowerAdjacent],
[P.value.style.chart.violin.tooltipLabels.iqr, e.iqr]
], a = `<svg viewBox="0 0 12 12" height="14" width="14"><rect x="1" y="1" width="10" height="10" rx="2" stroke="none" fill="${e.color}"/></svg>`, o = i.map(([n, r]) => `<div style="display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:space-between;"><span>${n}</span><b>${tr(r, {
boxPlot: e,
seriesIndex: t
})}</b></div>`).join("");
Vt.value = `<div style="min-width:160px;"><div style="display:flex;flex-direction:row;gap:6px;align-items:center;margin-bottom:6px;">${a}${e.name}</div>` + o + `<div style="display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:space-between;margin-top:6px;"><span>${P.value.style.chart.violin.tooltipLabels.count}</span><b>${e.count}</b></div></div>`;
}
let ar = p(() => ({
head: K.value.flatMap((e) => JSON.parse(JSON.stringify(e.plots)).sort((e, t) => t.value - e.value).map((t) => ({
name: `${e.name} - ${t.name}`,
color: t.color
}))),
body: K.value.flatMap((e) => JSON.parse(JSON.stringify(e.plots)).sort((e, t) => t.value - e.value).map((e) => e.value))
}));
function or(e = null) {
ze(() => {
let r = [], i = [P.value.table.columnNames.series, P.value.table.columnNames.value];
Y.value ? (i = Bn.value, r = X.value.map((e) => [
[e.name],
[e.lowerAdjacent],
[e.q1],
[e.median],
[e.q3],
[e.upperAdjacent],
[e.iqr],
[e.count]
])) : r = ar.value.head.map((e, t) => [[e.name], [ar.value.body[t]]]);
let a = [
[P.value.style.chart.title.text],
[P.value.style.chart.title.subtitle.text],
i.map((e) => [e])
].concat(r), o = n(a);
e ? e(o) : t({
csvContent: o,
title: P.value.style.chart.title.text || "vue-ui-strip-plot"
});
});
}
let sr = p(() => {
if (Y.value) {
let e = Bn.value;
return {
colNames: e,
head: e,
body: X.value.map((e) => [
{
color: e.color,
name: e.name
},
Vn(e.lowerAdjacent),
Vn(e.q1),
Vn(e.median),
Vn(e.q3),
Vn(e.upperAdjacent),
Vn(e.iqr),
e.count
]),
config: {
th: {
backgroundColor: P.value.table.th.backgroundColor,
color: P.value.table.th.color,
outline: P.value.table.th.outline
},
td: {
backgroundColor: P.value.table.td.backgroundColor,
color: P.value.table.td.color,
outline: P.value.table.td.outline
},
breakpoint: P.value.table.responsiveBreakpoint
}
};
}
let e = [P.value.table.columnNames.series, P.value.table.columnNames.value], t = ar.value.head.map((e, t) => {
let n = l({
p: P.value.style.chart.labels.prefix,
v: ar.value.body[t],
s: P.value.style.chart.labels.suffix,
r: P.value.table.td.roundingValue
});
return [{
color: e.color,
name: e.name
}, n];
}), n = {
th: {
backgroundColor: P.value.table.th.backgroundColor,
color: P.value.table.th.color,
outline: P.value.table.th.outline
},
td: {
backgroundColor: P.value.table.td.backgroundColor,
color: P.value.table.td.color,
outline: P.value.table.td.outline
},
breakpoint: P.value.table.responsiveBreakpoint
};
return {
colNames: [P.value.table.columnNames.series, P.value.table.columnNames.value],
head: e,
body: t,
config: n
};
}), $ = C(!1);
function cr(e) {
$.value = e, Bt.value += 1;
}
function lr() {
return K.value;
}
function ur() {
V.value.showTable = !V.value.showTable;
}
function dr() {
V.value.dataLabels.show = !V.value.dataLabels.show;
}
function fr() {
V.value.showTooltip = !V.value.showTooltip;
}
let pr = C(!1);
function mr() {
pr.value = !pr.value;
}
async function hr({ scale: e = 2 } = {}) {
if (!M.value) return;
let { width: t, height: n } = M.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await we({
domElement: M.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: P.value.style.chart.title.text,
width: t,
height: n,
aspectRatio: r
};
}
let gr = p(() => K.value.map((e) => e.name)), _r = C({
start: 0,
end: K.value.length
});
Ce({
timeLabelsEls: en,
timeLabels: gr,
slicer: _r,
configRef: P,
rotationPath: [
"style",
"chart",
"labels",
"xAxisLabels",
"rotation"
],
autoRotatePath: [
"style",
"chart",
"labels",
"xAxisLabels",
"autoRotate",
"enable"
],
isAutoSize: !1,
width: z,
height: B,
targetClass: ".vue-ui-strip-plot-category-name",
rotation: P.value.style.chart.labels.xAxisLabels.autoRotate.angle
});
let vr = p(() => {
let e = P.value.table.useDialog && !P.value.table.show, t = V.value.showTable;
return {
component: e ? Nt : Ot,
title: `${P.value.style.chart.title.text}${P.value.style.chart.title.subtitle.text ? `: ${P.value.style.chart.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: P.value.table.th.backgroundColor,
color: P.value.table.th.color,
headerColor: P.value.table.th.color,
headerBg: P.value.table.th.backgroundColor,
isFullscreen: $.value,
fullscreenParent: M.value,
forcedWidth: Math.min(800, window.innerWidth * .8),
isCursorPointer: F.value
} : {
hideDetails: !0,
config: {
open: t,
maxHeight: 1e4,
body: {
backgroundColor: P.value.style.chart.backgroundColor,
color: P.value.style.chart.color
},
head: {
backgroundColor: P.value.style.chart.backgroundColor,
color: P.value.style.chart.color
}
}
}
};
});
Ke(() => V.value.showTable, (e) => {
P.value.table.show || (e && P.value.table.useDialog && Jt.value ? Jt.value.open() : "close" in Jt.value && Jt.value.close());
});
function yr() {
V.value.showTable = !1, Yt.value && Yt.value.setTableIconState(!1);
}
let br = p(() => P.value.style.chart.backgroundColor), xr = p(() => P.value.style.chart.title), { exportSvg: Sr, getSvg: Cr } = ye({
svg: I,
title: xr,
backgroundColor: br
});
async function wr({ isCb: e }) {
Zt.value = !0, await ze();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await Cr();
await Promise.resolve(P.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(Sr());
} finally {
Zt.value = !1;
}
}
function Tr(e) {
if (e?.stage === "start") {
Xt.value = !0;
return;
}
if (e?.stage === "end") {
Xt.value = !1;
return;
}
Cn();
}
async function Er() {
if (Rt("copyAlt", {
config: P.value,
dataset: J.value
}), !P.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(P.value.userOptions.callbacks.altCopy({
config: P.value,
dataset: J.value
}));
}
function Dr() {
return J.value.length;
}
function Or(e) {
return J.value[e]?.plots ?? [];
}
function kr(e = nn.value, t = rn.value) {
return !Number.isInteger(e) || !Number.isInteger(t) ? null : Or(e)[t] ?? null;
}
function Ar() {
nn.value = null, rn.value = null, N.value = "pointer", j.value = !1, Q.value = null;
}
function jr(e) {
if (!e || !I.value) return;
let t = I.value.getBoundingClientRect();
an.value = {
x: t.left + e.x / z.value * t.width,
y: t.top + e.y / B.value * t.height
};
}
function Mr(e, t) {
let n = kr(e, t);
n && (nn.value = e, rn.value = t, N.value = "keyboard", jr(n), nr({
datapoint: n,
seriesIndex: e,
triggerMode: "keyboard"
}));
}
function Nr() {
on.value = !0, nn.value = null, rn.value = null;
}
function Pr() {
on.value = !1, Ar();
}
function Fr(e) {
if (!I.value || pr.value || document.activeElement !== I.value || !Dr()) return;
let t = e.key === "ArrowLeft", n = e.key === "ArrowRight", r = e.key === "ArrowUp", i = e.key === "ArrowDown", a = e.key === "Enter" || e.key === " ", o = e.key === "Escape";
if (!t && !n && !r && !i && !a && !o) return;
if (e.preventDefault(), e.stopPropagation(), o) {
Ar();
return;
}
let s = nn.value, c = rn.value;
if (s === null || c === null) s = 0, c = 0;
else if (t || n) {
let e = Dr();
s = n ? (s + 1) % e : (s - 1 + e) % e;
let t = Or(s);
if (!t.length) return;
c = Math.min(c, t.length - 1);
} else if (r || i) {
let e = Or(s);
if (!e.length) return;
c = r ? (c + 1) % e.length : (c - 1 + e.length) % e.length;
}
if (a) {
let e = kr();
if (!e) return;
er({
datapoint: e,
seriesIndex: nn.value
});
return;
}
Mr(s, c);
}
let Ir = p(() => ({
headers: sr.value?.colNames ?? [],
rows: sr.value?.body?.map((e) => e.map((e) => e && typeof e == "object" && "name" in e ? e.name : e)) ?? []
}));
return De({
getData: lr,
getImage: hr,
generatePdf: Sn,
generateCsv: or,
generateImage: Cn,
generateSvg: wr,
toggleTable: ur,
toggleLabels: dr,
toggleTooltip: fr,
toggleAnnotator: mr,
toggleFullscreen: cr,
copyAlt: Er
}), (e, t) => (S(), g("div", {
ref_key: "stripPlotChart",
ref: M,
class: Be(`vue-data-ui-component vue-ui-strip-plot ${$.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${P.value.useCssAnimation ? "" : "vue-ui-dna"}`),
style: x(`font-family:${P.value.style.fontFamily};width:100%; text-align:center;background:${P.value.style.chart.backgroundColor};${P.value.responsive ? "height:100%" : ""}`),
id: `strip-plot_${A.value}`,
onMouseenter: t[2] ||= () => D(mn)(!0),
onMouseleave: t[3] ||= () => D(mn)(!1)
}, [
_("div", {
id: `chart-instructions-${A.value}`,
class: "sr-only"
}, [_("p", null, E(P.value.a11y.translations.keyboardNavigation), 1)], 8, Xe),
Ir.value?.rows?.length ? (S(), m(je, {
key: 0,
uid: A.value,
head: Ir.value.headers,
body: Ir.value.rows,
notice: P.value.a11y.translations.tableAvailable,
caption: P.value.a11y.translations.tableCaption
}, null, 8, [
"uid",
"head",
"body",
"notice",
"caption"
])) : h("", !0),
P.value.userOptions.buttons.annotator ? (S(), m(D(jt), {
key: 1,
svgRef: D(I),
backgroundColor: P.value.style.chart.backgroundColor,
color: P.value.style.chart.color,
active: pr.value,
isCursorPointer: F.value,
onClose: mr
}, {
"annotator-action-close": O(() => [T(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": O(({ color: t }) => [T(e.$slots, "annotator-action-color", b(y({ color: t })), void 0, !0)]),
"annotator-action-draw": O(({ mode: t }) => [T(e.$slots, "annotator-action-draw", b(y({ mode: t })), void 0, !0)]),
"annotator-action-undo": O(({ disabled: t }) => [T(e.$slots, "annotator-action-undo", b(y({ disabled: t })), void 0, !0)]),
"annotator-action-redo": O(({ disabled: t }) => [T(e.$slots, "annotator-action-redo", b(y({ disabled: t })), void 0, !0)]),
"annotator-action-delete": O(({ disabled: t }) => [T(e.$slots, "annotator-action-delete", b(y({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : h("", !0),
wn.value ? (S(), g("div", {
key: 2,
ref_key: "noTitle",
ref: Wt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : h("", !0),
P.value.style.chart.title.text ? (S(), g("div", {
key: 3,
ref_key: "chartTitle",
ref: Ht,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [(S(), m(Te, {
key: `title_${Kt.value}`,
config: {
title: {
cy: "donut-div-title",
...P.value.style.chart.title
},
subtitle: {
cy: "donut-div-subtitle",
...P.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : h("", !0),
P.value.userOptions.show && zt.value && (D(hn) || D(pn)) ? (S(), m(D(At), {
ref_key: "userOptionsRef",
ref: Yt,
key: `user_option_${Bt.value}`,
backgroundColor: P.value.style.chart.backgroundColor,
color: P.value.style.chart.color,
isPrinting: D(bn),
isImaging: D(xn),
uid: A.value,
hasTooltip: P.value.userOptions.buttons.tooltip && P.value.style.chart.tooltip.show,
hasPdf: P.value.userOptions.buttons.pdf,
hasXls: P.value.userOptions.buttons.csv,
hasImg: P.value.userOptions.buttons.img,
hasSvg: P.value.userOptions.buttons.svg,
hasTable: P.value.userOptions.buttons.table,
hasLabel: P.value.userOptions.buttons.labels && P.value.type !== "violin",
hasFullscreen: P.value.userOptions.buttons.fullscreen,
hasAltCopy: P.value.userOptions.buttons.altCopy,
isTooltip: V.value.showTooltip,
isFullscreen: $.value,
titles: { ...P.value.userOptions.buttonTitles },
chartElement: M.value,
position: P.value.userOptions.position,
hasAnnotator: P.value.userOptions.buttons.annotator,
isAnnotation: pr.value,
callbacks: P.value.userOptions.callbacks,
printScale: P.value.userOptions.print.scale,
tableDialog: P.value.table.useDialog,
isCursorPointer: F.value,
onToggleFullscreen: cr,
onGeneratePdf: D(Sn),
onGenerateCsv: or,
onGenerateImage: Tr,
onGenerateSvg: wr,
onToggleTable: ur,
onToggleLabels: dr,
onToggleTooltip: fr,
onToggleAnnotator: mr,
onCopyAlt: Er,
style: x({ visibility: D(hn) ? D(pn) ? "visible" : "hidden" : "visible" })
}, Fe({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: O(({ isOpen: t, color: n }) => [T(e.$slots, "menuIcon", b(y({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: O(() => [T(e.$slots, "optionTooltip", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: O(() => [T(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: O(() => [T(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: O(() => [T(e.$slots, "optionImg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: O(() => [T(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: O(() => [T(e.$slots, "optionTable", {}, void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionLabels ? {
name: "optionLabels",
fn: O(() => [T(e.$slots, "optionLabels", {}, void 0, !0)]),
key: "7"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: O(({ toggleFullscreen: t, isFullscreen: n }) => [T(e.$slots, "optionFullscreen", b(y({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "8"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: O(({ toggleAnnotator: t, isAnnotator: n }) => [T(e.$slots, "optionAnnotator", b(y({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "9"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: O(({ altCopy: t }) => [T(e.$slots, "optionAltCopy", b(y({ altCopy: t })), void 0, !0)]),
key: "10"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: O(() => [T(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "11"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: O(() => [T(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "12"
} : void 0
]), 1032, /* @__PURE__ */ "backgroundColor.color.isPrinting.isImaging.uid.hasTooltip.hasPdf.hasXls.hasImg.hasSvg.hasTable.hasLabel.hasFullscreen.hasAltCopy.isTooltip.isFullscreen.titles.chartElement.position.hasAnnotator.isAnnotation.callbacks.printScale.tableDialog.isCursorPointer.onGeneratePdf.style".split("."))) : h("", !0),
_("div", Ze, [(S(), g("svg", {
ref_key: "svgRef",
ref: I,
xmlns: D(le),
class: Be({
"vue-data-ui-fullscreen--on": $.value,
"vue-data-ui-fulscreen--off": !$.value,
"vue-data-ui-no-transition": !D(sn)
}),
viewBox: `0 0 ${z.value} ${B.value}`,
style: x(`max-width:100%; overflow: visible; background:transparent;color:${P.value.style.chart.color};`),
"aria-describedby": `chart-instructions-${A.value}`,
tabindex: "0",
onFocus: Nr,
onBlur: Pr,
onKeydown: Fr
}, [
Le(D(Mt)),
e.$slots["chart-background"] ? (S(), g("foreignObject", {
key: 0,
x: W.value.left,
y: W.value.top,
width: Math.max(.1, W.value.width),
height: Math.max(.1, W.value.height),
style: { pointerEvents: "none" }
}, [T(e.$slots, "chart-background", {}, void 0, !0)], 8, $e)) : h("", !0),
P.value.style.chart.grid.show ? (S(), g("g", et, [
P.value.style.chart.grid.horizontalGrid.show ? (S(), g("g", tt, [(S(!0), g(f, null, w(Zn.value, (e) => (S(), g("line", {
x1: e.x1,
x2: e.x2,
y1: e.y,
y2: e.y,
stroke: P.value.style.chart.grid.horizontalGrid.stroke,
"stroke-width": P.value.style.chart.grid.horizontalGrid.strokeWidth,
"stroke-dasharray": P.value.style.chart.grid.horizontalGrid.strokeDasharray,
"stroke-linecap": "round"
}, null, 8, nt))), 256))])) : h("", !0),
P.value.style.chart.grid.verticalGrid.show ? (S(), g("g", rt, [(S(!0), g(f, null, w(K.value, (e, t) => (S(), g("line", {
x1: W.value.left + (t + 1) * W.value.stripWidth,
x2: W.value.left + (t + 1) * W.value.stripWidth,
y1: W.value.top,
y2: W.value.bottom,
stroke: P.value.style.chart.grid.verticalGrid.stroke,
"stroke-width": P.value.style.chart.grid.verticalGrid.strokeWidth,
"stroke-dasharray": P.value.style.chart.grid.verticalGrid.strokeDasharray,
"stroke-linecap": "round"
}, null, 8, it))), 256))])) : h("", !0),
_("line", {
x1: W.value.left,
x2: W.value.left,
y1: W.value.top,
y2: W.value.bottom,
stroke: P.value.style.chart.grid.stroke,
"stroke-width": P.value.style.chart.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, at),
_("line", {
x1: W.value.left,
x2: W.value.right,
y1: W.value.bottom,
y2: W.value.bottom,
stroke: P.value.style.chart.grid.stroke,
"stroke-width": P.value.style.chart.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, ot)
])) : h("", !0),
P.value.style.chart.labels.yAxisLabels.show ? (S(), g("g", {
key: 2,
ref_key: "scaleLabels",
ref: tn
}, [(S(!0), g(f, null, w(Zn.value, (e, t) => (S(), g("text", {
class: Be({ "vue-data-ui-transition": D(sn) }),
key: `sl_${t}`,
transform: `translate(${e.x1 + P.value.style.chart.labels.yAxisLabels.offsetX - 5}, ${e.y + P.value.style.chart.labels.yAxisLabels.fontSize / 3})`,
fill: P.value.style.chart.labels.yAxisLabels.color,
"font-size": P.value.style.chart.labels.yAxisLabels.fontSize,
"text-anchor": "end"
}, E(D(ie)(P.value.style.chart.labels.formatter, e.value, D(l)({
p: P.value.style.chart.labels.prefix,
v: e.value,
s: P.value.style.chart.labels.suffix,
r: P.value.style.chart.labels.yAxisLabels.rounding
}), {
datapoint: e,
seriesIndex: t
})), 11, st))), 128))], 512)) : h("", !0),
P.value.style.chart.labels.xAxisLabels.show ? (S(), g("g", {
key: 3,
ref_key: "timeLabelsEls",
ref: en
}, [(S(!0), g(f, null, w(gr.value, (e, t) => (S(), g("g", null, [String(e).includes("\n") ? (S(), g("text", {
key: 1,
class: "vue-ui-strip-plot-category-name",
transform: `translate(${W.value.left + (t + 1) * W.value.stripWidth - W.value.stripWidth / 2}, ${W.value.bottom + P.value.style.chart.labels.xAxisLabels.fontSize * 2 + P.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${P.value.style.chart.labels.xAxisLabels.rotation})`,
"font-size": P.value.style.chart.labels.xAxisLabels.fontSize,
fill: P.value.style.chart.labels.xAxisLabels.color,
"text-anchor": P.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : P.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle",
innerHTML: D(r)({
content: D(ee)(String(e)),
fontSize: P.value.style.chart.labels.xAxisLabels.fontSize,
fill: P.value.style.chart.labels.xAxisLabels.color,
x: 0,
y: 0
})
}, null, 8, lt)) : (S(), g("text", {
key: 0,
class: "vue-ui-strip-plot-category-name",
transform: `translate(${W.value.left + (t + 1) * W.value.stripWidth - W.value.stripWidth / 2}, ${W.value.bottom + P.value.style.chart.labels.xAxisLabels.fontSize * 2 + P.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${P.value.style.chart.labels.xAxisLabels.rotation})`,
"font-size": P.value.style.chart.labels.xAxisLabels.fontSize,
fill: P.value.style.chart.labels.xAxisLabels.color,
"text-anchor": P.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : P.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle"
}, E(String(e)), 9, ct))]))), 256))], 512)) : h("", !0),
P.value.style.chart.labels.axis.yLabel ? (S(), g("text", {
key: 4,
ref_key: "yAxisLabel",
ref: $t,
fill: P.value.style.chart.labels.axis.color,
"font-size": P.value.style.chart.labels.axis.fontSize,
transform: `translate(${P.value.style.chart.labels.axis.fontSize}, ${W.value.top + W.value.height / 2}) rotate(-90)`,
"text-anchor": "middle"
}, E(P.value.style.chart.labels.axis.yLabel), 9, ut)) : h("", !0),
P.value.style.chart.labels.axis.xLabel ? (S(), g("text", {
key: 5,
ref_key: "xAxisLabel",
ref: Qt,
fill: P.value.style.chart.labels.axis.color,
"font-size": P.value.style.chart.labels.axis.fontSize,
x: W.value.left + W.value.width / 2,
y: B.value - P.value.style.chart.labels.axis.fontSize / 3,
"text-anchor": "middle"
}, E(P.value.style.chart.labels.axis.xLabel), 9, dt)) : h("", !0),
Q.value ? (S(), g(f, { key: 6 }, [
_("line", {
x1: W.value.left,
x2: W.value.right,
y1: Q.value.y,
y2: Q.value.y,
stroke: Q.value.color,
"stroke-width": 1,
class: Be({ "select-circle": P.value.useCssAnimation })
}, null, 10, ft),
_("circle", {
cx: W.value.left,
cy: Q.value.y,
r: 3,
fill: Q.value.color,
class: Be({ "select-circle": P.value.useCssAnimation })
}, null, 10, pt),
_("circle", {
cx: W.value.right,
cy: Q.value.y,
r: 3,
fill: Q.value.color,
class: Be({ "select-circle": P.value.useCssAnimation })
}, null, 10, mt)
], 64)) : h("", !0),
_("defs", null, [(S(!0), g(f, null, w(K.value, (e) => (S(), m(Ae, {
t: "radial",
id: e.id,
key: `r_${e.id}`,
fy: "30%",
stops: [
[
"10%",
D(o)(e.color, P.value.style.chart.plots.gradient.intensity / 100),
1
],
[
"90%",
D(u)(e.color, .1),
1
],
[
"100%",
e.color,
1
]
]
}, null, 8, ["id", "stops"]))), 128))]),
(S(!0), g(f, null, w(Un.value, (e, n) => (S(), g(f, { key: e.id }, [e.path ? (S(), g("path", {
key: 0,
d: e.path,
fill: e.fill,
stroke: e.color,
"fill-opacity": P.value.style.chart.violin.opacity,
"stroke-opacity": P.value.style.chart.violin.strokeOpacity,
"stroke-width": P.value.style.chart.violin.strokeWidth,
style: x({
pointerEvents: Y.value ? "auto" : "none",
cursor: Y.value && F.value ? "pointer" : "default"
}),
onMouseenter: (e) => Y.value && X.value[n] && ir({
boxPlot: X.value[n],
seriesIndex: n,
triggerMode: "pointer"
}),
onMouseleave: t[0] ||= (e) => Y.value && rr()
}, null, 44, ht)) : h("", !0), (S(!0), g(f, null, w(e.connectors, (t, n) => (S(), g("line", {
key: `violin_connector_${e.id}_${n}`,
x1: t.x,
x2: t.x,
y1: t.y1,
y2: t.y2,
stroke: e.color,
"stroke-opacity": P.value.style.chart.violin.strokeOpacity,
"stroke-width": P.value.style.chart.violin.strokeWidth,
"stroke-linecap": "round",
style: { "pointer-events": "none" }
}, null, 8, gt))), 128))], 64))), 128)),
(S(!0), g(f, null, w(X.value, (e, t) => (S(), g("g", {
key: `boxplot_${e.id}`,
style: x({ cursor: F.value ? "pointer" : "default" }),
onMouseenter: (n) => ir({
boxPlot: e,
seriesIndex: t,
triggerMode: "pointer"
}),
onMouseleave: rr
}, [
_("line", {
x1: e.centerX,
x2: e.centerX,
y1: e.upperY,
y2: e.lowerY,
stroke: D(u)(e.boxPlotColor, .2),
"stroke-width": Math.max(1, P.value.style.chart.violin.strokeWidth),
"stroke-linecap": "round"
}, null, 8, vt),
_("rect", {
x: e.boxLeft,
y: Math.min(e.q1Y, e.q3Y),
width: e.boxWidth,
height: Math.max(1, Math.abs(e.q3Y - e.q1Y)),
fill: e.boxPlotColor,
stroke: D(u)(e.boxPlotColor, .2),
"stroke-width": Math.max(1, P.value.style.chart.violin.strokeWidth),
rx: e.boxWidth / 20
}, null, 8, yt),