vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,868 lines • 93.7 kB
JavaScript
import { defineAsyncComponent as j, useSlots as Pl, computed as b, ref as d, onMounted as ia, toRefs as Ol, watch as ze, shallowRef as ua, onBeforeUnmount as gt, watchEffect as ca, nextTick as El, createElementBlock as n, openBlock as s, normalizeStyle as ne, normalizeClass as ve, createBlock as ee, createCommentVNode as y, renderSlot as C, createElementVNode as te, createVNode as _e, unref as m, withCtx as L, normalizeProps as U, guardReactiveProps as H, createSlots as bt, Fragment as x, renderList as w, mergeProps as Me, toDisplayString as B, Teleport as Rl, resolveDynamicComponent as Il, createTextVNode as ha } from "vue";
import { u as Bl, a as yt } from "./useNestedProp-OFRiX4kU.js";
import { c as va, t as Vl, i as Ul, j as He, a1 as de, k as Hl, o as da, g as ga, l as Xl, m as Yl, aq as Te, O as ba, N as ya, S as Wl, X as ql, q as Gl, Q as ie, x as fa, a as ge, d as ae, $ as Jl, ar as Zl, y as ma, v as Ql, r as Kl, _ as jl } from "./lib-BwysEpWI.js";
import { t as ft, u as eo } from "./useResponsive-DfdjqQps.js";
import { u as to } from "./usePrinter-BJzHDpYF.js";
import { u as ao, B as lo } from "./BaseScanner-BMpwQAfz.js";
import { u as pa, a as oo, l as ro } from "./useTimeLabels-DKoynYae.js";
import { u as so } from "./useSvgExport-ByUukOZt.js";
import { u as no } from "./useThemeCheck-DGJ31Vi5.js";
import { u as io } from "./useUserOptionState-BIvW1Kz7.js";
import { u as uo } from "./useChartAccessibility-9icAAmYg.js";
import { u as co } from "./useTimeLabelCollider-CIsgDrl9.js";
import ho from "./img-DKigoPDs.js";
import vo from "./Title-DGnfNZuO.js";
import { _ as go } from "./Shape-DAHhCEdg.js";
import bo from "./Legend-D6z73edh.js";
import { S as yo } from "./SlicerPreview-oV3dMuV1.js";
import { _ as fo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const xa = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, zoom: { color: "#4A4A4A", highlightColor: "#9A9A9A", minimap: { selectedColor: "#8A8A8A", lineColor: "#424242", indicatorColor: "#CCCCCC" } }, highlighter: { color: "#CCCCCC" }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" }, bars: { totalValues: { color: "#CCCCCC" } }, grid: { frame: { stroke: "#5A5A5A" }, x: { axisColor: "#5A5A5A", linesColor: "#4A4A4A", axisName: { color: "#CCCCCC" }, timeLabels: { color: "#CCCCCC" } }, y: { axisColor: "#5A5A5A", linesColor: "#4A4A4A", axisName: { color: "#CCCCCC" }, axisLabels: { color: "#CCCCCC" } } } } } }, ka = { table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } }, style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", title: { color: "#424242", subtitle: { color: "#757575" } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, highlighter: { color: "#424242" }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, bars: { totalValues: { color: "#424242" } }, grid: { x: { axisColor: "#5D403780", axisName: { color: "#424242" }, timeLabels: { color: "#424242" } }, y: { axisColor: "#5D403780", axisName: { color: "#424242" }, axisLabels: { color: "#424242" } } } } } }, Ca = { table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } }, style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, highlighter: { color: "#FFF8E1" }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, bars: { totalValues: { color: "#BDBDBD" } }, grid: { x: { axisColor: "#5D403740", axisName: { color: "#BDBDBD" }, timeLabels: { color: "#BDBDBD" } }, y: { axisColor: "#5D4037", axisName: { color: "#BDBDBD" }, axisLabels: { color: "#BDBDBD" } } } } } }, wa = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, zoom: { color: "#5F6A5F", highlightColor: "#66CC66" }, highlighter: { color: "#66CC66" }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" }, bars: { totalValues: { color: "#99AA99" } }, grid: { x: { axisColor: "#5F6A5F", axisName: { color: "#66CC66" }, timeLabels: { color: "#99AA99" } }, y: { axisColor: "#5F6A5F", axisName: { color: "#66CC66" }, axisLabels: { color: "#99AA99" } } } } } }, La = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, zoom: { color: "#E0CFC3", highlightColor: "#8F837A" }, highlighter: { color: "#8F837A" }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" }, bars: { borderRadius: 4, totalValues: { show: !1 }, dataLabels: { show: !1 } }, grid: { x: { showAxis: !1, axisName: { color: "#8F837A" }, timeLabels: { show: !1 } }, y: { showAxis: !1, axisName: { color: "#8F837A" }, axisLabels: { show: !1 } } } } } }, Aa = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", title: { color: "#50606C", subtitle: { color: "#718890" } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, zoom: { color: "#92B0AB", highlightColor: "#50606C" }, highlighter: { color: "#7DA9B5" }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" }, bars: { totalValues: { color: "#50606C" } }, grid: { x: { showHorizontalLines: !0, axisColor: "#829C98", axisName: { color: "#50606C" }, timeLabels: { color: "#61747E" } }, y: { showVerticalLines: !0, axisColor: "#829C98", axisName: { color: "#50606C" }, axisLabels: { color: "#61747E" } } } } } }, Sa = {
default: {},
dark: xa,
celebration: ka,
celebrationNight: Ca,
hack: wa,
zen: La,
concrete: Aa
}, Nr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: ka,
celebrationNight: Ca,
concrete: Aa,
dark: xa,
default: Sa,
hack: wa,
zen: La
}, Symbol.toStringTag, { value: "Module" })), mo = ["id"], po = ["id"], xo = ["xmlns", "viewBox"], ko = ["x", "y", "width", "height"], Co = { key: 1 }, wo = ["id"], Lo = ["stop-color"], Ao = ["stop-color"], So = ["stop-color"], zo = ["x", "y", "width", "height", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-dasharray"], _o = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Mo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], To = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], $o = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Fo = { key: 0 }, Do = ["x", "y", "height", "rx", "width", "fill", "stroke", "stroke-width"], No = { key: 0 }, Po = ["x", "y", "height", "rx", "width", "fill", "stroke", "stroke-width"], Oo = ["x", "y", "width", "rx", "height", "fill", "stroke", "stroke-width"], Eo = { key: 0 }, Ro = ["x", "y", "width", "rx", "height", "fill", "stroke", "stroke-width"], Io = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Bo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Vo = ["x", "y", "font-size", "fill", "font-weight"], Uo = ["transform", "font-size", "fill", "font-weight"], Ho = ["x", "y", "font-size", "fill", "font-weight"], Xo = ["x", "y", "font-size", "font-weight", "fill"], Yo = ["x", "y", "font-size", "fill", "font-weight"], Wo = ["x", "y", "font-size", "font-weight", "fill"], qo = ["x1", "x2", "y1", "y2", "stroke"], Go = ["x", "y", "font-size", "font-weight", "fill"], Jo = ["x1", "x2", "y1", "y2", "stroke"], Zo = ["font-size", "font-weight", "fill", "text-anchor", "transform"], Qo = { key: 0 }, Ko = { key: 1 }, jo = ["text-anchor", "font-size", "font-weight", "fill", "transform", "onClick"], er = ["text-anchor", "font-size", "fill", "transform", "innerHTML", "onClick"], tr = { key: 0 }, ar = { key: 1 }, lr = ["font-size", "font-weight", "fill", "x", "y", "onClick"], or = ["font-size", "font-weight", "fill", "x", "y", "onClick", "innerHTML"], rr = ["x", "y", "width", "height", "onClick", "onMouseenter", "onMouseleave", "fill"], sr = ["x", "y", "width", "height", "onClick", "onMouseenter", "onMouseleave", "fill"], nr = ["data-start", "data-end"], ir = {
key: 3,
class: "vue-data-ui-watermark"
}, ur = ["x", "y", "height", "width", "fill", "stroke"], cr = ["id"], hr = ["onClick"], vr = ["innerHTML"], dr = {
__name: "vue-ui-stackbar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
},
selectedXIndex: {
type: Number,
default: void 0
}
},
emits: ["selectDatapoint", "selectLegend", "selectTimeLabel", "selectX"],
setup(Xe, { expose: za, emit: _a }) {
const Ma = j(() => import("./Tooltip-TDyKgLB6.js")), Ta = j(() => import("./BaseIcon-4i3dd7Ty.js")), $a = j(() => import("./vue-ui-accordion-DUuwVsuJ.js")), Fa = j(() => import("./DataTable-WrXCJkfE.js")), Da = j(() => import("./PenAndPaper-DxIUvoQ8.js")), Na = j(() => import("./UserOptions-CzJWRC4s.js")), Pa = j(() => import("./PackageVersion-BLzm8l_I.js")), Oa = j(() => import("./BaseDraggableDialog-CAJxIF6g.js")), { vue_ui_stackbar: Ea } = Bl(), { isThemeValid: Ra, warnInvalidTheme: Ia } = no(), Ba = Pl(), k = Xe, be = _a, ye = b({
get() {
return !!k.dataset && k.dataset.length;
},
set(a) {
return a;
}
}), J = d(null), V = d(va()), Ye = d(!1), We = d(null), qe = d(""), F = d([]), mt = d(0), pt = d(null), xt = d(null), fe = d(null), kt = d(null), me = d(!1), G = d(null), le = d(!1), Ct = d(0), Va = d(0), Ua = d(0), wt = d(!1), pe = d(null), Ge = d(null), Je = d(null), Ze = d(null), oe = d(null), re = d(null), Ha = d(null), Qe = d(null), Ke = d(null);
ia(() => {
wt.value = !0, ot();
});
const e = d(at()), { loading: xe, FINAL_DATASET: je, manualLoading: $e } = ao({
...Ol(k),
FINAL_CONFIG: e,
prepareConfig: at,
callback: () => {
Promise.resolve().then(async () => {
await Be();
});
},
skeletonDataset: [
{
name: "",
series: [2, 3, 5, 8, 13, 21],
color: "#BABABA"
},
{
name: "",
series: [1, 2, 3, 5, 8, 13],
color: "#CACACA"
}
],
skeletonConfig: Vl({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
useCssAnimation: !1,
table: { show: !1 },
tooltip: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
bars: {
totalValues: { show: !1 },
dataLabels: { show: !1 }
},
grid: {
frame: {
stroke: "#6A6A6A"
},
scale: {
scaleMin: 0,
scaleMax: 40
},
x: {
axisColor: "#6A6A6A",
linesColor: "#6A6A6A",
axisName: { show: !1 },
timeLabels: { show: !1 }
},
y: {
axisColor: "#6A6A6A",
linesColor: "#6A6A6A",
axisName: { show: !1 },
axisLabels: { show: !1 }
}
},
legend: {
backgroundColor: "transparent"
},
padding: {
left: 24,
right: 24,
bottom: 12
},
zoom: {
show: !1,
startIndex: null,
endIndex: null
}
}
}
}
})
}), { userOptionsVisible: et, setUserOptionsVisibility: Lt, keepUserOptionState: At } = io({ config: e.value }), { svgRef: tt } = uo({ config: e.value.style.chart.title });
function Xa() {
Lt(!0);
}
function Ya() {
Lt(!1), be("selectX", { seriesIndex: null, datapoint: null }), G.value = null;
}
function at() {
const a = yt({
userConfig: k.config,
defaultConfig: Ea
});
let l = {};
const t = a.theme;
if (t)
if (!Ra.value(a))
Ia(a), l = a;
else {
const o = yt({
userConfig: Sa[t] || k.config,
defaultConfig: a
});
l = {
...yt({
userConfig: k.config,
defaultConfig: o
}),
customPalette: a.customPalette.length ? a.customPalette : Ul[t] || He
};
}
else
l = a;
return k.config && de(k.config, "style.chart.grid.scale.scaleMin") ? l.style.chart.grid.scale.scaleMin = k.config.style.chart.grid.scale.scaleMin : l.style.chart.grid.scale.scaleMin = null, k.config && de(k.config, "style.chart.grid.scale.scaleMax") ? l.style.chart.grid.scale.scaleMax = k.config.style.chart.grid.scale.scaleMax : l.style.chart.grid.scale.scaleMax = null, k.config && de(k.config, "style.chart.zoom.startIndex") ? l.style.chart.zoom.startIndex = k.config.style.chart.zoom.startIndex : l.style.chart.zoom.startIndex = null, k.config && de(k.config, "style.chart.zoom.endIndex") ? l.style.chart.zoom.endIndex = k.config.style.chart.zoom.endIndex : l.style.chart.zoom.endIndex = null, k.config && de(k.config, "style.chart.bars.dataLabels.hideUnderValue") ? l.style.chart.bars.dataLabels.hideUnderValue = k.config.style.chart.bars.dataLabels.hideUnderValue : l.style.chart.bars.dataLabels.hideUnderValue = null, k.config && de(k.config, "style.chart.bars.dataLabels.hideUnderPercentage") ? l.style.chart.bars.dataLabels.hideUnderPercentage = k.config.style.chart.bars.dataLabels.hideUnderPercentage : l.style.chart.bars.dataLabels.hideUnderPercentage = null, l;
}
const St = b(() => e.value.style.chart.bars.dataLabels.hideUnderValue !== null), zt = b(() => e.value.style.chart.bars.dataLabels.hideUnderPercentage !== null);
ze(() => k.config, (a) => {
xe.value || (e.value = at()), et.value = !e.value.userOptions.showOnChartHover, ot(), Ct.value += 1, Va.value += 1, Ua.value += 1, T.value.dataLabels.show = e.value.style.chart.bars.dataLabels.show, T.value.showTable = e.value.table.show, T.value.showTooltip = e.value.style.chart.tooltip.show, Ne();
}, { deep: !0 }), ze(() => k.dataset, (a) => {
Array.isArray(a) && a.length > 0 && ($e.value = !1), Ot();
}, { deep: !0 });
const T = d({
dataLabels: {
show: e.value.style.chart.bars.dataLabels.show
},
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
});
ze(e, () => {
T.value = {
dataLabels: {
show: e.value.style.chart.bars.dataLabels.show
},
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
};
}, { immediate: !0 });
const { isPrinting: _t, isImaging: Mt, generatePdf: Tt, generateImage: $t } = to({
elementId: `stackbar_${V.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-stackbar",
options: e.value.userOptions.print
}), ue = d({
width: e.value.style.chart.width,
height: e.value.style.chart.height,
paddingRatio: {
top: e.value.style.chart.padding.top / e.value.style.chart.height,
right: e.value.style.chart.padding.right / e.value.style.chart.width,
bottom: e.value.style.chart.padding.bottom / e.value.style.chart.height,
left: e.value.style.chart.padding.left / e.value.style.chart.width
}
}), Wa = b(() => Hl(e.value.customPalette)), Q = ua(null), ce = ua(null), Ft = d(null);
ia(() => {
ot();
});
const lt = b(() => !!e.value.debug);
function ot() {
if (da(k.dataset) ? (ga({
componentName: "VueUiStackbar",
type: "dataset",
debug: lt.value
}), $e.value = !0) : k.dataset.forEach((a, l) => {
Xl({
datasetObject: a,
requiredAttributes: ["name", "series"]
}).forEach((t) => {
ye.value = !1, ga({
componentName: "VueUiStackbar",
type: "datasetSerieAttribute",
property: t,
index: l,
debug: lt.value
}), $e.value = !0;
});
}), da(k.dataset) || ($e.value = e.value.loading), setTimeout(() => {
le.value = !0;
}, 10), e.value.responsive) {
const a = ft(() => {
le.value = !1;
const { width: l, height: t } = eo({
chart: J.value,
title: e.value.style.chart.title.text ? pt.value : null,
legend: e.value.style.chart.legend.show ? xt.value : null,
slicer: e.value.style.chart.zoom.show && D.value > 6 ? fe.value.$el : null,
source: kt.value
});
requestAnimationFrame(() => {
ue.value.width = l, ue.value.height = t - 12, clearTimeout(Ft.value), Ft.value = setTimeout(() => {
le.value = !0;
}, 10);
});
});
Q.value && (ce.value && Q.value.unobserve(ce.value), Q.value.disconnect()), Q.value = new ResizeObserver(a), ce.value = J.value.parentNode, Q.value.observe(ce.value);
}
Be();
}
gt(() => {
Q.value && (ce.value && Q.value.unobserve(ce.value), Q.value.disconnect());
});
function qa() {
let a = 0;
e.value.orientation === "vertical" && oe.value && (a = Array.from(oe.value.querySelectorAll("text")).reduce((o, c) => {
const r = c.getComputedTextLength();
return r > o ? r : o;
}, 0)), e.value.orientation === "horizontal" && re.value && (a = Array.from(re.value.querySelectorAll("text")).reduce((o, c) => {
const r = c.getComputedTextLength();
return r > o ? r : o;
}, 0));
const l = Ze.value ? Ze.value.getBoundingClientRect().width : 0;
return a + l + (l ? 24 : 0);
}
const Fe = d(0), De = d(0), Ga = ft((a) => {
Fe.value = a;
}, 100);
ca((a) => {
const l = e.value.orientation === "vertical" ? re.value : oe.value;
if (!l) return;
const t = new ResizeObserver((o) => {
Ga(o[0].contentRect.height);
});
t.observe(l), a(() => t.disconnect());
});
const Ja = ft((a) => {
De.value = a + e.value.style.chart.bars.totalValues.fontSize;
}, 100);
function Za() {
if (e.value.orientation !== "horizontal") return 0;
const a = Qe.value;
if (!a) return 0;
const l = Array.from(a.querySelectorAll("text"));
if (!l.length) return 0;
let t = -1 / 0;
for (const c of l)
try {
const r = c.getBBox(), f = r.x + r.width;
f > t && (t = f);
} catch {
}
return Math.max(0, t - (u.value?.right ?? 0));
}
ca((a) => {
if (e.value.orientation !== "horizontal") return;
const l = Qe.value;
if (!l) return;
const t = () => {
const r = Za();
Ja(r);
};
t();
const o = new ResizeObserver(t);
o.observe(l);
const c = new MutationObserver(t);
c.observe(l, { childList: !0, subtree: !0, characterData: !0 }), a(() => {
o.disconnect(), c.disconnect();
});
}), gt(() => {
Fe.value = 0, De.value = 0;
});
const Dt = b(() => {
let a = 0;
Je.value && (a = Je.value.getBBox().height);
let l = 0;
return e.value.orientation === "vertical" && re.value && (l = Fe.value), e.value.orientation === "horizontal" && oe.value && (l = Fe.value), a + l;
}), u = b(() => {
const { height: a, width: l } = ue.value, { right: t } = ue.value.paddingRatio;
let o = e.value.style.chart.bars.totalValues.show && k.dataset && k.dataset.length > 1 ? e.value.style.chart.bars.totalValues.fontSize * 1.3 : 0, c = 0;
e.value.style.chart.grid.y.axisLabels.show && (c = qa());
const r = e.value.style.chart.padding.top + o, f = l - l * t - De.value, A = a - e.value.style.chart.padding.bottom - Dt.value - o, M = e.value.style.chart.padding.left + c, N = l - M - l * t - De.value, $ = a - r - e.value.style.chart.padding.bottom - Dt.value - o;
return {
chartHeight: a,
chartWidth: l,
top: r,
right: f,
bottom: A,
left: M,
width: Math.max(0, N),
height: Math.max(0, $)
};
}), Qa = b(() => {
const { left: a, top: l, width: t, height: o } = u.value, c = h.value.start, r = h.value.end, f = Math.max(1, r - c), A = Math.max(0, Math.min(f, (R.value.start ?? c) - c)), M = Math.max(0, Math.min(f, (R.value.end ?? r) - c)), N = Math.max(0, M - A), $ = {
fill: e.value.style.chart.zoom.preview.fill,
stroke: e.value.style.chart.zoom.preview.stroke,
"stroke-width": e.value.style.chart.zoom.preview.strokeWidth,
"stroke-dasharray": e.value.style.chart.zoom.preview.strokeDasharray,
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: {
pointerEvents: "none",
transition: "none !important",
animation: "none !important"
}
};
if (e.value.orientation === "horizontal") {
const E = o / f;
return {
x: a,
y: l + A * E,
width: t,
height: N * E,
...$
};
} else {
const E = t / f;
return {
x: a + A * E,
y: l,
width: N * E,
height: o,
...$
};
}
}), X = b(() => je.value.map((a, l) => {
const t = Yl(a.color) || Wa.value[l] || He[l] || He[l % He.length];
return {
...a,
// In distributed mode, all values are converted to positive
series: JSON.parse(JSON.stringify(a.series)).map((o) => e.value.style.chart.bars.distributed ? Math.abs(o) : o),
// Store signs to manage display of neg values in distributed mode
signedSeries: a.series.map((o) => o >= 0 ? 1 : -1),
absoluteIndex: l,
id: va(),
color: t
};
})), D = b(() => Math.max(...X.value.filter((a) => !F.value.includes(a.id)).map((a) => a.series.length)));
function Ka(a) {
Ke.value = a;
}
const h = d({
start: 0,
end: Math.max(...je.value.map((a) => a.series.length))
}), R = d({ start: 0, end: Math.max(...je.value.map((a) => a.series.length)) }), Nt = b(() => e.value.style.chart.zoom.preview.enable && (R.value.start !== h.value.start || R.value.end !== h.value.end));
function Pt(a, l) {
R.value[a] = l;
}
function Ne() {
const a = D.value;
let l = Math.max(0, Math.min(h.value.start ?? 0, a - 1)), t = Math.max(l + 1, Math.min(h.value.end ?? a, a));
(!Number.isFinite(l) || !Number.isFinite(t) || t <= l) && (l = 0, t = a), h.value.start = l, h.value.end = t, R.value.start = l, R.value.end = t, fe.value && (fe.value.setStartValue(l), fe.value.setEndValue(t));
}
const ke = d(null);
function ja() {
return new Promise((a) => requestAnimationFrame(
() => requestAnimationFrame(() => a())
));
}
gt(() => {
ke.value && cancelAnimationFrame(ke.value);
});
async function Ot() {
Be(), await El(), ke.value && cancelAnimationFrame(ke.value), ke.value = requestAnimationFrame(async () => {
await ja(), Be();
});
}
const p = b(() => {
let a;
return e.value.orientation === "vertical" ? a = u.value.width / (h.value.end - h.value.start) : a = u.value.height / (h.value.end - h.value.start), a <= 0 ? 0 : a;
}), Ce = b(() => Te(X.value.filter((a) => !F.value.includes(a.id))).slice(h.value.start, h.value.end)), se = b(() => e.value.style.chart.zoom.minimap.show ? Te(X.value.map((a) => ({
...a,
series: a.series.map((l) => l ?? 0)
})).filter((a) => !F.value.includes(a.id))) : []), el = b(() => e.value.style.chart.zoom.minimap.show ? [{
name: "",
series: se.value,
color: "#000000",
isVisible: !0
}] : []), tl = b(() => Te(X.value.filter((a) => !F.value.includes(a.id)).map((a) => ({
...a,
series: a.series.map((l, t) => a.signedSeries[t] === -1 && l >= 0 ? -l : l)
}))).slice(h.value.start, h.value.end)), Pe = b(() => {
const a = X.value.filter((l) => !F.value.includes(l.id));
return {
positive: Te(a.map((l) => ({
...l,
series: l.series.slice(h.value.start, h.value.end).map((t) => t >= 0 ? t : 0)
}))),
negative: Te(a.map((l) => ({
...l,
series: l.series.slice(h.value.start, h.value.end).map((t) => t < 0 ? t : 0)
})))
};
}), Y = b(() => {
const a = e.value.style.chart.grid.scale.scaleMax !== null && !e.value.style.chart.bars.distributed ? e.value.style.chart.grid.scale.scaleMax : Math.max(...Pe.value.positive), l = Math.min(...Pe.value.negative), t = e.value.style.chart.grid.scale.scaleMin !== null && !e.value.style.chart.bars.distributed ? e.value.style.chart.grid.scale.scaleMin : [-1 / 0, 1 / 0, NaN, void 0, null].includes(l) ? 0 : l, o = !e.value.style.chart.bars.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? ba(t > 0 ? 0 : t, a < 0 ? 0 : a, e.value.style.chart.grid.scale.ticks) : ya(t > 0 ? 0 : t, a < 0 ? 0 : a, e.value.style.chart.grid.scale.ticks);
return o.ticks.map((c) => ({
zero: u.value.bottom - u.value.height * (Math.abs(o.min) / (o.max + Math.abs(o.min))),
y: u.value.bottom - u.value.height * ((c + Math.abs(o.min)) / (o.max + Math.abs(o.min))),
x: u.value.left - 8,
horizontal_zero: u.value.left + u.value.width * (Math.abs(o.min) / (o.max + Math.abs(o.min))),
horizontal_x: u.value.left + u.value.width * ((c + Math.abs(o.min)) / (o.max + Math.abs(o.min))),
horizontal_y: u.value.bottom - 8,
value: c
}));
}), O = b(() => pa({
values: e.value.style.chart.grid.x.timeLabels.values,
maxDatapoints: D.value,
formatter: e.value.style.chart.grid.x.timeLabels.datetimeFormatter,
start: h.value.start,
end: h.value.end
})), we = b(() => pa({
values: e.value.style.chart.grid.x.timeLabels.values,
maxDatapoints: D.value,
formatter: e.value.style.chart.grid.x.timeLabels.datetimeFormatter,
start: 0,
end: D.value
})), al = b(() => {
const a = e.value.style.chart.grid.x.timeLabels.modulo;
return O.value.length ? Math.min(a, [...new Set(O.value.map((l) => l.text))].length) : a;
}), Et = b(() => {
const a = e.value.style.chart.grid.x.timeLabels, l = O.value || [], t = we.value || [], o = h.value.start ?? 0, c = G.value, r = D.value, f = l.map((M) => M?.text ?? ""), A = t.map((M) => M?.text ?? "");
return Wl(
!!a.showOnlyFirstAndLast,
!!a.showOnlyAtModulo,
Math.max(1, al.value || 1),
f,
A,
o,
c,
r
);
}), Rt = b(() => {
const a = e.value.style.chart.grid.x.timeLabels.datetimeFormatter, l = oo({
useUTC: a.useUTC,
locale: ro[a.locale] || { months: [], shortMonths: [], days: [], shortDays: [] },
januaryAsYear: a.januaryAsYear
});
return (t, o) => {
const r = e.value.style.chart.grid.x.timeLabels.values?.[t];
return r == null ? "" : (l.formatDate(new Date(r), o), l.formatDate(new Date(r), o));
};
}), It = b(() => (e.value.style.chart.grid.x.timeLabels.values || []).map((l, t) => ({
text: Rt.value(t, e.value.style.chart.zoom.timeFormat),
absoluteIndex: t
}))), rt = b(() => (e.value.style.chart.grid.x.timeLabels.values || []).map((l, t) => ({
text: Rt.value(t, e.value.style.chart.tooltip.timeFormat),
absoluteIndex: t
}))), S = b(() => {
if (!ye.value && !xe.value) return [];
let a = Array(D.value).fill(0), l = Array(D.value).fill(0), t = Array(D.value).fill(0), o = Array(D.value).fill(0);
const c = Math.max(...Pe.value.positive) || 0, r = Math.min(...Pe.value.negative), f = [-1 / 0, 1 / 0, NaN, void 0, null].includes(r) ? 0 : r, A = !e.value.style.chart.bars.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? ba(e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : f > 0 ? 0 : f, e.value.style.chart.grid.scale.scaleMax !== null ? e.value.style.chart.grid.scale.scaleMax : c < 0 ? 0 : c, e.value.style.chart.grid.scale.ticks) : ya(e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : f > 0 ? 0 : f, e.value.style.chart.grid.scale.scaleMax !== null ? e.value.style.chart.grid.scale.scaleMax : c < 0 ? 0 : c, e.value.style.chart.grid.scale.ticks), { min: M, max: N } = A, $ = N + (M >= 0 ? 0 : Math.abs(M)) || 1, E = u.value.height, I = u.value.width, Se = Y.value[0] ? Y.value[0].zero : u.value.bottom, W = Y.value[0] ? Y.value[0].horizontal_zero : u.value.left;
let la = Array(se.value.length).fill(0), oa = Array(se.value.length).fill(0);
return X.value.filter((he) => !F.value.includes(he.id)).map((he) => {
const K = he.series.slice(), ra = K.map((v, g) => la[g]), Cl = K.map((v, g) => oa[g]);
K.forEach((v, g) => {
(Number(v) || 0) >= 0 ? la[g] += Number(v) || 0 : oa[g] += Math.abs(Number(v) || 0);
});
const Z = he.series.slice(h.value.start, h.value.end), wl = he.signedSeries.slice(h.value.start, h.value.end), Ll = Z.map((v, g) => u.value.left + p.value * g + p.value * e.value.style.chart.bars.gapRatio / 4), Ue = (se.value || []).filter(Number.isFinite), ht = Ue.length ? Math.max(...Ue) : 0, vt = Ue.length ? Math.min(...Ue) : 0;
function sa({ minimapH: v }) {
const z = ht > 0, P = vt < 0;
if (z && P) {
const q = Math.max(ht, Math.abs(vt)) || 1e-9;
return {
pxPerUnit: v / 2 / q,
zero: v / 2
};
}
if (z) {
const q = Math.max(1e-9, ht);
return {
pxPerUnit: v / q,
zero: v
};
}
const _ = Math.max(1e-9, Math.abs(vt));
return {
pxPerUnit: v / _,
zero: 0
};
}
const Al = ({ left: v, unitW: g }) => {
const z = g * (e.value.style.chart.bars.gapRatio / 4);
return K.map((P, _) => v + g * _ + z);
}, Sl = Z.map((v, g) => u.value.top + p.value * g + p.value * e.value.style.chart.bars.gapRatio / 4), zl = Z.map((v, g) => {
const z = e.value.style.chart.bars.distributed ? (v || 0) / Ce.value[g] : (v || 0) / $;
let P, _;
return v > 0 ? (_ = E * z, P = Se - _ - a[g], a[g] += _) : (_ = E * z, P = Se + t[g], t[g] += Math.abs(_)), P;
}), _l = ({ minimapH: v }) => {
if (e.value.style.chart.bars.distributed)
return K.map((_, q) => {
const dt = Math.abs(Number(_) || 0), na = Math.abs(se.value?.[q] || 0) || 1e-9, Nl = (ra[q] + dt) / na;
return v - Nl * v;
});
const { pxPerUnit: g, zero: z } = sa({ minimapH: v });
return K.map((P, _) => {
const q = Number(P) || 0;
return q >= 0 ? z - (ra[_] + q) * g : z + Cl[_] * g;
});
}, Ml = Z.map((v, g) => {
const z = e.value.style.chart.bars.distributed ? (v || 0) / Ce.value[g] : (v || 0) / $;
let P, _;
return v > 0 ? (_ = I * z, P = W + l[g], l[g] += _) : (_ = I * z, P = W - Math.abs(_) - o[g], o[g] += Math.abs(_)), P;
}), Tl = Z.map((v, g) => {
const z = e.value.style.chart.bars.distributed ? (v || 0) / Ce.value[g] : (v || 0) / $;
return v > 0 ? E * z : E * Math.abs(z);
}), $l = ({ minimapH: v }) => {
if (e.value.style.chart.bars.distributed)
return K.map((P, _) => {
const q = Math.abs(Number(P) || 0), dt = Math.abs(se.value?.[_] || 0) || 1e-9;
return q / dt * v;
});
const { pxPerUnit: g } = sa({ minimapH: v });
return K.map((z) => Math.abs(Number(z) || 0) * g);
}, Fl = Z.map((v, g) => {
const z = e.value.style.chart.bars.distributed ? (v || 0) / Ce.value[g] : (v || 0) / $;
return v > 0 ? I * z : I * Math.abs(z);
}), Dl = Z.map((v) => Math.abs(v)).reduce((v, g) => v + g, 0);
return {
...he,
proportions: Z.map((v, g) => e.value.style.chart.bars.distributed ? (v || 0) / Ce.value[g] : (v || 0) / Dl),
series: Z,
signedSeries: wl,
x: Ll,
y: zl,
height: Tl,
horizontal_width: Fl,
horizontal_y: Sl,
horizontal_x: Ml,
xMinimap: Al,
yMinimap: _l,
heightMinimap: $l
};
});
}), Bt = b(() => tl.value.map((a, l) => ({
value: a,
sign: a >= 0 ? 1 : -1
})));
function Oe(a, l, t, o, c) {
const r = c === -1 && a >= 0 ? -a : a;
return ge(
e.value.style.chart.bars.dataLabels.formatter,
r,
ae({
p: e.value.style.chart.bars.dataLabels.prefix,
v: r,
s: e.value.style.chart.bars.dataLabels.suffix,
r: e.value.style.chart.bars.dataLabels.rounding
}),
{ datapoint: l, seriesIndex: t, datapointIndex: o }
);
}
function Vt(a, l, t, o) {
return ge(
e.value.style.chart.bars.dataLabels.formatter,
a,
ae({
v: isNaN(a) ? 0 : a,
s: "%",
r: e.value.style.chart.bars.dataLabels.rounding
}),
{ datapoint: l, seriesIndex: t, datapointIndex: o }
);
}
function Ut(a) {
const l = JSON.parse(JSON.stringify(S.value)).map((t) => ({
name: t.name,
value: t.series[a] === 0 ? 0 : t.series[a] || null,
proportion: t.proportions[a] || null,
color: t.color,
id: t.id
}));
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: a + h.value.start }), be("selectDatapoint", { datapoint: l, period: O.value[a] });
}
function st(a) {
return JSON.parse(JSON.stringify(S.value)).map((l) => ({
name: l.name,
absoluteIndex: l.absoluteIndex,
value: l.series[a] === 0 ? 0 : (l.signedSeries[a] === -1 && l.series[a] >= 0 ? -l.series[a] : l.series[a]) || null,
proportion: l.proportions[a] || null,
color: l.color,
id: l.id,
timeLabel: we.value[a]
}));
}
function Ht(a) {
if (e.value.events.datapointLeave) {
const l = st(a);
e.value.events.datapointLeave({ datapoint: l, seriesIndex: a + h.value.start });
}
Ye.value = null, G.value = null;
}
const ll = b(() => Array(D.value).fill(0).map((a, l) => st(l)));
ze(() => k.selectedXIndex, (a) => {
if ([null, void 0].includes(k.selectedXIndex)) {
G.value = null;
return;
}
const l = a - h.value.start;
l < 0 || a >= h.value.end ? G.value = null : G.value = l ?? null;
}, { immediate: !0 });
function Xt(a) {
G.value = a, Ye.value = !0;
const l = e.value.style.chart.tooltip.customFormat, t = st(a);
pl({ seriesIndex: a, datapoint: t }), e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a + h.value.start }), We.value = {
datapoint: t,
seriesIndex: a,
config: e.value,
series: S.value
};
const o = t.map((r) => Math.abs(r.value)).reduce((r, f) => r + f, 0), c = t.map((r) => ie(r.value)).reduce((r, f) => r + f, 0);
if (ma(l) && jl(() => l({
seriesIndex: a,
datapoint: t,
series: S.value,
config: e.value
})))
qe.value = l({
seriesIndex: a,
datapoint: t,
series: S.value,
config: e.value
});
else {
const {
showValue: r,
showTotal: f,
totalTranslation: A,
showPercentage: M,
borderColor: N,
roundingValue: $,
roundingPercentage: E
} = e.value.style.chart.tooltip;
let I = "";
(O.value[a] && O.value[a].text || rt.value[a] && rt.value[a].text && e.value.style.chart.tooltip.showTimeLabel) && (I += `<div style="width:100%;text-align:center;border-bottom:1px solid ${N};padding-bottom:6px;margin-bottom:3px;">${e.value.style.chart.tooltip.useDefaultTimeFormat ? O.value[a]?.text : rt.value[a]?.text || we.value[a]?.text || ""}</div>`), f && (I += `<div class="vue-data-ui-tooltip-total" style="display:flex;flex-direction:row;align-items:center;gap:4px">
<span>${A}:</span>
<span>
${ge(
e.value.style.chart.bars.dataLabels.formatter,
c,
ae({
p: e.value.style.chart.bars.dataLabels.prefix,
v: c,
s: e.value.style.chart.bars.dataLabels.suffix,
r: $
}),
{ datapoint: { name: A, value: c } }
)}
</span>
</div>`);
const Se = [
r && M ? "(" : "",
r && M ? ")" : ""
];
t.reverse().forEach((W) => {
I += `
<div style="display:flex;flex-direction:row;align-items:center;gap:4px">
<svg viewBox="0 0 60 60" height="14" width="14"><rect rx="5" x="0" y="0" height="60" width="60" stroke="none" fill="${e.value.style.chart.bars.gradient.show ? `url(#gradient_${W.id})` : W.color}"/>${Ba.pattern ? `<rect rx="5" x="0" y="0" height="60" width="60" stroke="none" fill="url(#pattern_${V.value}_${W.absoluteIndex})"/>` : ""}</svg>
${W.name}${r || M ? ":" : ""} ${r ? ge(
e.value.style.chart.bars.dataLabels.formatter,
W.value,
ae({
p: e.value.style.chart.bars.dataLabels.prefix,
v: W.value,
s: e.value.style.chart.bars.dataLabels.suffix,
r: $
})
) : ""} ${Se[0]}${M ? ae({
v: isNaN(W.value / o) ? 0 : Math.abs(W.value) / o * 100,
// Negs are absed to show relative proportion to absolute total. It's opinionated.
s: "%",
r: E
}) : ""}${Se[1]}
</div>
`;
}), qe.value = `<div>${I}</div>`;
}
}
const ol = b(() => ue.value.width), rl = b(() => ue.value.height);
co({
timeLabelsEls: e.value.orientation === "vertical" ? re : oe,
timeLabels: O,
slicer: h,
configRef: e,
rotationPath: ["style", "chart", "grid", "x", "timeLabels", "rotation"],
autoRotatePath: ["style", "chart", "grid", "x", "timeLabels", "autoRotate", "enable"],
isAutoSize: !1,
width: ol,
height: rl,
rotation: e.value.style.chart.grid.x.timeLabels.autoRotate.angle
});
function Yt(a) {
me.value = a, mt.value += 1;
}
function Wt() {
T.value.showTable = !T.value.showTable;
}
function qt() {
T.value.dataLabels.show = !T.value.dataLabels.show;
}
function Gt() {
T.value.showTooltip = !T.value.showTooltip;
}
function sl() {
return S.value;
}
const Jt = b(() => {
if (S.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
const a = S.value.map(({ name: t, color: o }) => ({
label: t,
color: o
})), l = [];
return O.value.forEach((t) => {
const o = [e.value.style.chart.grid.x.timeLabels.values[t.absoluteIndex] ? t.text : i + 1];
X.value.forEach((c) => {
o.push(Number((c.series[t.absoluteIndex] || 0).toFixed(e.value.table.td.roundingValue)));
}), l.push(o);
}), { head: a, body: l };
});
function nt(a = null) {
const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], t = ["", ...Jt.value.head.map((f) => f.label)], o = Jt.value.body, c = l.concat([t]).concat(o), r = Ql(c);
a ? a(r) : Kl({ csvContent: r, title: e.value.style.chart.title.text || "vue-ui-stackbar" });
}
const Ee = b(() => {
const a = [""].concat(S.value.map((c) => c.name)).concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>');
let l = [];
for (let c = 0; c < D.value; c += 1) {
const r = S.value.map((f) => f.series[c] ?? 0).reduce((f, A) => f + A, 0);
l.push([e.value.style.chart.grid.x.timeLabels.values.slice(h.value.start, h.value.end)[c] ? O.value[c].text : c + 1].concat(S.value.map((f) => (f.series[c] ?? 0).toFixed(e.value.table.td.roundingValue))).concat((r ?? 0).toFixed(e.value.table.td.roundingValue)));
}
const t = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
}, o = [e.value.table.columnNames.period].concat(S.value.map((c) => c.name)).concat(e.value.table.columnNames.total);
return { head: a, body: l.slice(0, h.value.end - h.value.start), config: t, colNames: o };
});
function it(a) {
if (F.value.includes(a.id))
F.value = F.value.filter((l) => l !== a.id);
else {
if (F.value.length === X.value.length - 1) return;
F.value.push(a.id);
}
be("selectLegend", S.value);
}
function Zt(a) {
if (!X.value.length)
return e.value.debug && console.warn("VueUiStackbar - There are no series to show."), null;
const l = X.value.find((t) => t.name === a);
return l || (e.value.debug && console.warn(`VueUiStackbar - Series name not found "${a}"`), null);
}
function nl(a) {
const l = Zt(a);
l !== null && F.value.includes(l.id) && it({ id: l.id });
}
function il(a) {
const l = Zt(a);
l !== null && (F.value.includes(l.id) || it({ id: l.id }));
}
const ut = b(() => X.value.map((a, l) => ({
...a,
shape: "square"
})).map((a) => ({
...a,
opacity: F.value.includes(a.id) ? 0.5 : 1,
segregate: () => it(a),
isSegregated: F.value.includes(a.id)
}))), ul = b(() => ({
cy: "stackbar-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
})), Re = d(!1);
function ct() {
Re.value = !Re.value;
}
function Ie(a, l) {
const t = JSON.parse(JSON.stringify(S.value)).map((o) => ({
name: o.name,
value: o.series[l] === 0 ? 0 : (o.signedSeries[l] === -1 && o.series[l] >= 0 ? -o.series[l] : o.series[l]) || null,
proportion: o.proportions[l] || null,
color: o.color,
id: o.id
}));
be("selectTimeLabel", {
datapoint: t,
absoluteIndex: a.absoluteIndex,
label: a.text
});
}
const cl = b(() => Math.max(...S.value.flatMap((a) => a.series)));
function Qt(a, l) {
return e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? zt.value ? l * 100 >= e.value.style.chart.bars.dataLabels.hideUnderPercentage : e.value.style.chart.bars.dataLabels.hideEmptyPercentages ? l > 0 : !0 : zt.value ? (St.value && lt.value && console.warn("Vue Data UI - VueUiStackbar - You cannot set both dataLabels.hideUnderPercentage and dataLabels.hideUnderValue. Note that dataLabels.hideUnderPercentage takes precedence in this case."), a > cl.value * e.value.style.chart.bars.dataLabels.hideUnderPercentage / 100) : St.value ? Math.abs(a) >= e.value.style.chart.bars.dataLabels.hideUnderValue : e.value.style.chart.bars.dataLabels.hideEmptyValues ? a !== 0 : !0;
}
async function hl({ scale: a = 2 } = {}) {
if (!J.value) return;
const { width: l, height: t } = J.value.getBoundingClientRect(), o = l / t, { imageUri: c, base64: r } = await ho({ domElement: J.value, base64: !0, img: !0, scale: a });
return {
imageUri: c,
base64: r,
title: e.value.style.chart.title.text,
width: l,
height: t,
aspectRatio: o
};
}
const Le = b(() => {
const a = e.value.table.useDialog && !e.value.table.show, l = T.value.showTable;
return {
component: a ? Oa : $a,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: a ? {
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: me.value,
fullscreenParent: J.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
}
}
}
};
});
ze(() => T.value.showTable, (a) => {
e.value.table.show || (a && e.value.table.useDialog && pe.value ? pe.value.open() : "close" in pe.value && pe.value.close());
});
function Kt() {
T.value.showTable = !1, Ge.value && Ge.value.setTableIconState(!1);
}
const vl = b(() => e.value.style.chart.backgroundColor), dl = b(() => e.value.style.chart.legend), gl = b(() => e.value.style.chart.title), { exportSvg: bl, getSvg: yl } = so({
svg: tt,
title: gl,
legend: dl,
legendItems: ut,
backgroundColor: vl
});
async function jt({ isCb: a }) {
if (a) {
const { blob: l, url: t, text: o, dataUrl: c } = await yl();
e.value.userOptions.callbacks.svg({ blob: l, url: t, text: o, dataUrl: c });
} else
bl();
}
function ea(a) {
const l = D.value;
return a > l ? l : a < 0 || a < h.value.start ? e.value.style.chart.zoom.startIndex !== null ? h.value.start + 1 : 1 : a;
}
const Ae = d(!1), ta = d(!1);
function Be() {
if (!Ae.value) {
Ae.value = !0;
try {
const { startIndex: a, endIndex: l } = e.value.style.chart.zoom, t = D.value, o = a ?? 0, c = l != null ? Math.min(ea(l + 1), t) : t;
Ve.value = !0, h.value.start = o, h.value.end = c, R.value.start = o, R.value.end = c, Ne(), ta.value = !0;
} finally {
queueMicrotask(() => {
Ve.value = !1;
}), Ae.value = !1;
}
}
}
const Ve = d(!1);
function fl(a) {
Ae.value || Ve.value || a !== h.value.start && (h.value.start = a, R.value.start = a, Ne());
}
function ml(a) {
if (Ae.value || Ve.value) return;
const l = ea(a);
l !== h.value.end && (h.value.end = l, R.value.end = l, Ne());
}
function pl({ seriesIndex: a, datapoint: l }) {
const t = h.value.start + a;
be("selectX", {
dataset: l,
index: t,
indexLabel: e.value.style.chart.grid.x.timeLabels.values[t]
});
}
function aa() {
return { y0: Y.value?.[0]?.zero ?? u.value.bottom };
}
function xl(a) {
const { y0: l } = aa(), t = e.value.style.chart.bars.totalValues, o = Math.max(2, t.fontSize * 0.3 + t.offsetY);
let c = 1 / 0, r = !1;
for (const N of S.value || []) {
const $ = N?.series?.[a] ?? 0, E = N?.height?.[a] ?? 0, I = N?.y?.[a];
$ > 0 && E > 0 && Number.isFinite(I) && (r = !0, I < c && (c = I));
}
const A = (r && Number.isFinite(c) ? c : l) - o;
return Math.min(
Math.max(A, 0),
u.value.bottom
);
}
function kl(a) {
const { x0: l } = aa(), t = Math.max(2, e.value.style.chart.bars.totalValues.fontSize * 0.3 + e.value.style.chart.bars.totalValues.offsetX);
let o = -1 / 0, c = !1;
for (const f of S.value || []) {
const A = f?.series?.[a] ?? 0, M = f?.horizontal_x?.[a], N = f?.horizontal_width?.[a], $ = Number.isFinite(N) ? Math.max(0, N) : 0;
Number.isFinite(M) && A > 0 && $ > 0 && (c = !0, o = Math.max(o, M + $));
}
return (c && Number.isFinite(o) ? o : l) + t;
}
return za({
getData: sl,
getImage: hl,
generatePdf: Tt,
generateCsv: nt,
generateImage: $t,
generateSvg: jt,
hideSeries: il,
showSeries: nl,
toggleTable: Wt,
toggleLabels: qt,
toggleTooltip: Gt,
toggleAnnotator: ct,
toggleFullscreen: Yt
}), (a, l) => (s(), n("div", {
id: `stackbar_${V.value}`,
ref_key: "stackbarChart",
ref: J,
class: ve({ "vue-data-ui-component": !0, "vue-ui-stackbar": !0, "vue-data-ui-wrapper-fullscreen": me.value }),
style: ne(`background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: Xa,
onMouseleave: Ya
}, [
e.value.userOptions.buttons.annotator ? (s(), ee(m(Da), {
key: 0,
svgRef: m(tt),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: Re.value,
onClose: ct
}, {
"annotator-action-close": L(() => [
C(a.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": L(({ color: t }) => [
C(a.$slots, "annotator-action-color", U(H({ color: t })), void 0, !0)
]),
"annotator-action-draw": L(({ mode: t }) => [
C(a.$slots, "annotator-action-draw", U(H({ mode: t })), void 0, !0)
]),
"annotator-action-undo": L(({ disabled: t }) => [
C(a.$slots, "annotator-action-undo", U(H({ disabled: t })), void 0, !0)
]),
"annotator-action-redo": L(({ disabled: t }) => [
C(a.$slots, "annotator-action-redo", U(H({ disabled: t })), void 0, !0)
]),
"annotator-action-delete": L(({ disabled: t }) => [
C(a.$slots, "annotator-action-delete", U(H({ disabled: t })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
C(a.$slots, "userConfig", {}, void 0, !0),
e.value.style.chart.title.text ? (s(), n("div", {
key: 1,
ref_key: "chartTitle",
ref: pt,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(s(), ee(vo, {
key: `title_${Ct.value}`,
config: {
title: {
cy: "stackbar-title",
...e.value.style.chart.title
},
subtitle: {
cy: "stackbar-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : y("", !0),
te("div", {
id: `legend-top-${V.value}`
}, null, 8, po),
e.value.userOptions.show && ye.value && (m(At) || m(et)) ? (s(), ee(m(Na), {
ref_key: "userOptionsRef",
ref: Ge,
key: `user_option_${mt.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: m(_t),
isImaging: m(Mt),
uid: V.value,
hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasLabel: e.value.userOptions.buttons.labels,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: me.value,
chartElement: J.value,
position: e.value.userOptions.position,
isTooltip: T.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: Re.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: Yt,
onGeneratePdf: m(Tt),
onGenerateCsv: nt,
onGenerateImage: m($t),
onGenerateSvg: jt,
onToggleTable: Wt,
onToggleLabels: qt,
onToggleTooltip: Gt,
onToggleAnnotator: ct,
style: ne({
visibility: m(At) ? m(et) ? "visible" : "hidden" : "visible"
})
}, bt({ _: 2 }, [
a.$slots.menuIcon ? {
name: "menuIcon",
fn: L(({ isOpen: t, color: o }) => [
C(a.$slots, "menuIcon", U(H({ isOpen: t, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
a.$slots.optionTooltip ? {
name: "optionTooltip",
fn: L(() => [
C(a.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
a.$slots.optionPdf ? {
name: "optionPdf",
fn: L(() => [
C(a.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
a.$slots.optionCsv ? {
name: "optionCsv",
fn: L(() => [
C(a.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
a.$slots.optionImg ? {
name: "optionImg",
fn: L(() => [
C(a.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
a.$slots.optionSvg ? {
name: "optionSvg",
fn: L(() => [
C(a.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
a.$slots.optionTable ? {
name: "optionTable",
fn: L(() => [
C(a.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
a.$slots.optionLabels ? {
name: "optionLabels",
fn: L(() => [
C(a.$slots, "optionLabels", {}, void 0, !0)
]),
key: "7"
} : void 0,
a.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: L(({ toggleFullscreen: t, isFullscreen: o }) => [
C(a.$slots, "optionFullscreen", U(H({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
]),
key: "8"
} : void 0,
a.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: L(({ toggleAnnotator: t, isAnnotator: o }) => [
C(a.$slots, "optionAnnotator", U(H({ toggleAnnotator: t, isAnnotator: o })), void 0, !0)
]),
key: "9"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
(s(), n("svg", {
ref_key: "svgRef",
ref: tt,
xmlns: m(ql),
viewBox: `0 0 ${u.value.chartWidth <= 0 ? 10 : u.value.chartWidth} ${u.value.chartHeight <= 0 ? 10 : u.value.chartHeight}`,
class: ve({ "vue-data-ui-loading": m(xe) }),
style: ne(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
_e(m(Pa)),
a.$slots["chart-background"] ? (s(), n("foreignObject", {
key: 0,
x: u.value.left,
y: u.value.top,
width: u.value.width <= 0 ? 10 : u.value.width,
height: u.value.height <= 0 ? 10 : u.value.height,
style: {
pointerEvents: "none"
}
}, [
C(a.$slots, "chart-background", {}, void 0, !0)
], 8, ko)) : y("", !0),
e.value.style.chart.bars.gradient.show ? (s(), n("defs", Co, [
(s(!0), n(x, null, w(S.value, (t, o) => (s(), n("linearGradient", {
id: `gradient_${t.id}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
te("stop", {
offset: "0%",
"stop-color": t.color
}, null, 8, Lo),
te("stop", {
offset: "61.8%",
"stop-color": m(Gl)(t.color, e.value.style.chart.bars.gradient.intensity / 100)
}, null, 8, Ao),
te("stop", {
offset: "100%",
"stop-color": t.color
}, null, 8, So)
], 8, wo))), 256))
])) : y("", !0),
e.value.style.chart.grid.frame.show ? (s(), n("rect", {
key: 2,
style: { pointerEvents: "none", transition: "none", animation: "none !important" },
x: Math.max(0, u.value.left),
y: Math.max(0, u.value.top),
width: Math.max(0, u.value.width),
height: Math.max(0, u.value.height),
fill: "transparent",
stroke: e.value.style.chart.grid.frame.stroke,
"stroke-width": e.value.style.chart.grid.frame.strokeWidth,
"stroke-linecap": e.value.style.chart.grid.frame.strokeLinecap,
"stroke-linejoin": e.value.style.chart.grid.frame.strokeLinejoin,
"stroke-dasharray": e.value.style.chart.grid.frame.strokeDasharray
}, null, 8, zo)) : y("", !0),
e.value.style.chart.grid.x.showHorizontalLines && e.value.orientation === "vertical" ? (s(!0), n(x, { key: 3 }, w(Y.value, (t, o) => (s(), n("line", {
x1: u.value.left,
x2: u.value.right,
y1: t.y,
y2: t.y,
stroke: e.value.style.chart.grid.x.linesColor,
"stroke-width": e.value.style.chart.grid.x.linesThickness,
"stroke-dasharray": e.value.style.chart.grid.x.linesStrokeDasharray,
"stroke-linecap": "round"
}, null, 8, _o))), 256)) : y("", !0),
e.value.style.chart.grid.x.showHorizontalLines && e.value.orientation === "horizontal" ? (s(!0), n(x, { key: 4 }, w(h.value.end - h.value.start + 1, (t, o) => (s(), n("line", {
x1: u.value.left,
x2: u.value.right,
y1: u.value.top + p.value * o,
y2: u.value.top + p.value * o,
stroke: e.value.style.chart.grid.x.linesColor,
"stroke-width": e.value.style.chart.grid.x.linesThickness,
"stroke-dasharray": e.value.style.chart.grid.x.linesStrokeDasharray,
"stroke-linecap": "round"
}, null, 8, Mo))), 256)) : y("", !0),
e.value.style.chart.grid.y.showVerticalLines && e.value.orientation === "vertical" ? (s(!0), n(x, { key: 5 }, w(h.value.end - h.value.start + 1, (t, o) => (s(), n("line", {
x1: u.value.left + p.value * o,
x2: u.value.left + p.value * o,
y1: u.value.top,
y2: u.value.bottom,
stroke: e.value.style.chart.grid.y.linesColor,
"stroke-width": e.value.style.chart.grid.y.linesThickness,
"stroke-dasharray": e.value.style.chart.grid.y.linesStrokeDasharray,
"stroke-linecap": "round"
}, null, 8, To))), 256)) : y("", !0),
e.value.style.chart.grid.y.showVerticalLines && e.value.orientation === "horizontal" ? (s(!0), n(x, { key: 6 }, w(Y.value, (t, o) => (s(), n("line", {
x1: t.horizontal_x,
x2: t.horizontal_x,
y1: u.value.top,
y2: u.value.bottom,
stroke: e.value.style.chart.grid.y.linesColor,
"stroke-width": e.value.style.chart.grid.y.linesThickness,
"stroke-dasharray": e.value.style.chart.grid.y.linesStrokeDasharray,
"stroke-linecap": "round"
}, null, 8, $o))), 256)) : y("", !0),
(s(!0), n(x, null, w(S.value, (t, o) => (s(), n("g", null, [
a.$slots.pattern ? (s(), n("defs", Fo, [
C(a.$slots, "pattern", Me({ ref_for: !0 }, { seriesIndex: t.absoluteIndex, patternId: `pattern_${V.value}_${t.absoluteIndex}` }), void 0, !0)
])) : y("", !0),
e.value.orientation === "vertical" ? (s(), n(x, { key: 1 }, [
(s(!0), n(x, null, w(t.x, (c, r) => (s(), n("rect", {
x: c,
y: m(ie)(t.y[r]),
height: t.height[r] < 0 ? 1e-4 : t.height[r] || 0,
rx: e.value.style.chart.bars.borderRadius > t.height[r] / 2 ? (t.height[r] < 0 ? 0 : t.height[r]) / 2 : e.value.style.chart.bars.borderRadius,
width: p.value * (1 - e.value.style.chart.bars.gapRatio / 2),
fill: e.value.style.chart.bars.gradient.show ? `url(#gradient_${t.id})` : t.color,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.bars.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: ve({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": le.value })
}, null, 10, Do))), 256)),
a.$slots.pattern ? (s(), n("g", No, [
(s(!0), n(x, null, w(t.x, (c, r) => (s(), n("rect", {
x: c,
y: m(ie)(t.y[r]),
height: t.height[r] < 0 ? 1e-4 : t.height[r] || 0,
rx: e.value.style.chart.bars.borderRadius > t.height[r] / 2 ? (t.height[r] < 0 ? 0 : t.height[r]) / 2 : e.value.style.chart.bars.borderRadius,
width: p.value * (1 - e.value.style.chart.bars.gapRatio / 2),
fill: `url(#pattern_${V.value}_${t.absoluteIndex})`,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.bars.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: ve({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": le.value })
}, null, 10, Po))), 256))
])) : y("", !0)
], 64)) : (s(), n(x, { key: 2 }, [
(s(!0), n(x, null, w(t.horizontal_x, (c, r) => (s(), n("rect", {
x: m(ie)(c, u.value.left),
y: t.horizontal_y[r] < 0 ? 0 : t.horizontal_y[r],
width: m(ie)(t.horizontal_width[r] < 0 ? 1e-4 : t.horizontal_width[r]),
rx: e.value.style.chart.bars.borderRadius > t.height[r] / 2 ? (t.height[r] < 0 ? 0 : t.height[r]) / 2 : e.value.style.chart.bars.borderRadius,
height: p.value * (1 - e.value.style.chart.bars.gapRatio / 2),
fill: e.value.style.chart.bars.gradient.show ? `url(#gradient_${t.id})` : t.color,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.bars.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: ve({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": le.value })
}, null, 10, Oo))), 256)),
a.$slots.pattern ? (s(), n("g", Eo, [
(s(!0), n(x, null, w(t.horizontal_x, (c, r) => (s(), n("rect", {
x: m(ie)(c, u.value.left),
y: t.horizontal_y[r] < 0 ? 0 : t.horizontal_y[r],
width: m(ie)(t.horizontal_width[r] < 0 ? 1e-4 : t.horizontal_width[r]),
rx: e.value.style.chart.bars.borderRadius > t.height[r] / 2 ? (t.height[r] < 0 ? 0 : t.height[r]) / 2 : e.value.style.chart.bars.borderRadius,
height: p.value * (1 - e.value.style.chart.bars.gapRatio / 2),
fill: `url(#pattern_${V.value}_${t.absoluteIndex})`,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.bars.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: ve({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": le.value })
}, null, 10, Ro))), 256))
])) : y("", !0)
], 64))
]))), 256)),
e.value.style.chart.grid.x.showAxis ? (s(), n("line", {
key: 7,
x1: u.value.left,
x2: u.value.right,
y1: u.value.bottom,
y2: u.value.bottom,
stroke: e.value.style.chart.grid.x.axisColor,
"stroke-width": e.value.style.chart.grid.x.axisThickness,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Io)) : y("", !0),
e.value.style.chart.grid.y.showAxis && !e.value.style.chart.bars.distributed ? (s(), n("line", {
key: 8,
x1: u.value.left,
x2: u.value.left,
y1: u.value.top,
y2: u.value.bottom,
stroke: e.value.style.chart.grid.y.axisColor,
"stroke-width": e.value.style.chart.grid.y.axisThickness,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 8, Bo)) : y("", !0),
e.value.style.chart.grid.x.axisName.show && e.value.style.chart.grid.x.axisName.text ? (s(), n("text", {
key: 9,
ref_key: "xAxisLabel",
ref: Je,
x: u.value.left + u.value.width / 2,
y: u.value.chartHeight - 3,
"font-size": e.value.style.chart.grid.x.axisName.fontSize,
fill: e.value.style.chart.grid.x.axisName.color,
"font-weight": e.value.style.chart.grid.x.axisName.bold ? "bold" : "normal",
"text-anchor": "middle"
}, B(e.value.style.chart.grid.x.axisName.text), 9, Vo)) : y("", !0),
e.value.style.chart.grid.y.axisName.show && e.value.style.chart.grid.y.axisName.text ? (s(), n("text", {
key: 10,
ref_key: "yAxisLabel",
ref: Ze,
transform: `translate(${e.value.style.chart.grid.y.axisName.fontSize}, ${u.value.top + u.value.height / 2}) rotate(-90)`,
"font-size": e.value.style.chart.grid.y.axisName.fontSize,
fill: e.value.style.chart.grid.y.axisName.color,
"font-weight": e.value.style.chart.grid.y.axisName.bold ? "bold" : "normal",
"text-anchor": "middle"
}, B(e.value.style.chart.grid.y.axisName.text), 9, Uo)) : y("", !0),
T.value.dataLabels.show && e.value.orientation === "vertical" ? (s(), n(x, { key: 11 }, [
(s(!0), n(x, null, w(S.value, (t, o) => (s(), n("g", null, [
(s(!0), n(x, null, w(t.x, (c, r) => (s(), n(x, null, [
Qt(t.series[r], t.proportions[r]) ? (s(), n("text", {
key: 0,
x: c + p.value * (1 - e.value.style.chart.bars.gapRatio / 2) / 2,
y: t.y[r] + t.height[r] / 2 + e.value.style.chart.bars.dataLabels.fontSize / 3,
"font-size": e.value.style.chart.bars.dataLabels.fontSize,
fill: e.value.style.chart.bars.dataLabels.adaptColorToBackground ? m(fa)(t.color) : e.value.style.chart.bars.dataLabels.color,
"font-weight": e.value.style.chart.bars.dataLabels.bold ? "bold" : "normal",
"text-anchor": "middle"
}, B(e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? Vt(t.proportions[r] * 100, t, o, r) : Oe(t.series[r], t, o, r, t.signedSeries[r])), 9, Ho)) : y("", !0)
], 64))), 256))
]))), 256)),
e.value.style.chart.bars.totalValues.show && S.value.length > 1 ? (s(), n("g", {
key: 0,
ref_key: "sumTop",
ref: Ha
}, [
(s(!0), n(x, null, w(Bt.value, (t, o) => (s(), n(x, null, [
!e.value.style.chart.bars.dataLabels.hideEmptyValues || t.value !== 0 ? (s(), n("text", {
key: 0,
x: u.value.left + p.value * o + p.value / 2,
y: xl(o),
"text-anchor": "middle",
"font-size": e.value.style.chart.bars.totalValues.fontSize,
"font-weight": e.value.style.chart.bars.totalValues.bold ? "bold" : "normal",
fill: e.value.style.chart.bars.totalValues.color
}, B(Oe(t.value, t, o, t.sign)), 9, Xo)) : y("", !0)
], 64))), 256))
], 512)) : y("", !0)
], 64)) : y("", !0),
T.value.dataLabels.show && e.value.orientation === "horizontal" ? (s(), n(x, { key: 12 }, [
(s(!0), n(x, null, w(S.value, (t, o) => (s(), n("g", null, [
(s(!0), n(x, null, w(t.horizontal_x, (c, r) => (s(), n(x, null, [
Qt(t.series[r], t.proportions[r]) ? (s(), n("text", {
key: 0,
x: c + (t.horizontal_width[r] < 0 ? 1e-4 : t.horizontal_width[r]) / 2,
y: t.horizontal_y[r] + p.value * (1 - e.value.style.chart.bars.gapRatio / 2) / 2 + e.value.style.chart.bars.dataLabels.fontSize / 3,
"font-size": e.value.style.chart.bars.dataLabels.fontSize,
fill: e.value.style.chart.bars.dataLabels.adaptColorToBackground ? m(fa)(t.color) : e.value.style.chart.bars.dataLabels.color,
"font-weight": e.value.style.chart.bars.dataLabels.bold ? "bold" : "normal",
"text-anchor": "middle"
}, B(e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? Vt(t.proportions[r] * 100, t, o, r) : Oe(t.series[r], t, o, r, t.signedSeries[r])), 9, Yo)) : y("", !0)
], 64))), 256))
]))), 256)),
e.value.style.chart.bars.totalValues.show && S.value.length > 1 ? (s(), n("g", {
key: 0,
ref_key: "sumRight",
ref: Qe
}, [
(s(!0), n(x, null, w(Bt.value, (t, o) => (s(), n(x, null, [
!e.value.style.chart.bars.dataLabels.hideEmptyValues || t.value !== 0 ? (s(), n("text", {
key: 0,
x: kl(o),
y: u.value.top + p.value * o + p.value / 2 + e.value.style.chart.bars.totalValues.fontSize / 3,
"text-anchor": "start",
"font-size": e.value.style.chart.bars.totalValues.fontSize,
"font-weight": e.value.style.chart.bars.totalValues.bold ? "bold" : "normal",
fill: e.value.style.chart.bars.totalValues.color
}, B(Oe(t.value, t, o, t.sign)), 9, Wo)) : y("", !0)
], 64))), 256))
], 512)) : y("", !0)
], 64)) : y("", !0),
e.value.style.chart.grid.y.axisLabels.show && !e.value.style.chart.bars.distributed && e.value.orientation === "vertical" ? (s(), n("g", {
key: 13,
ref_key: "scaleLabels",
ref: oe
}, [
(s(!0), n(x, null, w(Y.value, (t, o) => (s(), n("line", {
x1: u.value.left,
x2: u.value.left - 6,
y1: t.y,
y2: t.y,
stroke: e.value.style.chart.grid.x.axisColor,
"stroke-width": 1
}, null, 8, qo))), 256)),
(s(!0), n(x, null, w(Y.value, (t, o) => (s(), n("text", {
x: t.x,
y: t.y + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
"font-size": e.value.style.chart.grid.y.axisLabels.fontSize,
"font-weight": e.value.style.chart.grid.y.axisLabels.bold ? "bold" : "normal",
fill: e.value.style.chart.grid.y.axisLabels.color,
"text-anchor": "end"
}, B(m(ge)(
e.value.style.chart.grid.y.axisLabels.formatter,
t.value,
m(ae)({
p: e.value.style.chart.bars.dataLabels.prefix,
v: t.value,
s: e.value.style.chart.bars.dataLabels.suffix,
r: e.value.style.chart.grid.y.axisLabels.rounding
}),
{ datapoint: t }
)), 9, Go))), 256))
], 512)) : y("", !0),
e.value.style.chart.grid.y.axisLabels.show && !e.value.style.chart.bars.distributed && e.value.orientation === "horizontal" ? (s(), n("g", {
key: 14,
ref_key: "scaleLabels",
ref: oe
}, [
(s(!0), n(x, null, w(Y.value, (t, o) => (s(), n("line", {
x1: t.horizontal_x,
x2: t.horizontal_x,
y1: u.value.bottom,
y2: u.value.bottom + 6,
stroke: e.value.style.chart.grid.x.axisColor,
"stroke-width": 1,
"stroke-linecap": "round"
}, null, 8, Jo))), 256)),
(s(!0), n(x, null, w(Y.value, (t, o) => (s(), n("text", {
class: "vue-data-ui-time-label",
"font-size": e.value.style.chart.grid.x.timeLabels.fontSize,
"font-weight": e.value.style.chart.grid.y.axisLabels.bold ? "bold" : "normal",
fill: e.value.style.chart.grid.y.axisLabels.color,
"text-anchor": e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
transform: `translate(${t.horizontal_x}, ${u.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}), rotate(${e.value.style.chart.grid.x.timeLabels.rotation})`
}, B(m(ge)(
e.value.style.chart.grid.y.axisLabels.formatter,
t.value,
m(ae)({
p: e.value.style.chart.bars.dataLabels.prefix,
v: t.value,
s: e.value.style.chart.bars.dataLabels.suffix,
r: e.value.style.chart.grid.y.axisLabels.rounding
}),
{ datapoint: t }
)), 9, Zo))), 256))
], 512)) : y("", !0),
e.value.style.chart.grid.x.timeLabels.show && e.value.orientation === "vertical" ? (s(), n("g", {
key: 15,
ref_key: "timeLabelsEls",
ref: re
}, [
a.$slots["time-label"] ? (s(), n("g", Qo, [
(s(!0), n(x, null, w(Et.value, (t, o) => (s(), n("g", null, [
C(a.$slots, "time-label", Me({ ref_for: !0 }, {
x: u.value.left + p.value * o + p.value / 2,
y: u.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY,
fontSize: e.value.style.chart.grid.x.timeLabels.fontSize,
fill: e.value.style.chart.grid.x.timeLabels.color,
transform: `translate(${u.value.left + p.value * o + p.value / 2}, ${u.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}), rotate(${e.value.style.chart.grid.x.timeLabels.rotation})`,
absoluteIndex: t.absoluteIndex,
content: t.text,
textAnchor: e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
show: !0
}), void 0, !0)
]))), 256))
])) : (s(), n("g", Ko, [
(s(!0), n(x, null, w(Et.value, (t, o) => (s(), n("g", null, [
String(t.text).includes(`
`) ? (s(), n("text", {
key: o + "-multi",
"text-anchor": e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
"font-size": e.value.style.chart.grid.x.timeLabels.fontSize,
fill: e.value.style.chart.grid.x.timeLabels.color,
transform: `
translate(
${u.value.left + p.value * o + p.value / 2},
${u.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}
),
rotate(${e.value.style.chart.grid.x.timeLabels.rotation})
`,
style: { cursor: "pointer" },
innerHTML: m(Jl)({
content: String(t.text),
fontSize: e.value.style.chart.grid.x.timeLabels.fontSize,
fill: e.value.style.chart.grid.x.timeLabels.color,
x: 0,
y: 0
}),
onClick: () => Ie(t, o)
}, null, 8, er)) : (s(), n("text", {
class: "vue-data-ui-time-label",
key: o,
"text-anchor": e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
"font-size": e.value.style.chart.grid.x.timeLabels.fontSize,
"font-weight": e.value.style.chart.grid.x.timeLabels.bold ? "bold" : "normal",
fill: e.value.style.chart.grid.x.timeLabels.color,
transform: `translate(${u.value.left + p.value * o + p.value / 2}, ${u.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}), rotate(${e.value.style.chart.grid.x.timeLabels.rotation})`,
style: { cursor: "pointer" },
onClick: () => Ie(t, o)
}, B(t.text), 9, jo))
]))), 256))
]))
], 512)) : y("", !0),
e.value.style.chart.grid.x.timeLabels.show && e.value.orientation === "horizontal" ? (s(), n("g", {
key: 16,
ref_key: "timeLabelsEls",
ref: re
}, [
a.$slots["time-label"] ? (s(), n("g", tr, [
(s(!0), n(x, null, w(O.value, (t, o) => (s(), n("g", null, [
C(a.$slots, "time-label", Me({ ref_for: !0 }, {
x: u.value.left - 8,
y: u.value.top + p.value * o + p.value / 2 + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
fontSize: e.value.style.chart.grid.x.timeLabels.fontSize,
fill: e.value.style.chart.grid.x.timeLabels.color,
transform: null,
absoluteIndex: t.absoluteIndex,
content: t.text,
textAnchor: "end",
show: !0
}), void 0, !0)
]))), 256))
])) : (s(), n("g", ar, [
(s(!0), n(x, null, w(O.value, (t, o) => (s(), n("g", null, [
String(t.text).includes(`
`) ? (s(), n("text", {
key: 1,
"text-anchor": "end",
"font-size": e.value.style.chart.grid.y.axisLabels.fontSize,
"font-weight": e.value.style.chart.grid.y.axisLabels.bold ? "bold" : "normal",
fill: e.value.style.chart.grid.y.axisLabels.color,
x: u.value.left - 8,
y: u.value.top + p.value * o + p.value / 2 + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
style: { cursor: "pointer" },
onClick: () => Ie(t, o),
innerHTML: m(Zl)({
content: String(t.text),
fontSize: e.value.style.chart.grid.y.axisLabels.fontSize,
fill: e.value.style.chart.grid.y.axisLabels.color,
x: u.value.left - 8,
y: 0
})
}, null, 8, or)) : (s(), n("text", {
key: 0,
"text-anchor": "end",
"font-size": e.value.style.chart.grid.y.axisLabels.fontSize,
"font-weight": e.value.style.chart.grid.y.axisLabels.bold ? "bold" : "normal",
fill: e.value.style.chart.grid.y.axisLabels.color,
x: u.value.left - 8,
y: u.value.top + p.value * o + p.value / 2 + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
style: {
cursor: "pointer"
},
onClick: () => Ie(t, o)
}, B(t.text), 9, lr))
]))), 256))
]))
], 512)) : y("", !0),
T.value.showTooltip && e.value.orientation === "vertical" ? (s(!0), n(x, { key: 17 }, w(h.value.end - h.value.start, (t, o) => (s(), n("rect", {
x: u.value.left + o * p.value,
y: u.value.top,
width: p.value,
height: u.value.height < 0 ? 0 : u.value.height,
onClick: () => Ut(o),
onMouseenter: () => Xt(o),
onMouseleave: () => Ht(o),
fill: o === G.value || o === Ke.value ? e.value.style.chart.highlighter.color : "transparent",
style: ne({ opacity: e.value.style.chart.highlighter.opacity / 100 })
}, null, 44, rr))), 256)) : y("", !0),
T.value.showTooltip && e.value.orientation === "horizontal" ? (s(!0), n(x, { key: 18 }, w(h.value.end - h.value.start, (t, o) => (s(), n("rect", {
x: u.value.left,
y: u.value.top + o * p.value,
width: u.value.width < 0 ? 0 : u.value.width,
height: p.value,
onClick: () => Ut(o),
onMouseenter: () => Xt(o),
onMouseleave: () => Ht(o),
fill: o === G.value || o === Ke.value ? e.value.style.chart.highlighter.color : "transparent",
style: ne({ opacity: e.value.style.chart.highlighter.opacity / 100 })
}, null, 44, sr))), 256)) : y("", !0),
Nt.value ? (s(), n("rect", Me({ key: 19 }, Qa.value, {
"data-start": h.value.start,
"data-end": h.value.end
}), null, 16, nr)) : y("", !0),
C(a.$slots, "svg", {
svg: {
drawingArea: u.value,
data: S.value
}
}, void 0, !0)
], 14, xo)),
a.$slots.watermark ? (s(), n("div", ir, [
C(a.$slots, "watermark", U(H({ isPrinting: m(_t) || m(Mt) })), void 0, !0)
])) : y("", !0),
e.value.style.chart.zoom.show && D.value > 6 && ye.value && ta.value ? (s(), ee(yo, {
key: 4,
ref_key: "chartSlicer",
ref: fe,
allMinimaps: el.value,
background: e.value.style.chart.zoom.color,
borderColor: e.value.style.chart.backgroundColor,
customFormat: e.value.style.chart.zoom.customFormat,
cutNullValues: !1,
enableRangeHandles: e.value.style.chart.zoom.enableRangeHandles,
enableSelectionDrag: e.value.style.chart.zoom.enableSelectionDrag,
end: h.value.end,
focusOnDrag: e.value.style.chart.zoom.focusOnDrag,
focusRangeRatio: e.value.style.chart.zoom.focusRangeRatio,
fontSize: e.value.style.chart.zoom.fontSize,
immediate: !e.value.style.chart.zoom.preview.enable,
inputColor: e.value.style.chart.zoom.color,
isPreview: Nt.value,
labelLeft: e.value.style.chart.grid.x.timeLabels.values[h.value.start] ? O.value[0].text : "",
labelRight: e.value.style.chart.grid.x.timeLabels.values[h.value.end - 1] ? O.value.at(-1).text : "",
max: Math.max(...Xe.dataset.map((t) => t.series.length)),
min: 0,
minimap: se.value,
minimapCompact: e.value.style.chart.zoom.minimap.compact,
minimapFrameColor: e.value.style.chart.zoom.minimap.frameColor,
minimapIndicatorColor: e.value.style.chart.zoom.minimap.indicatorColor,
minimapMerged: !1,
minimapSelectedColor: e.value.style.chart.zoom.minimap.selectedColor,
minimapSelectedColorOpacity: e.value.style.chart.zoom.minimap.selectedColorOpacity,
minimapSelectedIndex: G.value,
minimapSelectionRadius: 1,
preciseLabels: It.value.length ? It.value : we.value,
refreshEndPoint: e.value.style.chart.zoom.endIndex !== null ? e.value.style.chart.zoom.endIndex + 1 : Math.max(...Xe.dataset.map((t) => t.series.length)),
refreshStartPoint: e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex : 0,
selectColor: e.value.style.chart.zoom.highlightColor,
selectedSeries: ll.value,
smoothMinimap: !1,
start: h.value.start,
textColor: e.value.style.chart.color,
timeLabels: we.value,
usePreciseLabels: e.value.style.chart.grid.x.timeLabels.datetimeFormatter.enable && !e.value.style.chart.zoom.useDefaultFormat,
valueEnd: h.value.end,
valueStart: h.value.start,
verticalHandles: e.value.style.chart.zoom.minimap.verticalHandles,
"onUpdate:end": ml,
"onUpdate:start": fl,
onTrapMouse: Ka,
onReset: Ot,
onFutureEnd: l[0] || (l[0] = (t) => Pt("end", t)),
onFutureStart: l[1] || (l[1] = (t) => Pt("start", t))
}, {
"reset-action": L(({ reset: t }) => [
C(a.$slots, "reset-action", U(H({ reset: t })), void 0, !0)
]),
slotMap: L(({ width: t, height: o, unitW: c }) => [
(s(!0), n(x, null, w(S.value, (r) => (s(), n("g", {
key: r.id
}, [
(s(!0), n(x, null, w(r.xMinimap({ left: 0, unitW: c }), (f, A) => (s(), n("rect", {
key: A,
x: A === 0 ? f - c * (e.value.style.chart.bars.gapRatio / 4) : f - c / 2,
y: Math.max(0, Math.min(o, r.yMinimap({ minimapH: o })[A])),
height: r.heightMinimap({ minimapH: o })[A],
width: [0, D.value - 1].includes(A) ? c * (1 - e.value.style.chart.bars.gapRatio / 2) / 2 : c * (1 - e.value.style.chart.bars.gapRatio / 2),
fill: e.value.style.chart.bars.gradient.show ? `url(#gradient_${r.id})` : r.color,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": 0.5,
rx: "0",
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: ne({
opacity: A >= R.value.start && A <= R.value.end ? 1 : 0.62
})
}, null, 12, ur))), 128))
]))), 128))
]),
_: 3
}, 8, ["allMinimaps", "background", "borderColor", "customFormat", "enableRangeHandles", "enableSelectionDrag", "end", "focusOnDrag", "focusRangeRatio", "fontSize", "immediate", "inputColor", "isPreview", "labelLeft", "labelRight", "max", "minimap", "minimapCompact", "minimapFrameColor", "minimapIndicatorColor", "minimapSelectedColor", "minimapSelectedColorOpacity", "minimapSelectedIndex", "preciseLabels", "refreshEndPoint", "refreshStartPoint", "selectColor", "selectedSeries", "start", "textColor", "timeLabels", "usePreciseLabels", "valueEnd", "valueStart", "verticalHandles"])) : y("", !0),
_e(m(Ma), {
show: T.value.showTooltip && Ye.value,
backgroundColor: e.value.style.chart.tooltip.backgroundColor,
color: e.value.style.chart.tooltip.color,
fontSize: e.value.style.chart.tooltip.fontSize,
borderRadius: e.value.style.chart.tooltip.borderRadius,
borderColor: e.value.style.chart.tooltip.borderColor,
borderWidth: e.value.style.chart.tooltip.borderWidth,
backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
position: e.value.style.chart.tooltip.position,
offsetY: e.value.style.chart.tooltip.offsetY,
parent: J.value,
content: qe.value,
isFullscreen: me.value,
isCustom: m(ma)(e.value.style.chart.tooltip.customFormat),
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": L(() => [
C(a.$slots, "tooltip-before", U(H({ ...We.value })), void 0, !0)
]),
"tooltip-after": L(() => [
C(a.$slots, "tooltip-after", U(H({ ...We.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
te("div", {
id: `legend-bottom-${V.value}`
}, null, 8, cr),
wt.value ? (s(), ee(Rl, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${V.value}` : `#legend-bottom-${V.value}`
}, [
te("div", {
ref_key: "chartLegend",
ref: xt
}, [
e.value.style.chart.legend.show ? (s(), ee(bo, {
key: 0,
legendSet: ut.value,
config: ul.value,
onClickMarker: l[2] || (l[2] = ({ legend: t }) => t.segregate())
}, bt({
item: L(({ legend: t }) => [
m(xe) ? y("", !0) : (s(), n("div", {
key: 0,
onClick: (o) => t.segregate(),
style: ne(`opacity:${F.value.includes(t.id) ? 0.5 : 1}`)
}, B(t.name), 13, hr))
]),
_: 2
}, [
a.$slots.pattern ? {
name: "legend-pattern",
fn: L(({ legend: t, index: o }) => [
_e(go, {
shape: t.shape,
radius: 30,
stroke: "none",
plot: { x: 30, y: 30 },
fill: `url(#pattern_${V.value}_${o})`
}, null, 8, ["shape", "fill"])
]),
key: "0"
} : void 0
]), 1032, ["legendSet", "config"])) : C(a.$slots, "legend", {
key: 1,
legend: ut.value
}, void 0, !0)
], 512)
], 8, ["to"])) : y("", !0),
a.$slots.source ? (s(), n("div", {
key: 6,
ref_key: "source",
ref: kt,
dir: "auto"
}, [
C(a.$slots, "source", {}, void 0, !0)
], 512)) : y("", !0),
ye.value && e.value.userOptions.buttons.table ? (s(), ee(Il(Le.value.component), Me({ key: 7 }, Le.value.props, {
ref_key: "tableUnit",
ref: pe,
onClose: Kt
}), bt({
content: L(() => [
_e(m(Fa), {
colNames: Ee.value.colNames,
head: Ee.value.head,
body: Ee.value.body,
config: Ee.value.config,
title: e.value.table.useDialog ? "" : Le.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: Kt
}, {
th: L(({ th: t }) => [
te("div", { innerHTML: t }, null, 8, vr)
]),
td: L(({ td: t }) => [
ha(B(isNaN(Number(t)) ? t : m(ae)({
p: e.value.style.chart.bars.dataLabels.prefix,
v: t,
s: e.value.style.chart.bars.dataLabels.suffix,
r: e.value.table.td.roundingValue
})), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"])
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: L(() => [
ha(B(Le.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: L(() => [
te("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: l[3] || (l[3] = (t) => nt(e.value.userOptions.callbacks.csv))
}, [
_e(m(Ta), {
name: "excel",
stroke: Le.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : y("", !0),
m(xe) ? (s(), ee(lo, { key: 8 })) : y("", !0)
], 46, mo));
}
}, gr = /* @__PURE__ */ fo(dr, [["__scopeId", "data-v-9cdb5942"]]), Pr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: gr
}, Symbol.toStringTag, { value: "Module" }));
export {
Nr as a,
Pr as b,
gr as v
};