vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,168 lines (1,167 loc) • 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-2iaAPQ_c.js";
import { t as Ht, u as Ua } from "./useResponsive-DfdjqQps.js";
import { u as Va, a as ut } from "./useNestedProp-2p4Tjzc8.js";
import { u as Ha, B as qa } from "./BaseScanner-BMpwQAfz.js";
import { u as Ga } from "./usePrinter-ChVMpU2f.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-CqYIrJ8I.js";
import { S as Qa } from "./Slicer-BCPOPoP2.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-CbVDYv89.js")), X = Fe(() => import("./PackageVersion-Br3DrrFh.js")), ce = Fe(() => import("./PenAndPaper-CvyKWfNl.js")), Ae = Fe(() => import("./Tooltip-D0pGX8qz.js")), st = Fe(() => import("./UserOptions-BQO4YFrn.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: {