vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,964 lines • 97 kB
JavaScript
import { defineAsyncComponent as ye, useSlots as Hl, computed as m, ref as y, onMounted as Wl, toRefs as Xl, watch as Le, shallowRef as La, onBeforeUnmount as Nt, watchEffect as ql, nextTick as Gl, createElementBlock as h, openBlock as i, normalizeStyle as Te, normalizeClass as Ta, createBlock as ie, createCommentVNode as w, renderSlot as _, createElementVNode as ue, createVNode as He, unref as M, withCtx as D, normalizeProps as ee, guardReactiveProps as te, createSlots as Ft, Fragment as E, renderList as W, mergeProps as lt, toDisplayString as de, Teleport as jl, resolveDynamicComponent as Jl, createTextVNode as Na } from "vue";
import { c as Fa, t as Zl, i as Ql, j as ot, k as Kl, o as _a, g as Da, l as eo, m as to, ar as We, O as st, N as rt, S as ao, A as pe, C as be, P as lo, y as oo, _ as so, a as Xe, d as ke, Q as qe, X as ro, q as no, s as io, U as za, v as uo, r as co, b as ho, e as Ge } from "./lib-2iaAPQ_c.js";
import { t as Ea, u as vo } from "./useResponsive-DfdjqQps.js";
import { u as mo, a as _t } from "./useNestedProp-2p4Tjzc8.js";
import { u as Ia, a as go, l as fo } from "./useTimeLabels-DKoynYae.js";
import { u as yo, B as po } from "./BaseScanner-BMpwQAfz.js";
import { u as bo } from "./usePrinter-ChVMpU2f.js";
import { u as xo } from "./useSvgExport-ByUukOZt.js";
import { u as ko } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Co } from "./useChartAccessibility-9icAAmYg.js";
import { u as wo } from "./useTimeLabelCollider-CIsgDrl9.js";
import { u as Ao } from "./useUserOptionState-BIvW1Kz7.js";
import So from "./img-CqYIrJ8I.js";
import { _ as Dt } from "./Shape-12_eh8zD.js";
import Mo from "./Title-DSOZzIrU.js";
import $o from "./Legend-D2xmnFPH.js";
import { S as Lo } from "./SlicerPreview-CgKqSG-h.js";
import { _ as To } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Pa = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, zoom: { color: "#4A4A4A", highlightColor: "#9A9A9A", minimap: { selectedColor: "#8A8A8A", lineColor: "#424242", indicatorColor: "#CCCCCC" } }, highlighter: { color: "#CCCCCC" }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" }, lines: { totalValues: { color: "#CCCCCC" }, dataLabels: { color: "#CCCCCC" } }, grid: { x: { axisColor: "#5A5A5A", linesColor: "#4A4A4A", axisName: { color: "#CCCCCC" }, timeLabels: { color: "#CCCCCC" } }, y: { axisColor: "#5A5A5A", linesColor: "#4A4A4A", axisName: { color: "#CCCCCC" }, axisLabels: { color: "#CCCCCC" } } } } } }, Oa = { table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } }, style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", title: { color: "#424242", subtitle: { color: "#757575" } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, highlighter: { color: "#424242" }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, lines: { totalValues: { color: "#424242" }, dataLabels: { color: "#424242" } }, grid: { x: { axisColor: "#5D403780", axisName: { color: "#424242" }, timeLabels: { color: "#424242" } }, y: { axisColor: "#5D403780", axisName: { color: "#424242" }, axisLabels: { color: "#424242" } } } } } }, Ra = { table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } }, style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, highlighter: { color: "#FFF8E1" }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, lines: { totalValues: { color: "#BDBDBD" }, dataLabels: { color: "#BDBDBD" } }, grid: { x: { axisColor: "#5D403740", axisName: { color: "#BDBDBD" }, timeLabels: { color: "#BDBDBD" } }, y: { axisColor: "#5D4037", axisName: { color: "#BDBDBD" }, axisLabels: { color: "#BDBDBD" } } } } } }, Ba = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, zoom: { color: "#5F6A5F", highlightColor: "#66CC66" }, highlighter: { color: "#66CC66" }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" }, lines: { totalValues: { color: "#99AA99" }, dataLabels: { color: "#99AA99" } }, grid: { x: { axisColor: "#5F6A5F", axisName: { color: "#66CC66" }, timeLabels: { color: "#99AA99" } }, y: { axisColor: "#5F6A5F", axisName: { color: "#66CC66" }, axisLabels: { color: "#99AA99" } } } } } }, Va = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, zoom: { color: "#E0CFC3", highlightColor: "#8F837A" }, highlighter: { color: "#8F837A" }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" }, lines: { borderRadius: 4, totalValues: { show: !1 }, dataLabels: { show: !1 } }, grid: { x: { showAxis: !1, axisName: { color: "#8F837A" }, timeLabels: { show: !1 } }, y: { showAxis: !1, axisName: { color: "#8F837A" }, axisLabels: { show: !1 } } } } } }, Ya = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", title: { color: "#50606C", subtitle: { color: "#718890" } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, zoom: { color: "#92B0AB", highlightColor: "#50606C" }, highlighter: { color: "#7DA9B5" }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" }, lines: { totalValues: { color: "#50606C" }, dataLabels: { color: "#50606C" } }, grid: { x: { showHorizontalLines: !0, axisColor: "#829C98", axisName: { color: "#50606C" }, timeLabels: { color: "#61747E" } }, y: { showVerticalLines: !0, axisColor: "#829C98", axisName: { color: "#50606C" }, axisLabels: { color: "#61747E" } } } } } }, Ua = {
default: {},
dark: Pa,
celebration: Oa,
celebrationNight: Ra,
hack: Ba,
zen: Va,
concrete: Ya
}, _s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Oa,
celebrationNight: Ra,
concrete: Ya,
dark: Pa,
default: Ua,
hack: Ba,
zen: Va
}, Symbol.toStringTag, { value: "Module" })), No = ["id"], Fo = ["id"], _o = ["xmlns", "viewBox"], Do = { key: 0 }, zo = ["x", "y", "width", "height"], Eo = { key: 1 }, Io = ["id"], Po = ["stop-color"], Oo = ["stop-color"], Ro = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Bo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Vo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Yo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Uo = ["x", "y", "font-size", "fill", "font-weight"], Ho = ["transform", "font-size", "fill", "font-weight"], Wo = ["x", "y", "width", "height", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-dasharray"], Xo = ["d", "fill", "opacity"], qo = ["d", "stroke", "stroke-width"], Go = ["x1", "x2", "y1", "y2", "stroke"], jo = ["x", "y", "font-size", "font-weight", "fill"], Jo = { key: 0 }, Zo = { key: 1 }, Qo = ["text-anchor", "font-size", "font-weight", "fill", "transform", "onClick"], Ko = ["text-anchor", "font-size", "fill", "transform", "innerHTML", "onClick"], es = ["x", "y", "height", "width", "fill"], ts = { key: 0 }, as = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ls = { key: 0 }, os = ["x", "y", "font-size", "fill", "font-weight"], ss = ["x", "y", "font-size", "font-weight", "fill"], rs = ["data-start", "data-end"], ns = {
key: 4,
class: "vue-data-ui-watermark"
}, is = ["onClick"], us = ["id"], cs = ["innerHTML"], hs = ["innerHTML"], vs = {
__name: "vue-ui-stackline",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
},
selectedXIndex: {
type: Number,
default: void 0
}
},
emits: ["selectDatapoint", "selectLegend", "selectTimeLabel", "selectX"],
setup(nt, { expose: Ha, emit: Wa }) {
const Xa = ye(() => import("./Tooltip-D0pGX8qz.js")), qa = ye(() => import("./BaseIcon-CbVDYv89.js")), Ga = ye(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), ja = ye(() => import("./DataTable-BT_IeqPe.js")), Ja = ye(() => import("./PenAndPaper-CvyKWfNl.js")), Za = ye(() => import("./UserOptions-BQO4YFrn.js")), Qa = ye(() => import("./PackageVersion-Br3DrrFh.js")), Ka = ye(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_stackline: el } = mo(), { isThemeValid: tl, warnInvalidTheme: al } = ko(), zt = Hl(), j = nt, Ne = Wa, Fe = m({
get() {
return !!j.dataset && j.dataset.length;
},
set(t) {
return t;
}
}), ce = y(null), Q = y(Fa()), Et = y(!1), It = y(null), X = y([]), Pt = y(0), Ot = y(null), Rt = y(null), _e = y(null), Bt = y(null), Vt = y(null), De = y(!1), it = y(!1), Yt = y(0), ll = y(0), ol = y(0), Ut = y(!1), ze = y(null), ut = y(null), Ce = y(!1), ct = y(null), ht = y(null), vt = y(null), je = y(null), sl = y(null), Ee = y(null), Ie = y(!1);
function dt() {
Ie.value = !Ie.value;
}
Wl(() => {
Ut.value = !0, Kt();
});
const e = y(ft()), { loading: he, FINAL_DATASET: mt, manualLoading: Je } = yo({
...Xl(j),
FINAL_CONFIG: e,
prepareConfig: ft,
callback: () => {
Promise.resolve().then(async () => {
await et();
});
},
skeletonDataset: [
{
name: "",
series: [3, 2, 1, 5, 13, 21, 8, 89, 34, 55],
color: "#8A8A8A"
},
{
name: "",
series: [1, 2, 3, 5, 8, 13, 21, 34, 55, 89],
color: "#CACACA"
}
],
skeletonConfig: Zl({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
useCssAnimation: !1,
table: { show: !1 },
tooltip: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
lines: {
totalValues: { show: !1 },
dataLabels: { show: !1 }
},
grid: {
frame: {
stroke: "#6A6A6A"
},
scale: {
scaleMin: 0,
scaleMax: 144
},
x: {
axisColor: "#6A6A6A",
linesColor: "#6A6A6A",
axisName: { show: !1 },
timeLabels: { show: !1 }
},
y: {
axisColor: "#6A6A6A",
linesColor: "#6A6A6A",
axisName: { show: !1 },
axisLabels: { show: !1 }
}
},
legend: {
backgroundColor: "transparent"
},
padding: {
left: 24,
right: 24,
bottom: 12
},
zoom: {
show: !1,
startIndex: null,
endIndex: null
}
}
}
}
})
}), { userOptionsVisible: gt, setUserOptionsVisibility: Ht, keepUserOptionState: Wt } = Ao({ config: e.value }), { svgRef: we } = Co({ config: e.value.style.chart.title });
function rl() {
Ce.value = !0, Ht(!0);
}
function nl() {
Ht(!1), Ce.value = !1;
}
function ft() {
const t = _t({
userConfig: j.config,
defaultConfig: el
});
let l = {};
const a = t.theme;
if (a)
if (!tl.value(t))
al(t), l = t;
else {
const o = _t({
userConfig: Ua[a] || j.config,
defaultConfig: t
});
l = {
..._t({
userConfig: j.config,
defaultConfig: o
}),
customPalette: t.customPalette.length ? t.customPalette : Ql[a] || ot
};
}
else
l = t;
return l;
}
const Xt = m(() => e.value.style.chart.lines.dataLabels.hideUnderValue !== null), qt = m(() => e.value.style.chart.lines.dataLabels.hideUnderPercentage !== null);
Le(() => j.config, (t) => {
he.value || (e.value = ft()), gt.value = !e.value.userOptions.showOnChartHover, Kt(), Yt.value += 1, ll.value += 1, ol.value += 1, q.value.dataLabels.show = e.value.style.chart.lines.dataLabels.show, q.value.showTable = e.value.table.show, q.value.showTooltip = e.value.style.chart.tooltip.show, ve.value.width = e.value.style.chart.width, ve.value.height = e.value.style.chart.height, ve.value.paddingRatio = {
top: e.value.style.chart.padding.top / e.value.style.chart.height,
right: e.value.style.chart.padding.right / e.value.style.chart.width,
bottom: e.value.style.chart.padding.bottom / e.value.style.chart.height,
left: e.value.style.chart.padding.left / e.value.style.chart.width
}, Qe();
}, { deep: !0 }), Le(() => j.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (Je.value = !1), la();
}, { deep: !0 });
const q = y({
dataLabels: {
show: e.value.style.chart.lines.dataLabels.show
},
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
});
Le(e, () => {
q.value = {
dataLabels: {
show: e.value.style.chart.lines.dataLabels.show
},
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
};
}, { immediate: !0 });
const { isPrinting: Gt, isImaging: jt, generatePdf: Jt, generateImage: Zt } = bo({
elementId: `stackline_${Q.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-stackline",
options: e.value.userOptions.print
}), il = m(() => e.value.userOptions.show && !e.value.style.chart.title.text), ve = y({
width: e.value.style.chart.width,
height: e.value.style.chart.height,
paddingRatio: {
top: e.value.style.chart.padding.top / e.value.style.chart.height,
right: e.value.style.chart.padding.right / e.value.style.chart.width,
bottom: e.value.style.chart.padding.bottom / e.value.style.chart.height,
left: e.value.style.chart.padding.left / e.value.style.chart.width
}
}), ul = m(() => Kl(e.value.customPalette)), me = La(null), Ae = La(null), Qt = y(null), yt = m(() => !!e.value.debug);
function Kt() {
if (_a(j.dataset) ? (Da({
componentName: "VueUiStackline",
type: "dataset",
debug: yt.value
}), Je.value = !0) : j.dataset.forEach((t, l) => {
eo({
datasetObject: t,
requiredAttributes: ["name", "series"]
}).forEach((a) => {
Fe.value = !1, Da({
componentName: "VueUiStackline",
type: "datasetSerieAttribute",
property: a,
index: l,
debug: yt.value
}), Je.value = !0;
});
}), _a(j.dataset) || (Je.value = e.value.loading), setTimeout(() => {
it.value = !0;
}, 10), e.value.responsive) {
const t = Ea(() => {
it.value = !1;
const { width: l, height: a } = vo({
chart: ce.value,
noTitle: Bt.value,
title: e.value.style.chart.title.text ? Ot.value : null,
legend: e.value.style.chart.legend.show ? Rt.value : null,
slicer: e.value.style.chart.zoom.show && ne.value > 6 ? _e.value.$el : null,
source: Vt.value
});
requestAnimationFrame(() => {
ve.value.width = l, ve.value.height = a - 12, clearTimeout(Qt.value), Qt.value = setTimeout(() => {
it.value = !0;
}, 10);
});
});
me.value && (Ae.value && me.value.unobserve(Ae.value), me.value.disconnect()), me.value = new ResizeObserver(t), Ae.value = ce.value.parentNode, me.value.observe(Ae.value);
}
et();
}
Nt(() => {
me.value && (Ae.value && me.value.unobserve(Ae.value), me.value.disconnect());
});
function cl() {
let t = 0;
vt.value && (t = Array.from(vt.value.querySelectorAll("text")).reduce((o, s) => {
const r = s.getComputedTextLength();
return r > o ? r : o;
}, 0));
const l = ht.value ? ht.value.getBoundingClientRect().width : 0;
return t + l + (l ? 24 : 0);
}
const pt = y(0), bt = y(0), hl = Ea((t) => {
pt.value = t;
}, 100);
ql((t) => {
const l = je.value;
if (!l) return;
const a = new ResizeObserver((o) => {
hl(o[0].contentRect.height);
});
a.observe(l), t(() => a.disconnect());
}), Nt(() => {
pt.value = 0, bt.value = 0;
});
const ea = m(() => {
let t = 0;
ct.value && (t = ct.value.getBBox().height);
let l = 0;
return je.value && (l = pt.value), t + l;
}), v = m(() => {
const { height: t, width: l } = ve.value, { right: a } = ve.value.paddingRatio;
let o = e.value.style.chart.lines.totalValues.show && j.dataset && j.dataset.length > 1 ? e.value.style.chart.lines.totalValues.fontSize * 1.3 : 0, s = 0;
e.value.style.chart.grid.y.axisLabels.show && (s = cl());
const r = e.value.style.chart.padding.top + o, n = l - l * a - bt.value, p = t - e.value.style.chart.padding.bottom - ea.value - o, k = e.value.style.chart.padding.left + s, L = l - k - l * a - bt.value, C = t - r - e.value.style.chart.padding.bottom - ea.value - o;
return {
chartHeight: Math.max(0, t),
chartWidth: Math.max(0, l),
top: r,
right: Math.max(0, n),
bottom: Math.max(0, p),
left: Math.max(0, k),
width: Math.max(0, L),
height: Math.max(0, C)
};
}), vl = m(() => {
const { left: t, top: l, width: a, height: o } = v.value, s = c.value.start, r = c.value.end, n = Math.max(1, r - s), p = Math.max(0, Math.min(n, (le.value.start ?? s) - s)), k = Math.max(0, Math.min(n, (le.value.end ?? r) - s)), L = Math.max(0, k - p), C = {
fill: e.value.style.chart.zoom.preview.fill,
stroke: e.value.style.chart.zoom.preview.stroke,
"stroke-width": e.value.style.chart.zoom.preview.strokeWidth,
"stroke-dasharray": e.value.style.chart.zoom.preview.strokeDasharray,
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: {
pointerEvents: "none",
transition: "none !important",
animation: "none !important"
}
}, N = a / n;
return {
x: t + p * N,
y: l,
width: L * N,
height: o,
...C
};
}), ae = m(() => mt.value.map((t, l) => {
const a = to(t.color) || ul.value[l] || ot[l] || ot[l % ot.length];
return {
...t,
shape: t.shape || "circle",
standalone: !!t.standalone,
// In distributed mode, all values are converted to positive
series: JSON.parse(JSON.stringify(t.series)).map((o) => e.value.style.chart.lines.distributed ? Math.abs(o) : o),
seriesSource: t.series,
// Store signs to manage display of neg values in distributed mode
signedSeries: t.series.map((o) => o >= 0 ? 1 : -1),
absoluteIndex: l,
id: Fa(),
color: a
};
})), re = m(
() => ae.value.filter((t) => !X.value.includes(t.id) && !t.standalone)
), Ze = m(
() => ae.value.filter((t) => !X.value.includes(t.id) && t.standalone)
), ne = m(() => Math.max(...ae.value.filter((t) => !X.value.includes(t.id)).map((t) => t.series.length)));
function dl(t) {
Ee.value = t;
}
const c = y({
start: 0,
end: Math.max(...mt.value.map((t) => t.series.length))
}), le = y({ start: 0, end: Math.max(...mt.value.map((t) => t.series.length)) });
function xt(t) {
return (c.value.start ?? 0) + (t ?? 0);
}
const ta = m(() => e.value.style.chart.zoom.preview.enable && (le.value.start !== c.value.start || le.value.end !== c.value.end));
function aa(t, l) {
le.value[t] = l;
}
function Qe() {
const t = ne.value;
let l = Math.max(0, Math.min(c.value.start ?? 0, t - 1)), a = Math.max(l + 1, Math.min(c.value.end ?? t, t));
(!Number.isFinite(l) || !Number.isFinite(a) || a <= l) && (l = 0, a = t), c.value.start = l, c.value.end = a, le.value.start = l, le.value.end = a, _e.value && (_e.value.setStartValue(l), _e.value.setEndValue(a));
}
const Pe = y(null);
function ml() {
return new Promise((t) => requestAnimationFrame(
() => requestAnimationFrame(() => t())
));
}
Nt(() => {
Pe.value && cancelAnimationFrame(Pe.value);
});
async function la() {
et(), await Gl(), Pe.value && cancelAnimationFrame(Pe.value), Pe.value = requestAnimationFrame(async () => {
await ml(), et();
});
}
const Ke = m(() => Math.max(0, v.value.width / (c.value.end - c.value.start))), oa = m(() => We(
re.value.map((t) => ({ ...t, series: t.series.map((l) => l ?? 0) }))
).slice(c.value.start, c.value.end)), sa = m(() => {
if (!e.value.style.chart.zoom.minimap.show) return [];
if (re.value.length)
return We(
re.value.map((o) => ({
...o,
series: (o.series || []).map((s) => s ?? 0)
}))
);
const t = Ze.value;
if (!t.length) return [];
const l = Math.max(...t.map((o) => o.series.length || 0));
return Array.from(
{ length: l },
(o, s) => t.reduce((r, n) => r + Math.abs(n.series[s] ?? 0), 0)
);
}), gl = m(() => {
if (!e.value.style.chart.zoom.minimap.show) return [];
const t = re.value, l = Ze.value, a = t.length ? [{
name: "",
series: sa.value,
color: "#000000",
isVisible: !0
}] : [], o = l.map((s) => ({
name: s.name || "",
series: (s.series || []).map((r) => r ?? 0),
color: s.color,
isVisible: !0
}));
return a.concat(o);
}), fl = m(() => We(
re.value.filter((t) => !X.value.includes(t.id)).map((t) => ({
...t,
series: t.series.map((l, a) => {
const o = l ?? 0;
return t.signedSeries[a] === -1 && o >= 0 ? -o : o;
})
}))
).slice(c.value.start, c.value.end)), Se = m(() => {
const t = re.value.filter((l) => !X.value.includes(l.id));
return {
positive: We(t.map((l) => ({
...l,
series: l.series.slice(c.value.start, c.value.end).map((a) => (a ?? 0) >= 0 ? a ?? 0 : 0)
}))),
negative: We(t.map((l) => ({
...l,
series: l.series.slice(c.value.start, c.value.end).map((a) => (a ?? 0) < 0 ? a ?? 0 : 0)
})))
};
}), Me = m(() => {
const t = Math.max(0, c.value.end - c.value.start), l = Array(t).fill(0), a = Array(t).fill(0);
return Ze.value.forEach((o) => {
for (let s = 0; s < t; s += 1) {
const r = o.series[c.value.start + s] ?? 0;
r > 0 && (l[s] = Math.max(l[s], r)), r < 0 && (a[s] = Math.min(a[s], r));
}
}), {
positive: l,
negative: a
};
}), ra = m(() => fl.value.map((t, l) => ({
value: t,
sign: t >= 0 ? 1 : -1
})));
function yl() {
return { y0: $e.value?.[0]?.zero ?? v.value.bottom };
}
function pl(t) {
const { y0: l } = yl(), a = e.value.style.chart.lines.totalValues, o = Math.max(2, a.fontSize * 1.3 + a.offsetY), s = (n) => Math.min(Math.max(n, v.value.top - e.value.style.chart.lines.totalValues.fontSize * 1.3), v.value.bottom + e.value.style.chart.lines.totalValues.fontSize * 2);
if ((ra.value?.[t]?.value ?? 0) >= 0 || e.value.style.chart.lines.distributed) {
let n = 1 / 0;
for (const k of T.value || []) {
const L = k?.series?.[t], C = k?.topY?.[t];
(L ?? 0) > 0 && Number.isFinite(C) && C < n && (n = C);
}
const p = Number.isFinite(n) ? n : l;
return s(p - o - e.value.style.chart.lines.totalValues.offsetY);
} else {
let n = -1 / 0;
for (const k of T.value || []) {
const L = k?.series?.[t], C = k?.topY?.[t];
(L ?? 0) < 0 && Number.isFinite(C) && C > n && (n = C);
}
const p = Number.isFinite(n) ? n : l;
return s(p + o + a.fontSize * 0.7 + e.value.style.chart.lines.totalValues.offsetY);
}
}
const $e = m(() => {
const t = Math.max(...Se.value.positive, 0), l = Math.min(...Se.value.negative, 0), a = Math.max(...Me.value.positive, 0), o = Math.min(...Me.value.negative, 0), s = Math.max(t, a), r = Math.min(l, o), n = [-1 / 0, 1 / 0, NaN, void 0, null].includes(r) ? 0 : r, p = e.value.style.chart.grid.scale.scaleMin, k = e.value.style.chart.grid.scale.scaleMax, L = !e.value.style.chart.lines.distributed && (p !== null || k !== null), C = p !== null && !e.value.style.chart.lines.distributed ? p : n > 0 ? 0 : n, N = k !== null && !e.value.style.chart.lines.distributed ? k : s < 0 ? 0 : s, I = L ? st(C, N, e.value.style.chart.grid.scale.ticks) : rt(C, N, e.value.style.chart.grid.scale.ticks), A = Math.abs(Number(I.min) || 0), u = (Number(I.max) || 0) + A, b = u === 0 || !Number.isFinite(u) ? 1 : u, R = Array.isArray(I.ticks) && I.ticks.length ? I.ticks : [0], g = v.value.bottom - v.value.height * (A / b);
return R.map((S) => {
const P = Number(S) || 0, z = v.value.bottom - v.value.height * ((P + A) / b);
return {
zero: g,
y: z,
x: Z.value.left - 8,
value: P
};
});
}), oe = m(() => Ia({
values: e.value.style.chart.grid.x.timeLabels.values,
maxDatapoints: ne.value,
formatter: e.value.style.chart.grid.x.timeLabels.datetimeFormatter,
start: c.value.start,
end: c.value.end
})), Oe = m(() => Ia({
values: e.value.style.chart.grid.x.timeLabels.values,
maxDatapoints: ne.value,
formatter: e.value.style.chart.grid.x.timeLabels.datetimeFormatter,
start: 0,
end: ne.value
})), bl = m(() => {
const t = e.value.style.chart.grid.x.timeLabels.modulo;
return oe.value.length ? Math.min(t, [...new Set(oe.value.map((l) => l.text))].length) : t;
}), kt = m(() => {
const t = e.value.style.chart.grid.x.timeLabels, l = oe.value || [], a = Oe.value || [], o = c.value.start ?? 0, s = x.value, r = ne.value, n = l.map((k) => k?.text ?? ""), p = a.map((k) => k?.text ?? "");
return ao(
!!t.showOnlyFirstAndLast,
!!t.showOnlyAtModulo,
Math.max(1, bl.value || 1),
n,
p,
o,
s,
r
);
}), na = m(() => {
const t = e.value.style.chart.grid.x.timeLabels.datetimeFormatter, l = go({
useUTC: t.useUTC,
locale: fo[t.locale] || { months: [], shortMonths: [], days: [], shortDays: [] },
januaryAsYear: t.januaryAsYear
});
return (a, o) => {
const r = e.value.style.chart.grid.x.timeLabels.values?.[a];
return r == null ? "" : (l.formatDate(new Date(r), o), l.formatDate(new Date(r), o));
};
}), ia = m(() => (e.value.style.chart.grid.x.timeLabels.values || []).map((l, a) => ({
text: na.value(a, e.value.style.chart.zoom.timeFormat),
absoluteIndex: a
}))), Ct = m(() => (e.value.style.chart.grid.x.timeLabels.values || []).map((l, a) => ({
text: na.value(a, e.value.style.chart.tooltip.timeFormat),
absoluteIndex: a
}))), xl = m(() => {
if (!Fe.value && !he.value) return [];
const t = v.value.height, l = $e.value[0] ? $e.value[0].zero : v.value.bottom, a = c.value.start ?? 0, o = c.value.end ?? 0, s = Math.max(1, o - a), r = Math.max(...Se.value.positive, 0), n = Math.min(...Se.value.negative, 0), p = Math.max(...Me.value.positive, 0), k = Math.min(...Me.value.negative, 0), L = Math.max(r, p), C = Math.min(n, k), N = !e.value.style.chart.lines.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? st(
e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : C > 0 ? 0 : C,
e.value.style.chart.grid.scale.scaleMax !== null ? e.value.style.chart.grid.scale.scaleMax : L < 0 ? 0 : L,
e.value.style.chart.grid.scale.ticks
) : rt(
e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : C > 0 ? 0 : C,
e.value.style.chart.grid.scale.scaleMax !== null ? e.value.style.chart.grid.scale.scaleMax : L < 0 ? 0 : L,
e.value.style.chart.grid.scale.ticks
), { min: I, max: A } = N, d = A + (I >= 0 ? 0 : Math.abs(I)) || 1, u = Array(s).fill(0), b = Array(s).fill(0), R = (g) => s <= 1 ? v.value.left + v.value.width / 2 : v.value.left + g / (s - 1) * v.value.width;
return ae.value.filter((g) => !X.value.includes(g.id)).map((g) => {
const S = [], P = [], z = [], F = new Array(s).fill(null), B = new Array(s).fill(null);
for (let f = 0; f < s; f += 1) {
const $ = a + f, H = g.series?.[$], U = g.signedSeries?.[$], fe = H == null || Number.isNaN(H) ? 0 : H, $a = g.standalone ? fe / d : e.value.style.chart.lines.distributed ? fe / (oa.value[f] || 1) : fe / d;
if (fe >= 0) {
const Ve = t * Math.abs($a);
if (g.standalone)
F[f] = l, B[f] = l - Ve;
else {
const Ye = u[f], Ue = Ye + Ve;
F[f] = l - Ye, B[f] = l - Ue, u[f] = Ue;
}
} else {
const Ve = t * Math.abs($a);
if (g.standalone)
F[f] = l, B[f] = l + Ve;
else {
const Ye = b[f], Ue = Ye + Ve;
F[f] = l + Ye, B[f] = l + Ue, b[f] = Ue;
}
}
S.push(f), P.push(fe), z.push(U ?? (fe >= 0 ? 1 : -1));
}
const V = S.map((f) => ({ x: R(f), y: B[f] })), J = V.map((f) => f.x), G = P.reduce((f, $) => f + Math.abs($ || 0), 0), Y = G === 0 ? 1 : G, O = P.map((f, $) => {
if (e.value.style.chart.lines.distributed && !g.standalone) {
const H = S[$], U = oa.value[H] || 1;
return (f || 0) / U;
}
return (f || 0) / Y;
});
return {
...g,
x: J,
points: V,
baseY: S.map((f) => F[f]),
topY: S.map((f) => B[f]),
series: P,
signedSeries: z,
proportions: O,
rel: S,
fullSeries: Array.isArray(g.fullSeries) ? g.fullSeries : g.series
};
});
}), T = m(() => {
const t = (A) => typeof A == "string" ? A.replace(
/^M\s*[-+]?[\d.]+(?:e[-+]?\d+)?\s*,?\s*[-+]?[\d.]+(?:e[-+]?\d+)?\s*/i,
""
).trim() : "", l = Math.max(...Se.value.positive, 0), a = Math.min(...Se.value.negative, 0), o = Math.max(...Me.value.positive, 0), s = Math.min(...Me.value.negative, 0), r = Math.max(l, o), n = Math.min(a, s), p = !e.value.style.chart.lines.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? st(
e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : n > 0 ? 0 : n,
e.value.style.chart.grid.scale.scaleMax !== null ? e.value.style.chart.grid.scale.scaleMax : r < 0 ? 0 : r,
e.value.style.chart.grid.scale.ticks
) : rt(
e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : n > 0 ? 0 : n,
e.value.style.chart.grid.scale.scaleMax !== null ? e.value.style.chart.grid.scale.scaleMax : r < 0 ? 0 : r,
e.value.style.chart.grid.scale.ticks
), k = Number(p.min) || 0, L = Number(p.max) || 0, C = Math.abs(k), N = L + C || 1, I = (A) => {
if (e.value.style.chart.lines.distributed) {
const d = Math.max(0, Math.min(1, A));
return minimapH - minimapH * d;
}
return clampY(minimapH - minimapH * (((A ?? 0) + C) / N));
};
return xl.value.map((A) => {
const d = A.x.length, u = Array.isArray(A.fullSeries) ? A.fullSeries : A.series, b = ({ left: Y = 0, unitW: O }) => {
const f = u.length;
return !Number.isFinite(O) || O <= 0 || f <= 0 ? [] : f === 1 ? [Y + O * 0.5] : u.map(($, H) => Y + H * O);
}, R = ({ minimapH: Y }) => !Number.isFinite(Y) || Y <= 0 ? [] : u.map((O) => I(O || 0)), g = ({ minimapH: Y }) => {
if (!Number.isFinite(Y) || Y <= 0) return [];
const O = I(0);
return u.map(() => O);
};
if (d === 0)
return {
...A,
points: [],
smoothPath: "",
straightPath: "",
smoothArea: "",
straightArea: "",
xMinimap: b,
yMinimap: R,
yMinimapBase: g
};
const S = A.x.map((Y, O) => ({ x: Y, y: A.topY[O] })), P = A.x.map((Y, O) => ({ x: Y, y: A.baseY[O] })), z = d >= 2 ? pe(S) : `M${S[0].x},${S[0].y}`, F = d >= 2 ? be(S) : `M${S[0].x},${S[0].y}`, B = d >= 2 ? `M${t(z)}` : z, V = d >= 2 ? `M${t(F)}` : F;
let J = "", G = "";
if (e.value.style.chart.lines.useArea && d >= 2) {
const Y = pe([...P].reverse()), O = be([...P].reverse()), f = P[P.length - 1];
J = `M${S[0].x},${S[0].y} ${t(z)} L${f.x},${f.y} ${t(Y)} Z`, G = `M${S[0].x},${S[0].y} ${t(F)} L${f.x},${f.y} ${t(O)} Z`;
}
return {
...A,
points: S,
smoothPath: B,
straightPath: V,
smoothArea: J,
straightArea: G,
xMinimap: b,
yMinimap: R,
yMinimapBase: g
};
});
}), Re = y(!1), ua = y(!1);
function ca(t) {
const l = ne.value;
return t > l ? l : t < 0 || t < c.value.start ? e.value.style.chart.zoom.startIndex !== null ? c.value.start + 1 : 1 : t;
}
function et() {
if (!Re.value) {
Re.value = !0;
try {
const { startIndex: t, endIndex: l } = e.value.style.chart.zoom, a = ne.value, o = t ?? 0, s = l != null ? Math.min(ca(l + 1), a) : a;
tt.value = !0, c.value.start = o, c.value.end = s, le.value.start = o, le.value.end = s, Qe(), ua.value = !0;
} finally {
queueMicrotask(() => {
tt.value = !1;
}), Re.value = !1;
}
}
}
function kl(t) {
Re.value || tt.value || t !== c.value.start && (c.value.start = t, le.value.start = t, Qe());
}
function Cl(t) {
if (Re.value || tt.value) return;
const l = ca(t);
l !== c.value.end && (c.value.end = l, le.value.end = l, Qe());
}
const Z = m(() => ({
left: v.value.left,
right: v.value.right,
width: v.value.width
})), tt = y(!1), wl = m(() => ve.value.width), Al = m(() => ve.value.height);
wo({
timeLabelsEls: je,
timeLabels: oe,
slicer: c,
configRef: e,
rotationPath: ["style", "chart", "grid", "x", "timeLabels", "rotation"],
autoRotatePath: ["style", "chart", "grid", "x", "timeLabels", "autoRotate", "enable"],
isAutoSize: !1,
width: wl,
height: Al,
rotation: e.value.style.chart.grid.x.timeLabels.autoRotate.angle
});
const wt = y(null);
function ha(t) {
const l = we.value;
if (!l) return null;
if (l.createSVGPoint && l.getScreenCTM) {
const N = l.createSVGPoint();
N.x = t.clientX, N.y = t.clientY;
const I = l.getScreenCTM();
if (I) {
const A = N.matrixTransform(I.inverse());
return { x: A.x, y: A.y, ok: !0 };
}
}
const a = l.getBoundingClientRect(), o = l.viewBox?.baseVal || { x: 0, y: 0, width: a.width, height: a.height }, s = Math.min(a.width / o.width, a.height / o.height), r = o.width * s, n = o.height * s, p = (a.width - r) / 2, k = (a.height - n) / 2, L = (t.clientX - a.left - p) / s + o.x, C = (t.clientY - a.top - k) / s + o.y;
return { x: L, y: C, ok: !0 };
}
let xe = 0;
const K = m(() => Math.max(1, c.value.end - c.value.start)), At = m(
() => K.value > 1 ? v.value.width / (K.value - 1) : 0
);
function se(t) {
return K.value <= 1 ? v.value.left + v.value.width / 2 : v.value.left + t * At.value;
}
function va(t) {
if (K.value <= 1)
return { x: v.value.left, width: v.value.width };
const l = t === 0 ? v.value.left : (se(t - 1) + se(t)) / 2, a = t === K.value - 1 ? v.value.left + v.value.width : (se(t) + se(t + 1)) / 2;
return { x: l, width: Math.max(0, a - l) };
}
function Sl(t) {
Ie.value || (xe && cancelAnimationFrame(xe), xe = requestAnimationFrame(() => {
xe = 0;
const l = ha(t);
if (!l || !we.value) {
St();
return;
}
const { left: a, right: o, top: s, bottom: r } = v.value;
if (l.x < a || l.x > o || l.y < s || l.y > r) {
St();
return;
}
let n = 0;
if (K.value > 1) {
const p = (l.x - a) / At.value;
n = Math.round(p);
} else
n = 0;
n < 0 && (n = 0), n > K.value - 1 && (n = K.value - 1), wt.value !== n && (wt.value = n, da(!0, n));
}));
}
function Ml(t) {
const l = ha(t);
if (!l || !we.value) return;
const { left: a, right: o, top: s, bottom: r } = v.value;
if (l.x < a || l.x > o || l.y < s || l.y > r) return;
let n = 0;
if (K.value > 1) {
const p = (l.x - a) / At.value;
n = Math.round(p);
} else
n = 0;
n < 0 && (n = 0), n > K.value - 1 && (n = K.value - 1), Ma({
seriesIndex: n,
datapoint: wa(n)
}), $l(n);
}
function $l(t) {
const l = JSON.parse(JSON.stringify(T.value)).map((a) => ({
name: a.name,
value: a.series[t] === 0 ? 0 : a.series[t] || null,
proportion: a.proportions[t] || null,
color: a.color,
id: a.id
}));
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: t + c.value.start }), Ne("selectDatapoint", { datapoint: l, period: oe.value[t] });
}
Le(
() => [c.value.start, c.value.end, T.value.length],
() => {
const t = K.value;
if (x.value != null) {
if (t <= 0) {
x.value = null;
return;
}
x.value < 0 && (x.value = 0), x.value > t - 1 && (x.value = t - 1);
}
}
);
function St() {
xe && (cancelAnimationFrame(xe), xe = 0), wt.value = null, da(!1, null);
}
const x = y(null), Mt = m(() => {
const t = x.value, l = t == null ? null : xt(t);
return T.value.map((a) => ({
slotAbsoluteIndex: a.absoluteIndex,
shape: a.shape || "circle",
name: a.name,
color: a.color,
value: t == null ? null : a.series.find((o, s) => s === t),
sourceValue: l == null ? null : a.seriesSource?.[l],
comments: a.comments || [],
id: a.id,
standalone: !!a.standalone
}));
}), Ll = m(() => {
const t = e.value.style.chart.tooltip.customFormat, l = [...Mt.value].reverse(), a = l.filter((u) => !u.standalone), o = l.filter((u) => u.standalone), s = a.map((u) => u.value).filter((u) => lo(u) && u !== null).reduce((u, b) => Math.abs(u) + Math.abs(b), 0);
if (oo(t) && so(
() => t({
absoluteIndex: x.value + c.value.start,
seriesIndex: x.value,
datapoint: Mt.value,
series: ae.value,
config: e.value
})
))
return t({
absoluteIndex: x.value + c.value.start,
seriesIndex: x.value,
datapoint: Mt.value,
series: ae.value,
config: e.value
});
const {
showValue: r,
showTotal: n,
totalTranslation: p,
showPercentage: k,
borderColor: L,
roundingValue: C,
roundingPercentage: N
} = e.value.style.chart.tooltip, I = (u) => !u.shape || !["star", "triangle", "square", "diamond", "pentagon", "hexagon"].includes(u.shape) ? `<svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="${e.value.style.chart.tooltip.backgroundColor}" stroke-width="1" fill="${u.color}" /></svg>` : u.shape === "star" ? `<svg viewBox="0 0 12 12" height="14" width="14"><polygon stroke="${e.value.style.chart.tooltip.backgroundColor}" stroke-width="1" fill="${u.color}" points="${ho({ plot: { x: 6, y: 6 }, radius: 5 })}" /></svg>` : u.shape === "triangle" ? `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${Ge({ plot: { x: 6, y: 6 }, radius: 6, sides: 3, rotation: 0.52 }).path}" fill="${u.color}" stroke="${e.value.style.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>` : u.shape === "square" ? `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${Ge({ plot: { x: 6, y: 6 }, radius: 6, sides: 4, rotation: 0.8 }).path}" fill="${u.color}" stroke="${e.value.style.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>` : u.shape === "diamond" ? `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${Ge({ plot: { x: 6, y: 6 }, radius: 5, sides: 4, rotation: 0 }).path}" fill="${u.color}" stroke="${e.value.style.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>` : u.shape === "pentagon" ? `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${Ge({ plot: { x: 6, y: 6 }, radius: 5, sides: 5, rotation: 0.95 }).path}" fill="${u.color}" stroke="${e.value.style.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>` : `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${Ge({ plot: { x: 6, y: 6 }, radius: 5, sides: 6, rotation: 0 }).path}" fill="${u.color}" stroke="${e.value.style.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`, A = (u, b) => {
const R = b ? ke({
v: isNaN((u.value ?? 0) / (s || 1)) ? 0 : Math.abs(u.value ?? 0) / (s || 1) * 100,
s: "%",
r: N
}) : "", g = r && b ? "(" : "", S = r && b ? ")" : "";
return `
<div style="display:flex;flex-direction:row;align-items:center;gap:4px">
<div style="width:20px;height:20px;display:flex;align-items:center;justify-content:center;">${I(u)}</div>
${u.name}${r || b ? ":" : ""}
${r ? Xe(
e.value.style.chart.lines.dataLabels.formatter,
u.sourceValue,
ke({
p: e.value.style.chart.lines.dataLabels.prefix,
v: u.sourceValue,
s: e.value.style.chart.lines.dataLabels.suffix,
r: C
})
) : ""} ${g}${R}${S}
</div>
`;
};
let d = "";
return (oe.value[x.value] && oe.value[x.value].text || Ct.value[x.value] && Ct.value[x.value].text && e.value.style.chart.tooltip.showTimeLabel) && (d += `<div style="width:100%;text-align:center;border-bottom:1px solid ${L};padding-bottom:6px;margin-bottom:3px;">${e.value.style.chart.tooltip.useDefaultTimeFormat ? oe.value[x.value]?.text : Ct.value[x.value]?.text || Oe.value[x.value]?.text || ""}</div>`), n && a.length > 1 && (d += `<div class="vue-data-ui-tooltip-total" style="display:flex;flex-direction:row;align-items:center;gap:4px">
<span>${p}:</span>
<span>${Xe(
e.value.style.chart.lines.dataLabels.formatter,
qe(s),
ke({
p: e.value.style.chart.lines.dataLabels.prefix,
v: qe(s),
s: e.value.style.chart.lines.dataLabels.suffix,
r: C
}),
{ datapoint: { name: p, value: qe(s) } }
)}</span>
</div>`), a.forEach((u) => {
d += A(u, k);
}), o.length && (d += `<div style="border-top:1px solid ${re.value.length ? L : "transparent"}; margin:${re.value.length ? "6px 0" : "0"};"></div>`, o.forEach((u) => {
d += A(u, !1);
})), `<div>${d}</div>`;
});
function da(t, l = null) {
Et.value = t;
const a = T.value.map((o) => ({
name: o.name,
value: [null, void 0, NaN].includes(o.series[l]) ? null : o.series[l],
color: o.color
}));
t ? (x.value = l, Ma({ seriesIndex: l, datapoint: a }), e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: a, seriesIndex: l + c.value.start })) : (x.value = null, Ne("selectX", { seriesIndex: null, dataset: null, indexLabel: null }), e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: l + c.value.start }));
}
function ma(t, l) {
const a = JSON.parse(JSON.stringify(T.value)).map((o) => ({
name: o.name,
value: o.series[l] === 0 ? 0 : (o.signedSeries[l] === -1 && o.series[l] >= 0 ? -o.series[l] : o.series[l]) || null,
proportion: o.proportions[l] || null,
color: o.color,
id: o.id
}));
Ne("selectTimeLabel", {
datapoint: a,
absoluteIndex: t.absoluteIndex,
label: t.text
});
}
function $t(t) {
if (X.value.includes(t.id))
X.value = X.value.filter((l) => l !== t.id);
else {
if (X.value.length === ae.value.length - 1) return;
X.value.push(t.id);
}
Ne("selectLegend", T.value);
}
const Lt = m(() => ae.value.map((t) => ({
...t,
opacity: X.value.includes(t.id) ? 0.5 : 1,
segregate: () => $t(t),
isSegregated: X.value.includes(t.id)
}))), Tl = m(() => ({
cy: "stackline-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
}));
function ga(t) {
if (!ae.value.length)
return e.value.debug && console.warn("VueUiStackline - There are no series to show."), null;
const l = ae.value.find((a) => a.name === t);
return l || (e.value.debug && console.warn(`VueUiStackline - Series name not found "${t}"`), null);
}
function Nl(t) {
const l = ga(t);
l !== null && X.value.includes(l.id) && $t({ id: l.id });
}
function Fl(t) {
const l = ga(t);
l !== null && (X.value.includes(l.id) || $t({ id: l.id }));
}
const fa = m(() => {
if (T.value.length === 0)
return { head: [], body: [], config: {}, columnNames: [] };
const t = T.value.map(({ name: a, color: o }) => ({ label: a, color: o })), l = [];
return kt.value.forEach((a) => {
const o = a.absoluteIndex, r = [e.value.style.chart.grid.x.timeLabels.values?.[o] ? a.text : o + 1];
ae.value.forEach((n) => {
const p = n.series?.[o], k = Number((p ?? 0).toFixed(e.value.table.td.roundingValue));
r.push(k);
}), l.push(r);
}), { head: t, body: l };
});
function Tt(t = null) {
const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = ["", ...fa.value.head.map((n) => n.label)], o = fa.value.body, s = l.concat([a]).concat(o), r = uo(s);
t ? t(r) : co({ csvContent: r, title: e.value.style.chart.title.text || "vue-ui-stackline" });
}
const at = m(() => {
const t = [""].concat(T.value.map((r) => r.name)).concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>'), l = [], a = Math.max(0, c.value.end - c.value.start);
for (let r = 0; r < a; r += 1) {
const n = xt(r), p = e.value.style.chart.grid.x.timeLabels.values?.[n] ? oe.value?.[r]?.text ?? n + 1 : n + 1, k = T.value.map((N) => {
const I = N.series?.[r] ?? 0;
return Number(I.toFixed(e.value.table.td.roundingValue));
}), C = T.value.filter((N) => !N.standalone).map((N) => N.series?.[r] ?? 0).reduce((N, I) => N + I, 0);
l.push([p].concat(k).concat(Number(C.toFixed(e.value.table.td.roundingValue))));
}
const o = {
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
}, s = [e.value.table.columnNames.period].concat(T.value.map((r) => r.name)).concat(e.value.table.columnNames.total);
return { head: t, body: l, config: o, colNames: s };
}), _l = m(() => e.value.style.chart.backgroundColor), Dl = m(() => e.value.style.chart.legend), zl = m(() => e.value.style.chart.title), { exportSvg: El, getSvg: Il } = xo({
svg: we,
title: zl,
legend: Dl,
legendItems: Lt,
backgroundColor: _l
});
async function ya({ isCb: t }) {
if (t) {
const { blob: l, url: a, text: o, dataUrl: s } = await Il();
e.value.userOptions.callbacks.svg({ blob: l, url: a, text: o, dataUrl: s });
} else
El();
}
async function Pl({ scale: t = 2 } = {}) {
if (!ce.value) return;
const { width: l, height: a } = ce.value.getBoundingClientRect(), o = l / a, { imageUri: s, base64: r } = await So({ domElement: ce.value, base64: !0, img: !0, scale: t });
return {
imageUri: s,
base64: r,
title: e.value.style.chart.title.text,
width: l,
height: a,
aspectRatio: o
};
}
const Be = m(() => {
const t = e.value.table.useDialog && !e.value.table.show, l = q.value.showTable;
return {
component: t ? Ka : Ga,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: t ? {
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: De.value,
fullscreenParent: ce.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: l,
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
}
}
}
};
});
Le(() => q.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && ze.value ? ze.value.open() : "close" in ze.value && ze.value.close());
});
function pa() {
q.value.showTable = !1, ut.value && ut.value.setTableIconState(!1);
}
function ba(t) {
De.value = t, Pt.value += 1;
}
function xa() {
q.value.showTable = !q.value.showTable;
}
function ka() {
q.value.dataLabels.show = !q.value.dataLabels.show;
}
function Ca() {
q.value.showTooltip = !q.value.showTooltip;
}
function Ol() {
return T.value;
}
function wa(t) {
const l = t ?? 0, a = xt(l);
return JSON.parse(JSON.stringify(T.value)).map((o) => {
const s = o.series[l], r = o.signedSeries?.[l], n = s === 0 ? 0 : (r === -1 && s >= 0 ? -s : s) || null;
return {
name: o.name,
absoluteIndex: o.absoluteIndex,
value: n,
proportion: o.proportions?.[l] || null,
color: o.color,
id: o.id,
timeLabel: Oe.value?.[a] || null
};
});
}
const Rl = m(() => Array(ne.value).fill(0).map((t, l) => wa(l)));
Le(() => j.selectedXIndex, (t) => {
if ([null, void 0].includes(j.selectedXIndex)) {
x.value = null;
return;
}
const l = t - c.value.start;
l < 0 || t >= c.value.end ? x.value = null : x.value = l ?? null;
}, { immediate: !0 });
const Aa = m(() => {
if (e.value.style.chart.lines.distributed)
return { min: -1, max: 1 };
const t = re.value, l = Ze.value, a = Math.max(
1,
...[...t, ...l].map((d) => d.series?.length || 0)
), o = Array(a).fill(0), s = Array(a).fill(0);
t.forEach((d) => {
for (let u = 0; u < a; u += 1) {
const b = d.series[u] ?? 0;
b >= 0 ? o[u] += b : s[u] += b;
}
});
const r = Array(a).fill(0), n = Array(a).fill(0);
l.forEach((d) => {
for (let u = 0; u < a; u += 1) {
const b = d.series[u] ?? 0;
b > 0 && (r[u] = Math.max(r[u], b)), b < 0 && (n[u] = Math.min(n[u], b));
}
});
const p = Math.max(0, ...o, ...r), k = Math.min(0, ...s, ...n), L = e.value.style.chart.grid.scale.scaleMin, C = e.value.style.chart.grid.scale.scaleMax, N = e.value.style.chart.grid.scale.ticks, A = !e.value.style.chart.lines.distributed && (L !== null || C !== null) ? st(
L !== null ? L : k > 0 ? 0 : k,
C !== null ? C : p < 0 ? 0 : p,
N
) : rt(
L !== null ? L : k > 0 ? 0 : k,
C !== null ? C : p < 0 ? 0 : p,
N
);
return { min: Number(A.min) || 0, max: Number(A.max) || 0 };
});
function Bl({ minimapH: t, unitW: l }) {
const a = (d) => typeof d == "string" ? d.replace(/^M\s*[-+]?[\d.]+(?:e[-+]?\d+)?\s*,?\s*[-+]?[\d.]+(?:e[-+]?\d+)?\s*/i, "").trim() : "";
if (!Number.isFinite(t) || t <= 0 || !Number.isFinite(l) || l <= 0)
return "";
const o = T.value.filter((d) => !d.standalone), s = T.value.filter((d) => d.standalone), r = Math.max(0, ...T.value.map((d) => Array.isArray(d.fullSeries) ? d.fullSeries.length : d.series.length));
if (r <= 0) return "";
const n = r === 1 ? [l * 0.5] : Array.from({ length: r }, (d, u) => u * l);
if (e.value.style.chart.lines.distributed) {
const d = Array.from({ length: r }, (g, S) => {
let P = 0;
return o.forEach((z) => {
const B = (Array.isArray(z.fullSeries) ? z.fullSeries : z.series)?.[S];
B != null && !Number.isNaN(B) && (P += Math.abs(B));
}), P || 1;
}), u = (g) => {
const S = Math.max(0, Math.min(1, g || 0));
return t - t * S;
}, b = [], R = Array(r).fill(0);
return o.forEach((g) => {
const S = Array.isArray(g.fullSeries) ? g.fullSeries : g.series, P = new Array(r), z = new Array(r);
for (let U = 0; U < r; U += 1) {
const ge = S?.[U], fe = ge == null || Number.isNaN(ge) ? 0 : Math.abs(ge) / d[U];
z[U] = R[U], R[U] += fe, P[U] = R[U];
}
const F = P.map(u), B = z.map(u), V = n.map((U, ge) => ({ x: U, y: F[ge] })), J = n.map((U, ge) => ({ x: U, y: B[ge] })), G = pe(V), Y = pe([...J].reverse()), O = be(V), f = be([...J].reverse()), $ = J[J.length - 1];
if (e.value.style.chart.lines.useArea) {
const U = e.value.style.chart.lines.smooth ? `M${V[0].x},${V[0].y} ${a(G)} L${$.x},${$.y} ${a(Y)} Z` : `M${V[0].x},${V[0].y} ${a(O)} L${$.x},${$.y} ${a(f)} Z`;
b.push(
`<path d="${U}"
fill="${zt.pattern ? `url(#pattern_${Q.value}_${g.absoluteIndex})` : (e.value.style.chart.lines.gradient.show, g.color)}"
opacity="${e.value.style.chart.lines.areaOpacity}"
stroke="none" />`
);
}
const H = e.value.style.chart.lines.smooth ? `M${V[0].x},${V[0].y} ${a(G)}` : `M${V[0].x},${V[0].y} ${a(O)}`;
b.push(
`<path d="${H}"
fill="none"
stroke="${g.color}"
stroke-width="${e.value.style.chart.lines.strokeWidth}"
stroke-linecap="round" />`
);
}), s.length && s.forEach((g) => {
const S = Array.isArray(g.fullSeries) ? g.fullSeries : g.series, P = Array.from({ length: r }, (J, G) => u(Math.abs(S?.[G] ?? 0) / d[G])), z = n.map((J, G) => ({ x: J, y: P[G] })), F = pe(z), B = be(z), V = e.value.style.chart.lines.smooth ? `M${z[0].x},${z[0].y} ${a(F)}` : `M${z[0].x},${z[0].y} ${a(B)}`;
b.push(
`<path d="${V}"
fill="none"
stroke="${g.color}"
stroke-width="${e.value.style.chart.lines.strokeWidth}"
stroke-linecap="round" />`
);
}), b.join("");
}
const p = Aa.value.min, k = Aa.value.max, L = Math.abs(p), C = k + L || 1, N = (d) => Math.max(0, Math.min(t, d)), I = (d) => N(t - t * (((d ?? 0) + L) / C)), A = [];
if (o.length) {
const d = Array(r).fill(0), u = Array(r).fill(0);
o.forEach((b) => {
const R = Array.isArray(b.fullSeries) ? b.fullSeries : b.series, g = new Array(r), S = new Array(r);
for (let $ = 0; $ < r; $ += 1) {
const H = R?.[$] ?? 0;
H >= 0 ? (S[$] = d[$], d[$] += H, g[$] = d[$]) : (S[$] = u[$], u[$] += H, g[$] = u[$]);
}
const P = g.map(I), z = S.map(I), F = n.map(($, H) => ({ x: $, y: P[H] })), B = n.map(($, H) => ({ x: $, y: z[H] })), V = pe(F), J = pe([...B].reverse()), G = be(F), Y = be([...B].reverse()), O = B[B.length - 1];
if (e.value.style.chart.lines.useArea) {
const $ = e.value.style.chart.lines.smooth ? `M${F[0].x},${F[0].y} ${a(V)} L${O.x},${O.y} ${a(J)} Z` : `M${F[0].x},${F[0].y} ${a(G)} L${O.x},${O.y} ${a(Y)} Z`;
A.push(
`<path d="${$}"
fill="${zt.pattern ? `url(#pattern_${Q.value}_${b.absoluteIndex})` : (e.value.style.chart.lines.gradient.show, b.color)}"
opacity="${e.value.style.chart.lines.areaOpacity}"
stroke="none" />`
);
}
const f = e.value.style.chart.lines.smooth ? `M${F[0].x},${F[0].y} ${a(V)}` : `M${F[0].x},${F[0].y} ${a(G)}`;
A.push(
`<path d="${f}"
fill="none"
stroke="${b.color}"
stroke-width="${e.value.style.chart.lines.strokeWidth}"
stroke-linecap="round" />`
);
});
}
return s.length && s.forEach((d) => {
const b = (Array.isArray(d.fullSeries) ? d.fullSeries : d.series).map(I), R = n.map((z, F) => ({ x: z, y: b[F] })), g = pe(R), S = be(R), P = e.value.style.chart.lines.smooth ? `M${R[0].x},${R[0].y} ${a(g)}` : `M${R[0].x},${R[0].y} ${a(S)}`;
A.push(
`<path d="${P}"
fill="none"
stroke="${d.color}"
stroke-width="${e.value.style.chart.lines.strokeWidth}"
stroke-linecap="round" />`
);
}), A.join("");
}
function Vl(t, l) {
const a = e.value.style.chart.lines, o = a.dataLabels;
return a.showDistributedPercentage && a.distributed ? qt.value ? l === 0 ? !o.hideEmptyPercentages : Math.abs(l) * 100 >= o.hideUnderPercentage : o.hideEmptyPercentages ? Math.abs(l) > 0 : !0 : qt.value ? (Xt.value && yt.value && console.warn("Vue Data UI - VueUiStackline - You cannot set both dataLabels.hideUnderPercentage and dataLabels.hideUnderValue. Note that dataLabels.hideUnderPercentage takes precedence in this case."), Math.abs(t) > Yl.value * o.hideUnderPercentage / 100) : Xt.value ? Math.abs(t) >= o.hideUnderValue : o.hideEmptyValues ? t !== 0 : !0;
}
const Yl = m(() => Math.max(...T.value.flatMap((t) => t.series)));
function Sa(t, l, a, o, s) {
const r = s === -1 && t >= 0 ? -t : t;
return Xe(
e.value.style.chart.lines.dataLabels.formatter,
r,
ke({
p: e.value.style.chart.lines.dataLabels.prefix,
v: r,
s: e.value.style.chart.lines.dataLabels.suffix,
r: e.value.style.chart.lines.dataLabels.rounding
}),
{ datapoint: l, seriesIndex: a, datapointIndex: o }
);
}
function Ul(t, l, a, o) {
return Xe(
e.value.style.chart.lines.dataLabels.formatter,
t,
ke({
v: isNaN(t) ? 0 : t,
s: "%",
r: e.value.style.chart.lines.dataLabels.rounding
}),
{ datapoint: l, seriesIndex: a, datapointIndex: o }
);
}
function Ma({ seriesIndex: t, datapoint: l }) {
const a = c.value.start + t;
Ne("selectX", {
dataset: l,
index: a,
indexLabel: e.value.style.chart.grid.x.timeLabels.values[a]
});
}
return Ha({
getData: Ol,
getImage: Pl,
generatePdf: Jt,
generateCsv: Tt,
generateImage: Zt,
generateSvg: ya,
hideSeries: Fl,
showSeries: Nl,
toggleTable: xa,
toggleLabels: ka,
toggleTooltip: Ca,
toggleAnnotator: dt,
toggleFullscreen: ba
}), (t, l) => (i(), h("div", {
id: `stackline_${Q.value}`,
ref_key: "stacklineChart",
ref: ce,
class: Ta({ "vue-data-ui-component": !0, "vue-ui-stackline": !0, "vue-data-ui-wrapper-fullscreen": De.value }),
style: Te(`background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: rl,
onMouseleave: nl
}, [
e.value.userOptions.buttons.annotator ? (i(), ie(M(Ja), {
key: 0,
svgRef: M(we),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: Ie.value,
onClose: dt
}, {
"annotator-action-close": D(() => [
_(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": D(({ color: a }) => [
_(t.$slots, "annotator-action-color", ee(te({ color: a })), void 0, !0)
]),
"annotator-action-draw": D(({ mode: a }) => [
_(t.$slots, "annotator-action-draw", ee(te({ mode: a })), void 0, !0)
]),
"annotator-action-undo": D(({ disabled: a }) => [
_(t.$slots, "annotator-action-undo", ee(te({ disabled: a })), void 0, !0)
]),
"annotator-action-redo": D(({ disabled: a }) => [
_(t.$slots, "annotator-action-redo", ee(te({ disabled: a })), void 0, !0)
]),
"annotator-action-delete": D(({ disabled: a }) => [
_(t.$slots, "annotator-action-delete", ee(te({ disabled: a })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : w("", !0),
_(t.$slots, "userConfig", {}, void 0, !0),
il.value ? (i(), h("div", {
key: 1,
ref_key: "noTitle",
ref: Bt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : w("", !0),
e.value.style.chart.title.text ? (i(), h("div", {
key: 2,
ref_key: "chartTitle",
ref: Ot,
style: "width:100%;background:transparent;"
}, [
(i(), ie(Mo, {
key: `title_${Yt.value}`,
config: {
title: {
cy: "stackline-title",
...e.value.style.chart.title
},
subtitle: {
cy: "stackline-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : w("", !0),
ue("div", {
id: `legend-top-${Q.value}`
}, null, 8, Fo),
e.value.userOptions.show && Fe.value && (M(Wt) || M(gt)) ? (i(), ie(M(Za), {
ref_key: "userOptionsRef",
ref: ut,
key: `user_option_${Pt.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: M(Gt),
isImaging: M(jt),
uid: Q.value,
hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasLabel: e.value.userOptions.buttons.labels,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: De.value,
chartElement: ce.value,
position: e.value.userOptions.position,
isTooltip: q.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: Ie.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: ba,
onGeneratePdf: M(Jt),
onGenerateCsv: Tt,
onGenerateImage: M(Zt),
onGenerateSvg: ya,
onToggleTable: xa,
onToggleLabels: ka,
onToggleTooltip: Ca,
onToggleAnnotator: dt,
style: Te({
visibility: M(Wt) ? M(gt) ? "visible" : "hidden" : "visible"
})
}, Ft({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: D(({ isOpen: a, color: o }) => [
_(t.$slots, "menuIcon", ee(te({ isOpen: a, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: D(() => [
_(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: D(() => [
_(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: D(() => [
_(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: D(() => [
_(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: D(() => [
_(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: D(() => [
_(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionLabels ? {
name: "optionLabels",
fn: D(() => [
_(t.$slots, "optionLabels", {}, void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: D(({ toggleFullscreen: a, isFullscreen: o }) => [
_(t.$slots, "optionFullscreen", ee(te({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
]),
key: "8"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: D(({ toggleAnnotator: a, isAnnotator: o }) => [
_(t.$slots, "optionAnnotator", ee(te({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
]),
key: "9"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : w("", !0),
(i(), h("svg", {
ref_key: "svgRef",
ref: we,
xmlns: M(ro),
viewBox: `0 0 ${v.value.chartWidth <= 0 ? 10 : v.value.chartWidth} ${v.value.chartHeight <= 0 ? 10 : v.value.chartHeight}`,
class: Ta({ "vue-data-ui-loading": M(he), "no-transition": !e.value.useCssAnimation }),
style: Te(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`),
role: "img",
"aria-live": "polite",
preserveAspectRatio: "xMidYMid",
onMousemove: Sl,
onMouseleave: St,
onClick: Ml
}, [
He(M(Qa)),
(i(!0), h(E, null, W(re.value, (a) => (i(), h(E, null, [
t.$slots.pattern ? (i(), h("defs", Do, [
_(t.$slots, "pattern", lt({ ref_for: !0 }, { seriesIndex: a.absoluteIndex, patternId: `pattern_${Q.value}_${a.absoluteIndex}` }), void 0, !0)
])) : w("", !0)
], 64))), 256)),
t.$slots["chart-background"] ? (i(), h("foreignObject", {
key: 0,
x: Z.value.left,
y: v.value.top,
width: Z.value.width,
height: v.value.height,
style: {
pointerEvents: "none"
}
}, [
_(t.$slots, "chart-background", {}, void 0, !0)
], 8, zo)) : w("", !0),
e.value.style.chart.lines.gradient.show ? (i(), h("defs", Eo, [
(i(!0), h(E, null, W(T.value, (a, o) => (i(), h("linearGradient", {
id: `gradient_${a.id}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
ue("stop", {
offset: "0%",
"stop-color": a.color
}, null, 8, Po),
ue("stop", {
offset: "100%",
"stop-color": M(no)(a.color, e.value.style.chart.lines.gradient.intensity / 100)
}, null, 8, Oo)
], 8, Io))), 256))
])) : w("", !0),
e.value.style.chart.grid.x.showHorizontalLines ? (i(!0), h(E, { key: 2 }, W($e.value, (a, o) => (i(), h("line", {
x1: Z.value.left,
x2: Z.value.right,
y1: a.y,
y2: a.y,
stroke: e.value.style.chart.grid.x.linesColor,
"stroke-width": e.value.style.chart.grid.x.linesThickness,
"stroke-dasharray": e.value.style.chart.grid.x.linesStrokeDasharray,
"stroke-linecap": "round"
}, null, 8, Ro))), 256)) : w("", !0),
e.value.style.chart.grid.y.showVerticalLines ? (i(!0), h(E, { key: 3 }, W(c.value.end - c.value.start, (a, o) => (i(), h("line", {
x1: se(o),
x2: se(o),
y1: v.value.top,
y2: v.value.bottom,
stroke: e.value.style.chart.grid.y.linesColor,
"stroke-width": e.value.style.chart.grid.y.linesThickness,
"stroke-dasharray": e.value.style.chart.grid.y.linesStrokeDasharray,
"stroke-linecap": "round"
}, null, 8, Bo))), 256)) : w("", !0),
e.value.style.chart.grid.x.showAxis ? (i(), h("line", {
key: 4,
x1: Z.value.left,
x2: Z.value.right,
y1: v.value.bottom,
y2: v.value.bottom,
stroke: e.value.style.chart.grid.x.axisColor,
"stroke-width": e.value.style.chart.grid.x.axisThickness,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Vo)) : w("", !0),
e.value.style.chart.grid.y.showAxis && !e.value.style.chart.lines.distributed ? (i(), h("line", {
key: 5,
x1: Z.value.left,
x2: Z.value.left,
y1: v.value.top,
y2: v.value.bottom,
stroke: e.value.style.chart.grid.y.axisColor,
"stroke-width": e.value.style.chart.grid.y.axisThickness,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Yo)) : w("", !0),
e.value.style.chart.grid.x.axisName.show && e.value.style.chart.grid.x.axisName.text ? (i(), h("text", {
key: 6,
ref_key: "xAxisLabel",
ref: ct,
x: v.value.left + v.value.width / 2,
y: v.value.chartHeight - 3,
"font-size": e.value.style.chart.grid.x.axisName.fontSize,
fill: e.value.style.chart.grid.x.axisName.color,
"font-weight": e.value.style.chart.grid.x.axisName.bold ? "bold" : "normal",
"text-anchor": "middle"
}, de(e.value.style.chart.grid.x.axisName.text), 9, Uo)) : w("", !0),
e.value.style.chart.grid.y.axisName.show && e.value.style.chart.grid.y.axisName.text ? (i(), h("text", {
key: 7,
ref_key: "yAxisLabel",
ref: ht,
transform: `translate(${e.value.style.chart.grid.y.axisName.fontSize}, ${v.value.top + v.value.height / 2}) rotate(-90)`,
"font-size": e.value.style.chart.grid.y.axisName.fontSize,
fill: e.value.style.chart.grid.y.axisName.color,
"font-weight": e.value.style.chart.grid.y.axisName.bold ? "bold" : "normal",
"text-anchor": "middle"
}, de(e.value.style.chart.grid.y.axisName.text), 9, Ho)) : w("", !0),
e.value.style.chart.grid.frame.show ? (i(), h("rect", {
key: 8,
style: { pointerEvents: "none", transition: "none", animation: "none !important" },
x: Z.value.left,
y: v.value.top,
width: Z.value.width,
height: v.value.height,
fill: "transparent",
stroke: e.value.style.chart.grid.frame.stroke,
"stroke-width": e.value.style.chart.grid.frame.strokeWidth,
"stroke-linecap": e.value.style.chart.grid.frame.strokeLinecap,
"stroke-linejoin": e.value.style.chart.grid.frame.strokeLinejoin,
"stroke-dasharray": e.value.style.chart.grid.frame.strokeDasharray
}, null, 8, Wo)) : w("", !0),
(i(!0), h(E, null, W(T.value, (a) => (i(), h(E, null, [
e.value.style.chart.lines.useArea && !a.standalone ? (i(), h("path", {
key: 0,
d: e.value.style.chart.lines.smooth ? a.smoothArea : a.straightArea,
fill: t.$slots.pattern ? `url(#pattern_${Q.value}_${a.absoluteIndex})` : e.value.style.chart.lines.gradient.show ? `url(#gradient_${a.id})` : a.color,
opacity: e.value.style.chart.lines.areaOpacity,
style: Te({
transition: M(he) || !e.value.useCssAnimation ? void 0 : "all 0.3s ease-in-out"
})
}, null, 12, Xo)) : w("", !0)
], 64))), 256)),
(i(!0), h(E, null, W(T.value, (a) => (i(), h("path", {
d: e.value.style.chart.lines.smooth ? a.smoothPath : a.straightPath,
stroke: a.color,
"stroke-width": e.value.style.chart.lines.strokeWidth,
fill: "none",
"stroke-linecap": "round",
style: Te({
transition: M(he) || !e.value.useCssAnimation ? void 0 : "all 0.3s ease-in-out"
})
}, null, 12, qo))), 256)),
e.value.style.chart.grid.y.axisLabels.show && !e.value.style.chart.lines.distributed ? (i(), h("g", {
key: 9,
ref_key: "scaleLabels",
ref: vt
}, [
(i(!0), h(E, null, W($e.value, (a, o) => (i(), h("line", {
x1: Z.value.left,
x2: Z.value.left - 6,
y1: a.y,
y2: a.y,
stroke: e.value.style.chart.grid.x.axisColor,
"stroke-width": 1
}, null, 8, Go))), 256)),
(i(!0), h(E, null, W($e.value, (a, o) => (i(), h("text", {
x: a.x,
y: a.y + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
"font-size": e.value.style.chart.grid.y.axisLabels.fontSize,
"font-weight": e.value.style.chart.grid.y.axisLabels.bold ? "bold" : "normal",
fill: e.value.style.chart.grid.y.axisLabels.color,
"text-anchor": "end"
}, de(M(Xe)(
e.value.style.chart.grid.y.axisLabels.formatter,
a.value,
M(ke)({
p: e.value.style.chart.lines.dataLabels.prefix,
v: a.value,
s: e.value.style.chart.lines.dataLabels.suffix,
r: e.value.style.chart.grid.y.axisLabels.rounding
}),
{ datapoint: a }
)), 9, jo))), 256))
], 512)) : w("", !0),
e.value.style.chart.grid.x.timeLabels.show ? (i(), h("g", {
key: 10,
ref_key: "timeLabelsEls",
ref: je
}, [
t.$slots["time-label"] ? (i(), h("g", Jo, [
(i(!0), h(E, null, W(kt.value, (a, o) => (i(), h("g", null, [
_(t.$slots, "time-label", lt({ ref_for: !0 }, {
x: v.value.left + Ke.value * o + Ke.value / 2,
y: v.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY,
fontSize: e.value.style.chart.grid.x.timeLabels.fontSize,
fill: e.value.style.chart.grid.x.timeLabels.color,
transform: `translate(${v.value.left + Ke.value * o + Ke.value / 2}, ${v.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}), rotate(${e.value.style.chart.grid.x.timeLabels.rotation})`,
absoluteIndex: a.absoluteIndex,
content: a.text,
textAnchor: e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
show: !0
}), void 0, !0)
]))), 256))
])) : (i(), h("g", Zo, [
(i(!0), h(E, null, W(kt.value, (a, o) => (i(), h("g", null, [
String(a.text).includes(`
`) ? (i(), h("text", {
key: o + "-multi",
"text-anchor": e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
"font-size": e.value.style.chart.grid.x.timeLabels.fontSize,
fill: e.value.style.chart.grid.x.timeLabels.color,
transform: `
translate(
${se(o)},
${v.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}
),
rotate(${e.value.style.chart.grid.x.timeLabels.rotation})
`,
style: { cursor: "pointer" },
innerHTML: t.createTSpansFromLineBreaksOnX({
content: String(a.text),
fontSize: e.value.style.chart.grid.x.timeLabels.fontSize,
fill: e.value.style.chart.grid.x.timeLabels.color,
x: 0,
y: 0
}),
onClick: () => ma(a, o)
}, null, 8, Ko)) : (i(), h("text", {
class: "vue-data-ui-time-label",
key: o,
"text-anchor": e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
"font-size": e.value.style.chart.grid.x.timeLabels.fontSize,
"font-weight": e.value.style.chart.grid.x.timeLabels.bold ? "bold" : "normal",
fill: e.value.style.chart.grid.x.timeLabels.color,
transform: `translate(${se(o)}, ${v.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}), rotate(${e.value.style.chart.grid.x.timeLabels.rotation})`,
style: { cursor: "pointer" },
onClick: () => ma(a, o)
}, de(a.text), 9, Qo))
]))), 256))
]))
], 512)) : w("", !0),
(Ce.value || ![null, void 0].includes(x.value)) && !e.value.style.chart.highlighter.useLine ? (i(!0), h(E, { key: 11 }, W(c.value.end - c.value.start, (a, o) => (i(), h("g", {
key: `tooltip_trap_highlighter_${o}`
}, [
ue("rect", {
x: va(o).x,
y: v.value.top,
height: v.value.height,
width: va(o).width,
fill: [Ee.value, x.value].includes(o) ? M(io)(e.value.style.chart.highlighter.color, e.value.style.chart.highlighter.opacity) : "transparent",
style: { transition: "none !important", animation: "none !important" }
}, null, 8, es)
]))), 128)) : w("", !0),
(Ce.value || ![null, void 0].includes(x.value)) && e.value.style.chart.highlighter.useLine ? (i(), h(E, { key: 12 }, [
![null, void 0].includes(x.value) || ![null, void 0].includes(Ee.value) ? (i(), h("g", ts, [
ue("line", {
x1: se((x.value ?? Ee.value) || 0),
x2: se((x.value ?? Ee.value) || 0),
y1: M(qe)(v.value.top),
y2: M(qe)(v.value.bottom),
stroke: e.value.style.chart.highlighter.color,
"stroke-width": e.value.style.chart.highlighter.lineWidth,
"stroke-dasharray": e.value.style.chart.highlighter.lineDasharray,
"stroke-linecap": "round",
style: { transition: "none !important", animation: "none !important", "pointer-events": "none" }
}, null, 8, as)
])) : w("", !0)
], 64)) : w("", !0),
(i(!0), h(E, null, W(T.value, (a) => (i(), h(E, null, [
Ce.value && c.value.end - c.value.start > e.value.style.chart.lines.dot.hideAboveMaxSerieLength ? (i(), h("g", ls, [
x.value != null ? (i(), h(E, { key: 0 }, [
a.rel.includes(x.value) && a.fullSeries?.[c.value.start + x.value] != null && !Number.isNaN(a.fullSeries?.[c.value.start + x.value]) ? (i(), ie(Dt, {
key: 0,
shape: ["triangle", "square", "diamond", "pentagon", "hexagon", "star"].includes(a.shape) ? a.shape : "circle",
color: e.value.style.chart.lines.dot.useSerieColor ? a.color : e.value.style.chart.lines.dot.fill,
plot: {
x: M(za)(a.points[a.rel.indexOf(x.value)].x),
y: M(za)(a.points[a.rel.indexOf(x.value)].y)
},
radius: e.value.style.chart.lines.dot.radius * 1.3,
stroke: e.value.style.chart.lines.dot.useSerieColor ? e.value.style.chart.backgroundColor : a.color,
strokeWidth: e.value.style.chart.lines.dot.strokeWidth,
transition: M(he) ? void 0 : `all ${e.value.style.chart.lines.transitionDurationMs}ms ease-in-out`
}, null, 8, ["shape", "color", "plot", "radius", "stroke", "strokeWidth", "transition"])) : w("", !0)
], 64)) : w("", !0)
])) : w("", !0)
], 64))), 256)),
(i(!0), h(E, null, W(T.value, (a) => (i(), h(E, null, [
c.value.end - c.value.start < e.value.style.chart.lines.dot.hideAboveMaxSerieLength ? (i(!0), h(E, { key: 0 }, W(a.points, (o, s) => (i(), h("g", { key: s }, [
a.fullSeries?.[c.value.start + a.rel[s]] != null && !Number.isNaN(a.fullSeries?.[c.value.start + a.rel[s]]) ? (i(), ie(Dt, {
key: 0,
shape: ["triangle", "square", "diamond", "pentagon", "hexagon", "star"].includes(a.shape) ? a.shape : "circle",
color: e.value.style.chart.lines.dot.useSerieColor ? a.color : e.value.style.chart.lines.dot.fill,
plot: { x: o.x, y: o.y },
radius: Ce.value && x.value === a.rel[s] ? e.value.style.chart.lines.dot.radius * 1.3 : e.value.style.chart.lines.dot.radius,
stroke: e.value.style.chart.lines.dot.useSerieColor ? e.value.style.chart.backgroundColor : a.color,
strokeWidth: e.value.style.chart.lines.dot.strokeWidth,
transition: M(he) ? void 0 : `all ${e.value.style.chart.lines.transitionDurationMs}ms ease-in-out`
}, null, 8, ["shape", "color", "plot", "radius", "stroke", "strokeWidth", "transition"])) : w("", !0)
]))), 128)) : w("", !0)
], 64))), 256)),
q.value.dataLabels.show && e.value.style.chart.lines.dataLabels.hideAboveMaxSerieLength > c.value.end - c.value.start ? (i(), h(E, { key: 13 }, [
(i(!0), h(E, null, W(T.value, (a, o) => (i(), h("g", { key: o }, [
(i(!0), h(E, null, W(a.points, (s, r) => (i(), h(E, { key: r }, [
Vl(a.series[r], a.proportions[r]) ? (i(), h("text", {
key: 0,
x: s.x,
y: s.y + (a.series[r] >= 0 ? -e.value.style.chart.lines.dataLabels.fontSize / 2 + e.value.style.chart.lines.dataLabels.offsetY : e.value.style.chart.lines.dataLabels.fontSize * 1.2 - e.value.style.chart.lines.dataLabels.offsetY),
"font-size": e.value.style.chart.lines.dataLabels.fontSize,
fill: e.value.style.chart.lines.dataLabels.color,
"font-weight": e.value.style.chart.lines.dataLabels.bold ? "bold" : "normal",
"text-anchor": "middle"
}, de(e.value.style.chart.lines.showDistributedPercentage && e.value.style.chart.lines.distributed ? Ul(a.proportions[r] * 100, a, o, a.rel[r]) : Sa(a.series[r], a, o, a.rel[r], a.signedSeries[r])), 9, os)) : w("", !0)
], 64))), 128))
]))), 128)),
e.value.style.chart.lines.totalValues.show && T.value.length > 1 ? (i(), h("g", {
key: 0,
ref_key: "sumTop",
ref: sl
}, [
(i(!0), h(E, null, W(ra.value, (a, o) => (i(), h(E, null, [
!e.value.style.chart.lines.dataLabels.hideEmptyValues || a.value !== 0 ? (i(), h("text", {
key: 0,
x: se(o),
y: pl(o),
"text-anchor": "middle",
"font-size": e.value.style.chart.lines.totalValues.fontSize,
"font-weight": e.value.style.chart.lines.totalValues.bold ? "bold" : "normal",
fill: e.value.style.chart.lines.totalValues.color
}, de(Sa(a.value, a, o, o, a.sign)), 9, ss)) : w("", !0)
], 64))), 256))
], 512)) : w("", !0)
], 64)) : w("", !0),
ta.value ? (i(), h("rect", lt({ key: 14 }, vl.value, {
"data-start": c.value.start,
"data-end": c.value.end
}), null, 16, rs)) : w("", !0),
_(t.$slots, "svg", {
svg: {
drawingArea: v.value,
data: T.value
}
}, void 0, !0)
], 46, _o)),
t.$slots.watermark ? (i(), h("div", ns, [
_(t.$slots, "watermark", ee(te({ isPrinting: M(Gt) || M(jt) })), void 0, !0)
])) : w("", !0),
Ut.value ? (i(), ie(jl, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${Q.value}` : `#legend-bottom-${Q.value}`
}, [
ue("div", {
ref_key: "chartLegend",
ref: Rt
}, [
e.value.style.chart.legend.show ? (i(), ie($o, {
key: 0,
legendSet: Lt.value,
config: Tl.value,
onClickMarker: l[0] || (l[0] = ({ legend: a }) => a.segregate())
}, Ft({
item: D(({ legend: a }) => [
M(he) ? w("", !0) : (i(), h("div", {
key: 0,
onClick: (o) => a.segregate(),
style: Te(`opacity:${X.value.includes(a.id) ? 0.5 : 1}`)
}, de(a.name), 13, is))
]),
_: 2
}, [
t.$slots.pattern ? {
name: "legend-pattern",
fn: D(({ legend: a, index: o }) => [
He(Dt, {
shape: a.shape,
radius: 30,
stroke: "none",
plot: { x: 30, y: 30 },
fill: `url(#pattern_${Q.value}_${o})`
}, null, 8, ["shape", "fill"])
]),
key: "0"
} : void 0
]), 1032, ["legendSet", "config"])) : _(t.$slots, "legend", {
key: 1,
legend: Lt.value
}, void 0, !0)
], 512)
], 8, ["to"])) : w("", !0),
ue("div", {
id: `legend-bottom-${Q.value}`
}, null, 8, us),
Fe.value && e.value.userOptions.buttons.table ? (i(), ie(Jl(Be.value.component), lt({ key: 6 }, Be.value.props, {
ref_key: "tableUnit",
ref: ze,
onClose: pa
}), Ft({
content: D(() => [
He(M(ja), {
colNames: at.value.colNames,
head: at.value.head,
body: at.value.body,
config: at.value.config,
title: e.value.table.useDialog ? "" : Be.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: pa
}, {
th: D(({ th: a }) => [
ue("div", { innerHTML: a }, null, 8, cs)
]),
td: D(({ td: a }) => [
Na(de(isNaN(Number(a)) ? a : M(ke)({
p: e.value.style.chart.lines.dataLabels.prefix,
v: a,
s: e.value.style.chart.lines.dataLabels.suffix,
r: e.value.table.td.roundingValue
})), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"])
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: D(() => [
Na(de(Be.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: D(() => [
ue("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: l[1] || (l[1] = (a) => Tt(e.value.userOptions.callbacks.csv))
}, [
He(M(qa), {
name: "excel",
stroke: Be.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : w("", !0),
e.value.style.chart.zoom.show && ne.value > 6 && Fe.value && ua.value ? (i(), ie(Lo, {
key: 7,
ref_key: "chartSlicer",
ref: _e,
allMinimaps: gl.value,
background: e.value.style.chart.zoom.color,
borderColor: e.value.style.chart.backgroundColor,
customFormat: e.value.style.chart.zoom.customFormat,
cutNullValues: !1,
enableRangeHandles: e.value.style.chart.zoom.enableRangeHandles,
enableSelectionDrag: e.value.style.chart.zoom.enableSelectionDrag,
end: c.value.end,
focusOnDrag: e.value.style.chart.zoom.focusOnDrag,
focusRangeRatio: e.value.style.chart.zoom.focusRangeRatio,
fontSize: e.value.style.chart.zoom.fontSize,
immediate: !e.value.style.chart.zoom.preview.enable,
inputColor: e.value.style.chart.zoom.color,
isPreview: ta.value,
labelLeft: e.value.style.chart.grid.x.timeLabels.values[c.value.start] ? oe.value[0].text : "",
labelRight: e.value.style.chart.grid.x.timeLabels.values[c.value.end - 1] ? oe.value.at(-1).text : "",
max: Math.max(...nt.dataset.map((a) => a.series.length)),
min: 0,
minimap: sa.value,
minimapCompact: e.value.style.chart.zoom.minimap.compact,
minimapFrameColor: e.value.style.chart.zoom.minimap.frameColor,
minimapIndicatorColor: e.value.style.chart.zoom.minimap.indicatorColor,
minimapMerged: !1,
minimapSelectedColor: e.value.style.chart.zoom.minimap.selectedColor,
minimapSelectedColorOpacity: e.value.style.chart.zoom.minimap.selectedColorOpacity,
minimapSelectedIndex: x.value,
minimapSelectionRadius: 1,
preciseLabels: ia.value.length ? ia.value : Oe.value,
refreshEndPoint: e.value.style.chart.zoom.endIndex !== null ? e.value.style.chart.zoom.endIndex + 1 : Math.max(...nt.dataset.map((a) => a.series.length)),
refreshStartPoint: e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex : 0,
selectColor: e.value.style.chart.zoom.highlightColor,
selectedSeries: Rl.value,
smoothMinimap: !1,
start: c.value.start,
textColor: e.value.style.chart.color,
timeLabels: Oe.value,
usePreciseLabels: e.value.style.chart.grid.x.timeLabels.datetimeFormatter.enable && !e.value.style.chart.zoom.useDefaultFormat,
valueEnd: c.value.end,
valueStart: c.value.start,
verticalHandles: e.value.style.chart.zoom.minimap.verticalHandles,
"onUpdate:end": Cl,
"onUpdate:start": kl,
onTrapMouse: dl,
onReset: la,
onFutureEnd: l[2] || (l[2] = (a) => aa("end", a)),
onFutureStart: l[3] || (l[3] = (a) => aa("start", a))
}, {
"reset-action": D(({ reset: a }) => [
_(t.$slots, "reset-action", ee(te({ reset: a })), void 0, !0)
]),
slotMap: D(({ width: a, height: o, unitW: s }) => [
ue("g", {
innerHTML: Bl({ minimapH: o, unitW: s })
}, null, 8, hs)
]),
_: 3
}, 8, ["allMinimaps", "background", "borderColor", "customFormat", "enableRangeHandles", "enableSelectionDrag", "end", "focusOnDrag", "focusRangeRatio", "fontSize", "immediate", "inputColor", "isPreview", "labelLeft", "labelRight", "max", "minimap", "minimapCompact", "minimapFrameColor", "minimapIndicatorColor", "minimapSelectedColor", "minimapSelectedColorOpacity", "minimapSelectedIndex", "preciseLabels", "refreshEndPoint", "refreshStartPoint", "selectColor", "selectedSeries", "start", "textColor", "timeLabels", "usePreciseLabels", "valueEnd", "valueStart", "verticalHandles"])) : w("", !0),
He(M(Xa), {
show: q.value.showTooltip && Et.value,
backgroundColor: e.value.style.chart.tooltip.backgroundColor,
color: e.value.style.chart.tooltip.color,
fontSize: e.value.style.chart.tooltip.fontSize,
borderRadius: e.value.style.chart.tooltip.borderRadius,
borderColor: e.value.style.chart.tooltip.borderColor,
borderWidth: e.value.style.chart.tooltip.borderWidth,
backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
position: e.value.style.chart.tooltip.position,
offsetY: e.value.style.chart.tooltip.offsetY,
parent: ce.value,
content: Ll.value,
isFullscreen: De.value,
isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
smooth: e.value.style.chart.tooltip.smooth,
backdropFilter: e.value.style.chart.tooltip.backdropFilter,
smoothForce: e.value.style.chart.tooltip.smoothForce,
smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
}, {
"tooltip-before": D(() => [
_(t.$slots, "tooltip-before", ee(te({ ...It.value })), void 0, !0)
]),
"tooltip-after": D(() => [
_(t.$slots, "tooltip-after", ee(te({ ...It.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
t.$slots.source ? (i(), h("div", {
key: 8,
ref_key: "source",
ref: Vt,
dir: "auto"
}, [
_(t.$slots, "source", {}, void 0, !0)
], 512)) : w("", !0),
M(he) ? (i(), ie(po, { key: 9 })) : w("", !0)
], 46, No));
}
}, ds = /* @__PURE__ */ To(vs, [["__scopeId", "data-v-e204a38d"]]), Ds = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: ds
}, Symbol.toStringTag, { value: "Module" }));
export {
_s as a,
Ds as b,
ds as v
};