vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,088 lines (1,087 loc) • 48.8 kB
JavaScript
import { defineAsyncComponent as M, ref as c, shallowRef as dt, computed as f, onMounted as qt, toRefs as Jt, nextTick as _e, watch as Ce, watchEffect as Kt, onBeforeUnmount as Qt, createElementBlock as n, openBlock as o, unref as i, normalizeStyle as J, normalizeClass as O, createBlock as T, createCommentVNode as v, createElementVNode as m, createSlots as Zt, withCtx as L, renderSlot as S, normalizeProps as K, guardReactiveProps as Q, createVNode as el, Fragment as z, renderList as $, toDisplayString as b, Teleport as tl, createTextVNode as ht } from "vue";
import { u as ll, c as yt, o as ft, f as se, g as al, t as ol, a as ul, p as ne, b as sl, C as gt, d as nl, e as Le, G as rl, D as mt, m as Ae, X as il, s as Z, H as cl, k as Se, i as re, I as vl, n as dl, q as hl, r as bt, v as yl, w as fl, J as xt, K as gl } from "./index-q-LPw2IT.js";
import { u as ml } from "./useChartAccessibility-9icAAmYg.js";
import { u as pt } from "./useNestedProp-04aFeUYu.js";
import { u as bl } from "./usePrinter-DX7efa1s.js";
import { u as xl } from "./useTimeLabels-DkzmKfZn.js";
import { u as pl } from "./useUserOptionState-BIvW1Kz7.js";
import { u as kl } from "./useTimeLabelCollider-CIsgDrl9.js";
import wl from "./Legend-DcDSkq99.js";
import { S as _l } from "./Slicer-BarTZZDU.js";
import Cl from "./Title-B55R8CAZ.js";
import Ll from "./img-Ctts6JQb.js";
import { t as kt, u as Al } from "./useResponsive-DfdjqQps.js";
import { u as Sl, B as zl } from "./useLoading-D7YHNtLX.js";
import { _ as $l } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Il = ["id"], Tl = ["id"], Nl = ["xmlns", "viewBox"], Ol = ["x", "y", "width", "height"], Pl = ["id"], Dl = ["stop-color"], Fl = ["stop-color"], El = ["id"], Rl = ["stop-color"], Vl = ["stop-color"], Ml = ["stop-color"], Hl = { key: 1 }, Bl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Xl = { key: 0 }, Gl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Wl = ["font-size", "fill", "transform"], Yl = ["x", "y", "font-size", "fill"], jl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ql = ["x", "y", "font-size", "fill", "font-weight"], Jl = { key: 0 }, Kl = ["text-anchor", "font-size", "fill", "transform"], Ql = ["text-anchor", "font-size", "fill", "transform", "innerHTML"], Zl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], ea = { key: 1 }, ta = ["cx", "cy", "r", "fill"], la = { key: 0 }, aa = { key: 0 }, oa = ["d", "stroke"], ua = ["text-anchor", "x", "y", "fill"], sa = ["cx", "cy", "r", "fill"], na = { key: 0 }, ra = ["cx", "cy", "fill"], ia = { key: 1 }, ca = ["d", "fill", "stroke"], va = { key: 2 }, da = ["d", "fill", "stroke"], ha = ["x", "y", "font-size", "fill"], ya = ["x", "y", "width", "height", "fill"], fa = ["x", "y", "width", "height", "onMouseenter", "onMouseleave", "onClick"], ga = {
key: 4,
class: "vue-data-ui-watermark"
}, ma = ["id"], ba = ["onClick"], xa = { key: 0 }, pa = { key: 1 }, ka = {
__name: "vue-ui-donut-evolution",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend"],
setup(wt, { expose: _t, emit: Ct }) {
const Lt = M(() => import("./vue-ui-accordion-D46i_gkB.js")), At = M(() => import("./BaseDraggableDialog-DdXLTRiK.js")), St = M(() => import("./DataTable-rj9-mAwF.js")), zt = M(() => import("./PackageVersion-5ZjKSIei.js")), $t = M(() => import("./PenAndPaper-BJ0hcgsa.js")), It = M(() => import("./UserOptions-DVzyjG-W.js")), Tt = M(() => import("./vue-ui-donut-CdLAu_O5.js")), { vue_ui_donut_evolution: Nt } = ll(), x = wt, N = c(yt()), w = c([]), g = c(null), ee = c(null), ie = c(!1), R = c(null), D = c(null), Ot = c(null), ze = c(0), $e = c(0), Ie = c(0), Te = c(0), Ne = c(0), ce = c(null), te = c(null), ve = c(null), de = c(null), Oe = c(!1), Pe = c(null), De = c(null), Fe = c(null), Ee = c(null), Re = c(null), he = c(!1), Y = dt(null), le = dt(null), Ve = c(null), Me = Ct, He = f(() => !!x.dataset && x.dataset.length);
qt(() => {
Oe.value = !0, Be();
});
const ae = f(() => !!e.value.debug);
function Be() {
if (ft(x.dataset) ? (se({
componentName: "VueUiDonutEvolution",
type: "dataset",
debug: ae.value
}), oe.value = !0) : x.dataset.length && x.dataset.forEach((t, a) => {
al({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((l) => {
se({
componentName: "VueUiDonutEvolution",
type: "datasetSerieAttribute",
property: l,
index: a,
debug: ae.value
}), oe.value = !0;
});
}), ft(x.dataset) || (oe.value = e.value.loading), setTimeout(() => {
he.value = !0;
}, 10), fe(), e.value.responsive) {
const t = kt(() => {
he.value = !1;
const { width: a, height: l } = Al({
chart: D.value,
title: e.value.style.chart.title.text ? Pe.value : null,
legend: e.value.style.chart.legend.show ? De.value : null,
slicer: e.value.style.chart.zoom.show && Xe.value > 1 ? Re.value : null,
source: Fe.value
});
requestAnimationFrame(() => {
H.value.width = a, H.value.height = l - 12, clearTimeout(Ve.value), Ve.value = setTimeout(() => {
he.value = !0;
}, 10);
});
});
Y.value && (le.value && Y.value.unobserve(le.value), Y.value.disconnect()), Y.value = new ResizeObserver(t), le.value = D.value.parentNode, Y.value.observe(le.value);
}
}
const e = c(me()), { loading: Ue, FINAL_DATASET: ye, manualLoading: oe } = Sl({
...Jt(x),
FINAL_CONFIG: e,
prepareConfig: me,
callback: () => {
Promise.resolve().then(async () => {
await fe();
});
},
skeletonDataset: [
{
name: "",
values: [1, 2, 3, 5, 8, 13],
color: "#AAAAAA"
},
{
name: "",
values: [1, 2, 3, 5, 8, 13],
color: "#BABABA"
},
{
name: "",
values: [1, 2, 3, 5, 8, 13],
color: "#CACACA"
}
],
skeletonConfig: ol({
defaultConfig: e.value,
userConfig: {
useCssAnimation: !1,
table: { show: !1 },
userOptions: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
layout: {
dataLabels: { show: !1 },
grid: {
stroke: "#6A6A6A",
axis: {
yLabel: "",
xLabel: ""
},
yAxis: {
dataLabels: { show: !1 }
},
xAxis: {
dataLabels: { show: !1 }
}
},
line: {
stroke: "#CACACA60"
}
},
legend: {
backgroundColor: "transparent",
showValue: !1,
showPercentage: !1
},
zoom: {
show: !1,
startIndex: null,
endIndex: null
}
}
}
}
})
}), H = c({
width: e.value.style.chart.layout.width,
height: e.value.style.chart.layout.height
}), Xe = f(() => Math.max(...ye.value.map((t) => t.values.length))), h = c({
start: 0,
end: Xe.value
});
function Ge() {
fe();
}
async function fe() {
await _e(), await _e();
const { startIndex: t, endIndex: a } = e.value.style.chart.zoom, l = Ee.value;
(t != null || a != null) && l ? (t != null && l.setStartValue(t), a != null && l.setEndValue(Pt(a + 1))) : (h.value = {
start: 0,
end: F.value
}, $e.value += 1);
}
function Pt(t) {
const a = F.value;
return t > a ? a : t < 0 || e.value.style.chart.zoom.startIndex !== null && t < e.value.style.chart.zoom.startIndex ? e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex + 1 : 1 : t;
}
const { userOptionsVisible: ge, setUserOptionsVisibility: We, keepUserOptionState: Ye } = pl({ config: e.value }), { svgRef: je } = ml({ config: e.value.style.chart.title });
function me() {
const t = pt({
userConfig: x.config,
defaultConfig: Nt
});
let a = {};
return t.theme ? a = {
...pt({
userConfig: sl.vue_ui_donut_evolution[t.theme] || x.config,
defaultConfig: t
}),
customPalette: ul[t.theme] || ne
} : a = t, x.config && gt(x.config, "style.chart.zoom.startIndex") ? a.style.chart.zoom.startIndex = x.config.style.chart.zoom.startIndex : a.style.chart.zoom.startIndex = null, x.config && gt(x.config, "style.chart.zoom.endIndex") ? a.style.chart.zoom.endIndex = x.config.style.chart.zoom.endIndex : a.style.chart.zoom.endIndex = null, a;
}
Ce(() => x.config, (t) => {
Ue.value || (e.value = me()), ge.value = !e.value.userOptions.showOnChartHover, Be(), Ie.value += 1, Te.value += 1, Ne.value += 1, B.value.showTable = e.value.table.show;
}, { deep: !0 }), Ce(() => x.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (oe.value = !1), Ge();
}, { deep: !0 });
const { isPrinting: qe, isImaging: Je, generatePdf: Ke, generateImage: Qe } = bl({
elementId: N.value,
fileName: e.value.style.chart.title.text || "vue-ui-donut-evolution",
options: e.value.userOptions.print
}), Dt = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ft = f(() => nl(e.value.customPalette)), B = c({
showTable: e.value.table.show
});
Ce(e, () => {
B.value = {
showTable: e.value.table.show
};
}, { immediate: !0 });
const V = f(() => ({
top: e.value.style.chart.layout.padding.top,
right: e.value.style.chart.layout.padding.right,
bottom: e.value.style.chart.layout.padding.bottom,
left: e.value.style.chart.layout.padding.left
}));
function Et() {
let t = 0;
ce.value && (t = Array.from(ce.value.querySelectorAll("text")).reduce((u, y) => {
const d = y.getComputedTextLength();
return (d > u ? d : u) + e.value.style.chart.layout.grid.axis.yLabelOffsetX;
}, 0));
const a = de.value ? de.value.getBoundingClientRect().width + e.value.style.chart.layout.grid.axis.yLabelOffsetX + e.value.style.chart.layout.grid.axis.fontSize : 0;
return t + a + 5;
}
const be = c(0), Rt = kt((t) => {
be.value = t;
}, 100);
Kt((t) => {
const a = te.value;
if (!a) return;
const l = new ResizeObserver((s) => {
Rt(s[0].contentRect.height);
});
l.observe(a), t(() => l.disconnect());
}), Qt(() => {
be.value = 0;
});
const Ze = f(() => {
let t = 0;
ve.value && (t = ve.value.getBBox().height);
let a = 0;
return te.value && (a = be.value), t + a + e.value.style.chart.layout.grid.axis.fontSize + e.value.style.chart.layout.grid.xAxis.dataLabels.offsetY;
}), r = f(() => {
const t = Et(), a = e.value.style.chart.layout.dataLabels.fontSize * 3, l = H.value.width, s = H.value.height, u = V.value.left + t, y = l - V.value.right, d = l - u - V.value.right, p = s - V.value.top - V.value.bottom - a - Ze.value, W = V.value.top + a, E = s - V.value.bottom - Ze.value;
return {
top: W,
left: u,
right: y,
bottom: E,
absoluteHeight: s,
absoluteWidth: l,
centerX: u + Math.max(10, d) / 2,
centerY: W + Math.max(10, p) / 2,
width: Math.max(10, d),
height: Math.max(10, p)
};
}), P = f(() => (ye.value.forEach((t, a) => {
[null, void 0].includes(t.name) && se({
componentName: "VueUiDonutEvolution",
type: "datasetSerieAttribute",
property: "name",
index: a,
debug: ae.value
}), [null, void 0].includes(t.values) && se({
componentName: "VueUiDonutEvolution",
type: "datasetSerieAttribute",
property: "values",
index: a,
debug: ae.value
});
}), ye.value.map((t, a) => ({
...t,
values: rl(t.values),
color: Le(t.color) || Ft.value[a] || ne[a] || ne[a % ne.length],
length: (t.values || []).length,
uid: yt()
})))), j = f(() => P.value.filter((t) => !w.value.includes(t.uid)).map((t) => ({
...t,
values: t.values.filter((a, l) => l >= h.value.start && l <= h.value.end)
}))), F = f(() => Math.max(...j.value.map((t) => t.length))), _ = f(() => xl({
values: e.value.style.chart.layout.grid.xAxis.dataLabels.values,
maxDatapoints: F.value,
formatter: e.value.style.chart.layout.grid.xAxis.dataLabels.datetimeFormatter,
start: h.value.start,
end: h.value.end
})), k = f(() => r.value.width / (h.value.end - h.value.start)), C = f(() => {
const t = [];
for (let u = 0; u < h.value.end - h.value.start; u += 1) {
const y = j.value.map((I) => I.values[u] ?? null), d = y.filter((I) => [void 0, null].includes(I)).length === y.length, p = y.reduce((I, A) => I + A, 0), W = y.map((I) => I / p), E = r.value.left + k.value * u + k.value / 2;
t.push({
index: u,
percentages: W,
subtotal: d || p < 0 ? null : p,
values: y,
x: E
});
}
const a = 0, l = Math.max(...t.map((u) => u.subtotal)), s = t.length === 1 ? l * 2 : l;
return t.map((u, y) => {
const d = Math.min(r.value.width / 24, k.value / 2 * 0.7), p = d > r.value.width / 16 ? r.value.width / 16 : d, W = g.value === u.index ? r.value.width / 16 : p, E = t.length > 4 ? d * 2 : d * 2 > k.value / 2 * 0.7 ? k.value / 2 * 0.7 : d * 2, I = r.value.bottom - r.value.height * u.subtotal / mt(a, s, e.value.style.chart.layout.grid.yAxis.dataLabels.steps).max;
return {
...u,
y: I,
radius: p,
activeRadius: W,
hoverRadius: E,
donut: Ae({
series: j.value.map((A, vt) => ({
color: A.color,
name: A.name,
value: A.values[y] ?? 0
}))
}, u.x, I, p, p, 1.99999, 2, 1, 360, 105.25, p / 2),
donutHover: Ae({
series: j.value.map((A, vt) => ({
color: A.color,
name: A.name,
value: A.values[y] ?? 0
}))
}, u.x, I, E, E, 1.99999, 2, 1, 360, 105.25, E / 2),
donutFocus: Ae({
series: j.value.map((A, vt) => ({
color: A.color,
name: A.name,
value: A.values[y] ?? 0
}))
}, r.value.centerX, r.value.centerY, r.value.height / 3.6, r.value.height / 3.6, 1.99999, 2, 1, 360, 105.25, r.value.height / 6)
};
});
});
function et(t, a, l) {
return Se(
e.value.style.chart.layout.dataLabels.formatter,
t,
re({
p: e.value.style.chart.layout.dataLabels.prefix,
v: t,
s: e.value.style.chart.layout.dataLabels.suffix,
r: e.value.style.chart.layout.dataLabels.rounding
}),
{ datapoint: a, index: l }
);
}
const xe = f(() => ({
max: Math.max(...C.value.map((t) => t.subtotal)),
min: 0
})), U = f(() => {
const t = C.value.length === 1 ? xe.value.max * 2 : xe.value.max;
return mt(xe.value.min, t, e.value.style.chart.layout.grid.yAxis.dataLabels.steps);
});
function Vt(t) {
return t / U.value.max;
}
const Mt = f(() => U.value.ticks.map((t) => ({
y: r.value.bottom - r.value.height * Vt(t),
value: t
})));
function Ht(t, a) {
return isNaN(t.value / xt(a, "value")) ? 0 : (t.value / xt(a, "value") * 100).toFixed(0) + "%";
}
function tt(t) {
g.value = null, ee.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.seriesIndex + h.value.start });
}
function Bt(t) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.index + h.value.start }), g.value = t.index, ee.value = t;
}
const q = c(null);
function lt(t, a) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.index + h.value.start }), !(!t.subtotal || !e.value.style.chart.dialog.show) && (ee.value = null, g.value = null, ie.value = !0, R.value = t, Gt(t), [null, void 0].includes(a) || (q.value = a));
}
const at = f(() => P.value.map((t, a) => ({
name: t.name,
value: t.values.slice(h.value.start, h.value.end).reduce((l, s) => l + s, 0),
shape: "circle",
uid: t.uid,
color: t.color
})).sort((t, a) => a.value - t.value).map((t) => ({
...t,
opacity: w.value.includes(t.uid) ? 0.5 : 1,
segregate: () => pe(t.uid),
isSegregated: w.value.includes(t.uid)
}))), ot = f(() => C.value.map((t) => t.subtotal).reduce((t, a) => t + a, 0)), Ut = f(() => ({
cy: "donut-div-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
}));
function pe(t) {
if (w.value.includes(t))
w.value = w.value.filter((a) => a !== t), Me("selectLegend", null);
else {
if (w.value.length === P.value.length - 1) return;
w.value.push(t), Me("selectLegend", P.value.find((a) => a.uid === t));
}
R.value && lt(C.value.find((a, l) => l === q.value));
}
const X = f(() => {
const t = [""].concat(P.value.filter((u) => !w.value.includes(u.uid)).map((u) => ({
name: u.name,
color: u.color
}))).concat(["Σ"]);
let a = [];
for (let u = 0; u < F.value; u += 1) {
const y = P.value.filter((d) => !w.value.includes(d.uid)).map((d) => d.values[u] ?? 0).reduce((d, p) => d + p, 0);
a.push([_[u] ? _[u].text : "-"].concat(P.value.filter((d) => !w.value.includes(d.uid)).map((d) => ({
value: d.values[u] ?? 0,
percentage: d.values[u] ? d.values[u] / y * 100 : 0
}))).concat([`${e.value.style.chart.layout.dataLabels.prefix}${Number(y.toFixed(e.value.table.td.roundingValue))}${e.value.style.chart.layout.dataLabels.suffix}`]));
}
const l = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
}, s = [
e.value.table.columnNames.period
].concat(P.value.filter((u) => !w.value.includes(u.uid)).map((u) => u.name)).concat(e.value.table.columnNames.total);
return { head: t, body: a, config: l, colNames: s };
});
function Xt() {
return P.value;
}
function ut(t = null) {
_e(() => {
const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], l = [...X.value.head.map((d) => d.name ?? d)], s = [...X.value.body.map((d) => d.map((p) => p.value ?? p))], u = a.concat([l]).concat(s), y = yl(u);
t ? t(y) : fl({ csvContent: y, title: e.value.style.chart.title.text || "vue-ui-donut-evolution" });
});
}
const G = c(!1);
function st(t) {
G.value = t, ze.value += 1;
}
function nt() {
B.value.showTable = !B.value.showTable;
}
const ue = c(!1);
function ke() {
ue.value = !ue.value;
}
function rt(t) {
return t.proportion * 100 > e.value.style.chart.donuts.hover.hideLabelsUnderValue;
}
const it = c([]), ct = c({}), we = c(null);
function Gt(t) {
it.value = t.donut.map((a) => ({
name: a.name,
values: [a.value],
color: a.color
})), ct.value = gl({
...e.value.style.chart.dialog.donutChart,
responsive: !0,
theme: e.value.theme
}), we.value && we.value.open();
}
async function Wt({ scale: t = 2 } = {}) {
if (!D.value) return;
const { width: a, height: l } = D.value.getBoundingClientRect(), s = a / l, { imageUri: u, base64: y } = await Ll({ domElement: D.value, base64: !0, img: !0, scale: t });
return {
imageUri: u,
base64: y,
title: e.value.style.chart.title.text,
width: a,
height: l,
aspectRatio: s
};
}
const Yt = f(() => H.value.width), jt = f(() => H.value.height);
return kl({
timeLabelsEls: te,
timeLabels: _,
slicer: h,
configRef: e,
rotationPath: ["style", "chart", "layout", "grid", "xAxis", "dataLabels", "rotation"],
autoRotatePath: ["style", "chart", "layout", "grid", "xAxis", "dataLabels", "autoRotate", "enable"],
isAutoSize: !1,
width: Yt,
height: jt,
rotation: e.value.style.chart.layout.grid.xAxis.dataLabels.autoRotate.angle
}), _t({
getData: Xt,
getImage: Wt,
generatePdf: Ke,
generateCsv: ut,
generateImage: Qe,
toggleTable: nt,
toggleAnnotator: ke,
toggleFullscreen: st
}), (t, a) => (o(), n("div", {
ref_key: "donutEvolutionChart",
ref: D,
class: O(`vue-ui-donut-evolution ${G.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
style: J(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
id: N.value,
onMouseenter: a[5] || (a[5] = () => i(We)(!0)),
onMouseleave: a[6] || (a[6] = () => i(We)(!1))
}, [
e.value.userOptions.buttons.annotator ? (o(), T(i($t), {
key: 0,
svgRef: i(je),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: ue.value,
onClose: ke
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : v("", !0),
Dt.value ? (o(), n("div", {
key: 1,
ref_key: "noTitle",
ref: Ot,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : v("", !0),
e.value.style.chart.title.text ? (o(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: Pe,
style: "width:100%;background:transparent;padding-bottom:24px",
onMouseleave: tt
}, [
(o(), T(Cl, {
key: `title_${Ie.value}`,
config: {
title: {
cy: "donut-evolution-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "donut-evolution-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 544)) : v("", !0),
m("div", {
id: `legend-top-${N.value}`
}, null, 8, Tl),
e.value.userOptions.show && He.value && (i(Ye) || i(ge)) ? (o(), T(i(It), {
ref: "details",
key: `user_options_${ze.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: i(qe),
isImaging: i(Je),
uid: N.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: G.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: D.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: ue.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: st,
onGeneratePdf: i(Ke),
onGenerateCsv: ut,
onGenerateImage: i(Qe),
onToggleTable: nt,
onToggleAnnotator: ke,
style: J({
visibility: i(Ye) ? i(ge) ? "visible" : "hidden" : "visible"
})
}, Zt({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: L(({ isOpen: l, color: s }) => [
S(t.$slots, "menuIcon", K(Q({ isOpen: l, color: s })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: L(() => [
S(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: L(() => [
S(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: L(() => [
S(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: L(() => [
S(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: L(({ toggleFullscreen: l, isFullscreen: s }) => [
S(t.$slots, "optionFullscreen", K(Q({ toggleFullscreen: l, isFullscreen: s })), void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: L(({ toggleAnnotator: l, isAnnotator: s }) => [
S(t.$slots, "optionAnnotator", K(Q({ toggleAnnotator: l, isAnnotator: s })), void 0, !0)
]),
key: "6"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : v("", !0),
(o(), n("svg", {
ref_key: "svgRef",
ref: je,
xmlns: i(il),
class: O({ "vue-data-ui-fullscreen--on": G.value, "vue-data-ui-fulscreen--off": !G.value }),
viewBox: `0 0 ${r.value.absoluteWidth} ${r.value.absoluteHeight}`,
style: J(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};`)
}, [
el(i(zt)),
t.$slots["chart-background"] ? (o(), n("foreignObject", {
key: 0,
x: r.value.left,
y: r.value.top,
width: r.value.width,
height: r.value.height,
style: {
pointerEvents: "none"
}
}, [
S(t.$slots, "chart-background", {}, void 0, !0)
], 8, Ol)) : v("", !0),
m("defs", null, [
m("linearGradient", {
id: `hover_${N.value}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
m("stop", {
offset: "0%",
"stop-color": i(Z)(e.value.style.chart.backgroundColor, e.value.style.chart.layout.highlighter.opacity)
}, null, 8, Dl),
m("stop", {
offset: "100%",
"stop-color": i(Z)(e.value.style.chart.layout.highlighter.color, e.value.style.chart.layout.highlighter.opacity)
}, null, 8, Fl)
], 8, Pl),
m("radialGradient", {
id: `focus_${N.value}`
}, [
m("stop", {
offset: "0%",
"stop-color": i(Z)(i(Le)(e.value.style.chart.backgroundColor), 0)
}, null, 8, Rl),
m("stop", {
offset: "77%",
"stop-color": i(Z)("#FFFFFF", 30)
}, null, 8, Vl),
m("stop", {
offset: "100%",
"stop-color": i(Z)(i(Le)(e.value.style.chart.backgroundColor), 0)
}, null, 8, Ml)
], 8, El)
]),
e.value.style.chart.layout.grid.show ? (o(), n("g", Hl, [
m("line", {
x1: r.value.left,
x2: r.value.left,
y1: r.value.top,
y2: r.value.top + r.value.height,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Bl),
m("line", {
x1: r.value.left,
x2: r.value.right,
y1: r.value.bottom,
y2: r.value.bottom,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Ul),
e.value.style.chart.layout.grid.showVerticalLines ? (o(), n("g", Xl, [
(o(!0), n(z, null, $(h.value.end - h.value.start, (l, s) => (o(), n("line", {
x1: r.value.left + (s + 1) * k.value,
x2: r.value.left + (s + 1) * k.value,
y1: r.value.top,
y2: r.value.bottom,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Gl))), 256))
])) : v("", !0)
])) : v("", !0),
m("g", null, [
e.value.style.chart.layout.grid.axis.yLabel ? (o(), n("text", {
key: 0,
ref_key: "yAxisLabel",
ref: de,
"font-size": e.value.style.chart.layout.grid.axis.fontSize,
fill: e.value.style.chart.layout.grid.axis.color,
transform: `translate(${e.value.style.chart.layout.grid.axis.fontSize}, ${r.value.top + r.value.height / 2}) rotate(-90)`,
"text-anchor": "middle",
style: { transition: "none" }
}, b(e.value.style.chart.layout.grid.axis.yLabel), 9, Wl)) : v("", !0),
e.value.style.chart.layout.grid.axis.xLabel ? (o(), n("text", {
key: 1,
ref_key: "xAxisLabel",
ref: ve,
"text-anchor": "middle",
x: r.value.absoluteWidth / 2,
y: r.value.absoluteHeight - 3,
"font-size": e.value.style.chart.layout.grid.axis.fontSize,
fill: e.value.style.chart.layout.grid.axis.color
}, b(e.value.style.chart.layout.grid.axis.xLabel), 9, Yl)) : v("", !0)
]),
e.value.style.chart.layout.grid.yAxis.dataLabels.show ? (o(), n("g", {
key: 2,
ref_key: "scaleLabels",
ref: ce,
class: O({ "donut-opacity": !0, "donut-behind": g.value !== null })
}, [
(o(!0), n(z, null, $(Mt.value, (l, s) => (o(), n("g", null, [
l.value >= U.value.min && l.value <= U.value.max ? (o(), n("line", {
key: 0,
x1: r.value.left,
x2: r.value.left - 5,
y1: l.y,
y2: l.y,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth
}, null, 8, jl)) : v("", !0),
l.value >= U.value.min && l.value <= U.value.max ? (o(), n("text", {
key: 1,
x: r.value.left,
y: l.y + e.value.style.chart.layout.grid.yAxis.dataLabels.fontSize / 3,
"font-size": e.value.style.chart.layout.grid.yAxis.dataLabels.fontSize,
"text-anchor": "end",
fill: e.value.style.chart.layout.grid.yAxis.dataLabels.color,
"font-weight": e.value.style.chart.layout.grid.yAxis.dataLabels.bold ? "bold" : "normal"
}, b(i(cl)(l.value) ? i(Se)(
e.value.style.chart.layout.dataLabels.formatter,
l.value,
i(re)({
p: e.value.style.chart.layout.dataLabels.prefix,
v: l.value,
s: e.value.style.chart.layout.dataLabels.suffix,
r: e.value.style.chart.layout.grid.yAxis.dataLabels.roundingValue
}),
{ datapoint: l, seriesIndex: s }
) : ""), 9, ql)) : v("", !0)
]))), 256))
], 2)) : v("", !0),
e.value.style.chart.layout.grid.xAxis.dataLabels.show ? (o(), n("g", {
key: 3,
ref_key: "timeLabelsEls",
ref: te,
class: O({ "donut-opacity": !0 })
}, [
(o(!0), n(z, null, $(h.value.end - h.value.start, (l, s) => (o(), n("g", null, [
(e.value.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast && (s === 0 || s === F.value - 1) || !e.value.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast) && _.value[s] && _.value[s].text ? (o(), n("g", Jl, [
String(_.value[s].text).includes(`
`) ? (o(), n("text", {
key: 1,
class: "vue-data-ui-time-label",
"text-anchor": e.value.style.chart.layout.grid.xAxis.dataLabels.rotation > 0 ? "start" : e.value.style.chart.layout.grid.xAxis.dataLabels.rotation < 0 ? "end" : "middle",
"font-size": e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize,
fill: e.value.style.chart.layout.grid.xAxis.dataLabels.color,
transform: `translate(${r.value.left + k.value * s + k.value / 2}, ${r.value.bottom + e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize + e.value.style.chart.layout.grid.xAxis.dataLabels.offsetY}), rotate(${e.value.style.chart.layout.grid.xAxis.dataLabels.rotation})`,
innerHTML: i(vl)({
content: String(_.value[s].text),
fontSize: e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize,
fill: e.value.style.chart.layout.grid.xAxis.dataLabels.color,
x: 0,
y: 0
})
}, null, 8, Ql)) : (o(), n("text", {
key: 0,
class: "vue-data-ui-time-label",
"text-anchor": e.value.style.chart.layout.grid.xAxis.dataLabels.rotation > 0 ? "start" : e.value.style.chart.layout.grid.xAxis.dataLabels.rotation < 0 ? "end" : "middle",
"font-size": e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize,
fill: e.value.style.chart.layout.grid.xAxis.dataLabels.color,
transform: `translate(${r.value.left + k.value * s + k.value / 2}, ${r.value.bottom + e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize + e.value.style.chart.layout.grid.xAxis.dataLabels.offsetY}), rotate(${e.value.style.chart.layout.grid.xAxis.dataLabels.rotation})`
}, b(_.value[s].text || ""), 9, Kl))
])) : v("", !0)
]))), 256))
], 512)) : v("", !0),
(o(!0), n(z, null, $(C.value, (l, s) => (o(), n("g", null, [
e.value.style.chart.layout.line.show && s < C.value.length - 1 && ![l.subtotal, C.value[s + 1].subtotal].includes(null) ? (o(), n("line", {
key: 0,
class: O({ "donut-opacity": !0, "donut-behind": g.value !== null }),
x1: l.x,
y1: l.y,
x2: C.value[s + 1].x,
y2: C.value[s + 1].y,
stroke: e.value.style.chart.layout.line.stroke,
"stroke-width": e.value.style.chart.layout.line.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 10, Zl)) : v("", !0),
l.subtotal !== null ? (o(), n("g", ea, [
l.subtotal ? (o(), n("circle", {
key: 0,
cx: l.x,
cy: l.y,
r: l.activeRadius,
fill: e.value.style.chart.backgroundColor
}, null, 8, ta)) : v("", !0)
])) : v("", !0)
]))), 256)),
(o(!0), n(z, null, $(C.value, (l, s) => (o(), n("g", {
class: O({ "donut-opacity": !0, "donut-behind": s !== g.value && g.value !== null })
}, [
l.subtotal ? (o(), n("g", la, [
g.value !== null && g.value === s ? (o(), n("g", aa, [
(o(!0), n(z, null, $(l.donutHover, (u) => (o(), n("g", null, [
rt(u) ? (o(), n("path", {
key: 0,
d: i(dl)(u, { x: u.center.endX, y: u.center.endY }, 12, 12, { x: l.x, y: l.y }, !1, 20),
stroke: u.color,
"stroke-width": "1",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, oa)) : v("", !0)
]))), 256)),
(o(!0), n(z, null, $(l.donutHover, (u, y) => (o(), n("g", null, [
rt(u) ? (o(), n("text", {
key: 0,
"data-cy-hover-label": "",
"text-anchor": i(bt)(u, !0, 0).anchor,
x: i(bt)(u, !0, 9).x,
y: i(hl)(u, 14, 10),
fill: e.value.style.chart.layout.grid.yAxis.dataLabels.color,
"font-size": 8,
"font-weight": "bold"
}, b(u.name) + ": " + b(Ht(u, l.donut)) + " (" + b(u.value === null ? "-" : et(u.value, u, y)) + ") ", 9, ua)) : v("", !0)
]))), 256)),
m("g", null, [
m("circle", {
cx: l.x,
cy: l.y,
r: l.hoverRadius,
fill: e.value.style.chart.backgroundColor
}, null, 8, sa)
])
])) : v("", !0)
])) : v("", !0)
], 2))), 256)),
(o(!0), n(z, null, $(C.value, (l, s) => (o(), n("g", {
class: O({ "donut-opacity": !0, "donut-behind": s !== g.value && g.value !== null })
}, [
l.subtotal !== null ? (o(), n("g", na, [
l.subtotal === 0 ? (o(), n("circle", {
key: 0,
cx: l.x,
cy: l.y,
r: 3,
fill: e.value.style.chart.color
}, null, 8, ra)) : g.value !== null && g.value === s ? (o(), n("g", ia, [
(o(!0), n(z, null, $(l.donutHover, (u, y) => (o(), n("path", {
d: u.arcSlice,
fill: `${u.color}`,
"stroke-width": 1,
stroke: e.value.style.chart.backgroundColor
}, null, 8, ca))), 256))
])) : (o(), n("g", va, [
(o(!0), n(z, null, $(l.donut, (u, y) => (o(), n("path", {
d: u.arcSlice,
fill: `${u.color}`,
"stroke-width": 0.5,
stroke: e.value.style.chart.backgroundColor
}, null, 8, da))), 256))
]))
])) : v("", !0)
], 2))), 256)),
(o(!0), n(z, null, $(C.value, (l, s) => (o(), n("g", {
class: O({ "donut-opacity": !0, "donut-behind": s !== g.value && g.value !== null || ie.value && s !== R.value.index })
}, [
l.subtotal !== null && e.value.style.chart.layout.dataLabels.show ? (o(), n("text", {
key: 0,
"text-anchor": "middle",
x: l.x,
y: g.value === l.index && l.subtotal ? l.y + e.value.style.chart.layout.dataLabels.fontSize / 3 : l.y - l.radius - e.value.style.chart.layout.dataLabels.fontSize + e.value.style.chart.layout.dataLabels.offsetY,
"font-size": e.value.style.chart.layout.dataLabels.fontSize,
"font-weight": "bold",
fill: e.value.style.chart.layout.dataLabels.color
}, b(et(l.subtotal, l, s)), 9, ha)) : v("", !0)
], 2))), 256)),
(o(!0), n(z, null, $(C.value, (l, s) => (o(), n("rect", {
x: r.value.left + s * k.value,
y: r.value.top,
width: k.value,
height: r.value.height,
fill: [g.value, q.value].includes(l.index) ? `url(#hover_${N.value})` : "transparent",
class: O({ "donut-hover": l.subtotal && [g.value, q.value].includes(l.index) }),
style: {
pointerEvents: "none"
}
}, null, 10, ya))), 256)),
(o(!0), n(z, null, $(C.value, (l, s) => (o(), n("rect", {
"data-cy-trap": "",
x: r.value.left + s * k.value,
y: r.value.top,
width: k.value,
height: r.value.height,
fill: "transparent",
onMouseenter: (u) => Bt(l),
onMouseleave: (u) => tt(l),
onClick: (u) => lt(l, s),
class: O({ "donut-hover": g.value === l.index && l.subtotal })
}, null, 42, fa))), 256)),
S(t.$slots, "svg", { svg: r.value }, void 0, !0)
], 14, Nl)),
t.$slots.watermark ? (o(), n("div", ga, [
S(t.$slots, "watermark", K(Q({ isPrinting: i(qe) || i(Je) })), void 0, !0)
])) : v("", !0),
m("div", {
ref_key: "chartSlicer",
ref: Re,
style: J(`width:100%;background:${e.value.style.chart.backgroundColor}`),
"data-dom-to-png-ignore": ""
}, [
F.value > 1 && e.value.style.chart.zoom.show ? (o(), T(_l, {
ref_key: "slicerComponent",
ref: Ee,
key: `slicer_${$e.value}`,
background: e.value.style.chart.zoom.color,
borderColor: e.value.style.chart.backgroundColor,
fontSize: e.value.style.chart.zoom.fontSize,
useResetSlot: e.value.style.chart.zoom.useResetSlot,
labelLeft: _.value[0] ? _.value[0].text : "",
labelRight: _.value.at(-1) ? _.value.at(-1).text : "",
textColor: e.value.style.chart.color,
inputColor: e.value.style.chart.zoom.color,
selectColor: e.value.style.chart.zoom.highlightColor,
max: F.value,
min: 0,
valueStart: h.value.start,
valueEnd: h.value.end,
start: h.value.start,
"onUpdate:start": a[0] || (a[0] = (l) => h.value.start = l),
end: h.value.end,
"onUpdate:end": a[1] || (a[1] = (l) => h.value.end = l),
refreshStartPoint: e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex : 0,
refreshEndPoint: e.value.style.chart.zoom.endIndex !== null ? e.value.style.chart.zoom.endIndex + 1 : F.value,
enableRangeHandles: e.value.style.chart.zoom.enableRangeHandles,
enableSelectionDrag: e.value.style.chart.zoom.enableSelectionDrag,
onReset: Ge
}, {
"reset-action": L(({ reset: l }) => [
S(t.$slots, "reset-action", K(Q({ reset: l })), void 0, !0)
]),
_: 3
}, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag"])) : v("", !0)
], 4),
m("div", {
id: `legend-bottom-${N.value}`
}, null, 8, ma),
Oe.value ? (o(), T(tl, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${N.value}` : `#legend-bottom-${N.value}`
}, [
m("div", {
ref_key: "chartLegend",
ref: De
}, [
e.value.style.chart.legend.show ? (o(), T(wl, {
key: `legend_${Ne.value}`,
legendSet: at.value,
config: Ut.value,
onClickMarker: a[2] || (a[2] = ({ legend: l }) => pe(l.uid))
}, {
item: L(({ legend: l, index: s }) => [
m("div", {
onClick: (u) => pe(l.uid),
style: J(`opacity:${w.value.includes(l.uid) ? 0.5 : 1}`)
}, b(l.name) + b(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + b(e.value.style.chart.legend.showValue ? i(Se)(
e.value.style.chart.layout.dataLabels.formatter,
l.value,
i(re)({
p: e.value.style.chart.layout.dataLabels.prefix,
v: l.value,
s: e.value.style.chart.layout.dataLabels.suffix,
r: e.value.style.chart.legend.roundingValue
}),
{ datapoint: l, seriesIndex: s }
) : "") + " " + b(e.value.style.chart.legend.showPercentage ? w.value.includes(l.uid) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(l.value / ot.value) ? "-" : i(re)({
v: l.value / ot.value * 100,
s: "%",
r: e.value.style.chart.legend.roundingPercentage
})}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, ba)
]),
_: 1
}, 8, ["legendSet", "config"])) : v("", !0),
S(t.$slots, "legend", { legend: at.value }, void 0, !0)
], 512)
], 8, ["to"])) : v("", !0),
t.$slots.source ? (o(), n("div", {
key: 6,
ref_key: "source",
ref: Fe,
dir: "auto"
}, [
S(t.$slots, "source", {}, void 0, !0)
], 512)) : v("", !0),
He.value ? (o(), T(i(Lt), {
key: 7,
hideDetails: "",
config: {
open: B.value.showTable,
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
}
}
}, {
content: L(() => [
(o(), T(i(St), {
key: `table_${Te.value}`,
colNames: X.value.colNames,
head: X.value.head,
body: X.value.body,
config: X.value.config,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
onClose: a[3] || (a[3] = (l) => B.value.showTable = !1)
}, {
th: L(({ th: l }) => [
ht(b(l.name ?? l), 1)
]),
td: L(({ td: l }) => [
l.value === null ? (o(), n("span", xa, "-")) : (o(), n("b", pa, b(isNaN(l.value) ? "" : e.value.style.chart.layout.dataLabels.prefix) + b(!isNaN(l.value) && l.value !== null ? Number(l.value.toFixed(e.value.table.td.roundingValue)).toLocaleString() : l) + b(isNaN(l.value) ? "" : e.value.style.chart.layout.dataLabels.suffix), 1)),
m("span", null, b(l.percentage && !isNaN(l.percentage) ? `(${Number(l.percentage.toFixed(e.value.table.td.roundingPercentage)).toLocaleString()}%)` : ""), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : v("", !0),
e.value.style.chart.dialog.show ? (o(), T(i(At), {
key: 8,
ref_key: "dialog",
ref: we,
onClose: a[4] || (a[4] = (l) => {
R.value = null, ie.value = !1, ee.value = null, g.value = null, q.value = null;
}),
backgroundColor: e.value.style.chart.dialog.backgroundColor,
color: e.value.style.chart.dialog.color,
headerBg: e.value.style.chart.dialog.header.backgroundColor,
headerColor: e.value.style.chart.dialog.header.color,
isFullscreen: G.value,
fullscreenParent: D.value
}, {
title: L(() => [
ht(b(_.value[Number(R.value.index)] ? _.value[Number(R.value.index)].text : ""), 1)
]),
default: L(() => [
R.value ? (o(), T(i(Tt), {
key: 0,
config: ct.value,
dataset: it.value
}, null, 8, ["config", "dataset"])) : v("", !0)
]),
_: 1
}, 8, ["backgroundColor", "color", "headerBg", "headerColor", "isFullscreen", "fullscreenParent"])) : v("", !0),
i(Ue) ? (o(), T(zl, { key: 9 })) : v("", !0)
], 46, Il));
}
}, Ea = /* @__PURE__ */ $l(ka, [["__scopeId", "data-v-7a81cb76"]]);
export {
Ea as default
};