vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,454 lines • 68.5 kB
JavaScript
import { useCssVars as Ca, defineAsyncComponent as ae, useSlots as ka, computed as d, ref as i, toRefs as _a, watch as le, onBeforeUnmount as xa, onMounted as Be, createElementBlock as u, openBlock as n, unref as s, normalizeStyle as h, normalizeClass as J, createBlock as Q, createCommentVNode as y, renderSlot as g, createVNode as oe, withCtx as f, normalizeProps as B, guardReactiveProps as N, createSlots as fe, createElementVNode as r, toDisplayString as m, Fragment as O, renderList as E, mergeProps as mt, resolveDynamicComponent as wa, withKeys as $a, createTextVNode as Ct, nextTick as Ne } from "vue";
import { c as La, t as Aa, i as Ta, j as Z, a1 as Oe, k as Sa, g as ue, o as Ee, U as S, m as Ie, a as se, d as G, X as Fa, s as Me, h as za, $ as Ve, aq as Pa, v as Da, r as Ba, y as Na, _ as Oa } from "./lib-2iaAPQ_c.js";
import { t as Ea, u as Ia } from "./useResponsive-DfdjqQps.js";
import { u as Ma, a as Re } from "./useNestedProp-2p4Tjzc8.js";
import { u as Va, B as Ra } from "./BaseScanner-BMpwQAfz.js";
import { u as Ha } from "./usePrinter-ChVMpU2f.js";
import { u as Xa } from "./useSvgExport-ByUukOZt.js";
import { u as Ua } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Ga } from "./useTableResponsive-Cbx-ACcP.js";
import { u as Wa } from "./useUserOptionState-BIvW1Kz7.js";
import { u as ja } from "./useChartAccessibility-9icAAmYg.js";
import kt from "./Legend-D2xmnFPH.js";
import Ya from "./vue-ui-accordion-Dm0mNNKQ.js";
import qa from "./Title-DSOZzIrU.js";
import { _ as _t } from "./Shape-12_eh8zD.js";
import Ka from "./img-CqYIrJ8I.js";
import { _ as Ja } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const xt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { separators: { color: "#4A4A4A" }, bars: { dataLabels: { color: "#CCCCCC" }, nameLabels: { color: "#CCCCCC" }, parentLabels: { color: "#CCCCCC" } }, highlighter: { color: "#CCCCCC" } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, wt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { bars: { borderRadius: 0, useGradient: !1, dataLabels: { color: "#424242" }, nameLabels: { color: "#424242" }, parentLabels: { color: "#424242" } }, highlighter: { color: "#FF8A65" }, separators: { show: !1 } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, $t = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { bars: { borderRadius: 0, useGradient: !1, dataLabels: { color: "#BDBDBD" }, nameLabels: { color: "#BDBDBD" }, parentLabels: { color: "#FFF8E1" } }, highlighter: { color: "#FF8A65" }, separators: { show: !1 } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Lt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { bars: { borderRadius: 0, useGradient: !1, dataLabels: { color: "#AACCAA" }, nameLabels: { color: "#99CC99" }, parentLabels: { color: "#99CC99" } }, highlighter: { color: "#66CC66" }, separators: { show: !1 } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, At = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { bars: { borderRadius: 8, useGradient: !0, dataLabels: { color: "#A0AC94" }, nameLabels: { color: "#8A9892" }, parentLabels: { color: "#8A9892" } }, highlighter: { color: "#8F837A" }, separators: { show: !1 } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Tt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { bars: { borderRadius: 0, useGradient: !0, dataLabels: { color: "#61747E" }, nameLabels: { color: "#8A9892" }, parentLabels: { color: "#8A9892" } }, highlighter: { color: "#50606C" }, separators: { show: !0, color: "#DEE1DE" } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, St = {
default: {},
dark: xt,
celebration: wt,
celebrationNight: $t,
hack: Lt,
zen: At,
concrete: Tt
}, uo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: wt,
celebrationNight: $t,
concrete: Tt,
dark: xt,
default: St,
hack: Lt,
zen: At
}, Symbol.toStringTag, { value: "Module" })), Qa = ["id"], Za = ["onClick"], el = ["xmlns", "viewBox"], tl = ["width", "height"], al = ["id"], ll = ["stop-color"], ol = ["stop-color"], nl = { key: 1 }, rl = ["x", "y", "width", "height", "fill", "rx"], ul = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], sl = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], il = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], cl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], dl = { class: "vue-ui-horizontal-bar-parent-label" }, vl = ["y", "height", "width", "fill"], hl = ["y", "font-size", "fill", "x", "font-weight", "innerHTML"], fl = ["y", "font-size", "fill", "x", "font-weight"], pl = { class: "vue-ui-horizontal-bar-child-label" }, bl = ["x", "y", "font-size", "font-weight", "innerHTML"], gl = { class: "vue-ui-horizontal-bar-child-label" }, yl = ["x", "y", "font-size", "fill", "font-weight", "innerHTML"], ml = { class: "vue-ui-horizontal-bar-child-label" }, Cl = ["x", "y", "text-anchor", "font-size", "fill", "font-weight"], kl = ["y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], _l = {
key: 5,
class: "vue-data-ui-watermark"
}, xl = ["onClick"], wl = { style: "width:100%;padding-top: 36px;position:relative" }, $l = { class: "vue-ui-data-table" }, Ll = { key: 0 }, Al = { style: { width: "100%" } }, Tl = ["data-cell"], Sl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Fl = ["data-cell"], zl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Pl = ["data-cell"], Dl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Bl = ["data-cell"], Nl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ol = ["data-cell"], El = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Il = ["data-cell"], Ml = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Vl = ["data-cell"], Rl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Hl = {
__name: "vue-ui-horizontal-bar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend"],
setup(Ft, { expose: zt, emit: Pt }) {
Ca((t) => ({
v48241b92: t.tdo
}));
const Dt = ae(() => import("./Tooltip-D0pGX8qz.js")), He = ae(() => import("./BaseIcon-CbVDYv89.js")), Bt = ae(
() => import("./PenAndPaper-CvyKWfNl.js")
), Nt = ae(
() => import("./UserOptions-BQO4YFrn.js")
), Ot = ae(
() => import("./PackageVersion-Br3DrrFh.js")
), Et = ae(
() => import("./BaseDraggableDialog-Z5LfhW87.js")
), { vue_ui_vertical_bar: It } = Ma(), { isThemeValid: Mt, warnInvalidTheme: Vt } = Ua(), Rt = ka(), C = Ft, pe = d({
get() {
return !!C.dataset && C.dataset.length;
},
set(t) {
return t;
}
}), F = i(La()), be = i(!1), ge = i(""), Ht = i(null), Xe = i(0), I = i(null), Ue = i(null), ye = i(null), Ge = i(null), We = i(null), je = i(0), me = i(0), Xt = i(null), ne = i(null), Ce = i(null), Ut = i(null), ke = i(null), w = i([]), Gt = i({ none: 0, asc: 1, desc: 2 }), H = i(0), ie = i(!1), re = i(0), ee = i(0), _e = i(null), Wt = Pt, e = i(Le()), jt = d(() => [
{ 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" }
]), { loading: Ye, FINAL_DATASET: qe, manualLoading: xe } = Va({
..._a(C),
FINAL_CONFIG: e,
prepareConfig: Le,
callback: () => {
Promise.resolve().then(async () => {
x.value.showTable = e.value.table.show, Jt();
});
},
skeletonDataset: jt.value,
skeletonConfig: Aa({
defaultConfig: e.value,
userConfig: {
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" } }
}
}
}
})
}), { userOptionsVisible: we, setUserOptionsVisibility: Ke, keepUserOptionState: Je } = Wa({ config: e.value }), { svgRef: $e } = ja({
config: e.value.style.chart.title
});
function Le() {
const t = Re({
userConfig: C.config,
defaultConfig: It
});
let l = {};
const a = t.theme;
if (a)
if (!Mt.value(t))
Vt(t), l = t;
else {
const o = Re({
userConfig: St[a] || C.config,
defaultConfig: t
});
l = {
...Re({ userConfig: C.config, defaultConfig: o }),
customPalette: t.customPalette.length ? t.customPalette : Ta[a] || Z
};
}
else
l = t;
return C.config && Oe(C.config, "events.datapointEnter") ? l.events.datapointEnter = C.config.events.datapointEnter : l.events.datapointEnter = null, C.config && Oe(C.config, "events.datapointLeave") ? l.events.datapointLeave = C.config.events.datapointLeave : l.events.datapointLeave = null, C.config && Oe(C.config, "events.datapointClick") ? l.events.datapointClick = C.config.events.datapointClick : l.events.datapointClick = null, l;
}
const M = i(e.value.style.chart.width), X = i(e.value.style.chart.height), k = i(e.value.style.chart.layout.bars.gap);
le(
() => C.config,
(t) => {
Ye.value || (e.value = Le()), we.value = !e.value.userOptions.showOnChartHover, je.value += 1, me.value += 1, x.value.showTable = e.value.table.show, x.value.sortDesc = e.value.style.chart.layout.bars.sort === "desc", x.value.showTooltip = e.value.style.chart.tooltip.show, M.value = e.value.style.chart.width, X.value = e.value.style.chart.height, k.value = e.value.style.chart.layout.bars.gap;
},
{ deep: !0 }
), le(
() => C.dataset,
(t) => {
Array.isArray(t) && t.length > 0 && (xe.value = !1);
},
{ deep: !0 }
);
const { isPrinting: Qe, isImaging: Ze, generatePdf: et, generateImage: tt } = Ha({
elementId: `vue-ui-vertical-bar_${F.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-vertical-bar",
options: e.value.userOptions.print
}), Yt = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), at = d(() => Sa(e.value.customPalette)), lt = i(null), qt = d(() => e.value.table.responsiveBreakpoint), ce = d(() => !!e.value.debug), Kt = i(0), U = i(null), W = i(null);
function Jt() {
if (I.value && (Ee(C.dataset) && (ue({
componentName: "VueUiVerticalBar",
type: "dataset",
debug: ce.value
}), pe.value = !1, xe.value = !0), Ee(C.dataset) || (xe.value = e.value.loading), e.value.responsive)) {
const t = Ea(() => {
const { width: l, height: a } = Ia({
chart: I.value,
title: e.value.style.chart.title.text ? Ue.value : null,
legend: e.value.style.chart.legend.show ? ye.value : null,
source: Ge.value,
noTitle: We.value
});
Kt.value = a / 3, requestAnimationFrame(async () => {
X.value = a, M.value = l;
});
});
U.value && (W.value && U.value.unobserve(W.value), U.value.disconnect()), U.value = new ResizeObserver(t), Ne(() => {
W.value = I.value?.parentNode, W.value && U.value.observe(W.value);
});
}
}
xa(() => {
U.value && (W.value && U.value.unobserve(W.value), U.value.disconnect());
});
const x = i({
showTable: e.value.table.show,
sortDesc: e.value.style.chart.layout.bars.sort === "desc",
showTooltip: e.value.style.chart.tooltip.show
}), ot = d(() => x.value.sortDesc), z = d(() => (qe.value.forEach((t, l) => {
!t.value && !t.children && ue({
componentName: "VueUiVerticalBar",
type: "datasetAttributeEmpty",
property: `value (index ${l})`,
debug: ce.value
}), t.children && (Ee(t.children) ? ue({
componentName: "VueUiVerticalBar",
type: "datasetAttributeEmpty",
property: `children (index ${l})`,
debug: ce.value
}) : t.children.forEach((a, o) => {
[null, void 0].includes(a.name) && ue({
componentName: "VueUiVerticalBar",
type: "datasetSerieAttribute",
property: "name",
key: "children",
index: o,
debug: ce.value
});
}));
}), qe.value.map((t, l) => {
const a = `vertical_parent_${l}_${F.value}`, o = t.children && t.children.length > 0, p = S(
t.value ? t.value : o ? t.children.map((b) => b.value || 0).reduce((b, P) => b + P, 0) : 0
), _ = p >= 0 ? 1 : -1;
return {
...t,
id: a,
absoluteIndex: l,
shape: "square",
opacity: w.value.includes(a) ? 0.5 : 1,
value: Math.abs(p),
sign: _,
hasChildren: o,
isChild: !1,
segregate: () => Y(a),
isSegregated: w.value.includes(a),
color: Ie(t.color) || at.value[l] || Z[l] || Z[l % Z.length],
children: !t.children || !t.children.length ? [] : t.children.toSorted(
ie.value ? () => 0 : (b, P) => ot.value ? P.value - b.value : b.value - P.value
).map((b, P) => ({
...b,
value: S(Math.abs(b.value)),
absoluteIndex: l,
sign: b.value >= 0 ? 1 : -1,
isChild: !0,
parentId: a,
parentName: t.name,
parentValue: p,
parentSign: _,
id: `vertical_child_${l}_${P}_${F.value}`,
childIndex: P,
color: Ie(b.color) || Ie(t.color) || at.value[l] || Z[l] || Z[l % Z.length]
})).map((b, P) => ({
...b,
isFirstChild: P === 0,
isLastChild: P === t.children.length - 1
}))
};
}).toSorted(
ie.value ? () => 0 : (t, l) => ot.value ? l.value - t.value : t.value - l.value
))), j = d(() => z.value.filter(
(t) => !w.value.includes(t.id)
)), $ = d(() => j.value.flatMap((t) => t.hasChildren ? t.children : t)), Qt = d(() => z.value.flatMap((t) => t.hasChildren ? t.children : t)), nt = d(() => j.value.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0)), rt = d(() => ({
cy: "vertical-bar-div-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" : ""
})), L = d(() => e.value.style.chart.layout.bars.parentLabels.show ? e.value.style.chart.layout.bars.parentLabels.fontSize * 3 + e.value.style.chart.layout.bars.parentLabels.paddingBottom : 0), A = d(() => {
const t = [];
let l = 0;
return $.value.forEach((a, o) => {
a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show && (l += 1), t[o] = l;
}), t;
}), v = d(() => {
const l = Math.max(0, ...A.value) * L.value;
return (X.value - 24 - (nt.value - 1) * k.value - l) / nt.value;
}), R = d(() => ({
width: M.value,
height: X.value,
padding: {
top: 12,
left: 128 + e.value.style.chart.layout.bars.offsetX,
right: 64 + e.value.style.chart.layout.bars.paddingRight,
bottom: 12
}
})), Ae = i(0);
function ut() {
Ne(() => {
if (!ke.value) {
Ae.value = 0;
return;
}
const l = Array.from(ke.value.querySelectorAll("text")).reduce((a, o) => {
const p = o.getBBox?.().width ?? o.getComputedTextLength();
return p > a ? p : a;
}, 0);
Ae.value = l + 12;
});
}
le(
() => [
$.value,
M.value,
X.value,
e.value.style.chart.layout.bars.nameLabels,
e.value.style.chart.layout.bars.offsetX
],
() => ut(),
{ deep: !0 }
), Be(() => {
ut();
});
function de() {
Ne(() => {
re.value = 0, ee.value = 0, requestAnimationFrame(() => {
if (!_e.value) {
re.value = 0, ee.value = 0;
return;
}
const t = Array.from(
_e.value.querySelectorAll("text")
);
if (!t.length) {
re.value = 0, ee.value = 0;
return;
}
let l = 1 / 0, a = 0;
t.forEach((ma) => {
const De = ma.getBBox(), gt = De.x, yt = De.x + De.width;
gt < l && (l = gt), yt > a && (a = yt);
});
const o = 0, p = M.value, _ = 24, b = Math.max(0, o - l + _), P = Math.max(0, a - p + _);
ee.value = b, re.value = P;
});
});
}
le(w, () => de(), { deep: !0 }), le(
() => [$.value, M.value, X.value],
() => de(),
{ deep: !0 }
), Be(() => de());
const c = d(() => {
const t = Ae.value + Math.abs(e.value.style.chart.layout.bars.nameLabels.offsetX) + ee.value + e.value.style.chart.layout.bars.offsetX, l = R.value.width - R.value.padding.right, a = Math.max(0, l - t - re.value - ee.value - e.value.style.chart.layout.bars.offsetX);
return {
top: R.value.padding.top,
bottom: R.value.padding.top + R.value.height,
left: t,
right: l,
width: a,
fullHeight: R.value.padding.top + R.value.padding.bottom + R.value.height
};
});
async function Y(t) {
if (w.value.includes(t))
w.value = w.value.filter((l) => l !== t);
else {
if (w.value.length === z.value.length - 1) return;
w.value.push(t);
}
Wt("selectLegend", j.value), de();
}
function st(t) {
if (!z.value.length)
return e.value.debug && console.warn("VueUiHorizontalBar - There are no series to show."), null;
const l = z.value.find((a) => a.name === t);
return l || (e.value.debug && console.warn(`VueUiHorizontalBar - Series name not found "${t}"`), null);
}
function Zt(t) {
const l = st(t);
l !== null && w.value.includes(l.id) && Y(l.id);
}
function ea(t) {
const l = st(t);
l !== null && (w.value.includes(l.id) || Y(l.id));
}
const V = d(() => j.value.map((t) => Math.abs(t.value)).reduce((t, l) => t + l, 0));
function it(t, l = !1, a = 0) {
return l ? G({
v: S(Math.abs(t) / V.value * 100),
s: "%",
r: a
}) : Math.abs(t) / V.value;
}
const q = d(() => $.value.map((t) => t.sign).includes(-1)), ta = d(() => Math.max(
...j.value.flatMap((t) => t.children && t.children.length ? Math.max(...t.children.map((l) => l.value)) : t.value)
));
function T(t) {
const l = t / ta.value;
return c.value.width / (q.value ? 2 : 1) * l;
}
function aa(t) {
return T(t) + c.value.left;
}
function te(t, l) {
const a = j.value.find((b) => b.id === t.parentId);
return {
y: c.value.top + (k.value + v.value) * l + A.value[l] * L.value - L.value + e.value.style.chart.layout.bars.parentLabels.fontSize,
name: a.name,
value: [void 0, NaN, null].includes(a.value) ? "" : a.sign === 1 ? a.value : -a.value,
percentageToTotal: isNaN(a.value / V.value) ? "" : it(
a.value,
!0,
e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage
),
sign: a.sign
};
}
function la() {
return j.value;
}
function ct(t, l) {
return te(t, l).name;
}
function oa(t, l) {
const a = te(t, l);
return dt(a.value, a, l, t.parentSign || t.sign);
}
const Te = i(null), Se = i(null);
function na({ datapoint: t, seriesIndex: l }) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: l });
}
function ra({ datapoint: t, seriesIndex: l }) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: l }), Ht.value = null, be.value = !1, Te.value = null;
}
function ua(t, l) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datpoint: t, seriesIndex: l }), Se.value = {
datapoint: t,
seriesIndex: l,
series: z.value,
config: e.value
}, be.value = !0, Te.value = t.id;
let a = "";
const o = t.isChild ? t.parentName : t.name, p = t.isChild ? t.name : "", _ = e.value.style.chart.tooltip.customFormat;
Na(_) && Oa(
() => _({
datapoint: t,
series: z.value,
config: e.value,
seriesIndex: l
})
) ? ge.value = _({
datapoint: t,
series: z.value,
config: e.value,
seriesIndex: l
}) : (a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.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="${t.color}"/>${Rt.pattern ? `<rect x="0" y="0" height="60" width="60" rx="5" stroke="none" fill="url(#pattern_${F.value}_${t.absoluteIndex})"/>` : ""}</svg> ${o}</div>
${p ? `<div>${p}</div>` : ""}
</div>`, e.value.style.chart.tooltip.showValue && (a += `<div>${e.value.translations.value}: <b>${se(
e.value.style.chart.layout.bars.dataLabels.value.formatter,
t.sign === 1 ? t.value : -t.value,
G({
p: e.value.style.chart.tooltip.prefix,
v: t.sign === 1 ? t.value : -t.value,
s: e.value.style.chart.tooltip.suffix,
r: e.value.style.chart.tooltip.roundingValue
}),
{ datapoint: t, seriesIndex: l }
)}</b></div>`), e.value.style.chart.tooltip.showPercentage && (a += `<div>${e.value.translations.percentageToTotal} : <b>${G({
v: Math.abs(t.value) / V.value * 100,
s: "%",
r: e.value.style.chart.tooltip.roundingPercentage
})}</b></div>`, t.isChild && (a += `<div>${e.value.translations.percentageToSerie}: <b>${G({
v: Math.abs(t.value) / Math.abs(t.parentValue) * 100,
s: "%",
r: e.value.style.chart.tooltip.roundingPercentage
})}</b></div>`)), ge.value = `<div style="text-align:left">${a}</div>`);
}
function dt(t, l, a, o) {
if (!e.value.style.chart.layout.bars.dataLabels.value.show)
return "";
const p = se(
e.value.style.chart.layout.bars.dataLabels.value.formatter,
S(o === -1 && t >= 0 ? -t : t),
G({
p: e.value.style.chart.layout.bars.dataLabels.value.prefix,
v: S(o === -1 && t >= 0 ? -t : t),
s: e.value.style.chart.layout.bars.dataLabels.value.suffix,
r: e.value.style.chart.layout.bars.dataLabels.value.roundingValue
}),
{ datapoint: l, seriesIndex: a }
), _ = `(${it(
t,
!0,
e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage
)})`;
return `${p}${e.value.style.chart.layout.bars.dataLabels.percentage.show ? ` ${_}` : ""}`;
}
const D = d(() => {
const t = [
e.value.translations.parentName,
e.value.translations.value,
e.value.translations.percentageToTotal,
e.value.translations.childName,
e.value.translations.value,
e.value.translations.percentageToSerie,
e.value.translations.percentageToTotal
], l = $.value.map((a) => a.isChild ? a.isFirstChild ? {
color: a.color,
parentName: a.parentName,
parentValue: a.parentValue,
percentageToTotal: a.parentValue / V.value,
childName: a.name,
childValue: a.sign === 1 ? a.value : -a.value,
childPercentageToParent: Math.abs(a.value) / Math.abs(a.parentValue),
childPercentageToTotal: Math.abs(a.value) / V.value
} : {
color: "",
parentName: "",
parentValue: "",
percentageToTotal: "",
childName: a.name,
childValue: a.sign === 1 ? a.value : -a.value,
childPercentageToParent: Math.abs(a.value) / Math.abs(a.parentValue),
childPercentageToTotal: Math.abs(a.value) / V.value
} : {
color: a.color,
parentName: a.name,
parentValue: a.sign === 1 ? a.value : -a.value,
percentageToTotal: Math.abs(a.value) / V.value,
childName: "",
childValue: "",
childPercentageToParent: "",
childPercentageToTotal: ""
});
return { head: t, body: l };
});
function Fe(t = null) {
const l = [
[e.value.style.chart.title.text],
[e.value.style.chart.title.subtitle.text],
[""]
], a = D.value.head, o = D.value.body.map((b) => [
b.parentName,
b.parentValue,
b.percentageToTotal,
b.childName,
b.childValue,
b.childPercentageToParent,
b.childPercentageToTotal
]), p = l.concat([a]).concat(o), _ = Da(p);
t ? t(_) : Ba({
csvContent: _,
title: e.value.style.chart.title.text || "vue-ui-vertical-bar"
});
}
const K = i(!1);
function vt(t) {
K.value = t, Xe.value += 1;
}
function ht() {
x.value.showTable = !x.value.showTable;
}
Be(() => {
["none", "asc", "desc"].includes(
e.value.style.chart.layout.bars.sort
) || ue({
componentName: "VueUiVerticalBar",
type: "attributeWrongValue",
property: "style.chart.layout.bars.sort",
key: e.value.style.chart.layout.bars.sort
}), H.value = Gt.value[e.value.style.chart.layout.bars.sort], x.value.sortDesc = H.value === 2, ie.value = H.value === 0;
});
function sa() {
H.value += 1, H.value > 2 && (H.value = 0);
}
function ft() {
sa(), x.value.sortDesc = H.value === 2, ie.value = H.value === 0;
}
function pt() {
x.value.showTooltip = !x.value.showTooltip;
}
const ve = i(!1);
function ze() {
ve.value = !ve.value;
}
async function ia({ scale: t = 2 } = {}) {
if (!I.value) return;
const { width: l, height: a } = I.value.getBoundingClientRect(), o = l / a, { imageUri: p, base64: _ } = await Ka({
domElement: I.value,
base64: !0,
img: !0,
scale: t
});
return {
imageUri: p,
base64: _,
title: e.value.style.chart.title.text,
width: l,
height: a,
aspectRatio: o
};
}
const he = d(() => {
const t = e.value.table.useDialog && !e.value.table.show, l = x.value.showTable;
return {
component: t ? Et : Ya,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: t ? {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
headerColor: e.value.table.th.color,
headerBg: e.value.table.th.backgroundColor,
isFullscreen: K.value,
fullscreenParent: I.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: l,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
},
head: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
}
}
}
};
});
le(
() => x.value.showTable,
(t) => {
e.value.table.show || (t && e.value.table.useDialog && ne.value ? ne.value.open() : "close" in ne.value && ne.value.close());
}
);
const { isResponsive: ca } = Ga(lt, qt);
function Pe() {
x.value.showTable = !1, Ce.value && Ce.value.setTableIconState(!1);
}
const da = d(() => z.value.map((t, l) => ({
...t,
shape: "square",
display: `${t.name}: ${se(
e.value.style.chart.layout.bars.dataLabels.value.formatter,
t.value,
G({
p: e.value.style.chart.legend.prefix,
v: t.value,
s: e.value.style.chart.legend.suffix,
r: e.value.style.chart.legend.roundingValue
}),
{ datapoint: t, seriesIndex: l }
)}`
}))), va = d(() => e.value.style.chart.backgroundColor), ha = d(() => e.value.style.chart.legend), fa = d(() => e.value.style.chart.title), pa = d(() => da.value.map((t) => ({
...t,
name: t.display
}))), { exportSvg: ba, getSvg: ga } = Xa({
svg: $e,
title: fa,
legend: ha,
legendItems: pa,
backgroundColor: va
});
async function bt({ isCb: t }) {
if (t) {
const { blob: l, url: a, text: o, dataUrl: p } = await ga();
e.value.userOptions.callbacks.svg({ blob: l, url: a, text: o, dataUrl: p });
} else
ba();
}
function ya() {
console.warn("[autoSize]: this legacy method can be safely removed as it ha no impact.");
}
return zt({
autoSize: ya,
getData: la,
getImage: ia,
generatePdf: et,
generateCsv: Fe,
generateImage: tt,
generateSvg: bt,
hideSeries: ea,
showSeries: Zt,
toggleTable: ht,
toggleSort: ft,
toggleTooltip: pt,
toggleAnnotator: ze,
toggleFullscreen: vt
}), (t, l) => (n(), u("div", {
class: J(`vue-data-ui-component vue-ui-vertical-bar ${K.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"} ${e.value.responsive ? "vue-ui-vertical-bar-autosize" : ""}`),
ref_key: "verticalBarChart",
ref: I,
id: `vue-ui-vertical-bar_${F.value}`,
style: h(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};height:100%`),
onMouseenter: l[3] || (l[3] = () => s(Ke)(!0)),
onMouseleave: l[4] || (l[4] = () => s(Ke)(!1))
}, [
e.value.userOptions.buttons.annotator ? (n(), Q(s(Bt), {
key: 0,
svgRef: s($e),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: ve.value,
onClose: ze
}, {
"annotator-action-close": f(() => [
g(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": f(({ color: a }) => [
g(t.$slots, "annotator-action-color", B(N({ color: a })), void 0, !0)
]),
"annotator-action-draw": f(({ mode: a }) => [
g(t.$slots, "annotator-action-draw", B(N({ mode: a })), void 0, !0)
]),
"annotator-action-undo": f(({ disabled: a }) => [
g(t.$slots, "annotator-action-undo", B(N({ disabled: a })), void 0, !0)
]),
"annotator-action-redo": f(({ disabled: a }) => [
g(t.$slots, "annotator-action-redo", B(N({ disabled: a })), void 0, !0)
]),
"annotator-action-delete": f(({ disabled: a }) => [
g(t.$slots, "annotator-action-delete", B(N({ disabled: a })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
Yt.value ? (n(), u("div", {
key: 1,
ref_key: "noTitle",
ref: We,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : y("", !0),
e.value.style.chart.title.text ? (n(), u("div", {
key: 2,
ref_key: "chartTitle",
ref: Ue,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(n(), Q(qa, {
key: `title_${je.value}`,
config: {
title: {
cy: "vertical-bar-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "vertical-bar-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : y("", !0),
e.value.userOptions.show && pe.value && (s(Je) || s(we)) ? (n(), Q(s(Nt), {
ref_key: "userOptionsRef",
ref: Ce,
key: `user_options_${Xe.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isImaging: s(Ze),
isPrinting: s(Qe),
uid: F.value,
hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasSort: e.value.userOptions.buttons.sort,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: K.value,
isTooltip: x.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: I.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: ve.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: vt,
onGeneratePdf: s(et),
onGenerateCsv: Fe,
onGenerateImage: s(tt),
onGenerateSvg: bt,
onToggleTable: ht,
onToggleSort: ft,
onToggleTooltip: pt,
onToggleAnnotator: ze,
style: h({
visibility: s(Je) ? s(we) ? "visible" : "hidden" : "visible"
})
}, fe({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: f(({ isOpen: a, color: o }) => [
g(t.$slots, "menuIcon", B(N({ isOpen: a, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: f(() => [
g(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: f(() => [
g(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: f(() => [
g(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: f(() => [
g(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: f(() => [
g(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: f(() => [
g(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionLabels ? {
name: "optionLabels",
fn: f(() => [
g(t.$slots, "optionLabels", {}, void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionSort ? {
name: "optionSort",
fn: f(() => [
g(t.$slots, "optionSort", {}, void 0, !0)
]),
key: "8"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: f(({ toggleFullscreen: a, isFullscreen: o }) => [
g(t.$slots, "optionFullscreen", B(N({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
]),
key: "9"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: f(({ toggleAnnotator: a, isAnnotator: o }) => [
g(t.$slots, "optionAnnotator", B(N({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
]),
key: "10"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasSort", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
e.value.style.chart.legend.show && e.value.style.chart.legend.position === "top" ? (n(), u("div", {
key: 4,
ref_key: "chartLegend",
ref: ye
}, [
(n(), Q(kt, {
key: `legend_top_${me.value}`,
legendSet: z.value,
config: rt.value,
onClickMarker: l[0] || (l[0] = ({ legend: a }) => Y(a.id))
}, fe({
item: f(({ legend: a, index: o }) => [
r("div", {
onClick: (p) => Y(a.id),
style: h(`opacity:${w.value.includes(a.id) ? 0.5 : 1}`)
}, m(a.name) + ": " + m(s(se)(
e.value.style.chart.layout.bars.dataLabels.value.formatter,
a.value,
s(G)({
p: e.value.style.chart.legend.prefix,
v: a.value,
s: e.value.style.chart.legend.suffix,
r: e.value.style.chart.legend.roundingValue
}),
{ datapoint: a, seriesIndex: o }
)), 13, Za)
]),
_: 2
}, [
t.$slots.pattern ? {
name: "legend-pattern",
fn: f(({ legend: a, index: o }) => [
oe(_t, {
shape: a.shape,
radius: 30,
stroke: "none",
plot: { x: 30, y: 30 },
fill: `url(#pattern_${F.value}_${o})`
}, null, 8, ["shape", "fill"])
]),
key: "0"
} : void 0
]), 1032, ["legendSet", "config"]))
], 512)) : y("", !0),
(n(), u("svg", {
ref_key: "svgRef",
ref: $e,
xmlns: s(Fa),
class: J({
"vue-data-ui-fullscreen--on": K.value,
"vue-data-ui-fulscreen--off": !K.value
}),
viewBox: `0 0 ${M.value} ${X.value}`,
style: h(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
r("g", {
ref_key: "G",
ref: Xt,
class: "vue-data-ui-g"
}, [
oe(s(Ot)),
t.$slots["chart-background"] ? (n(), u("foreignObject", {
key: 0,
x: 0,
y: 0,
width: M.value,
height: X.value,
style: {
pointerEvents: "none"
}
}, [
g(t.$slots, "chart-background", {}, void 0, !0)
], 8, tl)) : y("", !0),
(n(!0), u(O, null, E($.value, (a, o) => (n(), u("linearGradient", {
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
id: `vertical_bar_gradient_${F.value}_${o}`
}, [
r("stop", {
offset: "0%",
"stop-color": a.color
}, null, 8, ll),
r("stop", {
offset: "100%",
"stop-color": s(Me)(
s(za)(a.color, 0.03),
100 - e.value.style.chart.layout.bars.gradientIntensity
)
}, null, 8, ol)
], 8, al))), 256)),
t.$slots.pattern ? (n(), u("g", nl, [
(n(!0), u(O, null, E($.value, (a) => (n(), u("defs", null, [
g(t.$slots, "pattern", mt({ ref_for: !0 }, {
seriesIndex: a.absoluteIndex,
patternId: `pattern_${F.value}_${a.absoluteIndex}`
}), void 0, !0)
]))), 256))
])) : y("", !0),
(n(!0), u(O, null, E($.value, (a, o) => (n(), u("g", null, [
r("rect", {
x: s(S)(
q.value ? c.value.left + c.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : c.value.left
),
y: c.value.top + (k.value + v.value) * o + A.value[o] * L.value,
width: s(S)(
T(a.value) <= 0 ? 1e-4 : T(a.value)
),
height: v.value <= 0 ? 1e-4 : v.value,
fill: e.value.style.chart.layout.bars.underlayerColor,
rx: e.value.style.chart.layout.bars.borderRadius,
class: J({ animated: e.value.useCssAnimation })
}, null, 10, rl)
]))), 256)),
(n(!0), u(O, null, E($.value, (a, o) => (n(), u("g", null, [
r("rect", {
x: s(S)(
q.value ? c.value.left + c.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : c.value.left
),
y: c.value.top + (k.value + v.value) * o + A.value[o] * L.value,
width: s(S)(
T(a.value) <= 0 ? 1e-4 : T(a.value)
),
height: v.value <= 0 ? 1e-4 : v.value,
fill: e.value.style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${F.value}_${o})` : s(Me)(
a.color,
e.value.style.chart.layout.bars.fillOpacity
),
rx: e.value.style.chart.layout.bars.borderRadius,
stroke: e.value.style.chart.layout.bars.useStroke ? a.color : "none",
"stroke-width": e.value.style.chart.layout.bars.useStroke ? e.value.style.chart.layout.bars.strokeWidth : 0,
class: J({ animated: e.value.useCssAnimation })
}, null, 10, ul),
t.$slots.pattern ? (n(), u("rect", {
key: 0,
x: s(S)(
q.value ? c.value.left + c.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : c.value.left
),
y: c.value.top + (k.value + v.value) * o + A.value[o] * L.value,
width: s(S)(
T(a.value) <= 0 ? 1e-4 : T(a.value)
),
height: v.value <= 0 ? 1e-4 : v.value,
fill: `url(#pattern_${F.value}_${a.absoluteIndex})`,
rx: e.value.style.chart.layout.bars.borderRadius,
stroke: e.value.style.chart.layout.bars.useStroke ? a.color : "none",
"stroke-width": e.value.style.chart.layout.bars.useStroke ? e.value.style.chart.layout.bars.strokeWidth : 0,
class: J({ animated: e.value.useCssAnimation })
}, null, 10, sl)) : y("", !0),
(!a.isChild || a.isLastChild) && e.value.style.chart.layout.separators.show && o !== $.value.length - 1 ? (n(), u("line", {
key: 1,
x1: M.value,
x2: e.value.style.chart.layout.separators.fullWidth ? 0 : c.value.left,
y1: v.value + k.value / 2 + c.value.top + (k.value + v.value) * o + A.value[o] * L.value,
y2: v.value + k.value / 2 + c.value.top + (k.value + v.value) * o + A.value[o] * L.value,
stroke: e.value.style.chart.layout.separators.color,
"stroke-width": e.value.style.chart.layout.separators.strokeWidth,
"stroke-linecap": "round",
style: {
transition: "none !important",
animation: "none !important"
}
}, null, 8, il)) : y("", !0),
q.value && e.value.style.chart.layout.separators.show ? (n(), u("line", {
key: 2,
x1: c.value.left + c.value.width / 2,
x2: c.value.left + c.value.width / 2,
y1: c.value.top,
y2: c.value.bottom,
stroke: e.value.style.chart.layout.separators.color,
"stroke-width": e.value.style.chart.layout.separators.strokeWidth,
"stroke-linecap": "round"
}, null, 8, cl)) : y("", !0)
]))), 256)),
r("g", {
ref_key: "parentLabels",
ref: Ut
}, [
(n(!0), u(O, null, E($.value, (a, o) => (n(), u("g", dl, [
a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (n(), u("rect", {
key: 0,
class: "vue-ui-horizontal-bar-parent-marker",
x: 2,
y: te(a, o).y - e.value.style.chart.layout.bars.parentLabels.fontSize / 1.5,
height: e.value.style.chart.layout.bars.parentLabels.fontSize / 1.5,
width: e.value.style.chart.layout.bars.parentLabels.fontSize / 1.5,
rx: 1,
fill: a.color,
style: { animation: "none !important", transition: "none !important" }
}, null, 8, vl)) : y("", !0),
a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (n(), u("text", {
key: 1,
y: te(a, o).y,
"font-size": e.value.style.chart.layout.bars.parentLabels.fontSize,
fill: e.value.style.chart.layout.bars.parentLabels.color,
x: e.value.style.chart.layout.bars.parentLabels.offsetX + e.value.style.chart.layout.bars.parentLabels.fontSize,
"font-weight": e.value.style.chart.layout.bars.parentLabels.bold ? "bold" : "normal",
"text-anchor": "start",
innerHTML: s(Ve)({
content: `${ct(a, o)}`,
fontSize: e.value.style.chart.layout.bars.parentLabels.fontSize,
fill: e.value.style.chart.layout.bars.parentLabels.color,
x: e.value.style.chart.layout.bars.parentLabels.offsetX + e.value.style.chart.layout.bars.parentLabels.fontSize,
y: te(a, o).y,
translateY: !1
})
}, null, 8, hl)) : y("", !0),
a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (n(), u("text", {
key: 2,
y: te(a, o).y + s(Pa)(ct(a, o)) * e.value.style.chart.layout.bars.parentLabels.fontSize * 1.1,
"font-size": e.value.style.chart.layout.bars.parentLabels.fontSize,
fill: e.value.style.chart.layout.bars.parentLabels.color,
x: e.value.style.chart.layout.bars.parentLabels.offsetX + e.value.style.chart.layout.bars.parentLabels.fontSize,
"font-weight": e.value.style.chart.layout.bars.dataLabels.bold ? "bold" : "normal",
"text-anchor": "start"
}, m(oa(a, o)), 9, fl)) : y("", !0)
]))), 256))
], 512),
r("g", {
ref_key: "childLabels",
ref: ke
}, [
(n(!0), u(O, null, E(Qt.value, (a, o) => (n(), u("g", pl, [
(a.isChild || !a.hasChildren) && e.value.style.chart.layout.bars.nameLabels.show ? (n(), u("text", {
key: 0,
"text-anchor": "start",
x: Math.abs(e.value.style.chart.layout.bars.nameLabels.offsetX),
y: s(S)(c.value.top + (k.value + v.value) * o + v.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 2 + A.value[o] * L.value),
"font-size": e.value.style.chart.layout.bars.nameLabels.fontSize,
fill: "transparent",
"font-weight": e.value.style.chart.layout.bars.nameLabels.bold ? "bold" : "normal",
style: { "user-select": "none" },
innerHTML: s(Ve)({
content: a.name,
fontSize: e.value.style.chart.layout.bars.nameLabels.fontSize,
fill: "transparent",
x: Math.abs(e.value.style.chart.layout.bars.nameLabels.offsetX),
y: s(S)(c.value.top + (k.value + v.value) * o + v.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 2 + A.value[o] * L.value),
translateY: !0
})
}, null, 8, bl)) : y("", !0)
]))), 256))
], 512),
r("g", null, [
(n(!0), u(O, null, E($.value, (a, o) => (n(), u("g", gl, [
(a.isChild || !a.hasChildren) && e.value.style.chart.layout.bars.nameLabels.show ? (n(), u("text", {
key: 0,
"text-anchor": "end",
x: c.value.left + e.value.style.chart.layout.bars.nameLabels.offsetX - 6,
y: c.value.top + (k.value + v.value) * o + v.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 3 + A.value[o] * L.value,
"font-size": e.value.style.chart.layout.bars.nameLabels.fontSize,
fill: e.value.style.chart.layout.bars.nameLabels.color,
"font-weight": e.value.style.chart.layout.bars.nameLabels.bold ? "bold" : "normal",
innerHTML: s(Ve)({
content: a.name,
fontSize: e.value.style.chart.layout.bars.nameLabels.fontSize,
fill: e.value.style.chart.layout.bars.nameLabels.color,
x: c.value.left + e.value.style.chart.layout.bars.nameLabels.offsetX - 6,
y: c.value.top + (k.value + v.value) * o + v.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 3 + A.value[o] * L.value,
translateY: !0
})
}, null, 8, yl)) : y("", !0)
]))), 256))
]),
r("g", {
ref_key: "dataLabels",
ref: _e
}, [
(n(!0), u(O, null, E($.value, (a, o) => (n(), u("g", ml, [
r("text", {
x: q.value ? c.value.left + c.value.width / 2 + (a.sign === 1 ? -12 : 12) + (a.sign === 1 ? -e.value.style.chart.layout.bars.dataLabels.offsetX : e.value.style.chart.layout.bars.dataLabels.offsetX) : Math.min(
aa(a.value) + 3 + e.value.style.chart.layout.bars.dataLabels.offsetX,
c.value.right - 2
),
y: c.value.top + (k.value + v.value) * o + v.value / 2 + A.value[o] * L.value + e.value.style.chart.layout.bars.dataLabels.fontSize / 3,
"text-anchor": !q.value || a.sign === -1 ? "start" : "end",
"font-size": e.value.style.chart.layout.bars.dataLabels.fontSize,
fill: e.value.style.chart.layout.bars.dataLabels.color,
"font-weight": e.value.style.chart.layout.bars.dataLabels.bold ? "bold" : "normal"
}, m(dt(a.value, a, o, a.sign)), 9, Cl)
]))), 256))
], 512),
(n(!0), u(O, null, E($.value, (a, o) => (n(), u("g", null, [
r("rect", {
x: 0,
y: c.value.top + (k.value + v.value) * o - k.value / 2 + A.value[o] * L.value,
width: M.value,
height: v.value + k.value <= 0 ? 1e-4 : v.value + k.value,
fill: Te.value === a.id ? s(Me)(
e.value.style.chart.layout.highlighter.color,
e.value.style.chart.layout.highlighter.opacity
) : "transparent",
onMouseenter: (p) => ua(a, o),
onMouseleave: (p) => ra({ datapoint: a, seriesIndex: o }),
onClick: (p) => na({ datapoint: a, seriesIndex: o })
}, null, 40, kl)
]))), 256)),
g(t.$slots, "svg", { svg: R.value }, void 0, !0)
], 512)
], 14, el)),
t.$slots.watermark ? (n(), u("div", _l, [
g(t.$slots, "watermark", B(N({ isPrinting: s(Qe) || s(Ze) })), void 0, !0)
])) : y("", !0),
e.value.style.chart.legend.show && e.value.style.chart.legend.position === "bottom" ? (n(), u("div", {
key: 6,
ref_key: "chartLegend",
ref: ye
}, [
(n(), Q(kt, {
key: `legend_bottom_${me.value}`,
legendSet: z.value,
config: rt.value,
onClickMarker: l[1] || (l[1] = ({ legend: a }) => Y(a.id))
}, fe({
item: f(({ legend: a, index: o }) => [
r("div", {
onClick: (p) => Y(a.id),
style: h(`opacity:${w.value.includes(a.id) ? 0.5 : 1}`)
}, m(a.name) + ": " + m(s(se)(
e.value.style.chart.layout.bars.dataLabels.value.formatter,
a.value,
s(G)({
p: e.value.style.chart.legend.prefix,
v: a.value,
s: e.value.style.chart.legend.suffix,
r: e.value.style.chart.legend.roundingValue
}),
{ datapoint: a, seriesIndex: o }
)), 13, xl)
]),
_: 2
}, [
t.$slots.pattern ? {
name: "legend-pattern",
fn: f(({ legend: a, index: o }) => [
oe(_t, {
shape: a.shape,
radius: 30,
stroke: "none",
plot: { x: 30, y: 30 },
fill: `url(#pattern_${F.value}_${o})`
}, null, 8, ["shape", "fill"])
]),
key: "0"
} : void 0
]), 1032, ["legendSet", "config"]))
], 512)) : y("", !0),
g(t.$slots, "legend", { legend: z.value }, void 0, !0),
t.$slots.source ? (n(), u("div", {
key: 7,
ref_key: "source",
ref: Ge,
dir: "auto"
}, [
g(t.$slots, "source", {}, void 0, !0)
], 512)) : y("", !0),
oe(s(Dt), {
show: x.value.showTooltip && be.value && w.value.length < C.dataset.length,
backgroundColor: e.value.style.chart.tooltip.backgroundColor,
color: e.value.style.chart.tooltip.color,
borderRadius: e.value.style.chart.tooltip.borderRadius,
borderColor: e.value.style.chart.tooltip.borderColor,
borderWidth: e.value.style.chart.tooltip.borderWidth,
fontSize: e.value.style.chart.tooltip.fontSize,
backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
position: e.value.style.chart.tooltip.position,
offsetY: e.value.style.chart.tooltip.offsetY,
parent: I.value,
content: ge.value,
isFullscreen: K.value,
isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
smooth: e.value.style.chart.tooltip.smooth,
backdropFilter: e.value.style.chart.tooltip.backdropFilter,
smoothForce: e.value.style.chart.tooltip.smoothForce,
smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
}, {
"tooltip-before": f(() => [
g(t.$slots, "tooltip-before", B(N({ ...Se.value })), void 0, !0)
]),
"tooltip-after": f(() => [
g(t.$slots, "tooltip-after", B(N({ ...Se.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
pe.value && e.value.userOptions.buttons.table ? (n(), Q(wa(he.value.component), mt({ key: 8 }, he.value.props, {
ref_key: "tableUnit",
ref: ne,
onClose: Pe
}), fe({
content: f(() => [
r("div", {
ref_key: "tableContainer",
ref: lt,
class: "vue-ui-vertical-bar-table atom-data-table",
style: h(`${e.value.table.useDialog ? "" : "max-height: 300px; margin-top: 24px"}`)
}, [
r("div", wl, [
e.value.table.useDialog ? y("", !0) : (n(), u("div", {
key: 0,
role: "button",
tabindex: "0",
style: h(`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${e.value.table.th.backgroundColor};`),
onClick: Pe,
onKeypress: $a(Pe, ["enter"])
}, [
oe(s(He), {
name: "close",
stroke: e.value.table.th.color,
"stroke-width": 2
}, null, 8, ["stroke"])
], 36)),
r("div", {
style: { width: "100%", "container-type": "inline-size" },
class: J({ "vue-ui-responsive": s(ca) })
}, [
r("table", $l, [
e.value.table.useDialog ? y("", !0) : (n(), u("caption", {
key: 0,
style: h({
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
}),
class: "vue-ui-data-table__caption"
}, [
Ct(m(e.value.style.chart.title.text) + " ", 1),
e.value.style.chart.title.subtitle.text ? (n(), u("span", Ll, m(e.value.style.chart.title.subtitle.text), 1)) : y("", !0)
], 4)),
r("thead", null, [
r("tr", {
role: "row",
style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color}`)
}, [
(n(!0), u(O, null, E(D.value.head, (a) => (n(), u("th", {
style: h(`outline:${e.value.table.th.outline}`)
}, [
r("div", Al, m(a), 1)
], 4))), 256))
], 4),
r("tr", null, [
r("th", {
style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
}, null, 4),
r("th", {
style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`)
}, " ∑ " + m(e.value.table.td.prefix) + m(isNaN(V.value) ? "" : V.value.toFixed(e.value.table.td.roundingValue)) + m(e.value.table.td.suffix), 5),
r("th", {
style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`)
}, " 100% ", 4),
r("th", {
style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
}, null, 4),
r("th", {
style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
}, null, 4),
r("th", {
style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
}, null, 4),
r("th", {
style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
}, null, 4)
])
]),
r("tbody", null, [
(n(!0), u(O, null, E(D.value.body, (a, o) => (n(), u("tr", {
class: J({
"vue-ui-data-table__tbody__row": !0,
"vue-ui-data-table__tbody__row-even": o % 2 === 0,
"vue-ui-data-table__tbody__row-odd": o % 2 !== 0
}),
style: h(`background:${e.value.table.td.backgroundColor};color:${e.value.table.td.color}`)
}, [
r("td", {
class: "vue-ui-data-table__tbody__td",
style: h(`outline:${e.value.table.td.outline};font-variant-numeric: tabular-nums;`),
"data-cell": D.value.head[0] ?? ""
}, [
r("div", Sl, [
a.color ? (n(), u("span", {
key: 0,
style: h(`color:${a.color};margin-right:3px`)
}, "⬤", 4)) : y("", !0),
r("span", null, m(a.parentName), 1)
])
], 12, Tl),
r("td", {
class: "vue-ui-data-table__tbody__td",
style: h(`outline:${e.value.table.td.outline}`),
"data-cell": D.value.head[1] ?? ""
}, [
r("div", zl, m(e.value.table.td.prefix) + m(["", NaN, void 0].includes(a.parentValue) ? "" : a.parentValue.toFixed(
e.value.table.td.roundingValue
)) + m(e.value.table.td.suffix), 1)
], 12, Fl),
r("td", {
class: "vue-ui-data-table__tbody__td",
style: h(`outline:${e.value.table.td.outline}`),
"data-cell": D.value.head[2] ?? ""
}, [
r("div", Dl, m(["", NaN, void 0].includes(a.percentageToTotal) ? "" : `${(a.percentageToTotal * 100).toFixed(
e.value.table.td.roundingPercentage
)}%`), 1)
], 12, Pl),
r("td", {
class: "vue-ui-data-table__tbody__td",
style: h(`outline:${e.value.table.td.outline}`),
"data-cell": D.value.head[3] ?? ""
}, [
r("div", Nl, m(a.childName), 1)
], 12, Bl),
r("td", {
class: "vue-ui-data-table__tbody__td",
style: h(`outline:${e.value.table.td.outline}`),
"data-cell": D.value.head[4] ?? ""
}, [
r("div", El, m(e.value.table.td.prefix) + m(["", NaN, void 0].includes(a.childValue) ? "" : a.childValue.toFixed(
e.value.table.td.roundingValue
)) + m(e.value.table.td.suffix), 1)
], 12, Ol),
r("td", {
class: "vue-ui-data-table__tbody__td",
style: h(`outline:${e.value.table.td.outline}`),
"data-cell": D.value.head[5] ?? ""
}, [
r("div", Ml, m(["", NaN, void 0].includes(
a.childPercentageToParent
) ? "" : `${(a.childPercentageToParent * 100).toFixed(
e.value.table.td.roundingPercentage
)}%`), 1)
], 12, Il),
r("td", {
class: "vue-ui-data-table__tbody__td",
style: h(`outline:${e.value.table.td.outline}`),
"data-cell": D.value.head[6] ?? ""
}, [
r("div", Rl, m(["", NaN, void 0].includes(
a.childPercentageToTotal
) ? "" : `${(a.childPercentageToTotal * 100).toFixed(
e.value.table.td.roundingPercentage
)}%`), 1)
], 12, Vl)
], 6))), 256))
])
])
], 2)
])
], 4)
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: f(() => [
Ct(m(he.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: f(() => [
r("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: l[2] || (l[2] = (a) => Fe(e.value.userOptions.callbacks.csv))
}, [
oe(s(He), {
name: "excel",
stroke: he.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : y("", !0),
s(Ye) ? (n(), Q(Ra, { key: 9 })) : y("", !0)
], 46, Qa));
}
}, Xl = /* @__PURE__ */ Ja(Hl, [["__scopeId", "data-v-b9914315"]]), so = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Xl
}, Symbol.toStringTag, { value: "Module" }));
export {
uo as a,
so as b,
Xl as v
};