vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,494 lines • 91.8 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, D as n, G as r, Gt as a, Jt as o, K as s, Kt as c, Ot as l, Pt as u, S as d, Wt as f, X as p, _ as ee, c as te, ct as ne, dt as re, i as m, jt as ie, ot as ae, pt as oe, q as se, r as ce, t as le, tt as ue, v as de, w as fe, xt as pe } from "./lib-Bttd6u5E.js";
import { n as me, t as he } from "./useHints-Dq_w2E8B.js";
import { n as ge, r as _e, t as ve } from "./useTimeLabels-d2f-W1L4.js";
import { t as ye } from "./useConfig-D3scuR88.js";
import { t as be } from "./usePrinter-DN5bYhTG.js";
import { n as xe, t as Se } from "./BaseScanner-DZvpgOjM.js";
import { t as Ce } from "./useSvgExport-DH-FfcqQ.js";
import { t as we } from "./useNestedProp-vPNvh7rV.js";
import { t as Te } from "./useThemeCheck-C43Tcqmk.js";
import { t as Ee } from "./useTransitions-g_zBREk2.js";
import { t as De } from "./useStableElementSize-C7KADDKj.js";
import { t as Oe } from "./useTimeLabelCollider-AEcY4Ioe.js";
import { t as ke } from "./img-Bnokohej.js";
import { n as Ae } from "./Title-BE3qg9xl.js";
import { t as je } from "./Shape-C21CMlWS.js";
import { t as Me } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as Ne, t as Pe } from "./useResponsive-ZtArZtUf.js";
import { t as Fe } from "./DefGrad-DVBqDjhO.js";
import { t as Ie } from "./SlicerPreview-wUw1hFwe.js";
import { t as Le } from "./BaseLegendToggle-DZVucLnv.js";
import { t as Re } from "./A11yDataTable-DdRsVULz.js";
import { t as ze } from "./useUserOptionState-DK-_1ddE.js";
import { t as Be } from "./useChartAccessibility-DYqac8yF.js";
import { t as Ve } from "./Legend-CQxUgOd-.js";
import { t as He } from "./vue_ui_stackbar-COOrQQdK.js";
import { Fragment as h, Teleport as Ue, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as We, createSlots as Ge, createTextVNode as Ke, createVNode as qe, defineAsyncComponent as Je, guardReactiveProps as b, mergeProps as Ye, nextTick as Xe, normalizeClass as x, normalizeProps as S, normalizeStyle as C, onBeforeUnmount as Ze, onMounted as Qe, openBlock as w, ref as T, renderList as E, renderSlot as D, resolveDynamicComponent as $e, shallowRef as et, toDisplayString as O, toRefs as tt, unref as k, useSlots as nt, watch as rt, watchEffect as it, withCtx as A } from "vue";
//#region src/components/vue-ui-stackbar.vue
var at = /* @__PURE__ */ e({ default: () => en }), ot = ["id"], st = ["id"], ct = ["id"], lt = { style: { position: "relative" } }, ut = [
"xmlns",
"aria-describedby",
"viewBox"
], dt = [
"x",
"y",
"width",
"height"
], ft = { key: 1 }, pt = [
"x",
"y",
"width",
"height",
"stroke",
"stroke-width",
"stroke-linecap",
"stroke-linejoin",
"stroke-dasharray"
], mt = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], ht = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], gt = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], _t = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], vt = { key: 0 }, yt = [
"x",
"y",
"height",
"rx",
"width",
"fill",
"stroke",
"stroke-width"
], bt = { key: 0 }, xt = [
"x",
"y",
"height",
"rx",
"width",
"fill",
"stroke",
"stroke-width"
], St = [
"x",
"y",
"width",
"rx",
"height",
"fill",
"stroke",
"stroke-width"
], Ct = { key: 0 }, wt = [
"x",
"y",
"width",
"rx",
"height",
"fill",
"stroke",
"stroke-width"
], Tt = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], Et = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], Dt = [
"x",
"y",
"font-size",
"fill",
"font-weight"
], Ot = [
"transform",
"font-size",
"fill",
"font-weight"
], kt = [
"transform",
"font-size",
"fill",
"font-weight"
], At = [
"transform",
"font-size",
"font-weight",
"fill"
], jt = [
"transform",
"font-size",
"fill",
"font-weight"
], Mt = [
"transform",
"font-size",
"font-weight",
"fill"
], Nt = ["stroke", "d"], Pt = [
"transform",
"font-size",
"font-weight",
"fill",
"text-anchor"
], Ft = ["d", "stroke"], It = [
"font-size",
"font-weight",
"fill",
"text-anchor",
"transform"
], Lt = { key: 0 }, Rt = { key: 1 }, zt = [
"text-anchor",
"font-size",
"font-weight",
"fill",
"transform",
"onClick"
], Bt = [
"text-anchor",
"font-size",
"fill",
"transform",
"innerHTML",
"onClick"
], Vt = { key: 0 }, Ht = { key: 1 }, Ut = [
"font-size",
"font-weight",
"fill",
"transform",
"onClick"
], Wt = [
"font-size",
"font-weight",
"fill",
"transform",
"onClick",
"innerHTML"
], Gt = [
"x",
"y",
"width",
"height",
"onClick",
"onMouseenter",
"onMouseleave",
"fill"
], Kt = [
"x",
"y",
"width",
"height",
"onClick",
"onMouseenter",
"onMouseleave",
"fill"
], qt = ["data-start", "data-end"], Jt = {
key: 0,
style: {
position: "absolute",
top: "100%",
left: "0",
width: "100%"
},
"data-dom-to-png-ignore": "",
"aria-hidden": "true"
}, Yt = {
key: 4,
class: "vue-data-ui-watermark"
}, Xt = [
"x",
"y",
"height",
"width",
"fill",
"stroke"
], Zt = ["id"], Qt = ["onClick"], $t = ["innerHTML"], en = /*#__PURE__*/ Me({
__name: "vue-ui-stackbar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
},
selectedXIndex: {
type: Number,
default: void 0
}
},
emits: [
"selectDatapoint",
"selectLegend",
"selectTimeLabel",
"selectX",
"copyAlt"
],
setup(e, { expose: Me, emit: at }) {
let en = Je(() => import("./Tooltip-DhjyfHwz.js")), tn = Je(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), nn = Je(() => import("./vue-ui-accordion-BxGriZik.js").then((e) => e.n)), rn = Je(() => import("./DataTable-BbKgJ5UI.js")), an = Je(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), on = Je(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), sn = Je(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), cn = Je(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_stackbar: ln } = ye(), { isThemeValid: un, warnInvalidTheme: dn } = Te(), fn = nt(), j = e, M = at, pn = g({
get() {
return !!j.dataset && j.dataset.length;
},
set(e) {
return e;
}
}), N = T(null), P = T(se()), mn = T(!1), hn = T(null), gn = T(""), F = T([]), _n = T(0), vn = T(null), yn = T(null), bn = T(null), xn = T(null), Sn = T(!1), I = T(null), Cn = T(!1), wn = T(0), Tn = T(0), En = T(0), Dn = T(!1), On = T(null), kn = T(null), An = T(!1), jn = T(!1), Mn = T(null), Nn = T(null), Pn = T(null), Fn = T(null), In = T(null), Ln = T(null), Rn = et(null), zn = T(!1), Bn = T(0), Vn = T(0), L = T(null), Hn = T({
x: 0,
y: 0
}), Un = T("pointer"), Wn = De({
elementRef: Rn,
minimumWidth: 2,
minimumHeight: 2,
stableFramesRequired: 2,
once: !1,
onSizeAccepted: () => {
qn();
}
});
function Gn() {
Rn.value = N.value?.parentNode ?? null;
}
function Kn() {
return new Promise((e) => {
requestAnimationFrame(() => {
requestAnimationFrame(e);
});
});
}
async function qn() {
let e = ++Vn.value;
zn.value = !1, await Xe(), await Kn(), await Kn(), e === Vn.value && (Bn.value += 1, zn.value = !0);
}
let Jn = T(null);
Qe(() => {
Dn.value = !0, Gn(), Wn.start(), gr();
});
let R = T(ar());
me({
config: () => R.value,
dataset: () => j.dataset,
component: "VueUiStackbar",
rules: [
he.emptyArray,
{
test: (e) => e.some((e) => e.series.length > 60),
message: [
"👀 Some series have > 60 datapoints. Consider",
"",
"▶️ Using VueUiStackline instead, for better readability.",
"",
"▶️ Aggregating data to larger time units, to reduce the number of datapoints.",
"",
"▶️ Using filters to constraint the data to a specific time range."
]
},
{
test: (e) => e.length > 6,
message: [
"👀 The number of series > 6, which can make the chart hard to read. Consider:",
"",
"▶️ Grouping small values into an \"Other\" category.",
"",
"▶️ Using filters to let users choose a maximum number of series to display."
]
}
]
});
let { transitionEnabled: z } = Ee({
config: () => R.value.transitions,
dataset: () => j.dataset
}), B = g(() => R.value.userOptions.useCursorPointer), Yn = g(() => o({
defaultConfig: {
userOptions: { show: !1 },
useCssAnimation: !1,
table: { show: !1 },
tooltip: { show: !1 },
style: { chart: {
backgroundColor: "#99999930",
bars: {
totalValues: { show: !1 },
dataLabels: { show: !1 }
},
grid: {
frame: { stroke: "#6A6A6A" },
scale: {
scaleMin: 0,
scaleMax: 40
},
x: {
axisColor: "#6A6A6A",
linesColor: "#6A6A6A",
axisName: { show: !1 },
timeLabels: { show: !1 }
},
y: {
axisColor: "#6A6A6A",
linesColor: "#6A6A6A",
axisName: { show: !1 },
axisLabels: { show: !1 }
}
},
legend: { backgroundColor: "transparent" },
padding: {
left: 24,
right: 24,
bottom: 12
},
zoom: {
show: !1,
startIndex: null,
endIndex: null
}
} }
},
userConfig: R.value.skeletonConfig ?? {}
})), { loading: Xn, FINAL_DATASET: Zn, manualLoading: Qn } = xe({
...tt(j),
FINAL_CONFIG: R,
prepareConfig: ar,
callback: () => {
Promise.resolve().then(async () => {
(!R.value.style.chart.zoom.keepState || !qi.value || J.value.start === 0 && J.value.end === 0) && await Ji();
});
},
skeletonDataset: j.config?.skeletonDataset ?? [{
name: "",
series: [
2,
3,
5,
8,
13,
21
],
color: "#BABABA"
}, {
name: "",
series: [
1,
2,
3,
5,
8,
13
],
color: "#CACACA"
}],
skeletonConfig: o({
defaultConfig: R.value,
userConfig: Yn.value
})
}), { userOptionsVisible: $n, setUserOptionsVisibility: er, keepUserOptionState: tr } = ze({ config: R.value }), { svgRef: nr } = Be({ config: R.value.style.chart.title });
function rr() {
er(!0);
}
function ir() {
er(!1), M("selectX", {
index: null,
indexLabel: null,
dataset: null
}), I.value = null, L.value = null, mn.value = !1;
}
function ar() {
let e = we({
userConfig: j.config,
defaultConfig: ln
}), t = {}, n = e.theme;
if (n) if (!un.value(e)) dn(e), t = e;
else {
let r = we({
userConfig: He[n] || j.config,
defaultConfig: e
});
t = {
...we({
userConfig: j.config,
defaultConfig: r
}),
customPalette: e.customPalette.length ? e.customPalette : c[n] || u
};
}
else t = e;
return t;
}
let or = g(() => R.value.style.chart.bars.dataLabels.hideUnderValue != null), sr = g(() => R.value.style.chart.bars.dataLabels.hideUnderPercentage != null);
rt(() => j.config, (e) => {
Xn.value || (R.value = ar()), $n.value = !R.value.userOptions.showOnChartHover, gr({ resetSlicer: !R.value.style.chart.zoom.keepState }), wn.value += 1, Tn.value += 1, En.value += 1, V.value.dataLabels.show = R.value.style.chart.bars.dataLabels.show, V.value.showTable = R.value.table.show, V.value.showTooltip = R.value.style.chart.tooltip.show, Gn(), !R.value.style.chart.zoom.keepState || !qi.value || J.value.start === 0 && J.value.end === 0 ? Ji() : Mr();
}, { deep: !0 }), rt(() => j.dataset, (e) => {
Array.isArray(e) && e.length > 0 && (Qn.value = !1), Gn(), R.value.style.chart.zoom.keepState ? Mr() : Fr();
}, { deep: !0 });
let V = T({
dataLabels: { show: R.value.style.chart.bars.dataLabels.show },
showTable: R.value.table.show,
showTooltip: R.value.style.chart.tooltip.show
});
rt(R, () => {
V.value = {
dataLabels: { show: R.value.style.chart.bars.dataLabels.show },
showTable: R.value.table.show,
showTooltip: R.value.style.chart.tooltip.show
};
}, { immediate: !0 });
let { isPrinting: cr, isImaging: lr, generatePdf: ur, generateImage: dr } = be({
elementId: `stackbar_${P.value}`,
fileName: R.value.style.chart.title.text || "vue-ui-stackbar",
options: R.value.userOptions.print
}), H = T({
width: R.value.style.chart.width,
height: R.value.style.chart.height,
paddingRatio: {
top: R.value.style.chart.padding.top / R.value.style.chart.height,
right: R.value.style.chart.padding.right / R.value.style.chart.width,
bottom: R.value.style.chart.padding.bottom / R.value.style.chart.height,
left: R.value.style.chart.padding.left / R.value.style.chart.width
}
}), fr = g(() => fe(R.value.customPalette)), U = et(null), pr = et(null), mr = T(null), hr = g(() => !!R.value.debug);
function gr({ resetSlicer: e = !0 } = {}) {
if (ie(j.dataset) ? (ue({
componentName: "VueUiStackbar",
type: "dataset",
debug: hr.value
}), Qn.value = !0) : j.dataset.forEach((e, t) => {
oe({
datasetObject: e,
requiredAttributes: ["name", "series"]
}).forEach((e) => {
pn.value = !1, ue({
componentName: "VueUiStackbar",
type: "datasetSerieAttribute",
property: e,
index: t,
debug: hr.value
}), Qn.value = !0;
});
}), ie(j.dataset) || (Qn.value = R.value.loading), setTimeout(() => {
Cn.value = !0;
}, 10), R.value.responsive) {
let e = Ne(() => {
Cn.value = !1;
let { width: e, height: t } = Pe({
chart: N.value,
title: R.value.style.chart.title.text ? vn.value : null,
legend: R.value.style.chart.legend.show ? yn.value : null,
slicer: R.value.style.chart.zoom.show && q.value > 6 ? bn.value.$el : null,
source: xn.value
});
requestAnimationFrame(() => {
H.value.width = e, H.value.height = t - 12, clearTimeout(mr.value), mr.value = setTimeout(() => {
Cn.value = !0;
}, 10);
});
});
U.value && (pr.value && U.value.unobserve(pr.value), U.value.disconnect()), U.value = new ResizeObserver(e), pr.value = N.value.parentNode, U.value.observe(pr.value);
}
qn(), e && Ji();
}
Ze(() => {
Wn.stop(), U.value && (pr.value && U.value.unobserve(pr.value), U.value.disconnect());
});
let W = g(() => R.value.style.chart.grid.y.position === "right");
function _r() {
let e = 0;
R.value.orientation === "vertical" && Pn.value && (e = Array.from(Pn.value.querySelectorAll("text")).reduce((e, t) => {
let n = t.getComputedTextLength();
return n > e ? n : e;
}, 0)), R.value.orientation === "horizontal" && Fn.value && (e = Array.from(Fn.value.querySelectorAll("text")).reduce((e, t) => {
let n = t.getComputedTextLength();
return n > e ? n : e;
}, 0));
let t = Nn.value ? Nn.value.getBoundingClientRect().width + R.value.style.chart.grid.y.axisName.fontSize + R.value.style.chart.grid.y.axisName.offsetX : 0;
return {
left: W.value ? 0 : e + t,
right: W.value ? e + t : 0,
scaleLabelsWidth: e,
yAxisLabelWidth: t
};
}
let vr = T(0), yr = T(0), br = Ne((e) => {
yr.value = e + R.value.style.chart.bars.totalValues.fontSize;
}, 100);
function xr() {
if (R.value.orientation !== "horizontal") return 0;
let e = Ln.value;
if (!e) return 0;
let t = Array.from(e.querySelectorAll("text"));
if (!t.length) return 0;
let n = -Infinity;
for (let e of t) try {
let t = e.getBBox(), r = t.x + t.width;
r > n && (n = r);
} catch {}
return Math.max(0, n - (G.value?.right ?? 0));
}
it((e) => {
if (R.value.orientation !== "horizontal") return;
let t = Ln.value;
if (!t) return;
let n = () => {
let e = xr();
br(e);
};
n();
let r = new ResizeObserver(n);
r.observe(t);
let a = new MutationObserver(n);
a.observe(t, {
childList: !0,
subtree: !0,
characterData: !0
}), e(() => {
r.disconnect(), a.disconnect();
});
}), Ze(() => {
vr.value = 0, yr.value = 0;
});
let Sr = T(0), Cr = T(0);
function wr(e) {
let t = Number.isFinite(e) ? e : 0;
Sr.value !== t && (Sr.value = t);
}
function Tr() {
let e = R.value.orientation === "vertical" ? Fn.value : Pn.value;
if (!e) {
wr(0);
return;
}
try {
wr(e.getBBox()?.height);
} catch {
wr(0);
}
}
function Er() {
Cr.value && cancelAnimationFrame(Cr.value), Cr.value = requestAnimationFrame(() => {
requestAnimationFrame(() => {
Tr();
});
});
}
Ze(() => {
Cr.value && cancelAnimationFrame(Cr.value);
});
let Dr = g(() => {
let e = 0;
if (Mn.value) try {
e = Mn.value.getBBox().height;
} catch {
e = 0;
}
let t = R.value.style.chart.grid.x.timeLabels.show ? Sr.value : 0;
return e + t;
}), G = g(() => {
Bn.value;
let { height: e, width: t } = H.value, { right: n } = H.value.paddingRatio, r = R.value.style.chart.bars.totalValues.show && j.dataset && j.dataset.length > 1 ? R.value.style.chart.bars.totalValues.fontSize * 1.3 : 0, a = 0, o = 0, s = 0, c = 0;
if (R.value.style.chart.grid.y.axisLabels.show) {
let e = _r();
a = e.left, o = e.right, s = e.scaleLabelsWidth, c = e.yAxisLabelWidth;
}
let l = R.value.style.chart.padding.top + r, u = t - t * n - yr.value - o, d = e - R.value.style.chart.padding.bottom - Dr.value - r, f = R.value.style.chart.padding.left + a, p = t - f - t * n - yr.value - o, ee = e - l - R.value.style.chart.padding.bottom - Dr.value - r;
return {
chartHeight: e,
chartWidth: t,
top: l,
right: u,
bottom: d,
left: f,
width: Math.max(0, p),
height: Math.max(0, ee),
offsetLeft: a,
offsetRightAxis: o,
scaleLabelsWidth: s,
yAxisLabelWidth: c
};
}), Or = g(() => {
let { left: e, top: t, width: n, height: r } = G.value, a = J.value.start, o = J.value.end, s = Math.max(1, o - a), c = Math.max(0, Math.min(s, (Y.value.start ?? a) - a)), l = Math.max(0, Math.min(s, (Y.value.end ?? o) - a)), u = Math.max(0, l - c), d = {
fill: R.value.style.chart.zoom.preview.fill,
stroke: R.value.style.chart.zoom.preview.stroke,
"stroke-width": R.value.style.chart.zoom.preview.strokeWidth,
"stroke-dasharray": R.value.style.chart.zoom.preview.strokeDasharray,
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: {
pointerEvents: "none",
transition: "none !important",
animation: "none !important"
}
};
if (R.value.orientation === "horizontal") {
let a = r / s;
return {
x: e,
y: t + c * a,
width: n,
height: u * a,
...d
};
}
{
let a = n / s;
return {
x: e + c * a,
y: t,
width: u * a,
height: r,
...d
};
}
}), K = g(() => Zn.value.map((e, t) => {
let n = se(), r = String(e.key ?? e.id ?? e.name ?? n), a = d(e.color) || fr.value[t] || u[t] || u[t % u.length];
return {
...e,
datasetKey: r,
series: JSON.parse(JSON.stringify(e.series)).map((e) => R.value.style.chart.bars.distributed ? Math.abs(e) : e),
signedSeries: e.series.map((e) => e >= 0 ? 1 : -1),
absoluteIndex: t,
id: n,
color: a
};
})), q = g(() => {
let e = Math.max(...K.value.filter((e) => !F.value.includes(e.id)).map((e) => e.series.length));
return isFinite(e) ? e : Math.max(...K.value.map((e) => e.series.length));
});
function kr(e) {
Jn.value = e;
}
let J = T({
start: 0,
end: Math.max(...Zn.value.map((e) => e.series.length))
}), Y = T({
start: 0,
end: Math.max(...Zn.value.map((e) => e.series.length))
}), Ar = g(() => R.value.style.chart.zoom.preview.enable && (Y.value.start !== J.value.start || Y.value.end !== J.value.end));
function jr(e, t) {
Y.value[e] = t;
}
function Mr() {
let e = q.value, t = Math.max(0, Math.min(J.value.start ?? 0, e - 1)), n = Math.max(t + 1, Math.min(J.value.end ?? e, e));
(!Number.isFinite(t) || !Number.isFinite(n) || n <= t) && (t = 0, n = e), J.value.start = t, J.value.end = n, Y.value.start = t, Y.value.end = n, bn.value && (bn.value.setStartValue(t), bn.value.setEndValue(n));
}
let Nr = T(null);
function Pr() {
return new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(() => e())));
}
Ze(() => {
Nr.value && cancelAnimationFrame(Nr.value);
});
async function Fr({ force: e = !1 } = {}) {
if (R.value.style.chart.zoom.keepState && !e && qi.value && (J.value.start !== 0 || J.value.end !== 0)) {
Mr();
return;
}
Ji(), await Xe(), Nr.value && cancelAnimationFrame(Nr.value), Nr.value = requestAnimationFrame(async () => {
await Pr(), Ji();
});
}
let X = g(() => {
let e;
return e = R.value.orientation === "vertical" ? G.value.width / (J.value.end - J.value.start) : G.value.height / (J.value.end - J.value.start), e <= 0 ? 0 : e;
}), Ir = g(() => f(K.value.filter((e) => !F.value.includes(e.id))).slice(J.value.start, J.value.end)), Lr = g(() => F.value.length === K.value.length), Rr = g(() => R.value.style.chart.zoom.minimap.show ? f(K.value.map((e) => ({
...e,
series: e.series.map((e) => e ?? 0)
})).filter((e) => Lr.value ? !0 : !F.value.includes(e.id))) : []), zr = g(() => R.value.style.chart.zoom.minimap.show ? [{
name: "",
series: Rr.value,
color: "#000000",
isVisible: !0
}] : []), Br = g(() => f(K.value.filter((e) => !F.value.includes(e.id)).map((e) => ({
...e,
series: e.series.map((t, n) => e.signedSeries[n] === -1 && t >= 0 ? -t : t)
}))).slice(J.value.start, J.value.end)), Vr = g(() => {
let e = K.value.filter((e) => !F.value.includes(e.id));
return {
positive: f(e.map((e) => ({
...e,
series: e.series.slice(J.value.start, J.value.end).map((e) => e >= 0 ? e : 0)
}))),
negative: f(e.map((e) => ({
...e,
series: e.series.slice(J.value.start, J.value.end).map((e) => e < 0 ? e : 0)
})))
};
}), Hr = g(() => {
let e = R.value.style.chart.grid.scale.scaleMax !== null && !R.value.style.chart.bars.distributed ? R.value.style.chart.grid.scale.scaleMax : Math.max(...Vr.value.positive), t = Math.min(...Vr.value.negative), n = R.value.style.chart.grid.scale.scaleMin !== null && !R.value.style.chart.bars.distributed ? R.value.style.chart.grid.scale.scaleMin : [
-Infinity,
Infinity,
NaN,
void 0,
null
].includes(t) ? 0 : t;
return !R.value.style.chart.bars.distributed && (R.value.style.chart.grid.scale.scaleMax !== null || R.value.style.chart.grid.scale.scaleMin !== null) ? de(n > 0 ? 0 : n, e < 0 ? 0 : e, R.value.style.chart.grid.scale.ticks) : ee(n > 0 ? 0 : n, e < 0 ? 0 : e, R.value.style.chart.grid.scale.ticks);
}), Ur = g(() => Hr.value.ticks), Z = g(() => {
let e = Hr.value, t = e.max + Math.abs(e.min);
return Ur.value.map((n) => ({
zero: G.value.bottom - G.value.height * (Math.abs(e.min) / t),
y: G.value.bottom - G.value.height * ((n + Math.abs(e.min)) / t),
x: W.value ? G.value.right + 8 : G.value.left - 8,
horizontal_zero: G.value.left + G.value.width * (Math.abs(e.min) / t),
horizontal_x: G.value.left + G.value.width * ((n + Math.abs(e.min)) / t),
horizontal_y: G.value.bottom - 8,
value: n
}));
}), Wr = g(() => {
let e = R.value.style.chart.grid.y.axisLabels, { prefix: t, suffix: n } = R.value.style.chart.bars.dataLabels;
return Ur.value.map((r) => String(m(e.formatter, r, p({
p: t,
v: r,
s: n,
r: e.rounding
}), { datapoint: { value: r } }) ?? "")).join("|");
});
rt(() => [
Wr.value,
R.value.orientation,
R.value.style.chart.grid.y.axisLabels.show,
R.value.style.chart.grid.y.axisLabels.fontSize,
R.value.style.chart.grid.y.axisLabels.bold,
R.value.style.chart.grid.y.position
], () => {
R.value.style.chart.grid.y.axisLabels.show && qn();
}, { flush: "post" });
let Q = T([]), Gr = T([]), Kr = 0;
it(() => {
let e = ++Kr;
(async () => {
let t = await ve({
values: R.value.style.chart.grid.x.timeLabels.values,
maxDatapoints: q.value,
formatter: R.value.style.chart.grid.x.timeLabels.datetimeFormatter,
start: J.value.start,
end: J.value.end
});
e === Kr && (Q.value = t);
})();
});
let qr = 0;
it(() => {
let e = ++qr;
(async () => {
let t = await ve({
values: R.value.style.chart.grid.x.timeLabels.values,
maxDatapoints: q.value,
formatter: R.value.style.chart.grid.x.timeLabels.datetimeFormatter,
start: 0,
end: q.value
});
e === qr && (Gr.value = t);
})();
});
let Jr = g(() => {
let e = R.value.style.chart.grid.x.timeLabels.modulo;
return Q.value.length ? Math.min(e, [...new Set(Q.value.map((e) => e.text))].length) : e;
}), Yr = g(() => {
let e = R.value.style.chart.grid.x.timeLabels, t = Q.value || [], n = Gr.value || [], r = J.value.start ?? 0, a = I.value, o = q.value, s = t.map((e) => e?.text ?? ""), c = n.map((e) => e?.text ?? "");
return te(!!e.showOnlyFirstAndLast, !!e.showOnlyAtModulo, Math.max(1, Jr.value || 1), s, c, r, a, o);
});
it(() => {
R.value.orientation, R.value.style.chart.grid.x.timeLabels.show, R.value.style.chart.grid.x.timeLabels.fontSize, R.value.style.chart.grid.x.timeLabels.rotation, R.value.style.chart.grid.x.timeLabels.offsetY, Yr.value?.map((e) => e?.text ?? "").join("|"), Wr.value, H.value.width, H.value.height, Fn.value, Pn.value, Mn.value, Er();
}, { flush: "post" });
let Xr = T({
months: [],
shortMonths: [],
days: [],
shortDays: []
}), Zr = 0;
it(() => {
let e = ++Zr, t = R.value.style.chart.grid.x.timeLabels.datetimeFormatter;
(async () => {
let n = await _e(t.locale).catch(() => _e("en"));
e === Zr && (Xr.value = n.data);
})();
});
let Qr = g(() => {
let e = R.value.style.chart.grid.x.timeLabels.datetimeFormatter, t = ge({
useUTC: e.useUTC,
locale: Xr.value,
januaryAsYear: e.januaryAsYear
});
return (e, n) => {
let r = R.value.style.chart.grid.x.timeLabels.values?.[e];
return r == null ? "" : t.formatDate(new Date(r), n);
};
}), $r = g(() => (R.value.style.chart.grid.x.timeLabels.values || []).map((e, t) => ({
text: Qr.value(t, R.value.style.chart.zoom.timeFormat),
absoluteIndex: t
}))), ei = g(() => (R.value.style.chart.grid.x.timeLabels.values || []).map((e, t) => ({
text: Qr.value(t, R.value.style.chart.tooltip.timeFormat),
absoluteIndex: t
}))), ti = g(() => {
let e = /* @__PURE__ */ new Map();
return (R.value.style.chart.grid.x.timeLabels.values || []).forEach((t) => {
if ([
null,
void 0,
""
].includes(t)) return;
let n = String(t);
e.set(n, (e.get(n) || 0) + 1);
}), e;
});
function ni(e) {
let t = (R.value.style.chart.grid.x.timeLabels.values || [])[e];
if ([
null,
void 0,
""
].includes(t)) return `fallback-${e}`;
let n = String(t);
return (ti.value.get(n) || 0) > 1 ? `${n}-${e}` : n;
}
function ri(e, t) {
return `${e.datasetKey}:${ni(t)}`;
}
let $ = g(() => {
if (!pn.value && !Xn.value) return [];
let e = Array(q.value).fill(0), t = Array(q.value).fill(0), n = Array(q.value).fill(0), r = Array(q.value).fill(0), a = Math.max(...Vr.value.positive) || 0, o = Math.min(...Vr.value.negative), s = [
-Infinity,
Infinity,
NaN,
void 0,
null
].includes(o) ? 0 : o, { min: c, max: l } = !R.value.style.chart.bars.distributed && (R.value.style.chart.grid.scale.scaleMax !== null || R.value.style.chart.grid.scale.scaleMin !== null) ? de(R.value.style.chart.grid.scale.scaleMin === null ? s > 0 ? 0 : s : R.value.style.chart.grid.scale.scaleMin, R.value.style.chart.grid.scale.scaleMax === null ? a < 0 ? 0 : a : R.value.style.chart.grid.scale.scaleMax, R.value.style.chart.grid.scale.ticks) : ee(R.value.style.chart.grid.scale.scaleMin === null ? s > 0 ? 0 : s : R.value.style.chart.grid.scale.scaleMin, R.value.style.chart.grid.scale.scaleMax === null ? a < 0 ? 0 : a : R.value.style.chart.grid.scale.scaleMax, R.value.style.chart.grid.scale.ticks), u = l + (c >= 0 ? 0 : Math.abs(c)) || 1, d = G.value.height, f = G.value.width, p = Z.value[0] ? Z.value[0].zero : G.value.bottom, te = Z.value[0] ? Z.value[0].horizontal_zero : G.value.left, ne = Array(Rr.value.length).fill(0), re = Array(Rr.value.length).fill(0);
return K.value.filter((e) => !F.value.includes(e.id)).map((a) => {
let o = a.series.slice(), s = o.map((e, t) => ne[t]), c = o.map((e, t) => re[t]);
o.forEach((e, t) => {
(Number(e) || 0) >= 0 ? ne[t] += Number(e) || 0 : re[t] += Math.abs(Number(e) || 0);
});
let l = a.series.slice(J.value.start, J.value.end), ee = a.signedSeries.slice(J.value.start, J.value.end), m = l.map((e, t) => ri(a, J.value.start + t)), ie = o.map((e, t) => ri(a, t)), ae = l.map((e, t) => G.value.left + X.value * t + X.value * R.value.style.chart.bars.gapRatio / 4), oe = (Rr.value || []).filter(Number.isFinite), se = oe.length ? Math.max(...oe) : 0, ce = oe.length ? Math.min(...oe) : 0;
function le({ minimapH: e }) {
let t = 1e-9, n = se > 0;
if (n && ce < 0) {
let n = Math.max(se, Math.abs(ce)) || t;
return {
pxPerUnit: e / 2 / n,
zero: e / 2
};
}
return n ? {
pxPerUnit: e / Math.max(t, se),
zero: e
} : {
pxPerUnit: e / Math.max(t, Math.abs(ce)),
zero: 0
};
}
let ue = ({ left: e, unitW: t }) => {
let n = t * (R.value.style.chart.bars.gapRatio / 4);
return o.map((r, a) => e + t * a + n);
}, de = l.map((e, t) => G.value.top + X.value * t + X.value * R.value.style.chart.bars.gapRatio / 4), fe = l.map((t, r) => {
let a = R.value.style.chart.bars.distributed ? (t || 0) / Ir.value[r] : (t || 0) / u, o, s;
return t > 0 ? (s = d * a, o = p - s - e[r], e[r] += s) : (s = d * a, o = p + n[r], n[r] += Math.abs(s)), o;
}), pe = ({ minimapH: e }) => {
if (R.value.style.chart.bars.distributed) return o.map((t, n) => {
let r = Math.abs(Number(t) || 0), a = Math.abs(Rr.value?.[n] || 0) || 1e-9;
return e - (s[n] + r) / a * e;
});
let { pxPerUnit: t, zero: n } = le({ minimapH: e });
return o.map((e, r) => {
let a = Number(e) || 0;
return a >= 0 ? n - (s[r] + a) * t : n + c[r] * t;
});
}, me = l.map((e, n) => {
let a = R.value.style.chart.bars.distributed ? (e || 0) / Ir.value[n] : (e || 0) / u, o, s;
return e > 0 ? (s = f * a, o = te + t[n], t[n] += s) : (s = f * a, o = te - Math.abs(s) - r[n], r[n] += Math.abs(s)), o;
}), he = l.map((e, t) => {
let n = R.value.style.chart.bars.distributed ? (e || 0) / Ir.value[t] : (e || 0) / u;
return e > 0 ? d * n : d * Math.abs(n);
}), ge = ({ minimapH: e }) => {
if (R.value.style.chart.bars.distributed) return o.map((t, n) => Math.abs(Number(t) || 0) / (Math.abs(Rr.value?.[n] || 0) || 1e-9) * e);
let { pxPerUnit: t } = le({ minimapH: e });
return o.map((e) => Math.abs(Number(e) || 0) * t);
}, _e = l.map((e, t) => {
let n = R.value.style.chart.bars.distributed ? (e || 0) / Ir.value[t] : (e || 0) / u;
return e > 0 ? f * n : f * Math.abs(n);
}), ve = l.map((e) => Math.abs(e)).reduce((e, t) => e + t, 0);
return {
...a,
proportions: l.map((e, t) => R.value.style.chart.bars.distributed ? (e || 0) / Ir.value[t] : (e || 0) / ve),
series: l,
signedSeries: ee,
rectKeys: m,
minimapRectKeys: ie,
x: ae,
y: fe,
height: he,
horizontal_width: _e,
horizontal_y: de,
horizontal_x: me,
xMinimap: ue,
yMinimap: pe,
heightMinimap: ge
};
});
}), ii = g(() => Br.value.map((e, t) => ({
value: e,
sign: e >= 0 ? 1 : -1
})));
function ai(e, t, n, r, a) {
let o = a === -1 && e >= 0 ? -e : e;
return m(R.value.style.chart.bars.dataLabels.formatter, o, p({
p: R.value.style.chart.bars.dataLabels.prefix,
v: o,
s: R.value.style.chart.bars.dataLabels.suffix,
r: R.value.style.chart.bars.dataLabels.rounding
}), {
datapoint: t,
seriesIndex: n,
datapointIndex: r
});
}
function oi(e, t, n, r) {
return m(R.value.style.chart.bars.dataLabels.formatter, e, p({
v: isNaN(e) ? 0 : e,
s: "%",
r: R.value.style.chart.bars.dataLabels.rounding
}), {
datapoint: t,
seriesIndex: n,
datapointIndex: r
});
}
function si(e) {
let t = JSON.parse(JSON.stringify($.value)).map((t) => ({
name: t.name,
value: t.series[e] === 0 ? 0 : t.series[e] || null,
proportion: t.proportions[e] || null,
color: t.color,
id: t.id
}));
R.value.events.datapointClick && R.value.events.datapointClick({
datapoint: t,
seriesIndex: e + J.value.start
}), M("selectDatapoint", {
datapoint: t,
period: Q.value[e]
});
}
function ci(e) {
return JSON.parse(JSON.stringify($.value)).map((t) => ({
name: t.name,
absoluteIndex: t.absoluteIndex,
value: t.series[e] === 0 ? 0 : (t.signedSeries[e] === -1 && t.series[e] >= 0 ? -t.series[e] : t.series[e]) || null,
proportion: t.proportions[e] || null,
color: t.color,
id: t.id,
timeLabel: Gr.value[e]
}));
}
function li(e) {
if (R.value.events.datapointLeave) {
let t = ci(e);
R.value.events.datapointLeave({
datapoint: t,
seriesIndex: e + J.value.start
});
}
mn.value = !1, I.value = null, L.value === e && (L.value = null);
}
let ui = g(() => Array(q.value).fill(0).map((e, t) => ci(t)));
rt(() => j.selectedXIndex, (e) => {
if ([null, void 0].includes(j.selectedXIndex)) {
I.value = null;
return;
}
let t = e - J.value.start;
t < 0 || e >= J.value.end ? I.value = null : I.value = t ?? null;
}, { immediate: !0 });
function di(e) {
if (!R.value.style.chart.tooltip.showTimeLabel) return null;
let t = Q.value?.[e]?.text || null, n = ei.value?.[e]?.text || null, r = Gr.value?.[e]?.text || null;
return R.value.style.chart.tooltip.useDefaultTimeFormat ? t : n || r;
}
function fi(e, t = "pointer") {
if (Lr.value) return;
Un.value = t, L.value = e, I.value = e, mn.value = !0;
let n = R.value.style.chart.tooltip.customFormat, r = ci(e);
Qi({
seriesIndex: e,
datapoint: r
}), R.value.events.datapointEnter && R.value.events.datapointEnter({
datapoint: r,
seriesIndex: e + J.value.start
}), hn.value = {
timeLabel: di(e),
datapoint: r,
seriesIndex: e,
config: R.value,
series: $.value
};
let a = r.map((e) => Math.abs(e.value)).reduce((e, t) => e + t, 0), o = r.map((e) => ae(e.value)).reduce((e, t) => e + t, 0);
if (pe(n) && ne(() => n({
seriesIndex: e,
datapoint: r,
series: $.value,
config: R.value
}))) gn.value = n({
seriesIndex: e,
datapoint: r,
series: $.value,
config: R.value
});
else {
let { showValue: t, showTotal: n, totalTranslation: s, showPercentage: c, borderColor: l, roundingValue: u, roundingPercentage: d } = R.value.style.chart.tooltip, f = "", ee = di(e);
ee && (f += `<div style="width:100%;text-align:center;border-bottom:1px solid ${l};padding-bottom:6px;margin-bottom:3px;">${ee}</div>`), n && (f += `<div class="vue-data-ui-tooltip-total" style="display:flex;flex-direction:row;align-items:center;gap:4px">
<span>${s}:</span>
<span>
${m(R.value.style.chart.bars.dataLabels.formatter, o, p({
p: R.value.style.chart.bars.dataLabels.prefix,
v: o,
s: R.value.style.chart.bars.dataLabels.suffix,
r: u
}), { datapoint: {
name: s,
value: o
} })}
</span>
</div>`);
let te = [t && c ? "(" : "", t && c ? ")" : ""];
r.reverse().forEach((e) => {
f += `
<div style="display:flex;flex-direction:row;align-items:center;gap:4px">
<svg viewBox="0 0 60 60" height="14" width="14"><rect rx="5" x="0" y="0" height="60" width="60" stroke="none" fill="${R.value.style.chart.bars.gradient.show ? `url(#gradient_${e.id})` : e.color}"/>${fn.pattern ? `<rect rx="5" x="0" y="0" height="60" width="60" stroke="none" fill="url(#pattern_${P.value}_${e.absoluteIndex})"/>` : ""}</svg>
${e.name}${t || c ? ":" : ""} ${t ? m(R.value.style.chart.bars.dataLabels.formatter, e.value, p({
p: R.value.style.chart.bars.dataLabels.prefix,
v: e.value,
s: R.value.style.chart.bars.dataLabels.suffix,
r: u
}, { datapoint: e })) : ""} ${te[0]}${c ? p({
v: isNaN(e.value / a) ? 0 : Math.abs(e.value) / a * 100,
s: "%",
r: d
}) : ""}${te[1]}
</div>
`;
}), gn.value = `<div>${f}</div>`;
}
}
let pi = g(() => H.value.width), mi = g(() => H.value.height);
Oe({
timeLabelsEls: R.value.orientation === "vertical" ? Fn : Pn,
timeLabels: Q,
slicer: J,
configRef: R,
rotationPath: [
"style",
"chart",
"grid",
"x",
"timeLabels",
"rotation"
],
autoRotatePath: [
"style",
"chart",
"grid",
"x",
"timeLabels",
"autoRotate",
"enable"
],
isAutoSize: !1,
width: pi,
height: mi,
rotation: R.value.style.chart.grid.x.timeLabels.autoRotate.angle
});
function hi(e) {
Sn.value = e, _n.value += 1;
}
function gi() {
V.value.showTable = !V.value.showTable;
}
function _i() {
V.value.dataLabels.show = !V.value.dataLabels.show;
}
function vi() {
V.value.showTooltip = !V.value.showTooltip;
}
function yi() {
return $.value;
}
let bi = g(() => {
if ($.value.length === 0) return {
head: [],
body: [],
config: {},
columnNames: []
};
let e = $.value.map(({ name: e, color: t }) => ({
label: e,
color: t
})), t = [];
return Q.value.forEach((e) => {
let n = [R.value.style.chart.grid.x.timeLabels.values[e.absoluteIndex] ? e.text : i + 1];
K.value.forEach((t) => {
n.push(Number((t.series[e.absoluteIndex] || 0).toFixed(R.value.table.td.roundingValue)));
}), t.push(n);
}), {
head: e,
body: t
};
});
function xi(e = null) {
let r = [
[R.value.style.chart.title.text],
[R.value.style.chart.title.subtitle.text],
[""]
], a = ["", ...bi.value.head.map((e) => e.label)], o = bi.value.body, s = r.concat([a]).concat(o), c = n(s);
e ? e(c) : t({
csvContent: c,
title: R.value.style.chart.title.text || "vue-ui-stackbar"
});
}
let Si = g(() => {
let e = [""].concat($.value.map((e) => e.name), " <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2\" /></svg>"), t = [], n = J.value.end - J.value.start;
for (let e = 0; e < n; e += 1) {
let n = J.value.start + e, r = $.value.map((t) => t.series[e] ?? 0).reduce((e, t) => e + t, 0);
t.push([R.value.style.chart.grid.x.timeLabels.values[n] && Q.value[e]?.text || n + 1].concat($.value.map((t) => (t.series[e] ?? 0).toFixed(R.value.table.td.roundingValue)), (r ?? 0).toFixed(R.value.table.td.roundingValue)));
}
let r = {
th: {
backgroundColor: R.value.table.th.backgroundColor,
color: R.value.table.th.color,
outline: R.value.table.th.outline
},
td: {
backgroundColor: R.value.table.td.backgroundColor,
color: R.value.table.td.color,
outline: R.value.table.td.outline
},
breakpoint: R.value.table.responsiveBreakpoint
}, a = [R.value.table.columnNames.period].concat($.value.map((e) => e.name), R.value.table.columnNames.total);
return {
head: e,
body: t.slice(0, J.value.end - J.value.start),
config: r,
colNames: a
};
});
function Ci() {
F.value.length ? F.value = [] : Oi.value.forEach((e) => {
F.value.push(e.id);
}), M("selectLegend", $.value);
}
function wi(e) {
if (F.value.includes(e.id)) F.value = F.value.filter((t) => t !== e.id);
else {
if (F.value.length === K.value.length - 1) return;
F.value.push(e.id);
}
M("selectLegend", $.value);
}
function Ti(e) {
return K.value.length ? K.value.find((t) => t.name === e) || (R.value.debug && console.warn(`VueUiStackbar - Series name not found "${e}"`), null) : (R.value.debug && console.warn("VueUiStackbar - There are no series to show."), null);
}
function Ei(e) {
let t = Ti(e);
t !== null && F.value.includes(t.id) && wi({ id: t.id });
}
function Di(e) {
let t = Ti(e);
t !== null && (F.value.includes(t.id) || wi({ id: t.id }));
}
let Oi = g(() => K.value.map((e, t) => ({
...e,
shape: "square"
})).map((e) => ({
...e,
opacity: F.value.includes(e.id) ? .5 : 1,
segregate: () => wi(e),
isSegregated: F.value.includes(e.id)
}))), ki = g(() => ({
cy: "stackbar-legend",
backgroundColor: R.value.style.chart.legend.backgroundColor,
color: R.value.style.chart.legend.color,
fontSize: R.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: R.value.style.chart.legend.bold ? "bold" : ""
})), Ai = T(!1);
function ji() {
Ai.value = !Ai.value;
}
function Mi(e, t) {
let n = JSON.parse(JSON.stringify($.value)).map((e) => ({
name: e.name,
value: e.series[t] === 0 ? 0 : (e.signedSeries[t] === -1 && e.series[t] >= 0 ? -e.series[t] : e.series[t]) || null,
proportion: e.proportions[t] || null,
color: e.color,
id: e.id
}));
M("selectTimeLabel", {
datapoint: n,
absoluteIndex: e.absoluteIndex,
label: e.text
});
}
let Ni = g(() => Math.max(...$.value.flatMap((e) => e.series)));
function Pi(e, t) {
return R.value.style.chart.bars.showDistributedPercentage && R.value.style.chart.bars.distributed ? sr.value ? t * 100 >= R.value.style.chart.bars.dataLabels.hideUnderPercentage : !R.value.style.chart.bars.dataLabels.hideEmptyPercentages || t > 0 : sr.value ? (or.value && hr.value && console.warn("Vue Data UI - VueUiStackbar - You cannot set both dataLabels.hideUnderPercentage and dataLabels.hideUnderValue. Note that dataLabels.hideUnderPercentage takes precedence in this case."), e > Ni.value * R.value.style.chart.bars.dataLabels.hideUnderPercentage / 100) : or.value ? Math.abs(e) >= R.value.style.chart.bars.dataLabels.hideUnderValue : !R.value.style.chart.bars.dataLabels.hideEmptyValues || e !== 0;
}
async function Fi({ scale: e = 2 } = {}) {
if (!N.value) return;
let { imageUri: t, base64: n } = await ke({
domElement: N.value,
base64: !0,
img: !0,
scale: e
}), r = N.value.getBoundingClientRect(), a = {
width: r.width,
height: r.height,
aspectRatio: r.height ? r.width / r.height : 0
}, o = await re(t, e) ?? a;
return {
imageUri: t,
base64: n,
title: R.value.style.chart.title.text,
...o
};
}
let Ii = g(() => {
let e = R.value.table.useDialog && !R.value.table.show, t = V.value.showTable;
return {
component: e ? cn : nn,
title: `${R.value.style.chart.title.text}${R.value.style.chart.title.subtitle.text ? `: ${R.value.style.chart.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: R.value.table.th.backgroundColor,
color: R.value.table.th.color,
headerColor: R.value.table.th.color,
headerBg: R.value.table.th.backgroundColor,
isFullscreen: Sn.value,
fullscreenParent: N.value,
forcedWidth: Math.min(800, window.innerWidth * .8),
isCursorPointer: B.value
} : {
hideDetails: !0,
config: {
open: t,
maxHeight: 1e4,
body: {
backgroundColor: R.value.style.chart.backgroundColor,
color: R.value.style.chart.color
},
head: {
backgroundColor: R.value.style.chart.backgroundColor,
color: R.value.style.chart.color
}
}
}
};
});
rt(() => V.value.showTable, (e) => {
R.value.table.show || (e && R.value.table.useDialog && On.value ? On.value.open() : "close" in On.value && On.value.close());
});
function Li() {
V.value.showTable = !1, kn.value && kn.value.setTableIconState(!1);
}
let Ri = g(() => R.value.style.chart.backgroundColor), zi = g(() => R.value.style.chart.legend), Bi = g(() => R.value.style.chart.title), { exportSvg: Vi, getSvg: Hi } = Ce({
svg: nr,
title: Bi,
legend: zi,
legendItems: Oi,
backgroundColor: Ri
});
async function Ui({ isCb: e }) {
jn.value = !0, await Xe();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await Hi();
await Promise.resolve(R.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(Vi());
} finally {
jn.value = !1;
}
}
function Wi(e) {
if (e?.stage === "start") {
An.value = !0;
return;
}
if (e?.stage === "end") {
An.value = !1;
return;
}
dr();
}
function Gi(e) {
let t = q.value;
return e > t ? t : e < 0 || e < J.value.start ? R.value.style.chart.zoom.startIndex === null ? 1 : J.value.start + 1 : e;
}
let Ki = T(!1), qi = T(!1);
function Ji() {
if (!Ki.value) {
Ki.value = !0;
try {
let { startIndex: e, endIndex: t, keepState: n } = R.value.style.chart.zoom, r = n ? Math.max(0, q.value) : q.value;
if (n && r <= 0) return;
let a = e ?? 0, o = t == null ? r : Math.min(Gi(t + 1), r);
Yi.value = !0, J.value.start = a, J.value.end = o, Y.value.start = a, Y.value.end = o, Mr(), qi.value = !0;
} finally {
queueMicrotask(() => {
Yi.value = !1;
}), Ki.value = !1;
}
}
}
let Yi = T(!1);
function Xi(e) {
Ki.value || Yi.value || e !== J.value.start && (J.value.start = e, Y.value.start = e, Mr());
}
function Zi(e) {
if (Ki.value || Yi.value) return;
let t = Gi(e);
t !== J.value.end && (J.value.end = t, Y.value.end = t, Mr());
}
function Qi({ seriesIndex: e, datapoint: t }) {
let n = J.value.start + e;
M("selectX", {
dataset: t,
index: n,
indexLabel: R.value.style.chart.grid.x.timeLabels.values[n]
});
}
function $i() {
return { y0: Z.value?.[0]?.zero ?? G.value.bottom };
}
function ea(e) {
let { y0: t } = $i(), n = R.value.style.chart.bars.totalValues, r = Math.max(2, n.fontSize * .3 + n.offsetY), a = Infinity, o = !1;
for (let t of $.value || []) {
let n = t?.series?.[e] ?? 0, r = t?.height?.[e] ?? 0, s = t?.y?.[e];
n > 0 && r > 0 && Number.isFinite(s) && (o = !0, s < a && (a = s));
}
let s = (o && Number.isFinite(a) ? a : t) - r;
return Math.min(Math.max(s, 0), G.value.bottom);
}
function ta(e) {
let { x0: t } = $i(), n = Math.max(2, R.value.style.chart.bars.totalValues.fontSize * .3 + R.value.style.chart.bars.totalValues.offsetX), r = -Infinity, a = !1;
for (let t of $.value || []) {
let n = t?.series?.[e] ?? 0, o = t?.horizontal_x?.[e], s = t?.horizontal_width?.[e], c = Number.isFinite(s) ? Math.max(0, s) : 0;
Number.isFinite(o) && n > 0 && c > 0 && (a = !0, r = Math.max(r, o + c));
}
return (a && Number.isFinite(r) ? r : t) + n;
}
async function na() {
if (M("copyAlt", {
config: R.value,
dataset: $.value
}), !R.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(R.value.userOptions.callbacks.altCopy({
config: R.value,
dataset: $.value
}));
}
let ra = T(!1);
function ia() {
L.value = null, ra.value = !0;
}
function aa() {
L.value = null, mn.value = !1, I.value = null, M("selectX", {
index: null,
indexLabel: null,
dataset: null
}), ra.value = !1;
}
function oa(e) {
if (!nr.value || Ai.value || document.activeElement !== nr.value || Lr.value || !J.value.end && J.value.end !== 0) return;
let t = R.value.orientation === "vertical", n = R.value.orientation === "horizontal", r = t && e.key === "ArrowLeft" || n && e.key === "ArrowUp", a = t && e.key === "ArrowRight" || n && e.key === "ArrowDown", o = e.key === "Enter" || e.key === " ", s = e.key === "Escape";
if (!r && !a && !o && !s) return;
let c = J.value.end - J.value.start;
if (c <= 0) return;
if (e.preventDefault(), e.stopPropagation(), s) {
L.value = null, mn.value = !1, I.value = null, M("selectX", {
index: null,
indexLabel: null,
dataset: null
});
return;
}
if (o) {
if (L.value === null) return;
si(L.value);
return;
}
let l = L.value, u = I.value;
l !== null && l >= 0 && l < c ? a ? (l += 1, l >= c && (l = 0)) : r && (--l, l < 0 && (l = c - 1)) : u !== null && u >= 0 && u < c ? (l = a ? u + 1 : u - 1, l >= c && (l = 0), l < 0 && (l = c - 1)) : l = a ? 0 : c - 1, L.value = l, sa(l), fi(l, "keyboard");
}
function sa(e) {
if (!Number.isFinite(e)) return;
let t, n;
R.value.orientation === "vertical" ? (t = G.value.left + e * X.value + X.value / 2, n = G.value.top + G.value.height / 2) : (t = G.value.left + G.value.width / 2, n = G.value.top + e * X.value + X.value / 2);
let r = a(t, n, nr.value);
r && (Hn.value = r);
}
let ca = g(() => ({
headers: Si.value?.colNames ?? [],
rows: Si.value?.body ?? []
}));
return Me({
getData: yi,
getImage: Fi,
generatePdf: ur,
generateCsv: xi,
generateImage: dr,
generateSvg: Ui,
hideSeries: Di,
showSeries: Ei,
toggleTable: gi,
toggleLabels: _i,
toggleTooltip: vi,
toggleAnnotator: ji,
toggleFullscreen: hi,
copyAlt: na
}), (t, n) => (w(), y("div", {
id: `stackbar_${P.value}`,
ref_key: "stackbarChart",
ref: N,
class: x({
"vue-data-ui-component": !0,
"vue-ui-stackbar": !0,
"vue-data-ui-wrapper-fullscreen": Sn.value
}),
style: C(`background:${R.value.style.chart.backgroundColor};color:${R.value.style.chart.color};font-family:${R.value.style.fontFamily}; position: relative; ${R.value