vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,397 lines (1,395 loc) • 48.2 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, D as n, Jt as r, K as i, Kt as a, Pt as o, S as s, X as c, Zt as l, i as ee, jt as te, pt as ne, q as u, r as re, t as ie, tt as ae, w as oe } from "./lib-Bttd6u5E.js";
import { n as se } from "./useHints-Dq_w2E8B.js";
import { t as ce } from "./useConfig-D3scuR88.js";
import { t as le } from "./usePrinter-DN5bYhTG.js";
import { n as ue, t as de } from "./BaseScanner-DZvpgOjM.js";
import { t as fe } from "./useSvgExport-DH-FfcqQ.js";
import { t as pe } from "./useNestedProp-vPNvh7rV.js";
import { t as me } from "./useThemeCheck-C43Tcqmk.js";
import { t as he } from "./img-Bnokohej.js";
import { n as ge } from "./Title-BE3qg9xl.js";
import { t as _e } from "./Shape-C21CMlWS.js";
import { t as ve } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as ye, t as be } from "./useResponsive-ZtArZtUf.js";
import { t as xe } from "./A11yDataTable-DdRsVULz.js";
import { t as Se } from "./useUserOptionState-DK-_1ddE.js";
import { t as Ce } from "./useChartAccessibility-DYqac8yF.js";
import { t as we } from "./Legend-CQxUgOd-.js";
import { t as Te } from "./vue_ui_chord-DPfS1Umc.js";
import { Fragment as d, Teleport as Ee, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as De, createTextVNode as Oe, createVNode as ke, defineAsyncComponent as _, guardReactiveProps as v, mergeProps as Ae, nextTick as je, normalizeClass as y, normalizeProps as b, normalizeStyle as x, onBeforeUnmount as Me, onMounted as Ne, openBlock as S, ref as C, renderList as w, renderSlot as T, resolveDynamicComponent as Pe, shallowRef as Fe, toDisplayString as E, toRefs as Ie, unref as D, useCssVars as Le, watch as Re, withCtx as O, withModifiers as ze } from "vue";
//#region src/components/vue-ui-chord.vue
var Be = /* @__PURE__ */ e({ default: () => vt }), Ve = ["id"], He = ["id"], Ue = ["id"], We = [
"xmlns",
"viewBox",
"aria-describedby"
], Ge = ["width", "height"], Ke = { key: 1 }, qe = ["id", "d"], Je = { key: 2 }, Ye = ["transform"], Xe = [
"d",
"fill",
"stroke",
"stroke-width",
"onMouseenter",
"onMouseleave",
"onClick"
], Ze = [
"d",
"fill",
"stroke",
"stroke-width"
], Qe = ["d", "fill"], $e = [
"d",
"fill",
"stroke",
"stroke-width",
"onMouseenter",
"onClick",
"onMouseleave"
], et = [
"d",
"fill",
"stroke",
"stroke-width"
], tt = [
"d",
"fill",
"stroke",
"stroke-width"
], nt = [
"d",
"fill",
"stroke",
"stroke-width"
], rt = { key: 0 }, it = [
"x1",
"y1",
"x2",
"y2",
"stroke",
"stroke-width"
], at = [
"x1",
"y1",
"x2",
"y2",
"stroke",
"stroke-width"
], ot = [
"cx",
"cy",
"r",
"stroke",
"stroke-width",
"fill"
], st = [
"transform",
"fill",
"text-anchor",
"font-size",
"font-weight"
], ct = { key: 1 }, lt = [
"font-size",
"font-weight",
"fill"
], ut = ["href"], dt = [
"transform",
"text-anchor",
"font-size",
"font-weight",
"fill",
"innerHTML"
], ft = {
key: 5,
style: {
position: "absolute",
top: "100%",
left: "0",
width: "100%"
},
"data-dom-to-png-ignore": "",
"aria-hidden": "true"
}, pt = {
key: 6,
class: "vue-data-ui-watermark"
}, mt = ["id"], ht = ["onClick"], gt = {
key: 9,
"data-dom-to-png-ignore": "",
class: "reset-wrapper"
}, _t = { style: {
"text-align": "right",
width: "100%"
} }, vt = /*#__PURE__*/ ve({
__name: "vue-ui-chord",
props: {
dataset: {
type: Object,
default() {
return {};
}
},
config: {
type: Object,
default() {
return {};
}
}
},
emits: [
"selectLegend",
"selectGroup",
"selectRibbon",
"copyAlt"
],
setup(e, { expose: ve, emit: Be }) {
Le((e) => ({ v34dc8e9b: e.slicerColor }));
let vt = _(() => import("./vue-ui-accordion-BxGriZik.js").then((e) => e.n)), yt = _(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), bt = _(() => import("./DataTable-BbKgJ5UI.js")), xt = _(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), St = _(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), Ct = _(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), wt = _(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_chord: Tt } = ce(), { isThemeValid: Et, warnInvalidTheme: Dt } = me(), k = e, Ot = Be, A = C(!!k.dataset && Object.hasOwn(k.dataset, "matrix")), j = C(u()), M = C(null), N = C(null), P = C(null), kt = C(0), F = C(null), At = C(null), jt = C(null), Mt = C(null), Nt = C(null), Pt = C(0), Ft = C(0), It = C(0), Lt = C(!1), I = Fe(null), L = Fe(null), Rt = C(!1), zt = C(null), Bt = C(null), Vt = C(!1), Ht = C(!1), R = C("group"), z = C(null), Ut = C(!1), B = C(en());
se({
config: () => B.value,
dataset: () => k.dataset,
component: "VueUiChord",
rules: [{
test: (e) => e.matrix && e.matrix.length > 12,
message: [
"👀 The number of groups > 12, the chart might become hard to read. Consider:",
"",
"▶️ Using broader groups to reduce their number."
]
}]
});
let V = f(() => B.value.userOptions.useCursorPointer), Wt = f(() => r({
defaultConfig: {
useCssAnimation: !1,
userOptions: { show: !1 },
table: { show: !1 },
style: { chart: {
backgroundColor: "#99999930",
legend: { backgroundColor: "transparent" },
arcs: {
stroke: "#6A6A6A",
labels: { show: !1 }
},
ribbons: {
stroke: "#6A6A6A",
underlayerOpacity: 0,
labels: { show: !1 }
}
} }
},
userConfig: B.value.skeletonConfig ?? {}
})), { loading: Gt, FINAL_DATASET: H, manualLoading: Kt } = ue({
...Ie(k),
FINAL_CONFIG: B,
prepareConfig: en,
callback: () => {
Promise.resolve().then(async () => {
await je(), W.value.showTable = B.value.table.show;
});
},
skeletonDataset: k.config?.skeletonDataset ?? {
matrix: [
[
12e3,
6e3,
9e3,
3e3
],
[
2e3,
1e4,
2e3,
6001
],
[
8e3,
1600,
8e3,
8001
],
[
1e3,
1e3,
1e3,
7001
]
],
labels: [],
colors: [
"#DBDBDB",
"#C4C4C4",
"#ADADAD",
"#969696"
]
},
skeletonConfig: r({
defaultConfig: B.value,
userConfig: Wt.value
})
}), { userOptionsVisible: qt, setUserOptionsVisibility: Jt, keepUserOptionState: Yt } = Se({ config: B.value }), { svgRef: U } = Ce({ config: B.value.style.chart.title }), { isPrinting: Xt, isImaging: Zt, generatePdf: Qt, generateImage: $t } = le({
elementId: `chord_${j.value}`,
fileName: B.value.style.chart.title.text || "vue-ui-chord",
options: B.value.userOptions.print
}), W = C({ showTable: B.value.table.show });
function en() {
let e = pe({
userConfig: k.config,
defaultConfig: Tt
}), t = e.theme;
if (!t) return e;
if (!Et.value(e)) return Dt(e), e;
let n = pe({
userConfig: Te[t] || k.config,
defaultConfig: e
}), r = pe({
userConfig: k.config,
defaultConfig: n
});
return {
...r,
customPalette: r.customPalette.length ? r.customPalette : a[t] || o
};
}
Re(() => k.config, (e) => {
Gt.value || (B.value = en()), qt.value = !B.value.userOptions.showOnChartHover, rn(), Pt.value += 1, Ft.value += 1, It.value += 1, Y.value = B.value.initialRotation, W.value.showTable = B.value.table.show;
}, { deep: !0 });
let tn = f(() => B.value.debug);
Re(() => k.dataset, () => {
nn(), rn(), Pt.value += 1, Ft.value += 1, It.value += 1;
});
function nn() {
if (te(k.dataset)) {
ae({
componentName: "VueUiChord",
type: "dataset",
debug: tn.value
}), A.value = !1, Kt.value = !0;
return;
}
let e = ne({
datasetObject: k.dataset,
requiredAttributes: ["matrix"]
});
if (e.length) {
e.forEach((e) => {
ae({
componentName: "VueUiChord",
type: "datasetAttribute",
property: e,
debug: tn.value
});
}), A.value = !1, Kt.value = !0;
return;
}
let t = k.dataset.matrix;
if (!Array.isArray(t) || t.length < 2) {
console.warn("VueUiChord: dataset.matrix requires a minimum of 2 datapoints, for example:\n \nmatrix:[\n [1, 1],\n [1, 1]\n]"), A.value = !1, Kt.value = !0;
return;
}
let n = t.length, r = t.findIndex((e) => !Array.isArray(e) || e.length !== n);
if (r !== -1) {
console.warn(`VueUiChord - Invalid matrix: dataset.matrix at index ${r} has ${Array.isArray(t[r]) ? t[r].length : "NaN"} elements instead of the required ${n}
dataset.matrix[${r}] = [${Array.isArray(t[r]) ? t[r].toString() : "invalid"}]`), A.value = !1, Kt.value = !0;
return;
}
A.value = !0, Kt.value = !1;
}
function rn() {
if (nn(), B.value.responsive) {
let e = ye(() => {
let { width: e, height: t, heightNoTitle: n, heightSource: r, heightTitle: i, heightLegend: a } = be({
chart: F.value,
title: B.value.style.chart.title.text ? At.value : null,
legend: B.value.style.chart.legend.show ? jt.value : null,
source: Mt.value,
noTitle: Nt.value
}), o = i + a + r + n;
e < t ? F.value.style.width = "100%" : (F.value.style.height = "100%", U.value.style.height = `calc(100% - ${o}px)`);
}, 100);
I.value && (L.value && I.value.unobserve(L.value), I.value.disconnect()), I.value = new ResizeObserver(e), L.value = F.value.parentNode, I.value.observe(L.value), e();
}
on.value = setTimeout(() => {
Lt.value = !0;
}, 500);
}
function an() {
if (!H.value || !Object.hasOwn(H.value, "matrix") || H.value.matrix.length < 2) {
console.warn("VueUiChord: dataset.matrix requires a minimum of 2 datapoints, for example:\n\nmatrix:[\n [1, 1],\n [1, 1]\n]"), A.value = !1;
return;
}
H.value.matrix.forEach((e, t) => {
e.length !== H.value.matrix.length && (console.warn(`VueUiChord - Invalid matrix: dataset.matrix at index ${t} has ${e.length} elements instead of the required ${H.value.matrix.length}\n\ndataset.matrix[${t}] = [${e.toString()}] has a length of ${e.length} but should have the same length as the matrix itself (${H.value.matrix.length})`), A.value = !1);
});
}
let on = C(null);
Ne(() => {
Rt.value = !0, rn();
});
let G = C({
height: 600,
width: 600
}), sn = f(() => B.value.userOptions.show && !B.value.style.chart.title.text), cn = f(() => oe(B.value.customPalette)), K = f(() => ({
inner: G.value.width * .3 * B.value.style.chart.arcs.innerRadiusRatio,
outer: G.value.width * .34 * B.value.style.chart.arcs.outerRadiusRatio
})), ln = f(() => B.value.style.chart.arcs.padAngle / 100), q = f(() => ({
matrix: H.value.matrix ?? [[0]],
labels: H.value.labels ?? [""],
colors: H.value.colors && Array.isArray(H.value.colors) && H.value.colors.length ? H.value.colors.map((e) => s(e)) : H.value.matrix.map((e, t) => cn.value[t] || o[t] || o[t % o.length])
}));
function un(e, t) {
let n = e.length, r = K.value.inner, i = Array(n).fill(0), a = 0;
for (let t = 0; t < n; t += 1) for (let r = 0; r < n; r += 1) i[t] += e[t][r], a += e[t][r];
let o = (2 * Math.PI - t * n) / a, s = [], c = 0;
for (let e = 0; e < n; e += 1) {
let n = c, r = n + i[e] * o;
s.push({
index: e,
pattern: `pattern_${j.value}_${e}`,
startAngle: n,
endAngle: r,
name: q.value.labels[e],
id: u(),
color: q.value.colors[e],
proportion: i[e] / a
}), c = r + t;
}
let l = [];
for (let t = 0; t < n; t += 1) {
let n = e[t].map((e, t) => ({
j: t,
v: e
}));
n.sort((e, t) => t.v - e.v);
let i = s[t].startAngle;
for (let { j: e, v: a } of n) {
let n = i, c = n + a * o;
l.push({
index: t,
subIndex: e,
pattern: `pattern_${j.value}_${t}`,
startAngle: n,
endAngle: c,
value: a,
groupName: q.value.labels[t],
groupId: s[t].id,
groupColor: q.value.colors[t],
midAngle: (n + c) / 2,
midBaseX: Math.cos((n + c) / 2 - Math.PI / 2) * r,
midBaseY: Math.sin((n + c) / 2 - Math.PI / 2) * r
}), i = c;
}
}
let ee = [];
for (let e of l) {
let t = l.find((t) => t.index === e.subIndex && t.subIndex === e.index);
ee.push({
source: e,
target: t,
id: u()
});
}
return {
groups: s,
chords: ee
};
}
let J = f(() => {
let e = un(q.value.matrix, ln.value);
return an(), e.chords.sort((e, t) => Math.max(t.source.value, t.target.value) - Math.max(e.source.value, e.target.value)), e;
}), dn = f(() => {
let e = K.value.outer + B.value.style.chart.ribbons.labels.offset + 12, t = B.value.style.chart.ribbons.labels.fontSize * .6, n = [];
if (N.value) {
let r = N.value;
if (r.source.value) {
let i = String(r.source.value);
n.push({
id: r.id + "-src",
theta: r.source.midAngle,
w: i.length * t / e,
midBaseX: r.source.midBaseX,
midBaseY: r.source.midBaseY,
groupColor: r.source.groupColor,
value: r.source.value
});
}
if (r.target && r.target.value && r.target.value !== r.source.value) {
let i = String(r.target.value);
n.push({
id: r.id + "-tgt",
theta: r.target.midAngle,
w: i.length * t / e,
midBaseX: r.target.midBaseX,
midBaseY: r.target.midBaseY,
groupColor: r.target.groupColor,
value: r.target.value
});
}
return n;
}
function r(r) {
J.value.chords.filter((e) => e.source.groupId === r && e.source.value).forEach((r) => {
{
let i = String(r.source.value);
n.push({
id: r.id + "-src",
theta: r.source.midAngle,
w: i.length * t / e,
midBaseX: r.source.midBaseX,
midBaseY: r.source.midBaseY,
groupColor: r.source.groupColor,
value: r.source.value
});
}
if (r.target && r.target.value && r.target.value !== r.source.value) {
let i = String(r.target.value);
n.push({
id: r.id + "-tgt",
theta: r.target.midAngle,
w: i.length * t / e,
midBaseX: r.target.midBaseX,
midBaseY: r.target.midBaseY,
groupColor: r.target.groupColor,
value: r.target.value
});
}
});
}
return P.value && r(P.value), M.value && r(M.value.id), n;
}), fn = f(() => {
let e = dn.value.map((e) => ({ ...e })).sort((e, t) => e.theta - t.theta), t = B.value.style.chart.ribbons.labels.minSeparationDeg * Math.PI / 180, n = !0, r = 0;
for (; n && r++ < 10;) {
n = !1;
for (let r = 1; r < e.length; r += 1) {
let i = e[r - 1], a = e[r], o = i.theta + i.w + t;
a.theta < o && (a.theta = o, n = !0);
}
let r = e[0], i = e[e.length - 1], a = i.theta + i.w + t - 2 * Math.PI;
r.theta < a && (r.theta = a, n = !0);
}
return e;
});
function pn(e, t, n, r) {
let i = e - Math.PI / 2, a = t - Math.PI / 2, o = Math.cos(i) * n, s = Math.sin(i) * n, c = Math.cos(a) * n, l = Math.sin(a) * n, ee = Math.cos(a) * r, te = Math.sin(a) * r, ne = Math.cos(i) * r, u = Math.sin(i) * r, re = +(t - e > Math.PI);
return `M${o},${s} A${n},${n} 0 ${re} 1 ${c},${l} L${ee},${te} A${r},${r} 0 ${re} 0 ${ne},${u} Z`;
}
function mn(e, t) {
let n = K.value.inner, r = e.startAngle - Math.PI / 2, i = e.endAngle - Math.PI / 2, a = t.startAngle - Math.PI / 2, o = t.endAngle - Math.PI / 2, s = Math.cos(r) * n, c = Math.sin(r) * n, l = Math.cos(i) * n, ee = Math.sin(i) * n, te = Math.cos(a) * n, ne = Math.sin(a) * n, u = Math.cos(o) * n, re = Math.sin(o) * n;
return `M${s},${c}A${n},${n} 0 ${+(e.endAngle - e.startAngle > Math.PI)} 1 ${l},${ee}Q0,0 ${te},${ne}A${n},${n} 0 ${+(t.endAngle - t.startAngle > Math.PI)} 1 ${u},${re}Q0,0 ${s},${c}Z`;
}
let hn = f(() => Y.value * Math.PI / 180);
function gn(e) {
return (e.startAngle + e.endAngle) / 2;
}
function _n(e) {
return ((gn(e) + hn.value) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI);
}
function vn(e) {
let t = e + hn.value;
return t = (t % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI), t > Math.PI ? "end" : "start";
}
function yn(e) {
let t = e - Math.PI / 2;
return `translate(${Math.cos(t) * (K.value.outer + B.value.style.chart.arcs.labels.offset + 24)},${Math.sin(t) * (K.value.outer + B.value.style.chart.arcs.labels.offset + 24)})`;
}
function bn(e, t, n) {
let r = e - Math.PI / 2, i = t - Math.PI / 2, a = Math.cos(r) * n, o = Math.sin(r) * n, s = Math.cos(i) * n, c = Math.sin(i) * n;
return `M${a},${o} A${n},${n} 0 ${+(t - e > Math.PI)} 1 ${s},${c}`;
}
let Y = C(B.value.initialRotation), xn = C(!1), Sn = 0, Cn = 0;
function wn(e) {
let t = U.value.getBoundingClientRect(), n = t.left + t.width / 2, r = t.top + t.height / 2, i = e.clientX ?? e.touches[0].clientX, a = e.clientY ?? e.touches[0].clientY;
return Math.atan2(a - r, i - n);
}
function Tn(e) {
!B.value.enableRotation || X.value || (e.preventDefault(), xn.value = !0, Sn = Y.value, Cn = wn(e));
}
function En(e) {
if (!xn.value) return;
let t = wn(e);
Y.value = Sn + (t - Cn) * 180 / Math.PI;
}
function Dn() {
xn.value = !1;
}
function On(e) {
return ee(B.value.style.chart.ribbons.labels.formatter, e, c({
p: B.value.style.chart.ribbons.labels.prefix,
v: e,
s: B.value.style.chart.ribbons.labels.suffix,
r: B.value.style.chart.ribbons.labels.rounding
}));
}
Ne(() => {
window.addEventListener("mousemove", En), window.addEventListener("mouseup", Dn), window.addEventListener("touchmove", En, { passive: !1 }), window.addEventListener("touchend", Dn);
}), Me(() => {
window.removeEventListener("mousemove", En), window.removeEventListener("mouseup", Dn), window.removeEventListener("touchmove", En), window.removeEventListener("touchend", Dn), clearTimeout(on.value), I.value && (L.value && I.value.unobserve(L.value), I.value.disconnect());
});
let kn = C(!1);
function An(e) {
kn.value = e, kt.value += 1;
}
function jn(e, t) {
B.value.events.datapointEnter && B.value.events.datapointEnter({
datapoint: e,
seriesIndex: t
}), !P.value && (M.value = e);
}
function Mn(e, t) {
M.value = null, B.value.events.datapointLeave && B.value.events.datapointLeave({
datapoint: e,
seriesIndex: t
});
}
function Nn(e, t) {
Ot("selectGroup", e), B.value.events.datapointClick && B.value.events.datapointClick({
datapoint: e,
seriesIndex: t
});
}
function Pn(e, t) {
B.value.events.datapointEnter && B.value.events.datapointEnter({
datapoint: e,
seriesIndex: t
}), !P.value && (N.value = e);
}
function Fn(e, t) {
N.value = null, B.value.events.datapointLeave && B.value.events.datapointLeave({
datapoint: e,
seriesIndex: t
});
}
function In(e, t) {
Ot("selectRibbon", e), B.value.events.datapointClick && B.value.events.datapointClick({
datapoint: e,
seriesIndex: t
});
}
function Ln(e) {
return !P.value && !M.value && !N.value ? .8 : (P.value ? P.value === e.source.groupId : M.value ? M.value.id === e.source.groupId : N.value?.id === e.id) ? 1 : .1;
}
function Rn(e) {
return !P.value && !M.value && !N.value || (P.value ? P.value === e.id : M.value ? M.value.id === e.id : [N.value?.source.groupId, N.value?.target.groupId].includes(e.id)) ? 1 : .3;
}
let X = C(!1);
function zn() {
X.value = !X.value;
}
function Bn() {
W.value.showTable = !W.value.showTable;
}
function Vn() {
return J.value;
}
let Z = C(null);
function Hn() {
let e = B.value.initialRotation;
Z.value !== null && cancelAnimationFrame(Z.value);
let t = () => {
Y.value += (e - Y.value) * .05, Math.abs(Y.value - e) < .1 ? (Y.value = e, Z.value = null) : Z.value = requestAnimationFrame(t);
};
Z.value = requestAnimationFrame(t);
}
Me(() => {
Z.value !== null && cancelAnimationFrame(Z.value);
});
function Un(e) {
e === P.value ? (P.value = null, Ot("selectLegend", null)) : (P.value = e, Ot("selectLegend", J.value.groups.find((t) => t.id === e)));
}
let Wn = f(() => J.value.groups.map((e, t) => ({
name: e.name,
color: e.color,
shape: "circle",
patternIndex: t,
pattern: `pattern_${j.value}_${t}`,
id: e.id,
select: () => Un(e.id),
opacity: P.value ? P.value === e.id ? 1 : .3 : 1
}))), Gn = f(() => ({
cy: "chord-div-legend",
backgroundColor: B.value.style.chart.legend.backgroundColor,
color: B.value.style.chart.legend.color,
fontSize: B.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: B.value.style.chart.legend.bold ? "bold" : ""
})), Q = f(() => ({
head: J.value.groups.map((e, t) => ({
name: e.name || t,
color: e.color
})),
body: q.value.matrix
})), Kn = f(() => {
let e = [{
name: "",
color: null
}, ...Q.value.head];
return {
colNames: e,
head: e,
body: Q.value.body.map((e, t) => [Q.value.head[t], ...Q.value.body[t]]),
config: {
th: {
backgroundColor: B.value.table.th.backgroundColor,
color: B.value.table.th.color,
outline: B.value.table.th.outline
},
td: {
backgroundColor: B.value.table.td.backgroundColor,
color: B.value.table.td.color,
outline: B.value.table.td.outline
},
breakpoint: B.value.table.responsiveBreakpoint
}
};
});
function qn(e = null) {
je(() => {
let r = q.value.matrix.map((e, t) => [[q.value.labels[t] || t], e]), i = [
[B.value.style.chart.title.text],
[B.value.style.chart.title.subtitle.text],
[[""], ...q.value.labels.map((e, t) => [e || t])]
].concat(r), a = n(i);
e ? e(a) : t({
csvContent: a,
title: B.value.style.chart.title.text || "vue-ui-chord"
});
});
}
async function Jn({ scale: e = 2 } = {}) {
if (!F.value) return;
let { width: t, height: n } = F.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await he({
domElement: F.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: B.value.style.chart.title.text,
width: t,
height: n,
aspectRatio: r
};
}
function Yn(e, t) {
return `${q.value.labels[t]}${B.value.style.chart.arcs.labels.showPercentage ? c({
p: " (",
v: isNaN(e.proportion) ? 0 : e.proportion * 100,
s: "%)",
r: B.value.style.chart.arcs.labels.roundingPercentage
}) : ""}`;
}
let Xn = f(() => {
let e = B.value.table.useDialog && !B.value.table.show, t = W.value.showTable;
return {
component: e ? wt : vt,
title: `${B.value.style.chart.title.text}${B.value.style.chart.title.subtitle.text ? `: ${B.value.style.chart.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: B.value.table.th.backgroundColor,
color: B.value.table.th.color,
headerColor: B.value.table.th.color,
headerBg: B.value.table.th.backgroundColor,
isFullscreen: kn.value,
fullscreenParent: F.value,
forcedWidth: Math.min(800, window.innerWidth * .8),
isCursorPointer: V.value
} : {
hideDetails: !0,
config: {
open: t,
maxHeight: 1e4,
body: {
backgroundColor: B.value.style.chart.backgroundColor,
color: B.value.style.chart.color
},
head: {
backgroundColor: B.value.style.chart.backgroundColor,
color: B.value.style.chart.color
}
}
}
};
});
Re(() => W.value.showTable, (e) => {
B.value.table.show || (e && B.value.table.useDialog && zt.value ? zt.value.open() : "close" in zt.value && zt.value.close());
});
function Zn() {
W.value.showTable = !1, Bt.value && Bt.value.setTableIconState(!1);
}
let Qn = f(() => B.value.style.chart.backgroundColor), $n = f(() => B.value.style.chart.legend), er = f(() => B.value.style.chart.title), { exportSvg: tr, getSvg: nr } = fe({
svg: U,
title: er,
legend: $n,
legendItems: Wn,
backgroundColor: Qn
});
async function rr({ isCb: e }) {
Ht.value = !0, await je();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await nr();
await Promise.resolve(B.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(tr());
} finally {
Ht.value = !1;
}
}
function ir(e) {
if (e?.stage === "start") {
Vt.value = !0;
return;
}
if (e?.stage === "end") {
Vt.value = !1;
return;
}
$t();
}
async function ar() {
if (Ot("copyAlt", {
config: B.value,
dataset: q.value
}), !B.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(B.value.userOptions.callbacks.altCopy({
config: B.value,
dataset: q.value
}));
}
let or = f(() => (M.value ? J.value.chords.filter((e) => e.source.groupId === M.value.id) : P.value ? J.value.chords.filter((e) => e.source.groupId === P.value) : J.value.chords).filter((e) => e.source.value)), $ = f(() => ({
groups: J.value.groups.map((e, t) => ({
type: "group",
index: t,
item: e
})),
ribbons: or.value.map((e, t) => ({
type: "ribbon",
index: t,
item: {
...e,
path: mn(e.source, e.target),
color: q.value.colors[e.source.index]
}
}))
})), sr = f(() => ({
headers: ["", ...Q.value.head.map((e) => e.name)],
rows: Q.value.body.map((e, t) => [Q.value.head[t]?.name ?? `${t}`, ...e.map((e) => On(e))])
}));
function cr(e) {
let t = $.value.groups[e];
t && (R.value = "group", z.value = e, N.value = null, M.value = t.item);
}
function lr(e) {
let t = $.value.ribbons[e];
t && (R.value = "ribbon", z.value = e, M.value = null, N.value = t.item);
}
function ur() {
z.value = null, R.value = "group", M.value = null, N.value = null;
}
function dr() {
Ut.value = !0, R.value = "group", z.value = null;
}
function fr() {
Ut.value = !1, ur();
}
function pr(e) {
if (!U.value || X.value || document.activeElement !== U.value) return;
let t = e.key === "ArrowLeft", n = e.key === "ArrowRight", r = e.key === "ArrowUp", i = e.key === "ArrowDown", a = e.key === "Enter" || e.key === " ", o = e.key === "Escape";
if (!t && !n && !r && !i && !a && !o) return;
if (e.preventDefault(), e.stopPropagation(), o) {
ur();
return;
}
if (r) {
R.value = "group", $.value.groups.length && cr(z.value === null ? 0 : Math.min(z.value, $.value.groups.length - 1));
return;
}
if (i) {
if (!$.value.ribbons.length) return;
R.value = "ribbon", lr(z.value === null ? 0 : Math.min(z.value, $.value.ribbons.length - 1));
return;
}
if (a) {
if (R.value === "group") {
let e = $.value.groups[z.value];
e && Nn(e.item, e.index);
} else {
let e = $.value.ribbons[z.value];
e && In(e.item, e.index);
}
return;
}
let s = R.value === "group" ? $.value.groups : $.value.ribbons;
if (!s.length) return;
let c = z.value;
c === null || c < 0 || c >= s.length ? c = n ? 0 : s.length - 1 : n ? (c += 1, c >= s.length && (c = 0)) : t && (--c, c < 0 && (c = s.length - 1)), R.value === "group" ? cr(c) : lr(c);
}
return ve({
getData: Vn,
getImage: Jn,
generateCsv: qn,
generateImage: $t,
generateSvg: rr,
generatePdf: Qt,
toggleAnnotator: zn,
toggleTable: Bn,
toggleFullscreen: An,
copyAlt: ar
}), (e, t) => (S(), h("div", {
ref_key: "chordChart",
ref: F,
class: y({
"vue-data-ui-component": !0,
"vue-ui-chord": !0,
"vue-data-ui-wrapper-fullscreen": kn.value,
"vue-data-ui-responsive": B.value.responsive
}),
style: x(`font-family:${B.value.style.fontFamily};width:100%; text-align:center;background:${B.value.style.chart.backgroundColor}`),
id: `chord_${j.value}`,
onMouseenter: t[2] ||= () => D(Jt)(!0),
onMouseleave: t[3] ||= () => D(Jt)(!1)
}, [
g("div", {
id: `chart-instructions-${j.value}`,
class: "sr-only"
}, [g("p", null, E(B.value.a11y.translations.keyboardNavigation), 1)], 8, He),
sr.value?.rows?.length ? (S(), p(xe, {
key: 0,
uid: j.value,
head: sr.value.headers,
body: sr.value.rows,
notice: B.value.a11y.translations.tableAvailable,
caption: B.value.a11y.translations.tableCaption
}, null, 8, [
"uid",
"head",
"body",
"notice",
"caption"
])) : m("", !0),
B.value.userOptions.buttons.annotator && D(U) ? (S(), p(D(St), {
key: 1,
color: B.value.style.chart.color,
backgroundColor: B.value.style.chart.backgroundColor,
active: X.value,
svgRef: D(U),
isCursorPointer: V.value,
onClose: zn
}, {
"annotator-action-close": O(() => [T(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": O(({ color: t }) => [T(e.$slots, "annotator-action-color", b(v({ color: t })), void 0, !0)]),
"annotator-action-draw": O(({ mode: t }) => [T(e.$slots, "annotator-action-draw", b(v({ mode: t })), void 0, !0)]),
"annotator-action-undo": O(({ disabled: t }) => [T(e.$slots, "annotator-action-undo", b(v({ disabled: t })), void 0, !0)]),
"annotator-action-redo": O(({ disabled: t }) => [T(e.$slots, "annotator-action-redo", b(v({ disabled: t })), void 0, !0)]),
"annotator-action-delete": O(({ disabled: t }) => [T(e.$slots, "annotator-action-delete", b(v({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"color",
"backgroundColor",
"active",
"svgRef",
"isCursorPointer"
])) : m("", !0),
T(e.$slots, "userConfig", {}, void 0, !0),
sn.value ? (S(), h("div", {
key: 2,
ref_key: "noTitle",
ref: Nt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : m("", !0),
B.value.style.chart.title.text ? (S(), h("div", {
key: 3,
ref_key: "chartTitle",
ref: At,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [(S(), p(ge, {
key: `title_${Pt.value}`,
config: {
title: {
cy: "chord-div-title",
...B.value.style.chart.title
},
subtitle: {
cy: "chord-div-subtitle",
...B.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : m("", !0),
g("div", { id: `legend-top-${j.value}` }, null, 8, Ue),
B.value.userOptions.show && A.value && (D(Yt) || D(qt)) ? (S(), p(D(Ct), {
ref_key: "userOptionsRef",
ref: Bt,
key: `user_option_${kt.value}`,
backgroundColor: B.value.style.chart.backgroundColor,
color: B.value.style.chart.color,
isPrinting: D(Xt),
isImaging: D(Zt),
uid: j.value,
hasTooltip: !1,
hasPdf: B.value.userOptions.buttons.pdf,
hasImg: B.value.userOptions.buttons.img,
hasSvg: B.value.userOptions.buttons.svg,
hasXls: B.value.userOptions.buttons.csv,
hasTable: B.value.userOptions.buttons.table,
hasLabel: !1,
hasFullscreen: B.value.userOptions.buttons.fullscreen,
hasAltCopy: B.value.userOptions.buttons.altCopy,
isFullscreen: kn.value,
chartElement: F.value,
position: B.value.userOptions.position,
titles: { ...B.value.userOptions.buttonTitles },
hasAnnotator: B.value.userOptions.buttons.annotator,
isAnnotation: X.value,
callbacks: B.value.userOptions.callbacks,
printScale: B.value.userOptions.print.scale,
tableDialog: B.value.table.useDialog,
isCursorPointer: V.value,
onToggleFullscreen: An,
onGeneratePdf: D(Qt),
onGenerateCsv: qn,
onGenerateImage: ir,
onGenerateSvg: rr,
onToggleTable: Bn,
onToggleAnnotator: zn,
onCopyAlt: ar,
style: x({ visibility: D(Yt) ? D(qt) ? "visible" : "hidden" : "visible" })
}, De({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: O(({ isOpen: t, color: n }) => [T(e.$slots, "menuIcon", b(v({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: O(() => [T(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: O(() => [T(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: O(() => [T(e.$slots, "optionImg", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: O(() => [T(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: O(() => [T(e.$slots, "optionTable", {}, void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: O(({ toggleFullscreen: t, isFullscreen: n }) => [T(e.$slots, "optionFullscreen", b(v({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: O(({ toggleAnnotator: t, isAnnotator: n }) => [T(e.$slots, "optionAnnotator", b(v({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "7"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: O(({ altCopy: t }) => [T(e.$slots, "optionAltCopy", b(v({ altCopy: t })), void 0, !0)]),
key: "8"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: O(() => [T(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "9"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: O(() => [T(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "10"
} : void 0
]), 1032, [
"backgroundColor",
"color",
"isPrinting",
"isImaging",
"uid",
"hasPdf",
"hasImg",
"hasSvg",
"hasXls",
"hasTable",
"hasFullscreen",
"hasAltCopy",
"isFullscreen",
"chartElement",
"position",
"titles",
"hasAnnotator",
"isAnnotation",
"callbacks",
"printScale",
"tableDialog",
"isCursorPointer",
"onGeneratePdf",
"style"
])) : m("", !0),
(S(), h("svg", {
xmlns: D(ie),
ref_key: "svgRef",
ref: U,
viewBox: `0 0 ${G.value.width} ${G.value.height}`,
"aria-describedby": `chart-instructions-${j.value}`,
tabindex: "0",
preserveAspectRatio: "xMidYMid meet",
style: { overflow: "visible" },
class: y({
"vue-ui-chord-rotating": xn.value,
"vue-ui-chord-idle": !xn.value
}),
onMousedown: ze(Tn, ["prevent"]),
onTouchstart: ze(Tn, ["prevent"]),
onFocus: dr,
onBlur: fr,
onKeydown: pr
}, [
ke(D(xt)),
e.$slots["chart-background"] ? (S(), h("foreignObject", {
key: 0,
x: 0,
y: 0,
width: G.value.width <= 0 ? 10 : G.value.width,
height: G.value.height <= 0 ? 10 : G.value.height,
style: { pointerEvents: "none" }
}, [T(e.$slots, "chart-background", {}, void 0, !0)], 8, Ge)) : m("", !0),
B.value.style.chart.arcs.labels.curved ? (S(), h("defs", Ke, [(S(!0), h(d, null, w(J.value.groups, (e, t) => (S(), h("path", {
key: `labelPath-${t}`,
id: `labelPath-${t}_${j.value}`,
d: bn(e.startAngle, e.endAngle, (K.value.inner + K.value.outer) / 2 + B.value.style.chart.arcs.labels.offset),
fill: "none"
}, null, 8, qe))), 128))])) : m("", !0),
e.$slots.pattern ? (S(), h("g", Je, [(S(!0), h(d, null, w(J.value.groups, (t, n) => (S(), h("defs", null, [T(e.$slots, "pattern", Ae({ ref_for: !0 }, {
seriesIndex: t.index,
patternId: `pattern_${j.value}_${n}`
}), void 0, !0)]))), 256))])) : m("", !0),
g("g", { transform: `translate(${G.value.width / 2}, ${G.value.height / 2}) rotate(${Y.value})` }, [
(S(!0), h(d, null, w(J.value.groups, (t, n) => (S(), h("g", null, [(S(), h("path", {
class: y({
"vue-ui-chord-arc": !0,
"vue-ui-chord-arc-animated": B.value.useCssAnimation && !Lt.value
}),
key: `arc-${n}`,
d: pn(t.startAngle, t.endAngle, K.value.outer, K.value.inner),
fill: q.value.colors[n],
stroke: B.value.style.chart.arcs.stroke,
"stroke-width": B.value.style.chart.arcs.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: x({ opacity: Rn(t) }),
onMouseenter: (e) => jn(t, n),
onMouseleave: (e) => Mn(t, n),
onClick: (e) => Nn(t, n)
}, null, 46, Xe)), e.$slots.pattern ? (S(), h("path", {
class: y({
"vue-ui-chord-arc": !0,
"vue-ui-chord-arc-animated": B.value.useCssAnimation && !Lt.value
}),
key: `arc-${n}`,
d: pn(t.startAngle, t.endAngle, K.value.outer, K.value.inner),
fill: `url(#${t.pattern})`,
stroke: B.value.style.chart.arcs.stroke,
"stroke-width": B.value.style.chart.arcs.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: x({
opacity: Rn(t),
pointerEvents: "none"
})
}, null, 14, Ze)) : m("", !0)]))), 256)),
g("g", null, [
(S(!0), h(d, null, w(M.value ? J.value.chords.filter((e) => e.source.groupId === M.value.id) : P.value ? J.value.chords.filter((e) => e.source.groupId === P.value) : J.value.chords, (t, n) => (S(), h(d, { key: `ribbon-${t.id}` }, [
t.source.value ? (S(), h("path", {
key: 0,
class: y({ "vue-ui-chord-ribbon": !0 }),
d: mn(t.source, t.target),
fill: B.value.style.chart.backgroundColor,
style: x({ opacity: B.value.style.chart.ribbons.underlayerOpacity })
}, null, 12, Qe)) : m("", !0),
t.source.value ? (S(), h("path", {
key: 1,
class: y({ "vue-ui-chord-ribbon": !0 }),
d: mn(t.source, t.target),
fill: q.value.colors[t.source.index],
stroke: B.value.style.chart.ribbons.stroke,
"stroke-width": B.value.style.chart.ribbons.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: x({ opacity: Ln(t) }),
onMouseenter: (e) => Pn({
...t,
path: mn(t.source, t.target),
color: q.value.colors[t.source.index]
}, n),
onClick: (e) => In({
...t,
color: q.value.colors[t.source.index]
}, n),
onMouseleave: (e) => Fn({
...t,
color: q.value.colors[t.source.index]
}, n)
}, null, 44, $e)) : m("", !0),
t.source.value && e.$slots.pattern ? (S(), h("path", {
key: 2,
class: y({ "vue-ui-chord-ribbon": !0 }),
d: mn(t.source, t.target),
fill: `url(#pattern_${j.value}_${t.source.index})`,
stroke: B.value.style.chart.ribbons.stroke,
"stroke-width": B.value.style.chart.ribbons.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: x({
opacity: Ln(t),
pointerEvents: "none"
})
}, null, 12, et)) : m("", !0)
], 64))), 128)),
N.value ? (S(), h("path", {
key: 0,
d: N.value.path,
fill: N.value.color,
stroke: B.value.style.chart.ribbons.stroke,
"stroke-width": B.value.style.chart.ribbons.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: y({ "vue-ui-chord-ribbon": !0 }),
style: { pointerEvents: "none" }
}, null, 8, tt)) : m("", !0),
N.value && e.$slots.pattern ? (S(), h("path", {
key: 1,
d: N.value.path,
fill: `url(#${N.value.source.pattern})`,
stroke: B.value.style.chart.ribbons.stroke,
"stroke-width": B.value.style.chart.ribbons.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: y({ "vue-ui-chord-ribbon": !0 }),
style: { pointerEvents: "none" }
}, null, 8, nt)) : m("", !0)
]),
(M.value || N.value || P.value) && B.value.style.chart.ribbons.labels.show ? (S(), h("g", rt, [(S(!0), h(d, null, w(fn.value, (e) => (S(), h(d, { key: e.id }, [
g("line", {
x1: e.midBaseX,
y1: e.midBaseY,
x2: Math.cos(e.theta - Math.PI / 2) * (K.value.outer + B.value.style.chart.ribbons.labels.offset + 12),
y2: Math.sin(e.theta - Math.PI / 2) * (K.value.outer + B.value.style.chart.ribbons.labels.offset + 12),
stroke: B.value.style.chart.backgroundColor,
"stroke-width": B.value.style.chart.ribbons.labels.connector.strokeWidth * 3,
"pointer-events": "none"
}, null, 8, it),
g("line", {
x1: e.midBaseX,
y1: e.midBaseY,
x2: Math.cos(e.theta - Math.PI / 2) * (K.value.outer + B.value.style.chart.ribbons.labels.offset + 12),
y2: Math.sin(e.theta - Math.PI / 2) * (K.value.outer + B.value.style.chart.ribbons.labels.offset + 12),
stroke: B.value.style.chart.ribbons.labels.connector.stroke,
"stroke-width": B.value.style.chart.ribbons.labels.connector.strokeWidth,
"pointer-events": "none"
}, null, 8, at),
B.value.style.chart.ribbons.labels.marker.show ? (S(), h("circle", {
key: 0,
cx: Math.cos(e.theta - Math.PI / 2) * (K.value.outer + B.value.style.chart.ribbons.labels.offset + 12),
cy: Math.sin(e.theta - Math.PI / 2) * (K.value.outer + B.value.style.chart.ribbons.labels.offset + 12),
r: B.value.style.chart.ribbons.labels.marker.radius,
stroke: B.value.style.chart.ribbons.labels.marker.stroke,
"stroke-width": B.value.style.chart.ribbons.labels.marker.strokeWidth,
fill: e.groupColor,
"pointer-events": "none"
}, null, 8, ot)) : m("", !0),
g("text", {
transform: `
translate(
${Math.cos(e.theta - Math.PI / 2) * (K.value.outer + B.value.style.chart.ribbons.labels.offset + 24)},
${Math.sin(e.theta - Math.PI / 2) * (K.value.outer + B.value.style.chart.ribbons.labels.offset + 24)}
) rotate(${-Y.value})
`,
fill: B.value.style.chart.ribbons.labels.useSerieColor ? e.groupColor : B.value.style.chart.ribbons.labels.color,
"text-anchor": vn(e.theta),
"font-size": B.value.style.chart.ribbons.labels.fontSize,
"font-weight": B.value.style.chart.ribbons.labels.bold ? "bold" : "normal",
dy: ".35em",
"pointer-events": "none"
}, E(On(e.value)), 9, st)
], 64))), 128))])) : m("", !0),
B.value.style.chart.arcs.labels.show ? (S(), h("g", ct, [B.value.style.chart.arcs.labels.curved ? (S(!0), h(d, { key: 0 }, w(J.value.groups, (e, t) => (S(), h("text", {
class: "vue-ui-chord-label-curved",
key: `curved-label-${t}`,
"font-size": B.value.style.chart.arcs.labels.fontSize,
"font-weight": B.value.style.chart.arcs.labels.bold ? "bold" : "normal",
fill: B.value.style.chart.arcs.labels.adaptColorToBackground ? D(re)(q.value.colors[t]) : B.value.style.chart.arcs.labels.color
}, [g("textPath", {
href: `#labelPath-${t}_${j.value}`,
startOffset: "50%",
"text-anchor": "middle"
}, E(q.value.labels[t]) + E(B.value.style.chart.arcs.labels.showPercentage ? D(c)({
p: " (",
v: isNaN(e.proportion) ? 0 : e.proportion * 100,
s: "%)",
r: B.value.style.chart.arcs.labels.roundingPercentage
}) : ""), 9, ut)], 8, lt))), 128)) : !M.value && !N.value && !P.value ? (S(!0), h(d, { key: 1 }, w(J.value.groups, (e, t) => (S(), h("text", {
class: "vue-ui-chord-label-straight",
key: `label-${t}`,
transform: `
${yn((e.startAngle + e.endAngle) / 2)}
rotate(${-Y.value})
`,
dy: ".35em",
"text-anchor": _n(e) > Math.PI ? "end" : "start",
"font-size": B.value.style.chart.arcs.labels.fontSize,
"font-weight": B.value.style.chart.arcs.labels.bold ? "bold" : "normal",
fill: B.value.style.chart.arcs.labels.color,
innerHTML: D(i)({
content: D(l)(Yn(e, t)),
fontSize: B.value.style.chart.arcs.labels.fontSize,
fill: B.value.style.chart.arcs.labels.color,
x: 0,
y: 0
})
}, null, 8, dt))), 128)) : m("", !0)])) : m("", !0)
], 8, Ye),
T(e.$slots, "svg", { svg: {
height: 600,
width: 600,
isPrintingImg: D(Xt) || D(Zt) || Vt.value,
isPrintingSvg: Ht.value
} }, void 0, !0)
], 42, We)),
e.$slots.hint ? (S(), h("div", ft, [T(e.$slots, "hint", b(v({
hint: B.value.a11y.translations.keyboardNavigation,
isVisible: Ut.value
})), void 0, !0)])) : m("", !0),
e.$slots.watermark ? (S(), h("div", pt, [T(e.$slots, "watermark", b(v({ isPrinting: D(Xt) || D(Zt) || Vt.value || Ht.value })), void 0, !0)])) : m("", !0),
g("div", { id: `legend-bottom-${j.value}` }, null, 8, mt),
Rt.value && (B.value.style.chart.legend.show || e.$slots.legend) ? (S(), p(Ee, {
key: 7,
to: B.value.style.chart.legend.position === "top" ? `#legend-top-${j.value}` : `#legend-bottom-${j.value}`
}, [g("div", {
ref_key: "chartLegend",
ref: jt
}, [T(e.$slots, "legend", { legend: Wn.value }, () => [B.value.style.chart.legend.show ? (S(), p(we, {
key: `legend_${It.value}`,
legendSet: Wn.value,
config: Gn.value,
isCursorPointer: V.value,
onClickMarker: t[0] ||= ({ legend: e }) => Un(e.id)
}, De({
item: O(({ legend: e }) => [g("div", {
style: x({ opacity: P.value ? P.value === e.id ? 1 : .3 : 1 }),
onClick: (t) => e.select()
}, E(e.name), 13, ht)]),
_: 2
}, [e.$slots.pattern ? {
name: "legend-pattern",
fn: O(({ legend: e, index: t }) => [ke(_e, {
shape: e.shape,
radius: 30,
stroke: "none",
plot: {
x: 30,
y: 30
},
fill: `url(#pattern_${j.value}_${t})`
}, null, 8, ["shape", "fill"])]),
key: "0"
} : void 0]), 1032, [
"legendSet",
"config",
"isCursorPointer"
])) : m("", !0)], !0)], 512)], 8, ["to"])) : m("", !0),
e.$slots.source ? (S(), h("div", {
key: 8,
ref_key: "source",
ref: Mt,
dir: "auto"
}, [T(e.$slots, "source", {}, void 0, !0)], 512)) : m("", !0),
Y.value === B.value.initialRotation ? m("", !0) : (S(), h("div", gt, [T(e.$slots, "reset-action", { reset: Hn }, () => [g("button", {
"data-cy-reset": "",
tabindex: "0",
role: "button",
class: "vue-data-ui-refresh-button",
style: x({
background: B.value.style.chart.backgroundColor,
cursor: V.value ? "pointer" : "default"
}),
onClick: Hn
}, [ke(D(yt), {
name: "refresh",
stroke: B.value.style.chart.color
}, null, 8, ["stroke"])], 4)], !0)])),
A.value && B.value.userOptions.buttons.table ? (S(), p(Pe(Xn.value.component), Ae({ key: 10 }, Xn.value.props, {
ref_key: "tableUnit",
ref: zt,
onClose: Zn
}), De({
content: O(() => [(S(), p(D(bt), {
key: `table_${Ft.value}`,
colNames: Kn.value.colNames,
head: Kn.value.head,
body: Kn.value.body,
config: Kn.value.config,
title: B.value.table.useDialog ? "" : Xn.value.title,
withCloseButton: !B.value.table.useDialog,
isCursorPointer: V.value,
onClose: Zn
}, {
th: O(({ th: e }) => [Oe(E(e.name), 1)]),
td: O(({ td: e }) => [g("div", _t, E(e.name ? e.name : On(e)), 1)]),
_: 1
}, 8, [
"colNames",
"head",
"body",
"config",
"title",
"withCloseButton",
"isCursorPointer"
]))]),
_: 2
}, [B.value.table.useDialog ? {
name: "title",
fn: O(() => [Oe(E(Xn.value.title), 1)]),
key: "0"
} : void 0, B.value.table.useDialog ? {
name: "actions",
fn: O(() => [g("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: t[1] ||= (e) => qn(B.value.userOptions.callbacks.csv),
style: x({ cursor: V.value ? "pointer" : "default" })
}, [ke(D(yt), {
name: "fileCsv",
stroke: Xn.value.props.color
}, null, 8, ["stroke"])], 4)]),
key: "1"
} : void 0]), 1040)) : m("", !0),
T(e.$slots, "skeleton", {}, () => [D(Gt) ? (S(), p(de, { key: 0 })) : m("", !0)], !0)
], 46, Ve));
}
}, [["__scopeId", "data-v-268ddfaa"]]);
//#endregion
export { Be as n, vt as t };