vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,152 lines (1,151 loc) • 49.2 kB
JavaScript
import { ref as c, computed as L, useSlots as Ot, onMounted as tt, watch as D, nextTick as ve, onBeforeUnmount as Pt, openBlock as S, createElementBlock as K, normalizeStyle as Y, unref as o, normalizeClass as Rt, createBlock as E, createCommentVNode as _, createSlots as Ft, withCtx as x, renderSlot as k, normalizeProps as B, guardReactiveProps as V, createElementVNode as Q, createVNode as Et, toDisplayString as at, createTextVNode as Nt } from "vue";
import { u as At, c as Dt, t as _t, a as Ht, p as H, C as de, b as Ut, D as we, i as ee, f as te, Y as Wt, J as Xt, d as lt, a2 as Yt, o as Bt, e as Vt, x as ot, y as Zt, q as Gt, r as jt, s as ae, l as qt } from "./index-WrV3SAID.js";
import { d as Jt, c as Kt, a as rt, t as Qt, l as C, r as ze, b as N, p as st, u as ea } from "./useResponsive-CoxXLe23.js";
import { _ as ta } from "./Tooltip-ho4JxRm-.js";
import { L as aa } from "./Legend-7H4oi6Sq.js";
import { _ as la } from "./Title-BR-xoRp4.js";
import { S as oa } from "./Slicer-B6THn4h_.js";
import { u as ra, U as sa } from "./usePrinter-kVpf1iV8.js";
import na from "./vue-ui-accordion-BQCDXXDs.js";
import { D as ua } from "./DataTable-DNPvKWC0.js";
import ia from "./vue-ui-skeleton-Qec_XSRf.js";
import { u as nt } from "./useNestedProp-Cj0kHD7k.js";
import { P as ca } from "./PenAndPaper-BF1ZRVm3.js";
import { u as va } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as da } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ha = ["id"], ya = ["onClick"], fa = {
key: 2,
class: "vue-data-ui-watermark"
}, ga = ["innerHTML"], pa = {
__name: "vue-ui-xy-canvas",
props: {
dataset: {
type: Array,
default() {
return [];
}
},
config: {
type: Object,
default() {
return {};
}
}
},
emits: ["selectLegend"],
setup(Se, { expose: ut, emit: it }) {
const { vue_ui_xy_canvas: ct } = At(), g = Se, he = c(Dt()), Z = c(null), M = c(null), G = c(null), u = c(null), f = c(1), P = c(1), le = c(!1), h = c(null), oe = c(""), $e = c(null), $ = c([]), U = c(1), A = c(!0), T = c(!0), ye = c(null), Ie = c(0), Me = c(0), re = c(!1), Te = c(null), Oe = c(null), Pe = c(null), Re = c(null), fe = c(0), ge = c(0), pe = c(0), me = L(() => !!g.dataset && g.dataset.length), vt = it, dt = Ot();
tt(() => {
dt["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
});
const t = L({
get: () => Ne(),
set: (e) => e
}), { userOptionsVisible: be, setUserOptionsVisibility: Fe, keepUserOptionState: Ee } = va({ config: t.value });
function Ne() {
const e = nt({
userConfig: g.config,
defaultConfig: ct
});
let a = {};
return e.theme ? a = {
...nt({
userConfig: _t.vue_ui_xy_canvas[e.theme] || g.config,
defaultConfig: e
}),
customPalette: Ht[e.theme] || H
} : a = e, g.config && de(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 && de(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 && de(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 && de(g.config, "style.chart.zoom.endIndex") ? a.style.chart.zoom.endIndex = g.config.style.chart.zoom.endIndex : a.style.chart.zoom.endIndex = null, a;
}
D(() => g.config, (e) => {
t.value = Ne(), be.value = !t.value.showOnChartHover, Le(), fe.value += 1, ge.value += 1, pe.value += 1;
}, { deep: !0 }), D(() => g.dataset, () => {
Le(), fe.value += 1, ge.value += 1, pe.value += 1;
}, { deep: !0 });
const Ae = c(t.value.style.chart.aspectRatio), { isPrinting: De, isImaging: _e, generatePdf: He, generateImage: Ue } = ra({
elementId: `xy_canvas_${he.value}`,
fileName: t.value.style.chart.title.text || "vue-ui-xy-canvas"
}), n = c({
showTable: t.value.table.show,
showDataLabels: t.value.style.chart.dataLabels.show,
stacked: t.value.style.chart.stacked,
showTooltip: t.value.style.chart.tooltip.show
});
function ht(e) {
re.value = e, Me.value += 1;
}
const We = L(() => Ut(t.value.customPalette)), I = L(() => W.value ? Math.max(...W.value.filter((e, a) => !$.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0), l = L(() => {
const e = f.value - f.value * (t.value.style.chart.paddingProportions.left + t.value.style.chart.paddingProportions.right);
return {
canvasWidth: f.value,
canvasHeight: P.value,
left: f.value * t.value.style.chart.paddingProportions.left,
top: P.value * t.value.style.chart.paddingProportions.top,
right: f.value - f.value * t.value.style.chart.paddingProportions.right,
bottom: P.value - P.value * t.value.style.chart.paddingProportions.bottom,
width: e,
height: P.value - P.value * (t.value.style.chart.paddingProportions.top + t.value.style.chart.paddingProportions.bottom),
slot: e / (s.value.end - s.value.start)
};
});
function Xe(e, a) {
return e / a;
}
function yt({ hasAutoScale: e, series: a, min: r, max: v, scale: d, yOffset: p, individualHeight: i, stackIndex: m = null }) {
return a.map((z, Ce) => {
const O = d.min < 0 ? Math.abs(d.min) : 0, R = Xe(z + O, O + d.max);
let F, j;
e && (F = Math.abs(d.min), j = Xe(z + F, d.max + F));
let q = 0;
return m === null ? q = l.value.bottom - l.value.height * (e ? j : R) : q = l.value.bottom - p - i * (e ? j : R), {
x: l.value.left + l.value.slot * Ce + l.value.slot / 2,
y: q,
value: z
};
});
}
const b = L(() => {
const e = t.value.style.chart.scale.min !== null ? t.value.style.chart.scale.min : Math.min(...W.value.filter((i, m) => !$.value.includes(i.absoluteIndex)).flatMap((i) => i.series.slice(s.value.start, s.value.end))), a = t.value.style.chart.scale.max !== null ? t.value.style.chart.scale.max : Math.max(...W.value.filter((i, m) => !$.value.includes(i.absoluteIndex)).flatMap((i) => i.series.slice(s.value.start, s.value.end))), r = we(e < 0 ? e : 0, a === e ? e + 1 < 0 ? 0 : e + 1 : a < 0 ? 0 : a, t.value.style.chart.scale.ticks), v = r.min < 0 ? Math.abs(r.min) : 0, d = l.value.bottom - l.value.height * (v / (r.max + v)), p = r.ticks.map((i) => ({
y: l.value.bottom - l.value.height * ((i + v) / (r.max + v)),
x: l.value.left - 8,
value: i
}));
return {
absoluteMin: v,
max: a,
min: e,
scale: r,
yLabels: p,
zero: d
};
}), ft = L(() => 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>${ee(
t.value.style.chart.dataLabels.formatter,
e.series[h.value],
te({
p: e.prefix || "",
v: e.series[h.value],
s: e.suffix || "",
r: e.rounding || 0
}),
{ datapoint: e, seriesIndex: h.value }
)}</span>
</div>
`)), W = L(() => g.dataset.map((e, a) => ({
...e,
series: Wt({
data: Xt(e.series),
threshold: t.value.downsample.threshold
}),
absoluteIndex: a,
color: lt(e.color || We.value[a] || H[a] || H[a % H.length])
})));
D(I, (e) => {
e && Ye();
});
const y = L(() => Yt(W.value.filter((e, a) => !$.value.includes(e.absoluteIndex))).map((e, a) => ({
...e,
series: e.series.slice(s.value.start, s.value.end)
})).map((e, a) => {
let r = [null, void 0].includes(e.scaleMin) ? Math.min(...e.series) || 0 : e.scaleMin, v = [null, void 0].includes(e.scaleMax) ? Math.max(...e.series) || 1 : e.scaleMax;
r === v && (r = r >= 0 ? v - 1 : r, v = v >= 0 ? v : r + 1);
const p = {
ratios: e.series.filter((J) => ![null, void 0].includes(J)).map((J) => (J - r) / (v - r)),
valueMin: r,
valueMax: v
}, i = e.scaleSteps || t.value.style.chart.scale.ticks;
let m;
e.autoScaling ? m = we(p.valueMin, p.valueMax, i) : m = we(p.valueMin < 0 ? p.valueMin : 0, p.valueMax <= 0 ? 0 : p.valueMax, i);
const z = n.value.stacked ? l.value.height * (1 - e.cumulatedStackRatio) : 0, Ce = n.value.stacked ? l.value.height / t.value.style.chart.stackGap : 0, O = n.value.stacked ? l.value.height * e.stackRatio - Ce : l.value.height, R = m.min < 0 ? Math.abs(m.min) : 0;
let F;
e.autoScaling && n.value.stacked && v <= 0 ? F = l.value.bottom - z - O : F = l.value.bottom - z - O * (R / (m.max + R));
const j = m.ticks.map((J, Tt) => ({
y: l.value.bottom - z - O * (Tt / (m.ticks.length - 1)),
x: l.value.left - 8,
value: J
})), q = yt({
hasAutoScale: n.value.stacked && e.autoScaling,
series: e.series,
min: n.value.stacked ? r : b.value.min,
max: n.value.stacked ? v : b.value.max,
scale: n.value.stacked ? m : b.value.scale,
yOffset: z,
individualHeight: O,
stackIndex: n.value.stacked ? a : null
});
return {
...e,
coordinatesLine: q,
min: r,
max: v,
localScale: m,
localZero: F,
localMin: R,
localYLabels: j,
yOffset: z,
individualHeight: O
};
})), s = c({
start: 0,
end: I.value
});
function Ye() {
Be();
}
const X = c(null);
async function Be() {
(t.value.style.chart.zoom.startIndex !== null || t.value.style.chart.zoom.endIndex !== null) && X.value ? (t.value.style.chart.zoom.startIndex !== null && (await ve(), await ve(), X.value && X.value.setStartValue(t.value.style.chart.zoom.startIndex)), t.value.style.chart.zoom.endIndex !== null && (await ve(), await ve(), X.value && X.value.setEndValue(gt(t.value.style.chart.zoom.endIndex + 1)))) : (s.value = {
start: 0,
end: I.value
}, Ie.value += 1);
}
function gt(e) {
const a = I.value;
return e > a ? a : e < 0 || t.value.style.chart.zoom.startIndex !== null && e < t.value.style.chart.zoom.startIndex ? t.value.style.chart.zoom.startIndex !== null ? t.value.style.chart.zoom.startIndex + 1 : 1 : e;
}
const pt = L(() => y.value.filter((e) => ["line", "plot", void 0].includes(e.type))), w = L(() => y.value.filter((e) => e.type === "bar"));
function mt() {
if (!M.value)
return;
const e = G.value.offsetWidth, a = G.value.offsetHeight;
M.value.width = e * U.value * 2, M.value.height = a * U.value * 2, f.value = e * U.value * 2, P.value = a * U.value * 2, u.value.scale(U.value, U.value), xe();
}
function bt() {
if (u.value.clearRect(0, 0, 1e4, 1e4), u.value.fillStyle = t.value.style.chart.backgroundColor, u.value.fillRect(0, 0, l.value.canvasWidth, l.value.canvasHeight), n.value.stacked)
t.value.style.chart.grid.y.verticalLines.show && s.value.end - s.value.start < t.value.style.chart.grid.y.verticalLines.hideUnderXLength ? y.value.forEach((e) => {
for (let a = 0; a < s.value.end - s.value.start + 1; a += 1)
C(
u.value,
[
{
x: l.value.left + l.value.slot * a,
y: l.value.bottom - e.yOffset - e.individualHeight
},
{
x: l.value.left + l.value.slot * a,
y: l.value.bottom - e.yOffset
}
],
{
color: t.value.style.chart.grid.y.verticalLines.color
}
);
}) : t.value.style.chart.grid.y.verticalLines.show && s.value.end - s.value.start >= t.value.style.chart.grid.y.verticalLines.hideUnderXLength && y.value.forEach((e) => {
for (let a = s.value.start; a < s.value.end; a += 1)
a % Math.floor((s.value.end - s.value.start) / t.value.style.chart.grid.y.timeLabels.modulo) === 0 && C(
u.value,
[
{
x: l.value.left + l.value.slot * (a - s.value.start) + l.value.slot / 2,
y: l.value.bottom - e.yOffset - e.individualHeight
},
{
x: l.value.left + l.value.slot * (a - s.value.start) + l.value.slot / 2,
y: l.value.bottom - e.yOffset
}
],
{
color: t.value.style.chart.grid.y.verticalLines.color
}
);
}), t.value.style.chart.grid.x.horizontalLines.show && (t.value.style.chart.grid.x.horizontalLines.alternate ? y.value.forEach((e) => {
e.localYLabels.forEach((a, r) => {
r < e.localYLabels.length - 1 && ze(
u.value,
[
{ x: l.value.left, y: a.y },
{ x: l.value.right, y: a.y },
{ x: l.value.right, y: e.localYLabels[r + 1].y },
{ x: l.value.left, y: e.localYLabels[r + 1].y }
],
{
fillColor: r % 2 === 0 ? "transparent" : ae(t.value.style.chart.grid.x.horizontalLines.color, t.value.style.chart.grid.x.horizontalLines.opacity),
strokeColor: "transparent"
}
);
});
}) : y.value.forEach((e) => {
e.localYLabels.slice(s.value.start, s.value.end).forEach((a) => {
C(
u.value,
[
{ x: l.value.left, y: a.y },
{ x: l.value.right, y: a.y }
],
{
color: t.value.style.chart.grid.x.horizontalLines.color
}
);
});
})), t.value.style.chart.grid.zeroLine.show && y.value.forEach((e) => {
C(
u.value,
[
{ x: l.value.left, y: e.localZero },
{ x: l.value.right, y: e.localZero }
],
{
color: t.value.style.chart.grid.zeroLine.color,
lineDash: t.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
}
);
}), t.value.style.chart.grid.y.axisLabels.show && y.value.forEach((e) => {
C(
u.value,
[
{ x: l.value.left, y: l.value.bottom - e.yOffset },
{ x: l.value.left, y: l.value.bottom - e.yOffset - e.individualHeight }
],
{
color: e.color
}
), C(
u.value,
[
{ x: l.value.right, y: l.value.bottom - e.yOffset },
{ x: l.value.right, y: l.value.bottom - e.yOffset - e.individualHeight }
],
{
color: e.color
}
), e.localYLabels.forEach((a, r) => {
N(
u.value,
ee(
t.value.style.chart.dataLabels.formatter,
a.value,
te({
p: e.prefix || t.value.style.chart.grid.y.axisLabels.prefix || "",
v: a.value,
s: e.suffix || t.value.style.chart.grid.y.axisLabels.suffix || "",
r: e.rounding || t.value.style.chart.grid.y.axisLabels.rounding || 0
}),
{ datapoint: a, seriesIndex: r }
),
a.x + t.value.style.chart.grid.y.axisLabels.offsetX,
a.y,
{
align: "right",
font: `${Math.round(f.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
color: e.color
}
);
});
}), y.value.forEach((e) => {
N(
u.value,
e.name,
f.value / 35,
l.value.bottom - e.yOffset - e.individualHeight / 2,
{
align: "center",
rotation: -90,
color: e.color,
font: `${Math.round(f.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`
}
);
});
else {
if (t.value.style.chart.grid.y.verticalLines.show && s.value.end - s.value.start < t.value.style.chart.grid.y.verticalLines.hideUnderXLength)
for (let e = 0; e < s.value.end - s.value.start + 1; e += 1)
C(
u.value,
[
{ x: l.value.left + l.value.slot * e, y: l.value.top },
{ x: l.value.left + l.value.slot * e, y: l.value.bottom }
],
{
color: t.value.style.chart.grid.y.verticalLines.color
}
);
else if (t.value.style.chart.grid.y.verticalLines.show && s.value.end - s.value.start >= t.value.style.chart.grid.y.verticalLines.hideUnderXLength)
for (let e = s.value.start; e < s.value.end; e += 1)
e % Math.floor((s.value.end - s.value.start) / t.value.style.chart.grid.y.timeLabels.modulo) === 0 && C(
u.value,
[
{ x: l.value.left + l.value.slot * (e - s.value.start) + l.value.slot / 2, y: l.value.top },
{ x: l.value.left + l.value.slot * (e - s.value.start) + l.value.slot / 2, y: l.value.bottom }
],
{
color: t.value.style.chart.grid.y.verticalLines.color
}
);
t.value.style.chart.grid.x.horizontalLines.show && (t.value.style.chart.grid.x.horizontalLines.alternate ? b.value.yLabels.forEach((e, a) => {
a < b.value.yLabels.length - 1 && ze(
u.value,
[
{ x: l.value.left, y: e.y },
{ x: l.value.right, y: e.y },
{ x: l.value.right, y: b.value.yLabels[a + 1].y },
{ x: l.value.left, y: b.value.yLabels[a + 1].y }
],
{
fillColor: a % 2 === 0 ? "transparent" : ae(t.value.style.chart.grid.x.horizontalLines.color, t.value.style.chart.grid.x.horizontalLines.opacity),
strokeColor: "transparent"
}
);
}) : b.value.yLabels.forEach((e) => {
C(
u.value,
[
{ x: l.value.left, y: e.y },
{ x: l.value.right, y: e.y }
],
{
color: t.value.style.chart.grid.x.horizontalLines.color
}
);
})), t.value.style.chart.grid.y.showAxis && C(
u.value,
[
{ x: l.value.left, y: l.value.top },
{ x: l.value.left, y: l.value.bottom }
],
{
color: t.value.style.chart.grid.y.axisColor,
lineWidth: t.value.style.chart.grid.y.axisThickness
}
), t.value.style.chart.grid.x.showAxis && C(
u.value,
[
{ x: l.value.left, y: l.value.bottom },
{ x: l.value.right, y: l.value.bottom }
],
{
color: t.value.style.chart.grid.x.axisColor,
lineWidth: t.value.style.chart.grid.x.axisThickness
}
), t.value.style.chart.grid.zeroLine.show && C(
u.value,
[
{ x: l.value.left, y: b.value.zero },
{ x: l.value.right, y: b.value.zero }
],
{
color: t.value.style.chart.grid.zeroLine.color,
lineDash: t.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
}
), t.value.style.chart.grid.y.axisLabels.show && b.value.yLabels.forEach((e, a) => {
N(
u.value,
ee(
t.value.style.chart.dataLabels.formatter,
e.value,
te({
p: t.value.style.chart.grid.y.axisLabels.prefix || "",
v: e.value,
s: t.value.style.chart.grid.y.axisLabels.suffix || "",
r: t.value.style.chart.grid.y.axisLabels.rounding || 0
}),
{ datapoint: e, seriesIndex: a }
),
e.x + t.value.style.chart.grid.y.axisLabels.offsetX,
e.y,
{
align: "right",
font: `${Math.round(f.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
color: t.value.style.chart.grid.y.axisLabels.color
}
);
});
}
t.value.style.chart.grid.y.axisName && N(
u.value,
t.value.style.chart.grid.y.axisName,
f.value - f.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio * 1.2,
l.value.bottom - l.value.height / 2,
{
font: `${Math.round(f.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
color: t.value.style.chart.color,
align: "center",
rotation: 90
}
), t.value.style.chart.grid.x.axisName && N(
u.value,
t.value.style.chart.grid.x.axisName,
f.value / 2,
P.value,
{
font: `${Math.round(f.value / 40 * t.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
color: t.value.style.chart.color,
align: "center"
}
);
}
function xt(e) {
for (let a = 0; a < e.coordinatesLine.length; a += 1) {
const r = (h.value === a ? f.value / 150 : t.value.style.chart.line.plots.show ? f.value / 200 : 0) * t.value.style.chart.line.plots.radiusRatio;
rt(
u.value,
{ x: e.coordinatesLine[a].x, y: e.coordinatesLine[a].y },
r,
{
color: t.value.style.chart.backgroundColor,
fillStyle: e.color,
strokeColor: "transparent"
}
);
}
}
function Lt(e) {
for (let a = 0; a < e.coordinatesLine.length; a += 1)
N(
u.value,
ee(
t.value.style.chart.dataLabels.formatter,
e.coordinatesLine[a].value,
te({
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 + t.value.style.chart.dataLabels.offsetY,
{
align: "center",
font: `${Math.round(f.value / 40 * t.value.style.chart.dataLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
color: t.value.style.chart.dataLabels.useSerieColor ? e.color : t.value.style.chart.dataLabels.color,
strokeColor: t.value.style.chart.backgroundColor,
lineWidth: 0.8
}
);
}
function kt() {
for (let e = s.value.start; e < s.value.end; e += 1)
(s.value.end - s.value.start < t.value.style.chart.grid.y.timeLabels.modulo || s.value.end - s.value.start >= t.value.style.chart.grid.y.timeLabels.modulo && (e % Math.floor((s.value.end - s.value.start) / t.value.style.chart.grid.y.timeLabels.modulo) === 0 || e === h.value + s.value.start)) && N(
u.value,
t.value.style.chart.grid.y.timeLabels.values[e] || e + 1,
l.value.left + l.value.slot * (e - s.value.start) + l.value.slot / 2,
l.value.bottom + f.value / t.value.style.chart.grid.y.timeLabels.offsetY,
{
align: t.value.style.chart.grid.y.timeLabels.rotation === 0 ? "center" : t.value.style.chart.grid.y.timeLabels.rotation > 0 ? "left" : "right",
font: `${Math.round(f.value / 40 * t.value.style.chart.grid.y.timeLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
color: ae(t.value.style.chart.grid.y.timeLabels.color, h.value !== null ? h.value + s.value.start === e ? 100 : 20 : 100),
rotation: t.value.style.chart.grid.y.timeLabels.rotation
}
);
}
function Ve() {
C(
u.value,
[
{ x: l.value.left + l.value.slot * h.value + l.value.slot / 2, y: l.value.top },
{ x: l.value.left + l.value.slot * h.value + l.value.slot / 2, y: l.value.bottom }
],
{
color: t.value.style.chart.selector.color,
lineDash: t.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
lineWidth: 2,
linceCap: "round"
}
);
}
function Ct() {
w.value.forEach((e, a) => {
for (let r = 0; r < e.coordinatesLine.length; r += 1)
ze(
u.value,
[
{
x: l.value.left + l.value.slot * r + l.value.slot / 10 + (n.value.stacked ? 0 : l.value.slot / w.value.length * a - (a === 0 ? 0 : l.value.slot / (5 * w.value.length) * a)),
y: n.value.stacked ? e.localZero : b.value.zero
},
{
x: l.value.left + l.value.slot * r + l.value.slot / 10 + (n.value.stacked ? 0 : l.value.slot / w.value.length * a - (a === 0 ? 0 : l.value.slot / (5 * w.value.length) * a)) + l.value.slot * 0.8 / (n.value.stacked ? 1 : w.value.length),
y: n.value.stacked ? e.localZero : b.value.zero
},
{
x: l.value.left + l.value.slot * r + l.value.slot / 10 + (n.value.stacked ? 0 : l.value.slot / w.value.length * a - (a === 0 ? 0 : l.value.slot / (5 * w.value.length) * a)) + l.value.slot * 0.8 / (n.value.stacked ? 1 : w.value.length),
y: e.coordinatesLine[r].y
},
{
x: l.value.left + l.value.slot * r + l.value.slot / 10 + (n.value.stacked ? 0 : l.value.slot / w.value.length * a - (a === 0 ? 0 : l.value.slot / (5 * w.value.length) * a)),
y: e.coordinatesLine[r].y
}
],
{
strokeColor: t.value.style.chart.backgroundColor,
gradient: {
type: "linear",
start: {
x: e.coordinatesLine[r].x,
y: e.coordinatesLine[r].y
},
end: {
x: e.coordinatesLine[r].x,
y: n.value.stacked ? e.localZero : b.value.zero
},
stops: [
{ offset: 0, color: e.color },
{ offset: 1, color: qt(e.color, 0.5) }
]
}
}
), n.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && N(
u.value,
ee(
t.value.style.chart.dataLabels.formatter,
e.coordinatesLine[r].value,
te({
p: e.prefix || "",
v: e.coordinatesLine[r].value,
s: e.suffix || "",
r: e.rounding || 0
}),
{ datapoint: e.coordinatesLine[r], seriesIndex: r }
),
l.value.left + l.value.slot * r + l.value.slot / 10 + (n.value.stacked ? 0 : l.value.slot / w.value.length * a - (a === 0 ? 0 : l.value.slot / (5 * w.value.length) * a)) + l.value.slot * 0.4 / (n.value.stacked ? 1 : w.value.length),
(e.coordinatesLine[r].value < 0 ? n.value.stacked ? e.localZero : b.value.zero : e.coordinatesLine[r].y) + t.value.style.chart.dataLabels.offsetY,
{
align: "center",
font: `${Math.round(f.value / 40 * t.value.style.chart.dataLabels.fontSizeRatio)}px ${t.value.style.fontFamily}`,
color: t.value.style.chart.dataLabels.useSerieColor ? e.color : t.value.style.chart.dataLabels.color,
strokeColor: t.value.style.chart.backgroundColor,
lineWidth: 0.8
}
);
});
}
function wt(e) {
e.useArea ? n.value.stacked ? st(
u.value,
[{ x: e.coordinatesLine[0].x, y: e.localZero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: e.localZero }],
{
fillColor: ae(e.color, t.value.style.chart.area.opacity),
strokeColor: "transparent"
}
) : st(
u.value,
[{ x: e.coordinatesLine[0].x, y: b.value.zero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: b.value.zero }],
{
fillColor: ae(e.color, t.value.style.chart.area.opacity),
strokeColor: "transparent"
}
) : C(u.value, e.coordinatesLine, {
color: e.color,
lineWidth: 3
});
}
function zt() {
y.value.forEach((e, a) => {
C(
u.value,
[
{ x: l.value.left, y: l.value.bottom - e.yOffset },
{ x: l.value.right, y: l.value.bottom - e.yOffset }
],
{
color: t.value.style.chart.grid.x.horizontalLines.color,
lineWidth: 1
}
);
});
}
function xe() {
bt(), A.value ? (T.value && h.value !== null && t.value.style.chart.selector.show && Ve(), Ct(), n.value.stacked && t.value.style.chart.grid.x.showAxis && zt(), pt.value.forEach((e) => {
(e.type === "line" || !e.type) && wt(e), T.value && (xt(e), n.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Lt(e));
}), ye.value = Kt(M.value)) : (ye.value && (u.value.clearRect(0, 0, 1e4, 1e4), u.value.drawImage(ye.value, 0, 0)), T.value && h.value !== null && t.value.style.chart.selector.show && Ve(), T.value && h.value !== null && y.value.forEach((e) => {
if (e.type === "line" || !e.type || e.type === "plot") {
if (!e.coordinatesLine[h.value]) return;
e.coordinatesLine[h.value].x !== void 0 && e.coordinatesLine[h.value].y !== void 0 && rt(
u.value,
{
x: e.coordinatesLine[h.value].x,
y: e.coordinatesLine[h.value].y
},
f.value / 150 * t.value.style.chart.line.plots.radiusRatio,
{
color: t.value.style.chart.backgroundColor,
fillStyle: e.color,
strokeColor: "transparent"
}
);
}
})), t.value.style.chart.grid.y.timeLabels.show && kt(), A.value = !1;
}
const se = Jt(() => {
T.value = !0, mt();
}, I.value > 200 ? 10 : 1, !T.value);
function St(e) {
const { left: a } = M.value.getBoundingClientRect(), r = e.clientX - a;
if (r * 2 < l.value.left || r * 2 > l.value.right) {
le.value = !1, h.value = null;
return;
}
const v = r * 2 - l.value.left;
if (h.value = Math.floor(v / l.value.slot), le.value = !0, !T.value) return;
let d = "";
const p = t.value.style.chart.tooltip.customFormat;
ot(p) && Zt(() => p({
seriesIndex: h.value,
datapoint: y.value.map((i) => ({
shape: i.shape || null,
name: i.name,
color: i.color,
type: i.type || "line",
value: i.series.find((m, z) => z === h.value)
})),
series: y.value,
config: t.value
})) ? oe.value = p({
seriesIndex: h.value,
datapoint: y.value.map((i) => ({
shape: i.shape || null,
name: i.name,
color: i.color,
type: i.type || "line",
value: i.series.find((m, z) => z === h.value)
})),
series: y.value,
config: t.value
}) : (t.value.style.chart.grid.y.timeLabels.values.slice(s.value.start, s.value.end)[h.value] && (d += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${t.value.style.chart.tooltip.borderColor}; width:100%">${t.value.style.chart.grid.y.timeLabels.values.slice(s.value.start, s.value.end)[h.value]}</div>`), d += ft.value.join(""), oe.value = d), T.value = !1;
}
D(() => h.value, (e) => {
se();
}), D(() => s.value, (e) => {
A.value = !0, xe();
}, {
deep: !0
}), D(() => n.value.showDataLabels, (e) => {
A.value = !0, xe();
}), D(() => n.value.stacked, (e) => {
A.value = !0, T.value = !0, se();
});
function $t() {
le.value = !1, h.value = null, oe.value = "";
}
const ne = c(null), ue = c(null);
tt(() => {
Le();
});
function Le() {
if (Bt(g.dataset) ? Vt({
componentName: "VueUiXyCanvas",
type: "dataset"
}) : M.value && (u.value = M.value.getContext("2d", { willReadFrequently: !0 })), t.value.responsive) {
const e = Qt(() => {
const { width: a, height: r } = ea({
chart: Z.value,
title: t.value.style.chart.title.text ? Te.value : null,
legend: t.value.style.chart.legend.show ? Oe.value : null,
slicer: t.value.style.chart.zoom.show && I.value > 1 ? Pe.value : null,
source: Re.value
});
Ae.value = `${a} / ${r}`;
});
ne.value = new ResizeObserver(e), ne.value.observe(Z.value.parentNode);
}
ue.value = new ResizeObserver((e) => {
for (const a of e)
a.contentBoxSize && G.value && (A.value = !0, se());
}), ue.value.observe(G.value), Be();
}
Pt(() => {
ue.value && ue.value.disconnect(), ne.value && ne.value.disconnect();
});
function Ze(e) {
vt("selectLegend", y.value.find((a) => a.absoluteIndex === e)), $.value.includes(e) ? $.value = $.value.filter((a) => a !== e) : $.value.push(e), A.value = !0, se();
}
const Ge = L(() => W.value.map((e, a) => ({
...e,
name: e.name,
color: lt(e.color) || We.value[a] || H[a] || H[a % H.length],
shape: e.shape || "circle",
prefix: e.prefix || "",
suffix: e.suffix || "",
rounding: e.rounding || 0
})).map((e) => ({
...e,
opacity: $.value.includes(e.absoluteIndex) ? 0.5 : 1,
segregate: () => Ze(e.absoluteIndex),
isSegregated: $.value.includes(e.absoluteIndex)
}))), It = L(() => ({
cy: "donut-div-legend",
backgroundColor: t.value.style.chart.legend.backgroundColor,
color: t.value.style.chart.legend.color,
fontSize: t.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
})), ie = L(() => {
const e = [""].concat(y.value.map((d) => d.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 d = 0; d < I.value; d += 1) {
const p = y.value.map((i) => i.series[d] ?? 0).reduce((i, m) => i + m, 0);
a.push([t.value.style.chart.grid.y.timeLabels.values.slice(s.value.start, s.value.end)[d] ?? d + 1].concat(y.value.map((i) => (i.series[d] ?? 0).toFixed(t.value.table.rounding))).concat((p ?? 0).toFixed(t.value.table.rounding)));
}
const r = {
th: {
backgroundColor: t.value.table.th.backgroundColor,
color: t.value.table.th.color,
outline: t.value.table.th.outline
},
td: {
backgroundColor: t.value.table.td.backgroundColor,
color: t.value.table.td.color,
outline: t.value.table.td.outline
},
breakpoint: t.value.table.responsiveBreakpoint
}, v = [t.value.table.columnNames.period].concat(y.value.map((d) => d.name)).concat(t.value.table.columnNames.total);
return { head: e, body: a.slice(0, s.value.end - s.value.start), config: r, colNames: v };
}), je = L(() => {
if (y.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
const e = y.value.map((r) => ({
label: r.name,
color: r.color,
type: r.type
})), a = [];
for (let r = s.value.start; r < s.value.end; r += 1) {
const v = [t.value.style.chart.grid.y.timeLabels.values[r] || r + 1];
y.value.forEach((d) => {
v.push(Number((d.series[r] || 0).toFixed(t.value.table.rounding)));
}), a.push(v);
}
return { head: e, body: a };
});
function qe() {
const e = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], a = ["", ...je.value.head.map((p) => p.label)], r = je.value.body, v = e.concat([a]).concat(r), d = Gt(v);
jt({ csvContent: d, title: t.value.style.chart.title.text || "vue-ui-xy-canvas" });
}
function Mt() {
return y.value;
}
function Je() {
n.value.showTable = !n.value.showTable;
}
function Ke() {
n.value.showDataLabels = !n.value.showDataLabels;
}
function Qe() {
n.value.stacked = !n.value.stacked;
}
function et() {
n.value.showTooltip = !n.value.showTooltip;
}
const ce = c(!1);
function ke() {
ce.value = !ce.value;
}
return ut({
getData: Mt,
generateCsv: qe,
generatePdf: He,
generateImage: Ue,
toggleTable: Je,
toggleLabels: Ke,
toggleStack: Qe,
toggleTooltip: et,
toggleAnnotator: ke
}), (e, a) => (S(), K("div", {
style: Y(`width:100%; position:relative; ${o(t).responsive ? "height: 100%" : ""}`),
ref_key: "xy",
ref: Z,
id: `xy_canvas_${o(he)}`,
class: Rt(`vue-ui-donut ${o(re) ? "vue-data-ui-wrapper-fullscreen" : ""}`),
onMouseenter: a[5] || (a[5] = () => o(Fe)(!0)),
onMouseleave: a[6] || (a[6] = () => o(Fe)(!1))
}, [
o(t).style.chart.title.text ? (S(), K("div", {
key: 0,
ref_key: "chartTitle",
ref: Te,
style: Y(`width:100%;background:${o(t).style.chart.backgroundColor};`)
}, [
(S(), E(la, {
key: `title_${o(fe)}`,
config: {
title: {
cy: "xy-canvas-title",
...o(t).style.chart.title
},
subtitle: {
cy: "xy-canvas-subtitle",
...o(t).style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 4)) : _("", !0),
o(t).userOptions.show && o(me) && (o(Ee) || o(be)) ? (S(), E(sa, {
ref: "details",
key: `user_option_${o(Me)}`,
backgroundColor: o(t).style.chart.backgroundColor,
color: o(t).style.chart.color,
isPrinting: o(De),
isImaging: o(_e),
uid: o(he),
hasTooltip: o(t).userOptions.buttons.tooltip && o(t).style.chart.tooltip.show,
hasPdf: o(t).userOptions.buttons.pdf,
hasImg: o(t).userOptions.buttons.img,
hasXls: o(t).userOptions.buttons.csv,
hasLabel: o(t).userOptions.buttons.labels,
hasStack: Se.dataset.length > 1 && o(t).userOptions.buttons.stack,
hasFullscreen: o(t).userOptions.buttons.fullscreen,
hasTable: o(s).end - o(s).start < 200 && o(t).userOptions.buttons.table,
isFullscreen: o(re),
isTooltip: o(n).showTooltip,
isStacked: o(n).stacked,
titles: { ...o(t).userOptions.buttonTitles },
chartElement: o(Z),
position: o(t).userOptions.position,
hasAnnotator: o(t).userOptions.buttons.annotator,
isAnnotation: o(ce),
onToggleFullscreen: ht,
onGeneratePdf: o(He),
onGenerateCsv: qe,
onGenerateImage: o(Ue),
onToggleTable: Je,
onToggleLabels: Ke,
onToggleStack: Qe,
onToggleTooltip: et,
onToggleAnnotator: ke,
style: Y({
visibility: o(Ee) ? o(be) ? "visible" : "hidden" : "visible"
})
}, Ft({ _: 2 }, [
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: x(() => [
k(e.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: x(() => [
k(e.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: x(() => [
k(e.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: x(() => [
k(e.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: x(() => [
k(e.$slots, "optionTable", {}, void 0, !0)
]),
key: "4"
} : void 0,
e.$slots.optionLabels ? {
name: "optionLabels",
fn: x(() => [
k(e.$slots, "optionLabels", {}, void 0, !0)
]),
key: "5"
} : void 0,
e.$slots.optionStack ? {
name: "optionStack",
fn: x(() => [
k(e.$slots, "optionStack", {}, void 0, !0)
]),
key: "6"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: x(({ toggleFullscreen: r, isFullscreen: v }) => [
k(e.$slots, "optionFullscreen", B(V({ toggleFullscreen: r, isFullscreen: v })), void 0, !0)
]),
key: "7"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: x(({ toggleAnnotator: r, isAnnotator: v }) => [
k(e.$slots, "optionAnnotator", B(V({ toggleAnnotator: r, isAnnotator: v })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasLabel", "hasStack", "hasFullscreen", "hasTable", "isFullscreen", "isTooltip", "isStacked", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : _("", !0),
Q("div", {
class: "vue-ui-xy-canvas",
style: Y(`position: relative; aspect-ratio: ${o(Ae)}`),
ref_key: "container",
ref: G
}, [
o(me) ? (S(), K("canvas", {
key: 0,
ref_key: "canvas",
ref: M,
style: { width: "100%", height: "100%" },
onMousemove: a[0] || (a[0] = (r) => St(r)),
onMouseleave: $t
}, null, 544)) : (S(), E(ia, {
key: 1,
config: {
type: "line",
style: {
backgroundColor: o(t).style.chart.backgroundColor,
line: {
axis: {
color: "#CCCCCC"
},
path: {
color: "#CCCCCC",
strokeWidth: 0.5
}
}
}
}
}, null, 8, ["config"])),
Et(ta, {
show: o(n).showTooltip && o(le),
backgroundColor: o(t).style.chart.tooltip.backgroundColor,
color: o(t).style.chart.tooltip.color,
fontSize: o(t).style.chart.tooltip.fontSize,
borderRadius: o(t).style.chart.tooltip.borderRadius,
borderColor: o(t).style.chart.tooltip.borderColor,
borderWidth: o(t).style.chart.tooltip.borderWidth,
position: o(t).style.chart.tooltip.position,
offsetY: o(t).style.chart.tooltip.offsetY,
parent: o(M),
content: o(oe),
isFullscreen: o(re),
backgroundOpacity: o(t).style.chart.tooltip.backgroundOpacity,
isCustom: o(ot)(o(t).style.chart.tooltip.customFormat)
}, {
"tooltip-before": x(() => [
k(e.$slots, "tooltip-before", B(V({ ...o($e) })), void 0, !0)
]),
"tooltip-after": x(() => [
k(e.$slots, "tooltip-after", B(V({ ...o($e) })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "position", "offsetY", "parent", "content", "isFullscreen", "backgroundOpacity", "isCustom"])
], 4),
Q("div", {
ref_key: "chartSlicer",
ref: Pe,
style: Y(`width:100%;background:${o(t).style.chart.backgroundColor}`),
"data-html2canvas-ignore": ""
}, [
o(t).style.chart.zoom.show && o(I) > 1 ? (S(), E(oa, {
ref_key: "slicerComponent",
ref: X,
key: `slicer_${o(Ie)}`,
background: o(t).style.chart.zoom.color,
borderColor: o(t).style.chart.backgroundColor,
fontSize: o(t).style.chart.zoom.fontSize,
useResetSlot: o(t).style.chart.zoom.useResetSlot,
labelLeft: o(t).style.chart.grid.y.timeLabels.values[o(s).start] ? o(t).style.chart.grid.y.timeLabels.values[o(s).start] : "",
labelRight: o(t).style.chart.grid.y.timeLabels.values[o(s).end - 1] ? o(t).style.chart.grid.y.timeLabels.values[o(s).end - 1] : "",
textColor: o(t).style.chart.color,
inputColor: o(t).style.chart.zoom.color,
selectColor: o(t).style.chart.zoom.highlightColor,
max: o(I),
min: 0,
valueStart: o(s).start,
valueEnd: o(s).end,
start: o(s).start,
"onUpdate:start": a[1] || (a[1] = (r) => o(s).start = r),
end: o(s).end,
"onUpdate:end": a[2] || (a[2] = (r) => o(s).end = r),
refreshStartPoint: o(t).style.chart.zoom.startIndex !== null ? o(t).style.chart.zoom.startIndex : 0,
refreshEndPoint: o(t).style.chart.zoom.endIndex !== null ? o(t).style.chart.zoom.endIndex + 1 : o(I),
onReset: Ye
}, {
"reset-action": x(({ reset: r }) => [
k(e.$slots, "reset-action", B(V({ reset: r })), void 0, !0)
]),
_: 3
}, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint"])) : _("", !0)
], 4),
Q("div", {
ref_key: "chartLegend",
ref: Oe
}, [
o(t).style.chart.legend.show && o(me) ? (S(), E(aa, {
legendSet: o(Ge),
config: o(It),
key: `legend_${o(pe)}`,
onClickMarker: a[3] || (a[3] = ({ i: r }) => Ze(r))
}, {
item: x(({ legend: r, index: v }) => [
Q("div", {
onClick: (d) => r.segregate(),
style: Y(`opacity:${o($).includes(v) ? 0.5 : 1}`)
}, at(r.name), 13, ya)
]),
_: 1
}, 8, ["legendSet", "config"])) : k(e.$slots, "legend", {
key: 1,
legend: o(Ge)
}, void 0, !0)
], 512),
e.$slots.watermark ? (S(), K("div", fa, [
k(e.$slots, "watermark", B(V({ isPrinting: o(De) || o(_e) })), void 0, !0)
])) : _("", !0),
e.$slots.source ? (S(), K("div", {
key: 3,
ref_key: "source",
ref: Re,
dir: "auto"
}, [
k(e.$slots, "source", {}, void 0, !0)
], 512)) : _("", !0),
o(s).end - o(s).start < 200 ? (S(), E(na, {
key: 4,
hideDetails: "",
config: {
open: o(n).showTable,
maxHeight: 1e4,
body: {
backgroundColor: o(t).style.chart.backgroundColor,
color: o(t).style.chart.color
},
head: {
backgroundColor: o(t).style.chart.backgroundColor,
color: o(t).style.chart.color
}
}
}, {
content: x(() => [
(S(), E(ua, {
key: `table_${o(ge)}`,
colNames: o(ie).colNames,
head: o(ie).head,
body: o(ie).body,
config: o(ie).config,
title: `${o(t).style.chart.title.text}${o(t).style.chart.title.subtitle.text ? ` : ${o(t).style.chart.title.subtitle.text}` : ""}`,
onClose: a[4] || (a[4] = (r) => o(n).showTable = !1)
}, {
th: x(({ th: r }) => [
Q("div", { innerHTML: r }, null, 8, ga)
]),
td: x(({ td: r }) => [
Nt(at(r), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : _("", !0),
o(t).userOptions.buttons.annotator && o(y).length ? (S(), E(ca, {
key: 5,
parent: o(Z),
backgroundColor: o(t).style.chart.backgroundColor,
color: o(t).style.chart.color,
active: o(ce),
onClose: ke
}, null, 8, ["parent", "backgroundColor", "color", "active"])) : _("", !0)
], 46, ha));
}
}, Ra = /* @__PURE__ */ da(pa, [["__scopeId", "data-v-6d4d2ea8"]]);
export {
Ra as default
};