vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,333 lines (1,332 loc) • 44.8 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, At as n, Bt as r, D as i, Jt as a, Kt as o, M as s, Pt as c, S as ee, Vt as te, X as l, b as ne, ct as re, i as ie, jt as ae, pt as oe, q as se, t as ce, tt as u, w as le, xt as ue } from "./lib-Bttd6u5E.js";
import { n as de } from "./useHints-Dq_w2E8B.js";
import { t as fe } from "./useConfig-D3scuR88.js";
import { t as pe } from "./usePrinter-DN5bYhTG.js";
import { n as me, t as he } from "./BaseScanner-DZvpgOjM.js";
import { t as ge } from "./useSvgExport-DH-FfcqQ.js";
import { t as _e } from "./useNestedProp-vPNvh7rV.js";
import { t as ve } from "./useThemeCheck-C43Tcqmk.js";
import { t as ye } from "./img-Bnokohej.js";
import { n as be } from "./Title-BE3qg9xl.js";
import { t as xe } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as Se, t as Ce } from "./useResponsive-ZtArZtUf.js";
import { t as we } from "./DefGrad-DVBqDjhO.js";
import { t as Te } from "./BaseLegendToggle-DZVucLnv.js";
import { t as Ee } from "./A11yDataTable-DdRsVULz.js";
import { t as De } from "./useUserOptionState-DK-_1ddE.js";
import { t as Oe } from "./useChartAccessibility-DYqac8yF.js";
import { t as ke } from "./Legend-CQxUgOd-.js";
import { t as Ae } from "./useAutoSizeLabelsInsideViewbox-DvDwcwi_.js";
import { t as je } from "./vue_ui_radar-jafTED5j.js";
import { Fragment as d, Teleport as Me, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as Ne, createTextVNode as Pe, createVNode as Fe, defineAsyncComponent as _, guardReactiveProps as v, mergeProps as Ie, nextTick as Le, normalizeClass as Re, normalizeProps as y, normalizeStyle as b, onBeforeUnmount as ze, onMounted as Be, openBlock as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as Ve, shallowRef as He, toDisplayString as T, toRefs as Ue, unref as E, watch as We, withCtx as D } from "vue";
//#region src/components/vue-ui-radar.vue
var Ge = /* @__PURE__ */ e({ default: () => bt }), Ke = ["id"], qe = ["id"], Je = ["id"], Ye = { style: { position: "relative" } }, Xe = [
"xmlns",
"aria-describedby",
"viewBox"
], Ze = ["width", "height"], Qe = { key: 1 }, $e = [
"x1",
"y1",
"x2",
"y2",
"stroke",
"stroke-width"
], et = { key: 0 }, tt = [
"d",
"stroke",
"stroke-width"
], nt = [
"d",
"stroke",
"stroke-width"
], rt = { key: 2 }, it = [
"x",
"y",
"text-anchor",
"font-size",
"fill",
"onMouseenter",
"onMouseleave",
"onClick"
], at = [
"points",
"stroke",
"stroke-width"
], ot = [
"points",
"stroke",
"stroke-width",
"fill"
], st = [
"d",
"stroke",
"stroke-width",
"stroke-dasharray"
], ct = { key: 4 }, lt = [
"cx",
"cy",
"fill",
"r",
"stroke"
], ut = {
key: 0,
style: {
position: "absolute",
top: "100%",
left: "0",
width: "100%"
},
"data-dom-to-png-ignore": "",
"aria-hidden": "true"
}, dt = {
key: 5,
class: "vue-data-ui-watermark"
}, ft = ["id"], pt = ["onClick"], mt = { class: "vue-data-ui-legend-item" }, ht = [
"stroke",
"stroke-width",
"stroke-dasharray"
], gt = {
key: 0,
style: {
"max-width": "200px",
margin: "0 auto"
}
}, _t = {
class: "vue-ui-radar-tooltip-datalabel",
style: { width: "100%" }
}, vt = { class: "vue-ui-radar-tooltip-datalabel-name" }, yt = { key: 0 }, bt = /*#__PURE__*/ xe({
__name: "vue-ui-radar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
emits: ["selectLegend", "copyAlt"],
setup(e, { expose: xe, emit: Ge }) {
let bt = _(() => import("./Tooltip-DhjyfHwz.js")), xt = _(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), St = _(() => import("./vue-ui-sparkbar-DFp2k7-7.js").then((e) => e.n)), Ct = _(() => import("./vue-ui-accordion-BxGriZik.js").then((e) => e.n)), wt = _(() => import("./DataTable-BbKgJ5UI.js")), Tt = _(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), Et = _(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), Dt = _(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), Ot = _(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_radar: kt } = fe(), { isThemeValid: At, warnInvalidTheme: jt } = ve(), O = e, Mt = f(() => !!O.dataset && Object.keys(O.dataset).length), k = S(se()), A = S(!1), Nt = S(""), Pt = S(0), j = S(null), Ft = S(null), It = S(null), Lt = S(null), Rt = S(null), zt = S(0), Bt = S(0), Vt = S(0), Ht = S(!1), M = S(null), Ut = S(null), Wt = S(!1), Gt = S(!1), N = S(null), Kt = S({
x: 0,
y: 0
}), P = S("pointer"), qt = S(!1), F = S($t());
de({
config: () => F.value,
dataset: () => O.dataset,
component: "VueUiRadar",
rules: [
{
test: (e) => e?.categories && e.categories.length === 0,
message: [
"👀 There are no categories in your dataset. Consider:",
"",
"▶️ Adding categories..."
]
},
{
test: (e) => e?.series && e.series.length === 0,
message: [
"👀 There are no series in your dataset. Consider:",
"",
"▶️ Adding series..."
]
},
{
test: (e) => e?.categories && e.categories.length > 3,
message: [
"👀 The number of categories > 3, the chart might become hard to read. Consider:",
"",
"▶️ Using several instances of the component to display related categories.",
"",
"▶️ Adding filters to allow users to choose a maximum number of categories."
]
},
{
test: (e) => e?.series && e.series.length > 12,
message: [
"👀 The number of series is > 12. Consider:",
"",
"▶️ Using several instances of the component to distribute the series.",
"",
"▶️ Using filters to let users choose a maximum number of series to display.",
""
]
}
]
});
let I = f(() => F.value.userOptions.useCursorPointer), Jt = f(() => a({
defaultConfig: {
userOptions: { show: !1 },
table: { show: !1 },
useCssAnimation: !1,
style: { chart: {
backgroundColor: "#99999930",
layout: {
grid: { stroke: "#6A6A6A90" },
labels: { dataLabels: { show: !1 } },
outerPolygon: { stroke: "#6A6A6A" }
},
legend: { backgroundColor: "transparent" }
} }
},
userConfig: F.value.skeletonConfig ?? {}
})), { loading: Yt, FINAL_DATASET: L } = me({
...Ue(O),
FINAL_CONFIG: F,
prepareConfig: $t,
callback: () => {
Promise.resolve().then(async () => {
await Le(), H.value.showTable = F.value.table.show;
});
},
skeletonDataset: O.config?.skeletonDataset ?? {
categories: [{
name: "_",
color: "#6A6A6A"
}],
series: [
{
name: "_",
values: [.6],
target: 1
},
{
name: "_",
values: [.6],
target: 1
},
{
name: "_",
values: [.6],
target: 1
},
{
name: "_",
values: [.6],
target: 1
},
{
name: "_",
values: [.6],
target: 1
},
{
name: "_",
values: [.6],
target: 1
}
]
},
skeletonConfig: a({
defaultConfig: F.value,
userConfig: Jt.value
})
}), { userOptionsVisible: Xt, setUserOptionsVisibility: Zt, keepUserOptionState: Qt } = De({ config: F.value }), { svgRef: R } = Oe({ config: F.value.style.chart.title });
function $t() {
let e = _e({
userConfig: O.config,
defaultConfig: kt
}), t = e.theme;
if (!t) return e;
if (!At.value(e)) return jt(e), e;
let n = _e({
userConfig: je[t] || O.config,
defaultConfig: e
}), r = _e({
userConfig: O.config,
defaultConfig: n
});
return {
...r,
customPalette: r.customPalette.length ? r.customPalette : o[t] || c
};
}
We(() => O.config, (e) => {
F.value = $t(), Xt.value = !F.value.userOptions.showOnChartHover, en(), zt.value += 1, Bt.value += 1, Vt.value += 1, H.value.dataLabels.show = F.value.style.chart.layout.labels.dataLabels.show, H.value.showTable = F.value.table.show, H.value.showTooltip = F.value.style.chart.tooltip ? F.value.style.chart.tooltip.show : !1;
}, { deep: !0 });
let z = He(null), B = He(null), V = f(() => F.value.debug);
function en() {
if (ae(O.dataset) && u({
componentName: "VueUiRadar",
type: "dataset",
debug: V.value
}), F.value.responsive) {
let e = Se(() => {
let { width: e, height: t } = Ce({
chart: j.value,
title: F.value.style.chart.title.text ? Ft.value : null,
legend: F.value.style.chart.legend.show ? It.value : null,
source: Lt.value,
noTitle: Rt.value
});
requestAnimationFrame(() => {
U.value.width = e, U.value.height = t, Dn();
});
});
z.value && (B.value && z.value.unobserve(B.value), z.value.disconnect()), z.value = new ResizeObserver(e), B.value = j.value.parentNode, z.value.observe(B.value);
}
Dn();
}
Be(() => {
Ht.value = !0, en();
}), ze(() => {
z.value && (B.value && z.value.unobserve(B.value), z.value.disconnect());
});
let { isPrinting: tn, isImaging: nn, generatePdf: rn, generateImage: an } = pe({
elementId: `vue-ui-radar_${k.value}`,
fileName: F.value.style.chart.title.text || "vue-ui-radar",
options: F.value.userOptions.print
}), on = f(() => F.value.userOptions.show && !F.value.style.chart.title.text), sn = f(() => le(F.value.customPalette)), H = S({
dataLabels: { show: F.value.style.chart.layout.labels.dataLabels.show },
showTable: F.value.table.show,
showTooltip: F.value.style.chart.tooltip.show
}), cn = f(() => ({ style: {
backgroundColor: "#FFFFFF00",
animation: {
show: F.value.style.chart.tooltip.animation.show,
animationFrames: F.value.style.chart.tooltip.animation.animationFrames
},
labels: {
fontSize: F.value.style.chart.tooltip.fontSize,
name: { color: F.value.style.chart.tooltip.color }
},
gutter: {
backgroundColor: "#CCCCCC",
opacity: 30
}
} })), U = S({
height: 312,
width: 512
}), ln = Ge, W = S([]), G = S(null), K = S(!1);
function un() {
W.value.length ? W.value = [] : X.value.forEach((e, t) => {
W.value.push(t);
}), dn();
}
function dn() {
ln("selectLegend", X.value.filter((e, t) => !W.value.includes(t)).map((e) => ({
name: e.name,
color: e.color,
proportion: e.totalProportion
})));
}
function fn(e) {
K.value = !0, W.value.includes(e) ? (G.value = e, W.value = W.value.filter((t) => t !== e), setTimeout(() => {
K.value = !1, G.value = null;
}, 500)) : (W.value.push(e), setTimeout(() => {
K.value = !1;
}, 500)), dn();
}
function pn() {
return X.value.map((e) => ({
name: e.name,
color: e.color,
proportion: e.totalProportion
}));
}
function mn() {
let e = L.value;
if ([null, void 0].includes(e?.categories)) {
u({
componentName: "VueUiRadar",
type: "dataset",
debug: V.value
}), u({
componentName: "VueUiRadar",
type: "datasetAttribute",
property: "categories ({ name: string; prefix?: string; suffix?: string}[])",
debug: V.value
});
return;
}
e.categories.length === 0 ? u({
componentName: "VueUiRadar",
type: "datasetAttributeEmpty",
property: "categories",
debug: V.value
}) : e.categories.forEach((e, t) => {
oe({
datasetObject: e,
requiredAttributes: ["name"]
}).forEach((e) => {
u({
componentName: "VueUiRadar",
type: "datasetAttribute",
property: `category.${e} at index ${t}`,
index: t,
debug: V.value
});
});
}), [null, void 0].includes(e?.series) ? u({
componentName: "VueUiRadar",
type: "datasetAttribute",
property: "series ({ name: string; values: number[]; color?: string; target: number}[])",
debug: V.value
}) : e.series.forEach((e, t) => {
oe({
datasetObject: e,
requiredAttributes: [
"name",
"values",
"target"
]
}).forEach((e) => {
u({
componentName: "VueUiRadar",
type: "datasetSerieAttribute",
key: "series",
property: e,
index: t,
debug: V.value
});
});
});
}
We(() => L.value, () => mn(), {
deep: !0,
immediate: !0
});
let q = f(() => {
let e = Array.isArray(L.value?.categories) ? L.value.categories : [], t = sn.value ?? c;
return e.map((e, n) => ({
name: e?.name ?? "",
categoryId: `radar_category_${k.value}_${n}`,
color: ee(e?.color) || t[n] || c[n % c.length],
prefix: e?.prefix ?? "",
suffix: e?.suffix ?? ""
}));
}), J = f(() => L.value.series.map((e, t) => ({
...e,
color: ee(e.color) || sn.value[t] || c[t] || c[t % c.length],
serieId: `radar_serie_${k.value}_${t}`,
formatter: e.formatter || null,
absoluteIndex: t
})));
function hn(e) {
return J.value.length ? X.value.find((t) => t.name === e) || (F.value.debug && console.warn(`VueUiRadar - Series name not found "${e}"`), null) : (F.value.debug && console.warn("VueUiRadar - There are no series to show."), null);
}
function gn(e) {
let t = hn(e);
t !== null && W.value.includes(t.absoluteIndex) && fn(t.absoluteIndex);
}
function _n(e) {
let t = hn(e);
t !== null && (W.value.includes(t.absoluteIndex) || fn(t.absoluteIndex));
}
let vn = f(() => Math.max(0, ...J.value.flatMap((e) => e.values)));
function yn(e) {
return F.value.style.chart.layout.scaleToAxisMax ? Math.max(1, e.target || 0, ...e.values) : e.target || vn.value || 1;
}
let bn = f(() => J.value.map((e, t) => {
let n = Cn.value.coordinates[t];
return On({
centerX: U.value.width / 2,
centerY: U.value.height / 2,
apexX: n.x,
apexY: n.y,
proportion: (e.target || 0) / yn(e)
});
})), xn = f(() => J.value.length), Sn = f(() => Math.min(U.value.width, U.value.height) / 3), Cn = f(() => s({
plot: {
x: U.value.width / 2,
y: U.value.height / 2
},
radius: Sn.value,
sides: xn.value,
rotation: 0
})), wn = f(() => {
let e = [];
for (let t = 0; t < Sn.value; t += Sn.value / F.value.style.chart.layout.grid.graduations) e.push(t);
return e;
}), Y = f(() => Cn.value.coordinates.map((e, t) => {
let n = J.value[t], r = J.value[t].values.map((t) => On({
centerX: U.value.width / 2,
centerY: U.value.height / 2,
apexX: e.x,
apexY: e.y,
proportion: t / yn(n)
}));
return {
...e,
...n,
plots: r
};
}).map((e) => ({
...e,
labelX: Tn(e).x,
labelY: Tn(e).y,
labelAnchor: Tn(e).anchor
})));
function Tn({ x: e, y: t }) {
let n = "middle";
return e = Math.round(e), t = Math.round(t), e > U.value.width / 2 && (e += 12, n = "start"), e < U.value.width / 2 && (e -= 12, n = "end"), t > U.value.height / 2 + 1 && (t += 20), t < U.value.height / 2 - 1 && (t -= 12), t === U.value.height / 2 && (t += 4), {
x: e,
y: t,
anchor: n
};
}
let En = f({
get: () => F.value.style.chart.layout.labels.dataLabels.fontSize,
set: (e) => e
}), { autoSizeLabels: Dn } = Ae({
svgRef: R,
fontSize: F.value.style.chart.layout.labels.dataLabels.fontSize,
minFontSize: 6,
sizeRef: En,
labelClass: ".vue-ui-radar-apex-label"
});
function On({ centerX: e, centerY: t, apexX: n, apexY: r, proportion: i }) {
return {
x: e + (n - e) * i,
y: t + (r - t) * i
};
}
let X = f(() => {
let e = J.value.map((e, t) => e.values.map((t) => t / (e.target || vn.value)));
return q.value.map((t, n) => {
let r = ne(e.map((e) => e[n]).reduce((e, t) => e + t, 0) / J.value.length);
return {
...t,
absoluteIndex: n,
totalProportion: r,
shape: "circle",
opacity: W.value.includes(n) ? .5 : 1,
segregate: () => fn(n),
isSegregated: W.value.includes(n),
display: `${t.name}: ${l({
v: (r ?? 0) * 100,
s: "%",
r: F.value.style.chart.legend.roundingPercentage
})}`
};
});
}), kn = f(() => ({
cy: "radar-div-legend",
backgroundColor: F.value.style.chart.legend.backgroundColor,
color: F.value.style.chart.legend.color,
fontSize: F.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: F.value.style.chart.legend.bold ? "bold" : ""
})), Z = f(() => {
let e = [
{
name: F.value.translations.datapoint,
color: ""
},
{
name: F.value.translations.target,
color: ""
},
...X.value
];
return {
head: e,
body: L.value.series.map((e) => [
e.name,
ie(e.formatter, e.target, l({
p: e.prefix,
v: e.target,
s: e.suffix,
r: F.value.table.td.roundingValue
})),
...e.values.map((t, n) => `${ie(e.formatter, t, l({
p: q.value[n]?.prefix ?? "",
v: t,
s: q.value[n]?.suffix ?? "",
r: F.value.table.td.roundingValue
}))} (${isNaN(t / e.target) ? "" : l({
v: t / e.target * 100,
s: "%",
r: F.value.table.td.roundingPercentage
})})`)
]),
config: {
th: {
backgroundColor: F.value.table.th.backgroundColor,
color: F.value.table.th.color,
outline: F.value.table.th.outline
},
td: {
backgroundColor: F.value.table.td.backgroundColor,
color: F.value.table.td.color,
outline: F.value.table.td.outline
},
breakpoint: F.value.table.responsiveBreakpoint
},
colNames: e
};
}), Q = S(null), An = S([]), jn = S(null);
function Mn(e, t) {
A.value = !1, Q.value = null, N.value = null, P.value = "pointer", F.value.events.datapointLeave && F.value.events.datapointLeave({
datapoint: e,
seriesIndex: t
});
}
function Nn(e, t) {
F.value.events.datapointClick && F.value.events.datapointClick({
datapoint: e,
seriesIndex: t
});
}
function Pn(e, t, n = "pointer") {
F.value.events.datapointEnter && F.value.events.datapointEnter({
datapoint: e,
seriesIndex: t
}), P.value = n, N.value = t;
let r = q.value.slice();
An.value = [], Q.value = t, A.value = !0, jn.value = {
datapoint: e,
seriesIndex: t,
series: {
categories: r,
datapoints: J.value,
radar: Y.value
},
config: F.value
};
let i = F.value.style.chart.tooltip.customFormat;
if (ue(i) && re(() => i({
seriesIndex: t,
datapoint: e,
series: {
categories: r,
datapoints: J.value,
radar: Y.value
},
config: F.value
}))) {
Nt.value = i({
seriesIndex: t,
datapoint: e,
series: {
categories: r,
datapoints: J.value,
radar: Y.value
},
config: F.value
});
return;
}
Nt.value = `<div style="width:100%;text-align:center;border-bottom:1px solid ${F.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${e.name}</div>`;
for (let t = 0; t < e.values.length; t += 1) if (!W.value.includes(t)) {
let n = r[t], i = e.values[t], a = isNaN(i / e.target) ? 0 : i / e.target * 100, o = ie(e.formatter, i, l({
p: q.value[t].prefix,
v: i,
s: q.value[t].suffix,
r: F.value.style.chart.tooltip.roundingValue
}), { datapoint: e }), s = l({
v: a,
s: "%",
r: F.value.style.chart.tooltip.roundingPercentage
}), c = F.value.style.chart.tooltip.showValue && F.value.style.chart.tooltip.showPercentage ? `${o} (${s})` : F.value.style.chart.tooltip.showValue && !F.value.style.chart.tooltip.showPercentage ? o : !F.value.style.chart.tooltip.showValue && F.value.style.chart.tooltip.showPercentage ? `${s}` : "";
An.value.push({
name: n?.name ?? `#${t + 1}`,
value: e.values[t] / e.target * 100,
color: n?.color,
suffix: c,
prefix: "",
rounding: F.value.style.chart.tooltip.roundingPercentage,
formatter: e.formatter
});
}
}
function Fn(e = null) {
Le(() => {
let n = [
[F.value.style.chart.title.text],
[F.value.style.chart.title.subtitle.text],
[""]
], r = [
[""],
[F.value.translations.target],
...X.value.flatMap((e) => [[e.name], ["%"]])
], a = L.value.series.map((e, t) => [
e.name,
e.target,
...e.values.flatMap((t) => [t, isNaN(t / e.target) ? "" : t / e.target * 100])
]), o = n.concat([r]).concat(a), s = i(o);
e ? e(s) : t({
csvContent: s,
title: F.value.style.chart.title.text || "vue-ui-radar"
});
});
}
let $ = S(!1);
function In(e) {
$.value = e, Pt.value += 1;
}
function Ln() {
H.value.showTable = !H.value.showTable;
}
function Rn() {
H.value.showTooltip = !H.value.showTooltip;
}
let zn = S(!1);
function Bn() {
zn.value = !zn.value;
}
async function Vn({ scale: e = 2 } = {}) {
if (!j.value) return;
let { width: t, height: n } = j.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await ye({
domElement: j.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: F.value.style.chart.title.text,
width: t,
height: n,
aspectRatio: r
};
}
let Hn = f(() => {
let e = F.value.table.useDialog && !F.value.table.show, t = H.value.showTable;
return {
component: e ? Ot : Ct,
title: `${F.value.style.chart.title.text}${F.value.style.chart.title.subtitle.text ? `: ${F.value.style.chart.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: F.value.table.th.backgroundColor,
color: F.value.table.th.color,
headerColor: F.value.table.th.color,
headerBg: F.value.table.th.backgroundColor,
isFullscreen: $.value,
fullscreenParent: j.value,
forcedWidth: Math.min(800, window.innerWidth * .8),
isCursorPointer: I.value
} : {
hideDetails: !0,
config: {
open: t,
maxHeight: 1e4,
body: {
backgroundColor: F.value.style.chart.backgroundColor,
color: F.value.style.chart.color
},
head: {
backgroundColor: F.value.style.chart.backgroundColor,
color: F.value.style.chart.color
}
}
}
};
});
We(() => H.value.showTable, (e) => {
F.value.table.show || (e && F.value.table.useDialog && M.value ? M.value.open() : "close" in M.value && M.value.close());
});
function Un() {
H.value.showTable = !1, Ut.value && Ut.value.setTableIconState(!1);
}
let Wn = f(() => X.value.map((e) => ({
...e,
name: e.display
}))), Gn = f(() => F.value.style.chart.backgroundColor), Kn = f(() => F.value.style.chart.legend), qn = f(() => F.value.style.chart.title), { exportSvg: Jn, getSvg: Yn } = ge({
svg: R,
title: qn,
legend: Kn,
legendItems: Wn,
backgroundColor: Gn
});
async function Xn({ isCb: e }) {
Gt.value = !0, await Le();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await Yn();
await Promise.resolve(F.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(Jn());
} finally {
Gt.value = !1;
}
}
function Zn(e) {
if (e?.stage === "start") {
Wt.value = !0;
return;
}
if (e?.stage === "end") {
Wt.value = !1;
return;
}
an();
}
async function Qn() {
if (ln("copyAlt", {
config: F.value,
dataset: Y.value
}), !F.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(F.value.userOptions.callbacks.altCopy({
config: F.value,
dataset: Y.value
}));
}
function $n() {
N.value = null, qt.value = !0;
}
function er() {
N.value = null, P.value = "pointer", A.value = !1, Q.value = null, qt.value = !1;
}
function tr(e) {
if (!Number.isFinite(e) || !R.value) return;
let t = Y.value[e];
if (!t) return;
let n = R.value.getBoundingClientRect();
Kt.value = {
x: n.left + t.labelX / U.value.width * n.width,
y: n.top + t.labelY / U.value.height * n.height
};
}
function nr(e) {
if (!R.value || zn.value || document.activeElement !== R.value || !Y.value.length) return;
let t = ["ArrowLeft", "ArrowUp"].includes(e.key), n = ["ArrowRight", "ArrowDown"].includes(e.key), r = e.key === "Enter" || e.key === " ", i = e.key === "Escape";
if (!t && !n && !r && !i) return;
if (e.preventDefault(), e.stopPropagation(), i) {
N.value = null, P.value = "pointer", A.value = !1, Q.value = null;
return;
}
if (r) {
if (N.value === null) return;
let e = Y.value[N.value];
if (!e) return;
Nn(e, N.value);
return;
}
let a = N.value;
a === null || a < 0 || a >= Y.value.length ? a = n ? 0 : Y.value.length - 1 : n ? (a += 1, a >= Y.value.length && (a = 0)) : t && (--a, a < 0 && (a = Y.value.length - 1));
let o = Y.value[a];
o && (N.value = a, tr(a), Pn(o, a, "keyboard"));
}
let rr = f(() => ({
headers: Z.value?.colNames?.map((e) => e.name ?? e) ?? [],
rows: Z.value?.body ?? []
}));
return xe({
getData: pn,
getImage: Vn,
generatePdf: rn,
generateCsv: Fn,
generateImage: an,
generateSvg: Xn,
hideSeries: _n,
showSeries: gn,
toggleTable: Ln,
toggleTooltip: Rn,
toggleAnnotator: Bn,
toggleFullscreen: In,
copyAlt: Qn
}), (e, t) => (x(), h("div", {
class: Re(`vue-data-ui-component vue-ui-radar ${$.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${F.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "radarChart",
ref: j,
id: `vue-ui-radar_${k.value}`,
style: b(`font-family:${F.value.style.fontFamily};width:100%; ${F.value.responsive ? "height: 100%;" : ""} text-align:center;background:${F.value.style.chart.backgroundColor}`),
onMouseenter: t[2] ||= () => E(Zt)(!0),
onMouseleave: t[3] ||= () => E(Zt)(!1)
}, [
g("div", {
id: `chart-instructions-${k.value}`,
class: "sr-only"
}, [g("p", null, T(F.value.a11y.translations.keyboardNavigation), 1)], 8, qe),
rr.value?.rows?.length ? (x(), p(Ee, {
key: 0,
uid: k.value,
head: rr.value.headers,
body: rr.value.rows,
notice: F.value.a11y.translations.tableAvailable,
caption: F.value.a11y.translations.tableCaption
}, null, 8, [
"uid",
"head",
"body",
"notice",
"caption"
])) : m("", !0),
F.value.userOptions.buttons.annotator ? (x(), p(E(Tt), {
key: 1,
svgRef: E(R),
backgroundColor: F.value.style.chart.backgroundColor,
color: F.value.style.chart.color,
active: zn.value,
isCursorPointer: I.value,
onClose: Bn
}, {
"annotator-action-close": D(() => [w(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": D(({ color: t }) => [w(e.$slots, "annotator-action-color", y(v({ color: t })), void 0, !0)]),
"annotator-action-draw": D(({ mode: t }) => [w(e.$slots, "annotator-action-draw", y(v({ mode: t })), void 0, !0)]),
"annotator-action-undo": D(({ disabled: t }) => [w(e.$slots, "annotator-action-undo", y(v({ disabled: t })), void 0, !0)]),
"annotator-action-redo": D(({ disabled: t }) => [w(e.$slots, "annotator-action-redo", y(v({ disabled: t })), void 0, !0)]),
"annotator-action-delete": D(({ disabled: t }) => [w(e.$slots, "annotator-action-delete", y(v({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : m("", !0),
on.value ? (x(), h("div", {
key: 2,
ref_key: "noTitle",
ref: Rt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : m("", !0),
F.value.style.chart.title.text ? (x(), h("div", {
key: 3,
ref_key: "chartTitle",
ref: Ft,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [(x(), p(be, {
key: `title_${zt.value}`,
config: {
title: {
cy: "radar-div-title",
...F.value.style.chart.title
},
subtitle: {
cy: "radar-div-subtitle",
...F.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : m("", !0),
g("div", { id: `legend-top-${k.value}` }, null, 8, Je),
F.value.userOptions.show && Mt.value && (E(Qt) || E(Xt)) ? (x(), p(E(Et), {
ref_key: "userOptionsRef",
ref: Ut,
key: `user_options_${Pt.value}`,
backgroundColor: F.value.style.chart.backgroundColor,
color: F.value.style.chart.color,
isImaging: E(nn),
isPrinting: E(tn),
uid: k.value,
hasTooltip: F.value.userOptions.buttons.tooltip && F.value.style.chart.tooltip.show,
hasPdf: F.value.userOptions.buttons.pdf,
hasImg: F.value.userOptions.buttons.img,
hasSvg: F.value.userOptions.buttons.svg,
hasXls: F.value.userOptions.buttons.csv,
hasTable: F.value.userOptions.buttons.table,
hasFullscreen: F.value.userOptions.buttons.fullscreen,
hasAltCopy: F.value.userOptions.buttons.altCopy,
isFullscreen: $.value,
isTooltip: H.value.showTooltip,
titles: { ...F.value.userOptions.buttonTitles },
chartElement: j.value,
position: F.value.userOptions.position,
hasAnnotator: F.value.userOptions.buttons.annotator,
isAnnotation: zn.value,
callbacks: F.value.userOptions.callbacks,
printScale: F.value.userOptions.print.scale,
tableDialog: F.value.table.useDialog,
isCursorPointer: I.value,
onToggleFullscreen: In,
onGeneratePdf: E(rn),
onGenerateCsv: Fn,
onGenerateImage: Zn,
onGenerateSvg: Xn,
onToggleTable: Ln,
onToggleTooltip: Rn,
onToggleAnnotator: Bn,
onCopyAlt: Qn,
style: b({ visibility: E(Qt) ? E(Xt) ? "visible" : "hidden" : "visible" })
}, Ne({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: D(({ isOpen: t, color: n }) => [w(e.$slots, "menuIcon", y(v({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: D(() => [w(e.$slots, "optionTooltip", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: D(() => [w(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: D(() => [w(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: D(() => [w(e.$slots, "optionImg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: D(() => [w(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: D(() => [w(e.$slots, "optionTable", {}, void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: D(({ toggleFullscreen: t, isFullscreen: n }) => [w(e.$slots, "optionFullscreen", y(v({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "7"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: D(({ toggleAnnotator: t, isAnnotator: n }) => [w(e.$slots, "optionAnnotator", y(v({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "8"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: D(({ altCopy: t }) => [w(e.$slots, "optionAltCopy", y(v({ altCopy: t })), void 0, !0)]),
key: "9"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: D(() => [w(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "10"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: D(() => [w(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "11"
} : void 0
]), 1032, /* @__PURE__ */ "backgroundColor.color.isImaging.isPrinting.uid.hasTooltip.hasPdf.hasImg.hasSvg.hasXls.hasTable.hasFullscreen.hasAltCopy.isFullscreen.isTooltip.titles.chartElement.position.hasAnnotator.isAnnotation.callbacks.printScale.tableDialog.isCursorPointer.onGeneratePdf.style".split("."))) : m("", !0),
g("div", Ye, [(x(), h("svg", {
ref_key: "svgRef",
ref: R,
xmlns: E(ce),
"aria-describedby": `chart-instructions-${k.value}`,
class: Re({
"vue-data-ui-fullscreen--on": $.value,
"vue-data-ui-fulscreen--off": !$.value
}),
viewBox: `0 0 ${U.value.width <= 0 ? 10 : U.value.width} ${U.value.height <= 0 ? 10 : U.value.height}`,
style: b(`max-width:100%;overflow:visible;background:transparent;color:${F.value.style.chart.color}`),
tabindex: "0",
onFocus: $n,
onBlur: er,
onKeydown: nr
}, [
Fe(E(Dt)),
e.$slots["chart-background"] ? (x(), h("foreignObject", {
key: 0,
x: 0,
y: 0,
width: U.value.width <= 0 ? 10 : U.value.width,
height: U.value.height <= 0 ? 10 : U.value.height,
style: { pointerEvents: "none" }
}, [w(e.$slots, "chart-background", {}, void 0, !0)], 8, Ze)) : m("", !0),
g("defs", null, [(x(!0), h(d, null, C(q.value, (e, t) => (x(), p(we, {
t: "radial",
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `radar_gradient_${k.value}_${t}`,
key: `radar_gradient_${k.value}_${t}`,
stops: [[
"0%",
E(r)(E(te)(e.color, .05), F.value.style.chart.layout.dataPolygon.opacity),
1
], [
"100%",
E(r)(e.color, F.value.style.chart.layout.dataPolygon.opacity),
1
]]
}, null, 8, ["id", "stops"]))), 128))]),
F.value.style.chart.layout.grid.show ? (x(), h("g", Qe, [(x(!0), h(d, null, C(Y.value, (e) => (x(), h("line", {
x1: U.value.width / 2,
y1: U.value.height / 2,
x2: e.x,
y2: e.y,
stroke: F.value.style.chart.layout.grid.stroke,
"stroke-width": F.value.style.chart.layout.grid.strokeWidth
}, null, 8, $e))), 256)), F.value.style.chart.layout.grid.graduations > 0 ? (x(), h("g", et, [(x(!0), h(d, null, C(wn.value, (e) => (x(), h("path", {
d: E(s)({
plot: {
x: U.value.width / 2,
y: U.value.height / 2
},
radius: e,
sides: xn.value,
rotation: 0
}).path,
fill: "none",
stroke: F.value.style.chart.layout.grid.stroke,
"stroke-width": F.value.style.chart.layout.grid.strokeWidth
}, null, 8, tt))), 256))])) : m("", !0)])) : m("", !0),
g("path", {
d: Cn.value.path,
fill: "none",
stroke: F.value.style.chart.layout.outerPolygon.stroke,
"stroke-width": F.value.style.chart.layout.outerPolygon.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round"
}, null, 8, nt),
F.value.style.chart.layout.labels.dataLabels.show ? (x(), h("g", rt, [(x(!0), h(d, null, C(Y.value, (e, t) => (x(), h("text", {
class: "vue-ui-radar-apex-label",
x: e.labelX,
y: e.labelY,
"text-anchor": e.labelAnchor,
"font-size": F.value.style.chart.layout.labels.dataLabels.fontSize,
fill: F.value.style.chart.layout.labels.dataLabels.color,
onMouseenter: (n) => Pn(e, t, "pointer"),
onMouseleave: (n) => Mn(e, t),
onClick: (n) => Nn(e, t)
}, T(e.name), 41, it))), 256))])) : m("", !0),
(x(!0), h(d, null, C(q.value, (e, t) => (x(), h("g", null, [g("g", null, [F.value.useCssAnimation || !F.value.useCssAnimation && !W.value.includes(t) ? (x(), h("polygon", {
key: 0,
points: E(n)(Y.value.map((e) => e.plots[t]), !1, !0),
stroke: F.value.style.chart.backgroundColor,
"stroke-width": F.value.style.chart.layout.dataPolygon.strokeWidth + 1,
fill: "none",
class: Re({
"animated-out": W.value.includes(t) && F.value.useCssAnimation,
"animated-in": K.value && G.value === t && F.value.useCssAnimation
})
}, null, 10, at)) : m("", !0), F.value.useCssAnimation || !F.value.useCssAnimation && !W.value.includes(t) ? (x(), h("polygon", {
key: 1,
points: E(n)(Y.value.map((e) => e.plots[t]), !1, !0),
stroke: e.color,
"stroke-width": F.value.style.chart.layout.dataPolygon.strokeWidth,
fill: F.value.style.chart.layout.dataPolygon.transparent ? "transparent" : F.value.style.chart.layout.dataPolygon.useGradient ? `url(#radar_gradient_${k.value}_${t})` : E(r)(e.color, F.value.style.chart.layout.dataPolygon.opacity),
class: Re({
"animated-out": W.value.includes(t) && F.value.useCssAnimation,
"animated-in": K.value && G.value === t && F.value.useCssAnimation
})
}, null, 10, ot)) : m("", !0)])]))), 256)),
F.value.style.chart.layout.targetReference.show ? (x(), h("path", {
key: 3,
class: "vue-ui-radar-target-polygon",
d: `M${E(n)(bn.value, !1, !0)}Z`,
fill: "none",
stroke: F.value.style.chart.layout.targetReference.stroke,
"stroke-width": F.value.style.chart.layout.targetReference.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
"stroke-dasharray": F.value.style.chart.layout.targetReference.strokeDasharray
}, null, 8, st)) : m("", !0),
F.value.style.chart.layout.plots.show ? (x(), h("g", ct, [(x(!0), h(d, null, C(Y.value, (e, t) => (x(), h("g", null, [(x(!0), h(d, null, C(e.plots, (e, n) => (x(), h("circle", {
cx: e.x,
cy: e.y,
fill: W.value.includes(n) ? "transparent" : q.value[n] ? q.value[n].color : "transparent",
r: Q.value !== null && Q.value === t ? F.value.style.chart.layout.plots.radius * 1.6 : F.value.style.chart.layout.plots.radius,
stroke: W.value.includes(n) ? "transparent" : F.value.style.chart.backgroundColor,
"stroke-width": .5,
class: Re({
"animated-out": W.value.includes(n) && F.value.useCssAnimation,
"animated-in": K.value && G.value === n && F.value.useCssAnimation
})
}, null, 10, lt))), 256))]))), 256))])) : m("", !0),
w(e.$slots, "svg", { svg: {
...U.value,
outerPolygon: Cn.value,
isPrintingImg: E(tn) || E(nn) || Wt.value,
isPrintingSvg: Gt.value
} }, void 0, !0)
], 46, Xe)), e.$slots.hint ? (x(), h("div", ut, [w(e.$slots, "hint", y(v({
hint: F.value.a11y.translations.keyboardNavigation,
isVisible: qt.value
})), void 0, !0)])) : m("", !0)]),
e.$slots.watermark ? (x(), h("div", dt, [w(e.$slots, "watermark", y(v({ isPrinting: E(tn) || E(nn) || Wt.value || Gt.value })), void 0, !0)])) : m("", !0),
g("div", { id: `legend-bottom-${k.value}` }, null, 8, ft),
Ht.value && (F.value.style.chart.legend.show || e.$slots.legend) ? (x(), p(Me, {
key: 6,
to: F.value.style.chart.legend.position === "top" ? `#legend-top-${k.value}` : `#legend-bottom-${k.value}`
}, [g("div", {
ref_key: "chartLegend",
ref: It
}, [w(e.$slots, "legend", { legend: X.value }, () => [F.value.style.chart.legend.show ? (x(), p(ke, {
key: `legend_${Vt.value}`,
legendSet: X.value,
config: kn.value,
isCursorPointer: I.value,
onClickMarker: t[0] ||= ({ i: e }) => fn(e)
}, Ne({
item: D(({ legend: e, index: t }) => [E(Yt) ? m("", !0) : (x(), h("div", {
key: 0,
onClick: (t) => e.segregate(),
style: b(`opacity:${W.value.includes(t) ? .5 : 1}`)
}, T(e.display), 13, pt))]),
legendToggle: D(() => [X.value.length > 2 && F.value.style.chart.legend.selectAllToggle.show && !E(Yt) ? (x(), p(Te, {
key: 0,
backgroundColor: F.value.style.chart.legend.selectAllToggle.backgroundColor,
color: F.value.style.chart.legend.selectAllToggle.color,
fontSize: F.value.style.chart.legend.fontSize,
checked: W.value.length > 0,
isCursorPointer: I.value,
onToggle: un
}, null, 8, [
"backgroundColor",
"color",
"fontSize",
"checked",
"isCursorPointer"
])) : m("", !0)]),
_: 2
}, [F.value.style.chart.layout.targetReference.show && F.value.style.chart.layout.targetReference.showInLegend ? {
name: "after",
fn: D(() => [g("div", mt, [g("div", { style: b({
display: "flex",
height: F.value.style.chart.legend.fontSize
}) }, [(x(), h("svg", {
style: b({ width: F.value.style.chart.legend.fontSize * 2 }),
viewBox: "0 0 16 8"
}, [g("line", {
x1: "0",
x2: "16",
y1: "4",
y2: "4",
stroke: F.value.style.chart.layout.targetReference.stroke,
"stroke-width": F.value.style.chart.layout.targetReference.strokeWidth * .7,
"stroke-dasharray": F.value.style.chart.layout.targetReference.strokeDasharray * .7,
"stroke-linecap": "round"
}, null, 8, ht)], 4))], 4), g("span", null, T(F.value.style.chart.layout.targetReference.legendLabel), 1)])]),
key: "0"
} : void 0]), 1032, [
"legendSet",
"config",
"isCursorPointer"
])) : m("", !0)], !0)], 512)], 8, ["to"])) : m("", !0),
e.$slots.source ? (x(), h("div", {
key: 7,
ref_key: "source",
ref: Lt,
dir: "auto"
}, [w(e.$slots, "source", {}, void 0, !0)], 512)) : m("", !0),
Fe(E(bt), {
teleportTo: F.value.style.chart.tooltip.teleportTo,
show: H.value.showTooltip && A.value,
backgroundColor: F.value.style.chart.tooltip.backgroundColor,
color: F.value.style.chart.tooltip.color,
borderRadius: F.value.style.chart.tooltip.borderRadius,
borderColor: F.value.style.chart.tooltip.borderColor,
borderWidth: F.value.style.chart.tooltip.borderWidth,
backgroundOpacity: F.value.style.chart.tooltip.backgroundOpacity,
fontSize: F.value.style.chart.tooltip.fontSize,
position: F.value.style.chart.tooltip.position,
offsetX: F.value.style.chart.tooltip.offsetX,
offsetY: F.value.style.chart.tooltip.offsetY,
parent: j.value,
content: Nt.value,
isFullscreen: $.value,
isCustom: F.value.style.chart.tooltip.customFormat && typeof F.value.style.chart.tooltip.customFormat == "function",
smooth: F.value.style.chart.tooltip.smooth,
backdropFilter: F.value.style.chart.tooltip.backdropFilter,
smoothForce: F.value.style.chart.tooltip.smoothForce,
smoothSnapThreshold: F.value.style.chart.tooltip.smoothSnapThreshold,
isA11yMode: P.value === "keyboard",
a11yPosition: Kt.value
}, {
"tooltip-before": D(() => [w(e.$slots, "tooltip-before", y(v({ ...jn.value })), void 0, !0)]),
tooltip: D(() => [w(e.$slots, "tooltip", y(v({ ...jn.value })), void 0, !0)]),
"tooltip-after": D(() => [!["function"].includes(typeof F.value.style.chart.tooltip.customFormat) && !e.$slots.tooltip ? (x(), h("div", gt, [Fe(E(St), {
dataset: An.value,
config: cn.value,
backgroundOpacity: 0
}, {
"data-label": D(({ bar: e }) => [g("div", _t, [g("span", vt, T(e.name + (F.value.style.chart.tooltip.showValue || F.value.style.chart.tooltip.showPercentage ? ":" : "")), 1), F.value.style.chart.tooltip.showValue || F.value.style.chart.tooltip.showPercentage ? (x(), h("span", yt, T(e.suffix), 1)) : m("", !0)])]),
_: 1
}, 8, ["dataset", "config"])])) : m("", !0), w(e.$slots, "tooltip-after", y(v({ ...jn.value })), void 0, !0)]),
_: 3
}, 8, [
"teleportTo",
"show",
"backgroundColor",
"color",
"borderRadius",
"borderColor",
"borderWidth",
"backgroundOpacity",
"fontSize",
"position",
"offsetX",
"offsetY",
"parent",
"content",
"isFullscreen",
"isCustom",
"smooth",
"backdropFilter",
"smoothForce",
"smoothSnapThreshold",
"isA11yMode",
"a11yPosition"
]),
Mt.value && F.value.userOptions.buttons.table ? (x(), p(Ve(Hn.value.component), Ie({ key: 8 }, Hn.value.props, {
ref_key: "tableUnit",
ref: M,
onClose: Un
}), Ne({
content: D(() => [(x(), p(E(wt), {
key: `table_${Bt.value}`,
colNames: Z.value.colNames,
head: Z.value.head,
body: Z.value.body,
config: Z.value.config,
title: F.value.table.useDialog ? "" : Hn.value.title,
withCloseButton: !F.value.table.useDialog,
isCursorPointer: I.value,
onClose: Un
}, {
th: D(({ th: e }) => [Pe(T(e.name), 1)]),
td: D(({ td: e }) => [Pe(T(e), 1)]),
_: 1
}, 8, [
"colNames",
"head",
"body",
"config",
"title",
"withCloseButton",
"isCursorPointer"
]))]),
_: 2
}, [F.value.table.useDialog ? {
name: "title",
fn: D(() => [Pe(T(Hn.value.title), 1)]),
key: "0"
} : void 0, F.value.table.useDialog ? {
name: "actions",
fn: D(() => [g("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: t[1] ||= (e) => Fn(F.value.userOptions.callbacks.csv),
style: b({ cursor: I.value ? "pointer" : "default" })
}, [Fe(E(xt), {
name: "fileCsv",
stroke: Hn.value.props.color
}, null, 8, ["stroke"])], 4)]),
key: "1"
} : void 0]), 1040)) : m("", !0),
w(e.$slots, "skeleton", {}, () => [E(Yt) ? (x(), p(he, { key: 0 })) : m("", !0)], !0)
], 46, Ke));
}
}, [["__scopeId", "data-v-92aa007a"]]);
//#endregion
export { Ge as n, bt as t };