vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,189 lines • 66.2 kB
JavaScript
import { ref as z, computed as B, watch as Fe, onMounted as St, onBeforeUnmount as wt, nextTick as Ie, unref as e, openBlock as a, createElementBlock as i, normalizeClass as se, normalizeStyle as N, createBlock as Ee, createCommentVNode as g, createSlots as At, withCtx as J, renderSlot as F, normalizeProps as ue, guardReactiveProps as de, toDisplayString as T, createVNode as ce, createElementVNode as _, Fragment as m, renderList as $, mergeProps as Me } from "vue";
import { u as _t, c as Lt, t as zt, a as $t, p as q, C as it, b as Ct, J as It, e as Et, d as Ue, m as Pt, D as nt, X as Tt, j as Ot, k as ye, n as Be, i as H, f as D, R as lt, v as X, x as Pe, y as De } from "./index-WrV3SAID.js";
import { t as Rt, u as Nt } from "./useResponsive-CoxXLe23.js";
import Te from "./BaseIcon-MqKW8Nkx.js";
import { _ as Ft } from "./Tooltip-ho4JxRm-.js";
import { u as Mt, U as Ut } from "./usePrinter-kVpf1iV8.js";
import { S as Bt } from "./Slicer-B6THn4h_.js";
import Dt from "./vue-ui-skeleton-Qec_XSRf.js";
import { u as rt } from "./useNestedProp-Cj0kHD7k.js";
import { _ as Vt } from "./PackageVersion-1NslmM8M.js";
import { P as qt } from "./PenAndPaper-BF1ZRVm3.js";
import { _ as Wt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const A = {
LINE: "LINE",
BAR: "BAR",
DONUT: "DONUT"
}, jt = ["SERIE", "SERIES", "DATA", "VALUE", "VALUES", "NUM"];
function Gt({ dataset: f, barLineSwitch: C = 6 }) {
let p = null, M = null, O = 0;
if ((typeof f == "number" || typeof f == "string") && console.warn(`The provided dataset (${f}) is not sufficient to build a chart`), ke(f) && (Z(f) && (f.length < C ? p = A.BAR : p = A.LINE, M = f, O = f.length), Oe(f))) {
if (!Xt(f))
return console.warn("The objects in the dataset array have a different data structure. Either keys or value types are different."), !1;
const ae = Object.keys(f[0]), he = Object.values(f[0]);
if (!ae.some((E) => Zt(E)))
return console.warn("The data type of the dataset objects in the array must contain one of the following keys: DATA, SERIES, VALUE, VALUES, NUM. Casing is not important."), !1;
st(he, (E) => typeof E == "number") && (p = A.DONUT, M = f), st(he, (E) => Array.isArray(E) && Z(E)) && (ut(f) > C ? p = A.LINE : p = A.BAR, O = ut(f), M = f.map((E) => ({
...E,
data: Yt(E, (G) => Z(G))
}))), f = f.map((E) => dt(E)), M = M.map((E) => dt(E));
}
return ke(f) && [...new Set(f.flatMap((ae) => Array.isArray(ae)))][0], {
dataset: f,
type: p,
usableDataset: M,
maxSeriesLength: O
};
}
function ct(f) {
return !f || ke(f) && !f.length;
}
function ke(f) {
return Array.isArray(f);
}
function Z(f) {
if (!ke(f) || ct(f)) return !1;
const C = f.map((p) => Number(p));
return ![...new Set(C.flatMap((p) => typeof p == "number" && !isNaN(p)))].includes(!1);
}
function Oe(f) {
return !ke(f) || ct(f) || !![...new Set(f.flatMap((p) => typeof p == "object" && !Array.isArray(p)))].includes(!1) ? !1 : !f.map((p) => Object.keys(p).length > 0).includes(!1);
}
function Ht(f, C) {
const p = Object.keys(f).sort(), M = Object.keys(C).sort();
if (p.length !== M.length)
return !1;
for (let O = 0; O < p.length; O += 1) {
const W = p[O], oe = M[O];
if (W !== oe || typeof f[W] != typeof C[oe])
return !1;
}
return !0;
}
function Xt(f) {
if (f.length <= 1) return !0;
for (let C = 0; C < f.length; C += 1)
for (let p = C + 1; p < f.length; p += 1)
if (!Ht(f[C], f[p]))
return !1;
return !0;
}
function Zt(f) {
return jt.includes(f.toUpperCase());
}
function st(f, C) {
let p = [];
for (let M = 0; M < f.length; M += 1)
p.push(C(f[M]));
return p.includes(!0);
}
function ut(f) {
return Math.max(...[...f].flatMap((C) => Object.values(C).filter((p) => Z(p)).map((p) => p.length)));
}
function Yt(f, C) {
return Object.values(f).filter((p) => C(p))[0];
}
function dt(f) {
const C = {};
for (let p in f)
f.hasOwnProperty(p) && (C[p.toUpperCase()] = f[p]);
return C;
}
const Jt = ["id"], Qt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"], eo = ["x", "y", "width", "height"], to = ["width", "height"], oo = ["id"], ao = ["id"], io = ["id"], no = ["flood-color"], lo = {
key: 0,
class: "donut-label-connectors"
}, ro = ["d", "stroke", "stroke-width", "filter"], so = ["cx", "cy", "r", "fill", "filter"], uo = { class: "donut" }, co = ["d", "fill", "stroke", "stroke-width", "filter"], ho = ["d", "onMouseenter", "onClick"], fo = {
key: 1,
class: "donut-labels quick-animation"
}, vo = ["cx", "cy", "fill", "stroke", "filter"], go = ["text-anchor", "x", "y", "fill", "font-size", "filter"], mo = ["text-anchor", "x", "y", "fill", "font-size", "filter"], po = {
key: 2,
class: "donut-hollow quick-animation"
}, xo = ["x", "y", "font-size", "fill"], yo = ["x", "y", "font-size", "fill"], ko = {
key: 0,
class: "line-grid"
}, bo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], So = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], wo = {
key: 1,
class: "line-axis"
}, Ao = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], _o = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Lo = {
key: 2,
class: "yLabels"
}, zo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], $o = ["x", "y", "font-size", "fill"], Co = {
key: 3,
class: "periodLabels"
}, Io = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Eo = ["font-size", "text-anchor", "fill", "transform"], Po = { class: "plots" }, To = { class: "line-plot-series" }, Oo = ["d", "stroke", "stroke-width"], Ro = ["d", "stroke", "stroke-width"], No = ["d", "stroke", "stroke-width"], Fo = ["d", "stroke", "stroke-width"], Mo = ["cx", "cy", "fill", "stroke"], Uo = {
key: 4,
class: "dataLabels"
}, Bo = ["font-size", "fill", "x", "y"], Do = { class: "tooltip-traps" }, Vo = ["x", "y", "height", "width", "fill", "onMouseenter", "onClick"], qo = {
key: 0,
class: "line-grid"
}, Wo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], jo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Go = {
key: 1,
class: "line-axis"
}, Ho = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Xo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Zo = {
key: 2,
class: "yLabels"
}, Yo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Jo = ["x", "y", "font-size", "fill"], Qo = {
key: 3,
class: "periodLabels"
}, Ko = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ea = ["font-size", "text-anchor", "transform", "fill"], ta = { class: "plots" }, oa = ["x", "width", "height", "y", "fill", "stroke", "stroke-width"], aa = ["to"], ia = ["from", "to"], na = {
key: 4,
class: "dataLabels"
}, la = ["x", "y", "font-size", "fill"], ra = { class: "tooltip-traps" }, sa = ["x", "y", "height", "width", "fill", "onMouseenter", "onClick"], ua = {
key: 6,
class: "axis-labels"
}, da = { key: 0 }, ca = ["font-size", "fill", "x", "y"], ha = { key: 1 }, fa = ["font-size", "fill", "x", "y"], va = { key: 2 }, ga = ["font-size", "fill", "transform"], ma = { key: 3 }, pa = ["font-size", "fill", "transform"], xa = {
key: 6,
class: "vue-data-ui-watermark"
}, ya = ["onClick"], ka = ["onClick"], ba = ["onClick"], Sa = {
key: 1,
class: "vue-ui-quick-chart-not-processable"
}, wa = {
__name: "vue-ui-quick-chart",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: [Array, Object, String, Number],
default() {
return null;
}
}
},
emits: ["selectDatapoint", "selectLegend"],
setup(f, { expose: C, emit: p }) {
const { vue_ui_quick_chart: M } = _t(), O = f, W = z(null), oe = z(null), ae = z(null), he = z(null), E = z(Lt()), G = z(!1), fe = z(null), Q = z(""), j = z(null), Ve = z(null), qe = z(null), w = z([]), We = z(0), be = z(0), t = B({
get: () => He(),
set: (n) => n
}), ht = B(() => t.value.showUserOptionsOnChartHover), je = B(() => t.value.keepUserOptionsStateOnChartLeave), Se = z(!t.value.showUserOptionsOnChartHover);
function Ge(n = !1) {
ht.value && (Se.value = n);
}
function He() {
const n = rt({
userConfig: O.config,
defaultConfig: M
});
let d = {};
return n.theme ? d = {
...rt({
userConfig: zt.vue_ui_quick_chart[n.theme] || O.config,
defaultConfig: n
}),
customPalette: $t[n.theme] || q
} : d = n, O.config && it(O.config, "zoomStartIndex") ? d.zoomStartIndex = O.config.zoomStartIndex : d.zoomStartIndex = null, O.config && it(O.config, "zoomEndIndex") ? d.zoomEndIndex = O.config.zoomEndIndex : d.zoomEndIndex = null, d;
}
Fe(() => O.config, (n) => {
t.value = He(), k.value.width = t.value.width, k.value.height = t.value.height, Se.value = !t.value.showUserOptionsOnChartHover, Ye();
}, { deep: !0 }), Fe(() => O.dataset, (n) => {
x.value = ge.value, b.value.start = 0, b.value.end = x.value.maxSeriesLength, be.value += 1;
}, { deep: !0 });
const ve = B(() => Ct(t.value.customPalette)), ie = p, ge = B(() => {
const n = Gt({ dataset: It(O.dataset, [
"serie",
"series",
"data",
"value",
"values",
"num"
]), barLineSwitch: t.value.chartIsBarUnderDatasetLength });
return n || console.error("VueUiQuickChart : Dataset is not processable"), n;
}), x = z(ge.value), ft = B(() => !!x.value), L = B(() => x.value ? x.value.type : null);
Fe(() => L.value, (n) => {
n || Et({
componentName: "VueUiQuickChart",
type: "dataset"
});
}, { immediate: !0 });
const { isPrinting: we, isImaging: Ae, generatePdf: Xe, generateImage: Ze } = Mt({
elementId: `${L.value}_${E.value}`,
fileName: t.value.title || L.value
}), vt = B(() => t.value.showUserOptions && !t.value.title), k = z({
width: t.value.width,
height: t.value.height
}), _e = z({
showTooltip: t.value.showTooltip
}), Le = z(null);
St(() => {
Ye();
});
function Ye() {
if (t.value.responsive) {
const n = Rt(() => {
const { width: d, height: o } = Nt({
chart: W.value,
title: t.value.title ? oe.value : null,
legend: t.value.showLegend ? ae.value : null,
slicer: [A.BAR, A.LINE].includes(L.value) && t.value.zoomXy && x.value.maxSeriesLength > 1 ? he.value : null,
source: Ve.value,
noTitle: qe.value
});
k.value.width = d, k.value.height = o;
});
Le.value = new ResizeObserver(n), Le.value.observe(W.value.parentNode);
}
ot();
}
wt(() => {
Le.value && Le.value.disconnect();
});
const gt = B(() => {
switch (L.value) {
case A.LINE:
return `0 0 ${k.value.width <= 0 ? 10 : k.value.width} ${k.value.height <= 0 ? 10 : k.value.height}`;
case A.BAR:
return `0 0 ${k.value.width <= 0 ? 10 : k.value.width} ${k.value.height <= 0 ? 10 : k.value.height}`;
case A.DONUT:
return `0 0 ${k.value.width <= 0 ? 10 : k.value.width} ${k.value.height <= 0 ? 10 : k.value.height}`;
default:
return `0 0 ${k.value.width <= 0 ? 10 : k.value.width} ${k.value.height <= 0 ? 10 : k.value.height}`;
}
});
function Je(n) {
return [...n].map((d) => d.value).reduce((d, o) => d + o, 0);
}
function me(n) {
return t.value.blurOnHover && ![null, void 0].includes(j.value) && j.value !== n ? `url(#blur_${E.value})` : "";
}
function Qe(n, d) {
w.value.includes(n) ? w.value = w.value.filter((o) => o !== n) : w.value.length < d && w.value.push(n);
}
const Ke = z(null), et = z(null), ze = z(!1);
function mt(n, d) {
ze.value = !0;
let o = n.value;
const s = ge.value.dataset.find((u, v) => n.id === `donut_${v}`).VALUE;
if (w.value.includes(n.id)) {
let u = function() {
o > s ? (ze.value = !1, cancelAnimationFrame(et.value), x.value = {
...x.value,
dataset: x.value.dataset.map((v, R) => n.id === `donut_${R}` ? {
...v,
value: s,
VALUE: s
} : v)
}) : (o += s * 0.025, x.value = {
...x.value,
dataset: x.value.dataset.map((v, R) => n.id === `donut_${R}` ? {
...v,
value: o,
VALUE: o
} : v)
}, et.value = requestAnimationFrame(u));
};
w.value = w.value.filter((v) => v !== n.id), u();
} else if (d.length > 1) {
let u = function() {
o < s / 100 ? (ze.value = !1, cancelAnimationFrame(Ke.value), w.value.push(n.id), x.value = {
...x.value,
dataset: x.value.dataset.map((v, R) => n.id === `donut_${R}` ? {
...v,
value: 0,
VALUE: 0
} : v)
}) : (o /= 1.1, x.value = {
...x.value,
dataset: x.value.dataset.map((v, R) => n.id === `donut_${R}` ? {
...v,
value: o,
VALUE: o
} : v)
}, Ke.value = requestAnimationFrame(u));
};
u();
}
}
const Y = z(null);
function pt(n) {
Y.value = n;
}
const tt = B(() => t.value.donutThicknessRatio < 0.15 ? 0.15 : t.value.donutThicknessRatio > 0.4 ? 0.4 : t.value.donutThicknessRatio), I = B(() => {
if (L.value !== A.DONUT) return null;
const n = x.value.dataset.map((l, r) => ({
...l,
value: l.VALUE || l.DATA || l.SERIE || l.VALUES || l.NUM || 0,
name: l.NAME || l.DESCRIPTION || l.TITLE || l.LABEL || `Serie ${r}`,
id: `donut_${r}`
})).map((l, r) => ({
...l,
color: l.COLOR ? Ue(l.COLOR) : ve.value[r + t.value.paletteStartIndex] || q[r + t.value.paletteStartIndex] || q[(r + t.value.paletteStartIndex) % q.length],
immutableValue: l.value
}));
function d(l, r) {
return D({
v: isNaN(l.value / Je(r)) ? 0 : l.value / Je(r) * 100,
s: "%",
r: t.value.dataLabelRoundingPercentage
});
}
function o(l) {
return l.proportion * 100 > t.value.donutHideLabelUnderPercentage;
}
function s(l, r) {
const S = ge.value.dataset.find((P, U) => `donut_${U}` === l).VALUE;
return Math.abs(String(Number(S.toFixed(0))).length - String(Number(r.toFixed(0))).length);
}
function u({ datapoint: l, seriesIndex: r }) {
fe.value = { datapoint: l, seriesIndex: r, config: t.value, dataset: n }, j.value = l.id;
const S = t.value.tooltipCustomFormat;
if (Pe(S) && De(() => S({
datapoint: l,
seriesIndex: r,
series: n,
config: t.value
})))
Q.value = S({
datapoint: l,
seriesIndex: r,
series: n,
config: t.value
});
else {
let y = "";
y += `<div style="width:100%;text-align:center;border-bottom:1px solid ${t.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${l.name}</div>`, y += `<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="${l.color}"/></svg>`, y += `<b>${H(
t.value.formatter,
l.value,
D({
p: t.value.valuePrefix,
v: l.value,
s: t.value.valueSuffix,
r: t.value.dataLabelRoundingValue
}),
{ datapoint: l, seriesIndex: r }
)}</b>`, y += `<span>(${D({ v: l.proportion * 100, s: "%", r: t.value.dataLabelRoundingPercentage })})</span></div>`, Q.value = `<div>${y}</div>`;
}
G.value = !0;
}
function v() {
G.value = !1, j.value = null, Y.value = null;
}
const R = {
centerX: k.value.width / 2,
centerY: k.value.height / 2
}, V = n.filter((l) => !w.value.includes(l.id)).map((l) => l.value || 0).reduce((l, r) => l + r, 0), le = n.map((l, r) => ({
...l,
proportion: (l.value || 0) / V,
value: l.value || 0,
absoluteValue: ge.value.dataset.find((S, y) => `donut_${y}` === l.id).VALUE
})), K = k.value.width / 2, re = k.value.height / 2, ee = k.value.height * t.value.donutRadiusRatio;
return {
dataset: le.filter((l) => !w.value.includes(l.id)),
legend: le,
drawingArea: R,
displayArcPercentage: d,
isArcBigEnough: o,
useTooltip: u,
killTooltip: v,
getSpaces: s,
total: V,
cx: K,
cy: re,
radius: ee,
chart: Pt(
{ series: n.filter((l) => !w.value.includes(l.id)) },
K,
re,
ee,
ee,
1.99999,
2,
1,
360,
105.25,
k.value.height * tt.value
)
};
}), b = z({
start: 0,
end: x.value.maxSeriesLength
});
function xt() {
ot();
}
const ne = z(null);
async function ot() {
(t.value.zoomStartIndex !== null || t.value.zoomEndIndex !== null) && ne.value ? (t.value.zoomStartIndex !== null && (await Ie(), await Ie(), ne.value && ne.value.setStartValue(t.value.zoomStartIndex)), t.value.zoomEndIndex !== null && (await Ie(), await Ie(), ne.value && ne.value.setEndValue(yt(t.value.zoomEndIndex + 1)))) : (b.value = {
start: 0,
end: x.value.maxSeriesLength
}, be.value += 1);
}
function yt(n) {
const d = x.value.maxSeriesLength;
return n > d ? d : n < 0 || t.value.zoomStartIndex !== null && n < t.value.zoomStartIndex ? t.value.zoomStartIndex !== null ? t.value.zoomStartIndex + 1 : 1 : n;
}
const kt = B(() => {
if (!t.value.zoomMinimap.show || L.value === A.DONUT) return [];
let n = [];
Z(x.value.dataset) && (n = x.value.dataset), Oe(x.value.dataset) && (n = x.value.dataset.map((u, v) => ({
values: u.VALUE || u.DATA || u.SERIE || u.SERIES || u.VALUES || u.NUM || 0,
id: L.value === A.LINE ? `line_${v}` : `bar_${v}`
})).filter((u) => !w.value.includes(u.id)));
const d = Z(n) ? n.length : Math.max(...n.map((u) => u.values.length));
let o = [];
if (Z(n))
o = n;
else
for (let u = 0; u < d; u += 1)
o.push(n.map((v) => v.values[u] || 0).reduce((v, R) => (v || 0) + (R || 0), 0));
const s = Math.min(...o);
return o.map((u) => u + (s < 0 ? Math.abs(s) : 0));
}), h = B(() => {
if (L.value !== A.LINE) return null;
const n = {
height: k.value.height,
width: k.value.width
}, d = {
left: t.value.xyPaddingLeft,
top: t.value.xyPaddingTop,
right: n.width - t.value.xyPaddingRight,
bottom: n.height - t.value.xyPaddingBottom,
width: n.width - t.value.xyPaddingLeft - t.value.xyPaddingRight,
height: n.height - t.value.xyPaddingTop - t.value.xyPaddingBottom
};
let o = [];
Z(x.value.dataset) && (o = [
{
values: x.value.dataset.slice(b.value.start, b.value.end),
absoluteIndices: x.value.dataset.map((l, r) => r).slice(b.value.start, b.value.end),
name: t.value.title,
color: ve.value[t.value.paletteStartIndex] || q[t.value.paletteStartIndex],
id: "line_0"
}
]), Oe(x.value.dataset) && (o = x.value.dataset.map((l, r) => ({
...l,
values: l.VALUE || l.DATA || l.SERIE || l.SERIES || l.VALUES || l.NUM || 0,
name: l.NAME || l.DESCRIPTION || l.TITLE || l.LABEL || `Serie ${r}`,
id: `line_${r}`
})).map((l, r) => ({
...l,
color: l.COLOR ? Ue(l.COLOR) : ve.value[r + t.value.paletteStartIndex] || q[r + t.value.paletteStartIndex] || q[(r + t.value.paletteStartIndex) % q.length],
values: l.values.slice(b.value.start, b.value.end),
absoluteIndices: l.values.map((S, y) => y).slice(b.value.start, b.value.end)
})));
const s = {
max: Math.max(...o.filter((l) => !w.value.includes(l.id)).flatMap((l) => l.values)),
min: Math.min(...o.filter((l) => !w.value.includes(l.id)).flatMap((l) => l.values)),
maxSeries: Math.max(...o.map((l) => l.values.length))
}, u = nt(s.min < 0 ? s.min : 0, s.max < 0 ? 0 : s.max, t.value.xyScaleSegments), v = s.min < 0 ? Math.abs(s.min) : 0, R = s.max < 0 ? d.top : d.bottom - v / (u.max + v) * d.height, V = d.width / s.maxSeries, le = u.ticks.map((l) => ({
y: d.bottom - d.height * ((l + v) / (u.max + v)),
x: d.left - 8,
value: l
})), K = o.map((l, r) => ({
...l,
coordinates: l.values.map((S, y) => ({
x: d.left + V * (y + 1) - V / 2,
y: d.bottom - (S + v) / (u.max + v) * d.height,
value: S
}))
})).map((l) => {
let r = [];
return l.coordinates.forEach((S) => {
r.push(`${S.x},${S.y} `);
}), {
...l,
linePath: r.join(" ")
};
});
function re(l) {
j.value = l, Y.value = l;
const r = o.map((y) => ({
...y,
value: y.values[l],
absoluteIndex: y.absoluteIndices[l]
})).filter((y) => !w.value.includes(y.id));
fe.value = { datapoint: r, seriesIndex: l, config: t.value, dataset: o };
const S = t.value.tooltipCustomFormat;
if (Pe(S) && De(() => S({
datapoint: r,
seriesIndex: l,
series: o,
config: t.value
})))
Q.value = S({
datapoint: r,
seriesIndex: l,
series: o,
config: t.value
});
else {
let y = "";
t.value.xyPeriods[r[0].absoluteIndex] && (y += `<div style="border-bottom:1px solid ${t.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${t.value.xyPeriods[r[0].absoluteIndex]}</div>`), r.forEach((P, U) => {
y += `
<div style="display:flex; flex-wrap: wrap; align-items:center; gap:3px;">
<svg viewBox="0 0 12 12" height="14" width="12"><circle cx="6" cy="6" r="6" stroke="none" fill="${P.color}"/></svg>
<span>${P.name}:</span>
<b>${H(
t.value.formatter,
P.value,
D({
p: t.value.valuePrefix,
v: P.value,
s: t.value.valueSuffix,
r: t.value.dataLabelRoundingValue
}),
{ datapoint: P, seriesIndex: U }
)}
</b>
</div>
`;
}), Q.value = y;
}
G.value = !0;
}
function ee() {
j.value = null, G.value = !1;
}
return {
absoluteZero: R,
dataset: K.filter((l) => !w.value.includes(l.id)),
legend: K,
drawingArea: d,
extremes: s,
slotSize: V,
yLabels: le,
useTooltip: re,
killTooltip: ee
};
}), c = B(() => {
if (L.value !== A.BAR) return null;
const n = {
height: k.value.height,
width: k.value.width
}, d = {
left: t.value.xyPaddingLeft,
top: t.value.xyPaddingTop,
right: n.width - t.value.xyPaddingRight,
bottom: n.height - t.value.xyPaddingBottom,
width: n.width - t.value.xyPaddingLeft - t.value.xyPaddingRight,
height: n.height - t.value.xyPaddingTop - t.value.xyPaddingBottom
};
let o = [];
Z(x.value.dataset) && (o = [
{
values: x.value.dataset.slice(b.value.start, b.value.end),
absoluteIndices: x.value.dataset.map((r, S) => S).slice(b.value.start, b.value.end),
name: t.value.title,
color: ve.value[t.value.paletteStartIndex] || q[t.value.paletteStartIndex],
id: "bar_0"
}
]), Oe(x.value.dataset) && (o = x.value.dataset.map((r, S) => ({
...r,
values: r.VALUE || r.DATA || r.SERIE || r.SERIES || r.VALUES || r.NUM || 0,
name: r.NAME || r.DESCRIPTION || r.TITLE || r.LABEL || `Serie ${S}`,
id: `bar_${S}`
})).map((r, S) => ({
...r,
color: r.COLOR ? Ue(r.COLOR) : ve.value[S + t.value.paletteStartIndex] || q[S + t.value.paletteStartIndex] || q[(S + t.value.paletteStartIndex) % q.length],
values: r.values.slice(b.value.start, b.value.end),
absoluteIndices: r.values.map((y, P) => P).slice(b.value.start, b.value.end)
})));
const s = {
max: Math.max(...o.filter((r) => !w.value.includes(r.id)).flatMap((r) => r.values)) < 0 ? 0 : Math.max(...o.filter((r) => !w.value.includes(r.id)).flatMap((r) => r.values)),
min: Math.min(...o.filter((r) => !w.value.includes(r.id)).flatMap((r) => r.values)),
maxSeries: Math.max(...o.filter((r) => !w.value.includes(r.id)).map((r) => r.values.length))
}, u = nt(s.min < 0 ? s.min : 0, s.max, t.value.xyScaleSegments), v = u.min < 0 ? Math.abs(u.min) : 0, R = d.bottom - v / (u.max + v) * d.height, V = d.width / s.maxSeries, le = u.ticks.map((r) => ({
y: d.bottom - d.height * ((r + v) / (u.max + v)),
x: d.left - 8,
value: r
})), K = o.map((r, S) => ({
...r,
coordinates: r.values.map((y, P) => {
const U = (y + v) / (s.max + v) * d.height, pe = Math.abs(y) / Math.abs(s.min) * (d.height - R), Ne = v / (s.max + v) * d.height, xe = V / o.filter((te) => !w.value.includes(te.id)).length - t.value.barGap / o.filter((te) => !w.value.includes(te.id)).length;
return {
x: d.left + V * P + xe * S + t.value.barGap / 2,
y: y > 0 ? d.bottom - U : R,
height: y > 0 ? U - Ne : pe,
value: y,
width: xe
};
})
})), re = o.filter((r) => !w.value.includes(r.id)).map((r, S) => ({
...r,
coordinates: r.values.map((y, P) => {
const U = (y + v) / (s.max + v) * d.height, pe = Math.abs(y) / (s.max + v) * d.height, Ne = v / (s.max + v) * d.height, xe = V / o.filter((te) => !w.value.includes(te.id)).length - t.value.barGap / o.filter((te) => !w.value.includes(te.id)).length;
return {
x: d.left + V * P + xe * S + t.value.barGap / 2,
y: y > 0 ? d.bottom - U : R,
height: y > 0 ? U - Ne : pe,
value: y,
width: xe
};
})
}));
function ee(r) {
j.value = r, Y.value = r;
const S = o.map((P) => ({
...P,
value: P.values[r],
absoluteIndex: P.absoluteIndices[r]
})).filter((P) => !w.value.includes(P.id));
fe.value = { datapoint: S, seriesIndex: r, config: t.value, dataset: o };
const y = t.value.tooltipCustomFormat;
if (Pe(y) && De(() => y({
datapoint: S,
seriesIndex: r,
series: o,
config: t.value
})))
Q.value = y({
point: S,
seriesIndex: r,
series: o,
config: t.value
});
else {
let P = "";
t.value.xyPeriods[S[0].absoluteIndex] && (P += `<div style="border-bottom:1px solid ${t.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${t.value.xyPeriods[S[0].absoluteIndex]}</div>`), S.forEach((U, pe) => {
P += `
<div style="display:flex; flex-wrap: wrap; align-items:center; gap:3px;">
<svg viewBox="0 0 12 12" height="14" width="12"><rect x=0 y="0" width="12" height="12" rx="1" stroke="none" fill="${U.color}"/></svg>
<span>${U.name}:</span>
<b>${H(
t.value.formatter,
U.value,
D({
p: t.value.valuePrefix,
v: U.value,
s: t.value.valueSuffix,
r: t.value.dataLabelRoundingValue
}),
{ datapoint: U, seriesIndex: pe }
)}
</b>
</div>
`;
}), Q.value = P;
}
G.value = !0;
}
function l() {
G.value = !1, j.value = null, Y.value = null;
}
return {
absoluteZero: R,
dataset: re.filter((r) => !w.value.includes(r.id)),
legend: K,
drawingArea: d,
extremes: s,
slotSize: V,
yLabels: le,
useTooltip: ee,
killTooltip: l
};
}), $e = z(!1);
function bt(n) {
$e.value = n, We.value += 1;
}
function at() {
_e.value.showTooltip = !_e.value.showTooltip;
}
const Ce = z(!1);
function Re() {
Ce.value = !Ce.value;
}
return C({
generatePdf: Xe,
generateImage: Ze,
toggleTooltip: at,
toggleAnnotator: Re
}), (n, d) => e(ft) ? (a(), i("div", {
key: 0,
id: `${e(L)}_${e(E)}`,
ref_key: "quickChart",
ref: W,
class: se({ "vue-ui-quick-chart": !0, "vue-data-ui-wrapper-fullscreen": e($e) }),
style: N(`background:${e(t).backgroundColor};color:${e(t).color};font-family:${e(t).fontFamily}; position: relative; ${e(t).responsive ? "height: 100%" : ""}`),
onMouseenter: d[5] || (d[5] = () => Ge(!0)),
onMouseleave: d[6] || (d[6] = () => Ge(!1))
}, [
e(t).userOptionsButtons.annotator ? (a(), Ee(qt, {
key: 0,
parent: e(W),
backgroundColor: e(t).backgroundColor,
color: e(t).color,
active: e(Ce),
onClose: Re
}, null, 8, ["parent", "backgroundColor", "color", "active"])) : g("", !0),
e(vt) ? (a(), i("div", {
key: 1,
ref_key: "noTitle",
ref: qe,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : g("", !0),
e(t).showUserOptions && (e(je) || e(Se)) ? (a(), Ee(Ut, {
ref: "details",
key: `user_option_${e(We)}`,
backgroundColor: e(t).backgroundColor,
color: e(t).color,
isPrinting: e(we),
isImaging: e(Ae),
uid: e(E),
hasTooltip: e(t).userOptionsButtons.tooltip && e(t).showTooltip,
hasPdf: e(t).userOptionsButtons.pdf,
hasImg: e(t).userOptionsButtons.img,
hasFullscreen: e(t).userOptionsButtons.fullscreen,
hasXls: !1,
isTooltip: e(_e).showTooltip,
isFullscreen: e($e),
titles: { ...e(t).userOptionsButtonTitles },
chartElement: e(W),
position: e(t).userOptionsPosition,
hasAnnotator: e(t).userOptionsButtons.annotator,
isAnnotation: e(Ce),
onToggleFullscreen: bt,
onGeneratePdf: e(Xe),
onGenerateImage: e(Ze),
onToggleTooltip: at,
onToggleAnnotator: Re,
style: N({
visibility: e(je) ? e(Se) ? "visible" : "hidden" : "visible"
})
}, At({ _: 2 }, [
n.$slots.optionTooltip ? {
name: "optionTooltip",
fn: J(() => [
F(n.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "0"
} : void 0,
n.$slots.optionPdf ? {
name: "optionPdf",
fn: J(() => [
F(n.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
n.$slots.optionImg ? {
name: "optionImg",
fn: J(() => [
F(n.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
n.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: J(({ toggleFullscreen: o, isFullscreen: s }) => [
F(n.$slots, "optionFullscreen", ue(de({ toggleFullscreen: o, isFullscreen: s })), void 0, !0)
]),
key: "3"
} : void 0,
n.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: J(({ toggleAnnotator: o, isAnnotator: s }) => [
F(n.$slots, "optionAnnotator", ue(de({ toggleAnnotator: o, isAnnotator: s })), void 0, !0)
]),
key: "4"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
e(t).title ? (a(), i("div", {
key: 3,
ref_key: "quickChartTitle",
ref: oe,
class: "vue-ui-quick-chart-title",
style: N(`background:transparent;color:${e(t).color};font-size:${e(t).titleFontSize}px;font-weight:${e(t).titleBold ? "bold" : "normal"};text-align:${e(t).titleTextAlign}`)
}, T(e(t).title), 5)) : g("", !0),
e(L) ? (a(), i("svg", {
key: 4,
xmlns: e(Tt),
viewBox: e(gt),
style: N(`max-width:100%;overflow:visible;background:transparent;color:${e(t).color}`)
}, [
ce(Vt),
n.$slots["chart-background"] && e(L) === A.BAR ? (a(), i("foreignObject", {
key: 0,
x: e(c).drawingArea.left,
y: e(c).drawingArea.top,
width: e(c).drawingArea.width,
height: e(c).drawingArea.height,
style: {
pointerEvents: "none"
}
}, [
F(n.$slots, "chart-background", {}, void 0, !0)
], 8, Kt)) : g("", !0),
n.$slots["chart-background"] && e(L) === A.LINE ? (a(), i("foreignObject", {
key: 1,
x: e(h).drawingArea.left,
y: e(h).drawingArea.top,
width: e(h).drawingArea.width,
height: e(h).drawingArea.height,
style: {
pointerEvents: "none"
}
}, [
F(n.$slots, "chart-background", {}, void 0, !0)
], 8, eo)) : g("", !0),
n.$slots["chart-background"] && e(L) === A.DONUT ? (a(), i("foreignObject", {
key: 2,
x: 0,
y: 0,
width: e(k).width,
height: e(k).height,
style: {
pointerEvents: "none"
}
}, [
F(n.$slots, "chart-background", {}, void 0, !0)
], 8, to)) : g("", !0),
_("defs", null, [
_("filter", {
id: `blur_${e(E)}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
_("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 2,
id: `blur_std_${e(E)}`
}, null, 8, ao),
d[7] || (d[7] = _("feColorMatrix", {
type: "saturate",
values: "0"
}, null, -1))
], 8, oo),
_("filter", {
id: `shadow_${e(E)}`,
"color-interpolation-filters": "sRGB"
}, [
_("feDropShadow", {
dx: "0",
dy: "0",
stdDeviation: "10",
"flood-opacity": "0.5",
"flood-color": e(t).donutShadowColor
}, null, 8, no)
], 8, io)
]),
e(L) === A.DONUT ? (a(), i(m, { key: 3 }, [
e(t).showDataLabels ? (a(), i("g", lo, [
(a(!0), i(m, null, $(e(I).chart, (o, s) => (a(), i(m, null, [
e(I).isArcBigEnough(o) ? (a(), i("path", {
key: 0,
d: e(Ot)(o, { x: e(k).width / 2, y: e(k).height / 2 }, 16, 16, !1, !1, e(k).height * e(tt)),
stroke: o.color,
"stroke-width": e(t).donutLabelMarkerStrokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none",
filter: me(o.id)
}, null, 8, ro)) : g("", !0)
], 64))), 256))
])) : g("", !0),
_("circle", {
cx: e(I).cx,
cy: e(I).cy,
r: e(I).radius,
fill: e(t).backgroundColor,
filter: e(t).donutUseShadow ? `url(#shadow_${e(E)})` : ""
}, null, 8, so),
_("g", uo, [
(a(!0), i(m, null, $(e(I).chart, (o, s) => (a(), i("path", {
d: o.arcSlice,
fill: o.color,
stroke: e(t).backgroundColor,
"stroke-width": e(t).donutStrokeWidth,
filter: me(o.id)
}, null, 8, co))), 256)),
(a(!0), i(m, null, $(e(I).chart, (o, s) => (a(), i("path", {
d: o.arcSlice,
fill: "transparent",
onMouseenter: (u) => e(I).useTooltip({ datapoint: o, seriesIndex: s }),
onMouseout: d[0] || (d[0] = (u) => e(I).killTooltip()),
onClick: (u) => ie("selectDatapoint", o)
}, null, 40, ho))), 256))
]),
e(t).showDataLabels ? (a(), i("g", fo, [
(a(!0), i(m, null, $(e(I).chart, (o, s) => (a(), i(m, null, [
e(I).isArcBigEnough(o) ? (a(), i("circle", {
key: 0,
cx: e(ye)(o).x,
cy: e(Be)(o) - 3.7,
fill: o.color,
stroke: e(t).backgroundColor,
"stroke-width": 1,
r: 3,
filter: me(o.id)
}, null, 8, vo)) : g("", !0),
e(I).isArcBigEnough(o) ? (a(), i("text", {
key: 1,
"text-anchor": e(ye)(o, !0, 20).anchor,
x: e(ye)(o, !0).x,
y: e(Be)(o),
fill: e(t).color,
"font-size": e(t).dataLabelFontSize,
filter: me(o.id)
}, T(e(I).displayArcPercentage(o, e(I).chart)) + " (" + T(e(H)(
e(t).formatter,
o.value,
e(D)({
p: e(t).valuePrefix,
v: o.value,
s: e(t).valueSuffix,
r: e(t).dataLabelRoundingValue
}),
{ datapoint: o, seriesIndex: s }
)) + ") ", 9, go)) : g("", !0),
e(I).isArcBigEnough(o, !0, 20) ? (a(), i("text", {
key: 2,
"text-anchor": e(ye)(o).anchor,
x: e(ye)(o, !0).x,
y: e(Be)(o) + e(t).dataLabelFontSize,
fill: e(t).color,
"font-size": e(t).dataLabelFontSize,
filter: me(o.id)
}, T(o.name), 9, mo)) : g("", !0)
], 64))), 256))
])) : g("", !0),
e(t).donutShowTotal ? (a(), i("g", po, [
_("text", {
"text-anchor": "middle",
x: e(I).drawingArea.centerX,
y: e(I).drawingArea.centerY - e(t).donutTotalLabelFontSize / 2,
"font-size": e(t).donutTotalLabelFontSize,
fill: e(t).color
}, T(e(t).donutTotalLabelText), 9, xo),
_("text", {
"text-anchor": "middle",
x: e(I).drawingArea.centerX,
y: e(I).drawingArea.centerY + e(t).donutTotalLabelFontSize,
"font-size": e(t).donutTotalLabelFontSize,
fill: e(t).color
}, T(e(D)({
p: e(t).valuePrefix,
v: e(I).total,
s: e(t).valueSuffix,
r: e(t).dataLabelRoundingValue
})), 9, yo)
])) : g("", !0)
], 64)) : g("", !0),
e(L) === A.LINE ? (a(), i(m, { key: 4 }, [
e(t).xyShowGrid ? (a(), i("g", ko, [
(a(!0), i(m, null, $(e(h).yLabels, (o) => (a(), i(m, null, [
o.y <= e(h).drawingArea.bottom ? (a(), i("line", {
key: 0,
x1: e(h).drawingArea.left,
x2: e(h).drawingArea.right,
y1: o.y,
y2: o.y,
stroke: e(t).xyGridStroke,
"stroke-width": e(t).xyGridStrokeWidth,
"stroke-linecap": "round"
}, null, 8, bo)) : g("", !0)
], 64))), 256)),
(a(!0), i(m, null, $(e(h).extremes.maxSeries + 1, (o, s) => (a(), i("line", {
x1: e(h).drawingArea.left + e(h).slotSize * s,
x2: e(h).drawingArea.left + e(h).slotSize * s,
y1: e(h).drawingArea.top,
y2: e(h).drawingArea.bottom,
stroke: e(t).xyGridStroke,
"stroke-width": e(t).xyGridStrokeWidth,
"stroke-linecap": "round"
}, null, 8, So))), 256))
])) : g("", !0),
e(t).xyShowAxis ? (a(), i("g", wo, [
_("line", {
x1: e(h).drawingArea.left,
x2: e(h).drawingArea.left,
y1: e(h).drawingArea.top,
y2: e(h).drawingArea.bottom,
stroke: e(t).xyAxisStroke,
"stroke-width": e(t).xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Ao),
_("line", {
x1: e(h).drawingArea.left,
x2: e(h).drawingArea.right,
y1: isNaN(e(h).absoluteZero) ? e(h).drawingArea.bottom : e(h).absoluteZero,
y2: isNaN(e(h).absoluteZero) ? e(h).drawingArea.bottom : e(h).absoluteZero,
stroke: e(t).xyAxisStroke,
"stroke-width": e(t).xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, _o)
])) : g("", !0),
e(t).xyShowScale ? (a(), i("g", Lo, [
(a(!0), i(m, null, $(e(h).yLabels, (o, s) => (a(), i(m, null, [
o.y <= e(h).drawingArea.bottom ? (a(), i("line", {
key: 0,
x1: o.x + 4,
x2: e(h).drawingArea.left,
y1: o.y,
y2: o.y,
stroke: e(t).xyAxisStroke,
"stroke-width": e(t).xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, zo)) : g("", !0),
o.y <= e(h).drawingArea.bottom ? (a(), i("text", {
key: 1,
x: o.x,
y: o.y + e(t).xyLabelsYFontSize / 3,
"text-anchor": "end",
"font-size": e(t).xyLabelsYFontSize,
fill: e(t).color
}, T(e(H)(
e(t).formatter,
o.value,
e(D)({
p: e(t).valuePrefix,
v: o.value,
s: e(t).valueSuffix,
r: e(t).dataLabelRoundingValue
}),
{ datapoint: o, seriesIndex: s }
)), 9, $o)) : g("", !0)
], 64))), 256))
])) : g("", !0),
e(t).xyShowScale && e(t).xyPeriods.length ? (a(), i("g", Co, [
(a(!0), i(m, null, $(e(t).xyPeriods.slice(e(b).start, e(b).end), (o, s) => (a(), i("line", {
x1: e(h).drawingArea.left + e(h).slotSize * (s + 1) - e(h).slotSize / 2,
x2: e(h).drawingArea.left + e(h).slotSize * (s + 1) - e(h).slotSize / 2,
y1: e(h).drawingArea.bottom,
y2: e(h).drawingArea.bottom + 4,
stroke: e(t).xyAxisStroke,
"stroke-width": e(t).xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Io))), 256)),
(a(!0), i(m, null, $(e(t).xyPeriods.slice(e(b).start, e(b).end), (o, s) => (a(), i("text", {
"font-size": e(t).xyLabelsXFontSize,
"text-anchor": e(t).xyPeriodLabelsRotation > 0 ? "start" : e(t).xyPeriodLabelsRotation < 0 ? "end" : "middle",
fill: e(t).color,
transform: `translate(${e(h).drawingArea.left + e(h).slotSize * (s + 1) - e(h).slotSize / 2}, ${e(h).drawingArea.bottom + e(t).xyLabelsXFontSize + 6}), rotate(${e(t).xyPeriodLabelsRotation})`
}, T(o), 9, Eo))), 256))
])) : g("", !0),
_("g", Po, [
(a(!0), i(m, null, $(e(h).dataset, (o, s) => (a(), i("g", To, [
e(t).lineSmooth ? (a(), i(m, { key: 0 }, [
_("path", {
d: `M ${e(lt)(o.coordinates)}`,
stroke: e(t).backgroundColor,
"stroke-width": e(t).lineStrokeWidth + 1,
"stroke-linecap": "round",
fill: "none",
class: se({ "quick-animation": !0, "vue-data-ui-line-animated": e(t).lineAnimated }),
style: { transition: "all 0.3s ease-in-out" }
}, null, 10, Oo),
_("path", {
d: `M ${e(lt)(o.coordinates)}`,
stroke: o.color,
"stroke-width": e(t).lineStrokeWidth,
"stroke-linecap": "round",
fill: "none",
class: se({ "quick-animation": !0, "vue-data-ui-line-animated": e(t).lineAnimated }),
style: { transition: "all 0.3s ease-in-out" }
}, null, 10, Ro)
], 64)) : (a(), i(m, { key: 1 }, [
_("path", {
d: `M ${o.linePath}`,
stroke: e(t).backgroundColor,
"stroke-width": e(t).lineStrokeWidth + 1,
"stroke-linecap": "round",
fill: "none",
class: se({ "quick-animation": !0, "vue-data-ui-line-animated": e(t).lineAnimated }),
style: { transition: "all 0.3s ease-in-out" }
}, null, 10, No),
_("path", {
d: `M ${o.linePath}`,
stroke: o.color,
"stroke-width": e(t).lineStrokeWidth,
"stroke-linecap": "round",
fill: "none",
class: se({ "quick-animation": !0, "vue-data-ui-line-animated": e(t).lineAnimated }),
style: { transition: "all 0.3s ease-in-out" }
}, null, 10, Fo)
], 64)),
(a(!0), i(m, null, $(o.coordinates, (u, v) => (a(), i("circle", {
cx: u.x,
cy: e(X)(u.y),
r: 3,
fill: o.color,
stroke: e(t).backgroundColor,
"stroke-width": "0.5",
class: "quick-animation",
style: { transition: "all 0.3s ease-in-out" }
}, null, 8, Mo))), 256))
]))), 256))
]),
e(t).showDataLabels ? (a(), i("g", Uo, [
(a(!0), i(m, null, $(e(h).dataset, (o, s) => (a(), i(m, null, [
(a(!0), i(m, null, $(o.coordinates, (u, v) => (a(), i("text", {
"text-anchor": "middle",
"font-size": e(t).dataLabelFontSize,
fill: o.color,
x: u.x,
y: e(X)(u.y) - e(t).dataLabelFontSize / 2,
class: "quick-animation",
style: { transition: "all 0.3s ease-in-out" }
}, T(e(H)(
e(t).formatter,
e(X)(u.value),
e(D)({
p: e(t).valuePrefix,
v: e(X)(u.value),
s: e(t).valueSuffix,
r: e(t).dataLabelRoundingValue
}),
{ datapoint: u, seriesIndex: v }
)), 9, Bo))), 256))
], 64))), 256))
])) : g("", !0),
_("g", Do, [
(a(!0), i(m, null, $(e(h).extremes.maxSeries, (o, s) => (a(), i("rect", {
x: e(h).drawingArea.left + s * e(h).slotSize,
y: e(h).drawingArea.top,
height: e(h).drawingArea.height <= 0 ? 1e-5 : e(h).drawingArea.height,
width: e(h).slotSize <= 0 ? 1e-5 : e(h).slotSize,
fill: [e(j), e(Y)].includes(s) ? e(t).xyHighlighterColor : "transparent",
style: N(`opacity:${e(t).xyHighlighterOpacity}`),
onMouseenter: (u) => e(h).useTooltip(s),
onMouseleave: d[1] || (d[1] = (u) => e(h).killTooltip()),
onClick: (u) => ie("selectDatapoint", e(h).dataset.map((v) => ({
...v,
value: v.values[s]
})))
}, null, 44, Vo))), 256))
])
], 64)) : g("", !0),
e(L) === A.BAR ? (a(), i(m, { key: 5 }, [
e(t).xyShowGrid ? (a(), i("g", qo, [
(a(!0), i(m, null, $(e(c).yLabels, (o) => (a(), i(m, null, [
o.y <= e(c).drawingArea.bottom ? (a(), i("line", {
key: 0,
x1: e(c).drawingArea.left,
x2: e(c).drawingArea.right,
y1: o.y,
y2: o.y,
stroke: e(t).xyGridStroke,
"stroke-width": e(t).xyGridStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Wo)) : g("", !0)
], 64))), 256)),
(a(!0), i(m, null, $(e(c).extremes.maxSeries + 1, (o, s) => (a(), i("line", {
x1: e(c).drawingArea.left + e(c).slotSize * s,
x2: e(c).drawingArea.left + e(c).slotSize * s,
y1: e(c).drawingArea.top,
y2: e(c).drawingArea.bottom,
stroke: e(t).xyGridStroke,
"stroke-width": e(t).xyGridStrokeWidth,
"stroke-linecap": "round"
}, null, 8, jo))), 256))
])) : g("", !0),
e(t).xyShowAxis ? (a(), i("g", Go, [
_("line", {
x1: e(c).drawingArea.left,
x2: e(c).drawingArea.left,
y1: e(c).drawingArea.top,
y2: e(c).drawingArea.bottom,
stroke: e(t).xyAxisStroke,
"stroke-width": e(t).xyAxisStrokeWidth,
"stroke-linecap": "round"
}, null, 8, Ho),
_("line", {
x1: e(c).drawingArea.left,
x2: e(c).drawingArea.right,
y1: isNaN(e(c).absoluteZero) ? e(c).drawingArea.bottom : e(c).absoluteZero,
y2: isNaN