vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,600 lines • 74.2 kB
JavaScript
import { defineAsyncComponent as pe, ref as d, computed as p, useSlots as Na, onMounted as $l, toRefs as _a, watch as R, nextTick as be, onBeforeUnmount as Tl, shallowRef as je, createElementBlock as Te, openBlock as I, normalizeClass as Ha, normalizeStyle as xe, createCommentVNode as V, createElementVNode as J, createBlock as W, unref as C, createSlots as Il, withCtx as b, renderSlot as S, normalizeProps as Q, guardReactiveProps as ee, createVNode as El, Teleport as Xa, toDisplayString as qe, resolveDynamicComponent as Ua, mergeProps as Va, createTextVNode as Rl } from "vue";
import { c as Wa, t as Ya, i as ja, j as le, a1 as Ce, k as qa, N as Ge, a as se, d as ue, m as Ol, R as Ga, a7 as Za, T as Ja, o as Ka, g as Qa, y as Pl, s as Le, q as et, v as lt, r as at, _ as tt } from "./lib-BwysEpWI.js";
import { c as ot, a as Ze, d as rt, t as st, u as ut, l as k, r as Ie, b as Y, p as Bl } from "./useResponsive-DfdjqQps.js";
import { u as nt, a as Ee } from "./useNestedProp-OFRiX4kU.js";
import { u as it, B as ct } from "./BaseScanner-BMpwQAfz.js";
import { u as vt } from "./usePrinter-BJzHDpYF.js";
import { u as dt, a as ht, l as ft } from "./useTimeLabels-DKoynYae.js";
import { u as yt } from "./useThemeCheck-DGJ31Vi5.js";
import { u as mt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as gt } from "./useChartAccessibility-9icAAmYg.js";
import pt from "./img-DKigoPDs.js";
import bt from "./Legend-D6z73edh.js";
import xt from "./Title-DGnfNZuO.js";
import Ct from "./BaseIcon-4i3dd7Ty.js";
import Lt from "./vue-ui-accordion-DUuwVsuJ.js";
import { S as kt } from "./SlicerPreview-oV3dMuV1.js";
import { _ as At } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Nl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoom: { color: "#4A4A4A", highlightColor: "#9A9A9A", minimap: { selectedColor: "#8A8A8A", lineColor: "#424242", indicatorColor: "#CCCCCC" } }, selector: { color: "#CCCCCC" }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" }, grid: { y: { axisColor: "#5A5A5A", axisLabels: { color: "#CCCCCC" }, verticalLines: { color: "#4A4A4A" } }, x: { axisColor: "#5A5A5A", horizontalLines: { color: "#4A4A4A" }, timeLabels: { color: "#CCCCCC" } }, zeroLine: { color: "#5A5A5A" } }, dataLabels: { color: "#CCCCCC" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, _l = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, selector: { color: "#5D4037" }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, grid: { y: { axisColor: "#5D4037", axisLabels: { color: "#424242" }, verticalLines: { show: !1 } }, x: { axisColor: "#5D4037", horizontalLines: { color: "#9A9A9A" }, timeLabels: { color: "#424242" } }, zeroLine: { color: "#424242" } }, dataLabels: { color: "#424242" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Hl = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, selector: { color: "#BDBDBD" }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, grid: { y: { axisColor: "#5D4037", axisLabels: { color: "#BDBDBD" }, verticalLines: { show: !1 } }, x: { axisColor: "#5D4037", horizontalLines: { color: "#3A3A3A" }, timeLabels: { color: "#BDBDBD" } }, zeroLine: { color: "#5D4037" } }, dataLabels: { color: "#BDBDBD" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Xl = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", zoom: { color: "#5F6A5F", highlightColor: "#66CC66" }, selector: { color: "#66CC66" }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66", borderRadius: 0 }, grid: { y: { axisColor: "#5F6A5F", axisLabels: { color: "#99AA99" }, verticalLines: { show: !1 } }, x: { axisColor: "#5F6A5F", horizontalLines: { color: "#3A3A3A" }, timeLabels: { color: "#99AA99" } }, zeroLine: { color: "#444444" } }, dataLabels: { color: "#99AA99" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Ul = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", zoom: { color: "#E0CFC3", highlightColor: "#8F837A" }, selector: { color: "#8F837A" }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" }, grid: { y: { axisColor: "#8F837A", axisLabels: { color: "#8F837A" }, verticalLines: { show: !1 } }, x: { axisColor: "#8F837A", horizontalLines: { show: !1, alternate: !1 }, timeLabels: { color: "#8F837A" } }, zeroLine: { color: "#444444" } }, dataLabels: { color: "#8F837A" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Vl = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", zoom: { color: "#92B0AB", highlightColor: "#50606C" }, selector: { color: "#7DA9B5" }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" }, grid: { y: { axisColor: "#829C98", axisLabels: { color: "#50606C" }, verticalLines: { show: !1 } }, x: { axisColor: "#829C98", timeLabels: { color: "#50606C" } }, zeroLine: { color: "#444444" } }, dataLabels: { color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Wl = {
default: {},
dark: Nl,
celebration: _l,
celebrationNight: Hl,
hack: Xl,
zen: Ul,
concrete: Vl
}, Zt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: _l,
celebrationNight: Hl,
concrete: Vl,
dark: Nl,
default: Wl,
hack: Xl,
zen: Ul
}, Symbol.toStringTag, { value: "Module" })), wt = ["id"], zt = ["id"], St = ["id"], Ft = ["onClick"], Dt = {
key: 4,
class: "vue-data-ui-watermark"
}, Mt = ["innerHTML"], $t = {
__name: "vue-ui-xy-canvas",
props: {
dataset: {
type: Array,
default() {
return [];
}
},
config: {
type: Object,
default() {
return {};
}
},
selectedXIndex: {
type: Number,
default: void 0
}
},
emits: ["selectLegend", "selectX"],
setup(Je, { expose: Yl, emit: jl }) {
const ql = pe(() => import("./Tooltip-TDyKgLB6.js")), Gl = pe(() => import("./DataTable-WrXCJkfE.js")), Zl = pe(() => import("./UserOptions-CzJWRC4s.js")), Jl = pe(() => import("./NonSvgPenAndPaper-7clRuQVF.js")), Kl = pe(() => import("./BaseDraggableDialog-CAJxIF6g.js")), { vue_ui_xy_canvas: Ql } = nt(), { isThemeValid: ea, warnInvalidTheme: la } = yt(), g = Je, K = d(Wa()), _ = d(null), ae = d(null), c = d(null), m = d(1), j = d(1), ne = d(!1), h = d(null), ke = d(""), Ke = d(null), F = d([]), te = d(1), O = d(!0), H = d(!0), Ae = d(null), Qe = d(0), ie = d(!1), el = d(null), ll = d(null), q = d(null), al = d(null), Re = d(0), Oe = d(0), Pe = d(0), P = d(null), tl = d(!1), ce = d(null), Be = d(null), ve = d(!1), ol = d(!1), we = d(!1), A = d(null), X = p(() => Array.isArray(He.value) && He.value.length > 0), Ne = jl, aa = Na();
$l(() => {
aa["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
});
const l = d(Ue()), ta = p(() => !!l.value.debug), { loading: _e, FINAL_DATASET: He } = it({
..._a(g),
FINAL_CONFIG: l,
prepareConfig: Ue,
skeletonDataset: [
{
name: "",
series: [0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 134],
type: "line",
smooth: !0,
color: "#BABABA"
},
{
name: "",
series: [0, 0.5, 1, 1.5, 2.5, 4, 6.5, 10.5, 17, 27.5, 44.5, 67],
type: "bar",
color: "#AAAAAA"
}
],
skeletonConfig: Ya({
defaultConfig: l.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
grid: {
x: {
axisColor: "#6A6A6A",
timeLabels: { show: !1 },
axisName: "",
horizontalLines: {
color: "#6A6A6A"
}
},
y: {
axisColor: "#6A6A6A",
axisLabels: { show: !1 },
axisName: "",
verticalLines: {
color: "#6A6A6A"
}
},
zeroLine: {
color: "#6A6A6A"
}
},
legend: {
backgroundColor: "#99999930"
},
paddingProportions: {
left: 0.05
}
}
}
}
})
}), { userOptionsVisible: Xe, setUserOptionsVisibility: rl, keepUserOptionState: sl } = mt({ config: l.value }), { svgRef: w } = gt({ config: l.value.style.chart.title });
function oa() {
rl(!0);
}
function ra() {
rl(!1), Ne("selectX", { seriesIndex: null, datapoint: null }), h.value = null;
}
function Ue() {
const e = Ee({
userConfig: g.config,
defaultConfig: Ql
});
let a = {};
const t = e.theme;
if (t)
if (!ea.value(e))
la(e), a = e;
else {
const s = Ee({
userConfig: Wl[t] || g.config,
defaultConfig: e
});
a = {
...Ee({
userConfig: g.config,
defaultConfig: s
}),
customPalette: e.customPalette.length ? e.customPalette : ja[t] || le
};
}
else
a = e;
return g.config && Ce(g.config, "style.chart.scale.min") ? a.style.chart.scale.min = g.config.style.chart.scale.min : a.style.chart.scale.min = null, g.config && Ce(g.config, "style.chart.scale.max") ? a.style.chart.scale.max = g.config.style.chart.scale.max : a.style.chart.scale.max = null, g.config && Ce(g.config, "style.chart.zoom.startIndex") ? a.style.chart.zoom.startIndex = g.config.style.chart.zoom.startIndex : a.style.chart.zoom.startIndex = null, g.config && Ce(g.config, "style.chart.zoom.endIndex") ? a.style.chart.zoom.endIndex = g.config.style.chart.zoom.endIndex : a.style.chart.zoom.endIndex = null, g.config && Ce(g.config, "style.chart.grid.y.timeLabels") && (console.warn("VueUiXyCanvas: you are using the deprecated config.style.chart.grid.y.timeLabels. It is recommended to move this configuration to config.style.chart.grid.x.timeLabels."), a.style.chart.grid.x.timeLabels = Ee({
defaultConfig: a.style.chart.grid.x.timeLabels,
userConfig: g.config.style.chart.grid.y.timeLabels
})), a;
}
R(() => g.config, (e) => {
_e.value || (l.value = Ue()), Xe.value = !l.value.userOptions.showOnChartHover, Ll(), Re.value += 1, Oe.value += 1, Pe.value += 1, v.value.showTable = l.value.table.show, v.value.showDataLabels = l.value.style.chart.dataLabels.show, v.value.stacked = l.value.style.chart.stacked, v.value.showTooltip = l.value.style.chart.tooltip.show;
}, { deep: !0 }), R(() => g.dataset, async (e) => {
!Array.isArray(e) || e.length === 0 || (await be(), w.value && !c.value && (c.value = w.value.getContext("2d", { willReadFrequently: !0 })), O.value = !0, H.value = !0, await he(), Se(), Re.value += 1, Oe.value += 1, Pe.value += 1);
}, { deep: !0 });
const ul = d(l.value.style.chart.aspectRatio), { isPrinting: nl, isImaging: il, generatePdf: cl, generateImage: vl } = vt({
elementId: `xy_canvas_${K.value}`,
fileName: l.value.style.chart.title.text || "vue-ui-xy-canvas",
options: l.value.userOptions.print
}), v = d({
showTable: l.value.table.show,
showDataLabels: l.value.style.chart.dataLabels.show,
stacked: l.value.style.chart.stacked,
showTooltip: l.value.style.chart.tooltip.show
});
function dl(e) {
ie.value = e, Qe.value += 1;
}
const hl = p(() => qa(l.value.customPalette)), E = p(() => T.value ? Math.max(...T.value.filter((e, a) => !F.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0);
function sa(e) {
A.value = e, G();
}
const o = p(() => {
const e = m.value - m.value * (l.value.style.chart.paddingProportions.left + l.value.style.chart.paddingProportions.right);
return {
canvasWidth: m.value,
canvasHeight: j.value,
left: m.value * l.value.style.chart.paddingProportions.left,
top: j.value * l.value.style.chart.paddingProportions.top,
right: m.value - m.value * l.value.style.chart.paddingProportions.right,
bottom: j.value - j.value * l.value.style.chart.paddingProportions.bottom,
width: e,
height: j.value - j.value * (l.value.style.chart.paddingProportions.top + l.value.style.chart.paddingProportions.bottom),
slot: e / (r.value.end - r.value.start)
};
});
function fl(e, a) {
return e / a;
}
function ua({ hasAutoScale: e, series: a, min: t, max: s, scale: u, yOffset: i, individualHeight: n, stackIndex: f = null }) {
return a.map((x, $) => {
const L = u.min < 0 ? Math.abs(u.min) : 0, N = fl(x + L, L + u.max);
let me, ge;
e && (me = u.min, ge = fl(x - me, u.max - me));
let U = 0;
return f === null ? U = o.value.bottom - o.value.height * (e ? ge : N) : U = o.value.bottom - i - n * (e ? ge : N), {
x: o.value.left + o.value.slot * $ + o.value.slot / 2,
y: U,
value: x
};
});
}
const z = p(() => {
const e = l.value.style.chart.scale.min !== null ? l.value.style.chart.scale.min : Math.min(...T.value.filter((n, f) => !F.value.includes(n.absoluteIndex)).flatMap((n) => n.series.slice(r.value.start, r.value.end))), a = l.value.style.chart.scale.max !== null ? l.value.style.chart.scale.max : Math.max(...T.value.filter((n, f) => !F.value.includes(n.absoluteIndex)).flatMap((n) => n.series.slice(r.value.start, r.value.end))), t = Ge(e < 0 ? e : 0, a === e ? e + 1 < 0 ? 0 : e + 1 : a < 0 ? 0 : a, l.value.style.chart.scale.ticks), s = t.min < 0 ? Math.abs(t.min) : 0, u = o.value.bottom - o.value.height * (s / (t.max + s)), i = t.ticks.map((n) => ({
y: o.value.bottom - o.value.height * ((n + s) / (t.max + s)),
x: o.value.left - 8,
value: n
}));
return {
absoluteMin: s,
max: a,
min: e,
scale: t,
yLabels: i,
zero: u
};
}), na = p(() => y.value.map((e) => `
<div style="display:flex;flex-direction:row;gap:6px;align-items:center;">
<svg viewBox="0 0 10 10" height="12" width="12">
<circle cx="5" cy="5" r="5" fill="${e.color}"/>
</svg>
<span>${e.name ? e.name + ": " : ""}</span>
<span>${se(
l.value.style.chart.dataLabels.formatter,
e.series[h.value] ?? "-",
ue({
p: e.prefix || "",
v: e.series[h.value] ?? "-",
s: e.suffix || "",
r: e.rounding || 0
}),
{ datapoint: e, seriesIndex: h.value }
)}</span>
</div>
`)), ze = p(() => l.value.style.chart.line.cutNullValues), T = p(() => He.value.map((e, a) => ({
...e,
series: Ga({
data: Za(e.series, [], ze.value),
threshold: l.value.downsample.threshold
}),
absoluteIndex: a,
color: Ol(e.color || hl.value[a] || le[a] || le[a % le.length])
}))), ia = p(() => {
if (!l.value.style.chart.zoom.minimap.show) return [];
const e = T.value.filter((u) => !F.value.includes(u.absoluteIndex)), a = Math.max(...e.map((u) => u.series.length)), t = [];
for (let u = 0; u < a; u += 1)
t.push(e.map((i) => i.series[u] || 0).reduce((i, n) => (i || 0) + (n || 0), 0));
const s = Math.min(...t);
return t.map((u) => u + (s < 0 ? Math.abs(s) : 0));
}), ca = p(() => l.value.style.chart.zoom.minimap.show ? T.value.map((a) => ({
...a,
isVisible: !F.value.includes(a.absoluteIndex)
})) : []);
R(E, (e) => {
e && he();
});
const y = p(() => Ja(T.value.filter((e, a) => !F.value.includes(e.absoluteIndex))).map((e, a) => ({
...e,
series: e.series.slice(r.value.start, r.value.end)
})).map((e, a) => {
let t = [null, void 0].includes(e.scaleMin) ? Math.min(...e.series) || 0 : e.scaleMin, s = [null, void 0].includes(e.scaleMax) ? Math.max(...e.series) || 1 : e.scaleMax;
t === s && (t = t >= 0 ? s - 1 : t, s = s >= 0 ? s : t + 1), e.series.filter((U) => ![null, void 0].includes(U)).map((U) => (U - t) / (s - t));
const u = {
valueMin: t,
valueMax: s
}, i = e.scaleSteps || l.value.style.chart.scale.ticks;
let n;
e.autoScaling ? n = Ge(u.valueMin, u.valueMax, i) : n = Ge(u.valueMin < 0 ? u.valueMin : 0, u.valueMax <= 0 ? 0 : u.valueMax, i);
const f = v.value.stacked ? o.value.height * (1 - e.cumulatedStackRatio) : 0, x = v.value.stacked ? o.value.height / l.value.style.chart.stackGap : 0, $ = v.value.stacked ? o.value.height * e.stackRatio - x : o.value.height, L = n.min < 0 ? Math.abs(n.min) : 0;
let N;
e.autoScaling && v.value.stacked && s <= 0 ? N = o.value.bottom - f - $ : N = o.value.bottom - f - $ * (L / (n.max + L));
const me = n.ticks.map((U, Ba) => ({
y: o.value.bottom - f - $ * (Ba / (n.ticks.length - 1)),
x: o.value.left - 8,
value: U
})), ge = ua({
hasAutoScale: v.value.stacked && e.autoScaling,
series: e.series,
min: v.value.stacked ? t : z.value.min,
max: v.value.stacked ? s : z.value.max,
scale: v.value.stacked ? n : z.value.scale,
yOffset: f,
individualHeight: $,
stackIndex: v.value.stacked ? a : null
});
return {
...e,
coordinatesLine: ge,
min: t,
max: s,
localScale: n,
localZero: N,
localMin: L,
localYLabels: me,
yOffset: f,
individualHeight: $
};
})), r = d({
start: 0,
end: E.value
}), D = d({ start: 0, end: E.value }), de = d(null);
function va() {
return new Promise((e) => requestAnimationFrame(
() => requestAnimationFrame(() => e())
));
}
Tl(() => {
de.value && cancelAnimationFrame(de.value);
});
async function he() {
ml(), await be(), de.value && cancelAnimationFrame(de.value), de.value = requestAnimationFrame(async () => {
await va(), ml();
});
}
const da = p(() => l.value.style.chart.zoom.preview.enable && (D.value.start !== r.value.start || D.value.end !== r.value.end));
function yl(e, a) {
D.value[e] = a;
}
async function ml() {
if (!ve.value) {
ve.value = !0;
try {
const { startIndex: e, endIndex: a } = l.value.style.chart.zoom, t = Math.max(...T.value.map((i) => i.series.length)), s = e ?? 0, u = a != null ? Math.min(gl(a + 1), t) : t;
we.value = !0, r.value.start = s, r.value.end = u, D.value.start = s, D.value.end = u, Ve(), ol.value = !0, await be(), q.value && (q.value.setStartValue(r.value.start), q.value.setEndValue(r.value.end));
} finally {
queueMicrotask(() => {
we.value = !1;
}), ve.value = !1;
}
}
}
function ha(e) {
ve.value || we.value || e !== r.value.start && (r.value.start = e, D.value.start = e, Ve());
}
function fa(e) {
if (ve.value || we.value) return;
const a = gl(e);
a !== r.value.end && (r.value.end = a, D.value.end = a, Ve());
}
function gl(e) {
const a = E.value;
return e > a ? a : e < 0 || e < r.value.start ? l.value.style.chart.zoom.startIndex !== null ? l.value.style.chart.zoom.startIndex + 1 : 1 : e;
}
function Ve() {
const e = Math.max(
1,
Math.max(...T.value.map((s) => s.series.length))
);
let a = Math.max(0, Math.min(r.value.start ?? 0, e - 1)), t = Math.max(a + 1, Math.min(r.value.end ?? e, e));
(!Number.isFinite(a) || !Number.isFinite(t) || t <= a) && (a = 0, t = e), r.value = { start: a, end: t }, D.value.start = a, D.value.end = t, q.value && (q.value.setStartValue(a), q.value.setEndValue(t));
}
const ya = p(() => y.value.filter((e) => ["line", "plot", void 0].includes(e.type))), M = p(() => y.value.filter((e) => e.type === "bar"));
function Se() {
if (!w.value || !ae.value) return;
const e = ae.value.offsetWidth, a = ae.value.offsetHeight;
w.value.width = e * te.value * 2, w.value.height = a * te.value * 2, m.value = e * te.value * 2, j.value = a * te.value * 2, c.value?.scale(te.value, te.value), G();
}
R(X, async (e) => {
if (!e) {
Ae.value = null, ne.value = !1, h.value = null, P.value = null;
return;
}
await be(), w.value && !c.value && (c.value = w.value.getContext("2d", { willReadFrequently: !0 })), O.value = !0, H.value = !0, await he(), Se(), G();
});
function ma() {
if (c.value && (c.value.clearRect(0, 0, 1e4, 1e4), c.value.fillStyle = l.value.style.chart.backgroundColor, c.value.fillRect(0, 0, o.value.canvasWidth, o.value.canvasHeight), !!X.value)) {
if (v.value.stacked)
l.value.style.chart.grid.y.verticalLines.show && r.value.end - r.value.start < l.value.style.chart.grid.y.verticalLines.hideUnderXLength ? y.value.forEach((e) => {
for (let a = 0; a < r.value.end - r.value.start + 1; a += 1)
k(
c.value,
[
{
x: o.value.left + o.value.slot * a,
y: o.value.bottom - e.yOffset - e.individualHeight
},
{
x: o.value.left + o.value.slot * a,
y: o.value.bottom - e.yOffset
}
],
{
color: l.value.style.chart.grid.y.verticalLines.color
}
);
}) : l.value.style.chart.grid.y.verticalLines.show && r.value.end - r.value.start >= l.value.style.chart.grid.y.verticalLines.hideUnderXLength && y.value.forEach((e) => {
for (let a = r.value.start; a < r.value.end; a += 1)
a % Math.floor((r.value.end - r.value.start) / l.value.style.chart.grid.x.timeLabels.modulo) === 0 && k(
c.value,
[
{
x: o.value.left + o.value.slot * (a - r.value.start) + o.value.slot / 2,
y: o.value.bottom - e.yOffset - e.individualHeight
},
{
x: o.value.left + o.value.slot * (a - r.value.start) + o.value.slot / 2,
y: o.value.bottom - e.yOffset
}
],
{
color: l.value.style.chart.grid.y.verticalLines.color
}
);
}), l.value.style.chart.grid.x.horizontalLines.show && (l.value.style.chart.grid.x.horizontalLines.alternate ? y.value.forEach((e) => {
e.localYLabels.forEach((a, t) => {
t < e.localYLabels.length - 1 && Ie(
c.value,
[
{ x: o.value.left, y: a.y },
{ x: o.value.right, y: a.y },
{ x: o.value.right, y: e.localYLabels[t + 1].y },
{ x: o.value.left, y: e.localYLabels[t + 1].y }
],
{
fillColor: t % 2 === 0 ? "transparent" : Le(l.value.style.chart.grid.x.horizontalLines.color, l.value.style.chart.grid.x.horizontalLines.opacity),
strokeColor: "transparent"
}
);
});
}) : y.value.forEach((e) => {
e.localYLabels.slice(r.value.start, r.value.end).forEach((a) => {
k(
c.value,
[
{ x: o.value.left, y: a.y },
{ x: o.value.right, y: a.y }
],
{
color: l.value.style.chart.grid.x.horizontalLines.color
}
);
});
})), l.value.style.chart.grid.zeroLine.show && y.value.forEach((e) => {
k(
c.value,
[
{ x: o.value.left, y: e.localZero },
{ x: o.value.right, y: e.localZero }
],
{
color: l.value.style.chart.grid.zeroLine.color,
lineDash: l.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
}
);
}), l.value.style.chart.grid.y.axisLabels.show && y.value.forEach((e) => {
k(
c.value,
[
{ x: o.value.left, y: o.value.bottom - e.yOffset },
{ x: o.value.left, y: o.value.bottom - e.yOffset - e.individualHeight }
],
{
color: e.color
}
), k(
c.value,
[
{ x: o.value.right, y: o.value.bottom - e.yOffset },
{ x: o.value.right, y: o.value.bottom - e.yOffset - e.individualHeight }
],
{
color: e.color
}
);
}), y.value.forEach((e) => {
Y(
c.value,
e.name,
m.value / 35,
o.value.bottom - e.yOffset - e.individualHeight / 2,
{
align: "center",
rotation: -90,
color: e.color,
font: `${Math.round(m.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`
}
);
});
else {
if (l.value.style.chart.grid.y.verticalLines.show && r.value.end - r.value.start < l.value.style.chart.grid.y.verticalLines.hideUnderXLength)
for (let e = 0; e < r.value.end - r.value.start + 1; e += 1)
k(
c.value,
[
{ x: o.value.left + o.value.slot * e, y: o.value.top },
{ x: o.value.left + o.value.slot * e, y: o.value.bottom }
],
{
color: l.value.style.chart.grid.y.verticalLines.color
}
);
else if (l.value.style.chart.grid.y.verticalLines.show && r.value.end - r.value.start >= l.value.style.chart.grid.y.verticalLines.hideUnderXLength)
for (let e = r.value.start; e < r.value.end; e += 1)
e % Math.floor((r.value.end - r.value.start) / l.value.style.chart.grid.x.timeLabels.modulo) === 0 && k(
c.value,
[
{ x: o.value.left + o.value.slot * (e - r.value.start) + o.value.slot / 2, y: o.value.top },
{ x: o.value.left + o.value.slot * (e - r.value.start) + o.value.slot / 2, y: o.value.bottom }
],
{
color: l.value.style.chart.grid.y.verticalLines.color
}
);
l.value.style.chart.grid.x.horizontalLines.show && (l.value.style.chart.grid.x.horizontalLines.alternate ? z.value.yLabels.forEach((e, a) => {
a < z.value.yLabels.length - 1 && Ie(
c.value,
[
{ x: o.value.left, y: e.y },
{ x: o.value.right, y: e.y },
{ x: o.value.right, y: z.value.yLabels[a + 1].y },
{ x: o.value.left, y: z.value.yLabels[a + 1].y }
],
{
fillColor: a % 2 === 0 ? "transparent" : Le(l.value.style.chart.grid.x.horizontalLines.color, l.value.style.chart.grid.x.horizontalLines.opacity),
strokeColor: "transparent"
}
);
}) : z.value.yLabels.forEach((e) => {
k(
c.value,
[
{ x: o.value.left, y: e.y },
{ x: o.value.right, y: e.y }
],
{
color: l.value.style.chart.grid.x.horizontalLines.color
}
);
})), l.value.style.chart.grid.y.showAxis && k(
c.value,
[
{ x: o.value.left, y: o.value.top },
{ x: o.value.left, y: o.value.bottom }
],
{
color: l.value.style.chart.grid.y.axisColor,
lineWidth: l.value.style.chart.grid.y.axisThickness
}
), l.value.style.chart.grid.x.showAxis && k(
c.value,
[
{ x: o.value.left, y: o.value.bottom },
{ x: o.value.right, y: o.value.bottom }
],
{
color: l.value.style.chart.grid.x.axisColor,
lineWidth: l.value.style.chart.grid.x.axisThickness
}
), l.value.style.chart.grid.zeroLine.show && k(
c.value,
[
{ x: o.value.left, y: z.value.zero },
{ x: o.value.right, y: z.value.zero }
],
{
color: l.value.style.chart.grid.zeroLine.color,
lineDash: l.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
}
);
}
l.value.style.chart.grid.y.axisName && Y(
c.value,
l.value.style.chart.grid.y.axisName,
m.value - m.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio * 1.2,
o.value.bottom - o.value.height / 2,
{
font: `${l.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(m.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
color: l.value.style.chart.color,
align: "center",
rotation: 90
}
), l.value.style.chart.grid.x.axisName && Y(
c.value,
l.value.style.chart.grid.x.axisName,
m.value / 2,
j.value,
{
font: `${l.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(m.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
color: l.value.style.chart.color,
align: "center"
}
);
}
}
function ga(e) {
for (let a = 0; a < e.coordinatesLine.length; a += 1) {
const t = (h.value === a || A.value === a ? m.value / 150 : l.value.style.chart.line.plots.show || e.type === "plot" ? m.value / 200 : 0) * l.value.style.chart.line.plots.radiusRatio;
Ze(
c.value,
{ x: e.coordinatesLine[a].x, y: e.coordinatesLine[a].y },
t,
{
color: l.value.style.chart.backgroundColor,
fillStyle: e.color
}
);
}
}
function pa() {
y.value.forEach((e) => {
e.showYMarker && fe(e) && Y(
c.value,
se(
l.value.style.chart.dataLabels.formatter,
fe(e).value,
ue({
p: e.prefix || l.value.style.chart.grid.y.axisLabels.prefix || "",
v: fe(e).value,
s: e.suffix || l.value.style.chart.grid.y.axisLabels.suffix || "",
r: e.rounding || l.value.style.chart.grid.y.axisLabels.rounding || 0
}),
{ datapoint: fe(e), seriesIndex: null }
),
o.value.left - 8 + l.value.style.chart.grid.y.axisLabels.offsetX,
fe(e).y,
{
align: "right",
font: `${l.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(m.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
color: e.color
}
);
});
}
function ba() {
l.value.style.chart.grid.y.axisLabels.show && (v.value.stacked ? y.value.forEach((e) => {
e.localYLabels.forEach((a, t) => {
Y(
c.value,
se(
l.value.style.chart.dataLabels.formatter,
a.value,
ue({
p: e.prefix || l.value.style.chart.grid.y.axisLabels.prefix || "",
v: a.value,
s: e.suffix || l.value.style.chart.grid.y.axisLabels.suffix || "",
r: e.rounding || l.value.style.chart.grid.y.axisLabels.rounding || 0
}),
{ datapoint: a, seriesIndex: t }
),
a.x + l.value.style.chart.grid.y.axisLabels.offsetX,
a.y,
{
align: "right",
font: `${l.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(m.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
color: e.color,
globalAlpha: e.showYMarker && ![null, void 0].includes(h.value ?? A.value) ? 0.2 : 1
}
);
});
}) : z.value.yLabels.forEach((e, a) => {
Y(
c.value,
se(
l.value.style.chart.dataLabels.formatter,
e.value,
ue({
p: l.value.style.chart.grid.y.axisLabels.prefix || "",
v: e.value,
s: l.value.style.chart.grid.y.axisLabels.suffix || "",
r: l.value.style.chart.grid.y.axisLabels.rounding || 0
}),
{ datapoint: e, seriesIndex: a }
),
e.x + l.value.style.chart.grid.y.axisLabels.offsetX,
e.y,
{
align: "right",
font: `${l.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(m.value / 40 * l.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
color: l.value.style.chart.grid.y.axisLabels.color,
globalAlpha: y.value.some((t) => t.showYMarker) && ![null, void 0].includes(h.value ?? A.value) ? 0.2 : 1
}
);
}));
}
function xa(e) {
for (let a = 0; a < e.coordinatesLine.length; a += 1)
Y(
c.value,
se(
l.value.style.chart.dataLabels.formatter,
e.coordinatesLine[a].value,
ue({
p: e.prefix || "",
v: e.coordinatesLine[a].value,
s: e.suffix || "",
r: e.rounding || 0
}),
{ datapoint: e.coordinatesLine[a], seriesIndex: a }
),
e.coordinatesLine[a].x,
e.coordinatesLine[a].y + l.value.style.chart.dataLabels.offsetY,
{
align: "center",
font: `${l.value.style.chart.dataLabels.bold ? "bold " : ""}${Math.round(m.value / 40 * l.value.style.chart.dataLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
color: l.value.style.chart.dataLabels.useSerieColor ? e.color : l.value.style.chart.dataLabels.color,
strokeColor: l.value.style.chart.backgroundColor,
lineWidth: 0.5
}
);
}
const B = p(() => dt({
values: l.value.style.chart.grid.x.timeLabels.values,
maxDatapoints: E.value,
formatter: l.value.style.chart.grid.x.timeLabels.datetimeFormatter,
start: 0,
end: E.value
})), pl = p(() => {
const e = l.value.style.chart.grid.x.timeLabels.datetimeFormatter, a = ht({
useUTC: e.useUTC,
locale: ft[e.locale] || { months: [], shortMonths: [], days: [], shortDays: [] },
januaryAsYear: e.januaryAsYear
});
return (t, s) => {
const i = l.value.style.chart.grid.x.timeLabels.values?.[t];
return i == null ? "" : a.formatDate(new Date(i), s);
};
}), bl = p(() => (l.value.style.chart.grid.x.timeLabels.values || []).map((a, t) => ({
text: pl.value(t, l.value.style.chart.zoom.timeFormat),
absoluteIndex: t
}))), Ca = p(() => (l.value.style.chart.grid.x.timeLabels.values || []).map((a, t) => ({
text: pl.value(t, l.value.style.chart.tooltip.timeFormat),
absoluteIndex: t
})));
function La() {
for (let e = r.value.start; e < r.value.end; e += 1)
(r.value.end - r.value.start < l.value.style.chart.grid.x.timeLabels.modulo || r.value.end - r.value.start >= l.value.style.chart.grid.x.timeLabels.modulo && (e % Math.floor((r.value.end - r.value.start) / l.value.style.chart.grid.x.timeLabels.modulo) === 0 || (e === h.value + r.value.start || e === A.value) && l.value.style.chart.grid.x.timeLabels.showMarker)) && Y(
c.value,
B.value[e] ? B.value[e].text : e + 1,
o.value.left + o.value.slot * (e - r.value.start) + o.value.slot / 2,
o.value.bottom + m.value / l.value.style.chart.grid.x.timeLabels.offsetY,
{
align: l.value.style.chart.grid.x.timeLabels.rotation === 0 ? "center" : l.value.style.chart.grid.x.timeLabels.rotation > 0 ? "left" : "right",
font: `${l.value.style.chart.grid.x.timeLabels.bold ? "bold " : ""}${Math.round(m.value / 40 * l.value.style.chart.grid.x.timeLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
color: l.value.style.chart.grid.x.timeLabels.showMarker ? Le(l.value.style.chart.grid.x.timeLabels.color, h.value !== null || A.value !== null ? h.value + r.value.start === e || A.value === e ? 100 : 20 : 100) : l.value.style.chart.grid.x.timeLabels.color,
rotation: l.value.style.chart.grid.x.timeLabels.rotation
}
);
}
function xl() {
k(
c.value,
[
{ x: o.value.left + o.value.slot * (h.value ?? A.value) + o.value.slot / 2, y: o.value.top },
{ x: o.value.left + o.value.slot * (h.value ?? A.value) + o.value.slot / 2, y: o.value.bottom }
],
{
color: l.value.style.chart.selector.color,
lineDash: l.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
lineWidth: 2
}
);
}
function ka() {
P.value && k(
c.value,
[
{ x: o.value.left, y: P.value },
{ x: o.value.right, y: P.value }
],
{
color: l.value.style.chart.selector.color,
lineDash: l.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
lineWidth: 2
}
);
}
function Aa() {
M.value.forEach((e, a) => {
for (let t = 0; t < e.coordinatesLine.length; t += 1)
Ie(
c.value,
[
{
x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / M.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * M.value.length) * a)),
y: v.value.stacked ? e.localZero : z.value.zero
},
{
x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / M.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * M.value.length) * a)) + o.value.slot * 0.8 / (v.value.stacked ? 1 : M.value.length),
y: v.value.stacked ? e.localZero : z.value.zero
},
{
x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / M.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * M.value.length) * a)) + o.value.slot * 0.8 / (v.value.stacked ? 1 : M.value.length),
y: e.coordinatesLine[t].y
},
{
x: o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / M.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * M.value.length) * a)),
y: e.coordinatesLine[t].y
}
],
{
strokeColor: l.value.style.chart.backgroundColor,
gradient: {
type: "linear",
start: {
x: e.coordinatesLine[t].x,
y: e.coordinatesLine[t].y
},
end: {
x: e.coordinatesLine[t].x,
y: v.value.stacked ? e.localZero : z.value.zero
},
stops: [
{ offset: 0, color: e.color },
{ offset: 1, color: l.value.style.chart.bar.gradient.show ? et(e.color, 0.5) : e.color }
]
}
}
), v.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Y(
c.value,
se(
l.value.style.chart.dataLabels.formatter,
e.coordinatesLine[t].value,
ue({
p: e.prefix || "",
v: e.coordinatesLine[t].value,
s: e.suffix || "",
r: e.rounding || 0
}),
{ datapoint: e.coordinatesLine[t], seriesIndex: t }
),
o.value.left + o.value.slot * t + o.value.slot / 10 + (v.value.stacked ? 0 : o.value.slot / M.value.length * a - (a === 0 ? 0 : o.value.slot / (5 * M.value.length) * a)) + o.value.slot * 0.4 / (v.value.stacked ? 1 : M.value.length),
(e.coordinatesLine[t].value < 0 ? v.value.stacked ? e.localZero : z.value.zero : e.coordinatesLine[t].y) + l.value.style.chart.dataLabels.offsetY,
{
align: "center",
font: `${Math.round(m.value / 40 * l.value.style.chart.dataLabels.fontSizeRatio)}px ${l.value.style.fontFamily}`,
color: l.value.style.chart.dataLabels.useSerieColor ? e.color : l.value.style.chart.dataLabels.color,
strokeColor: l.value.style.chart.backgroundColor,
lineWidth: 0.8
}
);
});
}
function wa(e, a) {
const t = e.coordinatesLine.map((n, f) => {
const x = e.series[f];
return x != null && Number.isFinite(n?.y) ? n : null;
}), s = [], u = [];
let i = [];
for (let n = 0; n < t.length; n += 1) {
const f = t[n];
if (f)
i.push(f);
else {
if (i.length >= 2) {
const x = i[0], $ = i[i.length - 1];
s.push([
{ x: x.x, y: a },
...i,
{ x: $.x, y: a }
]);
} else i.length === 1 && u.push(i[0]);
i = [];
}
}
if (i.length >= 2) {
const n = i[0], f = i[i.length - 1];
s.push([
{ x: n.x, y: a },
...i,
{ x: f.x, y: a }
]);
} else i.length === 1 && u.push(i[0]);
return { polygons: s, singles: u };
}
function za(e) {
const a = e.coordinatesLine.map((u, i) => {
const n = e.series[i];
return n != null && Number.isFinite(u?.y) ? u : null;
}), t = [];
let s = [];
for (let u = 0; u < a.length; u += 1) {
const i = a[u];
i ? s.push(i) : (s.length >= 2 && t.push(s), s = []);
}
return s.length >= 2 && t.push(s), t;
}
function Cl(e) {
if (ze.value) {
const a = za(e);
for (const t of a)
k(c.value, t, {
color: e.color,
lineWidth: 3
});
} else
k(c.value, e.coordinatesLine, {
color: e.color,
lineWidth: 3
});
}
function Sa(e) {
const a = !!ze.value;
if (e.useArea) {
const t = v.value.stacked ? e.localZero : z.value.zero;
if (a) {
const { polygons: s, singles: u } = wa(e, t);
for (const n of s)
Bl(c.value, n, {
fillColor: Le(e.color, l.value.style.chart.area.opacity),
strokeColor: "transparent"
});
const i = m.value / 200 * l.value.style.chart.line.plots.radiusRatio;
for (const n of u)
Ze(
c.value,
{ x: n.x, y: n.y },
i,
{
color: l.value.style.chart.backgroundColor,
fillStyle: e.color
}
);
} else {
const s = { x: e.coordinatesLine[0].x, y: t }, u = { x: e.coordinatesLine.at(-1).x, y: t };
Bl(
c.value,
[s, ...e.coordinatesLine, u],
{
fillColor: Le(e.color, l.value.style.chart.area.opacity),
strokeColor: "transparent"
}
);
}
Cl(e);
return;
}
Cl(e);
}
function Fa() {
y.value.forEach((e, a) => {
k(
c.value,
[
{ x: o.value.left, y: o.value.bottom - e.yOffset },
{ x: o.value.right, y: o.value.bottom - e.yOffset }
],
{
color: l.value.style.chart.grid.x.horizontalLines.color,
lineWidth: 1
}
);
});
}
function Da() {
const { left: e, top: a, width: t, height: s } = o.value, u = r.value.start, n = r.value.end - u, f = t / n, x = D.value.start - u, $ = D.value.end - u, L = Math.max(0, Math.min(n, x)), N = Math.max(0, Math.min(n, $));
Ie(
c.value,
[
{ x: e + L * f, y: a },
{ x: e + L * f + (N - L) * f, y: a },
{ x: e + L * f + (N - L) * f, y: a + s },
{ x: e + L * f, y: a + s }
],
{
fillColor: l.value.style.chart.zoom.preview.fill,
strokeColor: l.value.style.chart.zoom.preview.stroke,
lineDash: Array(4).fill(l.value.style.chart.zoom.preview.strokeDasharray),
lineWidth: l.value.style.chart.zoom.preview.strokeWidth
}
);
}
function G() {
!X.value || !w.value || !c.value || (ma(), O.value ? ((h.value !== null || A.value !== null) && l.value.style.chart.selector.show && xl(), Aa(), v.value.stacked && l.value.style.chart.grid.x.showAxis && Fa(), ya.value.forEach((e) => {
(e.type === "line" || !e.type) && Sa(e), H.value && (ga(e), v.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && xa(e));
}), w.value && (Ae.value = ot(w.value))) : (Ae.value && (c.value.clearRect(0, 0, 1e4, 1e4), c.value.drawImage(Ae.value, 0, 0)), (h.value !== null || A.value !== null) && l.value.style.chart.selector.show && xl(), (h.value !== null || A.value !== null) && y.value.forEach((e) => {
const a = h.value ?? A.value, t = e.coordinatesLine[a];
(e.type === "line" || !e.type || e.type === "plot") && t && Number.isFinite(t.x) && Number.isFinite(t.y) && Ze(
c.value,
{ x: t.x, y: t.y },
m.value / 150 * l.value.style.chart.line.plots.radiusRatio,
{
color: l.value.style.chart.backgroundColor,
fillStyle: e.color
}
);
})), l.value.style.chart.grid.x.timeLabels.show && La(), l.value.style.chart.selector.show && l.value.style.chart.selector.showHorizontalSelector && ka(), ba(), pa(), l.value.style.chart.zoom.preview.enable && (r.value.start !== D.value.start || r.value.end !== D.value.end) && Da(), O.value = !1);
}
const Fe = rt(() => {
H.value = !0, Se();
}, E.value > 200 ? 10 : 1, !H.value);
function fe(e) {
if ([null, void 0].includes(h.value ?? A.value) || !e.coordinatesLine[h.value ?? A.value]) return !1;
const { y: a, value: t } = e.coordinatesLine[h.value ?? A.value];
return { y: a, value: t };
}
function Ma(e) {
if (!X.value || !w.value) return;
const { left: a, top: t } = w.value.getBoundingClientRect(), s = e.clientX - a;
if (P.value = (e.clientY - t) * 2, (P.value < o.value.top || P.value > o.value.bottom) && (P.value = null), s * 2 < o.value.left || s * 2 > o.value.right) {
ne.value = !1, h.value = null;
return;
}
const u = s * 2 - o.value.left;
if (h.value = Math.floor(u / o.value.slot), ne.value = !0, !H.value) return;
let i = "";
const n = l.value.style.chart.tooltip.customFormat, f = y.value.map((x) => ({
shape: x.shape || null,
name: x.name,
color: x.color,
type: x.type || "line",
value: x.series.find(($, L) => L === h.value)
}));
$a({ seriesIndex: h.value, datapoint: f }), Pl(n) && tt(() => n({
seriesIndex: h.value,
datapoint: f,
series: y.value,
config: l.value
})) ? ke.value = n({
seriesIndex: h.value,
datapoint: f,
series: y.value,
config: l.value
}) : (l.value.style.chart.grid.x.timeLabels.values.slice(r.value.start, r.value.end)[h.value] ? i += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${l.value.style.chart.tooltip.borderColor}; width:100%">${l.value.style.chart.tooltip.useDefaultTimeFormat ? B.value.slice(r.value.start, r.value.end)[h.value]?.text : Ca.value[h.value]?.text}</div>` : i += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${l.value.style.chart.tooltip.borderColor}; width:100%">${B.value[h.value + r.value.start]?.text ?? ""}</div>`, i += na.value.join(""), ke.value = i), H.value = !1;
}
function $a({ seriesIndex: e, datapoint: a }) {
const t = r.value.start + e;
Ne("selectX", {
dataset: a,
index: t,
indexLabel: ""
});
}
R(() => g.selectedXIndex, (e) => {
if ([null, void 0].includes(g.selectedXIndex)) {
h.value = null;
return;
}
const a = e - r.value.start;
a < 0 || e >= r.value.end ? h.value = null : h.value = a ?? null;
}, { immediate: !0 }), R(() => h.value, (e) => {
Fe();
}), R(() => r.value, (e) => {
O.value = !0, G();
}, {
deep: !0
}), R(() => D.value, (e) => {
G();
}, { deep: !0 }), R(() => v.value.showDataLabels, (e) => {
O.value = !0, G();
}), R(() => P.value, (e) => {
e && G();
}), R(() => v.value.stacked, (e) => {
O.value = !0, H.value = !0, Fe();
});
function Ta() {
ne.value = !1, h.value = null, ke.value = "", P.value = null, G();
}
const Z = je(null), oe = je(null), re = je(null);
$l(() => {
tl.value = !0, Ll();
});
function Ll() {
if (Ka(g.dataset) && ta.value && Qa({ componentName: "VueUiXyCanvas", type: "dataset" }), be(() => {
w.value && !c.value && (c.value = w.value.getContext("2d", { willReadFrequently: !0 })), c.value && X.value && (O.value = !0, H.value = !0, Se());
}), l.value.responsive) {
const e = st(() => {
const { width: a, height: t } = ut({
chart: _.value,
title: l.value.style.chart.title.text ? el.value : null,
legend: l.value.style.chart.legend.show ? ll.value : null,
slicer: l.value.style.chart.zoom.show && E.value > 6 ? q.value?.$el : null,
source: al.value
});
requestAnimationFrame(() => {
ul.value = `${a} / ${t}`;
});
});
Z.value && (oe.value && Z.value.unobserve(oe.value), Z.value.disconnect()), Z.value = new ResizeObserver(e), oe.value = _.value.parentNode, Z.value.observe(oe.value);
}
re.value && re.value.disconnect(), re.value = new ResizeObserver((e) => {
for (const a of e)
a.contentBoxSize && ae.value && (O.value = !0, Fe());
}), re.value.observe(ae.value), he();
}
Tl(() => {
re.value && re.value.disconnect(), Z.value && (oe.value && Z.value.unobserve(oe.value), Z.value.disconnect());
});
function De(e) {
Ne("selectLegend", y.value.find((a) => a.absoluteIndex === e)), F.value.includes(e) ? F.value = F.value.filter((a) => a !== e) : F.value.push(e), O.value = !0, Fe();
}
function kl(e) {
if (!T.value.length)
return l.value.debug && console.warn("VueUiXyCanvas - There are no series to show."), null;
const a = T.value.find((t) => t.name === e);
return a || (l.value.debug && console.warn(`VueUiXyCanvas - Series name not found "${e}"`), null);
}
function Ia(e) {
const a = kl(e);
a !== null && F.value.includes(a.absoluteIndex) && De(a.absoluteIndex);
}
function Ea(e) {
const a = kl(e);
a !== null && (F.value.includes(a.absoluteIndex) || De(a.absoluteIndex));
}
const Al = p(() => T.value.map((e, a) => ({
...e,
name: e.name,
color: Ol(e.color) || hl.value[a] || le[a] || le[a % le.length],
shape: e.shape || "circle",
prefix: e.prefix || "",
suffix: e.suffix || "",
rounding: e.rounding || 0
})).map((e) => ({
...e,
opacity: F.value.includes(e.absoluteIndex) ? 0.5 : 1,
segregate: () => De(e.absoluteIndex),
isSegregated: F.value.includes(e.absoluteIndex)
}))), Ra = p(() => ({
cy: "donut-div-legend",
backgroundColor: l.value.style.chart.legend.backgroundColor,
color: l.value.style.chart.legend.color,
fontSize: l.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: l.value.style.chart.legend.bold ? "bold" : ""
})), Me = p(() => {
const e = [""].concat(y.value.map((u) => u.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>');
let a = [];
for (let u = 0; u < E.value; u += 1) {
const i = y.value.map((n) => n.series[u] ?? 0).reduce((n, f) => n + f, 0);
a.push([l.value.style.chart.grid.x.timeLabels.values.slice(r.value.start, r.value.end)[u] ? B.value.slice(r.value.start, r.value.end)[u].text : u + 1].concat(y.value.map((n) => (n.series[u] ?? 0).toFixed(l.value.table.rounding))).concat((i ?? 0).toFixed(l.value.table.rounding)));
}
const t = {
th: {
backgroundColor: l.value.table.th.backgroundColor,
color: l.value.table.th.color,
outline: l.value.table.th.outline
},
td: {
backgroundColor: l.value.table.td.backgroundColor,
color: l.value.table.td.color,
outline: l.value.table.td.outline
},
breakpoint: l.value.table.responsiveBreakpoint
}, s = [l.value.table.columnNames.period].concat(y.value.map((u) => u.name)).concat(l.value.table.columnNames.total);
return { head: e, body: a.slice(0, r.value.end - r.value.start), config: t, colNames: s };
}), wl = p(() => {
if (y.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
const e = y.value.map((t) => ({
label: t.name,
color: t.color,
type: t.type
})), a = [];
for (let t = r.value.start; t < r.value.end; t += 1) {
const s = [l.value.style.chart.grid.x.timeLabels.values[t] ? B.value[t].text : t + 1];
y.value.forEach((u) => {
s.push(Number((u.series[t] || 0).toFixed(l.value.table.rounding)));
}), a.push(s);
}
return { head: e, body: a };
});
function We(e = null) {
const a = [[l.value.style.chart.title.text], [l.value.style.chart.title.subtitle.text], [""]], t = ["", ...wl.value.head.map((n) => n.label)], s = wl.value.body, u = a.concat([t]).concat(s), i = lt(u);
e ? e(i) : at({ csvContent: i, title: l.value.style.chart.title.text || "vue-ui-xy-canvas" });
}
function Oa() {
return y.value;
}
function zl() {
v.value.showTable = !v.value.showTable;
}
function Sl() {
v.value.showDataLabels = !v.value.showDataLabels;
}
function Fl() {
v.value.stacked = !v.value.stacked;
}
function Dl() {
v.value.showTooltip = !v.value.showTooltip;
}
const $e = d(!1);
function Ye() {
$e.value = !$e.value;
}
async function Pa({ scale: e = 2 } = {}) {
if (!_.value) return;
const { width: a, height: t } = _.value.getBoundingClientRect(), s = a / t, { imageUri: u, base64: i } = await pt({ domElement: _.value, base64: !0, img: !0, scale: e });
return {
imageUri: u,
base64: i,
title: l.value.style.chart.title.text,
width: a,
height: t,
aspectRatio: s
};
}
const ye = p(() => {
const e = l.value.table.useDialog && !l.value.table.show, a = v.value.showTable;
return {
component: e ? Kl : Lt,
title: `${l.value.style.chart.title.text}${l.value.style.chart.title.subtitle.text ? `: ${l.value.style.chart.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: l.value.table.th.backgroundColor,
color: l.value.table.th.color,
headerColor: l.value.table.th.color,
headerBg: l.value.table.th.backgroundColor,
isFullscreen: ie.value,
fullscreenParent: _.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: a,
maxHeight: 1e4,
body: {
backgroundColor: l.value.style.chart.backgroundColor,
color: l.value.style.chart.color
},
head: {
backgroundColor: l.value.style.chart.backgroundColor,
color: l.value.style.chart.color
}
}
}
};
});
R(() => v.value.showTable, (e) => {
l.value.table.show || (e && l.value.table.useDialog && ce.value ? ce.value.open() : "close" in ce.value && ce.value.close());
});
function Ml() {
v.value.showTable = !1, Be.value && Be.value.setTableIconState(!1);
}
return Yl({
getData: Oa,
getImage: Pa,
generateCsv: We,
generatePdf: cl,
generateImage: vl,
hideSeries: Ea,
showSeries: Ia,
toggleTable: zl,
toggleLabels: Sl,
toggleStack: Fl,
toggleTooltip: Dl,
toggleAnnotator: Ye,
toggleFullscreen: dl
}), (e, a) => (I(), Te("div", {
style: xe(`width:100%; position:relative; ${l.value.responsive ? "height: 100%" : ""}; background:${l.value.style.chart.backgroundColor};`),
ref_key: "xy",
ref: _,
id: `xy_canvas_${K.value}`,
class: Ha(`vue-data-ui-component vue-ui-xy-canvas ${ie.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
onMouseenter: oa,
onMouseleave: ra
}, [
l.value.style.chart.title.text ? (I(), Te("div", {
key: 0,
ref_key: "chartTitle",
ref: el,
style: xe(`width:100%;background:${l.value.style.chart.backgroundColor};`)
}, [
(I(), W(xt, {
key: `title_${Re.value}`,
config: {
title: {
cy: "xy-canvas-title",
...l.value.style.chart.title
},
subtitle: {
cy: "xy-canvas-subtitle",
...l.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 4)) : V("", !0),
J("div", {
id: `legend-top-${K.value}`
}, null, 8, zt),
l.value.userOptions.show && X.value && (C(sl) || C(Xe)) ? (I(), W(C(Zl), {
ref_key: "userOptionsRef",
ref: Be,
key: `user_option_${Qe.value}`,
backgroundColor: l.value.style.chart.backgroundColor,
color: l.value.style.chart.color,
isPrinting: C(nl),
isImaging: C(il),
uid: K.value,
hasTooltip: l.value.userOptions.buttons.tooltip && l.value.style.chart.tooltip.show,
hasPdf: l.value.userOptions.buttons.pdf,
hasImg: l.value.userOptions.buttons.img,
hasXls: l.value.userOptions.buttons.csv,
hasLabel: l.value.userOptions.buttons.labels,
hasStack: Je.dataset.length > 1 && l.value.userOptions.buttons.stack,
hasFullscreen: l.value.userOptions.buttons.fullscreen,
hasTable: r.value.end - r.value.start <= 730 && l.value.userOptions.buttons.table,
isFullscreen: ie.value,
isTooltip: v.value.showTooltip,
isStacked: v.value.stacked,
titles: { ...l.value.userOptions.buttonTitles },
chartElement: _.value,
position: l.value.userOptions.position,
hasAnnotator: l.value.userOptions.buttons.annotator,
isAnnotation: $e.value,
callbacks: l.value.userOptions.callbacks,
printScale: l.value.userOptions.print.scale,
tableDialog: l.value.table.useDialog,
onToggleFullscreen: dl,
onGeneratePdf: C(cl),
onGenerateCsv: We,
onGenerateImage: C(vl),
onToggleTable: zl,
onToggleLabels: Sl,
onToggleStack: Fl,
onToggleTooltip: Dl,
onToggleAnnotator: Ye,
style: xe({
visibility: C(sl) ? C(Xe) ? "visible" : "hidden" : "visible"
})
}, Il({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: b(({ isOpen: t, color: s }) => [
S(e.$slots, "menuIcon", Q(ee({ isOpen: t, color: s })), void 0, !0)
]),
key: "0"
} : void 0,
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: b(() => [
S(e.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: b(() => [
S(e.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: b(() => [
S(e.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: b(() => [
S(e.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: b(() => [
S(e.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
e.$slots.optionLabels ? {
name: "optionLabels",
fn: b(() => [
S(e.$slots, "optionLabels", {}, void 0, !0)
]),
key: "6"
} : void 0,
e.$slots.optionStack ? {
name: "optionStack",
fn: b(() => [
S(e.$slots, "optionStack", {}, void 0, !0)
]),
key: "7"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: b(({ toggleFullscreen: t, isFullscreen: s }) => [
S(e.$slots, "optionFullscreen", Q(ee({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
]),
key: "8"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: b(({ toggleAnnotator: t, isAnnotator: s }) => [
S(e.$slots, "optionAnnotator", Q(ee({ toggleAnnotator: t, isAnnotator: s })), void 0, !0)
]),
key: "9"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasLabel", "hasStack", "hasFullscreen", "hasTable", "isFullscreen", "isTooltip", "isStacked", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : V("", !0),
J("div", {
class: "vue-ui-xy-canvas",
style: xe(`position: relative; aspect-ratio: ${ul.value}`),
ref_key: "container",
ref: ae
}, [
J("canvas", {
ref_key: "canvas",
ref: w,
style: { width: "100%", height: "100%" },
onMousemove: a[0] || (a[0] = (t) => Ma(t)),
onMouseleave: Ta
}, null, 544),
C(_e) ? (I(), W(ct, { key: 0 })) : V("", !0),
El(C(ql), {
show: v.value.showTooltip && ne.value,
backgroundColor: l.value.style.chart.tooltip.backgroundColor,
color: l.value.style.chart.tooltip.color,
fontSize: l.value.style.chart.tooltip.fontSize,
borderRadius: l.value.style.chart.tooltip.borderRadius,
borderColor: l.value.style.chart.tooltip.borderColor,
borderWidth: l.value.style.chart.tooltip.borderWidth,
position: l.value.style.chart.tooltip.position,
offsetY: l.value.style.chart.tooltip.offsetY,
parent: C(w),
content: ke.value,
isFullscreen: ie.value,
backgroundOpacity: l.value.style.chart.tooltip.backgroundOpacity,
isCustom: C(Pl)(l.value.style.chart.tooltip.customFormat),
smooth: l.value.style.chart.tooltip.smooth,
backdropFilter: l.value.style.chart.tooltip.backdropFilter,
smoothForce: l.value.style.chart.tooltip.smoothForce,
smoothSnapThreshold: l.value.style.chart.tooltip.smoothSnapThreshold
}, {
"tooltip-before": b(() => [
S(e.$slots, "tooltip-before", Q(ee({ ...Ke.value })), void 0, !0)
]),
"tooltip-after": b(() => [
S(e.$slots, "tooltip-after", Q(ee({ ...Ke.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "position", "offsetY", "parent", "content", "isFullscreen", "backgroundOpacity", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"])
], 4),
l.value.style.chart.zoom.show && E.value > 6 && X.value && ol.value && !C(_e) ? (I(), W(kt, {
key: 2,
ref_key: "chartSlicer",
ref: q,
allMinimaps: ca.value,
background: l.value.style.chart.zoom.color,
borderColor: l.value.style.chart.backgroundColor,
customFormat: l.value.style.chart.zoom.customFormat,
cutNullValues: ze.value,
enableRangeHandles: l.value.style.chart.zoom.enableRangeHandles,
enableSelectionDrag: l.value.style.chart.zoom.enableSelectionDrag,
end: r.value.end,
focusOnDrag: l.value.style.chart.zoom.focusOnDrag,
focusRangeRatio: l.value.style.chart.zoom.focusRangeRatio,
fontSize: l.value.style.chart.zoom.fontSize,
immediate: !l.value.style.chart.zoom.preview.enable,
inputColor: l.value.style.chart.zoom.color,
isPreview: da.value,
labelLeft: l.value.style.chart.grid.x.timeLabels.values[r.value.start] ? B.value[r.value.start].text : "",
labelRight: l.value.style.chart.grid.x.timeLabels.values[r.value.end - 1] ? B.value[r.value.end - 1].text : "",
max: E.value,
min: 0,
minimap: ia.value,
minimapCompact: l.value.style.chart.zoom.minimap.compact,
minimapFrameColor: l.value.style.chart.zoom.minimap.frameColor,
minimapIndicatorColor: l.value.style.chart.zoom.minimap.indicatorColor,
minimapLineColor: l.value.style.chart.zoom.minimap.lineColor,
minimapMerged: l.value.style.chart.zoom.minimap.merged,
minimapSelectedColor: l.value.style.chart.zoom.minimap.selectedColor,
minimapSelectedColorOpacity: l.value.style.chart.zoom.minimap.selectedColorOpacity,
minimapSelectedIndex: h.value,
minimapSelectionRadius: l.value.style.chart.zoom.minimap.selectionRadius,
preciseLabels: bl.value.length ? bl.value : B.value,
refreshEndPoint: l.value.style.chart.zoom.endIndex !== null ? l.value.style.chart.zoom.endIndex + 1 : E.value,
refreshStartPoint: l.value.style.chart.zoom.startIndex !== null ? l.value.style.chart.zoom.startIndex : 0,
selectColor: l.value.style.chart.zoom.highlightColor,
selectedSeries: T.value,
smoothMinimap: l.value.style.chart.zoom.minimap.smooth,
start: r.value.start,
timeLabels: B.value,
usePreciseLabels: l.value.style.chart.grid.x.timeLabels.datetimeFormatter.enable && !l.value.style.chart.zoom.useDefaultFormat,
textColor: l.value.style.chart.color,
useResetSlot: l.value.style.chart.zoom.useResetSlot,
valueEnd: r.value.end,
valueStart: r.value.start,
verticalHandles: l.value.style.chart.zoom.minimap.verticalHandles,
onFutureEnd: a[1] || (a[1] = (t) => yl("end", t)),
onFutureStart: a[2] || (a[2] = (t) => yl("start", t)),
onReset: he,
onTrapMouse: sa,
"onUpdate:end": fa,
"onUpdate:start": ha
}, {
"reset-action": b(({ reset: t }) => [
S(e.$slots, "reset-action", Q(ee({ reset: t })), void 0, !0)
]),
_: 3
}, 8, ["allMinimaps", "background", "borderColor", "customFormat", "cutNullValues", "enableRangeHandles", "enableSelectionDrag", "end", "focusOnDrag", "focusRangeRatio", "fontSize", "immediate", "inputColor", "isPreview", "labelLeft", "labelRight", "max", "minimap", "minimapCompact", "minimapFrameColor", "minimapIndicatorColor", "minimapLineColor", "minimapMerged", "minimapSelectedColor", "minimapSelectedColorOpacity", "minimapSelectedIndex", "minimapSelectionRadius", "preciseLabels", "refreshEndPoint", "refreshStartPoint", "selectColor", "selectedSeries", "smoothMinimap", "start", "timeLabels", "usePreciseLabels", "textColor", "useResetSlot", "valueEnd", "valueStart", "verticalHandles"])) : V("", !0),
J("div", {
id: `legend-bottom-${K.value}`
}, null, 8, St),
tl.value ? (I(), W(Xa, {
key: 3,
to: l.value.style.chart.legend.position === "top" ? `#legend-top-${K.value}` : `#legend-bottom-${K.value}`
}, [
J("div", {
ref_key: "chartLegend",
ref: ll
}, [
l.value.style.chart.legend.show && X.value ? (I(), W(bt, {
legendSet: Al.value,
config: Ra.value,
key: `legend_${Pe.value}`,
onClickMarker: a[3] || (a[3] = ({ i: t }) => De(t))
}, {
item: b(({ legend: t, index: s }) => [
J("div", {
onClick: (u) => t.segregate(),
style: xe(`opacity:${F.value.includes(s) ? 0.5 : 1}`)
}, qe(t.name), 13, Ft)
]),
_: 1
}, 8, ["legendSet", "config"])) : S(e.$slots, "legend", {
key: 1,
legend: Al.value
}, void 0, !0)
], 512)
], 8, ["to"])) : V("", !0),
e.$slots.watermark ? (I(), Te("div", Dt, [
S(e.$slots, "watermark", Q(ee({ isPrinting: C(nl) || C(il) })), void 0, !0)
])) : V("", !0),
e.$slots.source ? (I(), Te("div", {
key: 5,
ref_key: "source",
ref: al,
dir: "auto"
}, [
S(e.$slots, "source", {}, void 0, !0)
], 512)) : V("", !0),
X.value && l.value.userOptions.buttons.table ? (I(), W(Ua(ye.value.component), Va({ key: 6 }, ye.value.props, {
ref_key: "tableUnit",
ref: ce,
onClose: Ml
}), Il({
content: b(() => [
(I(), W(C(Gl), {
key: `table_${Oe.value}`,
colNames: Me.value.colNames,
head: Me.value.head,
body: Me.value.body,
config: Me.value.config,
title: l.value.table.useDialog ? "" : ye.value.title,
withCloseButton: !l.value.table.useDialog,
onClose: Ml
}, {
th: b(({ th: t }) => [
J("div", { innerHTML: t }, null, 8, Mt)
]),
td: b(({ td: t }) => [
Rl(qe(t), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
l.value.table.useDialog ? {
name: "title",
fn: b(() => [
Rl(qe(ye.value.title), 1)
]),
key: "0"
} : void 0,
l.value.table.useDialog ? {
name: "actions",
fn: b(() => [
J("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: a[4] || (a[4] = (t) => We(l.value.userOptions.callbacks.csv))
}, [
El(Ct, {
name: "excel",
stroke: ye.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : V("", !0),
l.value.userOptions.buttons.annotator && y.value.length ? (I(), W(C(Jl), {
key: 7,
parent: _.value,
backgroundColor: l.value.style.chart.backgroundColor,
color: l.value.style.chart.color,
active: $e.value,
onClose: Ye
}, null, 8, ["parent", "backgroundColor", "color", "active"])) : V("", !0)
], 46, wt));
}
}, Tt = /* @__PURE__ */ At($t, [["__scopeId", "data-v-74a619ec"]]), Jt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Tt
}, Symbol.toStringTag, { value: "Module" }));
export {
Zt as a,
Jt as b,
Tt as v
};