vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,112 lines (1,111 loc) • 38.1 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, D as n, Jt as r, Kt as i, Pt as a, R as o, Rt as s, S as ee, X as c, ct as te, i as ne, jt as re, pt as ie, q as ae, t as oe, tt as se, w as ce, xt as le } from "./lib-Bttd6u5E.js";
import { n as ue, t 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 "./useTransitions-g_zBREk2.js";
import { t as be } from "./img-Bnokohej.js";
import { n as xe } from "./Title-BE3qg9xl.js";
import { t as Se } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as Ce, t as we } from "./useResponsive-ZtArZtUf.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 "./labelUtils-BeVpDvTJ.js";
import { t as Ae } from "./Legend-CQxUgOd-.js";
import { t as je } from "./vue_ui_galaxy-Ig0cc1_h.js";
import { Fragment as Me, Teleport as Ne, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as Pe, createTextVNode as Fe, createVNode as Ie, defineAsyncComponent as m, guardReactiveProps as h, mergeProps as Le, nextTick as g, normalizeClass as _, normalizeProps as v, normalizeStyle as y, onMounted as Re, openBlock as b, ref as x, renderList as ze, renderSlot as S, resolveDynamicComponent as Be, toDisplayString as Ve, toRefs as He, unref as C, watch as Ue, withCtx as w } from "vue";
//#region src/components/vue-ui-galaxy.vue
var We = /* @__PURE__ */ e({ default: () => lt }), Ge = ["id"], Ke = ["id"], qe = ["id"], Je = { style: { position: "relative" } }, Ye = [
"xmlns",
"aria-describedby",
"viewBox"
], Xe = ["width", "height"], Ze = ["id"], Qe = ["stdDeviation"], $e = [
"d",
"stroke",
"stroke-width"
], et = [
"d",
"stroke",
"stroke-width"
], tt = ["filter"], nt = [
"d",
"stroke",
"stroke-width"
], rt = [
"data-a11y-serie-id",
"d",
"stroke-width",
"aria-label",
"onMouseenter",
"onMouseleave",
"onClick"
], it = {
key: 0,
style: {
position: "absolute",
top: "100%",
left: "0",
width: "100%"
},
"data-dom-to-png-ignore": "",
"aria-hidden": "true"
}, at = {
key: 5,
class: "vue-data-ui-watermark"
}, ot = ["id"], st = ["onClick"], ct = ["innerHTML"], lt = /*#__PURE__*/ Se({
__name: "vue-ui-galaxy",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: [
"selectLegend",
"selectDatapoint",
"copyAlt"
],
setup(e, { expose: Se, emit: We }) {
let lt = m(() => import("./Tooltip-DhjyfHwz.js")), ut = m(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), dt = m(() => import("./vue-ui-accordion-BxGriZik.js").then((e) => e.n)), ft = m(() => import("./DataTable-BbKgJ5UI.js")), pt = m(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), mt = m(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), ht = m(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), gt = m(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_galaxy: _t } = fe(), { isThemeValid: vt, warnInvalidTheme: yt } = ve(), T = e, E = x(ae()), D = x(null), O = x(!1), bt = x(""), k = x(null), xt = x(0), St = x(0), Ct = x(0), wt = x(0), Tt = x(null), Et = x(null), Dt = x(null), Ot = x(null), A = x(null), kt = x(null), At = x(!1), j = x(null), jt = x(null), Mt = x(!1), M = x(!1), N = x(null), Nt = x(null), Pt = x({
x: 0,
y: 0
}), Ft = x("pointer"), P = x(!1), It = l(() => !!T.dataset && T.dataset.length), F = x(Kt());
ue({
config: () => F.value,
dataset: () => T.dataset,
component: "VueUiGalaxy",
rules: [
de.singleSeries,
de.emptyArray,
{
test: (e) => e.length > 6,
message: [
"👀 The number of series is > 6. Consider:",
"",
"▶️ Grouping small values dynamically into a single \"Other\" series.",
"",
"▶️ Using filters to let users choose a maximum number of series to display.",
"",
"▶️ Using VueUiHorizontalBar instead to make the dataset breakdown easier to read."
]
}
]
});
let { transitionEnabled: Lt } = ye({
config: () => F.value.transitions,
dataset: () => T.dataset
}), I = l(() => F.value.userOptions.useCursorPointer), Rt = l(() => r({
defaultConfig: {
userOptions: { show: !1 },
table: { show: !1 },
useCssAnimation: !1,
style: { chart: {
backgroundColor: "#99999930",
legend: { backgroundColor: "transparent" }
} }
},
userConfig: F.value.skeletonConfig ?? {}
})), { loading: zt, FINAL_DATASET: Bt } = me({
...He(T),
FINAL_CONFIG: F,
prepareConfig: Kt,
callback: () => {
Promise.resolve().then(async () => {
await g(), R.value.showTable = F.value.table.show;
});
},
skeletonDataset: T.config?.skeletonDataset ?? [
{
name: "_",
values: [21],
color: "#DBDBDB"
},
{
name: "_",
values: [13],
color: "#C4C4C4"
},
{
name: "_",
values: [8],
color: "#ADADAD"
}
],
skeletonConfig: r({
defaultConfig: F.value,
userConfig: Rt.value
})
});
Re(() => {
At.value = !0, Ht();
});
let Vt = l(() => !!F.value.debug);
function Ht() {
if (re(T.dataset) ? se({
componentName: "VueUiGalaxy",
type: "dataset",
debug: Vt.value
}) : T.dataset.forEach((e, t) => {
ie({
datasetObject: e,
requiredAttributes: ["name", "values"]
}).forEach((e) => {
se({
componentName: "VueUiGalaxy",
type: "datasetSerieAttribute",
property: e,
index: t,
debug: Vt.value
});
});
}), F.value.responsive) {
let e = Ce(() => {
let { width: e, height: t } = we({
chart: D.value,
title: F.value.style.chart.title.text ? Tt.value : null,
legend: F.value.style.chart.legend.show ? Et.value : null,
noTitle: Ot.value,
source: Dt.value
});
requestAnimationFrame(() => {
z.value = Math.max(.1, e), B.value = Math.max(.1, t - 12);
});
});
A.value && (kt.value && A.value.unobserve(kt.value), A.value.disconnect()), A.value = new ResizeObserver(e), kt.value = D.value.parentNode, A.value.observe(kt.value);
}
}
let { userOptionsVisible: Ut, setUserOptionsVisibility: Wt, keepUserOptionState: Gt } = De({ config: F.value }), { svgRef: L } = Oe({ config: F.value.style.chart.title });
function Kt() {
let e = _e({
userConfig: T.config,
defaultConfig: _t
}), t = e.theme;
if (!t) return e;
if (!vt.value(e)) return yt(e), e;
let n = _e({
userConfig: je[t] || T.config,
defaultConfig: e
}), r = _e({
userConfig: T.config,
defaultConfig: n
});
return {
...r,
customPalette: r.customPalette.length ? r.customPalette : i[t] || a
};
}
Ue(() => T.config, (e) => {
F.value = Kt(), Ut.value = !F.value.userOptions.showOnChartHover, Ht(), St.value += 1, Ct.value += 1, wt.value += 1, R.value.dataLabels.show = F.value.style.chart.layout.labels.dataLabels.show, R.value.showTable = F.value.table.show, R.value.showTooltip = F.value.style.chart.tooltip.show;
}, { deep: !0 });
let { isPrinting: qt, isImaging: Jt, generatePdf: Yt, generateImage: Xt } = pe({
elementId: `galaxy_${E.value}`,
fileName: F.value.style.chart.title.text || "vue-ui-galaxy",
options: F.value.userOptions.print
}), Zt = l(() => F.value.userOptions.show && !F.value.style.chart.title.text), Qt = l(() => ce(F.value.customPalette)), R = x({
dataLabels: { show: F.value.style.chart.layout.labels.dataLabels.show },
showTable: F.value.table.show,
showTooltip: F.value.style.chart.tooltip.show
}), z = x(250), B = x(180), $t = x(0), en = x(0), V = l(() => ({
width: z.value,
height: B.value,
viewBox: `${$t.value} ${en.value} ${z.value} ${B.value}`
})), tn = We, H = x([]);
function nn() {
tn("selectLegend", K.value.map((e) => ({
name: e.name,
color: e.color,
value: e.value
})));
}
function rn() {
H.value.length ? H.value = [] : J.value.forEach((e) => {
H.value.push(e.id);
}), nn();
}
function U(e) {
H.value.includes(e.id) ? H.value = H.value.filter((t) => t !== e.id) : H.value.push(e.id), nn();
}
function an(e) {
return W.value.length ? W.value.find((t) => t.name === e) || (F.value.debug && console.warn(`VueUiGalaxy - Series name not found "${e}"`), null) : (F.value.debug && console.warn("VueUiGalaxy - There are no series to show."), null);
}
function on(e) {
let t = an(e);
t !== null && H.value.includes(t.id) && U({ id: t.id });
}
function sn(e) {
let t = an(e);
t !== null && (H.value.includes(t.id) || U({ id: t.id }));
}
let W = l(() => Bt.value.map((e, t) => ({
name: e.name,
color: ee(e.color) || Qt.value[t] || a[t] || a[t % a.length],
value: e.values ? s(e.values).reduce((e, t) => e + t, 0) : 0,
absoluteValues: s(e.values),
id: ae()
})).sort((e, t) => t.value - e.value).map((e, t) => ({
...e,
absoluteIndex: t
})));
function cn() {
return W.value.map((e) => ({
name: e.name,
color: e.color,
value: e.value
}));
}
let G = l(() => W.value.filter((e) => !H.value.includes(e.id)).map((e) => e.value).reduce((e, t) => e + t, 0)), ln = x(190), un = l(() => W.value.filter((e) => !H.value.includes(e.id))), dn = l(() => (F.value.style.chart.layout.arcs.strokeWidth + F.value.style.chart.layout.arcs.borderWidth) / 2 + (F.value.style.chart.layout.padding ?? 12)), fn = l(() => o({
maxPoints: ln.value,
a: F.value.style.chart.layout.arcs.a ?? 6,
b: F.value.style.chart.layout.arcs.b ?? 6,
angleStep: F.value.style.chart.layout.arcs.angleStep ?? .07,
startX: V.value.width / 2 + F.value.style.chart.layout.arcs.offsetX,
startY: V.value.height / 2 + F.value.style.chart.layout.arcs.offsetY,
boxWidth: V.value.width,
boxHeight: V.value.height,
padding: dn.value
})), K = l(() => {
let e = [];
for (let t = 0; t < un.value.length; t += 1) {
let n = un.value[t], r = n.value / G.value * ln.value + (t > 0 && e.length ? e[t - 1].points : 0);
e.push({
points: r,
...n,
seriesIndex: t,
proportion: n.value / G.value,
path: fn.value(r)
});
}
return e.filter((e) => !H.value.includes(e.id)).toSorted((e, t) => t.points - e.points);
});
function pn(e) {
let t = Math.min(z.value, B.value), n = k.value === e.id && F.value.style.chart.layout.arcs.hoverEffect.show ? F.value.style.chart.layout.arcs.hoverEffect.multiplicator : 1, r = (F.value.style.chart.layout.arcs.strokeWidth + F.value.style.chart.layout.arcs.borderWidth) * n, i = F.value.style.chart.layout.arcs.strokeWidth * n, a = F.value.style.chart.layout.arcs.strokeWidth / 2 * n;
return {
border: r / 180 * t,
path: i / 180 * t,
blur: a / 180 * t
};
}
let q = x(!1);
function mn(e) {
q.value = e, xt.value += 1;
}
let hn = x(null);
function gn() {
O.value = !1, k.value = null, N.value = null, Nt.value = null;
}
function _n(e) {
if (!L.value || !e) return;
let t = L.value.querySelector(`[data-a11y-serie-id="${e}"]`);
if (!t) return;
let n = t.getBoundingClientRect();
Pt.value = {
x: n.left + n.width / 2,
y: n.top + n.height / 2
};
}
function vn(e) {
F.value.events.datapointLeave && F.value.events.datapointLeave({
datapoint: e,
seriesIndex: e.absoluteIndex
}), (Nt.value !== e.id || Ft.value !== "keyboard") && (O.value = !1, k.value = null);
}
function yn(e) {
tn("selectDatapoint", e), F.value.events.datapointClick && F.value.events.datapointClick({
datapoint: e,
seriesIndex: e.absoluteIndex
});
}
function bn({ val: e, percentage: t, showVal: n, showPercentage: r }) {
let i = F.value.style.chart.layout.labels.dataLabels;
return ke({
config: i,
val: e,
percentage: t,
showVal: n,
showPercentage: r
});
}
function xn({ datapoint: e, _relativeIndex: t, seriesIndex: n, show: r = !1, triggerMode: i = "pointer", flatIndex: a = null }) {
if (F.value.events.datapointEnter && F.value.events.datapointEnter({
datapoint: e,
seriesIndex: e.absoluteIndex
}), !R.value.showTooltip) return;
Ft.value = i, N.value = a, Nt.value = e.id, hn.value = {
datapoint: e,
seriesIndex: n,
series: W.value,
config: F.value
}, O.value = r, k.value = e.id;
let o = "", s = F.value.style.chart.tooltip.customFormat;
le(s) && te(() => s({
seriesIndex: n,
datapoint: e,
series: W.value,
config: F.value
})) ? bt.value = s({
seriesIndex: n,
datapoint: e,
series: W.value,
config: F.value
}) : (o += `<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>`, o += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${e.color}"/></svg>`, o += `<b>${bn({
showVal: F.value.style.chart.tooltip.showValue,
showPercentage: F.value.style.chart.tooltip.showPercentage,
val: ne(F.value.style.chart.layout.labels.dataLabels.formatter, e.value, c({
p: F.value.style.chart.layout.labels.dataLabels.prefix,
v: e.value,
s: F.value.style.chart.layout.labels.dataLabels.suffix,
r: F.value.style.chart.tooltip.roundingValue
}), {
datapoint: e,
seriesIndex: n
}),
percentage: c({
v: e.proportion * 100,
s: "%",
r: F.value.style.chart.tooltip.roundingPercentage
})
})}</b></div>`, bt.value = `<div>${o}</div>`), i === "keyboard" && g(() => {
_n(e.id);
});
}
let J = l(() => W.value.map((e, t) => {
let n = ne(F.value.style.chart.layout.labels.dataLabels.formatter, e.value, c({
p: F.value.style.chart.layout.labels.dataLabels.prefix,
v: e.value,
s: F.value.style.chart.layout.labels.dataLabels.suffix,
r: F.value.style.chart.legend.roundingValue
}), {
datapoint: e,
index: t
}), r = isNaN(e.value / G.value) || H.value.includes(e.id) ? "-" : c({
v: e.value / G.value * 100,
s: "%",
r: F.value.style.chart.legend.roundingPercentage
}), i = bn({
showVal: F.value.style.chart.legend.showValue,
showPercentage: F.value.style.chart.legend.showPercentage,
val: n,
percentage: r
});
return {
...e,
proportion: (e.value || 0) / Bt.value.map((e) => (e.values || []).reduce((e, t) => e + t, 0)).reduce((e, t) => e + t, 0),
opacity: H.value.includes(e.id) ? .5 : 1,
shape: e.shape || "circle",
segregate: () => U(e),
isSegregated: H.value.includes(e.id),
display: `${e.name}${F.value.style.chart.legend.showPercentage || F.value.style.chart.legend.showValue ? ": " : ""}${i}`
};
})), Sn = l(() => ({
cy: "galaxy-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" : ""
})), Y = l(() => ({
head: K.value.map((e) => ({
name: e.name,
color: e.color
})),
body: K.value.map((e) => e.value)
}));
function Cn(e = null) {
g(() => {
let r = Y.value.head.map((e, t) => [
[e.name],
[Y.value.body[t]],
[isNaN(Y.value.body[t] / G.value) ? "-" : Y.value.body[t] / G.value * 100]
]), i = [
[F.value.style.chart.title.text],
[F.value.style.chart.title.subtitle.text],
[
[""],
["val"],
["%"]
]
].concat(r), a = n(i);
e ? e(a) : t({
csvContent: a,
title: F.value.style.chart.title.text || "vue-ui-galaxy"
});
});
}
let X = l(() => {
let e = [
" <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>",
c({
p: F.value.style.chart.layout.labels.dataLabels.prefix,
v: G.value,
s: F.value.style.chart.layout.labels.dataLabels.suffix,
r: F.value.table.td.roundingValue
}),
"100%"
], t = Y.value.head.map((e, t) => {
let n = c({
p: F.value.style.chart.layout.labels.dataLabels.prefix,
v: Y.value.body[t],
s: F.value.style.chart.layout.labels.dataLabels.suffix,
r: F.value.table.td.roundingValue
});
return [
{
color: e.color,
name: e.name
},
n,
isNaN(Y.value.body[t] / G.value) ? "-" : c({
v: Y.value.body[t] / G.value * 100,
s: "%",
r: F.value.table.td.roundingPercentage
})
];
}), n = {
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
};
return {
colNames: [
F.value.table.columnNames.series,
F.value.table.columnNames.value,
F.value.table.columnNames.percentage
],
head: e,
body: t,
config: n
};
});
function wn() {
R.value.showTable = !R.value.showTable;
}
function Tn() {
R.value.showTooltip = !R.value.showTooltip;
}
let Z = x(!1);
function En() {
Z.value = !Z.value;
}
async function Dn({ scale: e = 2 } = {}) {
if (!D.value) return;
let { width: t, height: n } = D.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await be({
domElement: D.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 Q = l(() => {
let e = F.value.table.useDialog && !F.value.table.show, t = R.value.showTable;
return {
component: e ? gt : dt,
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: q.value,
fullscreenParent: D.value,
forcedWidth: Math.min(500, 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
}
}
}
};
});
Ue(() => R.value.showTable, (e) => {
F.value.table.show || (e && F.value.table.useDialog && j.value ? j.value.open() : "close" in j.value && j.value.close());
});
function On() {
R.value.showTable = !1, jt.value && jt.value.setTableIconState(!1);
}
let kn = l(() => J.value.map((e) => ({
...e,
name: e.display
}))), An = l(() => F.value.style.chart.backgroundColor), jn = l(() => F.value.style.chart.legend), Mn = l(() => F.value.style.chart.title), { exportSvg: Nn, getSvg: Pn } = ge({
svg: L,
title: Mn,
legend: jn,
legendItems: kn,
backgroundColor: An
});
async function Fn({ isCb: e }) {
M.value = !0, await g();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await Pn();
await Promise.resolve(F.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(Nn());
} finally {
M.value = !1;
}
}
function In(e) {
if (e?.stage === "start") {
Mt.value = !0;
return;
}
if (e?.stage === "end") {
Mt.value = !1;
return;
}
Xt();
}
async function Ln() {
if (tn("copyAlt", {
config: F.value,
dataset: W.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: W.value
}));
}
function Rn() {
N.value = null, Nt.value = null, P.value = !0;
}
function zn() {
gn(), P.value = !1;
}
function Bn(e) {
if (!L.value || Z.value || document.activeElement !== L.value || !$.value.length) return;
let t = e.key === "ArrowLeft" || e.key === "ArrowUp", n = e.key === "ArrowRight" || e.key === "ArrowDown", r = e.key === "Enter" || e.key === " ", i = e.key === "Escape";
if (!t && !n && !r && !i) return;
if (e.preventDefault(), e.stopPropagation(), i) {
gn();
return;
}
if (r) {
if (N.value === null) return;
let e = $.value[N.value];
if (!e) return;
yn(e.datapoint);
return;
}
let a = N.value;
a === null || a < 0 || a >= $.value.length ? a = n ? 0 : $.value.length - 1 : (a += n ? 1 : -1, a < 0 && (a = $.value.length - 1), a >= $.value.length && (a = 0));
let o = $.value[a];
o && xn({
datapoint: o.datapoint,
seriesIndex: o.datapoint.seriesIndex,
show: !0,
triggerMode: "keyboard",
flatIndex: a
});
}
let Vn = l(() => ({
headers: X.value?.colNames ?? [],
rows: X.value?.body ?? []
})), $ = l(() => K.value.map((e, t) => ({
datapoint: e,
index: t
})));
return Se({
getData: cn,
getImage: Dn,
generatePdf: Yt,
generateCsv: Cn,
generateImage: Xt,
generateSvg: Fn,
hideSeries: sn,
showSeries: on,
toggleTable: wn,
toggleTooltip: Tn,
toggleAnnotator: En,
toggleFullscreen: mn,
copyAlt: Ln
}), (e, t) => (b(), f("div", {
ref_key: "galaxyChart",
ref: D,
class: _(`vue-data-ui-component vue-ui-galaxy ${q.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${F.value.useCssAnimation ? "" : "vue-ui-dna"} ${C(zt) ? "loading" : ""}`),
style: y(`font-family:${F.value.style.fontFamily};width:100%; text-align:center;${F.value.style.chart.title.text ? "" : "padding-top:36px"};background:${F.value.style.chart.backgroundColor}`),
id: `galaxy_${E.value}`,
onMouseenter: t[2] ||= () => C(Wt)(!0),
onMouseleave: t[3] ||= () => {
C(Wt)(!1), P.value || gn();
}
}, [
p("div", {
id: `chart-instructions-${E.value}`,
class: "sr-only"
}, [p("p", null, Ve(F.value.a11y.translations.keyboardNavigation), 1)], 8, Ke),
Vn.value?.rows?.length ? (b(), u(Ee, {
key: 0,
uid: E.value,
head: Vn.value.headers,
body: Vn.value.rows,
notice: F.value.a11y.translations.tableAvailable,
caption: F.value.a11y.translations.tableCaption
}, null, 8, [
"uid",
"head",
"body",
"notice",
"caption"
])) : d("", !0),
F.value.userOptions.buttons.annotator ? (b(), u(C(pt), {
key: 1,
svgRef: C(L),
backgroundColor: F.value.style.chart.backgroundColor,
color: F.value.style.chart.color,
active: Z.value,
isCursorPointer: I.value,
onClose: En
}, {
"annotator-action-close": w(() => [S(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": w(({ color: t }) => [S(e.$slots, "annotator-action-color", v(h({ color: t })), void 0, !0)]),
"annotator-action-draw": w(({ mode: t }) => [S(e.$slots, "annotator-action-draw", v(h({ mode: t })), void 0, !0)]),
"annotator-action-undo": w(({ disabled: t }) => [S(e.$slots, "annotator-action-undo", v(h({ disabled: t })), void 0, !0)]),
"annotator-action-redo": w(({ disabled: t }) => [S(e.$slots, "annotator-action-redo", v(h({ disabled: t })), void 0, !0)]),
"annotator-action-delete": w(({ disabled: t }) => [S(e.$slots, "annotator-action-delete", v(h({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : d("", !0),
Zt.value ? (b(), f("div", {
key: 2,
ref_key: "noTitle",
ref: Ot,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : d("", !0),
F.value.style.chart.title.text ? (b(), f("div", {
key: 3,
ref_key: "chartTitle",
ref: Tt,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [(b(), u(xe, {
key: `title_${St.value}`,
config: {
title: {
cy: "galaxy-div-title",
...F.value.style.chart.title
},
subtitle: {
cy: "galaxy-div-subtitle",
...F.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : d("", !0),
p("div", { id: `legend-top-${E.value}` }, null, 8, qe),
F.value.userOptions.show && It.value && (C(Gt) || C(Ut)) ? (b(), u(C(mt), {
ref_key: "userOptionsRef",
ref: jt,
key: `user_option_${xt.value}`,
backgroundColor: F.value.style.chart.backgroundColor,
color: F.value.style.chart.color,
isPrinting: C(qt),
isImaging: C(Jt),
uid: E.value,
hasTooltip: F.value.userOptions.buttons.tooltip && F.value.style.chart.tooltip.show,
hasPdf: F.value.userOptions.buttons.pdf,
hasXls: F.value.userOptions.buttons.csv,
hasImg: F.value.userOptions.buttons.img,
hasSvg: F.value.userOptions.buttons.svg,
hasTable: F.value.userOptions.buttons.table,
hasFullscreen: F.value.userOptions.buttons.fullscreen,
hasAltCopy: F.value.userOptions.buttons.altCopy,
isTooltip: R.value.showTooltip,
isFullscreen: q.value,
titles: { ...F.value.userOptions.buttonTitles },
chartElement: D.value,
position: F.value.userOptions.position,
hasAnnotator: F.value.userOptions.buttons.annotator,
isAnnotation: Z.value,
callbacks: F.value.userOptions.callbacks,
printScale: F.value.userOptions.print.scale,
tableDialog: F.value.table.useDialog,
isCursorPointer: I.value,
onToggleFullscreen: mn,
onGeneratePdf: C(Yt),
onGenerateCsv: Cn,
onGenerateImage: In,
onGenerateSvg: Fn,
onToggleTable: wn,
onToggleTooltip: Tn,
onToggleAnnotator: En,
onCopyAlt: Ln,
style: y({ visibility: C(Gt) ? C(Ut) ? "visible" : "hidden" : "visible" })
}, Pe({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: w(({ isOpen: t, color: n }) => [S(e.$slots, "menuIcon", v(h({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: w(() => [S(e.$slots, "optionTooltip", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: w(() => [S(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: w(() => [S(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: w(() => [S(e.$slots, "optionImg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: w(() => [S(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: w(() => [S(e.$slots, "optionTable", {}, void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: w(({ toggleFullscreen: t, isFullscreen: n }) => [S(e.$slots, "optionFullscreen", v(h({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "7"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: w(({ toggleAnnotator: t, isAnnotator: n }) => [S(e.$slots, "optionAnnotator", v(h({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "8"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: w(({ altCopy: t }) => [S(e.$slots, "optionAltCopy", v(h({ altCopy: t })), void 0, !0)]),
key: "9"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: w(() => [S(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "10"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: w(() => [S(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "11"
} : void 0
]), 1032, /* @__PURE__ */ "backgroundColor.color.isPrinting.isImaging.uid.hasTooltip.hasPdf.hasXls.hasImg.hasSvg.hasTable.hasFullscreen.hasAltCopy.isTooltip.isFullscreen.titles.chartElement.position.hasAnnotator.isAnnotation.callbacks.printScale.tableDialog.isCursorPointer.onGeneratePdf.style".split("."))) : d("", !0),
p("div", Je, [(b(), f("svg", {
ref_key: "svgRef",
ref: L,
xmlns: C(oe),
"aria-describedby": `chart-instructions-${E.value}`,
class: _({
"vue-data-ui-fullscreen--on": q.value,
"vue-data-ui-fulscreen--off": !q.value
}),
viewBox: V.value.viewBox,
style: y(`max-width:100%; overflow: visible; background:transparent;color:${F.value.style.chart.color}`),
tabindex: "0",
onFocus: Rn,
onBlur: zn,
onKeydown: Bn
}, [
Ie(C(ht)),
e.$slots["chart-background"] ? (b(), f("foreignObject", {
key: 0,
x: 0,
y: 0,
width: V.value.width,
height: V.value.height,
style: { pointerEvents: "none" }
}, [S(e.$slots, "chart-background", {}, void 0, !0)], 8, Xe)) : d("", !0),
p("defs", null, [p("filter", {
id: `blur_${E.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [p("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 100 / F.value.style.chart.layout.arcs.gradient.intensity
}, null, 8, Qe)], 8, Ze)]),
(b(!0), f(Me, null, ze(K.value, (e) => (b(), f("g", { key: `dp_${e.id}` }, [
e.value ? (b(), f("path", {
key: 0,
d: e.path,
fill: "none",
stroke: F.value.style.chart.backgroundColor,
"stroke-width": pn(e).border,
class: _({ "vue-data-ui-transition": C(Lt) }),
"stroke-linecap": "round"
}, null, 10, $e)) : d("", !0),
e.value ? (b(), f("path", {
key: 1,
d: e.path,
fill: "none",
stroke: e.color,
"stroke-width": pn(e).path,
"stroke-linecap": "round",
class: _({
"vue-data-ui-transition": C(Lt),
"vue-ui-galaxy-blur": k.value && k.value !== e.id && F.value.useBlurOnHover
})
}, null, 10, et)) : d("", !0),
e.value && F.value.style.chart.layout.arcs.gradient.show ? (b(), f("g", {
key: 2,
filter: `url(#blur_${E.value})`
}, [p("path", {
d: e.path,
fill: "none",
stroke: F.value.style.chart.layout.arcs.gradient.color,
"stroke-width": pn(e).blur,
"stroke-linecap": "round",
class: _({
"vue-ui-galaxy-gradient": !0,
"vue-data-ui-transition": C(Lt),
"vue-ui-galaxy-blur": k.value && k.value !== e.id && F.value.useBlurOnHover
})
}, null, 10, nt)], 8, tt)) : d("", !0)
]))), 128)),
(b(!0), f(Me, null, ze(K.value, (e, t) => (b(), f("g", null, [e.value ? (b(), f("path", {
key: 0,
"data-a11y-serie-id": e.id,
d: e.path,
fill: "none",
stroke: "transparent",
"stroke-width": F.value.style.chart.layout.arcs.strokeWidth + F.value.style.chart.layout.arcs.borderWidth,
"stroke-linecap": "round",
"aria-label": `${e.name}: ${C(c)({
p: F.value.style.chart.layout.labels.dataLabels.prefix,
v: e.value,
s: F.value.style.chart.layout.labels.dataLabels.suffix,
r: F.value.style.chart.tooltip.roundingValue
})}`,
onMouseenter: (n) => xn({
datapoint: e,
relativeIndex: t,
seriesIndex: e.seriesIndex,
show: !0,
triggerMode: "pointer",
flatIndex: t
}),
onMouseleave: (t) => vn(e),
onClick: (t) => yn(e)
}, null, 40, rt)) : d("", !0)]))), 256)),
S(e.$slots, "svg", { svg: {
...V.value,
isPrintingImg: C(qt) || C(Jt) || Mt.value,
isPrintingSvg: M.value
} }, void 0, !0)
], 46, Ye)), e.$slots.hint ? (b(), f("div", it, [S(e.$slots, "hint", v(h({
hint: F.value.a11y.translations.keyboardNavigation,
isVisible: P.value
})), void 0, !0)])) : d("", !0)]),
e.$slots.watermark ? (b(), f("div", at, [S(e.$slots, "watermark", v(h({ isPrinting: C(qt) || C(Jt) || Mt.value || M.value })), void 0, !0)])) : d("", !0),
p("div", { id: `legend-bottom-${E.value}` }, null, 8, ot),
At.value && (F.value.style.chart.legend.show || e.$slots.legend) ? (b(), u(Ne, {
key: 6,
to: F.value.style.chart.legend.position === "top" ? `#legend-top-${E.value}` : `#legend-bottom-${E.value}`
}, [p("div", {
ref_key: "chartLegend",
ref: Et
}, [S(e.$slots, "legend", { legend: J.value }, () => [F.value.style.chart.legend.show ? (b(), u(Ae, {
key: `legend_${wt.value}`,
legendSet: J.value,
config: Sn.value,
onClickMarker: t[0] ||= ({ legend: e }) => U(e)
}, {
item: w(({ legend: e, index: t }) => [C(zt) ? d("", !0) : (b(), f("div", {
key: 0,
onClick: (t) => U(e),
style: y(`opacity:${H.value.includes(e.id) ? .5 : 1}`)
}, Ve(e.display), 13, st))]),
legendToggle: w(() => [J.value.length > 2 && F.value.style.chart.legend.selectAllToggle.show && !C(zt) ? (b(), u(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: H.value.length > 0,
onToggle: rn
}, null, 8, [
"backgroundColor",
"color",
"fontSize",
"checked"
])) : d("", !0)]),
_: 1
}, 8, ["legendSet", "config"])) : d("", !0)], !0)], 512)], 8, ["to"])) : d("", !0),
e.$slots.source ? (b(), f("div", {
key: 7,
ref_key: "source",
ref: Dt,
dir: "auto"
}, [S(e.$slots, "source", {}, void 0, !0)], 512)) : d("", !0),
Ie(C(lt), {
teleportTo: F.value.style.chart.tooltip.teleportTo,
show: R.value.showTooltip && O.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,
fontSize: F.value.style.chart.tooltip.fontSize,
backgroundOpacity: F.value.style.chart.tooltip.backgroundOpacity,
position: F.value.style.chart.tooltip.position,
offsetX: F.value.style.chart.tooltip.offsetX,
offsetY: F.value.style.chart.tooltip.offsetY,
parent: D.value,
content: bt.value,
isFullscreen: q.value,
isCustom: C(le)(F.value.style.chart.tooltip.customFormat),
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: Ft.value === "keyboard",
a11yPosition: Pt.value
}, {
"tooltip-before": w(() => [S(e.$slots, "tooltip-before", v(h({ ...hn.value })), void 0, !0)]),
tooltip: w(() => [S(e.$slots, "tooltip", v(h({ ...hn.value })), void 0, !0)]),
"tooltip-after": w(() => [S(e.$slots, "tooltip-after", v(h({ ...hn.value })), void 0, !0)]),
_: 3
}, 8, [
"teleportTo",
"show",
"backgroundColor",
"color",
"borderRadius",
"borderColor",
"borderWidth",
"fontSize",
"backgroundOpacity",
"position",
"offsetX",
"offsetY",
"parent",
"content",
"isFullscreen",
"isCustom",
"smooth",
"backdropFilter",
"smoothForce",
"smoothSnapThreshold",
"isA11yMode",
"a11yPosition"
]),
It.value && F.value.userOptions.buttons.table ? (b(), u(Be(Q.value.component), Le({ key: 8 }, Q.value.props, {
ref_key: "tableUnit",
ref: j,
onClose: On
}), Pe({
content: w(() => [(b(), u(C(ft), {
key: `table_${Ct.value}`,
colNames: X.value.colNames,
head: X.value.head,
body: X.value.body,
config: X.value.config,
title: F.value.table.useDialog ? "" : Q.value.title,
withCloseButton: !F.value.table.useDialog,
isCursorPointer: I.value,
onClose: On
}, {
th: w(({ th: e }) => [p("div", {
innerHTML: e,
style: {
display: "flex",
"align-items": "center"
}
}, null, 8, ct)]),
td: w(({ td: e }) => [Fe(Ve(e.name || e), 1)]),
_: 1
}, 8, [
"colNames",
"head",
"body",
"config",
"title",
"withCloseButton",
"isCursorPointer"
]))]),
_: 2
}, [F.value.table.useDialog ? {
name: "title",
fn: w(() => [Fe(Ve(Q.value.title), 1)]),
key: "0"
} : void 0, F.value.table.useDialog ? {
name: "actions",
fn: w(() => [p("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: t[1] ||= (e) => Cn(F.value.userOptions.callbacks.csv),
style: y({ cursor: I.value ? "pointer" : "default" })
}, [Ie(C(ut), {
name: "fileCsv",
stroke: Q.value.props.color
}, null, 8, ["stroke"])], 4)]),
key: "1"
} : void 0]), 1040)) : d("", !0),
S(e.$slots, "skeleton", {}, () => [C(zt) ? (b(), u(he, { key: 0 })) : d("", !0)], !0)
], 46, Ge));
}
}, [["__scopeId", "data-v-f966d1c9"]]);
//#endregion
export { We as n, lt as t };