vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,259 lines • 59.4 kB
JavaScript
import { defineAsyncComponent as I, computed as g, ref as h, toRefs as Zt, watch as oe, shallowRef as lt, onMounted as at, onBeforeUnmount as ot, watchEffect as Jt, createElementBlock as v, openBlock as r, unref as i, normalizeStyle as se, normalizeClass as st, createBlock as E, createCommentVNode as y, createElementVNode as c, withCtx as p, renderSlot as m, normalizeProps as S, guardReactiveProps as D, createSlots as rt, createVNode as nt, withDirectives as Z, Fragment as _, renderList as F, toDisplayString as k, vShow as J, Teleport as Kt, createTextVNode as Ae, resolveDynamicComponent as Qt, mergeProps as el, nextTick as tl } from "vue";
import { c as ut, t as ll, o as al, g as it, l as ol, U as ct, N as sl, d as A, a as P, X as vt, s as dt, q as K, u as Q, v as rl, r as nl } from "./lib-2iaAPQ_c.js";
import { t as we, u as ul } from "./useResponsive-DfdjqQps.js";
import { u as il, a as $e } from "./useNestedProp-2p4Tjzc8.js";
import { u as cl } from "./usePrinter-ChVMpU2f.js";
import { u as vl, B as dl } from "./BaseScanner-BMpwQAfz.js";
import { u as hl } from "./useSvgExport-ByUukOZt.js";
import { u as bl } from "./useThemeCheck-DGJ31Vi5.js";
import { u as fl } from "./useUserOptionState-BIvW1Kz7.js";
import { u as yl } from "./useChartAccessibility-9icAAmYg.js";
import { u as gl } from "./useTimeLabelCollider-CIsgDrl9.js";
import pl from "./img-CqYIrJ8I.js";
import ml from "./Title-DSOZzIrU.js";
import Cl from "./Legend-D2xmnFPH.js";
import { _ as kl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ht = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", comparisonLines: { rectColor: "#CCCCCC", labelColor: "#CCCCCC" }, plots: { stroke: "#1A1A1A" }, grid: { horizontalGrid: { stroke: "#4A4A4A" }, verticalGrid: { stroke: "#4A4A4A" } }, highlighter: { color: "#CCCCCC" }, labels: { yAxisLabels: { color: "#CCCCCC" }, xAxisLabels: { color: "#CCCCCC" } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, bt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", plots: { startColor: "#F57C00", endColor: "#D32F2F", stroke: "#FFF8E1" }, grid: { horizontalGrid: { stroke: "#5D403780" }, verticalGrid: { stroke: "#5D403780" } }, labels: { yAxisLabels: { color: "#424242" }, xAxisLabels: { color: "#424242" } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, ft = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", comparisonLines: { rectColor: "#CCCCCC", labelColor: "#CCCCCC" }, highlighter: { color: "#CCCCCC" }, plots: { startColor: "#F57C00", endColor: "#D32F2F", stroke: "#1E1E1E" }, grid: { horizontalGrid: { stroke: "#5D4037" }, verticalGrid: { stroke: "#5D4037" } }, labels: { yAxisLabels: { color: "#BDBDBD" }, xAxisLabels: { color: "#BDBDBD" } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, yt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", plots: { startColor: "#008000", endColor: "#00FF00", stroke: "#1A1A1A" }, comparisonLines: { rectColor: "#CCCCCC", labelColor: "#99CC99" }, highlighter: { color: "#CCCCCC" }, grid: { horizontalGrid: { stroke: "#5F6A5F" }, verticalGrid: { stroke: "#5F6A5F" } }, labels: { yAxisLabels: { color: "#99CC99" }, xAxisLabels: { color: "#99CC99" } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, gt = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", plots: { startColor: "#DCB482", endColor: "#B9B99D", stroke: "#fbfafa" }, grid: { horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, labels: { yAxisLabels: { color: "#8A9892" }, xAxisLabels: { show: !1 } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, pt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", plots: { startColor: "#718885", endColor: "#7DA9B5", stroke: "#404C5A" }, grid: { horizontalGrid: { stroke: "#829C98" }, verticalGrid: { stroke: "#829C98" } }, labels: { yAxisLabels: { color: "#61747E" }, xAxisLabels: { color: "#61747E" } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, mt = {
default: {},
dark: ht,
celebration: bt,
celebrationNight: ft,
hack: yt,
zen: gt,
concrete: pt
}, ja = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: bt,
celebrationNight: ft,
concrete: pt,
dark: ht,
default: mt,
hack: yt,
zen: gt
}, Symbol.toStringTag, { value: "Module" })), xl = ["id"], _l = ["id"], Al = ["xmlns", "viewBox"], wl = ["x", "y", "width", "height"], $l = { key: 1 }, Ll = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Sl = { key: 2 }, Dl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Nl = ["transform", "font-size", "fill"], zl = ["x", "y", "font-size", "fill", "font-weight", "onMouseenter", "onMouseleave", "onClick"], Ml = ["x", "y", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], Xl = ["x", "y", "font-size", "fill"], Tl = ["transform", "font-size", "fill", "font-weight", "text-anchor"], El = ["d", "stroke", "stroke-width", "stroke-dasharray"], Bl = ["d", "stroke", "stroke-width", "stroke-dasharray"], Ol = ["x", "y", "height", "width", "fill"], Gl = ["transform", "fill", "font-size"], Il = ["id"], Pl = ["stop-color"], Hl = ["stop-color"], Rl = ["stop-color"], Vl = ["id"], Ul = ["stop-color"], Wl = ["stop-color"], jl = ["stop-color"], ql = ["id"], Yl = ["stop-color"], Zl = ["stop-color"], Jl = ["stop-color"], Kl = ["id"], Ql = ["stop-color"], ea = ["stop-color"], ta = ["stop-color"], la = ["id"], aa = ["stop-color"], oa = ["stop-color"], sa = ["stop-color"], ra = ["id"], na = ["stop-color"], ua = ["stop-color"], ia = ["id"], ca = ["stop-color"], va = ["stop-color"], da = { key: 0 }, ha = { key: 0 }, ba = ["d", "fill"], fa = { key: 1 }, ya = ["x", "y", "height", "width", "fill"], ga = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], pa = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ma = { key: 7 }, Ca = ["x", "y", "fill", "font-size"], ka = { key: 8 }, xa = ["x", "y", "fill", "font-size"], _a = ["x", "y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], Aa = {
key: 4,
class: "vue-data-ui-watermark"
}, wa = ["id"], $a = ["xmlns", "height", "width"], La = ["fill"], Sa = ["innerHTML"], Da = {
__name: "vue-ui-dumbbell",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint"],
setup(Ct, { expose: kt, emit: Na }) {
const xt = I(() => import("./BaseIcon-CbVDYv89.js")), _t = I(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), At = I(() => import("./DataTable-BT_IeqPe.js")), wt = I(() => import("./PenAndPaper-CvyKWfNl.js")), $t = I(() => import("./UserOptions-BQO4YFrn.js")), Lt = I(() => import("./PackageVersion-Br3DrrFh.js")), St = I(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_dumbbell: Dt } = il(), { isThemeValid: Ft, warnInvalidTheme: Nt } = bl(), w = Ct, ee = g({
get() {
return !!w.dataset && w.dataset.length;
},
set(l) {
return l;
}
}), b = h(ut()), Le = h(0), N = h(null), Se = h(null), De = h(null), Fe = h(null), Ne = h(null), ze = h(0), Me = h(0), Xe = h(0), Te = h(!1), j = h(null), re = h(null), ne = h(null), ue = h(null), te = h(null), ie = h(null), B = h(null), n = h(null), O = h(!1), e = h(be()), { loading: ce, FINAL_DATASET: ve, manualLoading: zt } = vl({
...Zt(w),
FINAL_CONFIG: e,
prepareConfig: be,
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: ll({
defaultConfig: e.value,
userConfig: {
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 }
}
}
}
}
})
}), { userOptionsVisible: de, setUserOptionsVisibility: Ee, keepUserOptionState: Be } = fl({ config: e.value }), { svgRef: he } = yl({ config: e.value.style.chart.title });
function be() {
const l = $e({
userConfig: w.config,
defaultConfig: Dt
}), o = l.theme;
if (!o) return l;
if (!Ft.value(l))
return Nt(l), l;
const t = $e({
userConfig: mt[o] || w.config,
defaultConfig: l
});
return $e({
userConfig: w.config,
defaultConfig: t
});
}
oe(() => w.config, (l) => {
ce.value || (e.value = be()), de.value = !e.value.userOptions.showOnChartHover, Ge(), ze.value += 1, Me.value += 1, Xe.value += 1, V.value = e.value.style.chart.rowHeight, U.value = e.value.style.chart.width, G.value.showTable = e.value.table.show;
}, { deep: !0 }), oe(() => ve.value, (l) => {
Array.isArray(l) && l.length > 0 && (zt.value = !1), je(), qe();
}, { deep: !0 });
const z = lt(null), H = lt(null);
at(() => {
Te.value = !0, Ge();
});
const Oe = g(() => !!e.value.debug);
function Ge() {
if (al(w.dataset) ? it({
componentName: "VueUiDumbbell",
type: "dataset",
debug: Oe.value
}) : w.dataset.forEach((l, o) => {
ol({
datasetObject: l,
requiredAttributes: ["name", "start", "end"]
}).forEach((t) => {
ee.value = !1, it({
componentName: "VueUiDumbbell",
type: "datasetSerieAttribute",
property: t,
index: o,
debug: Oe.value
});
});
}), e.value.responsive) {
const l = we(() => {
const { width: o, height: t } = ul({
chart: N.value,
title: e.value.style.chart.title.text ? Se.value : null,
legend: e.value.style.chart.legend.show ? De.value : null,
source: Fe.value,
noTitle: Ne.value
}), a = e.value.style.chart.title.text ? 24 : 0, u = e.value.style.chart.legend.show ? 24 : 0;
requestAnimationFrame(async () => {
U.value = Math.max(0.1, o), V.value = Math.max(0.1, (Math.max(0.1, t) - (a + u)) / ve.value.length), Ke();
});
});
z.value && (H.value && z.value.unobserve(H.value), z.value.disconnect()), z.value = new ResizeObserver(l), H.value = N.value.parentNode, z.value.observe(H.value);
}
Ke();
}
ot(() => {
L.value != null && (cancelAnimationFrame(L.value), L.value = null), z.value && (H.value && z.value.unobserve(H.value), z.value.disconnect());
});
const { isPrinting: Ie, isImaging: Pe, generatePdf: He, generateImage: Re } = cl({
elementId: `dumbbell_${b.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-dumbbell",
options: e.value.userOptions.print
}), Mt = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), G = h({
showTable: e.value.table.show
});
oe(e, () => {
G.value = {
showTable: e.value.table.show
};
}, { immediate: !0 });
const R = g(() => ve.value.map((l, o) => ({
...l,
start: ct(l.start),
end: ct(l.end),
id: l.id ?? `${String(l.name)}__${String(l.start)}__${String(l.end)}__${ut()}`
}))), Ve = g(() => {
const l = e.value.style.chart.grid, o = R.value.flatMap((f) => [f.start, f.end]).map((f) => Number(f)).filter((f) => Number.isFinite(f)), t = o.length ? Math.min(...o) : 0, a = o.length ? Math.max(...o) : 0, u = l.scaleMin ?? Math.min(t, 0), d = l.scaleMax ?? a;
return { min: u, max: d };
}), $ = g(() => sl(Ve.value.min, Ve.value.max, e.value.style.chart.grid.scaleSteps)), V = h(e.value.style.chart.rowHeight), U = h(e.value.style.chart.width);
function Xt() {
let l = 0;
ue.value && (l = Array.from(ue.value.querySelectorAll("text")).reduce((a, u) => {
const d = u.getComputedTextLength();
return d > a ? d : a;
}, 0));
const o = ne.value ? ne.value.getBoundingClientRect().width : 0;
return l + o + (o ? 24 + e.value.style.chart.labels.axis.yLabelOffsetX : 0);
}
const fe = h(0), Tt = we((l) => {
fe.value = l;
}, 100);
Jt((l) => {
const o = te.value;
if (!o) return;
const t = new ResizeObserver((a) => {
Tt(a[0].contentRect.height);
});
t.observe(o), l(() => t.disconnect());
}), ot(() => {
fe.value = 0;
});
const Ue = g(() => {
O.value;
let l = 0;
ie.value && (l = ie.value.getBBox().height);
let o = 0;
return te.value && (o = fe.value), l + o;
}), ye = g(() => R.value.length);
function We(l, o, t) {
const a = Number(l), u = Number(o.min), d = Number(o.max), f = Number(t.width);
if (!Number.isFinite(a) || !Number.isFinite(u) || !Number.isFinite(d) || !Number.isFinite(f))
return t.left;
const C = d - u;
return C <= 0 ? t.left : t.left + (a - u) / C * f;
}
const s = g(() => {
O.value;
const l = Xt(), o = e.value.style.chart.padding, t = e.value.style.chart.labels.axis.xLabel ? e.value.style.chart.labels.axis.xLabelOffsetY : 0, a = V.value * ye.value - Ue.value - o.top - o.bottom - t, u = a / ye.value, d = V.value * ye.value, f = U.value - l - o.left - o.right, C = $.value.ticks.length * (f / $.value.ticks.length);
return {
left: e.value.style.chart.padding.left + l,
right: U.value - e.value.style.chart.padding.right,
top: e.value.style.chart.padding.top,
bottom: d - e.value.style.chart.padding.bottom - Ue.value - t,
width: f,
height: a,
rowHeight: u,
absoluteHeight: d,
widthPlotReference: C
};
}), M = g(() => Math.min(V.value / 2 * 0.7, e.value.style.chart.plots.radius)), q = h([]), x = g({
get() {
const l = s.value, o = $.value;
return q.value.map((t, a) => {
const u = We(t.start, o, l), d = We(t.endVal, o, l), f = u + (d - u) / 2, C = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end > t.start, T = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end < t.start, tt = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end === t.start || [null, void 0].includes(t.start) || [null, void 0].includes(t.end), Yt = C ? e.value.style.chart.plots.evaluationColors.positive : T ? e.value.style.chart.plots.evaluationColors.negative : e.value.style.chart.plots.evaluationColors.neutral;
return {
...t,
isPositive: C,
isNegative: T,
isNeutral: tt,
evaluationColor: Yt,
evaluationGrad: `url(#${C ? "positive" : T ? "negative" : "neutral"}_grad_${b.value})`,
startX: u,
endX: d,
centerX: f,
y: l.top + a * l.rowHeight + l.rowHeight / 2
};
});
},
set(l) {
q.value = l;
}
});
function je() {
q.value = R.value.map((l) => {
const o = Number(l.start);
return {
...l,
endVal: Number.isFinite(o) ? o : 0
};
});
}
const L = h(null);
at(() => {
qe();
});
function qe() {
if (L.value != null && (cancelAnimationFrame(L.value), L.value = null), je(), !e.value.useAnimation) {
x.value = q.value.map((a) => {
const u = Number(a.end);
return { ...a, endVal: Number.isFinite(u) ? u : a.endVal };
});
return;
}
const l = Math.max(1, Math.min(100, e.value.animationSpeed || 100)) / 100, o = R.value.map((a) => {
const u = Number(a.start), d = Number(a.end), f = Number.isFinite(u) ? u : 0;
return (Number.isFinite(d) ? d : f) - f;
}), t = () => {
let a = !0;
x.value = q.value.map((u, d) => {
const f = Number.isFinite(Number(u.end)) ? Number(u.end) : u.endVal, C = u.endVal + o[d] * l, T = o[d] >= 0 ? Math.min(C, f) : Math.max(C, f);
return T !== f && (a = !1), { ...u, endVal: T };
}), a ? L.value = null : L.value = requestAnimationFrame(t);
};
L.value = requestAnimationFrame(t);
}
const ge = g(() => e.value.style.chart.plots.evaluationColors.enable ? [
{ name: e.value.style.chart.legend.labelNegative, color: e.value.style.chart.plots.gradient.show ? `url(#negative_grad_${b.value})` : e.value.style.chart.plots.evaluationColors.negative },
{ name: e.value.style.chart.legend.labelNeutral, color: e.value.style.chart.plots.gradient.show ? `url(#neutral_grad_${b.value})` : e.value.style.chart.plots.evaluationColors.neutral },
{ name: e.value.style.chart.legend.labelPositive, color: e.value.style.chart.plots.gradient.show ? `url(#positive_grad_${b.value})` : e.value.style.chart.plots.evaluationColors.positive }
] : [
{ name: e.value.style.chart.legend.labelStart, color: e.value.style.chart.plots.gradient.show ? `url(#start_grad_${b.value})` : e.value.style.chart.plots.startColor },
{ name: e.value.style.chart.legend.labelEnd, color: e.value.style.chart.plots.gradient.show ? `url(#end_grad_${b.value})` : e.value.style.chart.plots.endColor }
]), Et = g(() => ({
cy: "donut-div-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 12,
paddingTop: 12,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
})), X = g(() => {
const l = x.value.map((t) => ({
name: t.name
})), o = x.value.map((t) => ({
start: t.start,
end: t.end
}));
return { head: l, body: o };
}), le = g(() => {
const l = [
e.value.table.columnNames.series,
e.value.table.columnNames.start,
e.value.table.columnNames.end,
e.value.table.columnNames.progression
], o = X.value.head.map((u, d) => {
const f = A({
p: e.value.style.chart.labels.prefix,
v: X.value.body[d].start,
s: e.value.style.chart.labels.suffix,
r: e.value.table.td.roundingValue
}), C = A({
p: e.value.style.chart.labels.prefix,
v: X.value.body[d].end,
s: e.value.style.chart.labels.suffix,
r: e.value.table.td.roundingValue
}), T = A({
v: 100 * (X.value.body[d].end / X.value.body[d].start - 1),
s: "%",
r: e.value.table.td.roundingPercentage
});
return [
{ name: u.name },
f,
C,
T
];
}), t = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
};
return {
colNames: [
e.value.table.columnNames.series,
e.value.table.columnNames.start,
e.value.table.columnNames.end,
e.value.table.columnNames.progression
],
head: l,
body: o,
config: t
};
});
function pe(l = null) {
tl(() => {
const o = X.value.head.map((u, d) => [[
u.name
], [X.value.body[d].start], [X.value.body[d].end]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.start], [e.value.table.columnNames.end]]].concat(o), a = rl(t);
l ? l(a) : nl({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-dumbbell" });
});
}
const W = h(!1);
function Ye(l) {
W.value = l, Le.value += 1;
}
function Bt() {
return R.value;
}
function Ze() {
G.value.showTable = !G.value.showTable;
}
const ae = h(!1);
function me() {
ae.value = !ae.value;
}
async function Ot({ scale: l = 2 } = {}) {
if (!N.value) return;
const { width: o, height: t } = N.value.getBoundingClientRect(), a = o / t, { imageUri: u, base64: d } = await pl({ domElement: N.value, base64: !0, img: !0, scale: l });
return {
imageUri: u,
base64: d,
title: e.value.style.chart.title.text,
width: o,
height: t,
aspectRatio: a
};
}
const Je = g(() => $.value.ticks), Gt = g(() => ({ start: 0, end: Je.value.length }));
gl({
timeLabelsEls: te,
timeLabels: Je,
slicer: Gt,
configRef: e,
rotationPath: ["style", "chart", "labels", "xAxisLabels", "rotation"],
autoRotatePath: ["style", "chart", "labels", "xAxisLabels", "autoRotate", "enable"],
isAutoSize: !1,
width: U,
height: V,
targetClass: ".vue-ui-dumbbell-scale-label",
rotation: e.value.style.chart.labels.xAxisLabels.autoRotate.angle
});
function It({
rowHeight: l,
fontSize: o,
showProgression: t
}) {
if (!t) return !1;
const a = l / 3, u = l / 1.3, d = Math.abs(u - a), f = o * 1.2;
return d < f;
}
const Pt = /* @__PURE__ */ (() => {
let l = null, o = 0;
const t = 1;
return (a) => {
if (a === O.value) {
l = null, o = 0;
return;
}
l === null || l !== a ? (l = a, o = 1) : (o += 1, o >= t && (O.value = a, l = null, o = 0));
};
})(), Ke = we(() => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const l = It({
rowHeight: s.value.rowHeight,
fontSize: e.value.style.chart.labels.yAxisLabels.fontSize,
showProgression: e.value.style.chart.labels.yAxisLabels.showProgression
});
Pt(l);
});
});
}, 100);
function Ce({ datapoint: l, seriesIndex: o }) {
B.value = o, n.value = l, e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: o });
}
function ke({ datapoint: l, seriesIndex: o }) {
B.value = null, n.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: o });
}
function xe({ datapoint: l, seriesIndex: o }) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: o });
}
const _e = g(() => {
if (n.value === null) return 0;
const l = ![null, void 0].includes(n.value.start), o = ![null, void 0].includes(n.value.end);
return l && o ? Math.min(n.value.startX, n.value.endX) + Math.abs(n.value.startX - n.value.endX) / 2 : l && !o ? n.value.startX : o && !l ? n.value.endX : null;
}), Ht = g(() => {
if (n.value === null) return "";
const l = ![null, void 0].includes(n.value.start), o = ![null, void 0].includes(n.value.end);
let t = "", a = "";
return l && (t = P(
e.value.style.chart.labels.formatter,
n.value.start,
A({
p: e.value.style.chart.labels.prefix,
v: n.value.start,
s: e.value.style.chart.labels.suffix,
r: e.value.style.chart.labels.startLabels.rounding
}),
{ datapoint: n.value, seriesIndex: B.value }
)), o && (a = P(
e.value.style.chart.labels.formatter,
n.value.end,
A({
p: e.value.style.chart.labels.prefix,
v: n.value.end,
s: e.value.style.chart.labels.suffix,
r: e.value.style.chart.labels.startLabels.rounding
}),
{ datapoint: n.value, seriesIndex: B.value }
)), l && o ? `${t} → ${a}` : l && !o ? t : o && !l ? a : "";
}), Y = g(() => {
const l = e.value.table.useDialog && !e.value.table.show, o = G.value.showTable;
return {
component: l ? St : _t,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: l ? {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
headerColor: e.value.table.th.color,
headerBg: e.value.table.th.backgroundColor,
isFullscreen: W.value,
fullscreenParent: N.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: o,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
},
head: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
}
}
}
};
});
oe(() => G.value.showTable, (l) => {
e.value.table.show || (l && e.value.table.useDialog && j.value ? j.value.open() : "close" in j.value && j.value.close());
});
function Qe() {
G.value.showTable = !1, re.value && re.value.setTableIconState(!1);
}
const Rt = g(() => ge.value.map((l) => ({
...l,
shape: "circle"
}))), Vt = g(() => e.value.style.chart.backgroundColor), Ut = g(() => e.value.style.chart.legend), Wt = g(() => e.value.style.chart.title), { exportSvg: jt, getSvg: qt } = hl({
svg: he,
title: Wt,
legend: Ut,
legendItems: Rt,
backgroundColor: Vt
});
async function et({ isCb: l }) {
if (l) {
const { blob: o, url: t, text: a, dataUrl: u } = await qt();
e.value.userOptions.callbacks.svg({ blob: o, url: t, text: a, dataUrl: u });
} else
jt();
}
return kt({
getData: Bt,
getImage: Ot,
generatePdf: He,
generateCsv: pe,
generateImage: Re,
generateSvg: et,
toggleTable: Ze,
toggleAnnotator: me,
toggleFullscreen: Ye
}), (l, o) => (r(), v("div", {
ref_key: "dumbbellChart",
ref: N,
class: st(`vue-data-ui-component vue-ui-dumbbell ${W.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: se(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
id: `dumbbell_${b.value}`,
onMouseenter: o[1] || (o[1] = () => i(Ee)(!0)),
onMouseleave: o[2] || (o[2] = () => i(Ee)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), E(i(wt), {
key: 0,
svgRef: i(he),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: ae.value,
onClose: me
}, {
"annotator-action-close": p(() => [
m(l.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": p(({ color: t }) => [
m(l.$slots, "annotator-action-color", S(D({ color: t })), void 0, !0)
]),
"annotator-action-draw": p(({ mode: t }) => [
m(l.$slots, "annotator-action-draw", S(D({ mode: t })), void 0, !0)
]),
"annotator-action-undo": p(({ disabled: t }) => [
m(l.$slots, "annotator-action-undo", S(D({ disabled: t })), void 0, !0)
]),
"annotator-action-redo": p(({ disabled: t }) => [
m(l.$slots, "annotator-action-redo", S(D({ disabled: t })), void 0, !0)
]),
"annotator-action-delete": p(({ disabled: t }) => [
m(l.$slots, "annotator-action-delete", S(D({ disabled: t })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
Mt.value ? (r(), v("div", {
key: 1,
ref_key: "noTitle",
ref: Ne,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : y("", !0),
e.value.style.chart.title.text ? (r(), v("div", {
key: 2,
ref_key: "chartTitle",
ref: Se,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(r(), E(ml, {
key: `title_${ze.value}`,
config: {
title: {
cy: "donut-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "donut-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : y("", !0),
c("div", {
id: `legend-top-${b.value}`
}, null, 8, _l),
e.value.userOptions.show && ee.value && (i(Be) || i(de)) ? (r(), E(i($t), {
ref_key: "userOptionsRef",
ref: re,
key: `user_option_${Le.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: i(Ie),
isImaging: i(Pe),
uid: b.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasXls: e.value.userOptions.buttons.csv,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: W.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: N.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: ae.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: Ye,
onGeneratePdf: i(He),
onGenerateCsv: pe,
onGenerateImage: i(Re),
onGenerateSvg: et,
onToggleTable: Ze,
onToggleAnnotator: me,
style: se({
visibility: i(Be) ? i(de) ? "visible" : "hidden" : "visible"
})
}, rt({ _: 2 }, [
l.$slots.menuIcon ? {
name: "menuIcon",
fn: p(({ isOpen: t, color: a }) => [
m(l.$slots, "menuIcon", S(D({ isOpen: t, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
l.$slots.optionPdf ? {
name: "optionPdf",
fn: p(() => [
m(l.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
l.$slots.optionCsv ? {
name: "optionCsv",
fn: p(() => [
m(l.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
l.$slots.optionImg ? {
name: "optionImg",
fn: p(() => [
m(l.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
l.$slots.optionSvg ? {
name: "optionSvg",
fn: p(() => [
m(l.$slots, "optionSvg", {}, void 0, !0)
]),
key: "4"
} : void 0,
l.$slots.optionTable ? {
name: "optionTable",
fn: p(() => [
m(l.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
l.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: p(({ toggleFullscreen: t, isFullscreen: a }) => [
m(l.$slots, "optionFullscreen", S(D({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
]),
key: "6"
} : void 0,
l.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: p(({ toggleAnnotator: t, isAnnotator: a }) => [
m(l.$slots, "optionAnnotator", S(D({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
(r(), v("svg", {
ref_key: "svgRef",
ref: he,
xmlns: i(vt),
class: st({ "vue-data-ui-fullscreen--on": W.value, "vue-data-ui-fulscreen--off": !W.value }),
viewBox: `0 0 ${U.value} ${s.value.absoluteHeight <= 0 ? 10 : s.value.absoluteHeight}`,
style: se(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
}, [
nt(i(Lt)),
l.$slots["chart-background"] ? (r(), v("foreignObject", {
key: 0,
x: s.value.left,
y: s.value.top,
width: Math.max(0.1, s.value.width),
height: Math.max(0.1, s.value.height),
style: {
pointerEvents: "none"
}
}, [
m(l.$slots, "chart-background", {}, void 0, !0)
], 8, wl)) : y("", !0),
e.value.style.chart.grid.verticalGrid.show ? (r(), v("g", $l, [
(r(!0), v(_, null, F($.value.ticks, (t, a) => (r(), v("line", {
x1: s.value.left + a * s.value.width / ($.value.ticks.length - 1),
x2: s.value.left + a * s.value.width / ($.value.ticks.length - 1),
y1: s.value.top,
y2: s.value.bottom,
stroke: e.value.style.chart.grid.verticalGrid.stroke,
"stroke-width": e.value.style.chart.grid.verticalGrid.strokeWidth,
"stroke-dasharray": e.value.style.chart.grid.verticalGrid.strokeDasharray
}, null, 8, Ll))), 256))
])) : y("", !0),
e.value.style.chart.grid.horizontalGrid.show ? (r(), v("g", Sl, [
(r(!0), v(_, null, F(R.value, (t, a) => (r(), v("line", {
x1: s.value.left,
x2: s.value.right,
y1: s.value.top + a * s.value.rowHeight,
y2: s.value.top + a * s.value.rowHeight,
stroke: e.value.style.chart.grid.horizontalGrid.stroke,
"stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
"stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray
}, null, 8, Dl))), 256)),
c("line", {
x1: s.value.left,
x2: s.value.right,
y1: s.value.bottom,
y2: s.value.bottom,
stroke: e.value.style.chart.grid.horizontalGrid.stroke,
"stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
"stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray
}, null, 8, Fl)
])) : y("", !0),
e.value.style.chart.labels.axis.yLabel ? (r(), v("text", {
key: 3,
ref_key: "yAxisLabel",
ref: ne,
transform: `translate(${e.value.style.chart.labels.axis.fontSize}, ${s.value.absoluteHeight / 2}), rotate(-90)`,
"font-size": e.value.style.chart.labels.axis.fontSize,
fill: e.value.style.chart.labels.axis.color,
"text-anchor": "middle"
}, k(e.value.style.chart.labels.axis.yLabel), 9, Nl)) : y("", !0),
e.value.style.chart.labels.yAxisLabels.show ? (r(), v("g", {
key: 4,
ref_key: "serieLabels",
ref: ue
}, [
(r(!0), v(_, null, F(x.value, (t, a) => (r(), v("text", {
class: "vue-ui-dumbbell-serie-name",
key: `serieLabel_${t.id}_${a}`,
x: s.value.left - 6 + e.value.style.chart.labels.yAxisLabels.offsetX,
y: s.value.top + a * s.value.rowHeight + (!e.value.style.chart.labels.yAxisLabels.showProgression || O.value ? s.value.rowHeight / 2 : s.value.rowHeight / 3) + e.value.style.chart.labels.yAxisLabels.fontSize / 3,
"font-size": e.value.style.chart.labels.yAxisLabels.fontSize,
fill: e.value.style.chart.labels.yAxisLabels.color,
"font-weight": e.value.style.chart.labels.yAxisLabels.bold ? "bold" : "normal",
"text-anchor": "end",
onMouseenter: (u) => Ce({ datapoint: t, seriesIndex: a }),
onMouseleave: (u) => ke({ datapoint: t, seriesIndex: a }),
onClick: (u) => xe({ datapoint: t, seriesIndex: a })
}, k(t.name) + " " + k(O.value && e.value.style.chart.labels.yAxisLabels.showProgression ? [null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : `(${i(P)(
e.value.style.chart.labels.yAxisLabels.formatter,
100 * (t.end / t.start - 1),
i(A)({
v: 100 * (t.end / t.start - 1),
s: "%",
r: e.value.style.chart.labels.yAxisLabels.rounding
}),
{ datapoint: t }
)})` : ""), 41, zl))), 128)),
e.value.style.chart.labels.yAxisLabels.showProgression && !O.value ? (r(!0), v(_, { key: 0 }, F(x.value, (t, a) => (r(), v("text", {
class: "vue-ui-dumbbell-serie-value",
x: s.value.left - 6 + e.value.style.chart.labels.yAxisLabels.offsetX,
y: s.value.top + a * s.value.rowHeight + s.value.rowHeight / 1.3 + e.value.style.chart.labels.yAxisLabels.fontSize / 3,
"font-size": e.value.style.chart.labels.yAxisLabels.fontSize,
fill: e.value.style.chart.labels.yAxisLabels.color,
"text-anchor": "end",
onMouseenter: (u) => Ce({ datapoint: t, seriesIndex: a }),
onMouseleave: (u) => ke({ datapoint: t, seriesIndex: a }),
onClick: (u) => xe({ datapoint: t, seriesIndex: a })
}, k([null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : i(P)(
e.value.style.chart.labels.yAxisLabels.formatter,
100 * (t.end / t.start - 1),
i(A)({
v: 100 * (t.end / t.start - 1),
s: "%",
r: e.value.style.chart.labels.yAxisLabels.rounding
}),
{ datapoint: t }
)), 41, Ml))), 256)) : y("", !0)
], 512)) : y("", !0),
e.value.style.chart.labels.axis.xLabel ? (r(), v("text", {
key: 5,
ref_key: "xAxisLabel",
ref: ie,
x: s.value.left + s.value.width / 2,
y: s.value.absoluteHeight - e.value.style.chart.labels.axis.fontSize / 3,
"font-size": e.value.style.chart.labels.axis.fontSize,
fill: e.value.style.chart.labels.axis.color,
"text-anchor": "middle"
}, k(e.value.style.chart.labels.axis.xLabel), 9, Xl)) : y("", !0),
e.value.style.chart.labels.xAxisLabels.show ? (r(), v("g", {
key: 6,
ref_key: "scaleLabels",
ref: te
}, [
(r(!0), v(_, null, F($.value.ticks, (t, a) => (r(), v("text", {
class: "vue-ui-dumbbell-scale-label",
key: `tick_${a}`,
transform: `translate(${s.value.left + a * (s.value.width / ($.value.ticks.length - 1))}, ${s.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize + e.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${e.value.style.chart.labels.xAxisLabels.rotation})`,
"font-size": e.value.style.chart.labels.xAxisLabels.fontSize,
fill: e.value.style.chart.labels.xAxisLabels.color,
"font-weight": e.value.style.chart.labels.xAxisLabels.bold ? "bold" : "normal",
"text-anchor": e.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : e.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle"
}, k(i(P)(
e.value.style.chart.labels.formatter,
t,
i(A)({
p: e.value.style.chart.labels.prefix,
v: t,
s: e.value.style.chart.labels.suffix,
r: e.value.style.chart.labels.xAxisLabels.rounding
}),
{ datapoint: t, seriesIndex: a }
)), 9, Tl))), 128))
], 512)) : y("", !0),
Z(c("g", null, [
Z(c("path", {
d: `M ${n.value ? n.value.startX : s.value.left},${s.value.top} ${n.value ? n.value.startX : s.value.left},${s.value.bottom}`,
stroke: n.value ? e.value.style.chart.plots.evaluationColors.enable ? n.value.evaluationColor : e.value.style.chart.plots.startColor : "transparent",
"stroke-width": e.value.style.chart.comparisonLines.strokeWidth,
"stroke-dasharray": e.value.style.chart.comparisonLines.strokeDasharray,
style: { transition: "all 0.3s ease-in-out" }
}, null, 8, El), [
[J, n.value !== null && ![null, void 0].includes(n.value.start)]
]),
Z(c("path", {
d: `M ${n.value ? n.value.endX : s.value.left},${s.value.top} ${n.value ? n.value.endX : s.value.left},${s.value.bottom}`,
stroke: n.value ? e.value.style.chart.plots.evaluationColors.enable ? n.value.evaluationColor : e.value.style.chart.plots.endColor : "transparent",
"stroke-width": e.value.style.chart.comparisonLines.strokeWidth,
"stroke-dasharray": e.value.style.chart.comparisonLines.strokeDasharray,
style: { transition: "all 0.3s ease-in-out" }
}, null, 8, Bl), [
[J, n.value !== null && ![null, void 0].includes(n.value.end)]
]),
Z(c("rect", {
x: n.value ? Math.min(n.value.startX, n.value.endX) : s.value.left,
y: s.value.top,
height: Math.max(0.1, s.value.height),
width: n.value ? Math.max(0.1, Math.abs(n.value.endX - n.value.startX)) : 0,
fill: n.value ? i(dt)(e.value.style.chart.comparisonLines.rectColor, e.value.style.chart.comparisonLines.rectOpacity) : "transparent",
style: { transition: "all 0.3s ease-in-out" }
}, null, 8, Ol), [
[J, e.value.style.chart.comparisonLines.showRect && n.value !== null && ![null, void 0].includes(n.value.start) && ![null, void 0].includes(n.value.end)]
]),
Z(c("text", {
transform: `translate(${_e.value == null ? 0 : _e.value}, ${s.value.top - 6})`,
fill: e.value.style.chart.comparisonLines.labelColor,
"font-size": e.value.style.chart.comparisonLines.labelFontSize,
"text-anchor": "middle",
style: { transition: "all 0.3s ease-in-out" }
}, k(Ht.value), 9, Gl), [
[J, n.value !== null && _e.value !== null && e.value.style.chart.comparisonLines.showLabel]
])
], 512), [
[J, e.value.style.chart.comparisonLines.show && B.value !== null]
]),
c("defs", null, [
c("radialGradient", {
id: `start_grad_${b.value}`,
fy: "30%"
}, [
c("stop", {
offset: "10%",
"stop-color": i(K)(e.value.style.chart.plots.startColor, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, Pl),
c("stop", {
offset: "90%",
"stop-color": i(Q)(e.value.style.chart.plots.startColor, 0.1)
}, null, 8, Hl),
c("stop", {
offset: "100%",
"stop-color": e.value.style.chart.plots.startColor
}, null, 8, Rl)
], 8, Il),
c("radialGradient", {
id: `end_grad_${b.value}`,
fy: "30%"
}, [
c("stop", {
offset: "10%",
"stop-color": i(K)(e.value.style.chart.plots.endColor, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, Ul),
c("stop", {
offset: "90%",
"stop-color": i(Q)(e.value.style.chart.plots.endColor, 0.1)
}, null, 8, Wl),
c("stop", {
offset: "100%",
"stop-color": e.value.style.chart.plots.endColor
}, null, 8, jl)
], 8, Vl),
c("radialGradient", {
id: `positive_grad_${b.value}`,
fy: "30%"
}, [
c("stop", {
offset: "10%",
"stop-color": i(K)(e.value.style.chart.plots.evaluationColors.positive, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, Yl),
c("stop", {
offset: "90%",
"stop-color": i(Q)(e.value.style.chart.plots.evaluationColors.positive, 0.1)
}, null, 8, Zl),
c("stop", {
offset: "100%",
"stop-color": e.value.style.chart.plots.evaluationColors.positive
}, null, 8, Jl)
], 8, ql),
c("radialGradient", {
id: `negative_grad_${b.value}`,
fy: "30%"
}, [
c("stop", {
offset: "10%",
"stop-color": i(K)(e.value.style.chart.plots.evaluationColors.negative, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, Ql),
c("stop", {
offset: "90%",
"stop-color": i(Q)(e.value.style.chart.plots.evaluationColors.negative, 0.1)
}, null, 8, ea),
c("stop", {
offset: "100%",
"stop-color": e.value.style.chart.plots.evaluationColors.negative
}, null, 8, ta)
], 8, Kl),
c("radialGradient", {
id: `neutral_grad_${b.value}`,
fy: "30%"
}, [
c("stop", {
offset: "10%",
"stop-color": i(K)(e.value.style.chart.plots.evaluationColors.neutral, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, aa),
c("stop", {
offset: "90%",
"stop-color": i(Q)(e.value.style.chart.plots.evaluationColors.neutral, 0.1)
}, null, 8, oa),
c("stop", {
offset: "100%",
"stop-color": e.value.style.chart.plots.evaluationColors.neutral
}, null, 8, sa)
], 8, la)
]),
(r(!0), v(_, null, F(x.value, (t, a) => (r(), v("g", {
key: `plot_${a}_${t.id}`
}, [
c("defs", null, [
c("linearGradient", {
id: `grad_pos_${b.value}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%"
}, [
c("stop", {
offset: "0%",
"stop-color": e.value.style.chart.plots.startColor
}, null, 8, na),
c("stop", {
offset: "100%",
"stop-color": e.value.style.chart.plots.endColor
}, null, 8, ua)
], 8, ra),
c("linearGradient", {
id: `grad_neg_${b.value}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%"
}, [
c("stop", {
offset: "0%",
"stop-color": e.value.style.chart.plots.endColor
}, null, 8, ca),
c("stop", {
offset: "100%",
"stop-color": e.value.style.chart.plots.startColor
}, null, 8, va)
], 8, ia)
]),
![void 0, null].includes(t.end) && ![void 0, null].includes(t.start) ? (r(), v("g", da, [
e.value.style.chart.plots.link.type === "curved" ? (r(), v("g", ha, [
c("path", {
d: `M
${t.startX},${t.y + M.value / 2}
C ${t.centerX},${t.y} ${t.centerX},${t.y}
${t.endX},${t.y + M.value / 2}
L ${t.endX},${t.y - M.value / 2}
C ${t.centerX},${t.y} ${t.centerX},${t.y}
${t.startX},${t.y - M.value / 2}
Z
`,
fill: e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : t.endX > t.startX ? `url(#grad_pos_${b.value})` : `url(#grad_neg_${b.value})`
}, null, 8, ba)
])) : (r(), v("g", fa, [
c("rect", {
x: t.endX > t.startX ? t.startX : t.endX,
y: t.y - e.value.style.chart.plots.link.strokeWidth / 2,
height: Math.max(0.01, e.value.style.chart.plots.link.strokeWidth),
width: Math.max(0.01, Math.abs(t.endX - t.startX)),
fill: e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : t.endX > t.startX ? `url(#grad_pos_${b.value})` : `url(#grad_neg_${b.value})`
}, null, 8, ya)
]))
])) : y("", !0),
[null, void 0].includes(t.start) ? y("", !0) : (r(), v("circle", {
key: 1,
cx: t.startX,
cy: t.y,
r: M.value,
fill: e.value.style.chart.plots.gradient.show ? e.value.style.chart.plots.evaluationColors.enable ? t.evaluationGrad : `url(#start_grad_${b.value})` : e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : e.value.style.chart.plots.startColor,
stroke: e.value.style.chart.plots.stroke,
"stroke-width": e.value.style.chart.plots.strokeWidth
}, null, 8, ga)),
[null, void 0].includes(t.end) ? y("", !0) : (r(), v("circle", {
key: 2,
cx: t.endX,
cy: t.y,
r: M.value,
fill: e.value.style.chart.plots.gradient.show ? e.value.style.chart.plots.evaluationColors.enable ? t.evaluationGrad : `url(#end_grad_${b.value})` : e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : e.value.style.chart.plots.endColor,
stroke: e.value.style.chart.plots.stroke,
"stroke-width": e.value.style.chart.plots.strokeWidth
}, null, 8, pa))
]))), 128)),
e.value.style.chart.labels.startLabels.show ? (r(), v("g", ma, [
(r(!0), v(_, null, F(x.value, (t, a) => (r(), v("g", {
key: `start_label_${a}_${t.id}`
}, [
[null, void 0].includes(t.start) ? y("", !0) : (r(), v("text", {
key: 0,
x: t.startX,
y: t.y + M.value * 2 + e.value.style.chart.labels.startLabels.fontSize / 2,
fill: e.value.style.chart.plots.evaluationColors.enable && e.value.style.chart.labels.startLabels.useEvaluationColor ? t.evaluationColor : e.value.style.chart.labels.startLabels.useStartColor ? e.value.style.chart.plots.startColor : e.value.style.chart.labels.startLabels.color,
"font-size": e.value.style.chart.labels.startLabels.fontSize,
"text-anchor": "middle"
}, k(i(P)(
e.value.style.chart.labels.formatter,
t.start,
i(A)({
p: e.value.style.chart.labels.prefix,
v: t.start,
s: e.value.style.chart.labels.suffix,
r: e.value.style.chart.labels.startLabels.rounding
}),
{ datapoint: t, seriesIndex: a }
)), 9, Ca))
]))), 128))
])) : y("", !0),
e.value.style.chart.labels.endLabels.show ? (r(), v("g", ka, [
(r(!0), v(_, null, F(x.value, (t, a) => (r(), v("g", {
key: `end_label_${a}_${t.id}`
}, [
[null, void 0].includes(t.end) ? y("", !0) : (r(), v("text", {
key: 0,
x: t.endX,
y: t.y - (M.value * 2 - e.value.style.chart.labels.startLabels.fontSize / 3),
fill: e.value.style.chart.plots.evaluationColors.enable && e.value.style.chart.labels.endLabels.useEvaluationColor ? t.evaluationColor : e.value.style.chart.labels.endLabels.useEndColor ? e.value.style.chart.plots.endColor : e.value.style.chart.labels.endLabels.color,
"font-size": e.value.style.chart.labels.endLabels.fontSize,
"text-anchor": "middle"
}, k(i(P)(
e.value.style.chart.labels.formatter,
t.end,
i(A)({
p: e.value.style.chart.labels.prefix,
v: t.end,
s: e.value.style.chart.labels.suffix,
r: e.value.style.chart.labels.endLabels.rounding
}),
{ datapoint: t, seriesIndex: a }
)), 9, xa))
]))), 128))
])) : y("", !0),
c("g", null, [
(r(!0), v(_, null, F(x.value, (t, a) => (r(), v("rect", {
x: s.value.left,
y: s.value.top + a * Math.max(0.1, s.value.rowHeight),
width: Math.max(0.1, s.value.width),
height: Math.max(0.1, s.value.rowHeight),
fill: B.value !== null && B.value === a ? i(dt)(e.value.style.chart.highlighter.color, e.value.style.chart.highlighter.opacity) : "transparent",
onMouseenter: (u) => Ce({ datapoint: t, seriesIndex: a }),
onMouseleave: (u) => ke({ datapoint: t, seriesIndex: a }),
onClick: (u) => xe({ datapoint: t, seriesIndex: a })
}, null, 40, _a))), 256))
]),
m(l.$slots, "svg", { svg: s.value }, void 0, !0)
], 14, Al)),
l.$slots.watermark ? (r(), v("div", Aa, [
m(l.$slots, "watermark", S(D({ isPrinting: i(Ie) || i(Pe) })), void 0, !0)
])) : y("", !0),
c("div", {
id: `legend-bottom-${b.value}`
}, null, 8, wa),
Te.value ? (r(), E(Kt, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
}, [
c("div", {
ref_key: "chartLegend",
ref: De
}, [
e.value.style.chart.legend.show && ee.value ? (r(), E(Cl, {
key: `legend_${Xe.value}`,
legendSet: ge.value,
config: Et.value,
clickable: !1
}, {
item: p(({ legend: t }) => [
c("div", {
style: se(`display:flex;align-items:center;gap:4px;font-size:${e.value.style.chart.legend.fontSize}px`)
}, [
(r(), v("svg", {
xmlns: i(vt),
viewBox: "0 0 20 20",
height: e.value.style.chart.legend.fontSize,
width: e.value.style.chart.legend.fontSize
}, [
c("circle", {
cx: 10,
cy: 10,
r: 9,
fill: t.color
}, null, 8, La)
], 8, $a)),
i(ce) ? y("", !0) : (r(), v(_, { key: 0 }, [
Ae(k(t.name), 1)
], 64))
], 4)
]),
_: 1
}, 8, ["legendSet", "config"])) : m(l.$slots, "legend", {
key: 1,
legend: ge.value
}, void 0, !0)
], 512)
], 8, ["to"])) : y("", !0),
l.$slots.source ? (r(), v("div", {
key: 6,
ref_key: "source",
ref: Fe,
dir: "auto"
}, [
m(l.$slots, "source", {}, void 0, !0)
], 512)) : y("", !0),
ee.value && e.value.userOptions.buttons.table ? (r(), E(Qt(Y.value.component), el({ key: 7 }, Y.value.props, {
ref_key: "tableUnit",
ref: j,
onClose: Qe
}), rt({
content: p(() => [
(r(), E(i(At), {
key: `table_${Me.value}`,
colNames: le.value.colNames,
head: le.value.head,
body: le.value.body,
config: le.value.config,
title: e.value.table.useDialog ? "" : Y.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: Qe
}, {
th: p(({ th: t }) => [
c("div", {
innerHTML: t,
style: { display: "flex", "align-items": "center" }
}, null, 8, Sa)
]),
td: p(({ td: t }) => [
Ae(k(t.name || t), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: p(() => [
Ae(k(Y.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: p(() => [
c("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: o[0] || (o[0] = (t) => pe(e.value.userOptions.callbacks.csv))
}, [
nt(i(xt), {
name: "excel",
stroke: Y.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : y("", !0),
i(ce) ? (r(), E(dl, { key: 8 })) : y("", !0)
], 46, xl));
}
}, Fa = /* @__PURE__ */ kl(Da, [["__scopeId", "data-v-7b0427b6"]]), qa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Fa
}, Symbol.toStringTag, { value: "Module" }));
export {
ja as a,
qa as b,
Fa as v
};