vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,583 lines • 53.7 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, Bt as n, D as r, Jt as i, Ot as a, X as o, Y as s, _ as ee, b as te, i as c, jt as ne, pt as re, q as ie, t as ae, tt as oe } from "./lib-Bttd6u5E.js";
import { n as se, t as ce } from "./useHints-Dq_w2E8B.js";
import { t as le } from "./useConfig-D3scuR88.js";
import { t as ue } from "./usePrinter-DN5bYhTG.js";
import { n as de, t as fe } from "./BaseScanner-DZvpgOjM.js";
import { t as pe } from "./useSvgExport-DH-FfcqQ.js";
import { t as me } from "./useNestedProp-vPNvh7rV.js";
import { t as he } from "./useThemeCheck-C43Tcqmk.js";
import { t as ge } from "./useTimeLabelCollider-AEcY4Ioe.js";
import { t as _e } from "./img-Bnokohej.js";
import { n as ve } from "./Title-BE3qg9xl.js";
import { t as ye } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as be, t as xe } from "./useResponsive-ZtArZtUf.js";
import { t as l } from "./DefGrad-DVBqDjhO.js";
import { t as Se } from "./A11yDataTable-DdRsVULz.js";
import { t as Ce } from "./useUserOptionState-DK-_1ddE.js";
import { t as we } from "./useChartAccessibility-DYqac8yF.js";
import { t as Te } from "./Legend-CQxUgOd-.js";
import { t as Ee } from "./usePrefersMotion-BC-CsqR1.js";
import { t as De } from "./vue_ui_dumbbell-Bfe_jFyi.js";
import { Fragment as u, Teleport as Oe, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as ke, createTextVNode as Ae, createVNode as g, defineAsyncComponent as _, guardReactiveProps as v, mergeProps as je, nextTick as Me, normalizeClass as Ne, normalizeProps as y, normalizeStyle as b, onBeforeUnmount as Pe, onMounted as Fe, openBlock as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as Ie, shallowRef as Le, toDisplayString as T, toRefs as Re, unref as E, vShow as D, watch as ze, watchEffect as Be, withCtx as O, withDirectives as k } from "vue";
//#region src/components/vue-ui-dumbbell.vue
var Ve = /* @__PURE__ */ e({ default: () => Et }), He = ["id"], Ue = ["id"], We = ["id"], Ge = { style: { position: "relative" } }, Ke = [
"xmlns",
"viewBox",
"aria-describedby"
], qe = [
"x",
"y",
"width",
"height"
], Je = { key: 1 }, Ye = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], Xe = { key: 2 }, Ze = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], Qe = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], $e = [
"transform",
"font-size",
"fill"
], et = [
"x",
"y",
"font-size",
"fill",
"font-weight",
"onMouseenter",
"onMouseleave",
"onClick"
], tt = [
"x",
"y",
"font-size",
"fill",
"onMouseenter",
"onMouseleave",
"onClick"
], nt = [
"x",
"y",
"font-size",
"fill"
], rt = [
"transform",
"font-size",
"fill",
"font-weight",
"text-anchor"
], it = [
"d",
"stroke",
"stroke-width",
"stroke-dasharray"
], at = [
"d",
"stroke",
"stroke-width",
"stroke-dasharray"
], ot = [
"x",
"y",
"height",
"width",
"fill"
], st = [
"transform",
"fill",
"font-size"
], ct = { key: 0 }, lt = { key: 0 }, ut = ["d", "fill"], dt = { key: 1 }, ft = [
"x",
"y",
"height",
"width",
"fill"
], pt = [
"cx",
"cy",
"r",
"fill",
"stroke",
"stroke-width"
], mt = [
"cx",
"cy",
"r",
"fill",
"stroke",
"stroke-width"
], ht = { key: 7 }, gt = [
"x",
"y",
"fill",
"font-size"
], _t = { key: 8 }, vt = [
"x",
"y",
"fill",
"font-size"
], yt = [
"x",
"y",
"width",
"height",
"fill",
"onMouseenter",
"onMouseleave",
"onClick"
], bt = {
key: 0,
style: {
position: "absolute",
top: "100%",
left: "0",
width: "100%"
},
"data-dom-to-png-ignore": "",
"aria-hidden": "true"
}, xt = {
key: 5,
class: "vue-data-ui-watermark"
}, St = ["id"], Ct = [
"xmlns",
"height",
"width"
], wt = ["fill"], Tt = ["innerHTML"], Et = /*#__PURE__*/ ye({
__name: "vue-ui-dumbbell",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint", "copyAlt"],
setup(e, { expose: ye, emit: Ve }) {
let Et = _(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), Dt = _(() => import("./vue-ui-accordion-BxGriZik.js").then((e) => e.n)), Ot = _(() => import("./DataTable-BbKgJ5UI.js")), kt = _(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), At = _(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), jt = _(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), Mt = _(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_dumbbell: Nt } = le(), { isThemeValid: Pt, warnInvalidTheme: Ft } = he(), It = Ee(), A = e, Lt = Ve, Rt = d({
get() {
return !!A.dataset && A.dataset.length;
},
set(e) {
return e;
}
}), j = S(ie()), zt = S(0), M = S(null), Bt = S(null), Vt = S(null), Ht = S(null), Ut = S(null), Wt = S(0), Gt = S(0), Kt = S(0), qt = S(!1), Jt = S(null), Yt = S(null), Xt = S(!1), Zt = S(!1), Qt = S(null), $t = S(null), en = S(null), tn = S(null), N = S(null), P = S(null), F = S(null), nn = S(!1), I = S(!1), L = S(dn());
se({
config: () => L.value,
dataset: () => A.dataset,
component: "VueUiDumbbell",
rules: [ce.emptyArray, {
test: (e) => e.length > 31,
message: [
"👀 The number of series is > 31. Consider:",
"",
"▶️ Using filters to let users choose a maximum number of series to display.",
"",
"▶️ Using multiple instances of the component to display related series."
]
}]
});
let R = d(() => L.value.userOptions.useCursorPointer), rn = d(() => i({
defaultConfig: {
userOptions: { show: !1 },
table: { show: !1 },
useAnimation: !1,
style: { chart: {
backgroundColor: "#99999930",
padding: {
top: 12,
right: 12,
bottom: 12,
left: 12
},
grid: {
horizontalGrid: { stroke: "#6A6A6A" },
verticalGrid: { stroke: "#6A6A6A" }
},
labels: {
axis: {
yLabel: "",
xLabel: ""
},
xAxisLabels: { show: !1 },
yAxisLabels: { show: !1 },
endLabels: { show: !1 },
startLabels: { show: !1 }
},
legend: { backgroundColor: "transparent" },
plots: {
endColor: "#969696",
startColor: "#DBDBDB",
stroke: "#6A6A6A",
evaluationColors: { enable: !1 }
}
} }
},
userConfig: L.value.skeletonConfig ?? {}
})), { loading: an, FINAL_DATASET: on, manualLoading: sn } = de({
...Re(A),
FINAL_CONFIG: L,
prepareConfig: dn,
skeletonDataset: A.config?.skeletonDataset ?? [
{
name: "_",
start: 21,
end: 34
},
{
name: "_",
start: 13,
end: 21
},
{
name: "_",
start: 8,
end: 13
},
{
name: "_",
start: 5,
end: 8
},
{
name: "_",
start: 3,
end: 5
}
],
skeletonConfig: i({
defaultConfig: L.value,
userConfig: rn.value
})
}), { userOptionsVisible: cn, setUserOptionsVisibility: ln, keepUserOptionState: un } = Ce({ config: L.value }), { svgRef: z } = we({ config: L.value.style.chart.title });
function dn() {
let e = me({
userConfig: A.config,
defaultConfig: Nt
}), t = e.theme;
if (!t) return e;
if (!Pt.value(e)) return Ft(e), e;
let n = me({
userConfig: De[t] || A.config,
defaultConfig: e
});
return me({
userConfig: A.config,
defaultConfig: n
});
}
ze(() => A.config, (e) => {
an.value || (L.value = dn()), cn.value = !L.value.userOptions.showOnChartHover, pn(), Wt.value += 1, Gt.value += 1, Kt.value += 1, G.value = L.value.style.chart.rowHeight, K.value = L.value.style.chart.width, H.value.showTable = L.value.table.show;
}, { deep: !0 }), ze(() => on.value, (e) => {
Array.isArray(e) && e.length > 0 && (sn.value = !1), Dn(), On();
}, { deep: !0 });
let B = Le(null), V = Le(null);
Fe(() => {
qt.value = !0, pn();
});
let fn = d(() => !!L.value.debug);
function pn() {
if (ne(A.dataset) ? oe({
componentName: "VueUiDumbbell",
type: "dataset",
debug: fn.value
}) : A.dataset.forEach((e, t) => {
re({
datasetObject: e,
requiredAttributes: [
"name",
"start",
"end"
]
}).forEach((e) => {
Rt.value = !1, oe({
componentName: "VueUiDumbbell",
type: "datasetSerieAttribute",
property: e,
index: t,
debug: fn.value
});
});
}), L.value.responsive) {
let e = be(() => {
let { width: e, height: t } = xe({
chart: M.value,
title: L.value.style.chart.title.text ? Bt.value : null,
legend: L.value.style.chart.legend.show ? Vt.value : null,
source: Ht.value,
noTitle: Ut.value
}), n = L.value.style.chart.title.text ? 24 : 0, r = L.value.style.chart.legend.show ? 24 : 0;
requestAnimationFrame(async () => {
K.value = Math.max(.1, e), G.value = Math.max(.1, (Math.max(.1, t) - (n + r)) / on.value.length), Hn();
});
});
B.value && (V.value && B.value.unobserve(V.value), B.value.disconnect()), B.value = new ResizeObserver(e), V.value = M.value.parentNode, B.value.observe(V.value);
}
Hn();
}
Pe(() => {
X.value != null && (cancelAnimationFrame(X.value), X.value = null), B.value && (V.value && B.value.unobserve(V.value), B.value.disconnect());
});
let { isPrinting: mn, isImaging: hn, generatePdf: gn, generateImage: _n } = ue({
elementId: `dumbbell_${j.value}`,
fileName: L.value.style.chart.title.text || "vue-ui-dumbbell",
options: L.value.userOptions.print
}), vn = d(() => L.value.userOptions.show && !L.value.style.chart.title.text), H = S({ showTable: L.value.table.show });
ze(L, () => {
H.value = { showTable: L.value.table.show };
}, { immediate: !0 });
let U = d(() => on.value.map((e, t) => ({
...e,
start: te(e.start),
end: te(e.end),
id: e.id ?? `${String(e.name)}__${String(e.start)}__${String(e.end)}__${ie()}`
}))), yn = d(() => {
let e = L.value.style.chart.grid, t = U.value.flatMap((e) => [e.start, e.end]).map((e) => Number(e)).filter((e) => Number.isFinite(e)), n = t.length ? Math.min(...t) : 0, r = t.length ? Math.max(...t) : 0;
return {
min: e.scaleMin ?? Math.min(n, 0),
max: e.scaleMax ?? r
};
}), W = d(() => ee(yn.value.min, yn.value.max, L.value.style.chart.grid.scaleSteps)), G = S(L.value.style.chart.rowHeight), K = S(L.value.style.chart.width);
function bn() {
let e = 0;
$t.value && (e = Array.from($t.value.querySelectorAll("text")).reduce((e, t) => {
let n = t.getComputedTextLength();
return n > e ? n : e;
}, 0));
let t = Qt.value ? Qt.value.getBoundingClientRect().width : 0;
return e + t + (t ? 24 + L.value.style.chart.labels.axis.yLabelOffsetX : 0);
}
let xn = S(0), Sn = be((e) => {
xn.value = e;
}, 100);
Be((e) => {
let t = en.value;
if (!t) return;
let n = new ResizeObserver((e) => {
Sn(e[0].contentRect.height);
});
n.observe(t), e(() => n.disconnect());
}), Pe(() => {
xn.value = 0;
});
let Cn = d(() => {
I.value;
let e = 0;
tn.value && (e = tn.value.getBBox().height);
let t = 0;
return en.value && (t = xn.value), e + t;
}), wn = d(() => U.value.length);
function Tn(e, t, n) {
let r = Number(e), i = Number(t.min), a = Number(t.max), o = Number(n.width);
if (!Number.isFinite(r) || !Number.isFinite(i) || !Number.isFinite(a) || !Number.isFinite(o)) return n.left;
let s = a - i;
return s <= 0 ? n.left : n.left + (r - i) / s * o;
}
let q = d(() => {
I.value;
let e = bn(), t = L.value.style.chart.padding, n = L.value.style.chart.labels.axis.xLabel ? L.value.style.chart.labels.axis.xLabelOffsetY : 0, r = G.value * wn.value - Cn.value - t.top - t.bottom - n, i = r / wn.value, a = G.value * wn.value, o = K.value - e - t.left - t.right, s = W.value.ticks.length * (o / W.value.ticks.length);
return {
left: L.value.style.chart.padding.left + e,
right: K.value - L.value.style.chart.padding.right,
top: L.value.style.chart.padding.top,
bottom: a - L.value.style.chart.padding.bottom - Cn.value - n,
width: o,
height: r,
rowHeight: i,
absoluteHeight: a,
widthPlotReference: s
};
}), J = d(() => Math.min(G.value / 2 * .7, L.value.style.chart.plots.radius)), En = S([]), Y = d({
get() {
let e = q.value, t = W.value;
return En.value.map((n, r) => {
let i = Tn(n.start, t, e), a = Tn(n.endVal, t, e), o = i + (a - i) / 2, s = ![null, void 0].includes(n.start) && ![null, void 0].includes(n.end) && n.end > n.start, ee = ![null, void 0].includes(n.start) && ![null, void 0].includes(n.end) && n.end < n.start, te = ![null, void 0].includes(n.start) && ![null, void 0].includes(n.end) && n.end === n.start || [null, void 0].includes(n.start) || [null, void 0].includes(n.end), c = s ? L.value.style.chart.plots.evaluationColors.positive : ee ? L.value.style.chart.plots.evaluationColors.negative : L.value.style.chart.plots.evaluationColors.neutral;
return {
...n,
isPositive: s,
isNegative: ee,
isNeutral: te,
evaluationColor: c,
evaluationGrad: `url(#${s ? "positive" : ee ? "negative" : "neutral"}_grad_${j.value})`,
startX: i,
endX: a,
centerX: o,
y: e.top + r * e.rowHeight + e.rowHeight / 2
};
});
},
set(e) {
En.value = e;
}
});
function Dn() {
En.value = U.value.map((e) => {
let t = Number(e.start);
return {
...e,
endVal: Number.isFinite(t) ? t : 0
};
});
}
let X = S(null);
Fe(() => {
On();
});
function On() {
if (X.value != null && (cancelAnimationFrame(X.value), X.value = null), Dn(), !L.value.useAnimation || It.value) {
Y.value = En.value.map((e) => {
let t = Number(e.end);
return {
...e,
endVal: Number.isFinite(t) ? t : e.endVal
};
});
return;
}
let e = Math.max(1, Math.min(100, L.value.animationSpeed || 100)) / 100, t = U.value.map((e) => {
let t = Number(e.start), n = Number(e.end), r = Number.isFinite(t) ? t : 0;
return (Number.isFinite(n) ? n : r) - r;
}), n = () => {
let r = !0;
Y.value = En.value.map((n, i) => {
let a = Number.isFinite(Number(n.end)) ? Number(n.end) : n.endVal, o = n.endVal + t[i] * e, s = t[i] >= 0 ? Math.min(o, a) : Math.max(o, a);
return s !== a && (r = !1), {
...n,
endVal: s
};
}), r ? X.value = null : X.value = requestAnimationFrame(n);
};
X.value = requestAnimationFrame(n);
}
let kn = d(() => L.value.style.chart.plots.evaluationColors.enable ? [
{
name: L.value.style.chart.legend.labelNegative,
color: L.value.style.chart.plots.gradient.show ? `url(#negative_grad_${j.value})` : L.value.style.chart.plots.evaluationColors.negative
},
{
name: L.value.style.chart.legend.labelNeutral,
color: L.value.style.chart.plots.gradient.show ? `url(#neutral_grad_${j.value})` : L.value.style.chart.plots.evaluationColors.neutral
},
{
name: L.value.style.chart.legend.labelPositive,
color: L.value.style.chart.plots.gradient.show ? `url(#positive_grad_${j.value})` : L.value.style.chart.plots.evaluationColors.positive
}
] : [{
name: L.value.style.chart.legend.labelStart,
color: L.value.style.chart.plots.gradient.show ? `url(#start_grad_${j.value})` : L.value.style.chart.plots.startColor
}, {
name: L.value.style.chart.legend.labelEnd,
color: L.value.style.chart.plots.gradient.show ? `url(#end_grad_${j.value})` : L.value.style.chart.plots.endColor
}]), An = d(() => ({
cy: "donut-div-legend",
backgroundColor: L.value.style.chart.legend.backgroundColor,
color: L.value.style.chart.legend.color,
fontSize: L.value.style.chart.legend.fontSize,
paddingBottom: 12,
paddingTop: 12,
fontWeight: L.value.style.chart.legend.bold ? "bold" : ""
})), Z = d(() => ({
head: Y.value.map((e) => ({ name: e.name })),
body: Y.value.map((e) => ({
start: e.start,
end: e.end
}))
})), Q = d(() => {
let e = [
L.value.table.columnNames.series,
L.value.table.columnNames.start,
L.value.table.columnNames.end,
L.value.table.columnNames.progression
], t = Z.value.head.map((e, t) => {
let n = o({
p: L.value.style.chart.labels.prefix,
v: Z.value.body[t].start,
s: L.value.style.chart.labels.suffix,
r: L.value.table.td.roundingValue
}), r = o({
p: L.value.style.chart.labels.prefix,
v: Z.value.body[t].end,
s: L.value.style.chart.labels.suffix,
r: L.value.table.td.roundingValue
}), i = o({
v: 100 * (Z.value.body[t].end / Z.value.body[t].start - 1),
s: "%",
r: L.value.table.td.roundingPercentage
});
return [
{ name: e.name },
n,
r,
i
];
}), n = {
th: {
backgroundColor: L.value.table.th.backgroundColor,
color: L.value.table.th.color,
outline: L.value.table.th.outline
},
td: {
backgroundColor: L.value.table.td.backgroundColor,
color: L.value.table.td.color,
outline: L.value.table.td.outline
},
breakpoint: L.value.table.responsiveBreakpoint
};
return {
colNames: [
L.value.table.columnNames.series,
L.value.table.columnNames.start,
L.value.table.columnNames.end,
L.value.table.columnNames.progression
],
head: e,
body: t,
config: n
};
});
function jn(e = null) {
Me(() => {
let n = Z.value.head.map((e, t) => [
[e.name],
[Z.value.body[t].start],
[Z.value.body[t].end]
]), i = [
[L.value.style.chart.title.text],
[L.value.style.chart.title.subtitle.text],
[
[L.value.table.columnNames.series],
[L.value.table.columnNames.start],
[L.value.table.columnNames.end]
]
].concat(n), a = r(i);
e ? e(a) : t({
csvContent: a,
title: L.value.style.chart.title.text || "vue-ui-dumbbell"
});
});
}
let $ = S(!1);
function Mn(e) {
$.value = e, zt.value += 1;
}
function Nn() {
return U.value;
}
function Pn() {
H.value.showTable = !H.value.showTable;
}
let Fn = S(!1);
function In() {
Fn.value = !Fn.value;
}
async function Ln({ scale: e = 2 } = {}) {
if (!M.value) return;
let { width: t, height: n } = M.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await _e({
domElement: M.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: L.value.style.chart.title.text,
width: t,
height: n,
aspectRatio: r
};
}
let Rn = d(() => W.value.ticks), zn = d(() => ({
start: 0,
end: Rn.value.length
}));
ge({
timeLabelsEls: en,
timeLabels: Rn,
slicer: zn,
configRef: L,
rotationPath: [
"style",
"chart",
"labels",
"xAxisLabels",
"rotation"
],
autoRotatePath: [
"style",
"chart",
"labels",
"xAxisLabels",
"autoRotate",
"enable"
],
isAutoSize: !1,
width: K,
height: G,
targetClass: ".vue-ui-dumbbell-scale-label",
rotation: L.value.style.chart.labels.xAxisLabels.autoRotate.angle
});
function Bn({ rowHeight: e, fontSize: t, showProgression: n }) {
if (!n) return !1;
let r = e / 3, i = e / 1.3;
return Math.abs(i - r) < t * 1.2;
}
let Vn = (() => {
let e = null, t = 0;
return (n) => {
if (n === I.value) {
e = null, t = 0;
return;
}
e === null || e !== n ? (e = n, t = 1) : (t += 1, t >= 1 && (I.value = n, e = null, t = 0));
};
})(), Hn = be(() => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
let e = Bn({
rowHeight: q.value.rowHeight,
fontSize: L.value.style.chart.labels.yAxisLabels.fontSize,
showProgression: L.value.style.chart.labels.yAxisLabels.showProgression
});
Vn(e);
});
});
}, 100);
function Un({ datapoint: e, seriesIndex: t }) {
N.value = t, P.value = e, L.value.events.datapointEnter && L.value.events.datapointEnter({
datapoint: e,
seriesIndex: t
});
}
function Wn({ datapoint: e, seriesIndex: t }) {
N.value = null, P.value = null, L.value.events.datapointLeave && L.value.events.datapointLeave({
datapoint: e,
seriesIndex: t
});
}
function Gn({ datapoint: e, seriesIndex: t }) {
L.value.events.datapointClick && L.value.events.datapointClick({
datapoint: e,
seriesIndex: t
}), Lt("selectDatapoint", {
...e,
seriesIndex: t
});
}
let Kn = d(() => {
if (P.value === null) return 0;
let e = ![null, void 0].includes(P.value.start), t = ![null, void 0].includes(P.value.end);
return e && t ? Math.min(P.value.startX, P.value.endX) + Math.abs(P.value.startX - P.value.endX) / 2 : e && !t ? P.value.startX : t && !e ? P.value.endX : null;
}), qn = d(() => {
if (P.value === null) return "";
let e = ![null, void 0].includes(P.value.start), t = ![null, void 0].includes(P.value.end), n = "", r = "";
return e && (n = c(L.value.style.chart.labels.formatter, P.value.start, o({
p: L.value.style.chart.labels.prefix,
v: P.value.start,
s: L.value.style.chart.labels.suffix,
r: L.value.style.chart.labels.startLabels.rounding
}), {
datapoint: P.value,
seriesIndex: N.value
})), t && (r = c(L.value.style.chart.labels.formatter, P.value.end, o({
p: L.value.style.chart.labels.prefix,
v: P.value.end,
s: L.value.style.chart.labels.suffix,
r: L.value.style.chart.labels.startLabels.rounding
}), {
datapoint: P.value,
seriesIndex: N.value
})), e && t ? `${n} → ${r}` : e && !t ? n : t && !e ? r : "";
}), Jn = d(() => {
let e = L.value.table.useDialog && !L.value.table.show, t = H.value.showTable;
return {
component: e ? Mt : Dt,
title: `${L.value.style.chart.title.text}${L.value.style.chart.title.subtitle.text ? `: ${L.value.style.chart.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: L.value.table.th.backgroundColor,
color: L.value.table.th.color,
headerColor: L.value.table.th.color,
headerBg: L.value.table.th.backgroundColor,
isFullscreen: $.value,
fullscreenParent: M.value,
forcedWidth: Math.min(800, window.innerWidth * .8),
isCursorPointer: R.value
} : {
hideDetails: !0,
config: {
open: t,
maxHeight: 1e4,
body: {
backgroundColor: L.value.style.chart.backgroundColor,
color: L.value.style.chart.color
},
head: {
backgroundColor: L.value.style.chart.backgroundColor,
color: L.value.style.chart.color
}
}
}
};
});
ze(() => H.value.showTable, (e) => {
L.value.table.show || (e && L.value.table.useDialog && Jt.value ? Jt.value.open() : "close" in Jt.value && Jt.value.close());
});
function Yn() {
H.value.showTable = !1, Yt.value && Yt.value.setTableIconState(!1);
}
let Xn = d(() => kn.value.map((e) => ({
...e,
shape: "circle"
}))), Zn = d(() => L.value.style.chart.backgroundColor), Qn = d(() => L.value.style.chart.legend), $n = d(() => L.value.style.chart.title), { exportSvg: er, getSvg: tr } = pe({
svg: z,
title: $n,
legend: Qn,
legendItems: Xn,
backgroundColor: Zn
});
async function nr({ isCb: e }) {
Zt.value = !0, await Me();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await tr();
await Promise.resolve(L.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(er());
} finally {
Zt.value = !1;
}
}
function rr(e) {
if (e?.stage === "start") {
Xt.value = !0;
return;
}
if (e?.stage === "end") {
Xt.value = !1;
return;
}
_n();
}
async function ir() {
if (Lt("copyAlt", {
config: L.value,
dataset: Y.value
}), !L.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(L.value.userOptions.callbacks.altCopy({
config: L.value,
dataset: Y.value
}));
}
function ar(e) {
let t = Y.value.length;
return t ? (e % t + t) % t : null;
}
function or() {
if (F.value !== null) {
let e = Y.value[F.value];
e && Wn({
datapoint: e,
seriesIndex: F.value
});
}
F.value = null, N.value = null, P.value = null;
}
function sr() {
F.value = null, nn.value = !0;
}
function cr() {
or(), nn.value = !1;
}
function lr(e) {
if (!z.value || Fn.value || document.activeElement !== z.value || !Y.value.length) return;
let t = ["ArrowUp", "ArrowLeft"].includes(e.key), n = ["ArrowDown", "ArrowRight"].includes(e.key), r = e.key === "Enter" || e.key === " ", i = e.key === "Escape";
if (!t && !n && !r && !i) return;
if (e.preventDefault(), e.stopPropagation(), i) {
or();
return;
}
if (r) {
if (F.value === null) return;
let e = Y.value[F.value];
if (!e) return;
Gn({
datapoint: e,
seriesIndex: F.value
});
return;
}
let a = F.value;
a = a === null ? n ? 0 : Y.value.length - 1 : ar(a + (n ? 1 : -1));
let o = Y.value[a];
o && (F.value = a, Un({
datapoint: o,
seriesIndex: a
}));
}
let ur = d(() => ({
head: Q.value.head,
body: Q.value.body.map((e) => [
e[0]?.name ?? "",
e[1],
e[2],
e[3]
]),
caption: L.value.a11y.translations.tableCaption,
notice: L.value.a11y.translations.tableAvailable
}));
return ye({
getData: Nn,
getImage: Ln,
generatePdf: gn,
generateCsv: jn,
generateImage: _n,
generateSvg: nr,
toggleTable: Pn,
toggleAnnotator: In,
toggleFullscreen: Mn,
copyAlt: ir
}), (e, t) => (x(), m("div", {
ref_key: "dumbbellChart",
ref: M,
class: Ne(`vue-data-ui-component vue-ui-dumbbell ${$.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: b(`font-family:${L.value.style.fontFamily};width:100%; text-align:center;background:${L.value.style.chart.backgroundColor};${L.value.responsive ? "height:100%" : ""}`),
id: `dumbbell_${j.value}`,
onMouseenter: t[1] ||= () => E(ln)(!0),
onMouseleave: t[2] ||= () => E(ln)(!1)
}, [
h("div", {
id: `chart-instructions-${j.value}`,
class: "sr-only"
}, [h("p", null, T(L.value.a11y.translations.keyboardNavigation), 1)], 8, Ue),
ur.value.body.length ? (x(), f(Se, {
key: 0,
uid: j.value,
head: ur.value.head,
body: ur.value.body,
caption: ur.value.caption,
notice: ur.value.notice
}, null, 8, [
"uid",
"head",
"body",
"caption",
"notice"
])) : p("", !0),
L.value.userOptions.buttons.annotator ? (x(), f(E(kt), {
key: 1,
svgRef: E(z),
backgroundColor: L.value.style.chart.backgroundColor,
color: L.value.style.chart.color,
active: Fn.value,
isCursorPointer: R.value,
onClose: In
}, {
"annotator-action-close": O(() => [w(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": O(({ color: t }) => [w(e.$slots, "annotator-action-color", y(v({ color: t })), void 0, !0)]),
"annotator-action-draw": O(({ mode: t }) => [w(e.$slots, "annotator-action-draw", y(v({ mode: t })), void 0, !0)]),
"annotator-action-undo": O(({ disabled: t }) => [w(e.$slots, "annotator-action-undo", y(v({ disabled: t })), void 0, !0)]),
"annotator-action-redo": O(({ disabled: t }) => [w(e.$slots, "annotator-action-redo", y(v({ disabled: t })), void 0, !0)]),
"annotator-action-delete": O(({ disabled: t }) => [w(e.$slots, "annotator-action-delete", y(v({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : p("", !0),
vn.value ? (x(), m("div", {
key: 2,
ref_key: "noTitle",
ref: Ut,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : p("", !0),
L.value.style.chart.title.text ? (x(), m("div", {
key: 3,
ref_key: "chartTitle",
ref: Bt,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [(x(), f(ve, {
key: `title_${Wt.value}`,
config: {
title: {
cy: "donut-div-title",
...L.value.style.chart.title
},
subtitle: {
cy: "donut-div-subtitle",
...L.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : p("", !0),
h("div", { id: `legend-top-${j.value}` }, null, 8, We),
L.value.userOptions.show && Rt.value && (E(un) || E(cn)) ? (x(), f(E(At), {
ref_key: "userOptionsRef",
ref: Yt,
key: `user_option_${zt.value}`,
backgroundColor: L.value.style.chart.backgroundColor,
color: L.value.style.chart.color,
isPrinting: E(mn),
isImaging: E(hn),
uid: j.value,
hasPdf: L.value.userOptions.buttons.pdf,
hasXls: L.value.userOptions.buttons.csv,
hasImg: L.value.userOptions.buttons.img,
hasSvg: L.value.userOptions.buttons.svg,
hasTable: L.value.userOptions.buttons.table,
hasFullscreen: L.value.userOptions.buttons.fullscreen,
hasAltCopy: L.value.userOptions.buttons.altCopy,
isFullscreen: $.value,
titles: { ...L.value.userOptions.buttonTitles },
chartElement: M.value,
position: L.value.userOptions.position,
hasAnnotator: L.value.userOptions.buttons.annotator,
isAnnotation: Fn.value,
callbacks: L.value.userOptions.callbacks,
printScale: L.value.userOptions.print.scale,
tableDialog: L.value.table.useDialog,
isCursorPointer: R.value,
onToggleFullscreen: Mn,
onGeneratePdf: E(gn),
onGenerateCsv: jn,
onGenerateImage: rr,
onGenerateSvg: nr,
onToggleTable: Pn,
onToggleAnnotator: In,
onCopyAlt: ir,
style: b({ visibility: E(un) ? E(cn) ? "visible" : "hidden" : "visible" })
}, ke({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: O(({ isOpen: t, color: n }) => [w(e.$slots, "menuIcon", y(v({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: O(() => [w(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: O(() => [w(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: O(() => [w(e.$slots, "optionImg", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: O(() => [w(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: O(() => [w(e.$slots, "optionTable", {}, void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: O(({ toggleFullscreen: t, isFullscreen: n }) => [w(e.$slots, "optionFullscreen", y(v({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: O(({ toggleAnnotator: t, isAnnotator: n }) => [w(e.$slots, "optionAnnotator", y(v({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "7"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: O(({ altCopy: t }) => [w(e.$slots, "optionAltCopy", y(v({ altCopy: t })), void 0, !0)]),
key: "8"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: O(() => [w(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "9"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: O(() => [w(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "10"
} : void 0
]), 1032, [
"backgroundColor",
"color",
"isPrinting",
"isImaging",
"uid",
"hasPdf",
"hasXls",
"hasImg",
"hasSvg",
"hasTable",
"hasFullscreen",
"hasAltCopy",
"isFullscreen",
"titles",
"chartElement",
"position",
"hasAnnotator",
"isAnnotation",
"callbacks",
"printScale",
"tableDialog",
"isCursorPointer",
"onGeneratePdf",
"style"
])) : p("", !0),
h("div", Ge, [(x(), m("svg", {
ref_key: "svgRef",
ref: z,
xmlns: E(ae),
class: Ne({
"vue-data-ui-fullscreen--on": $.value,
"vue-data-ui-fulscreen--off": !$.value
}),
viewBox: `0 0 ${K.value} ${q.value.absoluteHeight <= 0 ? 10 : q.value.absoluteHeight}`,
style: b(`max-width:100%; overflow: visible; background:transparent;color:${L.value.style.chart.color}`),
"aria-describedby": `chart-instructions-${j.value}`,
tabindex: "0",
onFocus: sr,
onBlur: cr,
onKeydown: lr
}, [
g(E(jt)),
e.$slots["chart-background"] ? (x(), m("foreignObject", {
key: 0,
x: q.value.left,
y: q.value.top,
width: Math.max(.1, q.value.width),
height: Math.max(.1, q.value.height),
style: { pointerEvents: "none" }
}, [w(e.$slots, "chart-background", {}, void 0, !0)], 8, qe)) : p("", !0),
L.value.style.chart.grid.verticalGrid.show ? (x(), m("g", Je, [(x(!0), m(u, null, C(W.value.ticks, (e, t) => (x(), m("line", {
x1: q.value.left + t * q.value.width / (W.value.ticks.length - 1),
x2: q.value.left + t * q.value.width / (W.value.ticks.length - 1),
y1: q.value.top,
y2: q.value.bottom,
stroke: L.value.style.chart.grid.verticalGrid.stroke,
"stroke-width": L.value.style.chart.grid.verticalGrid.strokeWidth,
"stroke-dasharray": L.value.style.chart.grid.verticalGrid.strokeDasharray
}, null, 8, Ye))), 256))])) : p("", !0),
L.value.style.chart.grid.horizontalGrid.show ? (x(), m("g", Xe, [(x(!0), m(u, null, C(U.value, (e, t) => (x(), m("line", {
x1: q.value.left,
x2: q.value.right,
y1: q.value.top + t * q.value.rowHeight,
y2: q.value.top + t * q.value.rowHeight,
stroke: L.value.style.chart.grid.horizontalGrid.stroke,
"stroke-width": L.value.style.chart.grid.horizontalGrid.strokeWidth,
"stroke-dasharray": L.value.style.chart.grid.horizontalGrid.strokeDasharray
}, null, 8, Ze))), 256)), h("line", {
x1: q.value.left,
x2: q.value.right,
y1: q.value.bottom,
y2: q.value.bottom,
stroke: L.value.style.chart.grid.horizontalGrid.stroke,
"stroke-width": L.value.style.chart.grid.horizontalGrid.strokeWidth,
"stroke-dasharray": L.value.style.chart.grid.horizontalGrid.strokeDasharray
}, null, 8, Qe)])) : p("", !0),
L.value.style.chart.labels.axis.yLabel ? (x(), m("text", {
key: 3,
ref_key: "yAxisLabel",
ref: Qt,
transform: `translate(${L.value.style.chart.labels.axis.fontSize}, ${q.value.absoluteHeight / 2}), rotate(-90)`,
"font-size": L.value.style.chart.labels.axis.fontSize,
fill: L.value.style.chart.labels.axis.color,
"text-anchor": "middle"
}, T(L.value.style.chart.labels.axis.yLabel), 9, $e)) : p("", !0),
L.value.style.chart.labels.yAxisLabels.show ? (x(), m("g", {
key: 4,
ref_key: "serieLabels",
ref: $t
}, [(x(!0), m(u, null, C(Y.value, (e, t) => (x(), m("text", {
class: "vue-ui-dumbbell-serie-name",
key: `serieLabel_${e.id}_${t}`,
x: q.value.left - 6 + L.value.style.chart.labels.yAxisLabels.offsetX,
y: q.value.top + t * q.value.rowHeight + (!L.value.style.chart.labels.yAxisLabels.showProgression || I.value ? q.value.rowHeight / 2 : q.value.rowHeight / 3) + L.value.style.chart.labels.yAxisLabels.fontSize / 3,
"font-size": L.value.style.chart.labels.yAxisLabels.fontSize,
fill: L.value.style.chart.labels.yAxisLabels.color,
"font-weight": L.value.style.chart.labels.yAxisLabels.bold ? "bold" : "normal",
"text-anchor": "end",
onMouseenter: (n) => Un({
datapoint: e,
seriesIndex: t
}),
onMouseleave: (n) => Wn({
datapoint: e,
seriesIndex: t
}),
onClick: (n) => Gn({
datapoint: e,
seriesIndex: t
})
}, T(e.name) + " " + T(I.value && L.value.style.chart.labels.yAxisLabels.showProgression ? [null, void 0].includes(e.start) || [null, void 0].includes(e.end) ? "" : `(${E(c)(L.value.style.chart.labels.yAxisLabels.formatter, 100 * (e.end / e.start - 1), E(o)({
v: 100 * (e.end / e.start - 1),
s: "%",
r: L.value.style.chart.labels.yAxisLabels.rounding
}), { datapoint: e })})` : ""), 41, et))), 128)), L.value.style.chart.labels.yAxisLabels.showProgression && !I.value ? (x(!0), m(u, { key: 0 }, C(Y.value, (e, t) => (x(), m("text", {
class: "vue-ui-dumbbell-serie-value",
x: q.value.left - 6 + L.value.style.chart.labels.yAxisLabels.offsetX,
y: q.value.top + t * q.value.rowHeight + q.value.rowHeight / 1.3 + L.value.style.chart.labels.yAxisLabels.fontSize / 3,
"font-size": L.value.style.chart.labels.yAxisLabels.fontSize,
fill: L.value.style.chart.labels.yAxisLabels.color,
"text-anchor": "end",
onMouseenter: (n) => Un({
datapoint: e,
seriesIndex: t
}),
onMouseleave: (n) => Wn({
datapoint: e,
seriesIndex: t
}),
onClick: (n) => Gn({
datapoint: e,
seriesIndex: t
})
}, T([null, void 0].includes(e.start) || [null, void 0].includes(e.end) ? "" : E(c)(L.value.style.chart.labels.yAxisLabels.formatter, 100 * (e.end / e.start - 1), E(o)({
v: 100 * (e.end / e.start - 1),
s: "%",
r: L.value.style.chart.labels.yAxisLabels.rounding
}), { datapoint: e })), 41, tt))), 256)) : p("", !0)], 512)) : p("", !0),
L.value.style.chart.labels.axis.xLabel ? (x(), m("text", {
key: 5,
ref_key: "xAxisLabel",
ref: tn,
x: q.value.left + q.value.width / 2,
y: q.value.absoluteHeight - L.value.style.chart.labels.axis.fontSize / 3,
"font-size": L.value.style.chart.labels.axis.fontSize,
fill: L.value.style.chart.labels.axis.color,
"text-anchor": "middle"
}, T(L.value.style.chart.labels.axis.xLabel), 9, nt)) : p("", !0),
L.value.style.chart.labels.xAxisLabels.show ? (x(), m("g", {
key: 6,
ref_key: "scaleLabels",
ref: en
}, [(x(!0), m(u, null, C(W.value.ticks, (e, t) => (x(), m("text", {
class: "vue-ui-dumbbell-scale-label",
key: `tick_${t}`,
transform: `translate(${q.value.left + t * (q.value.width / (W.value.ticks.length - 1))}, ${q.value.bottom + L.value.style.chart.labels.xAxisLabels.fontSize + L.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${L.value.style.chart.labels.xAxisLabels.rotation})`,
"font-size": L.value.style.chart.labels.xAxisLabels.fontSize,
fill: L.value.style.chart.labels.xAxisLabels.color,
"font-weight": L.value.style.chart.labels.xAxisLabels.bold ? "bold" : "normal",
"text-anchor": L.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : L.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle"
}, T(E(c)(L.value.style.chart.labels.formatter, e, E(o)({
p: L.value.style.chart.labels.prefix,
v: e,
s: L.value.style.chart.labels.suffix,
r: L.value.style.chart.labels.xAxisLabels.rounding
}), {
datapoint: e,
seriesIndex: t
})), 9, rt))), 128))], 512)) : p("", !0),
k(h("g", null, [
k(h("path", {
d: `M ${P.value ? P.value.startX : q.value.left},${q.value.top} ${P.value ? P.value.startX : q.value.left},${q.value.bottom}`,
stroke: P.value ? L.value.style.chart.plots.evaluationColors.enable ? P.value.evaluationColor : L.value.style.chart.plots.startColor : "transparent",
"stroke-width": L.value.style.chart.comparisonLines.strokeWidth,
"stroke-dasharray": L.value.style.chart.comparisonLines.strokeDasharray,
style: { transition: "all 0.3s ease-in-out" }
}, null, 8, it), [[D, P.value !== null && ![null, void 0].includes(P.value.start)]]),
k(h("path", {
d: `M ${P.value ? P.value.endX : q.value.left},${q.value.top} ${P.value ? P.value.endX : q.value.left},${q.value.bottom}`,
stroke: P.value ? L.value.style.chart.plots.evaluationColors.enable ? P.value.evaluationColor : L.value.style.chart.plots.endColor : "transparent",
"stroke-width": L.value.style.chart.comparisonLines.strokeWidth,
"stroke-dasharray": L.value.style.chart.comparisonLines.strokeDasharray,
style: { transition: "all 0.3s ease-in-out" }
}, null, 8, at), [[D, P.value !== null && ![null, void 0].includes(P.value.end)]]),
k(h("rect", {
x: P.value ? Math.min(P.value.startX, P.value.endX) : q.value.left,
y: q.value.top,
height: Math.max(.1, q.value.height),
width: P.value ? Math.max(.1, Math.abs(P.value.endX - P.value.startX)) : 0,
fill: P.value ? E(n)(L.value.style.chart.comparisonLines.rectColor, L.value.style.chart.comparisonLines.rectOpacity) : "transparent",
style: { transition: "all 0.3s ease-in-out" }
}, null, 8, ot), [[D, L.value.style.chart.comparisonLines.showRect && P.value !== null && ![null, void 0].includes(P.value.start) && ![null, void 0].includes(P.value.end)]]),
k(h("text", {
transform: `translate(${Kn.value == null ? 0 : Kn.value}, ${q.value.top - 6})`,
fill: L.value.style.chart.comparisonLines.labelColor,
"font-size": L.value.style.chart.comparisonLines.labelFontSize,
"text-anchor": "middle",
style: { transition: "all 0.3s ease-in-out" }
}, T(qn.value), 9, st), [[D, P.value !== null && Kn.value !== null && L.value.style.chart.comparisonLines.showLabel]])
], 512), [[D, L.value.style.chart.comparisonLines.show && N.value !== null]]),
h("defs", null, [
g(l, {
t: "radial",
id: `start_grad_${j.value}`,
fy: "30%",
stops: [
[
"10%",
E(a)(L.value.style.chart.plots.startColor, L.value.style.chart.plots.gradient.intensity / 100),
1
],
[
"90%",
E(s)(L.value.style.chart.plots.startColor, .1),
1
],
[
"100%",
L.value.style.chart.plots.startColor,
1
]
]
}, null, 8, ["id", "stops"]),
g(l, {
t: "radial",
id: `end_grad_${j.value}`,
fy: "30%",
stops: [
[
"10%",
E(a)(L.value.style.chart.plots.endColor, L.value.style.chart.plots.gradient.intensity / 100),
1
],
[
"90%",
E(s)(L.value.style.chart.plots.endColor, .1),
1
],
[
"100%",
L.value.style.chart.plots.endColor,
1
]
]
}, null, 8, ["id", "stops"]),
g(l, {
t: "radial",
id: `positive_grad_${j.value}`,
fy: "30%",
stops: [
[
"10%",
E(a)(L.value.style.chart.plots.evaluationColors.positive, L.value.style.chart.plots.gradient.intensity / 100),
1
],
[
"90%",
E(s)(L.value.style.chart.plots.evaluationColors.positive, .1),
1
],
[
"100%",
L.value.style.chart.plots.evaluationColors.positive,
1
]
]
}, null, 8, ["id", "stops"]),
g(l, {
t: "radial",
id: `negative_grad_${j.value}`,
fy: "30%",
stops: [
[
"10%",
E(a)(L.value.style.chart.plots.evaluationColors.negative, L.value.style.chart.plots.gradient.intensity / 100),
1
],
[
"90%",
E(s)(L.value.style.chart.plots.evaluationColors.negative, .1),
1
],
[
"100%",
L.value.style.chart.plots.evaluationColors.negative,
1
]
]
}, null, 8, ["id", "stops"]),
g(l, {
t: "radial",
id: `neutral_grad_${j.value}`,
fy: "30%",
stops: [
[
"10%",
E(a)(L.value.style.chart.plots.evaluationColors.neutral, L.value.style.chart.plots.gradient.intensity / 100),
1
],
[
"90%",
E(s)(L.value.style.chart.plots.evaluationColors.neutral, .1),
1
],
[
"100%",
L.value.style.chart.plots.evaluationColors.neutral,
1
]
]
}, null, 8, ["id", "stops"])
]),
(x(!0), m(u, null, C(Y.value, (e, t) => (x(), m("g", { key: `plot_${t}_${e.id}` }, [
h("defs", null, [g(l, {
t: "linear",
id: `grad_pos_${j.value}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%",
stops: [[
"0%",
L.value.style.chart.plots.startColor,
1
], [
"100%",
L.value.style.chart.plots.endColor,
1
]]
}, null, 8, ["id", "stops"]), g(l, {
t: "linear",
id: `grad_neg_${j.value}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%",
stops: [[
"0%",
L.value.style.chart.plots.endColor,
1
], [
"100%",
L.value.style.chart.plots.startColor,
1
]]
}, null, 8, ["id", "stops"])]),
![void 0, null].includes(e.end) && ![void 0, null].includes(e.start) ? (x(), m("g", ct, [L.value.style.chart.plots.link.type === "curved" ? (x(), m("g", lt, [h("path", {
d: `M
${e.startX},${e.y + J.value / 2}
C ${e.centerX},${e.y} ${e.centerX},${e.y}
${e.endX},${e.y + J.value / 2}
L ${e.endX},${e.y - J.value / 2}
C ${e.centerX},${e.y} ${e.centerX},${e.y}
${e.startX},${e.y - J.value / 2}
Z
`,
fill: L.value.style.chart.plots.evaluationColors.enable ? e.evaluationColor : e.endX > e.startX ? `url(#grad_pos_${j.value})` : `url(#grad_neg_${j.value})`
}, null, 8, ut)])) : (x(), m("g", dt, [h("rect", {
x: e.endX > e.startX ? e.startX : e.endX,
y: e.y - L.value.style.chart.plots.link.strokeWidth / 2,
height: Math.max(.01, L.value.style.chart.plots.link.strokeWidth),
width: Math.max(.01, Math.abs(e.endX - e.startX)),
fill: L.value.style.chart.plots.evaluationColors.enable ? e.evaluationColor : e.endX > e.startX ? `url(#grad_pos_${j.value})` : `url(#grad_neg_${j.value})`
}, null, 8, ft)]))])) : p("", !0),
[null, void 0].includes(e.start) ? p("", !0) : (x(), m("circle", {
key: 1,
cx: e.startX,
cy: e.y,
r: J.value,
fill: L.value.style.chart.plots.gradient.show ? L.value.style.chart.plots.evaluationColors.enable ? e.evaluationGrad : `url(#start_grad_${j.value})` : L.value.style.chart.plots.evaluationColors.enable ? e.evaluationColor : L.value.style.chart.plots.startColor,
stroke: L.value.style.chart.plots.stroke,
"stroke-width": L.value.style.chart.plots.strokeWidth
}, null, 8, pt)),
[null, void 0].includes(e.end) ? p("", !0) : (x(), m("circle", {
key: 2,
cx: e.endX,
cy: e.y,
r: J.value,
fill: L.value.style.chart.plots.gradient.show ? L.value.style.chart.plots.evaluationColors.enable ? e.evaluationGrad : `url(#end_grad_${j.value})` : L.value.style.chart.plots.evaluationColors.enable ? e.evaluationColor : L.value.style.chart.plots.endColor,
stroke: L.value.style.chart.plots.stroke,
"stroke-width": L.value.style.chart.plots.strokeWidth
}, null, 8, mt))
]))), 128)),
L.value.style.chart.labels.startLabels.show ? (x(), m("g", ht, [(x(!0), m(u, null, C(Y.value, (e, t) => (x(), m("g", { key: `start_label_${t}_${e.id}` }, [[null, void 0].includes(e.start) ? p("", !0) : (x(), m("text", {
key: 0,
x: e.startX,
y: e.y + J.value * 2 + L.value.style.chart.labels.startLabels.fontSize / 2,
fill: L.value.style.chart.plots.evaluationColors.enable && L.value.style.chart.labels.startLabels.useEvaluationColor ? e.evaluationColor : L.value.style.chart.labels.startLabels.useStartColor ? L.value.style.chart.plots.startColor : L.value.style.chart.labels.startLabels.color,
"font-size": L.value.style.chart.labels.startLabels.fontSize,
"text-anchor": "middle"
}, T(E(c)(L.value.style.chart.labels.formatter, e.start, E(o)({
p: L.value.style.chart.labels.prefix,
v: e.start,
s: L.value.style.chart.labels.suffix,
r: L.value.style.chart.labels.startLabels.rounding
}), {
datapoint: e,
seriesIndex: t
})), 9, gt))]))), 128))])) : p("", !0),
L.value.style.chart.labels.endLabels.show ? (x(), m("g", _t, [(x(!0), m(u, null, C(Y.value, (e, t) => (x(), m("g", { key: `end_label_${t}_${e.id}` }, [[null, void 0].includes(e.end) ? p("", !0) : (x(), m("text", {
key: 0,
x: e.endX,
y: e.y - (J.value * 2 - L.value.style.chart.labels.startLabels.fontSize / 3),
fill: L.value.style.chart.plots.evaluationColors.enable && L.value.style.chart.labels.endLabels.useEvaluationColor ? e.evaluationColor : L.value.style.chart.labels.endLabels.useEndColor ? L.value.style.chart.plots.endColor : L.value.style.chart.labels.endLabels.color,
"font-size": L.value.style.chart.labels.endLabels.fontSize,
"text-anchor": "middle"
}, T(E(c)(L.value.style.chart.labels.formatter, e.end, E(o)({
p: L.value.style.chart.labels.prefix,
v: e.end,
s: L.value.style.chart.labels.suffix,
r: L.value.style.chart.labels.endLabels.rounding
}), {
datapoint: e,
seriesIndex: t
})), 9, vt))]))), 128))])) : p("", !0),
h("g", null, [(x(!0), m(u, null, C(Y.value, (e, t) => (x(), m("rect", {
x: q.value.left,
y: q.value.top + t * Math.max(.1, q.value.rowHeight),
width: Math.max(.1, q.value.width),
height: Math.max(.1, q.value.rowHeight),
fill: N.value === null ? "transparent" : N.value === t ? E(n)(L.value.style.chart.highlighter.color, L.value.style.chart.highlighter.opacity) : "transparent",
onMouseenter: (n) => Un({
datapoint: e,
seriesIndex: t
}),
onMouseleave: (n) => Wn({
datapoint: e,
seriesIndex: t
}),
onClick: (n) => Gn({
datapoint: e,
seriesIndex: t
})
}, null, 40, yt))), 256))]),
w(e.$slots, "svg", { svg: {
...q.value,
isPrintingImg: E(mn) || E(hn) || Xt.value,
isPrintingSvg: Zt.value
} }, void 0, !0)
], 46, Ke)), e.$slots.hint ? (x(), m("div", bt, [w(e.$slots, "hint", y(v({
hint: L.value.a11y.translations.keyboardNavigation,
isVisible: nn.value
})), void 0, !0)])) : p("", !0)]),
e.$slots.watermark ? (x(), m("div", xt, [w(e.$slots, "watermark", y(v({ isPrinting: E(mn) || E(hn) || Xt.value || Zt.value })), void 0, !0)])) : p("", !0),
h("div", { id: `legend-bottom-${j.value}` }, null, 8, St),
qt.value && (L.value.style.chart.legend.show || e.$slots.legend) ? (x(), f(Oe, {
key: 6,
to: L.value.style.chart.legend.position === "top" ? `#legend-top-${j.value}` : `#legend-bottom-${j.value}`
}, [h("div", {
ref_key: "chartLegend",
ref: Vt
}, [w(e.$slots, "legend", { legend: kn.value }, () => [L.value.style.chart.legend.show && Rt.value ? (x(), f(Te, {
key: `legend_${Kt.value}`,
legendSet: kn.value,
config: An.value,
clickable: !1
}, {
item: O(({ legend: e }) => [h("div", { style: b(`display:flex;align-items:center;gap:4px;font-size:${L.value.style.chart.legend.fontSize}px`) }, [(x(), m("svg", {
xmlns: E(ae),
viewBox: "0 0 20 20",
height: L.value.style.chart.legend.fontSize,
width: L.value.style.chart.legend.fontSize
}, [h("circle", {
cx: 10,
cy: 10,
r: 9,
fill: e.color
}, null, 8, wt)], 8, Ct)), E(an) ? p("", !0) : (x(), m(u, { key: 0 }, [Ae(T(e.name), 1)], 64))], 4)]),
_: 1
}, 8, ["legendSet", "config"])) : p("", !0)], !0)], 512)], 8, ["to"])) : p("", !0),
e.$slots.source ? (x(), m("div", {
key: 7,
ref_key: "source",
ref: Ht,
dir: "auto"
}, [w(e.$slots, "source", {}, void 0, !0)], 512)) : p("", !0),
Rt.value && L.value.userOptions.buttons.table ? (x(), f(Ie(Jn.value.component), je({ key: 8 }, Jn.value.props, {
ref_key: "tableUnit",
ref: Jt,
onClose: Yn
}), ke({
content: O(() => [(x(), f(E(Ot), {
key: `table_${Gt.value}`,
colNames: Q.value.colNames,
head: Q.value.head,
body: Q.value.body,
config: Q.value.config,
title: L.value.table.useDialog ? "" : Jn.value.title,
withCloseButton: !L.value.table.useDialog,
isCursorPointer: R.value,
onClose: Yn
}, {
th: O(({ th: e }) => [h("div", {
innerHTML: e,
style: {
display: "flex",
"align-items": "center"
}
}, null, 8, Tt)]),
td: O(({ td: e }) => [Ae(T(e.name || e), 1)]),
_: 1
}, 8, [
"colNames",
"head",
"body",
"config",
"title",
"withCloseButton",
"isCursorPointer"
]))]),
_: 2
}, [L.value.table.useDialog ? {
name: "title",
fn: O(() => [Ae(T(Jn.value.title), 1)]),
key: "0"
} : void 0, L.value.table.useDialog ? {
name: "actions",
fn: O(() => [h("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: t[0] ||= (e) => jn(L.value.userOptions.callbacks.csv),
style: b({ cursor: R.value ? "pointer" : "default" })
}, [g(E(Et), {
name: "fileCsv",
stroke: Jn.value.props.color
}, null, 8, ["stroke"])], 4)]),
key: "1"
} : void 0]), 1040)) : p("", !0),
w(e.$slots, "skeleton", {}, () => [E(an) ? (x(), f(fe, { key: 0 })) : p("", !0)], !0)
], 46, He));
}
}, [["__scopeId", "data-v-324c5cb6"]]);
//#endregion
export { Ve as n, Et as t };