vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
986 lines • 69.8 kB
JavaScript
import { defineAsyncComponent as ae, useSlots as xa, computed as x, ref as g, onMounted as Ct, toRefs as ka, watch as De, shallowRef as St, onBeforeUnmount as $t, watchEffect as Tt, nextTick as Mt, createElementBlock as o, openBlock as r, unref as v, normalizeStyle as Q, normalizeClass as le, createBlock as H, createCommentVNode as d, renderSlot as L, createElementVNode as U, createVNode as xe, createSlots as At, withCtx as _, normalizeProps as B, guardReactiveProps as W, Fragment as b, renderList as m, mergeProps as Fe, toDisplayString as A, Teleport as wa, createTextVNode as La } from "vue";
import { u as za, c as Nt, t as _a, a as Ca, p as ke, b as Sa, C as se, d as $a, o as It, f as Rt, g as Ta, e as Ma, an as we, ac as Ot, D as Pt, X as Aa, l as Na, a9 as Le, F as Vt, k as ze, i as j, I as Ia, a0 as Ra, y as Et, v as Oa, w as Pa, z as Va } from "./index-q-LPw2IT.js";
import { t as He, u as Ea } from "./useResponsive-DfdjqQps.js";
import { u as Da } from "./usePrinter-DX7efa1s.js";
import { u as Fa, B as Ha } from "./useLoading-D7YHNtLX.js";
import { u as Dt } from "./useNestedProp-04aFeUYu.js";
import { u as Ua } from "./useTimeLabels-DkzmKfZn.js";
import { u as Ba } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Wa } from "./useChartAccessibility-9icAAmYg.js";
import { u as Ya } from "./useTimeLabelCollider-CIsgDrl9.js";
import Xa from "./img-Ctts6JQb.js";
import Ga from "./Title-B55R8CAZ.js";
import { _ as Ja } from "./Shape-DHIaJs9G.js";
import qa from "./Legend-DcDSkq99.js";
import { S as Za } from "./Slicer-BarTZZDU.js";
import { _ as Ka } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Qa = ["id"], ja = ["id"], el = ["xmlns", "viewBox"], tl = ["x", "y", "width", "height"], al = { key: 1 }, ll = ["id"], sl = ["stop-color"], rl = ["stop-color"], ol = ["stop-color"], il = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], nl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], cl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], hl = { key: 0 }, vl = ["x", "y", "height", "rx", "width", "fill", "stroke", "stroke-width"], dl = { key: 0 }, yl = ["x", "y", "height", "rx", "width", "fill", "stroke", "stroke-width"], gl = ["x", "y", "width", "rx", "height", "fill", "stroke", "stroke-width"], bl = { key: 0 }, fl = ["x", "y", "width", "rx", "height", "fill", "stroke", "stroke-width"], ml = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], pl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], xl = ["x", "y", "font-size", "fill", "font-weight"], kl = ["transform", "font-size", "fill", "font-weight"], wl = ["x", "y", "font-size", "fill", "font-weight"], Ll = ["x", "y", "font-size", "font-weight", "fill"], zl = ["x", "y", "font-size", "fill", "font-weight"], _l = ["x", "y", "font-size", "font-weight", "fill"], Cl = ["x1", "x2", "y1", "y2", "stroke"], Sl = ["x", "y", "font-size", "font-weight", "fill"], $l = ["x1", "x2", "y1", "y2", "stroke"], Tl = ["font-size", "font-weight", "fill", "text-anchor", "transform"], Ml = { key: 0 }, Al = { key: 1 }, Nl = ["text-anchor", "font-size", "font-weight", "fill", "transform", "onClick"], Il = ["text-anchor", "font-size", "fill", "transform", "innerHTML", "onClick"], Rl = { key: 0 }, Ol = { key: 1 }, Pl = ["font-size", "font-weight", "fill", "x", "y", "onClick"], Vl = ["font-size", "font-weight", "fill", "x", "y", "onClick", "innerHTML"], El = ["x", "y", "width", "height", "onClick", "onMouseenter", "onMouseleave", "fill"], Dl = ["x", "y", "width", "height", "onClick", "onMouseenter", "onMouseleave", "fill"], Fl = {
key: 3,
class: "vue-data-ui-watermark"
}, Hl = ["id"], Ul = ["onClick"], Bl = ["innerHTML"], Wl = {
__name: "vue-ui-stackbar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint", "selectLegend", "selectTimeLabel"],
setup(_e, { expose: Ft, emit: Ht }) {
const Ut = ae(() => import("./Tooltip-BMOddG-M.js")), Bt = ae(() => import("./vue-ui-accordion-D46i_gkB.js")), Wt = ae(() => import("./DataTable-rj9-mAwF.js")), Yt = ae(() => import("./PenAndPaper-BJ0hcgsa.js")), Xt = ae(() => import("./UserOptions-DVzyjG-W.js")), Gt = ae(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_stackbar: Jt } = za(), qt = xa(), f = _e, Ce = Ht, Se = x({
get() {
return !!f.dataset && f.dataset.length;
},
set(a) {
return a;
}
}), V = g(null), T = g(Nt()), $e = g(!1), Te = g(null), Me = g(""), S = g([]), Ue = g(0), Be = g(null), We = g(null), Ye = g(null), Xe = g(null), Ge = g(0), ne = g(!1), ue = g(null), Y = g(!1), Je = g(0), Zt = g(0), Kt = g(0), qe = g(null), Ze = g(!1), Ae = g(null), Ne = g(null), X = g(null), G = g(null), Qt = g(null), Ke = g(null);
Ct(() => {
Ze.value = !0, Pe();
});
const e = g(Re()), { loading: re, FINAL_DATASET: ce, manualLoading: he } = Fa({
...ka(f),
FINAL_CONFIG: e,
prepareConfig: Re,
callback: () => {
Promise.resolve().then(async () => {
await Ve();
});
},
skeletonDataset: [
{
name: "",
series: [2, 3, 5, 8, 13, 21],
color: "#BABABA"
},
{
name: "",
series: [1, 2, 3, 5, 8, 13],
color: "#CACACA"
}
],
skeletonConfig: _a({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
useCssAnimation: !1,
table: { show: !1 },
tooltip: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
bars: {
totalValues: { show: !1 },
dataLabels: { show: !1 }
},
grid: {
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
}
}
}
}
})
}), { userOptionsVisible: Ie, setUserOptionsVisibility: Qe, keepUserOptionState: je } = Ba({ config: e.value }), { svgRef: et } = Wa({ config: e.value.style.chart.title });
function Re() {
const a = Dt({
userConfig: f.config,
defaultConfig: Jt
});
let l = {};
return a.theme ? l = {
...Dt({
userConfig: Sa.vue_ui_stackbar[a.theme] || f.config,
defaultConfig: a
}),
customPalette: Ca[a.theme] || ke
} : l = a, f.config && se(f.config, "style.chart.grid.scale.scaleMin") ? l.style.chart.grid.scale.scaleMin = f.config.style.chart.grid.scale.scaleMin : l.style.chart.grid.scale.scaleMin = null, f.config && se(f.config, "style.chart.grid.scale.scaleMax") ? l.style.chart.grid.scale.scaleMax = f.config.style.chart.grid.scale.scaleMax : l.style.chart.grid.scale.scaleMax = null, f.config && se(f.config, "style.chart.zoom.startIndex") ? l.style.chart.zoom.startIndex = f.config.style.chart.zoom.startIndex : l.style.chart.zoom.startIndex = null, f.config && se(f.config, "style.chart.zoom.endIndex") ? l.style.chart.zoom.endIndex = f.config.style.chart.zoom.endIndex : l.style.chart.zoom.endIndex = null, f.config && se(f.config, "style.chart.bars.dataLabels.hideUnderValue") ? l.style.chart.bars.dataLabels.hideUnderValue = f.config.style.chart.bars.dataLabels.hideUnderValue : l.style.chart.bars.dataLabels.hideUnderValue = null, f.config && se(f.config, "style.chart.bars.dataLabels.hideUnderPercentage") ? l.style.chart.bars.dataLabels.hideUnderPercentage = f.config.style.chart.bars.dataLabels.hideUnderPercentage : l.style.chart.bars.dataLabels.hideUnderPercentage = null, l;
}
const tt = x(() => e.value.style.chart.bars.dataLabels.hideUnderValue !== null), at = x(() => e.value.style.chart.bars.dataLabels.hideUnderPercentage !== null);
De(() => f.config, (a) => {
re.value || (e.value = Re()), Ie.value = !e.value.userOptions.showOnChartHover, Pe(), Je.value += 1, Zt.value += 1, Kt.value += 1, z.value.dataLabels.show = e.value.style.chart.bars.dataLabels.show, z.value.showTable = e.value.table.show, z.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 }), De(() => f.dataset, (a) => {
Array.isArray(a) && a.length > 0 && (he.value = !1), ut();
}, { deep: !0 });
const z = g({
dataLabels: {
show: e.value.style.chart.bars.dataLabels.show
},
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
});
De(e, () => {
z.value = {
dataLabels: {
show: e.value.style.chart.bars.dataLabels.show
},
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
};
}, { immediate: !0 });
const { isPrinting: lt, isImaging: st, generatePdf: rt, generateImage: ot } = Da({
elementId: `stackbar_${T.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-stackbar",
options: e.value.userOptions.print
}), ee = g({
width: e.value.style.chart.width,
height: e.value.style.chart.height,
paddingRatio: {
top: e.value.style.chart.padding.top / e.value.style.chart.height,
right: e.value.style.chart.padding.right / e.value.style.chart.width,
bottom: e.value.style.chart.padding.bottom / e.value.style.chart.height,
left: e.value.style.chart.padding.left / e.value.style.chart.width
}
}), jt = x(() => $a(e.value.customPalette)), E = St(null), te = St(null), it = g(null);
Ct(() => {
Pe();
});
const Oe = x(() => !!e.value.debug);
function Pe() {
if (It(f.dataset) ? (Rt({
componentName: "VueUiStackbar",
type: "dataset",
debug: Oe.value
}), he.value = !0) : f.dataset.forEach((a, l) => {
Ta({
datasetObject: a,
requiredAttributes: ["name", "series"]
}).forEach((t) => {
Se.value = !1, Rt({
componentName: "VueUiStackbar",
type: "datasetSerieAttribute",
property: t,
index: l,
debug: Oe.value
}), he.value = !0;
});
}), It(f.dataset) || (he.value = e.value.loading), setTimeout(() => {
Y.value = !0;
}, 10), e.value.responsive) {
const a = He(() => {
Y.value = !1;
const { width: l, height: t } = Ea({
chart: V.value,
title: e.value.style.chart.title.text ? Be.value : null,
legend: e.value.style.chart.legend.show ? We.value : null,
slicer: e.value.style.chart.zoom.show && F.value > 1 ? Ye.value : null,
source: Xe.value
});
requestAnimationFrame(() => {
ee.value.width = l, ee.value.height = t - 12, clearTimeout(it.value), it.value = setTimeout(() => {
Y.value = !0;
}, 10);
});
});
E.value && (te.value && E.value.unobserve(te.value), E.value.disconnect()), E.value = new ResizeObserver(a), te.value = V.value.parentNode, E.value.observe(te.value);
}
Ve();
}
$t(() => {
E.value && (te.value && E.value.unobserve(te.value), E.value.disconnect());
});
function ea() {
let a = 0;
e.value.orientation === "vertical" && X.value && (a = Array.from(X.value.querySelectorAll("text")).reduce((s, c) => {
const u = c.getComputedTextLength();
return u > s ? u : s;
}, 0)), e.value.orientation === "horizontal" && G.value && (a = Array.from(G.value.querySelectorAll("text")).reduce((s, c) => {
const u = c.getComputedTextLength();
return u > s ? u : s;
}, 0));
const l = Ne.value ? Ne.value.getBoundingClientRect().width : 0;
return a + l + (l ? 24 : 0);
}
const ve = g(0), de = g(0), ta = He((a) => {
ve.value = a;
}, 100);
Tt((a) => {
const l = e.value.orientation === "vertical" ? G.value : X.value;
if (!l) return;
const t = new ResizeObserver((s) => {
ta(s[0].contentRect.height);
});
t.observe(l), a(() => t.disconnect());
});
const aa = He((a) => {
de.value = a + e.value.style.chart.bars.totalValues.fontSize;
}, 100);
Tt((a) => {
if (e.value.orientation === "vertical") return;
const l = Ke.value;
if (!l) return;
const t = new ResizeObserver((s) => {
aa(s[0].contentRect.width);
});
t.observe(l), a(() => t.disconnect());
}), $t(() => {
ve.value = 0, de.value = 0;
});
const nt = x(() => {
let a = 0;
Ae.value && (a = Ae.value.getBBox().height);
let l = 0;
return e.value.orientation === "vertical" && G.value && (l = ve.value), e.value.orientation === "horizontal" && X.value && (l = ve.value), a + l;
}), n = x(() => {
const { height: a, width: l } = ee.value, { right: t } = ee.value.paddingRatio;
let s = e.value.style.chart.bars.totalValues.show && f.dataset && f.dataset.length > 1 ? e.value.style.chart.bars.totalValues.fontSize * 1.3 : 0, c = 0;
e.value.style.chart.grid.y.axisLabels.show && (c = ea());
const u = e.value.style.chart.padding.top + s, C = l - l * t - de.value, J = a - e.value.style.chart.padding.bottom - nt.value - s, q = e.value.style.chart.padding.left + c, Z = l - q - l * t - de.value, O = a - u - e.value.style.chart.padding.bottom - nt.value - s;
return {
chartHeight: a,
chartWidth: l,
top: u,
right: C,
bottom: J,
left: q,
width: Math.max(0, Z),
height: Math.max(0, O)
};
}), D = x(() => ce.value.map((a, l) => {
const t = Ma(a.color) || jt.value[l] || ke[l] || ke[l % ke.length];
return {
...a,
// In distributed mode, all values are converted to positive
series: JSON.parse(JSON.stringify(a.series)).map((s) => e.value.style.chart.bars.distributed ? Math.abs(s) : s),
// Store signs to manage display of neg values in distributed mode
signedSeries: a.series.map((s) => s >= 0 ? 1 : -1),
absoluteIndex: l,
id: Nt(),
color: t
};
})), F = x(() => Math.max(...D.value.filter((a) => !S.value.includes(a.id)).map((a) => a.series.length))), h = g({
start: 0,
end: Math.max(...ce.value.map((a) => a.series.length))
});
function ut() {
Ve();
}
async function Ve() {
await Mt(), await Mt();
const { startIndex: a, endIndex: l } = e.value.style.chart.zoom, t = qe.value, s = Math.max(...ce.value.map((c) => c.series.length));
(a != null || l != null) && t ? (a != null && t.setStartValue(a), l != null && t.setEndValue(la(l + 1))) : (h.value = { start: 0, end: s }, Ge.value += 1);
}
function la(a) {
const l = Math.max(...ce.value.map((t) => t.series.length));
return a > l ? l : a < 0 || e.value.style.chart.zoom.startIndex !== null && a < e.value.style.chart.zoom.startIndex ? e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex + 1 : 1 : a;
}
const y = x(() => {
let a;
return e.value.orientation === "vertical" ? a = n.value.width / (h.value.end - h.value.start) : a = n.value.height / (h.value.end - h.value.start), a <= 0 ? 0 : a;
}), oe = x(() => we(D.value.filter((a) => !S.value.includes(a.id))).slice(h.value.start, h.value.end)), sa = x(() => we(D.value.filter((a) => !S.value.includes(a.id)).map((a) => ({
...a,
series: a.series.map((l, t) => a.signedSeries[t] === -1 && l >= 0 ? -l : l)
}))).slice(h.value.start, h.value.end)), ye = x(() => {
const a = D.value.filter((l) => !S.value.includes(l.id));
return {
positive: we(a.map((l) => ({
...l,
series: l.series.slice(h.value.start, h.value.end).map((t) => t >= 0 ? t : 0)
}))),
negative: we(a.map((l) => ({
...l,
series: l.series.slice(h.value.start, h.value.end).map((t) => t < 0 ? t : 0)
})))
};
}), R = x(() => {
const a = e.value.style.chart.grid.scale.scaleMax !== null && !e.value.style.chart.bars.distributed ? e.value.style.chart.grid.scale.scaleMax : Math.max(...ye.value.positive), l = Math.min(...ye.value.negative), t = e.value.style.chart.grid.scale.scaleMin !== null && !e.value.style.chart.bars.distributed ? e.value.style.chart.grid.scale.scaleMin : [-1 / 0, 1 / 0, NaN, void 0, null].includes(l) ? 0 : l, s = !e.value.style.chart.bars.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? Ot(t > 0 ? 0 : t, a < 0 ? 0 : a, e.value.style.chart.grid.scale.ticks) : Pt(t > 0 ? 0 : t, a < 0 ? 0 : a, e.value.style.chart.grid.scale.ticks);
return s.ticks.map((c) => ({
zero: n.value.bottom - n.value.height * (Math.abs(s.min) / (s.max + Math.abs(s.min))),
y: n.value.bottom - n.value.height * ((c + Math.abs(s.min)) / (s.max + Math.abs(s.min))),
x: n.value.left - 8,
horizontal_zero: n.value.left + n.value.width * (Math.abs(s.min) / (s.max + Math.abs(s.min))),
horizontal_x: n.value.left + n.value.width * ((c + Math.abs(s.min)) / (s.max + Math.abs(s.min))),
horizontal_y: n.value.bottom - 8,
value: c
}));
}), $ = x(() => Ua({
values: e.value.style.chart.grid.x.timeLabels.values,
maxDatapoints: F.value,
formatter: e.value.style.chart.grid.x.timeLabels.datetimeFormatter,
start: h.value.start,
end: h.value.end
})), w = x(() => {
if (!Se.value && !re.value) return [];
let a = Array(F.value).fill(0), l = Array(F.value).fill(0), t = Array(F.value).fill(0), s = Array(F.value).fill(0);
const c = Math.max(...ye.value.positive) || 0, u = Math.min(...ye.value.negative), C = [-1 / 0, 1 / 0, NaN, void 0, null].includes(u) ? 0 : u, J = !e.value.style.chart.bars.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? Ot(e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : C > 0 ? 0 : C, e.value.style.chart.grid.scale.scaleMax !== null ? e.value.style.chart.grid.scale.scaleMax : c < 0 ? 0 : c, e.value.style.chart.grid.scale.ticks) : Pt(e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : C > 0 ? 0 : C, e.value.style.chart.grid.scale.scaleMax !== null ? e.value.style.chart.grid.scale.scaleMax : c < 0 ? 0 : c, e.value.style.chart.grid.scale.ticks), { min: q, max: Z } = J, O = Z + (q >= 0 ? 0 : Math.abs(q)) || 1, M = n.value.height, pe = n.value.width, zt = R.value[0] ? R.value[0].zero : n.value.bottom, _t = R.value[0] ? R.value[0].horizontal_zero : n.value.left;
return D.value.filter((ie) => !S.value.includes(ie.id)).map((ie) => {
const P = ie.series.slice(h.value.start, h.value.end), va = ie.signedSeries.slice(h.value.start, h.value.end), da = P.map((p, k) => n.value.left + y.value * k + y.value * e.value.style.chart.bars.gapRatio / 4), ya = P.map((p, k) => n.value.top + y.value * k + y.value * e.value.style.chart.bars.gapRatio / 4), ga = P.map((p, k) => {
const N = e.value.style.chart.bars.distributed ? (p || 0) / oe.value[k] : (p || 0) / O;
let K, I;
return p > 0 ? (I = M * N, K = zt - I - a[k], a[k] += I) : (I = M * N, K = zt + t[k], t[k] += Math.abs(I)), K;
}), ba = P.map((p, k) => {
const N = e.value.style.chart.bars.distributed ? (p || 0) / oe.value[k] : (p || 0) / O;
let K, I;
return p > 0 ? (I = pe * N, K = _t + l[k], l[k] += I) : (I = pe * N, K = _t - Math.abs(I) - s[k], s[k] += Math.abs(I)), K;
}), fa = P.map((p, k) => {
const N = e.value.style.chart.bars.distributed ? (p || 0) / oe.value[k] : (p || 0) / O;
return p > 0 ? M * N : M * Math.abs(N);
}), ma = P.map((p, k) => {
const N = e.value.style.chart.bars.distributed ? (p || 0) / oe.value[k] : (p || 0) / O;
return p > 0 ? pe * N : pe * Math.abs(N);
}), pa = P.map((p) => Math.abs(p)).reduce((p, k) => p + k, 0);
return {
...ie,
proportions: P.map((p, k) => e.value.style.chart.bars.distributed ? (p || 0) / oe.value[k] : (p || 0) / pa),
series: P,
signedSeries: va,
x: da,
y: ga,
height: fa,
horizontal_width: ma,
horizontal_y: ya,
horizontal_x: ba
};
});
}), ct = x(() => sa.value.map((a, l) => ({
value: a,
sign: a >= 0 ? 1 : -1
})));
function ge(a, l, t, s, c) {
const u = c === -1 && a >= 0 ? -a : a;
return ze(
e.value.style.chart.bars.dataLabels.formatter,
u,
j({
p: e.value.style.chart.bars.dataLabels.prefix,
v: u,
s: e.value.style.chart.bars.dataLabels.suffix,
r: e.value.style.chart.bars.dataLabels.rounding
}),
{ datapoint: l, seriesIndex: t, datapointIndex: s }
);
}
function ht(a, l, t, s) {
return ze(
e.value.style.chart.bars.dataLabels.formatter,
a,
j({
v: isNaN(a) ? 0 : a,
s: "%",
r: e.value.style.chart.bars.dataLabels.rounding
}),
{ datapoint: l, seriesIndex: t, datapointIndex: s }
);
}
function vt(a) {
const l = JSON.parse(JSON.stringify(w.value)).map((t) => ({
name: t.name,
value: t.series[a] === 0 ? 0 : t.series[a] || null,
proportion: t.proportions[a] || null,
color: t.color,
id: t.id
}));
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: a + h.value.start }), Ce("selectDatapoint", { datapoint: l, period: $.value[a] });
}
function dt(a) {
return JSON.parse(JSON.stringify(w.value)).map((l) => ({
name: l.name,
absoluteIndex: l.absoluteIndex,
value: l.series[a] === 0 ? 0 : (l.signedSeries[a] === -1 && l.series[a] >= 0 ? -l.series[a] : l.series[a]) || null,
proportion: l.proportions[a] || null,
color: l.color,
id: l.id
}));
}
function yt(a) {
if (e.value.events.datapointLeave) {
const l = dt(a);
e.value.events.datapointLeave({ datapoint: l, seriesIndex: a + h.value.start });
}
$e.value = null, ue.value = null;
}
function gt(a) {
ue.value = a, $e.value = !0;
const l = e.value.style.chart.tooltip.customFormat, t = dt(a);
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a + h.value.start }), Te.value = {
datapoint: t,
seriesIndex: a,
config: e.value,
series: w.value
};
const s = t.map((c) => Math.abs(c.value)).reduce((c, u) => c + u, 0);
if (Et(l) && Va(() => l({
seriesIndex: a,
datapoint: t,
series: w.value,
config: e.value
})))
Me.value = l({
seriesIndex: a,
datapoint: t,
series: w.value,
config: e.value
});
else {
const {
showValue: c,
showPercentage: u,
borderColor: C,
roundingValue: J,
roundingPercentage: q
} = e.value.style.chart.tooltip;
let Z = "";
$.value[a] && $.value[a].text && e.value.style.chart.tooltip.showTimeLabel && (Z += `<div style="width:100%;text-align:center;border-bottom:1px solid ${C};padding-bottom:6px;margin-bottom:3px;">${$.value[a].text}</div>`);
const O = [
c && u ? "(" : "",
c && u ? ")" : ""
];
t.reverse().forEach((M) => {
Z += `
<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="${e.value.style.chart.bars.gradient.show ? `url(#gradient_${M.id})` : M.color}"/>${qt.pattern ? `<rect rx="5" x="0" y="0" height="60" width="60" stroke="none" fill="url(#pattern_${T.value}_${M.absoluteIndex})"/>` : ""}</svg>
${M.name}${c || u ? ":" : ""} ${c ? j({
p: e.value.style.chart.bars.dataLabels.prefix,
v: M.value,
s: e.value.style.chart.bars.dataLabels.suffix,
r: J
}) : ""} ${O[0]}${u ? j({
v: isNaN(M.value / s) ? 0 : Math.abs(M.value) / s * 100,
// Negs are absed to show relative proportion to absolute total. It's opinionated.
s: "%",
r: q
}) : ""}${O[1]}
</div>
`;
}), Me.value = `<div>${Z}</div>`;
}
}
const ra = x(() => ee.value.width), oa = x(() => ee.value.height);
Ya({
timeLabelsEls: e.value.orientation === "vertical" ? G : X,
timeLabels: $,
slicer: h,
configRef: e,
rotationPath: ["style", "chart", "grid", "x", "timeLabels", "rotation"],
autoRotatePath: ["style", "chart", "grid", "x", "timeLabels", "autoRotate", "enable"],
isAutoSize: !1,
width: ra,
height: oa,
rotation: e.value.style.chart.grid.x.timeLabels.autoRotate.angle
});
function bt(a) {
ne.value = a, Ue.value += 1;
}
function ft() {
z.value.showTable = !z.value.showTable;
}
function mt() {
z.value.dataLabels.show = !z.value.dataLabels.show;
}
function pt() {
z.value.showTooltip = !z.value.showTooltip;
}
function ia() {
return w.value;
}
const xt = x(() => {
if (w.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
const a = w.value.map(({ name: t, color: s }) => ({
label: t,
color: s
})), l = [];
return $.value.forEach((t) => {
const s = [e.value.style.chart.grid.x.timeLabels.values[t.absoluteIndex] ? t.text : i + 1];
D.value.forEach((c) => {
s.push(Number((c.series[t.absoluteIndex] || 0).toFixed(e.value.table.td.roundingValue)));
}), l.push(s);
}), { head: a, body: l };
});
function kt(a = null) {
const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], t = ["", ...xt.value.head.map((C) => C.label)], s = xt.value.body, c = l.concat([t]).concat(s), u = Oa(c);
a ? a(u) : Pa({ csvContent: u, title: e.value.style.chart.title.text || "vue-ui-stackbar" });
}
const be = x(() => {
const a = [""].concat(w.value.map((c) => c.name)).concat(' <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>');
let l = [];
for (let c = 0; c < F.value; c += 1) {
const u = w.value.map((C) => C.series[c] ?? 0).reduce((C, J) => C + J, 0);
l.push([e.value.style.chart.grid.x.timeLabels.values.slice(h.value.start, h.value.end)[c] ? $.value[c].text : c + 1].concat(w.value.map((C) => (C.series[c] ?? 0).toFixed(e.value.table.td.roundingValue))).concat((u ?? 0).toFixed(e.value.table.td.roundingValue)));
}
const t = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
}, s = [e.value.table.columnNames.period].concat(w.value.map((c) => c.name)).concat(e.value.table.columnNames.total);
return { head: a, body: l.slice(0, h.value.end - h.value.start), config: t, colNames: s };
});
function na(a, l) {
if (Ce("selectLegend", w.value.find((t) => t.absoluteIndex === a)), S.value.includes(l.id))
S.value = S.value.filter((t) => t !== l.id);
else {
if (S.value.length === D.value.length - 1) return;
S.value.push(l.id);
}
}
const wt = x(() => D.value.map((a, l) => ({
...a,
shape: "square"
})).map((a) => ({
...a,
opacity: S.value.includes(a.id) ? 0.5 : 1,
segregate: () => na(a.absoluteIndex, a),
isSegregated: S.value.includes(a.id)
}))), ua = x(() => ({
cy: "stackbar-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
})), fe = g(!1);
function Ee() {
fe.value = !fe.value;
}
function me(a, l) {
const t = JSON.parse(JSON.stringify(w.value)).map((s) => ({
name: s.name,
value: s.series[l] === 0 ? 0 : (s.signedSeries[l] === -1 && s.series[l] >= 0 ? -s.series[l] : s.series[l]) || null,
proportion: s.proportions[l] || null,
color: s.color,
id: s.id
}));
Ce("selectTimeLabel", {
datapoint: t,
absoluteIndex: a.absoluteIndex,
label: a.text
});
}
const ca = x(() => Math.max(...w.value.flatMap((a) => a.series)));
function Lt(a, l) {
return e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? at.value ? l * 100 >= e.value.style.chart.bars.dataLabels.hideUnderPercentage : e.value.style.chart.bars.dataLabels.hideEmptyPercentages ? l > 0 : !0 : at.value ? (tt.value && Oe.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."), a > ca.value * e.value.style.chart.bars.dataLabels.hideUnderPercentage / 100) : tt.value ? Math.abs(a) >= e.value.style.chart.bars.dataLabels.hideUnderValue : e.value.style.chart.bars.dataLabels.hideEmptyValues ? a !== 0 : !0;
}
async function ha({ scale: a = 2 } = {}) {
if (!V.value) return;
const { width: l, height: t } = V.value.getBoundingClientRect(), s = l / t, { imageUri: c, base64: u } = await Xa({ domElement: V.value, base64: !0, img: !0, scale: a });
return {
imageUri: c,
base64: u,
title: e.value.style.chart.title.text,
width: l,
height: t,
aspectRatio: s
};
}
return Ft({
getData: ia,
getImage: ha,
generatePdf: rt,
generateCsv: kt,
generateImage: ot,
toggleTable: ft,
toggleLabels: mt,
toggleTooltip: pt,
toggleAnnotator: Ee,
toggleFullscreen: bt
}), (a, l) => (r(), o("div", {
id: `stackbar_${T.value}`,
ref_key: "stackbarChart",
ref: V,
class: le({ "vue-ui-stackbar": !0, "vue-data-ui-wrapper-fullscreen": ne.value }),
style: Q(`background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: l[4] || (l[4] = () => v(Qe)(!0)),
onMouseleave: l[5] || (l[5] = () => v(Qe)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), H(v(Yt), {
key: 0,
svgRef: v(et),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: fe.value,
onClose: Ee
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : d("", !0),
L(a.$slots, "userConfig", {}, void 0, !0),
e.value.style.chart.title.text ? (r(), o("div", {
key: 1,
ref_key: "chartTitle",
ref: Be,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(r(), H(Ga, {
key: `title_${Je.value}`,
config: {
title: {
cy: "stackbar-title",
...e.value.style.chart.title
},
subtitle: {
cy: "stackbar-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : d("", !0),
U("div", {
id: `legend-top-${T.value}`
}, null, 8, ja),
e.value.userOptions.show && Se.value && (v(je) || v(Ie)) ? (r(), H(v(Xt), {
ref: "details",
key: `user_option_${Ue.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: v(lt),
isImaging: v(st),
uid: T.value,
hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasLabel: e.value.userOptions.buttons.labels,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: ne.value,
chartElement: V.value,
position: e.value.userOptions.position,
isTooltip: z.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: fe.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: bt,
onGeneratePdf: v(rt),
onGenerateCsv: kt,
onGenerateImage: v(ot),
onToggleTable: ft,
onToggleLabels: mt,
onToggleTooltip: pt,
onToggleAnnotator: Ee,
style: Q({
visibility: v(je) ? v(Ie) ? "visible" : "hidden" : "visible"
})
}, At({ _: 2 }, [
a.$slots.menuIcon ? {
name: "menuIcon",
fn: _(({ isOpen: t, color: s }) => [
L(a.$slots, "menuIcon", B(W({ isOpen: t, color: s })), void 0, !0)
]),
key: "0"
} : void 0,
a.$slots.optionTooltip ? {
name: "optionTooltip",
fn: _(() => [
L(a.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
a.$slots.optionPdf ? {
name: "optionPdf",
fn: _(() => [
L(a.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
a.$slots.optionCsv ? {
name: "optionCsv",
fn: _(() => [
L(a.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
a.$slots.optionImg ? {
name: "optionImg",
fn: _(() => [
L(a.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
a.$slots.optionTable ? {
name: "optionTable",
fn: _(() => [
L(a.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
a.$slots.optionLabels ? {
name: "optionLabels",
fn: _(() => [
L(a.$slots, "optionLabels", {}, void 0, !0)
]),
key: "6"
} : void 0,
a.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: _(({ toggleFullscreen: t, isFullscreen: s }) => [
L(a.$slots, "optionFullscreen", B(W({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
]),
key: "7"
} : void 0,
a.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: _(({ toggleAnnotator: t, isAnnotator: s }) => [
L(a.$slots, "optionAnnotator", B(W({ toggleAnnotator: t, isAnnotator: s })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : d("", !0),
(r(), o("svg", {
ref_key: "svgRef",
ref: et,
xmlns: v(Aa),
viewBox: `0 0 ${n.value.chartWidth <= 0 ? 10 : n.value.chartWidth} ${n.value.chartHeight <= 0 ? 10 : n.value.chartHeight}`,
class: le({ "vue-data-ui-loading": v(re) }),
style: Q(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
xe(v(Gt)),
a.$slots["chart-background"] ? (r(), o("foreignObject", {
key: 0,
x: n.value.left,
y: n.value.top,
width: n.value.width <= 0 ? 10 : n.value.width,
height: n.value.height <= 0 ? 10 : n.value.height,
style: {
pointerEvents: "none"
}
}, [
L(a.$slots, "chart-background", {}, void 0, !0)
], 8, tl)) : d("", !0),
e.value.style.chart.bars.gradient.show ? (r(), o("defs", al, [
(r(!0), o(b, null, m(w.value, (t, s) => (r(), o("linearGradient", {
id: `gradient_${t.id}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
U("stop", {
offset: "0%",
"stop-color": t.color
}, null, 8, sl),
U("stop", {
offset: "61.8%",
"stop-color": v(Na)(t.color, e.value.style.chart.bars.gradient.intensity / 100)
}, null, 8, rl),
U("stop", {
offset: "100%",
"stop-color": t.color
}, null, 8, ol)
], 8, ll))), 256))
])) : d("", !0),
e.value.style.chart.grid.x.showHorizontalLines && e.value.orientation === "vertical" ? (r(!0), o(b, { key: 2 }, m(R.value, (t, s) => (r(), o("line", {
x1: n.value.left,
x2: n.value.right,
y1: t.y,
y2: t.y,
stroke: e.value.style.chart.grid.x.linesColor,
"stroke-width": e.value.style.chart.grid.x.linesThickness,
"stroke-dasharray": e.value.style.chart.grid.x.linesStrokeDasharray,
"stroke-linecap": "round"
}, null, 8, il))), 256)) : d("", !0),
e.value.style.chart.grid.x.showHorizontalLines && e.value.orientation === "horizontal" ? (r(!0), o(b, { key: 3 }, m(h.value.end - h.value.start + 1, (t, s) => (r(), o("line", {
x1: n.value.left,
x2: n.value.right,
y1: n.value.top + y.value * s,
y2: n.value.top + y.value * s,
stroke: e.value.style.chart.grid.x.linesColor,
"stroke-width": e.value.style.chart.grid.x.linesThickness,
"stroke-dasharray": e.value.style.chart.grid.x.linesStrokeDasharray,
"stroke-linecap": "round"
}, null, 8, nl))), 256)) : d("", !0),
e.value.style.chart.grid.y.showVerticalLines && e.value.orientation === "vertical" ? (r(!0), o(b, { key: 4 }, m(h.value.end - h.value.start + 1, (t, s) => (r(), o("line", {
x1: n.value.left + y.value * s,
x2: n.value.left + y.value * s,
y1: n.value.top,
y2: n.value.bottom,
stroke: e.value.style.chart.grid.y.linesColor,
"stroke-width": e.value.style.chart.grid.y.linesThickness,
"stroke-dasharray": e.value.style.chart.grid.y.linesStrokeDasharray,
"stroke-linecap": "round"
}, null, 8, ul))), 256)) : d("", !0),
e.value.style.chart.grid.y.showVerticalLines && e.value.orientation === "horizontal" ? (r(!0), o(b, { key: 5 }, m(R.value, (t, s) => (r(), o("line", {
x1: t.horizontal_x,
x2: t.horizontal_x,
y1: n.value.top,
y2: n.value.bottom,
stroke: e.value.style.chart.grid.y.linesColor,
"stroke-width": e.value.style.chart.grid.y.linesThickness,
"stroke-dasharray": e.value.style.chart.grid.y.linesStrokeDasharray,
"stroke-linecap": "round"
}, null, 8, cl))), 256)) : d("", !0),
(r(!0), o(b, null, m(w.value, (t, s) => (r(), o("g", null, [
a.$slots.pattern ? (r(), o("defs", hl, [
L(a.$slots, "pattern", Fe({ ref_for: !0 }, { seriesIndex: t.absoluteIndex, patternId: `pattern_${T.value}_${t.absoluteIndex}` }), void 0, !0)
])) : d("", !0),
e.value.orientation === "vertical" ? (r(), o(b, { key: 1 }, [
(r(!0), o(b, null, m(t.x, (c, u) => (r(), o("rect", {
x: c,
y: t.y[u] < 0 ? 0 : t.y[u],
height: t.height[u] < 0 ? 1e-4 : t.height[u] || 0,
rx: e.value.style.chart.bars.borderRadius > t.height[u] / 2 ? (t.height[u] < 0 ? 0 : t.height[u]) / 2 : e.value.style.chart.bars.borderRadius,
width: y.value * (1 - e.value.style.chart.bars.gapRatio / 2),
fill: e.value.style.chart.bars.gradient.show ? `url(#gradient_${t.id})` : t.color,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.bars.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: le({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": Y.value })
}, null, 10, vl))), 256)),
a.$slots.pattern ? (r(), o("g", dl, [
(r(!0), o(b, null, m(t.x, (c, u) => (r(), o("rect", {
x: c,
y: t.y[u] < 0 ? 0 : t.y[u],
height: t.height[u] < 0 ? 1e-4 : t.height[u] || 0,
rx: e.value.style.chart.bars.borderRadius > t.height[u] / 2 ? (t.height[u] < 0 ? 0 : t.height[u]) / 2 : e.value.style.chart.bars.borderRadius,
width: y.value * (1 - e.value.style.chart.bars.gapRatio / 2),
fill: `url(#pattern_${T.value}_${t.absoluteIndex})`,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.bars.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: le({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": Y.value })
}, null, 10, yl))), 256))
])) : d("", !0)
], 64)) : (r(), o(b, { key: 2 }, [
(r(!0), o(b, null, m(t.horizontal_x, (c, u) => (r(), o("rect", {
x: v(Le)(c, n.value.left),
y: t.horizontal_y[u] < 0 ? 0 : t.horizontal_y[u],
width: v(Le)(t.horizontal_width[u] < 0 ? 1e-4 : t.horizontal_width[u]),
rx: e.value.style.chart.bars.borderRadius > t.height[u] / 2 ? (t.height[u] < 0 ? 0 : t.height[u]) / 2 : e.value.style.chart.bars.borderRadius,
height: y.value * (1 - e.value.style.chart.bars.gapRatio / 2),
fill: e.value.style.chart.bars.gradient.show ? `url(#gradient_${t.id})` : t.color,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.bars.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: le({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": Y.value })
}, null, 10, gl))), 256)),
a.$slots.pattern ? (r(), o("g", bl, [
(r(!0), o(b, null, m(t.horizontal_x, (c, u) => (r(), o("rect", {
x: v(Le)(c, n.value.left),
y: t.horizontal_y[u] < 0 ? 0 : t.horizontal_y[u],
width: v(Le)(t.horizontal_width[u] < 0 ? 1e-4 : t.horizontal_width[u]),
rx: e.value.style.chart.bars.borderRadius > t.height[u] / 2 ? (t.height[u] < 0 ? 0 : t.height[u]) / 2 : e.value.style.chart.bars.borderRadius,
height: y.value * (1 - e.value.style.chart.bars.gapRatio / 2),
fill: `url(#pattern_${T.value}_${t.absoluteIndex})`,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.bars.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: le({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": Y.value })
}, null, 10, fl))), 256))
])) : d("", !0)
], 64))
]))), 256)),
e.value.style.chart.grid.x.showAxis ? (r(), o("line", {
key: 6,
x1: n.value.left,
x2: n.value.right,
y1: n.value.bottom,
y2: n.value.bottom,
stroke: e.value.style.chart.grid.x.axisColor,
"stroke-width": e.value.style.chart.grid.x.axisThickness,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, ml)) : d("", !0),
e.value.style.chart.grid.y.showAxis && !e.value.style.chart.bars.distributed ? (r(), o("line", {
key: 7,
x1: n.value.left,
x2: n.value.left,
y1: n.value.top,
y2: n.value.bottom,
stroke: e.value.style.chart.grid.y.axisColor,
"stroke-width": e.value.style.chart.grid.y.axisThickness,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, pl)) : d("", !0),
e.value.style.chart.grid.x.axisName.show && e.value.style.chart.grid.x.axisName.text ? (r(), o("text", {
key: 8,
ref_key: "xAxisLabel",
ref: Ae,
x: n.value.left + n.value.width / 2,
y: n.value.chartHeight - 3,
"font-size": e.value.style.chart.grid.x.axisName.fontSize,
fill: e.value.style.chart.grid.x.axisName.color,
"font-weight": e.value.style.chart.grid.x.axisName.bold ? "bold" : "normal",
"text-anchor": "middle"
}, A(e.value.style.chart.grid.x.axisName.text), 9, xl)) : d("", !0),
e.value.style.chart.grid.y.axisName.show && e.value.style.chart.grid.y.axisName.text ? (r(), o("text", {
key: 9,
ref_key: "yAxisLabel",
ref: Ne,
transform: `translate(${e.value.style.chart.grid.y.axisName.fontSize}, ${n.value.top + n.value.height / 2}) rotate(-90)`,
"font-size": e.value.style.chart.grid.y.axisName.fontSize,
fill: e.value.style.chart.grid.y.axisName.color,
"font-weight": e.value.style.chart.grid.y.axisName.bold ? "bold" : "normal",
"text-anchor": "middle"
}, A(e.value.style.chart.grid.y.axisName.text), 9, kl)) : d("", !0),
z.value.dataLabels.show && e.value.orientation === "vertical" ? (r(), o(b, { key: 10 }, [
(r(!0), o(b, null, m(w.value, (t, s) => (r(), o("g", null, [
(r(!0), o(b, null, m(t.x, (c, u) => (r(), o(b, null, [
Lt(t.series[u], t.proportions[u]) ? (r(), o("text", {
key: 0,
x: c + y.value * (1 - e.value.style.chart.bars.gapRatio / 2) / 2,
y: t.y[u] + t.height[u] / 2 + e.value.style.chart.bars.dataLabels.fontSize / 3,
"font-size": e.value.style.chart.bars.dataLabels.fontSize,
fill: e.value.style.chart.bars.dataLabels.adaptColorToBackground ? v(Vt)(t.color) : e.value.style.chart.bars.dataLabels.color,
"font-weight": e.value.style.chart.bars.dataLabels.bold ? "bold" : "normal",
"text-anchor": "middle"
}, A(e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? ht(t.proportions[u] * 100, t, s, u) : ge(t.series[u], t, s, u, t.signedSeries[u])), 9, wl)) : d("", !0)
], 64))), 256))
]))), 256)),
e.value.style.chart.bars.totalValues.show && w.value.length > 1 ? (r(), o("g", {
key: 0,
ref_key: "sumTop",
ref: Qt
}, [
(r(!0), o(b, null, m(ct.value, (t, s) => (r(), o(b, null, [
!e.value.style.chart.bars.dataLabels.hideEmptyValues || t.value !== 0 ? (r(), o("text", {
key: 0,
x: n.value.left + y.value * s + y.value / 2,
y: e.value.style.chart.bars.totalValues.fontSize,
"text-anchor": "middle",
"font-size": e.value.style.chart.bars.totalValues.fontSize,
"font-weight": e.value.style.chart.bars.totalValues.bold ? "bold" : "normal",
fill: e.value.style.chart.bars.totalValues.color
}, A(ge(t.value, t, s, t.sign)), 9, Ll)) : d("", !0)
], 64))), 256))
], 512)) : d("", !0)
], 64)) : d("", !0),
z.value.dataLabels.show && e.value.orientation === "horizontal" ? (r(), o(b, { key: 11 }, [
(r(!0), o(b, null, m(w.value, (t, s) => (r(), o("g", null, [
(r(!0), o(b, null, m(t.horizontal_x, (c, u) => (r(), o(b, null, [
Lt(t.series[u], t.proportions[u]) ? (r(), o("text", {
key: 0,
x: c + (t.horizon