vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,995 lines • 88.6 kB
JavaScript
import { defineAsyncComponent as Fe, ref as A, computed as M, toRefs as La, watch as Te, shallowRef as Bt, onMounted as _a, onBeforeUnmount as Dt, nextTick as lt, watchEffect as za, createElementBlock as n, openBlock as o, normalizeStyle as D, normalizeClass as he, createBlock as Ie, createCommentVNode as m, createElementVNode as z, createVNode as Se, unref as s, withCtx as W, renderSlot as R, normalizeProps as Q, guardReactiveProps as K, createSlots as $a, toDisplayString as N, Fragment as x, renderList as F, Teleport as Ea, mergeProps as ot } from "vue";
import { c as Fa, t as Ta, i as Ia, j as ee, a1 as Nt, k as Oa, a7 as Pa, g as Ma, o as Ra, m as nt, a3 as Ba, N as Ge, X as Da, a4 as Na, a5 as it, a6 as Oe, a as se, d as Y, $ as Ut, A as Vt, U as ve, y as We, _ as rt } from "./lib-BwysEpWI.js";
import { t as Ht, u as Ua } from "./useResponsive-DfdjqQps.js";
import { u as Va, a as ut } from "./useNestedProp-OFRiX4kU.js";
import { u as Ha, B as qa } from "./BaseScanner-BMpwQAfz.js";
import { u as Ga } from "./usePrinter-BJzHDpYF.js";
import { u as Wa } from "./useSvgExport-ByUukOZt.js";
import { u as ja } from "./useTimeLabels-DKoynYae.js";
import { u as Xa } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Ya } from "./useChartAccessibility-9icAAmYg.js";
import { u as Za } from "./useTimeLabelCollider-CIsgDrl9.js";
import Ja from "./img-DKigoPDs.js";
import { S as Qa } from "./Slicer-Bn8azYkD.js";
import { _ as Ka } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const w = {
LINE: "LINE",
BAR: "BAR",
DONUT: "DONUT"
}, el = ["SERIE", "SERIES", "DATA", "VALUE", "VALUES", "NUM"];
function tl({ dataset: h, barLineSwitch: O = 6, debug: C = !0 }) {
let V = null, X = null, ce = 0;
if ((typeof h == "number" || typeof h == "string") && C && console.warn(`The provided dataset (${h}) is not sufficient to build a chart`), Xe(h) && (de(h) && (h.length < O ? V = w.BAR : V = w.LINE, X = h, ce = h.length), je(h))) {
if (!ll(h))
return C && console.warn("The objects in the dataset array have a different data structure. Either keys or value types are different."), !1;
const Ye = Object.keys(h[0]), Pe = Object.values(h[0]);
if (!Ye.some((j) => ol(j)))
return C && 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;
qt(Pe, (j) => typeof j == "number") && (V = w.DONUT, X = h), qt(Pe, (j) => Array.isArray(j) && de(j)) && (Gt(h) > O ? V = w.LINE : V = w.BAR, ce = Gt(h), X = h.map((j) => ({
...j,
data: nl(j, (q) => de(q))
}))), h = h.map((j) => Wt(j)), X = X.map((j) => Wt(j));
}
return {
dataset: h,
type: V,
usableDataset: X,
maxSeriesLength: ce
};
}
function jt(h) {
return !h || Xe(h) && !h.length;
}
function Xe(h) {
return Array.isArray(h);
}
function de(h) {
if (!Xe(h) || jt(h)) return !1;
const O = h.map((C) => Number(C));
return ![...new Set(O.flatMap((C) => typeof C == "number" && !isNaN(C)))].includes(!1);
}
function je(h) {
return !Xe(h) || jt(h) || !![...new Set(h.flatMap((C) => typeof C == "object" && !Array.isArray(C)))].includes(!1) ? !1 : !h.map((C) => Object.keys(C).length > 0).includes(!1);
}
function al(h, O) {
const C = Object.keys(h).sort(), V = Object.keys(O).sort();
if (C.length !== V.length)
return !1;
for (let X = 0; X < C.length; X += 1) {
const ce = C[X], Ae = V[X];
if (ce !== Ae || typeof h[ce] != typeof O[Ae])
return !1;
}
return !0;
}
function ll(h) {
if (h.length <= 1) return !0;
for (let O = 0; O < h.length; O += 1)
for (let C = O + 1; C < h.length; C += 1)
if (!al(h[O], h[C]))
return !1;
return !0;
}
function ol(h) {
return el.includes(h.toUpperCase());
}
function qt(h, O) {
let C = [];
for (let V = 0; V < h.length; V += 1)
C.push(O(h[V]));
return C.includes(!0);
}
function Gt(h) {
return Math.max(...[...h].flatMap((O) => Object.values(O).filter((C) => de(C)).map((C) => C.length)));
}
function nl(h, O) {
return Object.values(h).filter((C) => O(C))[0];
}
function Wt(h) {
const O = {};
for (let C in h)
h.hasOwnProperty(C) && (O[C.toUpperCase()] = h[C]);
return O;
}
const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A", xyAxisStroke: "#5A5A5A", xyGridStroke: "#4A4A4A", xyHighlighterColor: "#CCCCCC", zoomColor: "#4A4A4A", zoomHighlightColor: "#9A9A9A", zoomMinimap: { lineColor: "#424242", selectedColor: "#8A8A8A", indicatorColor: "#CCCCCC" }, tooltipBorderColor: "#5A5A5A", tooltipBackgroundOpacity: 70 }, Yt = { backgroundColor: "#FFF8E1", color: "#424242", donutStroke: "#FFF8E1", xyAxisStroke: "#5D4037", xyGridStroke: "#5D403760", xyHighlighterColor: "#424242", zoomColor: "#5D4037", zoomHighlightColor: "#FF8A65", zoomMinimap: { lineColor: "#424242", selectedColor: "#FF8A65" }, tooltipBorderColor: "#FF8A65", tooltipBackgroundOpacity: 30 }, Zt = { backgroundColor: "#1E1E1E", color: "#BDBDBD", donutStroke: "#1E1E1E", xyAxisStroke: "#5D4037", xyGridStroke: "#5D403780", xyHighlighterColor: "#FFF8E1", zoomColor: "#5D4037", zoomHighlightColor: "#FF8A65", zoomMinimap: { lineColor: "#FF6B6B", selectedColor: "#FF8A65", indicatorColor: "#FF8A65" }, tooltipBorderColor: "#FF8A65", tooltipBackgroundOpacity: 30 }, Jt = { backgroundColor: "#1A1A1A", color: "#99AA99", xyAxisStroke: "#5F6A5F", xyGridStroke: "#333333", donutStroke: "#1A1A1A", xyHighlighterColor: "#66CC66", zoomColor: "#5F6A5F", zoomHighlightColor: "#66CC66", tooltipBorderColor: "#66CC66" }, Qt = { backgroundColor: "#fbfafa", color: "#8A9892", donutStroke: "#fbfafa", xyAxisStroke: "transparent", xyGridStroke: "transparent", xyHighlighterColor: "#8F837A", zoomColor: "#E0CFC3", zoomHighlightColor: "#8F837A" }, Kt = { backgroundColor: "#f6f6fb", color: "#50606C", donutStroke: "#f6f6fb", xyAxisStroke: "#829C98", xyGridStroke: "#CCD6D3", xyHighlighterColor: "#7DA9B5", zoomColor: "#92B0AB", zoomHighlightColor: "#50606C" }, ea = {
default: {},
dark: Xt,
celebration: Yt,
celebrationNight: Zt,
hack: Jt,
zen: Qt,
concrete: Kt
}, Xo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Yt,
celebrationNight: Zt,
concrete: Kt,
dark: Xt,
default: ea,
hack: Jt,
zen: Qt
}, Symbol.toStringTag, { value: "Module" })), il = ["id"], rl = ["id"], ul = ["xmlns", "viewBox"], sl = ["x", "y", "width", "height"], vl = ["x", "y", "width", "height"], dl = ["width", "height"], cl = ["id"], fl = ["id"], hl = ["id"], ml = ["flood-color"], gl = {
key: 0,
class: "donut-label-connectors"
}, pl = ["d", "stroke", "stroke-width", "filter"], yl = ["cx", "cy", "r", "fill", "filter"], xl = { class: "donut" }, kl = ["d", "fill", "stroke", "stroke-width", "filter"], bl = ["d", "onMouseenter", "onMouseout", "onClick"], Sl = {
key: 1,
class: "donut-labels quick-animation"
}, Al = ["cx", "cy", "fill", "stroke", "filter"], wl = ["text-anchor", "x", "y", "fill", "font-size", "filter"], Cl = ["text-anchor", "x", "y", "fill", "font-size", "filter"], Ll = {
key: 2,
class: "donut-hollow quick-animation"
}, _l = ["x", "y", "font-size", "fill"], zl = ["x", "y", "font-size", "fill"], $l = {
key: 0,
class: "line-grid"
}, El = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Tl = {
key: 1,
class: "line-axis"
}, Il = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ol = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Pl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ml = ["x", "y", "font-size", "fill"], Rl = {
key: 3,
class: "periodLabels"
}, Bl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Dl = { key: 0 }, Nl = ["font-size", "text-anchor", "fill", "transform"], Ul = ["font-size", "text-anchor", "fill", "transform", "innerHTML"], Vl = { class: "plots" }, Hl = { class: "line-plot-series" }, ql = ["d", "stroke", "stroke-width"], Gl = ["d", "stroke", "stroke-width"], Wl = ["d", "stroke", "stroke-width"], jl = ["d", "stroke", "stroke-width"], Xl = ["cx", "cy", "fill", "stroke"], Yl = {
key: 4,
class: "dataLabels"
}, Zl = ["font-size", "fill", "x", "y"], Jl = {
key: 5,
class: "tooltip-traps"
}, Ql = ["x", "y", "height", "width", "fill", "onMouseenter", "onMouseleave", "onClick"], Kl = {
key: 0,
class: "line-grid"
}, eo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], to = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ao = {
key: 1,
class: "line-axis"
}, lo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], oo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], no = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], io = ["x", "y", "font-size", "fill"], ro = {
key: 3,
class: "periodLabels"
}, uo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], so = { key: 0 }, vo = ["font-size", "text-anchor", "fill", "transform"], co = ["font-size", "text-anchor", "fill", "transform", "innerHTML"], fo = { class: "plots" }, ho = ["x", "width", "height", "y", "fill", "stroke", "stroke-width"], mo = ["to"], go = ["from", "to"], po = {
key: 4,
class: "dataLabels"
}, yo = ["x", "y", "font-size", "fill"], xo = {
key: 5,
class: "tooltip-traps"
}, ko = ["x", "y", "height", "width", "fill", "onMouseenter", "onMouseleave", "onClick"], bo = {
key: 6,
class: "axis-labels"
}, So = ["font-size", "fill", "x", "y"], Ao = ["font-size", "fill", "x", "y"], wo = ["font-size", "fill", "transform"], Co = ["font-size", "fill", "transform"], Lo = {
key: 5,
class: "vue-data-ui-watermark"
}, _o = ["id"], zo = ["onClick"], $o = ["onClick"], Eo = ["onClick"], Fo = {
key: 1,
class: "vue-ui-quick-chart-not-processable"
}, To = {
__name: "vue-ui-quick-chart",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: [Array, Object, String, Number],
default() {
return null;
}
}
},
emits: ["selectDatapoint", "selectLegend"],
setup(h, { expose: O, emit: C }) {
const V = Fe(() => import("./BaseIcon-4i3dd7Ty.js")), X = Fe(() => import("./PackageVersion-BLzm8l_I.js")), ce = Fe(() => import("./PenAndPaper-DxIUvoQ8.js")), Ae = Fe(() => import("./Tooltip-TDyKgLB6.js")), st = Fe(() => import("./UserOptions-CzJWRC4s.js")), { vue_ui_quick_chart: Ye } = Va(), { isThemeValid: Pe, warnInvalidTheme: j } = Xa(), q = h, ne = A(null), vt = A(null), dt = A(null), ct = A(null), Z = A(Fa()), me = A(!1), we = A(null), ge = A(""), oe = A(null), ft = A(null), ht = A(null), L = A([]), mt = A(0), Me = A(0), gt = A(!1), Ce = A(null), Le = A(null), ie = A(null), Re = A(null), pt = A(null), yt = A(null);
A("#FFFFFF");
const e = A(Ke()), Ze = M(() => !!e.value.debug), { loading: U, FINAL_DATASET: ta, manualLoading: xt } = Ha({
...La(q),
FINAL_CONFIG: e,
prepareConfig: Ke,
callback: () => {
Promise.resolve().then(async () => {
await lt(), $.value === w.LINE && e.value.lineAnimated && !U.value && ma({
pathDuration: 1e3,
pointDuration: 1200,
labelDuration: 1200
});
});
},
skeletonDataset: [1, 2, 3, 5, 8, 13, 21, 34, 55, 89],
skeletonConfig: Ta({
defaultConfig: e.value,
userConfig: {
backgroundColor: "#99999930",
customPalette: ["#BABABA"],
showDataLabels: !1,
paletteStartIndex: 0,
showUserOptions: !1,
showTooltip: !1,
xAxisLabel: "",
yAxisLabel: "",
xyAxisStroke: "#999999",
xyGridStroke: "#99999950",
xyPeriods: [],
xyShowScale: !1,
xyPaddingLeft: 6,
xyPaddingBottom: 12,
zoomXy: !1,
zoomStartIndex: null,
zoomEndIndex: null
}
})
}), { svgRef: Je } = Ya({ config: { text: e.value.title } }), aa = M(() => e.value.showUserOptionsOnChartHover), kt = M(() => e.value.keepUserOptionsStateOnChartLeave), Be = A(!e.value.showUserOptionsOnChartHover), Qe = A(!1);
function bt(a = !1) {
Qe.value = a, aa.value && (Be.value = a);
}
function Ke() {
const a = ut({
userConfig: q.config,
defaultConfig: Ye
});
let u = {};
const t = a.theme;
if (t)
if (!Pe.value(a))
j(a), u = a;
else {
const l = ut({
userConfig: ea[t] || q.config,
defaultConfig: a
});
u = {
...ut({
userConfig: q.config,
defaultConfig: l
}),
customPalette: a.customPalette.length ? a.customPalette : Ia[t] || ee
};
}
else
u = a;
return q.config && Nt(q.config, "zoomStartIndex") ? u.zoomStartIndex = q.config.zoomStartIndex : u.zoomStartIndex = null, q.config && Nt(q.config, "zoomEndIndex") ? u.zoomEndIndex = q.config.zoomEndIndex : u.zoomEndIndex = null, u;
}
Te(() => q.config, (a) => {
U.value || (e.value = Ke()), S.value.width = e.value.width, S.value.height = e.value.height, Be.value = !e.value.showUserOptionsOnChartHover, wt(), xe.value.showTooltip = e.value.showTooltip;
}, { deep: !0 }), Te(() => q.dataset, (a) => {
k.value = ze.value, y.value.start = 0, y.value.end = k.value.maxSeriesLength, Me.value += 1;
}, { deep: !0 }), Te(() => q.dataset, (a) => {
Array.isArray(a) && a.length > 0 && (xt.value = !1);
}, { immediate: !0 });
const _e = M(() => Oa(e.value.customPalette)), ye = C, ze = M(() => {
const a = tl({ debug: Ze.value, dataset: Pa(ta.value, [
"serie",
"series",
"data",
"value",
"values",
"num"
]), barLineSwitch: e.value.chartIsBarUnderDatasetLength });
return !a && Ze.value && console.error("VueUiQuickChart : Dataset is not processable"), a;
}), k = A(ze.value), la = M(() => !!k.value), $ = M(() => k.value ? k.value.type : null);
Te(() => $.value, (a) => {
a || Ma({
componentName: "VueUiQuickChart",
type: "dataset",
debug: Ze.value
});
}, { immediate: !0 });
const { isPrinting: De, isImaging: Ne, generatePdf: St, generateImage: At } = Ga({
elementId: `${$.value}_${Z.value}`,
fileName: e.value.title || $.value,
options: e.value.userOptionsPrint
}), oa = M(() => e.value.showUserOptions && !e.value.title), S = A({
width: e.value.width,
height: e.value.height
}), xe = A({
showTooltip: e.value.showTooltip
});
Te(e, () => {
xe.value = {
showTooltip: e.value.showTooltip
};
}, { immediate: !0 });
const fe = Bt(null), ke = Bt(null);
_a(async () => {
gt.value = !0, wt();
});
function wt() {
if (Ra(q.dataset) || (xt.value = e.value.loading), e.value.responsive) {
const a = Ht(() => {
const { width: u, height: t } = Ua({
chart: ne.value,
title: e.value.title ? vt.value : null,
legend: e.value.showLegend ? dt.value : null,
slicer: [w.BAR, w.LINE].includes($.value) && e.value.zoomXy && k.value.maxSeriesLength > 1 ? ct.value : null,
source: ft.value,
noTitle: ht.value
});
requestAnimationFrame(() => {
S.value.width = u, S.value.height = t;
});
});
fe.value && (ke.value && fe.value.unobserve(ke.value), fe.value.disconnect()), fe.value = new ResizeObserver(a), ke.value = ne.value.parentNode, fe.value.observe(ke.value);
}
Ft();
}
Dt(() => {
fe.value && (ke.value && fe.value.unobserve(ke.value), fe.value.disconnect());
});
const na = M(() => {
switch ($.value) {
case w.LINE:
return `0 0 ${S.value.width <= 0 ? 10 : S.value.width} ${S.value.height <= 0 ? 10 : S.value.height}`;
case w.BAR:
return `0 0 ${S.value.width <= 0 ? 10 : S.value.width} ${S.value.height <= 0 ? 10 : S.value.height}`;
case w.DONUT:
return `0 0 ${S.value.width <= 0 ? 10 : S.value.width} ${S.value.height <= 0 ? 10 : S.value.height}`;
default:
return `0 0 ${S.value.width <= 0 ? 10 : S.value.width} ${S.value.height <= 0 ? 10 : S.value.height}`;
}
});
function Ct(a) {
return [...a].map((u) => u.value).reduce((u, t) => u + t, 0);
}
function $e(a) {
return e.value.blurOnHover && ![null, void 0].includes(oe.value) && oe.value !== a ? `url(#blur_${Z.value})` : "";
}
function Lt(a, u) {
L.value.includes(a) ? L.value = L.value.filter((t) => t !== a) : L.value.length < u && L.value.push(a);
}
const _t = A(null), zt = A(null), Ue = A(!1);
function ia(a, u) {
Ue.value = !0;
let t = a.value;
const l = ze.value.dataset.find((r, p) => a.id === `donut_${p}`).VALUE;
if (L.value.includes(a.id)) {
let r = function() {
t > l ? (Ue.value = !1, cancelAnimationFrame(zt.value), k.value = {
...k.value,
dataset: k.value.dataset.map((p, b) => a.id === `donut_${b}` ? {
...p,
value: l,
VALUE: l
} : p)
}) : (t += l * 0.025, k.value = {
...k.value,
dataset: k.value.dataset.map((p, b) => a.id === `donut_${b}` ? {
...p,
value: t,
VALUE: t
} : p)
}, zt.value = requestAnimationFrame(r));
};
L.value = L.value.filter((p) => p !== a.id), r();
} else if (u.length > 1) {
let r = function() {
t < l / 100 ? (Ue.value = !1, cancelAnimationFrame(_t.value), L.value.push(a.id), k.value = {
...k.value,
dataset: k.value.dataset.map((p, b) => a.id === `donut_${b}` ? {
...p,
value: 0,
VALUE: 0
} : p)
}) : (t /= 1.1, k.value = {
...k.value,
dataset: k.value.dataset.map((p, b) => a.id === `donut_${b}` ? {
...p,
value: t,
VALUE: t
} : p)
}, _t.value = requestAnimationFrame(r));
};
r();
}
}
const re = A(null);
function ra(a) {
re.value = a;
}
const $t = M(() => e.value.donutThicknessRatio < 0.01 ? 0.01 : e.value.donutThicknessRatio > 0.4 ? 0.4 : e.value.donutThicknessRatio), T = M(() => {
if ($.value !== w.DONUT) return null;
const a = k.value.dataset.map((f, _) => ({
...f,
value: f.VALUE || f.DATA || f.SERIE || f.VALUES || f.NUM || 0,
name: f.NAME || f.DESCRIPTION || f.TITLE || f.LABEL || `Serie ${_}`,
id: `donut_${_}`
})).map((f, _) => ({
...f,
color: f.COLOR ? nt(f.COLOR) : _e.value[_ + e.value.paletteStartIndex] || ee[_ + e.value.paletteStartIndex] || ee[(_ + e.value.paletteStartIndex) % ee.length],
immutableValue: f.value
}));
function u(f, _) {
return Y({
v: isNaN(f.value / Ct(_)) ? 0 : f.value / Ct(_) * 100,
s: "%",
r: e.value.dataLabelRoundingPercentage
});
}
function t(f) {
return f.proportion * 100 > e.value.donutHideLabelUnderPercentage;
}
function l(f, _) {
const d = ze.value.dataset.find((g, E) => `donut_${E}` === f).VALUE;
return Math.abs(String(Number(d.toFixed(0))).length - String(Number(_.toFixed(0))).length);
}
function r({ datapoint: f, seriesIndex: _ }) {
we.value = { datapoint: f, seriesIndex: _, config: e.value, dataset: a }, oe.value = f.id;
const d = e.value.tooltipCustomFormat;
if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: f, seriesIndex: _ }), We(d) && rt(() => d({
datapoint: f,
seriesIndex: _,
series: a,
config: e.value
})))
ge.value = d({
datapoint: f,
seriesIndex: _,
series: a,
config: e.value
});
else {
let i = "";
i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${f.name}</div>`, i += `<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="${f.color}"/></svg>`, i += `<b>${se(
e.value.formatter,
f.value,
Y({
p: e.value.valuePrefix,
v: f.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: f, seriesIndex: _ }
)}</b>`, i += `<span>(${Y({ v: f.proportion * 100, s: "%", r: e.value.dataLabelRoundingPercentage })})</span></div>`, ge.value = `<div>${i}</div>`;
}
me.value = !0;
}
function p({ datapoint: f, seriesIndex: _ }) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: f, seriesIndex: _ }), me.value = !1, oe.value = null, re.value = null;
}
function b({ datapoint: f, seriesIndex: _ }) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: f, seriesIndex: _ }), ye("selectDatapoint", f);
}
const I = {
centerX: S.value.width / 2,
centerY: S.value.height / 2
}, P = a.filter((f) => !L.value.includes(f.id)).map((f) => f.value || 0).reduce((f, _) => f + _, 0), ae = a.map((f, _) => ({
...f,
proportion: (f.value || 0) / P,
value: f.value || 0,
absoluteValue: ze.value.dataset.find((d, i) => `donut_${i}` === f.id).VALUE,
shape: "circle"
})), ue = S.value.width / 2, J = S.value.height / 2, G = S.value.height * e.value.donutRadiusRatio;
return {
dataset: ae.filter((f) => !L.value.includes(f.id)),
legend: ae,
drawingArea: I,
displayArcPercentage: u,
isArcBigEnough: t,
useTooltip: r,
killTooltip: p,
selectDatapoint: b,
getSpaces: l,
total: P,
cx: ue,
cy: J,
radius: G,
chart: Ba(
{ series: a.filter((f) => !L.value.includes(f.id)) },
ue,
J,
G,
G,
1.99999,
2,
1,
360,
105.25,
S.value.height * $t.value
)
};
}), y = A({
start: 0,
end: k.value.maxSeriesLength
});
function ua() {
Ft();
}
const Et = A(null);
async function Ft() {
await lt(), await lt();
const { zoomStartIndex: a, zoomEndIndex: u } = e.value, t = Et.value;
(a != null || u != null) && t ? (a != null && t.setStartValue(a), u != null && t.setEndValue(sa(u + 1))) : (y.value = {
start: 0,
end: k.value.maxSeriesLength
}, Me.value += 1);
}
function sa(a) {
const u = k.value.maxSeriesLength;
return a > u ? u : a < 0 || e.value.zoomStartIndex !== null && a < e.value.zoomStartIndex ? e.value.zoomStartIndex !== null ? e.value.zoomStartIndex + 1 : 1 : a;
}
const va = M(() => {
if (!e.value.zoomMinimap.show || $.value === w.DONUT) return [];
let a = [];
de(k.value.dataset) && (a = k.value.dataset), je(k.value.dataset) && (a = k.value.dataset.map((r, p) => ({
values: r.VALUE || r.DATA || r.SERIE || r.SERIES || r.VALUES || r.NUM || 0,
id: $.value === w.LINE ? `line_${p}` : `bar_${p}`
})).filter((r) => !L.value.includes(r.id)));
const u = de(a) ? a.length : Math.max(...a.map((r) => r.values.length));
let t = [];
if (de(a))
t = a;
else
for (let r = 0; r < u; r += 1)
t.push(a.map((p) => p.values[r] || 0).reduce((p, b) => (p || 0) + (b || 0), 0));
const l = Math.min(...t);
return t.map((r) => r + (l < 0 ? Math.abs(l) : 0));
});
function Tt() {
let a = 0;
return Re.value && (a = Array.from(Re.value.querySelectorAll("text")).reduce((l, r) => {
const p = r.getComputedTextLength();
return p > l ? p : l;
}, 0)), a + 4;
}
const et = A(0), da = Ht((a) => {
et.value = a;
}, 100);
za((a) => {
const u = ie.value;
if (!u) return;
const t = new ResizeObserver((l) => {
da(l[0].contentRect.height);
});
t.observe(u), a(() => t.disconnect());
}), Dt(() => {
et.value = 0;
});
const Ve = M(() => {
let a = 0, u = 0;
return ie.value && (u = et.value), a + u;
}), c = M(() => {
if ($.value !== w.LINE) return null;
const a = {
height: S.value.height,
width: S.value.width
};
let u = Tt();
if (ie.value) {
const d = ie.value.getBBox().x;
d < 0 && (u += Math.abs(d));
}
const t = {
left: u + e.value.xyPaddingLeft,
top: e.value.xyPaddingTop,
right: a.width - e.value.xyPaddingRight,
bottom: a.height - e.value.xyPaddingBottom - Ve.value,
width: Math.max(10, a.width - e.value.xyPaddingLeft - e.value.xyPaddingRight - u),
height: Math.max(10, a.height - e.value.xyPaddingTop - e.value.xyPaddingBottom - Ve.value)
};
let l = [];
de(k.value.dataset) && (l = [
{
values: k.value.dataset.slice(y.value.start, y.value.end),
absoluteValues: k.value.dataset,
absoluteIndices: k.value.dataset.map((d, i) => i).slice(y.value.start, y.value.end),
name: e.value.title,
color: _e.value[e.value.paletteStartIndex] || ee[e.value.paletteStartIndex],
id: "line_0"
}
]), je(k.value.dataset) && (l = k.value.dataset.map((d, i) => ({
...d,
values: d.VALUE || d.DATA || d.SERIE || d.SERIES || d.VALUES || d.NUM || 0,
name: d.NAME || d.DESCRIPTION || d.TITLE || d.LABEL || `Serie ${i}`,
id: `line_${i}`
})).map((d, i) => ({
...d,
color: d.COLOR ? nt(d.COLOR) : _e.value[i + e.value.paletteStartIndex] || ee[i + e.value.paletteStartIndex] || ee[(i + e.value.paletteStartIndex) % ee.length],
values: d.values.slice(y.value.start, y.value.end),
absoluteValues: d.values,
absoluteIndices: d.values.map((g, E) => E).slice(y.value.start, y.value.end)
})));
const r = {
max: Math.max(...l.filter((d) => !L.value.includes(d.id)).flatMap((d) => d.values)),
min: Math.min(...l.filter((d) => !L.value.includes(d.id)).flatMap((d) => d.values)),
maxSeries: Math.max(...l.map((d) => d.values.length))
}, p = r.max === r.min ? Ge(r.min, r.min + 1, e.value.xyScaleSegments) : Ge(r.min < 0 ? r.min : 0, r.max < 0 ? 0 : r.max, e.value.xyScaleSegments), b = r.min < 0 ? Math.abs(r.min) : 0, I = r.max < 0 ? t.top : t.bottom - b / (p.max + b) * t.height, P = t.width / r.maxSeries, ae = p.ticks.map((d) => ({
y: t.bottom - t.height * ((d + b) / (p.max + b)),
x: t.left - 8,
value: d
})), ue = l.map((d, i) => ({
...d,
shape: "circle",
coordinates: d.values.map((g, E) => ({
x: t.left + P * (E + 1) - P / 2,
y: t.bottom - (g + b) / (p.max + b) * t.height,
value: g
}))
})).map((d) => {
let i = [];
return d.coordinates.forEach((g) => {
i.push(`${g.x},${g.y} `);
}), {
...d,
linePath: i.join(" ")
};
});
function J(d) {
return l.map((i) => ({
...i,
value: i.values[d],
absoluteIndex: i.absoluteIndices[d]
})).filter((i) => !L.value.includes(i.id));
}
function G(d) {
oe.value = d, re.value = d;
const i = J(d);
we.value = { datapoint: i, seriesIndex: d, config: e.value, dataset: l };
const g = e.value.tooltipCustomFormat;
if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: i, seriesIndex: d + y.value.start }), We(g) && rt(() => g({
datapoint: i,
seriesIndex: d,
series: l,
config: e.value
})))
ge.value = g({
datapoint: i,
seriesIndex: d,
series: l,
config: e.value
});
else {
let E = "";
te.value[i[0].absoluteIndex] && (E += `<div style="border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${te.value[i[0].absoluteIndex].text}</div>`), i.forEach((B, H) => {
E += `
<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="${B.color}"/></svg>
<span>${B.name}:</span>
<b>${se(
e.value.formatter,
B.value,
Y({
p: e.value.valuePrefix,
v: B.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: B, seriesIndex: H }
)}
</b>
</div>
`;
}), ge.value = E;
}
me.value = !0;
}
function f(d) {
const i = J(d);
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: i, seriesIndex: d + y.value.start }), oe.value = null, re.value = null, me.value = !1;
}
function _(d) {
const i = J(d);
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: i, seriesIndex: d + y.value.start }), ye("selectDatapoint", i);
}
return {
absoluteZero: I,
dataset: ue.filter((d) => !L.value.includes(d.id)),
legend: ue,
drawingArea: t,
extremes: r,
slotSize: P,
yLabels: ae,
useTooltip: G,
killTooltip: f,
selectDatapoint: _
};
}), v = M(() => {
if ($.value !== w.BAR) return null;
const a = {
height: S.value.height,
width: S.value.width
};
let u = Tt();
if (ie.value) {
const i = ie.value.getBBox().x;
i < 0 && (u += Math.abs(i));
}
const t = {
left: u + e.value.xyPaddingLeft,
top: e.value.xyPaddingTop,
right: a.width - e.value.xyPaddingRight,
bottom: a.height - e.value.xyPaddingBottom - Ve.value,
width: Math.max(10, a.width - e.value.xyPaddingLeft - e.value.xyPaddingRight - u),
height: Math.max(10, a.height - e.value.xyPaddingTop - e.value.xyPaddingBottom - Ve.value)
};
let l = [];
de(k.value.dataset) && (l = [
{
values: k.value.dataset.slice(y.value.start, y.value.end),
absoluteValues: k.value.dataset,
absoluteIndices: k.value.dataset.map((i, g) => g).slice(y.value.start, y.value.end),
name: e.value.title,
color: _e.value[e.value.paletteStartIndex] || ee[e.value.paletteStartIndex],
id: "bar_0"
}
]), je(k.value.dataset) && (l = k.value.dataset.map((i, g) => ({
...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 ${g}`,
id: `bar_${g}`
})).map((i, g) => ({
...i,
color: i.COLOR ? nt(i.COLOR) : _e.value[g + e.value.paletteStartIndex] || ee[g + e.value.paletteStartIndex] || ee[(g + e.value.paletteStartIndex) % ee.length],
values: i.values.slice(y.value.start, y.value.end),
absoluteValues: i.values,
absoluteIndices: i.values.map((E, B) => B).slice(y.value.start, y.value.end)
})));
const r = {
max: Math.max(...l.filter((i) => !L.value.includes(i.id)).flatMap((i) => i.values)) < 0 ? 0 : Math.max(...l.filter((i) => !L.value.includes(i.id)).flatMap((i) => i.values)),
min: Math.min(...l.filter((i) => !L.value.includes(i.id)).flatMap((i) => i.values)),
maxSeries: Math.max(...l.filter((i) => !L.value.includes(i.id)).map((i) => i.values.length))
}, p = r.min === r.max ? Ge(r.min, r.min + 1, e.value.xyScaleSegments) : Ge(r.min < 0 ? r.min : 0, r.max, e.value.xyScaleSegments), b = p.min < 0 ? Math.abs(p.min) : 0, I = t.bottom - b / (p.max + b) * t.height, P = t.width / r.maxSeries, ae = p.ticks.map((i) => ({
y: t.bottom - t.height * ((i + b) / (p.max + b)),
x: t.left - 8,
value: i
})), ue = l.map((i, g) => ({
...i,
shape: "square",
coordinates: i.values.map((E, B) => {
const H = (E + b) / (r.max + b) * t.height, le = Math.abs(E) / Math.abs(r.min) * (t.height - I), at = b / (r.max + b) * t.height, Ee = P / l.filter((pe) => !L.value.includes(pe.id)).length - e.value.barGap / l.filter((pe) => !L.value.includes(pe.id)).length;
return {
x: t.left + P * B + Ee * g + e.value.barGap / 2,
y: E > 0 ? t.bottom - H : I,
height: E > 0 ? H - at : le,
value: E,
width: Ee
};
})
})), J = l.filter((i) => !L.value.includes(i.id)).map((i, g) => ({
...i,
coordinates: i.values.map((E, B) => {
const H = (E + b) / (r.max + b) * t.height, le = Math.abs(E) / (r.max + b) * t.height, at = b / (r.max + b) * t.height, Ee = P / l.filter((pe) => !L.value.includes(pe.id)).length - e.value.barGap / l.filter((pe) => !L.value.includes(pe.id)).length;
return {
x: t.left + P * B + Ee * g + e.value.barGap / 2,
y: E > 0 ? t.bottom - H : I,
height: E > 0 ? H - at : le,
value: E,
width: Ee
};
})
}));
function G(i) {
return l.map((g) => ({
...g,
value: g.values[i],
absoluteIndex: g.absoluteIndices[i]
})).filter((g) => !L.value.includes(g.id));
}
function f(i) {
oe.value = i, re.value = i;
const g = G(i);
we.value = { datapoint: g, seriesIndex: i, config: e.value, dataset: l };
const E = e.value.tooltipCustomFormat;
if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: g, seriesIndex: i + y.value.start }), We(E) && rt(() => E({
datapoint: g,
seriesIndex: i,
series: l,
config: e.value
})))
ge.value = E({
point: g,
seriesIndex: i,
series: l,
config: e.value
});
else {
let B = "";
te.value[g[0].absoluteIndex] && (B += `<div style="border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${te.value[g[0].absoluteIndex].text}</div>`), g.forEach((H, le) => {
B += `
<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="${H.color}"/></svg>
<span>${H.name}:</span>
<b>${se(
e.value.formatter,
H.value,
Y({
p: e.value.valuePrefix,
v: H.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: H, seriesIndex: le }
)}
</b>
</div>
`;
}), ge.value = B;
}
me.value = !0;
}
function _(i) {
const g = G(i);
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: g, seriesIndex: i + y.value.start }), me.value = !1, oe.value = null, re.value = null;
}
function d(i) {
const g = G(i);
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: g, seriesIndex: i + y.value.start }), ye("selectDatapoint", g);
}
return {
absoluteZero: I,
dataset: J.filter((i) => !L.value.includes(i.id)),
absoluteDataset: J,
legend: ue,
drawingArea: t,
extremes: r,
slotSize: P,
yLabels: ae,
useTooltip: f,
killTooltip: _,
selectDatapoint: d
};
});
function ca(a) {
if (!a) return;
const u = a.getTotalLength();
a.style.transition = "none", a.style.strokeDasharray = `${u}`, a.style.strokeDashoffset = `${u}`;
}
function It(a, { fromOpacity: u = "0", fromScale: t = "0.85" } = {}) {
a.forEach((l) => {
l.style.animation = "none", l.style.transition = "none", l.style.opacity = u, l.style.transform = `scale(${t})`, l.style.transformBox = "fill-box", l.style.transformOrigin = "50% 50%";
});
}
function fa(a) {
return a.cx?.baseVal?.value ?? parseFloat(a.getAttribute("cx"));
}
function ha(a) {
const u = a.getAttribute("x");
if (u != null) return parseFloat(u);
const t = a.getCTM?.();
return t ? t.e : 0;
}
function Ot(a, u) {
if (!a.length) return [];
const t = a.map((I) => ({ el: I, x: u(I) })).filter((I) => Number.isFinite(I.x));
t.sort((I, P) => I.x - P.x);
let l = 1 / 0;
for (let I = 1; I < t.length; I++) {
const P = t[I].x - t[I - 1].x;
P > 0 && P < l && (l = P);
}
const r = (l === 1 / 0 ? 1 : l) / 2, p = [];
let b = { x: t[0].x, items: [t[0].el] };
for (let I = 1; I < t.length; I++) {
const { x: P, el: ae } = t[I];
Math.abs(P - b.x) <= r ? b.items.push(ae) : (p.push(b), b = { x: P, items: [ae] });
}
return p.push(b), p;
}
function ma({
pathDuration: a,
pathEasing: u = "ease-in-out",
pointDuration: t,
labelDuration: l,
pointDelay: r = 0,
labelDelay: p = 0,
pointStep: b = 0,
labelStep: I = 0,
intraSeriesStep: P = 0
} = {}) {
const ae = Array.isArray(Ce?.value) ? Ce.value : [Ce?.value].filter(Boolean), ue = Array.isArray(Le?.value) ? Le.value : [Le?.value].filter(Boolean), J = [...ae, ...ue].filter(Boolean), G = ne?.value || null, f = G ? Array.from(G.querySelectorAll(".vue-ui-quick-chart-plot")) : [], _ = G ? Array.from(G.querySelectorAll(".vue-ui-quick-chart-label")) : [];
J.forEach(ca), It(f, { fromOpacity: "0", fromScale: "0.75" }), It(_, { fromOpacity: "0", fromScale: "0.98" }), f.forEach((g) => g.classList.remove("quick-animation")), _.forEach((g) => g.classList.remove("quick-animation")), G && G.offsetWidth;
const d = f.length ? Ot(f, fa) : [], i = _.length ? Ot(_, ha) : [];
requestAnimationFrame(() => {
requestAnimationFrame(() => {
J.forEach((g) => {
g.style.transition = `stroke-dashoffset ${a}ms ${u}`, g.style.strokeDashoffset = "0";
}), d.forEach((g, E) => {
g.items.forEach((B, H) => {
const le = r + E * b + H * P;
B.style.transition = `opacity ${t}ms ease-out ${le}ms, transform ${t}ms ease-out ${le}ms`, B.style.opacity = "1", B.style.transform = "scale(1)";
});
}), i.forEach((g, E) => {
g.items.forEach((B, H) => {
const le = p + E * I + H * P;
B.style.transition = `opacity ${l}ms ease-out ${le}ms, transform ${l}ms ease-out ${le}ms`, B.style.opacity = "1", B.style.transform = "scale(1)";
});
});
});
});
}
const ga = M(() => {
if ($.value === w.LINE)
return c.value.legend.map((a) => (Math.min(...a.absoluteValues.map((u) => u ?? 0)), {
...a,
isVisible: !L.value.includes(a.id),
type: "line",
series: a.absoluteValues
}));
if ($.value === w.BAR)
return v.value.absoluteDataset.map((a) => (Math.min(...a.absoluteValues.map((u) => u ?? 0)), {
...a,
isVisible: !L.value.includes(a.id),
type: "bar",
series: a.absoluteValues
}));
}), te = M(() => ja({
values: e.value.xyPeriods,
maxDatapoints: k.value.maxSeriesLength,
formatter: e.value.datetimeFormatter,
start: y.value.start,
end: y.value.end
})), be = M(() => {
const a = e.value.xyPeriodsModulo;
return e.value.xyPeriods.length ? Math.min(a, [...new Set(te.value.map((u) => u.text))].length) : a;
}), He = A(!1);
function Pt(a) {
He.value = a, mt.value += 1;
}
function Mt() {
xe.value.showTooltip = !xe.value.showTooltip;
}
const qe = A(!1);
function tt() {
qe.value = !qe.value;
}
async function pa({ scale: a = 2 } = {}) {
if (!ne.value) return;
const { width: u, height: t } = ne.value.getBoundingClientRect(), l = u / t, { imageUri: r, base64: p } = await Ja({ domElement: ne.value, base64: !0, img: !0, scale: a });
return {
imageUri: r,
base64: p,
title: e.value.title,
width: u,
height: t,
aspectRatio: l
};
}
const ya = M(() => S.value.width), xa = M(() => S.value.height);
Za({
timeLabelsEls: ie,
timeLabels: te,
slicer: y,
configRef: e,
rotationPath: ["xyPeriodLabelsRotation"],
autoRotatePath: ["xyPeriodLabelsAutoRotate", "enable"],
isAutoSize: !1,
rotation: e.value.xyPeriodLabelsAutoRotate.angle,
height: xa.value,
width: ya.value
});
const ka = M(() => e.value.backgroundColor), ba = M(() => $.value === w.DONUT ? T.value.legend : $.value === w.LINE ? c.value.legend : v.value.legend), Sa = M(() => ({
show: e.value.showLegend,
bold: !1,
backgroundColor: e.value.backgroundColor,
color: e.value.color,
fontSize: e.value.legendFontSize,
position: e.value.legendPosition
})), Aa = M(() => ({
text: e.value.title,
color: e.value.color,
fontSize: e.value.titleFontSize,
bold: e.value.titleBold,
textAlign: e.value.titleTextAlign,
subtitle: {
text: ""
}
})), { exportSvg: wa, getSvg: Ca } = Wa({
svg: Je,
title: Aa,
legend: Sa,
legendItems: ba,
backgroundColor: ka
});
async function Rt({ isCb: a }) {
if (a) {
const { blob: u, url: t, text: l, dataUrl: r } = await Ca();
e.value.userOptionsCallbacks.svg({ blob: u, url: t, text: l, dataUrl: r });
} else
wa();
}
return O({
getImage: pa,
generatePdf: St,
generateImage: At,
generateSvg: Rt,
toggleTooltip: Mt,
toggleAnnotator: tt,
toggleFullscreen: Pt
}), (a, u) => la.value ? (o(), n("div", {
key: 0,
id: `${$.value}_${Z.value}`,
ref_key: "quickChart",
ref: ne,
class: he({ "vue-data-ui-component": !0, "vue-ui-quick-chart": !0, "vue-data-ui-wrapper-fullscreen": He.value }),
style: D(`background:${e.value.backgroundColor};color:${e.value.color};font-family:${e.value.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: u[2] || (u[2] = () => bt(!0)),
onMouseleave: u[3] || (u[3] = () => bt(!1))
}, [
e.value.userOptionsButtons.annotator ? (o(), Ie(s(ce), {
key: 0,
svgRef: s(Je),
backgroundColor: e.value.backgroundColor,
color: e.value.color,
active: qe.value,
onClose: tt
}, {
"annotator-action-close": W(() => [
R(a.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": W(({ color: t }) => [
R(a.$slots, "annotator-action-color", Q(K({ color: t })), void 0, !0)
]),
"annotator-action-draw": W(({ mode: t }) => [
R(a.$slots, "annotator-action-draw", Q(K({ mode: t })), void 0, !0)
]),
"annotator-action-undo": W(({ disabled: t }) => [
R(a.$slots, "annotator-action-undo", Q(K({ disabled: t })), void 0, !0)
]),
"annotator-action-redo": W(({ disabled: t }) => [
R(a.$slots, "annotator-action-redo", Q(K({ disabled: t })), void 0, !0)
]),
"annotator-action-delete": W(({ disabled: t }) => [
R(a.$slots, "annotator-action-delete", Q(K({ disabled: t })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : m("", !0),
oa.value ? (o(), n("div", {
key: 1,
ref_key: "noTitle",
ref: ht,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : m("", !0),
e.value.showUserOptions && (kt.value || Be.value) ? (o(), Ie(s(st), {
ref: "details",
key: `user_option_${mt.value}`,
backgroundColor: e.value.backgroundColor,
color: e.value.color,
isPrinting: s(De),
isImaging: s(Ne),
uid: Z.value,
hasTooltip: e.value.userOptionsButtons.tooltip && e.value.showTooltip,
hasPdf: e.value.userOptionsButtons.pdf,
hasImg: e.value.userOptionsButtons.img,
hasSvg: e.value.userOptionsButtons.svg,
hasFullscreen: e.value.userOptionsButtons.fullscreen,
hasXls: !1,
isTooltip: xe.value.showTooltip,
isFullscreen: He.value,
titles: { ...e.value.userOptionsButtonTitles },
chartElement: ne.value,
position: e.value.userOptionsPosition,
hasAnnotator: e.value.userOptionsButtons.annotator,
isAnnotation: qe.value,
callbacks: e.value.userOptionsCallbacks,
printScale: e.value.userOptionsPrint.scale,
onToggleFullscreen: Pt,
onGeneratePdf: s(St),
onGenerateImage: s(At),
onGenerateSvg: Rt,
onToggleTooltip: Mt,
onToggleAnnotator: tt,
style: D({
visibility: kt.value ? Be.value ? "visible" : "hidden" : "visible"
})
}, $a({ _: 2 }, [
a.$slots.menuIcon ? {
name: "menuIcon",
fn: W(({ isOpen: t, color: l }) => [
R(a.$slots, "menuIcon", Q(K({ isOpen: t, color: l })), void 0, !0)
]),
key: "0"
} : void 0,
a.$slots.optionTooltip ? {
name: "optionTooltip",
fn: W(() => [
R(a.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
a.$slots.optionPdf ? {
name: "optionPdf",
fn: W(() => [
R(a.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
a.$slots.optionImg ? {
name: "optionImg",
fn: W(() => [
R(a.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
a.$slots.optionSvg ? {
name: "optionSvg",
fn: W(() => [
R(a.$slots, "optionSvg", {}, void 0, !0)
]),
key: "4"
} : void 0,
a.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: W(({ toggleFullscreen: t, isFullscreen: l }) => [
R(a.$slots, "optionFullscreen", Q(K({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
]),
key: "5"
} : void 0,
a.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: W(({ toggleAnnotator: t, isAnnotator: l }) => [
R(a.$slots, "optionAnnotator", Q(K({ toggleAnnotator: t, isAnnotator: l })), void 0, !0)
]),
key: "6"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : m("", !0),
e.value.title ? (o(), n("div", {
key: 3,
ref_key: "quickChartTitle",
ref: vt,
class: "vue-ui-quick-chart-title",
style: D(`background:transparent;color:${e.value.color};font-size:${e.value.titleFontSize}px;font-weight:${e.value.titleBold ? "bold" : "normal"};text-align:${e.value.titleTextAlign}`)
}, N(e.value.title), 5)) : m("", !0),
z("div", {
id: `legend-top-${Z.value}`
}, null, 8, rl),
$.value ? (o(), n("svg", {
key: 4,
ref_key: "svgRef",
ref: Je,
xmlns: s(Da),
viewBox: na.value,
style: D(`max-width:100%;overflow:visible;background:transparent;color:${e.value.color}`)
}, [
Se(s(X)),
a.$slots["chart-background"] && $.value === w.BAR ? (o(), n("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"
}
}, [
R(a.$slots, "chart-background", {}, void 0, !0)
], 8, sl)) : m("", !0),
a.$slots["chart-background"] && $.value === w.LINE ? (o(), n("foreignObject", {
key: 1,
x: c.value.drawingArea.left,
y: c.value.drawingArea.top,
width: c.value.drawingArea.width,
height: c.value.drawingArea.height,
style: {
pointerEvents: "none"
}
}, [
R(a.$slots, "chart-background", {}, void 0, !0)
], 8, vl)) : m("", !0),
a.$slots["chart-background"] && $.value === w.DONUT ? (o(), n("foreignObject", {
key: 2,
x: 0,
y: 0,
width: S.value.width,
height: S.value.height,
style: {
pointerEvents: "none"
}
}, [
R(a.$slots, "chart-background", {}, void 0, !0)
], 8, dl)) : m("", !0),
z("defs", null, [
z("filter", {
id: `blur_${Z.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
z("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 2,
id: `blur_std_${Z.value}`
}, null, 8, fl),
u[4] || (u[4] = z("feColorMatrix", {
type: "saturate",
values: "0"
}, null, -1))
], 8, cl),
z("filter", {
id: `shadow_${Z.value}`,
"color-interpolation-filters": "sRGB"
}, [
z("feDropShadow", {
dx: "0",
dy: "0",
stdDeviation: "10",
"flood-opacity": "0.5",
"flood-color": e.value.donutShadowColor
}, null, 8, ml)
], 8, hl)
]),
$.value === w.DONUT ? (o(), n(x, { key: 3 }, [
e.value.showDataLabels ? (o(), n("g", gl, [
(o(!0), n(x, null, F(T.value.chart, (t, l) => (o(), n(x, null, [
T.value.isArcBigEnough(t) ? (o(), n("path", {
key: 0,
d: s(Na)(t, { x: S.value.width / 2, y: S.value.height / 2 }, 16, 16, !1, !1, S.value.height * $t.value, 12, e.value.donutCurvedMarkers),
stroke: t.color,
"stroke-width": e.value.donutLabelMarkerStrokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none",
filter: $e(t.id)
}, null, 8, pl)) : m("", !0)
], 64))), 256))
])) : m("", !0),
z("circle", {
cx: T.value.cx,
cy: T.value.cy,
r: T.value.radius,
fill: e.value.backgroundColor,
filter: e.value.donutUseShadow ? `url(#shadow_${Z.value})` : ""
}, null, 8, yl),
z("g", xl, [
(o(!0), n(x, null, F(T.value.chart, (t, l) => (o(), n("path", {
d: t.arcSlice,
fill: t.color,
stroke: e.value.donutStroke || e.value.backgroundColor,
"stroke-width": e.value.donutStrokeWidth,
filter: $e(t.id)
}, null, 8, kl))), 256)),
(o(!0), n(x, null, F(T.value.chart, (t, l) => (o(), n("path", {
d: t.arcSlice,
fill: "transparent",
onMouseenter: (r) => T.value.useTooltip({ datapoint: t, seriesIndex: l }),
onMouseout: (r) => T.value.killTooltip({ datapoint: t, seriesIndex: l }),
onClick: (r) => T.value.selectDatapoint({ datapoint: t, seriesIndex: l })
}, null, 40, bl))), 256))
]),
e.value.showDataLabels ? (o(), n("g", Sl, [
(o(!0), n(x, null, F(T.value.chart, (t, l) => (o(), n(x, null, [
T.value.isArcBigEnough(t) ? (o(), n("circle", {
key: 0,
cx: s(Oe)(t).x,
cy: s(it)(t) - 3.7,
fill: t.color,
stroke: e.value.backgroundColor,
"stroke-width": 1,
r: 3,
filter: $e(t.id)
}, null, 8, Al)) : m("", !0),
T.value.isArcBigEnough(t) ? (o(), n("text", {
key: 1,
"text-anchor": s(Oe)(t, !0, 20).anchor,
x: s(Oe)(t, !0).x,
y: s(it)(t),
fill: e.value.color,
"font-size": e.value.dataLabelFontSize,
filter: $e(t.id)
}, N(T.value.displayArcPercentage(t, T.value.chart)) + " (" + N(s(se)(
e.value.formatter,
t.value,
s(Y)({
p: e.value.valuePrefix,
v: t.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: t, seriesIndex: l }
)) + ") ", 9, wl)) : m("", !0),
T.value.isArcBigEnough(t, !0, 20) ? (o(), n("text", {
key: 2,
"text-anchor": s(Oe)(t).anchor,
x: s(Oe)(t, !0).x,
y: s(it)(t) + e.value.dataLabelFontSize,
fill: e.value.color,
"font-size": e.value.dataLabelFontSize,
filter: $e(t.id)
}, N(t.name), 9, Cl)) : m("", !0)
], 64))), 256))
])) : m("", !0),
e.value.donutShowTotal ? (o(), n("g", Ll, [
z("text", {
"text-anchor": "middle",
x: T.value.drawingArea.centerX,
y: T.value.drawingArea.centerY - e.value.donutTotalLabelFontSize / 2,
"font-size": e.value.donutTotalLabelFontSize,
fill: e.value.color
}, N(e.value.donutTotalLabelText), 9, _l),
z("text", {
"text-anchor": "middle",
x: T.value.drawingArea.centerX,
y: T.value.drawingArea.centerY + e.value.donutTotalLabelFontSize,
"font-size": e.value.donutTotalLabelFontSize,
fill: e.value.color
}, N(s(Y)({
p: e.value.valuePrefix,
v: T.value.total,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
})), 9, zl)
])) : m("", !0)
], 64)) : m("", !0),
$.value === w.LINE ? (o(), n(x, { key: 4 }, [
e.value.xyShowGrid ? (o(), n("g", $l, [
(o(!0), n(x, null, F(c.value.yLabels, (t) => (o(), n(x, null, [
t.y <= c.value.drawingArea.bottom ? (o(), n("line", {
key: 0,
x1: c.value.drawingArea.left,
x2: c.value.drawingArea.right,
y1: t.y,
y2: t.y,
stroke: e.value.xyGridStroke,
"stroke-width": e.value.xyGridStrokeWidth,
"stroke-linecap": "round"
}, null, 8, El)) : m("", !0)
], 64))), 256)),
(o(!0), n(x, null, F(c.value.extremes.maxSeries + 1, (t, l) => (o(), n("line", {
x1: c.value.drawingArea.left + c.value.slotSize * l,
x2: c.value.drawingArea.left + c.value.slotSize * l,
y1: c.value.drawingArea.top,
y2: c.value.drawingArea.bottom,
stroke: e.value.xyGridStroke,
"stroke-width": e.value.xyGridStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Fl))), 256))
])) : m("", !0),
e.value.xyShowAxis ? (o(), n("g", Tl, [
z("line", {
x1: c.value.drawingArea.left,
x2: c.value.drawingArea.left,
y1: c.value.drawingArea.top,
y2: c.value.drawingArea.bottom,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Il),
z("line", {
x1: c.value.drawingArea.left,
x2: c.value.drawingArea.right,
y1: isNaN(c.value.absoluteZero) ? c.value.drawingArea.bottom : c.value.absoluteZero,
y2: isNaN(c.value.absoluteZero) ? c.value.drawingArea.bottom : c.value.absoluteZero,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Ol)
])) : m("", !0),
e.value.xyShowScale ? (o(), n("g", {
key: 2,
class: "yLabels",
ref_key: "scaleLabels",
ref: Re
}, [
(o(!0), n(x, null, F(c.value.yLabels, (t, l) => (o(), n(x, null, [
t.y <= c.value.drawingArea.bottom ? (o(), n("line", {
key: 0,
x1: t.x + 4,
x2: c.value.drawingArea.left,
y1: t.y,
y2: t.y,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Pl)) : m("", !0),
t.y <= c.value.drawingArea.bottom ? (o(), n("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
}, N(s(se)(
e.value.formatter,
t.value,
s(Y)({
p: e.value.valuePrefix,
v: t.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: t, seriesIndex: l }
)), 9, Ml)) : m("", !0)
], 64))), 256))
], 512)) : m("", !0),
e.value.xyShowScale && e.value.xyPeriods.length ? (o(), n("g", Rl, [
(o(!0), n(x, null, F(te.value.map((t) => t.text), (t, l) => (o(), n(x, null, [
!e.value.xyPeriodsShowOnlyAtModulo || e.value.xyPeriodsShowOnlyAtModulo && l % Math.floor((y.value.end - y.value.start) / be.value) === 0 || y.value.end - y.value.start <= be.value ? (o(), n("line", {
key: 0,
x1: c.value.drawingArea.left + c.value.slotSize * (l + 1) - c.value.slotSize / 2,
x2: c.value.drawingArea.left + c.value.slotSize * (l + 1) - c.value.slotSize / 2,
y1: c.value.drawingArea.bottom,
y2: c.value.drawingArea.bottom + 4,
stroke: e.value.xyAxisStroke,
"stroke-width": e.value.xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Bl)) : m("", !0)
], 64))), 256)),
z("g", {
ref_key: "timeLabelsEls",
ref: ie
}, [
(o(!0), n(x, null, F(te.value.map((t) => t.text), (t, l) => (o(), n(x, null, [
!e.value.xyPeriodsShowOnlyAtModulo || e.value.xyPeriodsShowOnlyAtModulo && l % Math.floor((y.value.end - y.value.start) / be.value) === 0 || y.value.end - y.value.start <= be.value ? (o(), n("g", Dl, [
String(t).includes(`
`) ? (o(), n("text", {
key: 1,
class: "vue-data-ui-time-label",
"font-size": e.value.xyLabelsXFontSize,
"text-anchor": e.value.xyPeriodLabelsRotation > 0 ? "start" : e.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
fill: e.value.color,
transform: `translate(${c.value.drawingArea.left + c.value.slotSize * (l + 1) - c.value.slotSize / 2}, ${c.value.drawingArea.bottom + e.value.xyLabelsXFontSize + 6}), rotate(${e.value.xyPeriodLabelsRotation})`,
innerHTML: s(Ut)({
content: String(t),
fontSize: e.value.xyLabelsXFontSize,
fill: e.value.color,
x: 0,
y: 0
})
}, null, 8, Ul)) : (o(), n("text", {
key: 0,
class: "vue-data-ui-time-label",
"font-size": e.value.xyLabelsXFontSize,
"text-anchor": e.value.xyPeriodLabelsRotation > 0 ? "start" : e.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
fill: e.value.color,
transform: `translate(${c.value.drawingArea.left + c.value.slotSize * (l + 1) - c.value.slotSize / 2}, ${c.value.drawingArea.bottom + e.value.xyLabelsXFontSize + 6}), rotate(${e.value.xyPeriodLabelsRotation})`
}, N(t), 9, Nl))
])) : m("", !0)
], 64))), 256))
], 512)
])) : m("", !0),
z("g", Vl, [
(o(!0), n(x, null, F(c.value.dataset, (t, l) => (o(), n("g", Hl, [
e.value.lineSmooth ? (o(), n(x, { key: 0 }, [
z("path", {
ref_for: !0,
ref_key: "pathWrapper",
ref: Ce,
d: `M ${s(Vt)(t.coordinates)}`,
stroke: e.value.backgroundColor,
"stroke-width": e.value.lineStrokeWidth + 1,
"stroke-linecap": "round",
fill: "none",
class: he({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
}, null, 14, ql),
z("path", {
ref_for: !0,
ref_key: "pathTop",
ref: Le,
d: `M ${s(Vt)(t.coordinates)}`,
stroke: t.color,
"stroke-width": e.value.lineStrokeWidth,
"stroke-linecap": "round",
fill: "none",
class: he({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
}, null, 14, Gl)
], 64)) : (o(), n(x, { key: 1 }, [
z("path", {
ref_for: !0,
ref_key: "pathWrapper",
ref: Ce,
d: `M ${t.linePath}`,
stroke: e.value.backgroundColor,
"stroke-width": e.value.lineStrokeWidth + 1,
"stroke-linecap": "round",
fill: "none",
class: he({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
}, null, 14, Wl),
z("path", {
ref_for: !0,
ref_key: "pathTop",
ref: Le,
d: `M ${t.linePath}`,
stroke: t.color,
"stroke-width": e.value.lineStrokeWidth,
"stroke-linecap": "round",
fill: "none",
class: he({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
}, null, 14, jl)
], 64)),
(o(!0), n(x, null, F(t.coordinates, (r, p) => (o(), n("circle", {
cx: r.x,
cy: s(ve)(r.y),
r: 3,
fill: t.color,
stroke: e.value.backgroundColor,
"stroke-width": "0.5",
class: he({ "vue-ui-quick-chart-plot": !0, "quick-animation": !s(U) }),
style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
}, null, 14, Xl))), 256))
]))), 256))
]),
e.value.showDataLabels ? (o(), n("g", Yl, [
(o(!0), n(x, null, F(c.value.dataset, (t, l) => (o(), n(x, null, [
(o(!0), n(x, null, F(t.coordinates, (r, p) => (o(), n("text", {
"text-anchor": "middle",
"font-size": e.value.dataLabelFontSize,
fill: t.color,
x: r.x,
y: s(ve)(r.y) - e.value.dataLabelFontSize / 2,
class: he({ "vue-ui-quick-chart-label": !0, "quick-animation": !s(U) }),
style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
}, N(s(se)(
e.value.formatter,
s(ve)(r.value),
s(Y)({
p: e.value.valuePrefix,
v: s(ve)(r.value),
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: r, seriesIndex: p }
)), 15, Zl))), 256))
], 64))), 256))
])) : m("", !0),
Qe.value ? (o(), n("g", Jl, [
(o(!0), n(x, null, F(c.value.extremes.maxSeries, (t, l) => (o(), n("rect", {
x: c.value.drawingArea.left + l * c.value.slotSize,
y: c.value.drawingArea.top,
height: c.value.drawingArea.height <= 0 ? 1e-5 : c.value.drawingArea.height,
width: c.value.slotSize <= 0 ? 1e-5 : c.value.slotSize,
fill: [oe.value, re.value].includes(l) ? e.value.xyHighlighterColor : "transparent",
style: D(`opacity:${e.value.xyHighlighterOpacity}`),
onMouseenter: (r) => c.value.useTooltip(l),
onMouseleave: (r) => c.value.killTooltip(l),
onClick: (r) => c.value.selectDatapoint(l)
}, null, 44, Ql))), 256))
])) : m("", !0)
], 64)) : m("", !0),
$.value === w.BAR ? (o(), n(x, { key: 5 }, [
e.value.xyShowGrid ? (o(), n("g", Kl, [
(o(!0), n(x, null, F(v.value.yLabels, (t) => (o(), n(x, null, [
t.y <= v.value.drawingArea.bottom ? (o(), n("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, eo)) : m("", !0)
], 64))), 256)),
(o(!0), n(x, null, F(v.value.extremes.maxSeries + 1, (t, l) => (o(), n("line", {
x1: v.value.drawingArea.left + v.value.slotSize * l,
x2: v.value.drawingArea.left + v.value.slotSize * l,
y1: v.value.drawingArea.top,
y2: v.value.drawingArea.bottom,
stroke: e.value.xyGridStroke,
"stroke-width": e.value.xyGridStrokeWidth,
"stroke-linecap": "round"
}, null, 8, to))), 256))
])) : m("", !0),
e.value.xyShowAxis ? (o(), n("g", ao, [
z("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, lo),
z("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, oo)
])) : m("", !0),
e.value.xyShowScale ? (o(), n("g", {
key: 2,
class: "yLabels",
ref_key: "scaleLabels",
ref: Re
}, [
(o(!0), n(x, null, F(v.value.yLabels, (t, l) => (o(), n(x, null, [
t.y <= v.value.drawingArea.bottom ? (o(), n("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, no)) : m("", !0),
t.y <= v.value.drawingArea.bottom ? (o(), n("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
}, N(s(se)(
e.value.formatter,
t.value,
s(Y)({
p: e.value.valuePrefix,
v: t.value,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: t, seriesIndex: l }
)), 9, io)) : m("", !0)
], 64))), 256))
], 512)) : m("", !0),
e.value.xyShowScale && e.value.xyPeriods.length ? (o(), n("g", ro, [
(o(!0), n(x, null, F(e.value.xyPeriods.slice(y.value.start, y.value.end), (t, l) => (o(), n("line", {
x1: v.value.drawingArea.left + v.value.slotSize * (l + 1) - v.value.slotSize / 2,
x2: v.value.drawingArea.left + v.value.slotSize * (l + 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, uo))), 256)),
z("g", {
ref_key: "timeLabelsEls",
ref: ie
}, [
(o(!0), n(x, null, F(te.value.map((t) => t.text), (t, l) => (o(), n(x, null, [
!e.value.xyPeriodsShowOnlyAtModulo || e.value.xyPeriodsShowOnlyAtModulo && l % Math.floor((y.value.end - y.value.start) / be.value) === 0 || y.value.end - y.value.start <= be.value ? (o(), n("g", so, [
String(t).includes(`
`) ? (o(), n("text", {
key: 1,
class: "vue-data-ui-time-label",
"font-size": e.value.xyLabelsXFontSize,
"text-anchor": e.value.xyPeriodLabelsRotation > 0 ? "start" : e.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
fill: e.value.color,
transform: `translate(${v.value.drawingArea.left + v.value.slotSize * (l + 1) - v.value.slotSize / 2}, ${v.value.drawingArea.bottom + e.value.xyLabelsXFontSize + 6}), rotate(${e.value.xyPeriodLabelsRotation})`,
innerHTML: s(Ut)({
content: String(t),
fontSize: e.value.xyLabelsXFontSize,
fill: e.value.color,
x: 0,
y: 0
})
}, null, 8, co)) : (o(), n("text", {
key: 0,
class: "vue-data-ui-time-label",
"font-size": e.value.xyLabelsXFontSize,
"text-anchor": e.value.xyPeriodLabelsRotation > 0 ? "start" : e.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
fill: e.value.color,
transform: `translate(${v.value.drawingArea.left + v.value.slotSize * (l + 1) - v.value.slotSize / 2}, ${v.value.drawingArea.bottom + e.value.xyLabelsXFontSize + 6}), rotate(${e.value.xyPeriodLabelsRotation})`
}, N(t), 9, vo))
])) : m("", !0)
], 64))), 256))
], 512)
])) : m("", !0),
z("g", fo, [
(o(!0), n(x, null, F(v.value.dataset, (t, l) => (o(), n(x, null, [
(o(!0), n(x, null, F(t.coordinates, (r, p) => (o(), n("rect", {
x: r.x,
width: r.width <= 0 ? 1e-5 : r.width,
height: s(ve)(r.height <= 0 ? 1e-5 : r.height),
y: s(ve)(r.y),
fill: t.color,
stroke: e.value.backgroundColor,
"stroke-width": e.value.barStrokeWidth,
"stroke-linecap": "round",
class: he({ "vue-data-ui-bar-animated": e.value.barAnimated && r.value < 0 && !s(U) })
}, [
e.value.barAnimated && r.value > 0 && !s(De) && !s(Ne) ? (o(), n("animate", {
key: 0,
attributeName: "height",
from: 0,
to: r.height,
dur: "0.5s"
}, null, 8, mo)) : m("", !0),
e.value.barAnimated && r.value > 0 && !s(De) && !s(Ne) ? (o(), n("animate", {
key: 1,
attributeName: "y",
from: v.value.absoluteZero,
to: v.value.absoluteZero - r.height,
dur: "0.5s"
}, null, 8, go)) : m("", !0)
], 10, ho))), 256))
], 64))), 256))
]),
e.value.showDataLabels ? (o(), n("g", po, [
(o(!0), n(x, null, F(v.value.dataset, (t, l) => (o(), n(x, null, [
(o(!0), n(x, null, F(t.coordinates, (r, p) => (o(), n("text", {
x: r.x + r.width / 2,
y: s(ve)(r.y) - e.value.dataLabelFontSize / 2,
"text-anchor": "middle",
"font-size": e.value.dataLabelFontSize,
fill: t.color,
class: "quick-animation"
}, N(s(se)(
e.value.formatter,
s(ve)(r.value),
s(Y)({
p: e.value.valuePrefix,
v: s(ve)(r.value),
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: r, seriesIndex: p }
)), 9, yo))), 256))
], 64))), 256))
])) : m("", !0),
Qe.value ? (o(), n("g", xo, [
(o(!0), n(x, null, F(v.value.extremes.maxSeries, (t, l) => (o(), n("rect", {
x: v.value.drawingArea.left + l * 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: [oe.value, re.value].includes(l) ? e.value.xyHighlighterColor : "transparent",
style: D(`opacity:${e.value.xyHighlighterOpacity}`),
onMouseenter: (r) => v.value.useTooltip(l),
onMouseleave: (r) => v.value.killTooltip(l),
onClick: (r) => v.value.selectDatapoint(l)
}, null, 44, ko))), 256))
])) : m("", !0)
], 64)) : m("", !0),
[w.LINE, w.BAR].includes($.value) ? (o(), n("g", bo, [
e.value.xAxisLabel && $.value === w.LINE ? (o(), n("g", {
key: 0,
ref_key: "xAxisLabel",
ref: pt
}, [
z("text", {
"font-size": e.value.axisLabelsFontSize,
fill: e.value.color,
"text-anchor": "middle",
x: c.value.drawingArea.left + c.value.drawingArea.width / 2,
y: S.value.height - e.value.axisLabelsFontSize / 3
}, N(e.value.xAxisLabel), 9, So)
], 512)) : m("", !0),
e.value.xAxisLabel && $.value === w.BAR ? (o(), n("g", {
key: 1,
ref_key: "xAxisLabel",
ref: pt
}, [
z("text", {
"font-size": e.value.axisLabelsFontSize,
fill: e.value.color,
"text-anchor": "middle",
x: v.value.drawingArea.left + v.value.drawingArea.width / 2,
y: S.value.height - e.value.axisLabelsFontSize / 3
}, N(e.value.xAxisLabel), 9, Ao)
], 512)) : m("", !0),
e.value.yAxisLabel && $.value === w.LINE ? (o(), n("g", {
key: 2,
ref_key: "yAxisLabel",
ref: yt
}, [
z("text", {
"font-size": e.value.axisLabelsFontSize,
fill: e.value.color,
transform: `translate(${e.value.axisLabelsFontSize}, ${c.value.drawingArea.top + c.value.drawingArea.height / 2}) rotate(-90)`,
"text-anchor": "middle"
}, N(e.value.yAxisLabel), 9, wo)
], 512)) : m("", !0),
e.value.yAxisLabel && $.value === w.BAR ? (o(), n("g", {
key: 3,
ref_key: "yAxisLabel",
ref: yt
}, [
z("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"
}, N(e.value.yAxisLabel), 9, Co)
], 512)) : m("", !0)
])) : m("", !0)
], 12, ul)) : m("", !0),
a.$slots.watermark ? (o(), n("div", Lo, [
R(a.$slots, "watermark", Q(K({ isPrinting: s(De) || s(Ne) })), void 0, !0)
])) : m("", !0),
[w.BAR, w.LINE].includes($.value) && e.value.zoomXy && k.value.maxSeriesLength > 1 ? (o(), n("div", {
key: `slicer_${Me.value}`,
ref_key: "quickChartSlicer",
ref: ct
}, [
(o(), Ie(Qa, {
ref_key: "slicerComponent",
ref: Et,
key: `slicer_${Me.value}`,
background: e.value.zoomColor,
borderColor: e.value.backgroundColor,
fontSize: e.value.zoomFontSize,
useResetSlot: e.value.zoomUseResetSlot,
labelLeft: e.value.xyPeriods[y.value.start] ? te.value[0].text : "",
labelRight: e.value.xyPeriods[y.value.end - 1] ? te.value.at(-1).text : "",
textColor: e.value.color,
inputColor: e.value.zoomColor,
selectColor: e.value.zoomHighlightColor,
max: k.value.maxSeriesLength,
min: 0,
valueStart: y.value.start,
valueEnd: y.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: va.value,
minimapIndicatorColor: e.value.zoomMinimap.indicatorColor,
verticalHandles: e.value.zoomMinimap.verticalHandles,
minimapSelectedIndex: re.value,
start: y.value.start,
"onUpdate:start": u[0] || (u[0] = (t) => y.value.start = t),
end: y.value.end,
"onUpdate:end": u[1] || (u[1] = (t) => y.value.end = t),
refreshStartPoint: e.value.zoomStartIndex !== null ? e.value.zoomStartIndex : 0,
refreshEndPoint: e.value.zoomEndIndex !== null ? e.value.zoomEndIndex + 1 : k.value.maxSeriesLength,
enableRangeHandles: e.value.zoomEnableRangeHandles,
enableSelectionDrag: e.value.zoomEnableSelectionDrag,
minimapCompact: e.value.zoomMinimap.compact,
minimapMerged: e.value.zoomMinimap.merged,
allMinimaps: ga.value,
minimapFrameColor: e.value.zoomMinimap.frameColor,
focusOnDrag: e.value.zoomFocusOnDrag,
focusRangeRatio: e.value.zoomFocusRangeRatio,
onReset: ua,
onTrapMouse: ra
}, {
"reset-action": W(({ reset: t }) => [
R(a.$slots, "reset-action", Q(K({ 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", "minimapCompact", "minimapMerged", "allMinimaps", "minimapFrameColor", "focusOnDrag", "focusRangeRatio"]))
])) : m("", !0),
z("div", {
id: `legend-bottom-${Z.value}`
}, null, 8, _o),
gt.value ? (o(), Ie(Ea, {
key: 7,
to: e.value.legendPosition === "top" ? `#legend-top-${Z.value}` : `#legend-bottom-${Z.value}`
}, [
e.value.showLegend ? (o(), n("div", {
key: 0,
ref_key: "quickChartLegend",
ref: dt,
class: "vue-ui-quick-chart-legend",
style: D(`background:transparent;color:${e.value.color}`)
}, [
$.value === w.DONUT ? (o(!0), n(x, { key: 0 }, F(T.value.legend, (t, l) => (o(), n("div", {
class: "vue-ui-quick-chart-legend-item",
onClick: (r) => {
ia(t, T.value.dataset), ye("selectLegend", t);
},
style: D(`cursor: ${T.value.legend.length > 1 ? "pointer" : "default"}; opacity:${L.value.includes(t.id) ? "0.5" : "1"}`)
}, [
e.value.useCustomLegend ? R(a.$slots, "legend", ot({
key: 0,
ref_for: !0
}, { legend: t }), void 0, !0) : (o(), n(x, { key: 1 }, [
Se(s(V), {
name: e.value.legendIcon,
stroke: t.color,
size: e.value.legendIconSize
}, null, 8, ["name", "stroke", "size"]),
z("span", {
style: D(`font-size:${e.value.legendFontSize}px`)
}, N(t.name), 5),
z("span", {
style: D(`font-size:${e.value.legendFontSize}px;font-variant-numeric:tabular-nums`)
}, N(L.value.includes(t.id) ? "-" : s(se)(
e.value.formatter,
t.absoluteValue,
s(Y)({
p: e.value.valuePrefix,
v: t.absoluteValue,
s: e.value.valueSuffix,
r: e.value.dataLabelRoundingValue
}),
{ datapoint: t, seriesIndex: l }
)), 5),
L.value.includes(t.id) ? (o(), n("span", {
key: 0,
style: D(`font-size:${e.value.legendFontSize}px`)
}, " ( - % ) ", 4)) : Ue.value ? (o(), n("span", {
key: 1,
style: D(`font-size:${e.value.legendFontSize}px; font-variant-numeric: tabular-nums;`)
}, " ( - % ) ", 4)) : (o(), n("span", {
key: 2,
style: D(`font-size:${e.value.legendFontSize}px; font-variant-numeric: tabular-nums;`)
}, " (" + N(s(Y)({
v: t.value / T.value.total * 100,
s: "%",
r: e.value.dataLabelRoundingPercentage
})) + ") ", 5))
], 64))
], 12, zo))), 256)) : m("", !0),
$.value === w.LINE ? (o(!0), n(x, { key: 1 }, F(c.value.legend, (t, l) => (o(), n("div", {
class: "vue-ui-quick-chart-legend-item",
onClick: (r) => {
Lt(t.id, c.value.legend.length - 1), ye("selectLegend", t);
},
style: D(`cursor: ${c.value.legend.length > 1 ? "pointer" : "default"}; opacity:${L.value.includes(t.id) ? "0.5" : "1"}`)
}, [
e.value.useCustomLegend ? R(a.$slots, "legend", ot({
key: 0,
ref_for: !0
}, { legend: t }), void 0, !0) : (o(), n(x, { key: 1 }, [
Se(s(V), {
name: e.value.legendIcon,
stroke: t.color,
size: e.value.legendIconSize
}, null, 8, ["name", "stroke", "size"]),
z("span", {
style: D(`font-size:${e.value.legendFontSize}px`)
}, N(t.name), 5)
], 64))
], 12, $o))), 256)) : m("", !0),
$.value === w.BAR ? (o(!0), n(x, { key: 2 }, F(v.value.legend, (t, l) => (o(), n("div", {
class: "vue-ui-quick-chart-legend-item",
onClick: (r) => {
Lt(t.id, v.value.legend.length - 1), ye("selectLegend", t);
},
style: D(`cursor: ${v.value.legend.length > 1 ? "pointer" : "default"}; opacity:${L.value.includes(t.id) ? "0.5" : "1"}`)
}, [
e.value.useCustomLegend ? R(a.$slots, "legend", ot({
key: 0,
ref_for: !0
}, { legend: t }), void 0, !0) : (o(), n(x, { key: 1 }, [
Se(s(V), {
name: e.value.legendIcon,
stroke: t.color,
size: e.value.legendIconSize
}, null, 8, ["name", "stroke", "size"]),
z("span", {
style: D(`font-size:${e.value.legendFontSize}px`)
}, N(t.name), 5)
], 64))
], 12, Eo))), 256)) : m("", !0)
], 4)) : m("", !0)
], 8, ["to"])) : m("", !0),
a.$slots.source ? (o(), n("div", {
key: 8,
ref_key: "source",
ref: ft,
dir: "auto"
}, [
R(a.$slots, "source", {}, void 0, !0)
], 512)) : m("", !0),
Se(s(Ae), {
show: xe.value.showTooltip && me.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: ne.value,
content: ge.value,
isFullscreen: He.value,
isCustom: s(We)(e.value.tooltipCustomFormat),
smooth: e.value.tooltipSmooth,
smoothForce: e.value.tooltipSmoothForce,
smoothSnapThreshold: e.value.tooltipSmoothSnapThreshold,
backdropFilter: e.value.tooltipBackdropFilter
}, {
"tooltip-before": W(() => [
R(a.$slots, "tooltip-before", Q(K({ ...we.value })), void 0, !0)
]),
"tooltip-after": W(() => [
R(a.$slots, "tooltip-after", Q(K({ ...we.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "smoothForce", "smoothSnapThreshold", "backdropFilter"]),
s(U) ? (o(), Ie(qa, { key: 9 })) : m("", !0)
], 46, il)) : (o(), n("div", Fo, [
Se(s(V), {
name: "circleCancel",
stroke: "red"
}),
u[5] || (u[5] = z("span", null, "Dataset is not processable", -1))
]));
}
}, Io = /* @__PURE__ */ Ka(To, [["__scopeId", "data-v-a559e811"]]), Yo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Io
}, Symbol.toStringTag, { value: "Module" }));
export {
Xo as a,
Yo as b,
Io as v
};