vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,396 lines • 65.2 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, Bt as n, D as r, G as i, Gt as a, Jt as o, Kt as s, Pt as c, S as l, Vt as ee, X as u, b as d, ct as te, ft as ne, i as re, jt as ie, q as ae, t as oe, tt as se, vt as ce, w as le, xt as ue } from "./lib-Bttd6u5E.js";
import { n as de, t as fe } from "./useHints-Dq_w2E8B.js";
import { t as pe } from "./useConfig-D3scuR88.js";
import { t as me } from "./usePrinter-DN5bYhTG.js";
import { n as he, t as ge } from "./BaseScanner-DZvpgOjM.js";
import { t as _e } from "./useSvgExport-DH-FfcqQ.js";
import { t as ve } from "./useNestedProp-vPNvh7rV.js";
import { t as ye } from "./useThemeCheck-C43Tcqmk.js";
import { t as be } from "./useTransitions-g_zBREk2.js";
import { t as xe } from "./img-Bnokohej.js";
import { n as Se } from "./Title-BE3qg9xl.js";
import { t as Ce } from "./Shape-C21CMlWS.js";
import { t as we } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as Te, t as Ee } from "./useResponsive-ZtArZtUf.js";
import { t as De } from "./DefGrad-DVBqDjhO.js";
import { t as Oe } from "./vue-ui-accordion-BxGriZik.js";
import { t as ke } from "./BaseLegendToggle-DZVucLnv.js";
import { t as Ae } from "./A11yDataTable-DdRsVULz.js";
import { t as je } from "./useUserOptionState-DK-_1ddE.js";
import { t as Me } from "./useChartAccessibility-DYqac8yF.js";
import { t as Ne } from "./useTableResponsive-BAqJPR68.js";
import { t as Pe } from "./Legend-CQxUgOd-.js";
import { t as Fe } from "./vue_ui_horizontal_bar-C4J4QzXf.js";
import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createSlots as Ie, createTextVNode as Le, createVNode as Re, defineAsyncComponent as ze, guardReactiveProps as v, mergeProps as Be, nextTick as Ve, normalizeClass as y, normalizeProps as b, normalizeStyle as x, onBeforeUnmount as He, onMounted as Ue, openBlock as S, ref as C, renderList as w, renderSlot as T, resolveDynamicComponent as We, toDisplayString as E, toRefs as Ge, unref as D, useCssVars as Ke, useSlots as qe, watch as Je, withCtx as O, withKeys as Ye } from "vue";
//#region src/components/vue-ui-horizontal-bar.vue
var Xe = /* @__PURE__ */ e({ default: () => Rt }), Ze = ["id"], Qe = ["id"], $e = ["onClick"], et = { style: { position: "relative" } }, tt = [
"xmlns",
"viewBox",
"aria-describedby"
], nt = ["width", "height"], rt = { key: 1 }, it = [
"y",
"width",
"height",
"fill",
"rx"
], at = [
"x",
"y",
"width",
"height",
"fill",
"rx"
], ot = [
"x",
"y",
"width",
"height",
"fill",
"rx",
"stroke",
"stroke-width"
], st = [
"x",
"y",
"width",
"height",
"fill",
"rx",
"stroke",
"stroke-width"
], ct = [
"stroke",
"stroke-width",
"d"
], lt = [
"stroke",
"stroke-width",
"d"
], ut = [
"y",
"height",
"width",
"fill"
], dt = [
"transform",
"font-size",
"fill",
"font-weight",
"innerHTML"
], ft = [
"transform",
"font-size",
"fill",
"font-weight"
], pt = [
"transform",
"font-size",
"font-weight",
"innerHTML"
], mt = [
"transform",
"font-size",
"fill",
"font-weight",
"innerHTML"
], ht = [
"transform",
"text-anchor",
"font-size",
"fill",
"font-weight"
], gt = [
"y",
"width",
"height",
"fill",
"onMouseenter",
"onMouseleave",
"onClick"
], _t = {
key: 0,
style: {
position: "absolute",
top: "100%",
left: "0",
width: "100%"
},
"data-dom-to-png-ignore": "",
"aria-hidden": "true"
}, vt = {
key: 6,
class: "vue-data-ui-watermark"
}, yt = ["onClick"], bt = { style: "width:100%;padding-top: 36px;position:relative" }, xt = { class: "vue-ui-data-table" }, St = { key: 0 }, Ct = { style: { width: "100%" } }, wt = ["data-cell"], Tt = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, Et = ["data-cell"], Dt = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, Ot = ["data-cell"], kt = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, At = ["data-cell"], jt = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, Mt = ["data-cell"], Nt = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, Pt = ["data-cell"], Ft = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, It = ["data-cell"], Lt = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, Rt = /*#__PURE__*/ we({
__name: "vue-ui-horizontal-bar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: [
"selectLegend",
"copyAlt",
"selectDatapoint"
],
setup(e, { expose: we, emit: Xe }) {
Ke((e) => ({ v0d6b4e74: e.tdo }));
let Rt = ze(() => import("./Tooltip-DhjyfHwz.js")), zt = ze(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), Bt = ze(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), Vt = ze(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), Ht = ze(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), Ut = ze(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_vertical_bar: Wt } = pe(), { isThemeValid: Gt, warnInvalidTheme: Kt } = ye(), qt = qe(), k = e, Jt = p({
get() {
return !!k.dataset && k.dataset.length;
},
set(e) {
return e;
}
}), A = C(ae()), Yt = C(!1), Xt = C(""), Zt = C(null), Qt = C(0), j = C(null), $t = C(null), en = C(null), tn = C(null), nn = C(null), rn = C(0), an = C(0), on = C(null), sn = C(null), cn = C(null), ln = C(null), un = C(null), M = C([]), dn = C({
none: 0,
asc: 1,
desc: 2
}), N = C(0), fn = C(!1), pn = C(0), mn = null, hn = null, gn = C(!1), _n = C(!1), P = C(null), vn = C({
x: 0,
y: 0
}), yn = C("pointer"), bn = Xe, F = C(An());
de({
config: () => F.value,
dataset: () => k.dataset,
component: "VueUiHorizontalBar",
rules: [fe.emptyArray, {
test: (e) => e.length > 50 || e.some((e) => e.children && e.children.length > 50),
message: [
"👀 There are > 50 series / bars, which will probably force users to scroll. Consider:",
"",
"▶️ Grouping small values into an \"Other\" category.",
"",
"▶️ Using filters, or several instances of the component with subsets of related series."
]
}]
});
let { transitionEnabled: I } = be({
config: () => F.value.transitions,
dataset: () => k.dataset
}), L = p(() => F.value.userOptions.useCursorPointer), xn = p(() => k.config?.skeletonDataset ?? [
{
name: "",
value: 6,
color: "#d9d9d9"
},
{
name: "",
value: 5,
color: "#d9d9d9"
},
{
name: "",
value: 4,
color: "#d9d9d9"
},
{
name: "",
value: 3,
color: "#d9d9d9"
},
{
name: "",
value: 2,
color: "#d9d9d9"
},
{
name: "",
value: 1,
color: "#d9d9d9"
}
]), Sn = p(() => o({
defaultConfig: {
useCssAnimation: !1,
userOptions: { show: !1 },
table: { show: !1 },
style: { chart: {
backgroundColor: "#99999930",
layout: {
bars: {
offsetX: 110,
dataLabels: {
color: "transparent",
value: {
prefix: "",
suffix: "",
formatter: null
}
},
nameLabels: { color: "transparent" }
},
separators: { color: "#7A7A7A" }
},
legend: {
show: !0,
backgroundColor: "transparent",
color: "transparent",
prefix: "",
suffix: "",
formatter: null
},
title: {
color: "#1A1A1A",
subtitle: { color: "#5A5A5A" }
}
} }
},
userConfig: F.value.skeletonConfig ?? {}
})), { loading: Cn, FINAL_DATASET: wn, manualLoading: Tn } = he({
...Ge(k),
FINAL_CONFIG: F,
prepareConfig: An,
callback: () => {
Promise.resolve().then(async () => {
H.value.showTable = F.value.table.show, Hn();
});
},
skeletonDataset: xn.value,
skeletonConfig: o({
defaultConfig: F.value,
userConfig: Sn.value
})
}), { userOptionsVisible: En, setUserOptionsVisibility: Dn, keepUserOptionState: On } = je({ config: F.value }), { svgRef: kn } = Me({ config: F.value.style.chart.title });
function An() {
let e = ve({
userConfig: k.config,
defaultConfig: Wt
}), t = {}, n = e.theme;
if (n) if (!Gt.value(e)) Kt(e), t = e;
else {
let r = ve({
userConfig: Fe[n] || k.config,
defaultConfig: e
});
t = {
...ve({
userConfig: k.config,
defaultConfig: r
}),
customPalette: e.customPalette.length ? e.customPalette : s[n] || c
};
}
else t = e;
return k.config && ce(k.config, "events.datapointEnter") ? t.events.datapointEnter = k.config.events.datapointEnter : t.events.datapointEnter = null, k.config && ce(k.config, "events.datapointLeave") ? t.events.datapointLeave = k.config.events.datapointLeave : t.events.datapointLeave = null, k.config && ce(k.config, "events.datapointClick") ? t.events.datapointClick = k.config.events.datapointClick : t.events.datapointClick = null, t;
}
let R = C(F.value.style.chart.width), z = C(F.value.style.chart.height), B = C(F.value.style.chart.layout.bars.gap);
Je(() => k.config, (e) => {
Cn.value || (F.value = An()), En.value = !F.value.userOptions.showOnChartHover, rn.value += 1, an.value += 1, H.value.showTable = F.value.table.show, H.value.sortDesc = F.value.style.chart.layout.bars.sort === "desc", H.value.showTooltip = F.value.style.chart.tooltip.show, R.value = F.value.style.chart.width, z.value = F.value.style.chart.height, B.value = F.value.style.chart.layout.bars.gap;
}, { deep: !0 }), Je(() => k.dataset, (e) => {
Array.isArray(e) && e.length > 0 && (Tn.value = !1);
}, { deep: !0 });
let { isPrinting: jn, isImaging: Mn, generatePdf: Nn, generateImage: Pn } = me({
elementId: `vue-ui-vertical-bar_${A.value}`,
fileName: F.value.style.chart.title.text || "vue-ui-vertical-bar",
options: F.value.userOptions.print
}), Fn = p(() => F.value.userOptions.show && !F.value.style.chart.title.text), In = p(() => le(F.value.customPalette)), Ln = C(null), Rn = p(() => F.value.table.responsiveBreakpoint), zn = p(() => !!F.value.debug), Bn = C(0), V = C(null), Vn = C(null);
function Hn() {
if (j.value && (ie(k.dataset) && (se({
componentName: "VueUiVerticalBar",
type: "dataset",
debug: zn.value
}), Jt.value = !1, Tn.value = !0), ie(k.dataset) || (Tn.value = F.value.loading), F.value.responsive)) {
let e = Te(() => {
let { width: e, height: t } = Ee({
chart: j.value,
title: F.value.style.chart.title.text ? $t.value : null,
legend: F.value.style.chart.legend.show ? en.value : null,
source: tn.value,
noTitle: nn.value
});
Bn.value = t / 3, requestAnimationFrame(async () => {
z.value = t, R.value = e;
});
});
V.value && (Vn.value && V.value.unobserve(Vn.value), V.value.disconnect()), V.value = new ResizeObserver(e), Ve(() => {
Vn.value = j.value?.parentNode, Vn.value && V.value.observe(Vn.value);
});
}
}
He(() => {
V.value && (Vn.value && V.value.unobserve(Vn.value), V.value.disconnect());
});
let H = C({
showTable: F.value.table.show,
sortDesc: F.value.style.chart.layout.bars.sort === "desc",
showTooltip: F.value.style.chart.tooltip.show
}), Un = p(() => H.value.sortDesc), U = p(() => (wn.value.forEach((e, t) => {
!e.value && !e.children && se({
componentName: "VueUiVerticalBar",
type: "datasetAttributeEmpty",
property: `value (index ${t})`,
debug: zn.value
}), e.children && (ie(e.children) ? se({
componentName: "VueUiVerticalBar",
type: "datasetAttributeEmpty",
property: `children (index ${t})`,
debug: zn.value
}) : e.children.forEach((e, t) => {
[null, void 0].includes(e.name) && se({
componentName: "VueUiVerticalBar",
type: "datasetSerieAttribute",
property: "name",
key: "children",
index: t,
debug: zn.value
});
}));
}), wn.value.map((e, t) => {
let n = `vertical_parent_${t}_${A.value}`, r = e.children && e.children.length > 0, i = d(e.value ? e.value : r ? e.children.map((e) => e.value || 0).reduce((e, t) => e + t, 0) : 0), a = i >= 0 ? 1 : -1;
return {
...e,
id: n,
absoluteIndex: t,
shape: "square",
opacity: M.value.includes(n) ? .5 : 1,
value: Math.abs(i),
sign: a,
hasChildren: r,
isChild: !1,
segregate: () => rr(n),
isSegregated: M.value.includes(n),
color: l(e.color) || In.value[t] || c[t] || c[t % c.length],
children: !e.children || !e.children.length ? [] : e.children.toSorted(fn.value ? () => 0 : (e, t) => Un.value ? t.value - e.value : e.value - t.value).map((r, o) => ({
...r,
value: d(Math.abs(r.value)),
absoluteIndex: t,
sign: r.value >= 0 ? 1 : -1,
isChild: !0,
parentId: n,
parentName: e.name,
parentValue: i,
parentSign: a,
id: `vertical_child_${t}_${o}_${A.value}`,
childIndex: o,
color: l(r.color) || l(e.color) || In.value[t] || c[t] || c[t % c.length]
})).map((t, n) => ({
...t,
isFirstChild: n === 0,
isLastChild: n === e.children.length - 1
}))
};
}).toSorted(fn.value ? () => 0 : (e, t) => Un.value ? t.value - e.value : e.value - t.value))), W = p(() => U.value.filter((e) => !M.value.includes(e.id))), G = p(() => W.value.flatMap((e) => e.hasChildren ? e.children : e)), Wn = p(() => U.value.flatMap((e) => e.hasChildren ? e.children : e)), Gn = p(() => W.value.flatMap((e) => e.children && e.children.length > 0 ? e.children.length : 1).reduce((e, t) => e + t, 0)), Kn = p(() => ({
cy: "vertical-bar-div-legend",
backgroundColor: F.value.style.chart.legend.backgroundColor,
color: F.value.style.chart.legend.color,
fontSize: F.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: F.value.style.chart.legend.bold ? "bold" : ""
})), K = p(() => F.value.style.chart.layout.bars.parentLabels.show ? F.value.style.chart.layout.bars.parentLabels.fontSize * 3 + F.value.style.chart.layout.bars.parentLabels.paddingBottom : 0), q = p(() => {
let e = [], t = 0;
return G.value.forEach((n, r) => {
n.isChild && n.childIndex === 0 && F.value.style.chart.layout.bars.parentLabels.show && (t += 1), e[r] = t;
}), e;
}), J = p(() => {
let e = Math.max(0, ...q.value) * K.value;
return (z.value - 24 - (Gn.value - 1) * B.value - e) / Gn.value;
}), Y = p(() => ({
width: R.value,
height: z.value,
padding: {
top: 12,
left: 128 + F.value.style.chart.layout.bars.offsetX,
right: 64 + F.value.style.chart.layout.bars.paddingRight,
bottom: 12
}
})), qn = C(0);
function Jn() {
Ve(() => {
if (!un.value) {
qn.value = 0;
return;
}
let e = Array.from(un.value.querySelectorAll("text")).reduce((e, t) => {
let n = t.getBBox?.().width ?? t.getComputedTextLength();
return n > e ? n : e;
}, 0);
qn.value = e + 12;
});
}
Je(() => [
G.value,
R.value,
z.value,
F.value.style.chart.layout.bars.nameLabels,
F.value.style.chart.layout.bars.offsetX
], () => Jn(), { deep: !0 }), Ue(() => {
Jn();
});
function Yn() {
return typeof document > "u" ? null : (mn || (mn = document.createElement("canvas"), hn = mn.getContext("2d")), hn);
}
function Xn(e) {
let t = String(e ?? ""), n = F.value.style.chart.layout.bars, r = n.dataLabels.fontSize, i = n.dataLabels.bold ? 700 : 400, a = F.value.style.fontFamily, o = Yn();
return o ? (o.font = `${i} ${r}px ${a}`, o.measureText(t).width) : t.length * r * .6;
}
function Zn() {
let e = W.value.flatMap((e) => e.children && e.children.length ? e.children.map((e) => Math.abs(e.value)) : Math.abs(e.value));
return e.length ? Math.max(...e) : 0;
}
let Qn = p(() => {
pn.value;
let e = F.value.style.chart.layout.bars, t = qn.value + Math.abs(e.nameLabels.offsetX) + e.offsetX, n = Y.value.width - Y.value.padding.right, r = Math.max(0, n - t - e.offsetX), i = Y.value.width - 40, a = Zn(), o = G.value.map((e, t) => ({
serie: e,
textWidth: Xn(xr(e.value, e, t, e.sign))
}));
if (!o.length || r <= 0) return {
left: 0,
right: 0
};
if (!o.some(({ serie: e }) => e.sign === -1)) {
let n = o.reduce((n, { serie: o, textWidth: s }) => {
let c = a ? Math.abs(o.value) / a : 0;
if (c <= 0 || s <= 0) return n;
let l = (t + r * c + 3 + e.dataLabels.offsetX + s - i) / c;
return Math.max(n, l);
}, 0);
return {
left: 0,
right: Math.ceil(Math.min(r, Math.max(0, n)))
};
}
let s = t + r / 2, c = -Infinity, l = Infinity;
o.forEach(({ serie: t, textWidth: n }) => {
if (t.sign === -1) {
let t = s + 12 + e.dataLabels.offsetX + n;
l = Math.min(l, i - t);
return;
}
let r = s - 12 - e.dataLabels.offsetX - n;
c = Math.max(c, 40 - r);
});
let ee = 0;
ee = c > l ? (c + l) / 2 : Math.min(l, Math.max(c, 0));
let u = ee * 2;
return u >= 0 ? {
left: Math.ceil(Math.min(r, u)),
right: 0
} : {
left: 0,
right: Math.ceil(Math.min(r, -u))
};
}), $n = p(() => Qn.value.right), er = p(() => Qn.value.left);
function tr() {
pn.value += 1;
}
Ue(() => {
typeof document > "u" || !document.fonts || (document.fonts.ready.then(tr), document.fonts.addEventListener?.("loadingdone", tr));
}), He(() => {
typeof document < "u" && document.fonts && document.fonts.removeEventListener?.("loadingdone", tr), mn = null, hn = null;
});
let X = p(() => {
let e = qn.value + Math.abs(F.value.style.chart.layout.bars.nameLabels.offsetX) + er.value + F.value.style.chart.layout.bars.offsetX, t = Y.value.width - Y.value.padding.right, n = Math.max(0, t - e - $n.value - F.value.style.chart.layout.bars.offsetX);
return {
top: Y.value.padding.top,
bottom: Y.value.padding.top + Y.value.height,
left: e,
right: t,
width: n,
fullHeight: Y.value.padding.top + Y.value.padding.bottom + Y.value.height
};
});
function nr() {
M.value.length ? M.value = [] : U.value.forEach((e) => {
M.value.push(e.id);
}), bn("selectLegend", W.value);
}
async function rr(e) {
if (M.value.includes(e)) M.value = M.value.filter((t) => t !== e);
else {
if (M.value.length === U.value.length - 1) return;
M.value.push(e);
}
bn("selectLegend", W.value);
}
function ir(e) {
return U.value.length ? U.value.find((t) => t.name === e) || (F.value.debug && console.warn(`VueUiHorizontalBar - Series name not found "${e}"`), null) : (F.value.debug && console.warn("VueUiHorizontalBar - There are no series to show."), null);
}
function ar(e) {
let t = ir(e);
t !== null && M.value.includes(t.id) && rr(t.id);
}
function or(e) {
let t = ir(e);
t !== null && (M.value.includes(t.id) || rr(t.id));
}
let Z = p(() => W.value.map((e) => Math.abs(e.value)).reduce((e, t) => e + t, 0));
function sr(e, t = !1, n = 0) {
return t ? u({
v: d(Math.abs(e) / Z.value * 100),
s: "%",
r: n
}) : Math.abs(e) / Z.value;
}
let cr = p(() => G.value.map((e) => e.sign).includes(-1)), lr = p(() => Math.max(...W.value.flatMap((e) => e.children && e.children.length ? Math.max(...e.children.map((e) => e.value)) : e.value)));
function Q(e) {
let t = e / lr.value;
return d(X.value.width / (cr.value ? 2 : 1) * t);
}
function ur(e) {
return Q(e) + X.value.left;
}
function dr(e, t) {
let n = W.value.find((t) => t.id === e.parentId);
return {
y: X.value.top + (B.value + J.value) * t + q.value[t] * K.value - K.value + F.value.style.chart.layout.bars.parentLabels.fontSize,
name: n.name,
value: [
void 0,
NaN,
null
].includes(n.value) ? "" : n.sign === 1 ? n.value : -n.value,
percentageToTotal: isNaN(n.value / Z.value) ? "" : sr(n.value, !0, F.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage),
sign: n.sign
};
}
function fr() {
return W.value;
}
function pr(e, t) {
return dr(e, t).name;
}
function mr(e, t) {
let n = dr(e, t);
return xr(n.value, n, t, e.parentSign || e.sign);
}
let hr = C(null), gr = C(null);
function _r({ datapoint: e, seriesIndex: t }) {
bn("selectDatapoint", e), F.value.events.datapointClick && F.value.events.datapointClick({
datapoint: e,
seriesIndex: t
});
}
function vr({ datapoint: e, seriesIndex: t }) {
F.value.events.datapointLeave && F.value.events.datapointLeave({
datapoint: e,
seriesIndex: t
}), Zt.value = null, Yt.value = !1, hr.value = null, P.value === t && (P.value = null);
}
function yr(e, t, n = "pointer") {
yn.value = n, F.value.events.datapointEnter && F.value.events.datapointEnter({
datpoint: e,
seriesIndex: t
}), P.value = t, Zt.value = e, gr.value = {
datapoint: e,
seriesIndex: t,
series: U.value,
config: F.value
}, Yt.value = !0, hr.value = e.id;
let r = "", i = e.isChild ? e.parentName : e.name, a = e.isChild ? e.name : "", o = F.value.style.chart.tooltip.customFormat;
ue(o) && te(() => o({
datapoint: e,
series: U.value,
config: F.value,
seriesIndex: t
})) ? Xt.value = o({
datapoint: e,
series: U.value,
config: F.value,
seriesIndex: t
}) : (r += `<div style="width:100%;text-align:center;border-bottom:1px solid ${F.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;text-align:left;">
<div style="display:flex;align-items:center;gap:4px;"><svg viewBox="0 0 60 60" height="14" width="14"><rect x="0" y="0" height="60" width="60" rx="5" stroke="none" fill="${e.color}"/>${qt.pattern ? `<rect x="0" y="0" height="60" width="60" rx="5" stroke="none" fill="url(#pattern_${A.value}_${e.absoluteIndex})"/>` : ""}</svg> ${i}</div>
${a ? `<div>${a}</div>` : ""}
</div>`, F.value.style.chart.tooltip.showValue && (r += `<div>${F.value.translations.value}: <b>${re(F.value.style.chart.layout.bars.dataLabels.value.formatter, e.sign === 1 ? e.value : -e.value, u({
p: F.value.style.chart.tooltip.prefix,
v: e.sign === 1 ? e.value : -e.value,
s: F.value.style.chart.tooltip.suffix,
r: F.value.style.chart.tooltip.roundingValue
}), {
datapoint: e,
seriesIndex: t
})}</b></div>`), F.value.style.chart.tooltip.showPercentage && (r += `<div>${F.value.translations.percentageToTotal} : <b>${u({
v: Math.abs(e.value) / Z.value * 100,
s: "%",
r: F.value.style.chart.tooltip.roundingPercentage
})}</b></div>`, e.isChild && (r += `<div>${F.value.translations.percentageToSerie}: <b>${u({
v: Math.abs(e.value) / Math.abs(e.parentValue) * 100,
s: "%",
r: F.value.style.chart.tooltip.roundingPercentage
})}</b></div>`)), Xt.value = `<div style="text-align:left">${r}</div>`);
}
function br({ legend: e, index: t }) {
let n = F.value.style.chart.legend;
return n.showValue ? `${e.name}: ${re(F.value.style.chart.layout.bars.dataLabels.value.formatter, e.value, u({
p: n.prefix,
v: e.value,
s: n.suffix,
r: n.roundingValue
}), {
datapoint: e,
seriesIndex: t
})}` : e.name;
}
function xr(e, t, n, r) {
if (!F.value.style.chart.layout.bars.dataLabels.value.show) return "";
let i = re(F.value.style.chart.layout.bars.dataLabels.value.formatter, d(r === -1 && e >= 0 ? -e : e), u({
p: F.value.style.chart.layout.bars.dataLabels.value.prefix,
v: d(r === -1 && e >= 0 ? -e : e),
s: F.value.style.chart.layout.bars.dataLabels.value.suffix,
r: F.value.style.chart.layout.bars.dataLabels.value.roundingValue
}), {
datapoint: t,
seriesIndex: n
}), a = `(${sr(e, !0, F.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage)})`;
return `${i}${F.value.style.chart.layout.bars.dataLabels.percentage.show ? ` ${a}` : ""}`;
}
let $ = p(() => ({
head: [
F.value.translations.parentName,
F.value.translations.value,
F.value.translations.percentageToTotal,
F.value.translations.childName,
F.value.translations.value,
F.value.translations.percentageToSerie,
F.value.translations.percentageToTotal
],
body: G.value.map((e) => e.isChild ? e.isFirstChild ? {
color: e.color,
parentName: e.parentName,
parentValue: e.parentValue,
percentageToTotal: e.parentValue / Z.value,
childName: e.name,
childValue: e.sign === 1 ? e.value : -e.value,
childPercentageToParent: Math.abs(e.value) / Math.abs(e.parentValue),
childPercentageToTotal: Math.abs(e.value) / Z.value
} : {
color: "",
parentName: "",
parentValue: "",
percentageToTotal: "",
childName: e.name,
childValue: e.sign === 1 ? e.value : -e.value,
childPercentageToParent: Math.abs(e.value) / Math.abs(e.parentValue),
childPercentageToTotal: Math.abs(e.value) / Z.value
} : {
color: e.color,
parentName: e.name,
parentValue: e.sign === 1 ? e.value : -e.value,
percentageToTotal: Math.abs(e.value) / Z.value,
childName: "",
childValue: "",
childPercentageToParent: "",
childPercentageToTotal: ""
})
}));
function Sr(e = null) {
let n = [
[F.value.style.chart.title.text],
[F.value.style.chart.title.subtitle.text],
[""]
], i = $.value.head, a = $.value.body.map((e) => [
e.parentName,
e.parentValue,
e.percentageToTotal,
e.childName,
e.childValue,
e.childPercentageToParent,
e.childPercentageToTotal
]), o = n.concat([i]).concat(a), s = r(o);
e ? e(s) : t({
csvContent: s,
title: F.value.style.chart.title.text || "vue-ui-vertical-bar"
});
}
let Cr = C(!1);
function wr(e) {
Cr.value = e, Qt.value += 1;
}
function Tr() {
H.value.showTable = !H.value.showTable;
}
Ue(() => {
[
"none",
"asc",
"desc"
].includes(F.value.style.chart.layout.bars.sort) || se({
componentName: "VueUiVerticalBar",
type: "attributeWrongValue",
property: "style.chart.layout.bars.sort",
key: F.value.style.chart.layout.bars.sort
}), N.value = dn.value[F.value.style.chart.layout.bars.sort], H.value.sortDesc = N.value === 2, fn.value = N.value === 0;
});
function Er() {
N.value += 1, N.value > 2 && (N.value = 0);
}
function Dr() {
Er(), H.value.sortDesc = N.value === 2, fn.value = N.value === 0;
}
function Or() {
H.value.showTooltip = !H.value.showTooltip;
}
let kr = C(!1);
function Ar() {
kr.value = !kr.value;
}
async function jr({ scale: e = 2 } = {}) {
if (!j.value) return;
let { width: t, height: n } = j.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await xe({
domElement: j.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: F.value.style.chart.title.text,
width: t,
height: n,
aspectRatio: r
};
}
let Mr = p(() => {
let e = F.value.table.useDialog && !F.value.table.show, t = H.value.showTable;
return {
component: e ? Ut : Oe,
title: `${F.value.style.chart.title.text}${F.value.style.chart.title.subtitle.text ? `: ${F.value.style.chart.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: F.value.table.th.backgroundColor,
color: F.value.table.th.color,
headerColor: F.value.table.th.color,
headerBg: F.value.table.th.backgroundColor,
isFullscreen: Cr.value,
fullscreenParent: j.value,
forcedWidth: Math.min(800, window.innerWidth * .8),
isCursorPointer: L.value
} : {
hideDetails: !0,
config: {
open: t,
maxHeight: 1e4,
body: {
backgroundColor: F.value.style.chart.backgroundColor,
color: F.value.style.chart.color
},
head: {
backgroundColor: F.value.style.chart.backgroundColor,
color: F.value.style.chart.color
}
}
}
};
});
Je(() => H.value.showTable, (e) => {
F.value.table.show || (e && F.value.table.useDialog && sn.value ? sn.value.open() : "close" in sn.value && sn.value.close());
});
let { isResponsive: Nr } = Ne(Ln, Rn);
function Pr() {
H.value.showTable = !1, cn.value && cn.value.setTableIconState(!1);
}
let Fr = p(() => U.value.map((e, t) => ({
...e,
shape: "square",
display: `${e.name}: ${re(F.value.style.chart.layout.bars.dataLabels.value.formatter, e.value, u({
p: F.value.style.chart.legend.prefix,
v: e.value,
s: F.value.style.chart.legend.suffix,
r: F.value.style.chart.legend.roundingValue
}), {
datapoint: e,
seriesIndex: t
})}`
}))), Ir = p(() => F.value.style.chart.backgroundColor), Lr = p(() => F.value.style.chart.legend), Rr = p(() => F.value.style.chart.title), zr = p(() => Fr.value.map((e) => ({
...e,
name: e.display
}))), { exportSvg: Br, getSvg: Vr } = _e({
svg: kn,
title: Rr,
legend: Lr,
legendItems: zr,
backgroundColor: Ir
});
async function Hr({ isCb: e }) {
_n.value = !0, await Ve();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await Vr();
await Promise.resolve(F.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(Br());
} finally {
_n.value = !1;
}
}
function Ur(e) {
if (e?.stage === "start") {
gn.value = !0;
return;
}
if (e?.stage === "end") {
gn.value = !1;
return;
}
Pn();
}
function Wr() {
console.warn("[autoSize]: this legacy method can be safely removed as it has no impact.");
}
async function Gr() {
if (bn("copyAlt", {
config: F.value,
dataset: W.value
}), !F.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(F.value.userOptions.callbacks.altCopy({
config: F.value,
dataset: W.value
}));
}
let Kr = C(!1);
function qr() {
P.value = null, Kr.value = !0;
}
function Jr() {
P.value = null, Yt.value = !1, Kr.value = !1;
}
function Yr() {
if (P.value === null) return;
let e = G.value[P.value];
e && vr({
datapoint: e,
seriesIndex: P.value
}), P.value = null, yn.value = "pointer";
}
function Xr(e) {
if (!kn.value || kr.value || document.activeElement !== kn.value) return;
let t = e.key === "ArrowRight" || e.key === "ArrowDown", n = e.key === "ArrowLeft" || e.key === "ArrowUp", r = e.key === "Enter" || e.key === " ", i = e.key === "Escape";
if (!t && !n && !r && !i) return;
let a = G.value.length;
if (!a) return;
if (e.preventDefault(), e.stopPropagation(), i) {
Yr();
return;
}
if (r) {
if (P.value === null) return;
let e = G.value[P.value];
if (!e) return;
_r({
datapoint: e,
seriesIndex: P.value
});
return;
}
let o = P.value, s = Zt.value ? G.value.findIndex((e) => e.id === Zt.value.id) : null;
o !== null && o >= 0 && o < a ? t ? (o += 1, o >= a && (o = 0)) : n && (--o, o < 0 && (o = a - 1)) : s !== null && s >= 0 && s < a ? (o = t ? s + 1 : s - 1, o >= a && (o = 0), o < 0 && (o = a - 1)) : o = t ? 0 : a - 1;
let c = G.value[o];
c && (P.value = o, Zr(c), yr(c, o, "keyboard"));
}
function Zr(e) {
if (!e) return;
let t = X.value.right, n = X.value.top + (B.value + J.value) * e.absoluteIndex + q.value[e.absoluteIndex] * K.value;
if (!Number.isFinite(t) || !Number.isFinite(n)) return;
let r = a(t, n, kn.value);
r && (vn.value = r);
}
let Qr = p(() => ({
head: $.value.head,
body: $.value.body.map((e) => [
e.parentName,
e.parentValue === "" ? "" : u({
v: e.parentValue,
r: F.value.style.chart.layout.bars.dataLabels.value.roundingValue,
p: F.value.style.chart.layout.bars.dataLabels.prefix,
s: F.value.style.chart.layout.bars.dataLabels.suffix
}),
e.percentageToTotal === "" ? "" : u({
v: e.percentageToTotal * 100,
r: F.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage,
s: "%"
}),
e.childName,
e.childValue === "" ? "" : u({
v: e.childValue,
r: F.value.style.chart.layout.bars.dataLabels.value.roundingValue,
p: F.value.style.chart.layout.bars.dataLabels.prefix,
s: F.value.style.chart.layout.bars.dataLabels.suffix
}),
e.childPercentageToParent === "" ? "" : u({
v: e.childPercentageToParent * 100,
r: F.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage,
s: "%"
}),
e.childPercentageToTotal === "" ? "" : u({
v: e.childPercentageToTotal * 100,
r: F.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage,
s: "%"
})
]),
caption: F.value.a11y.translations.tableCaption,
notice: F.value.a11y.translations.tableAvailable
}));
return we({
autoSize: Wr,
getData: fr,
getImage: jr,
generatePdf: Nn,
generateCsv: Sr,
generateImage: Pn,
generateSvg: Hr,
hideSeries: or,
showSeries: ar,
toggleTable: Tr,
toggleSort: Dr,
toggleTooltip: Or,
toggleAnnotator: Ar,
toggleFullscreen: wr,
copyAlt: Gr
}), (e, t) => (S(), g("div", {
class: y(`vue-data-ui-component vue-ui-vertical-bar ${Cr.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${F.value.useCssAnimation ? "" : "vue-ui-dna"} ${F.value.responsive ? "vue-ui-vertical-bar-autosize" : ""}`),
ref_key: "verticalBarChart",
ref: j,
id: `vue-ui-vertical-bar_${A.value}`,
style: x(`font-family:${F.value.style.fontFamily};width:100%; text-align:center;background:${F.value.style.chart.backgroundColor};height:100%`),
onMouseenter: t[3] ||= () => D(Dn)(!0),
onMouseleave: t[4] ||= () => D(Dn)(!1)
}, [
_("p", {
id: `chart-instructions-${A.value}`,
class: "sr-only"
}, E(F.value.a11y.translations.keyboardNavigation), 9, Qe),
Qr.value.body.length ? (S(), m(Ae, {
key: 0,
uid: A.value,
head: Qr.value.head,
body: Qr.value.body,
caption: Qr.value.caption,
notice: Qr.value.notice
}, null, 8, [
"uid",
"head",
"body",
"caption",
"notice"
])) : h("", !0),
F.value.userOptions.buttons.annotator ? (S(), m(D(Bt), {
key: 1,
svgRef: D(kn),
backgroundColor: F.value.style.chart.backgroundColor,
color: F.value.style.chart.color,
active: kr.value,
isCursorPointer: L.value,
onClose: Ar
}, {
"annotator-action-close": O(() => [T(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": O(({ color: t }) => [T(e.$slots, "annotator-action-color", b(v({ color: t })), void 0, !0)]),
"annotator-action-draw": O(({ mode: t }) => [T(e.$slots, "annotator-action-draw", b(v({ mode: t })), void 0, !0)]),
"annotator-action-undo": O(({ disabled: t }) => [T(e.$slots, "annotator-action-undo", b(v({ disabled: t })), void 0, !0)]),
"annotator-action-redo": O(({ disabled: t }) => [T(e.$slots, "annotator-action-redo", b(v({ disabled: t })), void 0, !0)]),
"annotator-action-delete": O(({ disabled: t }) => [T(e.$slots, "annotator-action-delete", b(v({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : h("", !0),
Fn.value ? (S(), g("div", {
key: 2,
ref_key: "noTitle",
ref: nn,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : h("", !0),
F.value.style.chart.title.text ? (S(), g("div", {
key: 3,
ref_key: "chartTitle",
ref: $t,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [(S(), m(Se, {
key: `title_${rn.value}`,
config: {
title: {
cy: "vertical-bar-div-title",
...F.value.style.chart.title
},
subtitle: {
cy: "vertical-bar-div-subtitle",
...F.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : h("", !0),
F.value.userOptions.show && Jt.value && (D(On) || D(En)) ? (S(), m(D(Vt), {
ref_key: "userOptionsRef",
ref: cn,
backgroundColor: F.value.style.chart.backgroundColor,
color: F.value.style.chart.color,
key: `user_options_${Qt.value}`,
isImaging: D(Mn),
isPrinting: D(jn),
uid: A.value,
hasTooltip: F.value.userOptions.buttons.tooltip && F.value.style.chart.tooltip.show,
hasPdf: F.value.userOptions.buttons.pdf,
hasImg: F.value.userOptions.buttons.img,
hasSvg: F.value.userOptions.buttons.svg,
hasXls: F.value.userOptions.buttons.csv,
hasTable: F.value.userOptions.buttons.table,
hasSort: F.value.userOptions.buttons.sort,
hasFullscreen: F.value.userOptions.buttons.fullscreen,
hasAltCopy: F.value.userOptions.buttons.altCopy,
isFullscreen: Cr.value,
isTooltip: H.value.showTooltip,
titles: { ...F.value.userOptions.buttonTitles },
chartElement: j.value,
position: F.value.userOptions.position,
hasAnnotator: F.value.userOptions.buttons.annotator,
isAnnotation: kr.value,
callbacks: F.value.userOptions.callbacks,
printScale: F.value.userOptions.print.scale,
tableDialog: F.value.table.useDialog,
isCursorPointer: L.value,
onToggleFullscreen: wr,
onGeneratePdf: D(Nn),
onGenerateCsv: Sr,
onGenerateImage: Ur,
onGenerateSvg: Hr,
onToggleTable: Tr,
onToggleSort: Dr,
onToggleTooltip: Or,
onToggleAnnotator: Ar,
onCopyAlt: Gr,
style: x({ visibility: D(On) ? D(En) ? "visible" : "hidden" : "visible" })
}, Ie({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: O(({ isOpen: t, color: n }) => [T(e.$slots, "menuIcon", b(v({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: O(() => [T(e.$slots, "optionTooltip", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: O(() => [T(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: O(() => [T(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: O(() => [T(e.$slots, "optionImg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: O(() => [T(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: O(() => [T(e.$slots, "optionTable", {}, void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionLabels ? {
name: "optionLabels",
fn: O(() => [T(e.$slots, "optionLabels", {}, void 0, !0)]),
key: "7"
} : void 0,
e.$slots.optionSort ? {
name: "optionSort",
fn: O(() => [T(e.$slots, "optionSort", {}, void 0, !0)]),
key: "8"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: O(({ toggleFullscreen: t, isFullscreen: n }) => [T(e.$slots, "optionFullscreen", b(v({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "9"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: O(({ toggleAnnotator: t, isAnnotator: n }) => [T(e.$slots, "optionAnnotator", b(v({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "10"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: O(({ altCopy: t }) => [T(e.$slots, "optionAltCopy", b(v({ altCopy: t })), void 0, !0)]),
key: "11"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: O(() => [T(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "12"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: O(() => [T(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "13"
} : void 0
]), 1032, /* @__PURE__ */ "backgroundColor.color.isImaging.isPrinting.uid.hasTooltip.hasPdf.hasImg.hasSvg.hasXls.hasTable.hasSort.hasFullscreen.hasAltCopy.isFullscreen.isTooltip.titles.chartElement.position.hasAnnotator.isAnnotation.callbacks.printScale.tableDialog.isCursorPointer.onGeneratePdf.style".split("."))) : h("", !0),
F.value.style.chart.legend.show && F.value.style.chart.legend.position === "top" ? (S(), g("div", {
key: 5,
ref_key: "chartLegend",
ref: en
}, [(S(), m(Pe, {
key: `legend_top_${an.value}`,
legendSet: U.value,
config: Kn.value,
onClickMarker: t[0] ||= ({ legend: e }) => rr(e.id)
}, Ie({
item: O(({ legend: e, index: t }) => [_("div", {
onClick: (t) => rr(e.id),
style: x(`opacity:${M.value.includes(e.id) ? .5 : 1}`)
}, E(br({
legend: e,
index: t
})), 13, $e)]),
legendToggle: O(() => [U.value.length > 2 && F.value.style.chart.legend.selectAllToggle.show && !D(Cn) ? (S(), m(ke, {
key: 0,
backgroundColor: F.value.style.chart.legend.selectAllToggle.backgroundColor,
color: F.value.style.chart.legend.selectAllToggle.color,
fontSize: F.value.style.chart.legend.fontSize,
checked: M.value.length > 0,
onToggle: nr
}, null, 8, [
"backgroundColor",
"color",
"fontSize",
"checked"
])) : h("", !0)]),
_: 2
}, [e.$slots.pattern ? {
name: "legend-pattern",
fn: O(({ legend: e, index: t }) => [Re(Ce, {
shape: e.shape,
radius: 30,
stroke: "none",
plot: {
x: 30,
y: 30
},
fill: `url(#pattern_${A.value}_${t})`
}, null, 8, ["shape", "fill"])]),
key: "0"
} : void 0]), 1032, ["legendSet", "config"]))], 512)) : h("", !0),
_("div", et, [(S(), g("svg", {
ref_key: "svgRef",
ref: kn,
xmlns: D(oe),
class: y({
"vue-data-ui-fullscreen--on": Cr.value,
"vue-data-ui-fulscreen--off": !Cr.value,
"vue-data-ui-no-transition": !D(I)
}),
viewBox: `0 0 ${R.value} ${z.value}`,
style: x(`max-width:100%;overflow:visible;background:transparent;color:${F.value.style.chart.color}`),
tabindex: "0",
"aria-describedby": `chart-instructions-${A.value}`,
onFocus: qr,
onBlur: Jr,
onKeydown: Xr
}, [_("g", {
ref_key: "G",
ref: on,
class: "vue-data-ui-g"
}, [
Re(D(Ht)),
e.$slots["chart-background"] ? (S(), g("foreignObject", {
key: 0,
x: 0,
y: 0,
width: R.value,
height: z.value,
style: { pointerEvents: "none" }
}, [T(e.$slots, "chart-background", {}, void 0, !0)], 8, nt)) : h("", !0),
_("defs", null, [(S(!0), g(f, null, w(G.value, (e, t) => (S(), m(De, {
t: "linear",
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
id: `vertical_bar_gradient_${A.value}_${t}`,
key: `vertical_bar_gradient_${A.value}_${t}`,
stops: [[
"0%",
e.color,
1
], [
"100%",
D(n)(D(ee)(e.color, .03), 100 - F.value.style.chart.layout.bars.gradientIntensity),
1
]]
}, null, 8, ["id", "stops"]))), 128))]),
e.$slots.pattern ? (S(), g("g", rt, [(S(!0), g(f, null, w(G.value, (t) => (S(), g("defs", null, [T(e.$slots, "pattern", Be({ ref_for: !0 }, {
seriesIndex: t.absoluteIndex,
patternId: `pattern_${A.value}_${t.absoluteIndex}`
}), void 0, !0)]))), 256))])) : h("", !0),
F.value.style.chart.layout.bars.rowColor ? (S(!0), g(f, { key: 2 }, w(G.value, (e, t) => (S(), g("g", { key: `row_${e.id}` }, [_("rect", {
x: 0,
y: X.value.top + (B.value + J.value) * t + q.value[t] * K.value,
width: R.value,
height: J.value <= 0 ? 1e-4 : J.value,
fill: F.value.style.chart.layout.bars.rowColor,
rx: F.value.style.chart.layout.bars.rowRadius,
style: { pointerEvents: "none" },
class: y({ "vue-data-ui-transition": D(I) })
}, null, 10, it)]))), 128)) : h("", !0),
(S(!0), g(f, null, w(G.value, (e, t) => (S(), g("g", { key: `underlayer_${e.id}` }, [_("rect", {
x: D(d)(cr.value ? X.value.left + X.value.width / 2 - (e.sign === 1 ? 0 : Q(e.value) <= 0 ? 1e-4 : Q(e.value)) : X.value.left),
y: X.value.top + (B.value + J.value) * t + q.value[t] * K.value,
width: D(d)(Q(e.value) <= 0 ? 1e-4 : Q(e.value)),
height: J.value <= 0 ? 1e-4 : J.value,
fill: F.value.style.chart.layout.bars.underlayerColor,
rx: F.value.style.chart.layout.bars.borderRadius,
class: y({ "vue-data-ui-transition": D(I) })
}, null, 10, at)]))), 128)),
(S(!0), g(f, null, w(G.value, (t, r) => (S(), g("g", { key: `barloop_${t.id}` }, [
_("rect", {
x: D(d)(cr.value ? X.value.left + X.value.width / 2 - (t.sign === 1 ? 0 : Q(t.value) <= 0 ? 1e-4 : Q(t.value)) : X.value.left),
y: X.value.top + (B.value + J.value) * r + q.value[r] * K.value,
width: D(d)(Q(t.value) <= 0 ? 1e-4 : Q(t.value)),
height: J.value <= 0 ? 1e-4 : J.value,
fill: F.value.style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${A.value}_${r})` : D(n)(t.color, F.value.style.chart.layout.bars.fillOpacity),
rx: F.value.style.chart.layout.bars.borderRadius,
stroke: F.value.style.chart.layout.bars.useStroke ? t.color : "none",
"stroke-width": F.value.style.chart.layout.bars.useStroke ? F.value.style.chart.layout.bars.strokeWidth : 0,
class: y({ "vue-data-ui-transition": D(I) })
}, null, 10, ot),
e.$slots.pattern ? (S(), g("rect", {
key: 0,
x: D(d)(cr.value ? X.value.left + X.value.width / 2 - (t.sign === 1 ? 0 : Q(t.value) <= 0 ? 1e-4 : Q(t.value)) : X.value.left),
y: X.value.top + (B.value + J.value) * r + q.value[r] * K.value,
width: D(d)(Q(t.value) <= 0 ? 1e-4 : Q(t.value)),
height: J.value <= 0 ? 1e-4 : J.value,
fill: `url(#pattern_${A.value}_${t.absoluteIndex})`,
rx: F.value.style.chart.layout.bars.borderRadius,
stroke: F.value.style.chart.layout.bars.useStroke ? t.color : "none",
"stroke-width": F.value.style.chart.layout.bars.useStroke ? F.value.style.chart.layout.bars.strokeWidth : 0,
class: y({ "vue-data-ui-transition": D(I) })
}, null, 10, st)) : h("", !0),
(!t.isChild || t.isLastChild) && F.value.style.chart.layout.separators.show && r !== G.value.length - 1 ? (S(), g("path", {
key: 1,
stroke: F.value.style.chart.layout.separators.color,
"stroke-width": F.value.style.chart.layout.separators.strokeWidth,
"stroke-linecap": "round",
class: y({ "vue-data-ui-transition": D(I) }),
d: `M${R.value}, ${J.value + B.value / 2 + X.value.top + (B.value + J.value) * r + q.value[r] * K.value} ${F.value.style.chart.layout.separators.fullWidth ? 0 : X.value.left}, ${J.value + B.value / 2 + X.value.top + (B.value + J.value) * r + q.value[r] * K.value}`
}, null, 10, ct)) : h("", !0),
cr.value && F.value.style.chart.layout.separators.show ? (S(), g("path", {
key: 2,
stroke: F.value.style.chart.layout.separators.color,
"stroke-width": F.value.style.chart.layout.separators.strokeWidth,
"stroke-linecap": "round",
class: y({ "vue-data-ui-transition": D(I) }),
d: `M${X.value.left + X.value.width / 2}, ${X.value.top} ${X.value.left + X.value.width / 2}, ${X.value.bottom}`
}, null, 10, lt)) : h("", !0)
]))), 128)),
_("g", {
ref_key: "parentLabels",
ref: ln
}, [(S(!0), g(f, null, w(G.value, (e, t) => (S(), g("g", {
key: `pn_${e.id}`,
class: "vue-ui-horizontal-bar-parent-label"
}, [
e.isChild && e.childIndex === 0 && F.value.style.chart.layout.bars.parentLabels.show ? (S(), g("rect", {
key: 0,
class: y(["vue-ui-horizontal-bar-parent-marker", { "vue-data-ui-transition": D(I) }]),
x: 2,
y: dr(e, t).y - F.value.style.chart.layout.bars.parentLabels.fontSize / 1.5,
height: F.value.style.chart.layout.bars.parentLabels.fontSize / 1.5,
width: F.value.style.chart.layout.bars.parentLabels.fontSize / 1.5,
rx: 1,
fill: e.color
}, null, 10, ut)) : h("", !0),
e.isChild && e.childIndex === 0 && F.value.style.chart.layout.bars.parentLabels.show ? (S(), g("text", {
key: 1,
class: y({ "vue-data-ui-transition": D(I) }),
transform: `translate(${F.value.style.chart.layout.bars.parentLabels.offsetX + F.value.style.chart.layout.bars.parentLabels.fontSize}, ${dr(e, t).y})`,
"font-size": F.value.style.chart.layout.bars.parentLabels.fontSize,
fill: F.value.style.chart.layout.bars.parentLabels.color,
"font-weight": F.value.style.chart.layout.bars.parentLabels.bold ? "bold" : "normal",
"text-anchor": "start",
innerHTML: D(i)({
content: `${pr(e, t)}`,
fontSize: F.value.style.chart.layout.bars.parentLabels.fontSize,
fill: F.value.style.chart.layout.bars.parentLabels.color,
x: 0,
y: 0,
translateY: !1
})
}, null, 10, dt)) : h("", !0),
e.isChild && e.childIndex === 0 && F.value.style.chart.layout.bars.parentLabels.show ? (S(), g("text", {
key: 2,
class: y({ "vue-data-ui-transition": D(I) }),
transform: `translate(${F.value.style.chart.layout.bars.parentLabels.offsetX + F.value.style.chart.layout.bars.parentLabels.fontSize}, ${dr(e, t).y + D(ne)(pr(e, t)) * F.value.style.chart.layout.bars.parentLabels.fontSize * 1.1})`,
"font-size": F.value.style.chart.layout.bars.parentLabels.fontSize,
fill: F.value.style.chart.layout.bars.parentLabels.color,
"font-weight": F.value.style.chart.layout.bars.dataLabels.bold ?