vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,577 lines • 68.9 kB
JavaScript
import { ref as L, computed as B, watch as Ne, onMounted as wt, onBeforeUnmount as At, nextTick as Ie, createElementBlock as l, openBlock as a, normalizeStyle as M, normalizeClass as ve, createBlock as Ee, createCommentVNode as f, createVNode as de, unref as g, createSlots as _t, withCtx as X, renderSlot as N, normalizeProps as ae, guardReactiveProps as le, toDisplayString as O, createElementVNode as _, Fragment as m, renderList as $, mergeProps as Fe } from "vue";
import { u as zt, c as Lt, t as $t, p as q, a as Ct, C as nt, b as It, J as Et, e as Pt, d as Ue, m as Ot, D as it, X as Tt, j as Rt, k as Be, n as ke, i as Z, f as D, S as ut, v as Y, x as Pe, y as De } from "./index-BsIlHNy8.js";
import { t as Mt, u as Nt } from "./useResponsive-vZgZwV-S.js";
import Oe from "./BaseIcon-CCOXJ43P.js";
import { _ as Ft } from "./Tooltip-D42o7dze.js";
import { u as Ut, U as Bt } from "./usePrinter-D5N6w7Rg.js";
import { S as Dt } from "./Slicer-m9Y8-Ul1.js";
import Vt from "./vue-ui-skeleton-DApuwwZF.js";
import { u as rt } from "./useNestedProp-CyyJlG5K.js";
import { _ as qt } from "./PackageVersion-CZ0-Jk6A.js";
import { P as Wt } from "./PenAndPaper-BFkX-O1c.js";
import { u as Ht } from "./useChartAccessibility-BWojgys7.js";
import { _ as jt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const A = {
LINE: "LINE",
BAR: "BAR",
DONUT: "DONUT"
}, Gt = ["SERIE", "SERIES", "DATA", "VALUE", "VALUES", "NUM"];
function Xt({ dataset: c, barLineSwitch: C = 6 }) {
let y = null, F = null, T = 0;
if ((typeof c == "number" || typeof c == "string") && console.warn(`The provided dataset (${c}) is not sufficient to build a chart`), be(c) && (J(c) && (c.length < C ? y = A.BAR : y = A.LINE, F = c, T = c.length), Te(c))) {
if (!Yt(c))
return console.warn("The objects in the dataset array have a different data structure. Either keys or value types are different."), !1;
const ne = Object.keys(c[0]), ce = Object.values(c[0]);
if (!ne.some((E) => Jt(E)))
return console.warn("The data type of the dataset objects in the array must contain one of the following keys: DATA, SERIES, VALUE, VALUES, NUM. Casing is not important."), !1;
st(ce, (E) => typeof E == "number") && (y = A.DONUT, F = c), st(ce, (E) => Array.isArray(E) && J(E)) && (vt(c) > C ? y = A.LINE : y = A.BAR, T = vt(c), F = c.map((E) => ({
...E,
data: Qt(E, (j) => J(j))
}))), c = c.map((E) => dt(E)), F = F.map((E) => dt(E));
}
return be(c) && [...new Set(c.flatMap((ne) => Array.isArray(ne)))][0], {
dataset: c,
type: y,
usableDataset: F,
maxSeriesLength: T
};
}
function ct(c) {
return !c || be(c) && !c.length;
}
function be(c) {
return Array.isArray(c);
}
function J(c) {
if (!be(c) || ct(c)) return !1;
const C = c.map((y) => Number(y));
return ![...new Set(C.flatMap((y) => typeof y == "number" && !isNaN(y)))].includes(!1);
}
function Te(c) {
return !be(c) || ct(c) || !![...new Set(c.flatMap((y) => typeof y == "object" && !Array.isArray(y)))].includes(!1) ? !1 : !c.map((y) => Object.keys(y).length > 0).includes(!1);
}
function Zt(c, C) {
const y = Object.keys(c).sort(), F = Object.keys(C).sort();
if (y.length !== F.length)
return !1;
for (let T = 0; T < y.length; T += 1) {
const H = y[T], oe = F[T];
if (H !== oe || typeof c[H] != typeof C[oe])
return !1;
}
return !0;
}
function Yt(c) {
if (c.length <= 1) return !0;
for (let C = 0; C < c.length; C += 1)
for (let y = C + 1; y < c.length; y += 1)
if (!Zt(c[C], c[y]))
return !1;
return !0;
}
function Jt(c) {
return Gt.includes(c.toUpperCase());
}
function st(c, C) {
let y = [];
for (let F = 0; F < c.length; F += 1)
y.push(C(c[F]));
return y.includes(!0);
}
function vt(c) {
return Math.max(...[...c].flatMap((C) => Object.values(C).filter((y) => J(y)).map((y) => y.length)));
}
function Qt(c, C) {
return Object.values(c).filter((y) => C(y))[0];
}
function dt(c) {
const C = {};
for (let y in c)
c.hasOwnProperty(y) && (C[y.toUpperCase()] = c[y]);
return C;
}
const Kt = ["id"], ea = ["xmlns", "viewBox"], ta = ["x", "y", "width", "height"], aa = ["x", "y", "width", "height"], la = ["width", "height"], oa = ["id"], na = ["id"], ia = ["id"], ua = ["flood-color"], ra = {
key: 0,
class: "donut-label-connectors"
}, sa = ["d", "stroke", "stroke-width", "filter"], va = ["cx", "cy", "r", "fill", "filter"], da = { class: "donut" }, ca = ["d", "fill", "stroke", "stroke-width", "filter"], ha = ["d", "onMouseenter", "onClick"], fa = {
key: 1,
class: "donut-labels quick-animation"
}, ga = ["cx", "cy", "fill", "stroke", "filter"], ma = ["text-anchor", "x", "y", "fill", "font-size", "filter"], pa = ["text-anchor", "x", "y", "fill", "font-size", "filter"], ya = {
key: 2,
class: "donut-hollow quick-animation"
}, xa = ["x", "y", "font-size", "fill"], ka = ["x", "y", "font-size", "fill"], ba = {
key: 0,
class: "line-grid"
}, Sa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], wa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Aa = {
key: 1,
class: "line-axis"
}, _a = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], za = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], La = {
key: 2,
class: "yLabels"
}, $a = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ca = ["x", "y", "font-size", "fill"], Ia = {
key: 3,
class: "periodLabels"
}, Ea = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Pa = ["font-size", "text-anchor", "fill", "transform"], Oa = { class: "plots" }, Ta = { class: "line-plot-series" }, Ra = ["d", "stroke", "stroke-width"], Ma = ["d", "stroke", "stroke-width"], Na = ["d", "stroke", "stroke-width"], Fa = ["d", "stroke", "stroke-width"], Ua = ["cx", "cy", "fill", "stroke"], Ba = {
key: 4,
class: "dataLabels"
}, Da = ["font-size", "fill", "x", "y"], Va = { class: "tooltip-traps" }, qa = ["x", "y", "height", "width", "fill", "onMouseenter", "onClick"], Wa = {
key: 0,
class: "line-grid"
}, Ha = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ja = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ga = {
key: 1,
class: "line-axis"
}, Xa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Za = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ya = {
key: 2,
class: "yLabels"
}, Ja = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Qa = ["x", "y", "font-size", "fill"], Ka = {
key: 3,
class: "periodLabels"
}, el = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], tl = ["font-size", "text-anchor", "transform", "fill"], al = { class: "plots" }, ll = ["x", "width", "height", "y", "fill", "stroke", "stroke-width"], ol = ["to"], nl = ["from", "to"], il = {
key: 4,
class: "dataLabels"
}, ul = ["x", "y", "font-size", "fill"], rl = { class: "tooltip-traps" }, sl = ["x", "y", "height", "width", "fill", "onMouseenter", "onClick"], vl = {
key: 6,
class: "axis-labels"
}, dl = { key: 0 }, cl = ["font-size", "fill", "x", "y"], hl = { key: 1 }, fl = ["font-size", "fill", "x", "y"], gl = { key: 2 }, ml = ["font-size", "fill", "transform"], pl = { key: 3 }, yl = ["font-size", "fill", "transform"], xl = {
key: 6,
class: "vue-data-ui-watermark"
}, kl = ["onClick"], bl = ["onClick"], Sl = ["onClick"], wl = {
key: 1,
class: "vue-ui-quick-chart-not-processable"
}, Al = {
__name: "vue-ui-quick-chart",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: [Array, Object, String, Number],
default() {
return null;
}
}
},
emits: ["selectDatapoint", "selectLegend"],
setup(c, { expose: C, emit: y }) {
const { vue_ui_quick_chart: F } = zt(), T = c, H = L(null), oe = L(null), ne = L(null), ce = L(null), E = L(Lt()), j = L(!1), he = L(null), Q = L(""), W = L(null), Ve = L(null), qe = L(null), w = L([]), We = L(0), Se = L(0), e = B({
get: () => Xe(),
set: (o) => o
}), { svgRef: He } = Ht({ config: { text: e.value.title } }), ht = B(() => e.value.showUserOptionsOnChartHover), je = B(() => e.value.keepUserOptionsStateOnChartLeave), we = L(!e.value.showUserOptionsOnChartHover);
function Ge(o = !1) {
ht.value && (we.value = o);
}
function Xe() {
const o = rt({
userConfig: T.config,
defaultConfig: F
});
let s = {};
return o.theme ? s = {
...rt({
userConfig: Ct.vue_ui_quick_chart[o.theme] || T.config,
defaultConfig: o
}),
customPalette: $t[o.theme] || q
} : s = o, T.config && nt(T.config, "zoomStartIndex") ? s.zoomStartIndex = T.config.zoomStartIndex : s.zoomStartIndex = null, T.config && nt(T.config, "zoomEndIndex") ? s.zoomEndIndex = T.config.zoomEndIndex : s.zoomEndIndex = null, s;
}
Ne(() => T.config, (o) => {
e.value = Xe(), b.value.width = e.value.width, b.value.height = e.value.height, we.value = !e.value.showUserOptionsOnChartHover, Je(), me.value.showTooltip = e.value.showTooltip;
}, { deep: !0 }), Ne(() => T.dataset, (o) => {
x.value = ge.value, p.value.start = 0, p.value.end = x.value.maxSeriesLength, Se.value += 1;
}, { deep: !0 });
const fe = B(() => It(e.value.customPalette)), ie = y, ge = B(() => {
const o = Xt({ dataset: Et(T.dataset, [
"serie",
"series",
"data",
"value",
"values",
"num"
]), barLineSwitch: e.value.chartIsBarUnderDatasetLength });
return o || console.error("VueUiQuickChart : Dataset is not processable"), o;
}), x = L(ge.value), ft = B(() => !!x.value), z = B(() => x.value ? x.value.type : null);
Ne(() => z.value, (o) => {
o || Pt({
componentName: "VueUiQuickChart",
type: "dataset"
});
}, { immediate: !0 });
const { isPrinting: Ae, isImaging: _e, generatePdf: Ze, generateImage: Ye } = Ut({
elementId: `${z.value}_${E.value}`,
fileName: e.value.title || z.value
}), gt = B(() => e.value.showUserOptions && !e.value.title), b = L({
width: e.value.width,
height: e.value.height
}), me = L({
showTooltip: e.value.showTooltip
}), ze = L(null);
wt(() => {
Je();
});
function Je() {
if (e.value.responsive) {
const o = Mt(() => {
const { width: s, height: t } = Nt({
chart: H.value,
title: e.value.title ? oe.value : null,
legend: e.value.showLegend ? ne.value : null,
slicer: [A.BAR, A.LINE].includes(z.value) && e.value.zoomXy && x.value.maxSeriesLength > 1 ? ce.value : null,
source: Ve.value,
noTitle: qe.value
});
requestAnimationFrame(() => {
b.value.width = s, b.value.height = t;
});
});
ze.value = new ResizeObserver(o), ze.value.observe(H.value.parentNode);
}
lt();
}
At(() => {
ze.value && ze.value.disconnect();
});
const mt = B(() => {
switch (z.value) {
case A.LINE:
return `0 0 ${b.value.width <= 0 ? 10 : b.value.width} ${b.value.height <= 0 ? 10 : b.value.height}`;
case A.BAR:
return `0 0 ${b.value.width <= 0 ? 10 : b.value.width} ${b.value.height <= 0 ? 10 : b.value.height}`;
case A.DONUT:
return `0 0 ${b.value.width <= 0 ? 10 : b.value.width} ${b.value.height <= 0 ? 10 : b.value.height}`;
default:
return `0 0 ${b.value.width <= 0 ? 10 : b.value.width} ${b.value.height <= 0 ? 10 : b.value.height}`;
}
});
function Qe(o) {
return [...o].map((s) => s.value).reduce((s, t) => s + t, 0);
}
function pe(o) {
return e.value.blurOnHover && ![null, void 0].includes(W.value) && W.value !== o ? `url(#blur_${E.value})` : "";
}
function Ke(o, s) {
w.value.includes(o) ? w.value = w.value.filter((t) => t !== o) : w.value.length < s && w.value.push(o);
}
const et = L(null), tt = L(null), Le = L(!1);
function pt(o, s) {
Le.value = !0;
let t = o.value;
const u = ge.value.dataset.find((r, h) => o.id === `donut_${h}`).VALUE;
if (w.value.includes(o.id)) {
let r = function() {
t > u ? (Le.value = !1, cancelAnimationFrame(tt.value), x.value = {
...x.value,
dataset: x.value.dataset.map((h, R) => o.id === `donut_${R}` ? {
...h,
value: u,
VALUE: u
} : h)
}) : (t += u * 0.025, x.value = {
...x.value,
dataset: x.value.dataset.map((h, R) => o.id === `donut_${R}` ? {
...h,
value: t,
VALUE: t
} : h)
}, tt.value = requestAnimationFrame(r));
};
w.value = w.value.filter((h) => h !== o.id), r();
} else if (s.length > 1) {
let r = function() {
t < u / 100 ? (Le.value = !1, cancelAnimationFrame(et.value), w.value.push(o.id), x.value = {
...x.value,
dataset: x.value.dataset.map((h, R) => o.id === `donut_${R}` ? {
...h,
value: 0,
VALUE: 0
} : h)
}) : (t /= 1.1, x.value = {
...x.value,
dataset: x.value.dataset.map((h, R) => o.id === `donut_${R}` ? {
...h,
value: t,
VALUE: t
} : h)
}, et.value = requestAnimationFrame(r));
};
r();
}
}
const G = L(null);
function yt(o) {
G.value = o;
}
const at = B(() => e.value.donutThicknessRatio < 0.15 ? 0.15 : e.value.donutThicknessRatio > 0.4 ? 0.4 : e.value.donutThicknessRatio), I = B(() => {
if (z.value !== A.DONUT) return null;
const o = x.value.dataset.map((n, i) => ({
...n,
value: n.VALUE || n.DATA || n.SERIE || n.VALUES || n.NUM || 0,
name: n.NAME || n.DESCRIPTION || n.TITLE || n.LABEL || `Serie ${i}`,
id: `donut_${i}`
})).map((n, i) => ({
...n,
color: n.COLOR ? Ue(n.COLOR) : fe.value[i + e.value.paletteStartIndex] || q[i + e.value.paletteStartIndex] || q[(i + e.value.paletteStartIndex) % q.length],
immutableValue: n.value
}));
function s(n, i) {
return D({
v: isNaN(n.value / Qe(i)) ? 0 : n.value / Qe(i) * 100,
s: "%",
r: e.value.dataLabelRoundingPercentage
});
}
function t(n) {
return n.proportion * 100 > e.value.donutHideLabelUnderPercentage;
}
function u(n, i) {
const S = ge.value.dataset.find((P, U) => `donut_${U}` === n).VALUE;
return Math.abs(String(Number(S.toFixed(0))).length - String(Number(i.toFixed(0))).length);
}
function r({ datapoint: n, seriesIndex: i }) {
he.value = { datapoint: n, seriesIndex: i, config: e.value, dataset: o }, W.value = n.id;
const S = e.value.tooltipCustomFormat;
if (Pe(S) && De(() => S({
datapoint: n,
seriesIndex: i,
series: o,
config: e.value
})))
Q.value = S({
datapoint: n,
seriesIndex: i,
series: o,
config: e.value
});
else {
let k = "";
k += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${n.name}</div>`, k += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${n.color}"/></svg>`, k += `<b>${Z(
e.value.formatter,
n.value,
D({
p: e.value.valuePrefix,
v: n.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: n, seriesIndex: i }
)}</b>`, k += `<span>(${D({ v: n.proportion * 100, s: "%", r: e.value.dataLabelRoundingPercentage })})</span></div>`, Q.value = `<div>${k}</div>`;
}
j.value = !0;
}
function h() {
j.value = !1, W.value = null, G.value = null;
}
const R = {
centerX: b.value.width / 2,
centerY: b.value.height / 2
}, V = o.filter((n) => !w.value.includes(n.id)).map((n) => n.value || 0).reduce((n, i) => n + i, 0), re = o.map((n, i) => ({
...n,
proportion: (n.value || 0) / V,
value: n.value || 0,
absoluteValue: ge.value.dataset.find((S, k) => `donut_${k}` === n.id).VALUE
})), K = b.value.width / 2, se = b.value.height / 2, ee = b.value.height * e.value.donutRadiusRatio;
return {
dataset: re.filter((n) => !w.value.includes(n.id)),
legend: re,
drawingArea: R,
displayArcPercentage: s,
isArcBigEnough: t,
useTooltip: r,
killTooltip: h,
getSpaces: u,
total: V,
cx: K,
cy: se,
radius: ee,
chart: Ot(
{ series: o.filter((n) => !w.value.includes(n.id)) },
K,
se,
ee,
ee,
1.99999,
2,
1,
360,
105.25,
b.value.height * at.value
)
};
}), p = L({
start: 0,
end: x.value.maxSeriesLength
});
function xt() {
lt();
}
const ue = L(null);
async function lt() {
(e.value.zoomStartIndex !== null || e.value.zoomEndIndex !== null) && ue.value ? (e.value.zoomStartIndex !== null && (await Ie(), await Ie(), ue.value && ue.value.setStartValue(e.value.zoomStartIndex)), e.value.zoomEndIndex !== null && (await Ie(), await Ie(), ue.value && ue.value.setEndValue(kt(e.value.zoomEndIndex + 1)))) : (p.value = {
start: 0,
end: x.value.maxSeriesLength
}, Se.value += 1);
}
function kt(o) {
const s = x.value.maxSeriesLength;
return o > s ? s : o < 0 || e.value.zoomStartIndex !== null && o < e.value.zoomStartIndex ? e.value.zoomStartIndex !== null ? e.value.zoomStartIndex + 1 : 1 : o;
}
const bt = B(() => {
if (!e.value.zoomMinimap.show || z.value === A.DONUT) return [];
let o = [];
J(x.value.dataset) && (o = x.value.dataset), Te(x.value.dataset) && (o = x.value.dataset.map((r, h) => ({
values: r.VALUE || r.DATA || r.SERIE || r.SERIES || r.VALUES || r.NUM || 0,
id: z.value === A.LINE ? `line_${h}` : `bar_${h}`
})).filter((r) => !w.value.includes(r.id)));
const s = J(o) ? o.length : Math.max(...o.map((r) => r.values.length));
let t = [];
if (J(o))
t = o;
else
for (let r = 0; r < s; r += 1)
t.push(o.map((h) => h.values[r] || 0).reduce((h, R) => (h || 0) + (R || 0), 0));
const u = Math.min(...t);
return t.map((r) => r + (u < 0 ? Math.abs(u) : 0));
}), d = B(() => {
if (z.value !== A.LINE) return null;
const o = {
height: b.value.height,
width: b.value.width
}, s = {
left: e.value.xyPaddingLeft,
top: e.value.xyPaddingTop,
right: o.width - e.value.xyPaddingRight,
bottom: o.height - e.value.xyPaddingBottom,
width: o.width - e.value.xyPaddingLeft - e.value.xyPaddingRight,
height: o.height - e.value.xyPaddingTop - e.value.xyPaddingBottom
};
let t = [];
J(x.value.dataset) && (t = [
{
values: x.value.dataset.slice(p.value.start, p.value.end),
absoluteIndices: x.value.dataset.map((n, i) => i).slice(p.value.start, p.value.end),
name: e.value.title,
color: fe.value[e.value.paletteStartIndex] || q[e.value.paletteStartIndex],
id: "line_0"
}
]), Te(x.value.dataset) && (t = x.value.dataset.map((n, i) => ({
...n,
values: n.VALUE || n.DATA || n.SERIE || n.SERIES || n.VALUES || n.NUM || 0,
name: n.NAME || n.DESCRIPTION || n.TITLE || n.LABEL || `Serie ${i}`,
id: `line_${i}`
})).map((n, i) => ({
...n,
color: n.COLOR ? Ue(n.COLOR) : fe.value[i + e.value.paletteStartIndex] || q[i + e.value.paletteStartIndex] || q[(i + e.value.paletteStartIndex) % q.length],
values: n.values.slice(p.value.start, p.value.end),
absoluteIndices: n.values.map((S, k) => k).slice(p.value.start, p.value.end)
})));
const u = {
max: Math.max(...t.filter((n) => !w.value.includes(n.id)).flatMap((n) => n.values)),
min: Math.min(...t.filter((n) => !w.value.includes(n.id)).flatMap((n) => n.values)),
maxSeries: Math.max(...t.map((n) => n.values.length))
}, r = it(u.min < 0 ? u.min : 0, u.max < 0 ? 0 : u.max, e.value.xyScaleSegments), h = u.min < 0 ? Math.abs(u.min) : 0, R = u.max < 0 ? s.top : s.bottom - h / (r.max + h) * s.height, V = s.width / u.maxSeries, re = r.ticks.map((n) => ({
y: s.bottom - s.height * ((n + h) / (r.max + h)),
x: s.left - 8,
value: n
})), K = t.map((n, i) => ({
...n,
coordinates: n.values.map((S, k) => ({
x: s.left + V * (k + 1) - V / 2,
y: s.bottom - (S + h) / (r.max + h) * s.height,
value: S
}))
})).map((n) => {
let i = [];
return n.coordinates.forEach((S) => {
i.push(`${S.x},${S.y} `);
}), {
...n,
linePath: i.join(" ")
};
});
function se(n) {
W.value = n, G.value = n;
const i = t.map((k) => ({
...k,
value: k.values[n],
absoluteIndex: k.absoluteIndices[n]
})).filter((k) => !w.value.includes(k.id));
he.value = { datapoint: i, seriesIndex: n, config: e.value, dataset: t };
const S = e.value.tooltipCustomFormat;
if (Pe(S) && De(() => S({
datapoint: i,
seriesIndex: n,
series: t,
config: e.value
})))
Q.value = S({
datapoint: i,
seriesIndex: n,
series: t,
config: e.value
});
else {
let k = "";
e.value.xyPeriods[i[0].absoluteIndex] && (k += `<div style="border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${e.value.xyPeriods[i[0].absoluteIndex]}</div>`), i.forEach((P, U) => {
k += `
<div style="display:flex; flex-wrap: wrap; align-items:center; gap:3px;">
<svg viewBox="0 0 12 12" height="14" width="12"><circle cx="6" cy="6" r="6" stroke="none" fill="${P.color}"/></svg>
<span>${P.name}:</span>
<b>${Z(
e.value.formatter,
P.value,
D({
p: e.value.valuePrefix,
v: P.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: P, seriesIndex: U }
)}
</b>
</div>
`;
}), Q.value = k;
}
j.value = !0;
}
function ee() {
W.value = null, G.value = null, j.value = !1;
}
return {
absoluteZero: R,
dataset: K.filter((n) => !w.value.includes(n.id)),
legend: K,
drawingArea: s,
extremes: u,
slotSize: V,
yLabels: re,
useTooltip: se,
killTooltip: ee
};
}), v = B(() => {
if (z.value !== A.BAR) return null;
const o = {
height: b.value.height,
width: b.value.width
}, s = {
left: e.value.xyPaddingLeft,
top: e.value.xyPaddingTop,
right: o.width - e.value.xyPaddingRight,
bottom: o.height - e.value.xyPaddingBottom,
width: o.width - e.value.xyPaddingLeft - e.value.xyPaddingRight,
height: o.height - e.value.xyPaddingTop - e.value.xyPaddingBottom
};
let t = [];
J(x.value.dataset) && (t = [
{
values: x.value.dataset.slice(p.value.start, p.value.end),
absoluteIndices: x.value.dataset.map((i, S) => S).slice(p.value.start, p.value.end),
name: e.value.title,
color: fe.value[e.value.paletteStartIndex] || q[e.value.paletteStartIndex],
id: "bar_0"
}
]), Te(x.value.dataset) && (t = x.value.dataset.map((i, S) => ({
...i,
values: i.VALUE || i.DATA || i.SERIE || i.SERIES || i.VALUES || i.NUM || 0,
name: i.NAME || i.DESCRIPTION || i.TITLE || i.LABEL || `Serie ${S}`,
id: `bar_${S}`
})).map((i, S) => ({
...i,
color: i.COLOR ? Ue(i.COLOR) : fe.value[S + e.value.paletteStartIndex] || q[S + e.value.paletteStartIndex] || q[(S + e.value.paletteStartIndex) % q.length],
values: i.values.slice(p.value.start, p.value.end),
absoluteIndices: i.values.map((k, P) => P).slice(p.value.start, p.value.end)
})));
const u = {
max: Math.max(...t.filter((i) => !w.value.includes(i.id)).flatMap((i) => i.values)) < 0 ? 0 : Math.max(...t.filter((i) => !w.value.includes(i.id)).flatMap((i) => i.values)),
min: Math.min(...t.filter((i) => !w.value.includes(i.id)).flatMap((i) => i.values)),
maxSeries: Math.max(...t.filter((i) => !w.value.includes(i.id)).map((i) => i.values.length))
}, r = it(u.min < 0 ? u.min : 0, u.max, e.value.xyScaleSegments), h = r.min < 0 ? Math.abs(r.min) : 0, R = s.bottom - h / (r.max + h) * s.height, V = s.width / u.maxSeries, re = r.ticks.map((i) => ({
y: s.bottom - s.height * ((i + h) / (r.max + h)),
x: s.left - 8,
value: i
})), K = t.map((i, S) => ({
...i,
coordinates: i.values.map((k, P) => {
const U = (k + h) / (u.max + h) * s.height, ye = Math.abs(k) / Math.abs(u.min) * (s.height - R), Me = h / (u.max + h) * s.height, xe = V / t.filter((te) => !w.value.includes(te.id)).length - e.value.barGap / t.filter((te) => !w.value.includes(te.id)).length;
return {
x: s.left + V * P + xe * S + e.value.barGap / 2,
y: k > 0 ? s.bottom - U : R,
height: k > 0 ? U - Me : ye,
value: k,
width: xe
};
})
})), se = t.filter((i) => !w.value.includes(i.id)).map((i, S) => ({
...i,
coordinates: i.values.map((k, P) => {
const U = (k + h) / (u.max + h) * s.height, ye = Math.abs(k) / (u.max + h) * s.height, Me = h / (u.max + h) * s.height, xe = V / t.filter((te) => !w.value.includes(te.id)).length - e.value.barGap / t.filter((te) => !w.value.includes(te.id)).length;
return {
x: s.left + V * P + xe * S + e.value.barGap / 2,
y: k > 0 ? s.bottom - U : R,
height: k > 0 ? U - Me : ye,
value: k,
width: xe
};
})
}));
function ee(i) {
W.value = i, G.value = i;
const S = t.map((P) => ({
...P,
value: P.values[i],
absoluteIndex: P.absoluteIndices[i]
})).filter((P) => !w.value.includes(P.id));
he.value = { datapoint: S, seriesIndex: i, config: e.value, dataset: t };
const k = e.value.tooltipCustomFormat;
if (Pe(k) && De(() => k({
datapoint: S,
seriesIndex: i,
series: t,
config: e.value
})))
Q.value = k({
point: S,
seriesIndex: i,
series: t,
config: e.value
});
else {
let P = "";
e.value.xyPeriods[S[0].absoluteIndex] && (P += `<div style="border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${e.value.xyPeriods[S[0].absoluteIndex]}</div>`), S.forEach((U, ye) => {
P += `
<div style="display:flex; flex-wrap: wrap; align-items:center; gap:3px;">
<svg viewBox="0 0 12 12" height="14" width="12"><rect x=0 y="0" width="12" height="12" rx="1" stroke="none" fill="${U.color}"/></svg>
<span>${U.name}:</span>
<b>${Z(
e.value.formatter,
U.value,
D({
p: e.value.valuePrefix,
v: U.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: U, seriesIndex: ye }
)}
</b>
</div>
`;
}), Q.value = P;
}
j.value = !0;
}
function n() {
j.value = !1, W.value = null, G.value = null;
}
return {
absoluteZero: R,
dataset: se.filter((i) => !w.value.includes(i.id)),
legend: K,
drawingArea: s,
extremes: u,
slotSize: V,
yLabels: re,
useTooltip: ee,
killTooltip: n
};
}), $e = L(!1);
function St(o) {
$e.value = o, We.value += 1;
}
function ot() {
me.value.showTooltip = !me.value.showTooltip;
}
const Ce = L(!1);
function Re() {
Ce.value = !Ce.value;
}
return C({
generatePdf: Ze,
generateImage: Ye,
toggleTooltip: ot,
toggleAnnotator: Re
}), (o, s) => ft.value ? (a(), l("div", {
key: 0,
id: `${z.value}_${E.value}`,
ref_key: "quickChart",
ref: H,
class: ve({ "vue-ui-quick-chart": !0, "vue-data-ui-wrapper-fullscreen": $e.value }),
style: M(`background:${e.value.backgroundColor};color:${e.value.color};font-family:${e.value.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: s[5] || (s[5] = () => Ge(!0)),
onMouseleave: s[6] || (s[6] = () => Ge(!1))
}, [
e.value.userOptionsButtons.annotator ? (a(), Ee(Wt, {
key: 0,
svgRef: g(He),
backgroundColor: e.value.backgroundColor,
color: e.value.color,
active: Ce.value,
onClose: Re
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
gt.value ? (a(), l("div", {
key: 1,
ref_key: "noTitle",
ref: qe,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : f("", !0),
e.value.showUserOptions && (je.value || we.value) ? (a(), Ee(Bt, {
ref: "details",
key: `user_option_${We.value}`,
backgroundColor: e.value.backgroundColor,
color: e.value.color,
isPrinting: g(Ae),
isImaging: g(_e),
uid: E.value,
hasTooltip: e.value.userOptionsButtons.tooltip && e.value.showTooltip,
hasPdf: e.value.userOptionsButtons.pdf,
hasImg: e.value.userOptionsButtons.img,
hasFullscreen: e.value.userOptionsButtons.fullscreen,
hasXls: !1,
isTooltip: me.value.showTooltip,
isFullscreen: $e.value,
titles: { ...e.value.userOptionsButtonTitles },
chartElement: H.value,
position: e.value.userOptionsPosition,
hasAnnotator: e.value.userOptionsButtons.annotator,
isAnnotation: Ce.value,
onToggleFullscreen: St,
onGeneratePdf: g(Ze),
onGenerateImage: g(Ye),
onToggleTooltip: ot,
onToggleAnnotator: Re,
style: M({
visibility: je.value ? we.value ? "visible" : "hidden" : "visible"
})
}, _t({ _: 2 }, [
o.$slots.menuIcon ? {
name: "menuIcon",
fn: X(({ isOpen: t, color: u }) => [
N(o.$slots, "menuIcon", ae(le({ isOpen: t, color: u })), void 0, !0)
]),
key: "0"
} : void 0,
o.$slots.optionTooltip ? {
name: "optionTooltip",
fn: X(() => [
N(o.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
o.$slots.optionPdf ? {
name: "optionPdf",
fn: X(() => [
N(o.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
o.$slots.optionImg ? {
name: "optionImg",
fn: X(() => [
N(o.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
o.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: X(({ toggleFullscreen: t, isFullscreen: u }) => [
N(o.$slots, "optionFullscreen", ae(le({ toggleFullscreen: t, isFullscreen: u })), void 0, !0)
]),
key: "4"
} : void 0,
o.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: X(({ toggleAnnotator: t, isAnnotator: u }) => [
N(o.$slots, "optionAnnotator", ae(le({ toggleAnnotator: t, isAnnotator: u })), void 0, !0)
]),
key: "5"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
e.value.title ? (a(), l("div", {
key: 3,
ref_key: "quickChartTitle",
ref: oe,
class: "vue-ui-quick-chart-title",
style: M(`background:transparent;color:${e.value.color};font-size:${e.value.titleFontSize}px;font-weight:${e.value.titleBold ? "bold" : "normal"};text-align:${e.value.titleTextAlign}`)
}, O(e.value.title), 5)) : f("", !0),
z.value ? (a(), l("svg", {
key: 4,
ref_key: "svgRef",
ref: He,
xmlns: g(Tt),
viewBox: mt.value,
style: M(`max-width:100%;overflow:visible;background:transparent;color:${e.value.color}`)
}, [
de(qt),
o.$slots["chart-background"] && z.value === A.BAR ? (a(), l("foreignObject", {
key: 0,
x: v.value.drawingArea.left,
y: v.value.drawingArea.top,
width: v.value.drawingArea.width,
height: v.value.drawingArea.height,
style: {
pointerEvents: "none"
}
}, [
N(o.$slots, "chart-background", {}, void 0, !0)
], 8, ta)) : f("", !0),
o.$slots["chart-background"] && z.value === A.LINE ? (a(), l("foreignObject", {
key: 1,
x: d.value.drawingArea.left,
y: d.value.drawingArea.top,
width: d.value.drawingArea.width,
height: d.value.drawingArea.height,
style: {
pointerEvents: "none"
}
}, [
N(o.$slots, "chart-background", {}, void 0, !0)
], 8, aa)) : f("", !0),
o.$slots["chart-background"] && z.value === A.DONUT ? (a(), l("foreignObject", {
key: 2,
x: 0,
y: 0,
width: b.value.width,
height: b.value.height,
style: {
pointerEvents: "none"
}
}, [
N(o.$slots, "chart-background", {}, void 0, !0)
], 8, la)) : f("", !0),
_("defs", null, [
_("filter", {
id: `blur_${E.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
_("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 2,
id: `blur_std_${E.value}`
}, null, 8, na),
s[7] || (s[7] = _("feColorMatrix", {
type: "saturate",
values: "0"
}, null, -1))
], 8, oa),
_("filter", {
id: `shadow_${E.value}`,
"color-interpolation-filters": "sRGB"
}, [
_("feDropShadow", {
dx: "0",
dy: "0",
stdDeviation: "10",
"flood-opacity": "0.5",
"flood-color": e.value.donutShadowColor
}, null, 8, ua)
], 8, ia)
]),
z.value === A.DONUT ? (a(), l(m, { key: 3 }, [
e.value.showDataLabels ? (a(), l("g", ra, [
(a(!0), l(m, null, $(I.value.chart, (t, u) => (a(), l(m, null, [
I.value.isArcBigEnough(t) ? (a(), l("path", {
key: 0,
d: g(Rt)(t, { x: b.value.width / 2, y: b.value.height / 2 }, 16, 16, !1, !1, b.value.height * at.value),
stroke: t.color,
"stroke-width": e.value.donutLabelMarkerStrokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none",
filter: pe(t.id)
}, null, 8, sa)) : f("", !0)
], 64))), 256))
])) : f("", !0),
_("circle", {
cx: I.value.cx,
cy: I.value.cy,
r: I.value.radius,
fill: e.value.backgroundColor,
filter: e.value.donutUseShadow ? `url(#shadow_${E.value})` : ""
}, null, 8, va),
_("g", da, [
(a(!0), l(m, null, $(I.value.chart, (t, u) => (a(), l("path", {
d: t.arcSlice,
fill: t.color,
stroke: e.value.backgroundColor,
"stroke-width": e.value.donutStrokeWidth,
filter: pe(t.id)
}, null, 8, ca))), 256)),
(a(!0), l(m, null, $(I.value.chart, (t, u) => (a(), l("path", {
d: t.arcSlice,
fill: "transparent",
onMouseenter: (r) => I.value.useTooltip({ datapoint: t, seriesIndex: u }),
onMouseout: s[0] || (s[0] = (r) => I.value.killTooltip()),
onClick: (r) => ie("selectDatapoint", t)
}, null, 40, ha))), 256))
]),
e.value.showDataLabels ? (a(), l("g", fa, [
(a(!0), l(m, null, $(I.value.chart, (t, u) => (a(), l(m, null, [
I.value.isArcBigEnough(t) ? (a(), l("circle", {
key: 0,
cx: g(ke)(t).x,
cy: g(Be)(t) - 3.7,
fill: t.color,
stroke: e.value.backgroundColor,
"stroke-width": 1,
r: 3,
filter: pe(t.id)
}, null, 8, ga)) : f("", !0),
I.value.isArcBigEnough(t) ? (a(), l("text", {
key: 1,
"text-anchor": g(ke)(t, !0, 20).anchor,
x: g(ke)(t, !0).x,
y: g(Be)(t),
fill: e.value.color,
"font-size": e.value.dataLabelFontSize,
filter: pe(t.id)
}, O(I.value.displayArcPercentage(t, I.value.chart)) + " (" + O(g(Z)(
e.value.formatter,
t.value,
g(D)({
p: e.value.valuePrefix,
v: t.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: t, seriesIndex: u }
)) + ") ", 9, ma)) : f("", !0),
I.value.isArcBigEnough(t, !0, 20) ? (a(), l("text", {
key: 2,
"text-anchor": g(ke)(t).anchor,
x: g(ke)(t, !0).x,
y: g(Be)(t) + e.value.dataLabelFontSize,
fill: e.value.color,
"font-size": e.value.dataLabelFontSize,
filter: pe(t.id)
}, O(t.name), 9, pa)) : f("", !0)
], 64))), 256))
])) : f("", !0),
e.value.donutShowTotal ? (a(), l("g", ya, [
_("text", {
"text-anchor": "middle",
x: I.value.drawingArea.centerX,
y: I.value.drawingArea.centerY - e.value.donutTotalLabelFontSize / 2,
"font-size": e.value.donutTotalLabelFontSize,
fill: e.value.color
}, O(e.value.donutTotalLabelText), 9, xa),
_("text", {
"text-anchor": "middle",
x: I.value.drawingArea.centerX,
y: I.value.drawingArea.centerY + e.value.donutTotalLabelFontSize,
"font-size": e.value.donutTotalLabelFontSize,
fill: e.value.color
}, O(g(D)({
p: e.value.valuePrefix,
v: I.value.total,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
})), 9, ka)
])) : f("", !0)
], 64)) : f("", !0),
z.value === A.LINE ? (a(), l(m, { key: 4 }, [
e.value.xyShowGrid ? (a(), l("g", ba, [
(a(!0), l(m, null, $(d.value.yLabels, (t) => (a(), l(m, null, [
t.y <= d.value.drawingArea.bottom ? (a(), l("line", {
key: 0,
x1: d.value.drawingArea.left,
x2: d.value.drawingArea.right,
y1: t.y,
y2: t.y,
stroke: e.value.xyGridStroke,
"stroke-width": e.value.xyGridStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Sa)) : f("", !0)
], 64))), 256)),
(a(!0), l(m, null, $(d.value.extremes.maxSeries + 1, (t, u) => (a(), l("line", {
x1: d.value.drawingArea.left + d.value.slotSize * u,
x2: d.value.drawingArea.left + d.value.slotSize * u,
y1: d.value.drawingArea.top,
y2: d.value.drawingArea.bottom,
stroke: e.value.xyGridStroke,
"stroke-width": e.value.xyGridStrokeWidth,
"stroke-linecap": "round"
}, null, 8, wa))), 256))
])) : f("", !0),
e.value.xyShowAxis ? (a(), l("g", Aa, [
_("line", {
x1: d.value.drawingArea.left,
x2: d.value.drawingArea.left,
y1: d.value.drawingArea.top,
y2: d.value.drawingArea.bottom,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, _a),
_("line", {
x1: d.value.drawingArea.left,
x2: d.value.drawingArea.right,
y1: isNaN(d.value.absoluteZero) ? d.value.drawingArea.bottom : d.value.absoluteZero,
y2: isNaN(d.value.absoluteZero) ? d.value.drawingArea.bottom : d.value.absoluteZero,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, za)
])) : f("", !0),
e.value.xyShowScale ? (a(), l("g", La, [
(a(!0), l(m, null, $(d.value.yLabels, (t, u) => (a(), l(m, null, [
t.y <= d.value.drawingArea.bottom ? (a(), l("line", {
key: 0,
x1: t.x + 4,
x2: d.value.drawingArea.left,
y1: t.y,
y2: t.y,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, $a)) : f("", !0),
t.y <= d.value.drawingArea.bottom ? (a(), l("text", {
key: 1,
x: t.x,
y: t.y + e.value.xyLabelsYFontSize / 3,
"text-anchor": "end",
"font-size": e.value.xyLabelsYFontSize,
fill: e.value.color
}, O(g(Z)(
e.value.formatter,
t.value,
g(D)({
p: e.value.valuePrefix,
v: t.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: t, seriesIndex: u }
)), 9, Ca)) : f("", !0)
], 64))), 256))
])) : f("", !0),
e.value.xyShowScale && e.value.xyPeriods.length ? (a(), l("g", Ia, [
(a(!0), l(m, null, $(e.value.xyPeriods.slice(p.value.start, p.value.end), (t, u) => (a(), l(m, null, [
!e.value.xyPeriodsShowOnlyAtModulo || e.value.xyPeriodsShowOnlyAtModulo && u % Math.floor((p.value.end - p.value.start) / e.value.xyPeriodsModulo) === 0 || p.value.end - p.value.start <= e.value.xyPeriodsModulo ? (a(), l("line", {
key: 0,
x1: d.value.drawingArea.left + d.value.slotSize * (u + 1) - d.value.slotSize / 2,
x2: d.value.drawingArea.left + d.value.slotSize * (u + 1) - d.value.slotSize / 2,
y1: d.value.drawingArea.bottom,
y2: d.value.drawingArea.bottom + 4,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Ea)) : f("", !0),
!e.value.xyPeriodsShowOnlyAtModulo || e.value.xyPeriodsShowOnlyAtModulo && u % Math.floor((p.value.end - p.value.start) / e.value.xyPeriodsModulo) === 0 || p.value.end - p.value.start <= e.value.xyPeriodsModulo ? (a(), l("text", {
key: 1,
"font-size": e.value.xyLabelsXFontSize,
"text-anchor": e.value.xyPeriodLabelsRotation > 0 ? "start" : e.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
fill: e.value.color,
transform: `translate(${d.value.drawingArea.left + d.value.slotSize * (u + 1) - d.value.slotSize / 2}, ${d.value.drawingArea.bottom + e.value.xyLabelsXFontSize + 6}), rotate(${e.value.xyPeriodLabelsRotation})`
}, O(t), 9, Pa)) : f("", !0)
], 64))), 256))
])) : f("", !0),
_("g", Oa, [
(a(!0), l(m, null, $(d.value.dataset, (t, u) => (a(), l("g", Ta, [
e.value.lineSmooth ? (a(), l(m, { key: 0 }, [
_("path", {
d: `M ${g(ut)(t.coordinates)}`,
stroke: e.value.backgroundColor,
"stroke-width": e.value.lineStrokeWidth + 1,
"stroke-linecap": "round",
fill: "none",
class: ve({ "quick-animation": !0, "vue-data-ui-line-animated": e.value.lineAnimated }),
style: { transition: "all 0.3s ease-in-out" }
}, null, 10, Ra),
_("path", {
d: `M ${g(ut)(t.coordinates)}`,
stroke: t.color,
"stroke-width": e.value.lineStrokeWidth,
"stroke-linecap": "round",
fill: "none",
class: ve({ "quick-animation": !0, "vue-data-ui-line-animated": e.value.lineAnimated }),
style: { transition: "all 0.3s ease-in-out" }
}, null, 10, Ma)
], 64)) : (a(), l(m, { key: 1 }, [
_("path", {
d: `M ${t.linePath}`,
stroke: e.value.backgroundColor,
"stroke-width": e.value.lineStrokeWidth + 1,
"stroke-linecap": "round",
fill: "none",
class: ve({ "quick-animation": !0, "vue-data-ui-line-animated": e.value.lineAnimated }),
style: { transition: "all 0.3s ease-in-out" }
}, null, 10, Na),
_("path", {
d: `M ${t.linePath}`,
stroke: t.color,
"stroke-width": e.value.lineStrokeWidth,
"stroke-linecap": "round",
fill: "none",
class: ve({ "quick-animation": !0, "vue-data-ui-line-animated": e.value.lineAnimated }),
style: { transition: "all 0.3s ease-in-out" }
}, null, 10, Fa)
], 64)),
(a(!0), l(m, null, $(t.coordinates, (r, h) => (a(), l("circle", {
cx: r.x,
cy: g(Y)(r.y),
r: 3,
fill: t.color,
stroke: e.value.backgroundColor,
"stroke-width": "0.5",
class: "quick-animation",
style: { transition: "all 0.3s ease-in-out" }
}, null, 8, Ua))), 256))
]))), 256))
]),
e.value.showDataLabels ? (a(), l("g", Ba, [
(a(!0), l(m, null, $(d.value.dataset, (t, u) => (a(), l(m, null, [
(a(!0), l(m, null, $(t.coordinates, (r, h) => (a(), l("text", {
"text-anchor": "middle",
"font-size": e.value.dataLabelFontSize,
fill: t.color,
x: r.x,
y: g(Y)(r.y) - e.value.dataLabelFontSize / 2,
class: "quick-animation",
style: { transition: "all 0.3s ease-in-out" }
}, O(g(Z)(
e.value.formatter,
g(Y)(r.value),
g(D)({
p: e.value.valuePrefix,
v: g(Y)(r.value),
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: r, seriesIndex: h }
)), 9, Da))), 256))
], 64))), 256))
])) : f("", !0),
_("g", Va, [
(a(!0), l(m, null, $(d.value.extremes.maxSeries, (t, u) => (a(), l("rect", {
x: d.value.drawingArea.left + u * d.value.slotSize,
y: d.value.drawingArea.top,
height: d.value.drawingArea.height <= 0 ? 1e-5 : d.value.drawingArea.height,
width: d.value.slotSize <= 0 ? 1e-5 : d.value.slotSize,
fill: [W.value, G.value].includes(u) ? e.value.xyHighlighterColor : "transparent",
style: M(`opacity:${e.value.xyHighlighterOpacity}`),
onMouseenter: (r) => d.value.useTooltip(u),
onMouseleave: s[1] || (s[1] = (r) => d.value.killTooltip()),
onClick: (r) => ie("selectDatapoint", d.value.dataset.map((h) => ({
...h,
value: h.values[u]
})))
}, null, 44, qa))), 256))
])
], 64)) : f("", !0),
z.value === A.BAR ? (a(), l(m, { key: 5 }, [
e.value.xyShowGrid ? (a(), l("g", Wa, [
(a(!0), l(m, null, $(v.value.yLabels, (t) => (a(), l(m, null, [
t.y <= v.value.drawingArea.bottom ? (a(), l("line", {
key: 0,
x1: v.value.drawingArea.left,
x2: v.value.drawingArea.right,
y1: t.y,
y2: t.y,
stroke: e.value.xyGridStroke,
"stroke-width": e.value.xyGridStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Ha)) : f("", !0)
], 64))), 256)),
(a(!0), l(m, null, $(v.value.extremes.maxSeries + 1, (t, u) => (a(), l("line", {
x1: v.value.drawingArea.left + v.value.slotSize * u,
x2: v.value.drawingArea.left + v.value.slotSize * u,
y1: v.value.drawingArea.top,
y2: v.value.drawingArea.bottom,
stroke: e.value.xyGridStroke,
"stroke-width": e.value.xyGridStrokeWidth,
"stroke-linecap": "round"
}, null, 8, ja))), 256))
])) : f("", !0),
e.value.xyShowAxis ? (a(), l("g", Ga, [
_("line", {
x1: v.value.drawingArea.left,
x2: v.value.drawingArea.left,
y1: v.value.drawingArea.top,
y2: v.value.drawingArea.bottom,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Xa),
_("line", {
x1: v.value.drawingArea.left,
x2: v.value.drawingArea.right,
y1: isNaN(v.value.absoluteZero) ? v.value.drawingArea.bottom : v.value.absoluteZero,
y2: isNaN(v.value.absoluteZero) ? v.value.drawingArea.bottom : v.value.absoluteZero,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Za)
])) : f("", !0),
e.value.xyShowScale ? (a(), l("g", Ya, [
(a(!0), l(m, null, $(v.value.yLabels, (t, u) => (a(), l(m, null, [
t.y <= v.value.drawingArea.bottom ? (a(), l("line", {
key: 0,
x1: t.x + 4,
x2: v.value.drawingArea.left,
y1: t.y,
y2: t.y,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Ja)) : f("", !0),
t.y <= v.value.drawingArea.bottom ? (a(), l("text", {
key: 1,
x: t.x,
y: t.y + e.value.xyLabelsYFontSize / 3,
"text-anchor": "end",
"font-size": e.value.xyLabelsYFontSize,
fill: e.value.color
}, O(g(Z)(
e.value.formatter,
t.value,
g(D)({
p: e.value.valuePrefix,
v: t.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: t, seriesIndex: u }
)), 9, Qa)) : f("", !0)
], 64))), 256))
])) : f("", !0),
e.value.xyShowScale && e.value.xyPeriods.length ? (a(), l("g", Ka, [
(a(!0), l(m, null, $(e.value.xyPeriods.slice(p.value.start, p.value.end), (t, u) => (a(), l("line", {
x1: v.value.drawingArea.left + v.value.slotSize * (u + 1) - v.value.slotSize / 2,
x2: v.value.drawingArea.left + v.value.slotSize * (u + 1) - v.value.slotSize / 2,
y1: v.value.drawingArea.bottom,
y2: v.value.drawingArea.bottom + 4,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, el))), 256)),
(a(!0), l(m, null, $(e.value.xyPeriods.slice(p.value.start, p.value.end), (t, u) => (a(), l("text", {
"font-size": e.value.xyLabelsXFontSize,
"text-anchor": e.value.xyPeriodLabelsRotation > 0 ? "start" : e.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
transform: `translate(${v.value.drawingArea.left + v.value.slotSize * (u + 1) - v.value.slotSize / 2}, ${v.value.drawingArea.bottom + e.value.xyLabelsXFontSize + 6}) rotate(${e.value.xyPeriodLabelsRotation})`,
fill: e.value.color
}, O(t), 9, tl))), 256))
])) : f("", !0),
_("g", al, [
(a(!0), l(m, null, $(v.value.dataset, (t, u) => (a(), l(m, null, [
(a(!0), l(m, null, $(t.coordinates, (r, h) => (a(), l("rect", {
x: r.x,
width: r.width <= 0 ? 1e-5 : r.width,
height: g(Y)(r.height <= 0 ? 1e-5 : r.height),
y: g(Y)(r.y),
fill: t.color,
stroke: e.value.backgroundColor,
"stroke-width": e.value.barStrokeWidth,
"stroke-linecap": "round",
class: ve({ "vue-data-ui-bar-animated": e.value.barAnimated && r.value < 0 })
}, [
e.value.barAnimated && r.value > 0 && !g(Ae) && !g(_e) ? (a(), l("animate", {
key: 0,
attributeName: "height",
from: 0,
to: r.height,
dur: "0.5s"
}, null, 8, ol)) : f("", !0),
e.value.barAnimated && r.value > 0 && !g(Ae) && !g(_e) ? (a(), l("animate", {
key: 1,
attributeName: "y",
from: v.value.absoluteZero,
to: v.value.absoluteZero - r.height,
dur: "0.5s"
}, null, 8, nl)) : f("", !0)
], 10, ll))), 256))
], 64))), 256))
]),
e.value.showDataLabels ? (a(), l("g", il, [
(a(!0), l(m, null, $(v.value.dataset, (t, u) => (a(), l(m, null, [
(a(!0), l(m, null, $(t.coordinates, (r, h) => (a(), l("text", {
x: r.x + r.width / 2,
y: g(Y)(r.y) - e.value.dataLabelFontSize / 2,
"text-anchor": "middle",
"font-size": e.value.dataLabelFontSize,
fill: t.color,
class: "quick-animation"
}, O(g(Z)(
e.value.formatter,
g(Y)(r.value),
g(D)({
p: e.value.valuePrefix,
v: g(Y)(r.value),
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: r, seriesIndex: h }
)), 9, ul))), 256))
], 64))), 256))
])) : f("", !0),
_("g", rl, [
(a(!0), l(m, null, $(v.value.extremes.maxSeries, (t, u) => (a(), l("rect", {
x: v.value.drawingArea.left + u * v.value.slotSize,
y: v.value.drawingArea.top,
height: v.value.drawingArea.height <= 0 ? 1e-5 : v.value.drawingArea.height,
width: v.value.slotSize <= 0 ? 1e-5 : v.value.slotSize,
fill: [W.value, G.value].includes(u) ? e.value.xyHighlighterColor : "transparent",
style: M(`opacity:${e.value.xyHighlighterOpacity}`),
onMouseenter: (r) => v.value.useTooltip(u),
onMouseleave: s[2] || (s[2] = (r) => v.value.killTooltip()),
onClick: (r) => ie("selectDatapoint", v.value.dataset.map((h) => ({
...h,
value: h.values[u]
})))
}, null, 44, sl))), 256))
])
], 64)) : f("", !0),
[A.LINE, A.BAR].includes(z.value) ? (a(), l("g", vl, [
e.value.xAxisLabel && z.value === A.LINE ? (a(), l("g", dl, [
_("text", {
"font-size": e.value.axisLabelsFontSize,
fill: e.value.color,
"text-anchor": "middle",
x: d.value.drawingArea.left + d.value.drawingArea.width / 2,
y: b.value.height - e.value.axisLabelsFontSize / 3
}, O(e.value.xAxisLabel), 9, cl)
])) : f("", !0),
e.value.xAxisLabel && z.value === A.BAR ? (a(), l("g", hl, [
_("text", {
"font-size": e.value.axisLabelsFontSize,
fill: e.value.color,
"text-anchor": "middle",
x: v.value.drawingArea.left + v.value.drawingArea.width / 2,
y: b.value.height - e.value.axisLabelsFontSize / 3
}, O(e.value.xAxisLabel), 9, fl)
])) : f("", !0),
e.value.yAxisLabel && z.value === A.LINE ? (a(), l("g", gl, [
_("text", {
"font-size": e.value.axisLabelsFontSize,
fill: e.value.color,
transform: `translate(${e.value.axisLabelsFontSize}, ${d.value.drawingArea.top + d.value.drawingArea.height / 2}) rotate(-90)`,
"text-anchor": "middle"
}, O(e.value.yAxisLabel), 9, ml)
])) : f("", !0),
e.value.yAxisLabel && z.value === A.BAR ? (a(), l("g", pl, [
_("text", {
"font-size": e.value.axisLabelsFontSize,
fill: e.value.color,
transform: `translate(${e.value.axisLabelsFontSize}, ${v.value.drawingArea.top + v.value.drawingArea.height / 2}) rotate(-90)`,
"text-anchor": "middle"
}, O(e.value.yAxisLabel), 9, yl)
])) : f("", !0)
])) : f("", !0)
], 12, ea)) : f("", !0),
z.value ? f("", !0) : (a(), Ee(Vt, {
key: 5,
config: {
type: "line",
style: {
backgroundColor: e.value.backgroundColor,
line: {
axis: {
color: e.value.xyAxisStroke
},
path: {
color: e.value.xyAxisStroke,
strokeWidth: 0.5
}
}
}
}
}, null, 8, ["config"])),
o.$slots.watermark ? (a(), l("div", xl, [
N(o.$slots, "watermark", ae(le({ isPrinting: g(Ae) || g(_e) })), void 0, !0)
])) : f("", !0),
[A.BAR, A.LINE].includes(z.value) && e.value.zoomXy && x.value.maxSeriesLength > 1 ? (a(), l("div", {
key: `slicer_${Se.value}`,
ref_key: "quickChartSlicer",
ref: ce
}, [
(a(), Ee(Dt, {
ref_key: "slicerComponent",
ref: ue,
key: `slicer_${Se.value}`,
background: e.value.zoomColor,
borderColor: e.value.backgroundColor,
fontSize: e.value.zoomFontSize,
useResetSlot: e.value.zoomUseResetSlot,
labelLeft: e.value.xyPeriods[p.value.start] ? e.value.xyPeriods[p.value.start] : "",
labelRight: e.value.xyPeriods[p.value.end - 1] ? e.value.xyPeriods[p.value.end - 1] : "",
textColor: e.value.color,
inputColor: e.value.zoomColor,
selectColor: e.value.zoomHighlightColor,
max: x.value.maxSeriesLength,
min: 0,
valueStart: p.value.start,
valueEnd: p.value.end,
smoothMinimap: e.value.zoomMinimap.smooth,
minimapSelectedColor: e.value.zoomMinimap.selectedColor,
minimapSelectedColorOpacity: e.value.zoomMinimap.selectedColorOpacity,
minimapSelectionRadius: e.value.zoomMinimap.selectionRadius,
minimapLineColor: e.value.zoomMinimap.lineColor,
minimap: bt.value,
minimapIndicatorColor: e.value.zoomMinimap.indicatorColor,
verticalHandles: e.value.zoomMinimap.verticalHandles,
minimapSelectedIndex: G.value,
start: p.value.start,
"onUpdate:start": s[3] || (s[3] = (t) => p.value.start = t),
end: p.value.end,
"onUpdate:end": s[4] || (s[4] = (t) => p.value.end = t),
refreshStartPoint: e.value.zoomStartIndex !== null ? e.value.zoomStartIndex : 0,
refreshEndPoint: e.value.zoomEndIndex !== null ? e.value.zoomEndIndex + 1 : x.value.maxSeriesLength,
enableRangeHandles: e.value.zoomEnableRangeHandles,
enableSelectionDrag: e.value.zoomEnableSelectionDrag,
onReset: xt,
onTrapMouse: yt
}, {
"reset-action": X(({ reset: t }) => [
N(o.$slots, "reset-action", ae(le({ reset: t })), void 0, !0)
]),
_: 3
}, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "smoothMinimap", "minimapSelectedColor", "minimapSelectedColorOpacity", "minimapSelectionRadius", "minimapLineColor", "minimap", "minimapIndicatorColor", "verticalHandles", "minimapSelectedIndex", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag"]))
])) : f("", !0),
e.value.showLegend ? (a(), l("div", {
key: 8,
ref_key: "quickChartLegend",
ref: ne,
class: "vue-ui-quick-chart-legend",
style: M(`background:transparent;color:${e.value.color}`)
}, [
z.value === A.DONUT ? (a(!0), l(m, { key: 0 }, $(I.value.legend, (t, u) => (a(), l("div", {
class: "vue-ui-quick-chart-legend-item",
onClick: (r) => {
pt(t, I.value.dataset), ie("selectLegend", t);
},
style: M(`cursor: ${I.value.legend.length > 1 ? "pointer" : "default"}; opacity:${w.value.includes(t.id) ? "0.5" : "1"}`)
}, [
e.value.useCustomLegend ? N(o.$slots, "legend", Fe({
key: 0,
ref_for: !0
}, { legend: t }), void 0, !0) : (a(), l(m, { key: 1 }, [
de(Oe, {
name: e.value.legendIcon,
stroke: t.color,
size: e.value.legendIconSize
}, null, 8, ["name", "stroke", "size"]),
_("span", {
style: M(`font-size:${e.value.legendFontSize}px`)
}, O(t.name), 5),
_("span", {
style: M(`font-size:${e.value.legendFontSize}px;font-variant-numeric:tabular-nums`)
}, O(w.value.includes(t.id) ? "-" : g(Z)(
e.value.formatter,
t.absoluteValue,
g(D)({
p: e.value.valuePrefix,
v: t.absoluteValue,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: t, seriesIndex: u }
)), 5),
w.value.includes(t.id) ? (a(), l("span", {
key: 0,
style: M(`font-size:${e.value.legendFontSize}px`)
}, " ( - % ) ", 4)) : Le.value ? (a(), l("span", {
key: 1,
style: M(`font-size:${e.value.legendFontSize}px; font-variant-numeric: tabular-nums;`)
}, " ( - % ) ", 4)) : (a(), l("span", {
key: 2,
style: M(`font-size:${e.value.legendFontSize}px; font-variant-numeric: tabular-nums;`)
}, " (" + O(g(D)({
v: t.value / I.value.total * 100,
s: "%",
r: e.value.dataLabelRoundingPercentage
})) + ") ", 5))
], 64))
], 12, kl))), 256)) : f("", !0),
z.value === A.LINE ? (a(!0), l(m, { key: 1 }, $(d.value.legend, (t, u) => (a(), l("div", {
class: "vue-ui-quick-chart-legend-item",
onClick: (r) => {
Ke(t.id, d.value.legend.length - 1), ie("selectLegend", t);
},
style: M(`cursor: ${d.value.legend.length > 1 ? "pointer" : "default"}; opacity:${w.value.includes(t.id) ? "0.5" : "1"}`)
}, [
e.value.useCustomLegend ? N(o.$slots, "legend", Fe({
key: 0,
ref_for: !0
}, { legend: t }), void 0, !0) : (a(), l(m, { key: 1 }, [
de(Oe, {
name: e.value.legendIcon,
stroke: t.color,
size: e.value.legendIconSize
}, null, 8, ["name", "stroke", "size"]),
_("span", {
style: M(`font-size:${e.value.legendFontSize}px`)
}, O(t.name), 5)
], 64))
], 12, bl))), 256)) : f("", !0),
z.value === A.BAR ? (a(!0), l(m, { key: 2 }, $(v.value.legend, (t, u) => (a(), l("div", {
class: "vue-ui-quick-chart-legend-item",
onClick: (r) => {
Ke(t.id, v.value.legend.length - 1), ie("selectLegend", t);
},
style: M(`cursor: ${v.value.legend.length > 1 ? "pointer" : "default"}; opacity:${w.value.includes(t.id) ? "0.5" : "1"}`)
}, [
e.value.useCustomLegend ? N(o.$slots, "legend", Fe({
key: 0,
ref_for: !0
}, { legend: t }), void 0, !0) : (a(), l(m, { key: 1 }, [
de(Oe, {
name: e.value.legendIcon,
stroke: t.color,
size: e.value.legendIconSize
}, null, 8, ["name", "stroke", "size"]),
_("span", {
style: M(`font-size:${e.value.legendFontSize}px`)
}, O(t.name), 5)
], 64))
], 12, Sl))), 256)) : f("", !0)
], 4)) : f("", !0),
o.$slots.source ? (a(), l("div", {
key: 9,
ref_key: "source",
ref: Ve,
dir: "auto"
}, [
N(o.$slots, "source", {}, void 0, !0)
], 512)) : f("", !0),
de(Ft, {
show: me.value.showTooltip && j.value,
backgroundColor: e.value.backgroundColor,
color: e.value.color,
borderRadius: e.value.tooltipBorderRadius,
borderColor: e.value.tooltipBorderColor,
borderWidth: e.value.tooltipBorderWidth,
fontSize: e.value.tooltipFontSize,
backgroundOpacity: e.value.tooltipBackgroundOpacity,
position: e.value.tooltipPosition,
offsetY: e.value.tooltipOffsetY,
parent: H.value,
content: Q.value,
isFullscreen: $e.value,
isCustom: g(Pe)(e.value.tooltipCustomFormat)
}, {
"tooltip-before": X(() => [
N(o.$slots, "tooltip-before", ae(le({ ...he.value })), void 0, !0)
]),
"tooltip-after": X(() => [
N(o.$slots, "tooltip-after", ae(le({ ...he.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"])
], 46, Kt)) : (a(), l("div", wl, [
de(Oe, {
name: "circleCancel",
stroke: "red"
}),
s[8] || (s[8] = _("span", null, "Dataset is not processable", -1))
]));
}
}, Fl = /* @__PURE__ */ jt(Al, [["__scopeId", "data-v-4444f63f"]]);
export {
Fl as default
};