vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
971 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-2p4Tjzc8.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, ar 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, as as Zl, y as ma, v as Ql, r as Kl, _ as jl } from "./lib-2iaAPQ_c.js";
import { t as ft, u as eo } from "./useResponsive-DfdjqQps.js";
import { u as to } from "./usePrinter-ChVMpU2f.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-CqYIrJ8I.js";
import vo from "./Title-DSOZzIrU.js";
import { _ as go } from "./Shape-12_eh8zD.js";
import bo from "./Legend-D2xmnFPH.js";
import { S as yo } from "./SlicerPreview-CgKqSG-h.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-D0pGX8qz.js")), Ta = j(() => import("./BaseIcon-CbVDYv89.js")), $a = j(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), Fa = j(() => import("./DataTable-BT_IeqPe.js")), Da = j(() => import("./PenAndPaper-CvyKWfNl.js")), Na = j(() => import("./UserOptions-BQO4YFrn.js")), Pa = j(() => import("./PackageVersion-Br3DrrFh.js")), Oa = j(() => import("./BaseDraggableDialog-Z5LfhW87.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