vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
926 lines (925 loc) • 29.9 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { Jt as t, Kt as n, Pt as r, X as i, i as a, jt as o, pt as ee, q as te, qt as s, r as ne, t as re, tt as ie, w as ae } from "./lib-Bttd6u5E.js";
import { n as oe, t 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 "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as ve, t as ye } from "./useResponsive-ZtArZtUf.js";
import { t as be } from "./A11yDataTable-DdRsVULz.js";
import { t as xe } from "./useUserOptionState-DK-_1ddE.js";
import { t as Se } from "./useChartAccessibility-DYqac8yF.js";
import { t as Ce } from "./useAutoSizeLabelsInsideViewbox-DvDwcwi_.js";
import { t as we } from "./vue_ui_relation_circle-D0p4mXmv.js";
import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as Te, createTextVNode as Ee, createVNode as De, defineAsyncComponent as Oe, guardReactiveProps as m, mergeProps as ke, nextTick as Ae, normalizeClass as je, normalizeProps as h, normalizeStyle as g, onBeforeUnmount as Me, onMounted as Ne, openBlock as _, ref as v, renderList as y, renderSlot as b, shallowRef as Pe, toDisplayString as x, toRefs as Fe, unref as S, useCssVars as Ie, watch as Le, withCtx as C } from "vue";
//#region src/components/vue-ui-relation-circle.vue
var Re = /* @__PURE__ */ e({ default: () => at }), ze = ["id"], Be = ["id"], Ve = { style: { position: "relative" } }, He = [
"xmlns",
"viewBox",
"aria-describedby"
], Ue = ["width", "height"], We = [
"cx",
"cy",
"r",
"stroke",
"stroke-width"
], Ge = { key: 1 }, Ke = [
"stroke",
"d",
"stroke-width"
], qe = { style: { "pointer-events": "none" } }, Je = [
"cx",
"cy",
"fill",
"r",
"stroke"
], Ye = [
"x",
"y",
"fill",
"font-size"
], Xe = { key: 2 }, Ze = [
"stroke",
"stroke-width",
"x1",
"x2",
"y1",
"y2"
], Qe = { style: { "pointer-events": "none" } }, $e = [
"cx",
"cy",
"fill",
"r",
"stroke"
], et = [
"x",
"y",
"fill",
"font-size"
], tt = [
"text-anchor",
"transform",
"x",
"y",
"font-weight",
"font-size",
"fill",
"text-decoration",
"onClick",
"onMouseenter",
"onMouseleave"
], nt = [
"cx",
"cy",
"fill",
"stroke",
"r",
"onClick",
"onMouseenter",
"onMouseleave"
], rt = {
key: 0,
style: {
position: "absolute",
top: "100%",
left: "0",
width: "100%"
},
"data-dom-to-png-ignore": "",
"aria-hidden": "true"
}, it = {
key: 5,
class: "vue-data-ui-watermark"
}, at = /*#__PURE__*/ _e({
__name: "vue-ui-relation-circle",
props: {
dataset: {
type: Array,
default() {
return [];
}
},
config: {
type: Object,
default() {
return {};
}
}
},
emits: ["copyAlt"],
setup(e, { expose: _e, emit: Re }) {
Ie((e) => ({
v6c3b5fda: Nt.value,
v119a74b9: Mt.value,
v5de8e2db: Pt.value
}));
let at = Oe(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), ot = Oe(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), st = Oe(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), { vue_ui_relation_circle: ct } = ce(), { isThemeValid: lt, warnInvalidTheme: ut } = me(), w = e, dt = Re, ft = l(() => !!w.dataset && Object.keys(w.dataset).length), T = v(te()), pt = v(0), E = v(null), mt = v(null), ht = v(null), gt = v(null), _t = v(0), D = v(!1), O = v(!1), k = v(null), A = v(!1), j = v(Ct());
oe({
config: () => j.value,
dataset: () => w.dataset,
component: "VueUiRelationCircle",
rules: [se.noHint]
});
let M = l(() => j.value.userOptions.useCursorPointer), vt = l(() => t({
defaultConfig: {
userOptions: { show: !1 },
customPalette: Array(7).fill("#CACACA"),
style: {
backgroundColor: "#99999930",
labels: { color: "#6A6A6A" },
circle: { stroke: "#6A6A6A" },
plot: {
color: "#6A6A6A",
useSerieColor: !0
},
links: { maxWidth: 2 }
}
},
userConfig: j.value.skeletonConfig ?? {}
})), { loading: yt, FINAL_DATASET: bt, manualLoading: N } = ue({
...Fe(w),
FINAL_CONFIG: j,
prepareConfig: Ct,
skeletonDataset: w.config?.skeletonDataset ?? [
{
id: "A",
label: "_",
relations: [
"B",
"C",
"D",
"E",
"F",
"G"
]
},
{
id: "B",
label: "_",
relations: ["A"]
},
{
id: "C",
label: "_",
relations: ["A"]
},
{
id: "D",
label: "_",
relations: ["A"]
},
{
id: "E",
label: "_",
relations: ["A"]
},
{
id: "F",
label: "_",
relations: ["A"]
},
{
id: "G",
label: "_",
relations: ["A"]
}
],
skeletonConfig: t({
defaultConfig: j.value,
userConfig: vt.value
})
}), { userOptionsVisible: P, setUserOptionsVisibility: xt, keepUserOptionState: St } = xe({ config: j.value }), { svgRef: F } = Se({ config: j.value.style.title });
function Ct() {
let e = pe({
userConfig: w.config,
defaultConfig: ct
}), t = e.theme;
if (!t) return e;
if (!lt.value(e)) return ut(e), e;
let i = pe({
userConfig: we[t] || w.config,
defaultConfig: e
}), a = pe({
userConfig: w.config,
defaultConfig: i
});
return {
...a,
customPalette: a.customPalette.length ? a.customPalette : n[t] || r
};
}
Le(() => w.config, (e) => {
j.value = Ct(), P.value = !j.value.userOptions.showOnChartHover, V.value = j.value.style.size, H.value = j.value.style.weightLabels.size, U.value = j.value.style.plot.radius, W.value = j.value.style.labels.fontSize, G.value.height = j.value.style.size, G.value.width = j.value.style.size, It(), _t.value += 1;
}, { deep: !0 }), Le(() => w.dataset, (e) => {
Array.isArray(e) && e.length > 0 && (N.value = !1);
}, { deep: !0 });
let { isPrinting: wt, isImaging: Tt, generatePdf: Et, generateImage: Dt } = le({
elementId: `relation_circle_${T.value}`,
fileName: j.value.style.title.text || "vue-ui-relation-circle",
options: j.value.userOptions.print
}), Ot = l(() => j.value.userOptions.show && !j.value.style.title.text), kt = l(() => ae(j.value.customPalette)), I = v([]), L = v([]), R = v({}), z = v([]), At = v(0), B = l(() => bt.value.slice(0, j.value.style.limit).map((e) => {
let t = Array.isArray(e.relations) ? e.relations : [];
return {
...e,
weights: Array.isArray(e.weights) ? e.weights : Array(t.length).fill(1),
relations: t
};
}));
Le(B, () => {
I.value = [], L.value = [], zt(), Vt();
});
let V = v(j.value.style.size), H = v(j.value.style.weightLabels.size), U = v(j.value.style.plot.radius), W = v(j.value.style.labels.fontSize), G = v({
height: j.value.style.size,
width: j.value.style.size
}), K = l({
get() {
return V.value * j.value.style.circle.radiusProportion;
},
set(e) {
return e;
}
}), jt = l(() => j.value.style.links.curved), Mt = l(() => `${j.value.style.animation.speedMs}ms`), Nt = l(() => K.value * 2), Pt = l(() => K.value * 4), q = Pe(null), J = Pe(null);
Ne(() => {
It(), document.getElementById(`relation_circle_${T.value}`).addEventListener("click", Rt);
});
let Ft = l(() => j.value.debug);
function It() {
if (o(w.dataset) ? (ie({
componentName: "VueUiRelationCircle",
type: "dataset",
debug: Ft.value
}), N.value = !0) : w.dataset.forEach((e, t) => {
ee({
datasetObject: e,
requiredAttributes: [
"id",
"label",
"relations",
"weights"
]
}).forEach((e) => {
ie({
componentName: "VueUiRelationCircle",
type: "datasetSerieAttribute",
property: e,
index: t,
debug: Ft.value
});
});
}), o(w.dataset) || (N.value = j.value.loading), j.value.responsive) {
let e = ve(() => {
let { width: e, height: t } = ye({
chart: E.value,
title: j.value.style.title.text ? mt.value : null,
source: ht.value,
noTitle: gt.value
});
requestAnimationFrame(() => {
V.value = Math.min(e, t), G.value.width = Math.max(.1, e), G.value.height = Math.max(.1, t - 12), K.value = V.value * j.value.style.circle.radiusProportion, I.value = [], L.value = [], zt(), Vt(), Lt(), j.value.responsiveProportionalSizing ? (H.value = s({
relator: V.value,
adjuster: j.value.style.size,
source: j.value.style.weightLabels.size,
threshold: 6,
fallback: 6
}), U.value = s({
relator: V.value,
adjuster: j.value.style.size,
source: j.value.style.plot.radius,
threshold: 1,
fallback: 1
}), W.value = s({
relator: V.value,
adjuster: j.value.style.size,
source: j.value.style.labels.fontSize,
threshold: 6,
fallback: 6
})) : (H.value = j.value.style.weightLabels.size, U.value = j.value.style.plot.radius, W.value = j.value.style.labels.fontSize);
});
});
q.value && (J.value && q.value.unobserve(J.value), q.value.disconnect()), q.value = new ResizeObserver(e), J.value = E.value.parentNode, q.value.observe(J.value);
} else I.value = [], L.value = [], zt(), Vt();
Lt();
}
Me(() => {
document.getElementById(`relation_circle_${T.value}`).removeEventListener("click", Rt), q.value && (J.value && q.value.unobserve(J.value), q.value.disconnect());
});
let { autoSizeLabels: Lt } = Ce({
svgRef: F,
fontSize: j.value.style.labels.fontSize,
minFontSize: j.value.style.labels.minFontSize,
sizeRef: W,
labelClass: ".vue-ui-relation-circle-legend"
});
function Rt(e) {
let t = e.target;
t && Array.from(t.classList).includes("vue-ui-user-options") || t && Array.from(t.classList).includes("vue-ui-user-options-summary") || t && Array.from(t.classList).includes("vue-data-ui-button") || t && Array.from(t.classList).includes("vue-ui-relation-circle-legend") || (R.value = {}, z.value = []);
}
function zt() {
let e = 6.28319 / B.value.length, t = 360 / B.value.length, n = 0, i = 0;
B.value.forEach((a, o) => {
let ee = a.weights.reduce((e, t) => e + t, 0), te = K.value * Math.cos(n) + G.value.width / 2, s = K.value * Math.sin(n) + G.value.height / 2 + j.value.style.circle.offsetY;
I.value.push({
x: te,
y: s,
...a,
color: a.color ? a.color : kt.value[o] ? kt.value[o] : r[o],
regAngle: i,
totalWeight: ee
}), n += e, i += t;
});
}
function Bt(e, t) {
return {
x: (e.x + t.x) / 2,
y: (e.y + t.y) / 2
};
}
function Vt() {
L.value = [], I.value.forEach((e) => {
I.value.filter((t) => t.relations.includes(e.id)).forEach((t, n) => {
let r = t.relations.indexOf(e.id);
L.value.push({
weight: t.weights[r] ? t.weights[r] : 0,
relationId: `${e.id}_${t.id}`,
x1: e.x,
y1: e.y,
x2: t.x,
y2: t.y,
colorSource: e.color,
colorTarget: t.color,
midPointLine: Bt({
x: e.x,
y: e.y
}, {
x: t.x,
y: t.y
}),
midPointBezier: Ht({
x1: e.x,
x2: t.x,
y1: e.y,
y2: t.y
}),
...e
});
});
});
}
function Ht(e) {
let t = {
x: e.x1,
y: e.y1
}, n = {
x: e.x2,
y: e.y2
}, r = {
x: e.x1,
y: e.y1
}, i = {
x: G.value.width / 2,
y: G.value.height / 2 + j.value.style.circle.offsetY
}, a = .5;
return {
x: .5 ** 3 * t.x + 3 * .5 ** 2 * a * r.x + 1.5 * a ** 2 * i.x + a ** 3 * n.x,
y: .5 ** 3 * t.y + 3 * .5 ** 2 * a * r.y + 1.5 * a ** 2 * i.y + a ** 3 * n.y
};
}
let Ut = l(() => Math.max(...L.value.map((e) => e.weight)));
function Wt(e) {
return Object.hasOwn(R.value, "x") ? z.value.includes(e.id) ? "opacity:1" : "opacity:0.1" : "opacity:1";
}
function Y(e) {
return e.colorSource;
}
function Gt(e) {
return Object.hasOwn(R.value, "x") ? z.value.includes(e.id) && e.relationId === `${e.id}_${R.value.id}` || e.relationId === `${R.value.id}_${e.id}` ? `opacity:1;stroke-width:${en(e)}` : "opacity: 0" : "opacity: 1";
}
function X(e) {
return Object.hasOwn(R.value, "x") ? !!(z.value.includes(e.id) && e.relationId === `${e.id}_${R.value.id}` || e.relationId === `${R.value.id}_${e.id}`) : !1;
}
function Kt(e) {
return e.regAngle > 90 && e.regAngle < 270 ? "end" : "start";
}
function qt(e) {
return e.regAngle > 90 && e.regAngle < 270 ? e.x - 5 : e.x + 5;
}
function Jt(e) {
return Object.hasOwn(R.value, "x") ? R.value.id === e.id || z.value.includes(e.id) ? "opacity:1" : "opacity:0.2" : "opacity:1";
}
function Yt(e) {
return e.regAngle > 90 && e.regAngle < 270 ? `rotate(${e.regAngle + 180},${e.x},${e.y})` : `rotate(${e.regAngle},${e.x},${e.y})`;
}
let Z = v(null);
function Xt(e, t) {
Z.value = t, k.value = t, j.value.events.datapointEnter && j.value.events.datapointEnter({
datapoint: e,
seriesIndex: t
});
}
function Zt(e, t) {
Z.value = null, A.value || (k.value = null), j.value.events.datapointLeave && j.value.events.datapointLeave({
datapoint: e,
seriesIndex: t
});
}
function Qt(e, t) {
e && (j.value.events.datapointClick && j.value.events.datapointClick({
datapoint: e,
seriesIndex: t
}), At.value = 360 - e.regAngle, R.value.id && e.id === R.value.id ? (R.value = {}, z.value = []) : (R.value = e, z.value = [...e.relations]));
}
function $t(e, t) {
k.value = t, Qt(e, t);
}
function en(e) {
let t = e.weight / Ut.value * j.value.style.links.maxWidth;
return Math.max(.3, t);
}
let Q = v(!1);
function tn(e) {
Q.value = e, pt.value += 1;
}
let $ = v(!1);
function nn() {
$.value = !$.value;
}
async function rn({ scale: e = 2 } = {}) {
if (!E.value) return;
let { width: t, height: n } = E.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await he({
domElement: E.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: j.value.style.title.text,
width: t,
height: n,
aspectRatio: r
};
}
let an = l(() => j.value.style.backgroundColor), on = l(() => j.value.style.title), { exportSvg: sn, getSvg: cn } = fe({
svg: F,
title: on,
backgroundColor: an
});
async function ln({ isCb: e }) {
O.value = !0, await Ae();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await cn();
await Promise.resolve(j.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(sn());
} finally {
O.value = !1;
}
}
function un(e) {
if (e?.stage === "start") {
D.value = !0;
return;
}
if (e?.stage === "end") {
D.value = !1;
return;
}
Dt();
}
async function dn() {
if (dt("copyAlt", {
config: j.value,
dataset: B.value
}), !j.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(j.value.userOptions.callbacks.altCopy({
config: j.value,
dataset: B.value
}));
}
function fn() {
A.value = !0, I.value.length && k.value === null && (k.value = 0);
}
function pn() {
A.value = !1, k.value = null;
}
function mn(e) {
if (!F.value || $.value || document.activeElement !== F.value || !I.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) {
k.value = null, R.value = {}, z.value = [];
return;
}
if (r) {
if (k.value === null) return;
let e = I.value[k.value];
if (!e) return;
Qt(e, k.value);
return;
}
let a = k.value;
a === null || a < 0 || a >= I.value.length ? a = n ? 0 : I.value.length - 1 : n ? (a += 1, a >= I.value.length && (a = 0)) : t && (--a, a < 0 && (a = I.value.length - 1)), k.value = a, Z.value = a;
let o = I.value[a];
o && j.value.events.datapointEnter && j.value.events.datapointEnter({
datapoint: o,
seriesIndex: a
});
}
let hn = l(() => ({
headers: [
"ID",
"Label",
"Total weight",
"Relations count",
"Relations"
],
rows: B.value.map((e) => {
let t = e.relations.map((e) => B.value.find((t) => t.id === e)?.label || e).join(", "), n = (e.weights || []).reduce((e, t) => e + Number(t || 0), 0);
return [
e.id,
e.label,
n,
e.relations.length,
t
];
})
}));
return _e({
getImage: rn,
generatePdf: Et,
generateSvg: ln,
generateImage: Dt,
toggleAnnotator: nn,
toggleFullscreen: tn,
copyAlt: dn
}), (e, t) => (_(), f("div", {
ref_key: "relationCircleChart",
ref: E,
class: "vue-data-ui-component vue-ui-relation-circle",
style: g(`width:100%;background:${j.value.style.backgroundColor};text-align:center;${j.value.responsive ? "height: 100%" : ""}`),
id: `relation_circle_${T.value}`,
onMouseenter: t[0] ||= () => S(xt)(!0),
onMouseleave: t[1] ||= () => S(xt)(!1)
}, [
p("div", {
id: `chart-instructions-${T.value}`,
class: "sr-only"
}, [p("p", null, x(j.value.a11y.translations.keyboardNavigation), 1)], 8, Be),
hn.value?.rows?.length ? (_(), u(be, {
key: 0,
uid: T.value,
head: hn.value.headers,
body: hn.value.rows,
notice: j.value.a11y.translations.tableAvailable,
caption: j.value.a11y.translations.tableCaption
}, null, 8, [
"uid",
"head",
"body",
"notice",
"caption"
])) : d("", !0),
j.value.userOptions.buttons.annotator ? (_(), u(S(at), {
key: 1,
svgRef: S(F),
backgroundColor: j.value.style.backgroundColor,
color: j.value.style.color,
active: $.value,
isCursorPointer: M.value,
onClose: nn
}, {
"annotator-action-close": C(() => [b(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": C(({ color: t }) => [b(e.$slots, "annotator-action-color", h(m({ color: t })), void 0, !0)]),
"annotator-action-draw": C(({ mode: t }) => [b(e.$slots, "annotator-action-draw", h(m({ mode: t })), void 0, !0)]),
"annotator-action-undo": C(({ disabled: t }) => [b(e.$slots, "annotator-action-undo", h(m({ disabled: t })), void 0, !0)]),
"annotator-action-redo": C(({ disabled: t }) => [b(e.$slots, "annotator-action-redo", h(m({ disabled: t })), void 0, !0)]),
"annotator-action-delete": C(({ disabled: t }) => [b(e.$slots, "annotator-action-delete", h(m({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : d("", !0),
Ot.value ? (_(), f("div", {
key: 2,
ref_key: "noTitle",
ref: gt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : d("", !0),
j.value.style.title.text ? (_(), f("div", {
key: 3,
ref_key: "chartTitle",
ref: mt,
style: "width:100%;background:transparent"
}, [(_(), u(ge, {
key: `title_${_t.value}`,
config: {
title: {
cy: "relation-div-title",
...j.value.style.title
},
subtitle: {
cy: "relation-div-subtitle",
...j.value.style.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : d("", !0),
j.value.userOptions.show && ft.value && (S(St) || S(P)) ? (_(), u(S(ot), {
ref: "details",
key: `user_options_${pt.value}`,
backgroundColor: j.value.style.backgroundColor,
color: j.value.style.color,
isPrinting: S(wt),
isImaging: S(Tt),
uid: T.value,
hasPdf: j.value.userOptions.buttons.pdf,
hasImg: j.value.userOptions.buttons.img,
hasSvg: j.value.userOptions.buttons.svg,
hasFullscreen: j.value.userOptions.buttons.fullscreen,
hasAltCopy: j.value.userOptions.buttons.altCopy,
hasXls: !1,
isFullscreen: Q.value,
titles: { ...j.value.userOptions.buttonTitles },
chartElement: E.value,
position: j.value.userOptions.position,
hasAnnotator: j.value.userOptions.buttons.annotator,
isAnnotation: $.value,
callbacks: j.value.userOptions.callbacks,
printScale: j.value.userOptions.print.scale,
isCursorPointer: M.value,
onToggleFullscreen: tn,
onGeneratePdf: S(Et),
onGenerateImage: un,
onGenerateSvg: ln,
onToggleAnnotator: nn,
onCopyAlt: dn,
style: g({ visibility: S(St) ? S(P) ? "visible" : "hidden" : "visible" })
}, Te({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: C(({ isOpen: t, color: n }) => [b(e.$slots, "menuIcon", h(m({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: C(() => [b(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: C(() => [b(e.$slots, "optionImg", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: C(() => [b(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: C(({ toggleFullscreen: t, isFullscreen: n }) => [b(e.$slots, "optionFullscreen", h(m({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: C(({ toggleAnnotator: t, isAnnotator: n }) => [b(e.$slots, "optionAnnotator", h(m({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: C(({ altCopy: t }) => [b(e.$slots, "optionAltCopy", h(m({ altCopy: t })), void 0, !0)]),
key: "6"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: C(() => [b(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "7"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: C(() => [b(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "8"
} : void 0
]), 1032, [
"backgroundColor",
"color",
"isPrinting",
"isImaging",
"uid",
"hasPdf",
"hasImg",
"hasSvg",
"hasFullscreen",
"hasAltCopy",
"isFullscreen",
"titles",
"chartElement",
"position",
"hasAnnotator",
"isAnnotation",
"callbacks",
"printScale",
"isCursorPointer",
"onGeneratePdf",
"style"
])) : d("", !0),
p("div", Ve, [(_(), f("svg", {
ref_key: "svgRef",
ref: F,
xmlns: S(re),
class: je([{
"vue-data-ui-fullscreen--on": Q.value,
"vue-data-ui-fulscreen--off": !Q.value
}, "relation-circle"]),
viewBox: `0 0 ${G.value.width <= 0 ? 10 : G.value.width} ${G.value.height <= 0 ? 10 : G.value.height}`,
width: "100%",
style: "user-select:none; background:transparent",
"aria-describedby": `chart-instructions-${T.value}`,
tabindex: "0",
onFocus: fn,
onBlur: pn,
onKeydown: mn
}, [
De(S(st)),
e.$slots["chart-background"] ? (_(), f("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" }
}, [b(e.$slots, "chart-background", {}, void 0, !0)], 8, Ue)) : d("", !0),
p("circle", {
cx: (G.value.width <= 0 ? 1e-4 : G.value.width) / 2,
cy: (G.value.height <= 0 ? 1e-4 : G.value.height) / 2 + j.value.style.circle.offsetY,
r: K.value <= 0 ? 1e-4 : K.value,
stroke: j.value.style.circle.stroke,
"stroke-width": j.value.style.circle.strokeWidth,
fill: "transparent",
class: "main-circle"
}, null, 8, We),
jt.value ? (_(), f("g", Ge, [(_(!0), f(c, null, y(L.value, (e, t) => (_(), f("path", {
key: `relation_${t}`,
style: g(Gt(e)),
stroke: Y(e),
class: je(["relation", { "vue-ui-relation-circle-selected": R.value.hasOwnProperty("id") && z.value.includes(e.id) }]),
d: `M${e.x1},${e.y1} C${e.x1},${e.y1} ${G.value.width / 2},${G.value.height / 2 + j.value.style.circle.offsetY} ${e.x2},${e.y2}`,
fill: "none",
"stroke-width": en(e),
"stroke-linecap": "round"
}, null, 14, Ke))), 128)), (_(!0), f(c, null, y(L.value, (t, n) => (_(), f("g", qe, [
X(t) ? b(e.$slots, "dataLabel", ke({ ref_for: !0 }, {
x: t.midPointBezier.x,
y: t.midPointBezier.y,
color: Y(t),
weight: t.weight,
fontSize: H.value
}), void 0, !0, 0) : d("", !0),
X(t) && !e.$slots.dataLabel ? (_(), f("circle", {
key: 1,
cx: t.midPointBezier.x,
cy: t.midPointBezier.y,
fill: Y(t),
r: H.value,
stroke: j.value.style.backgroundColor,
"stroke-width": "1"
}, null, 8, Je)) : d("", !0),
X(t) && !e.$slots.dataLabel ? (_(), f("text", {
key: 2,
x: t.midPointBezier.x,
y: t.midPointBezier.y + H.value / 3,
fill: S(ne)(Y(t)),
"text-anchor": "middle",
"font-size": H.value
}, x(S(a)(j.value.style.weightLabels.formatter, t.weight, S(i)({
p: j.value.style.weightLabels.prefix,
v: t.weight,
s: j.value.style.weightLabels.suffix,
r: j.value.style.weightLabels.rounding
}), { ...t })), 9, Ye)) : d("", !0)
]))), 256))])) : (_(), f("g", Xe, [(_(!0), f(c, null, y(L.value, (e, t) => (_(), f("line", {
key: `relation_${t}`,
stroke: Y(e),
"stroke-width": en(e),
style: g(Gt(e)),
x1: e.x1,
x2: e.x2,
y1: e.y1,
y2: e.y2,
class: je({ "vue-ui-relation-circle-selected": R.value.hasOwnProperty("id") && z.value.includes(e.id) }),
"stroke-linecap": "round"
}, null, 14, Ze))), 128)), (_(!0), f(c, null, y(L.value, (t, n) => (_(), f("g", Qe, [
X(t) ? b(e.$slots, "dataLabel", ke({ ref_for: !0 }, {
x: t.midPointLine.x,
y: t.midPointLine.y,
color: Y(t),
weight: t.weight,
fontSize: H.value
}), void 0, !0, 0) : d("", !0),
X(t) && !e.$slots.dataLabel && j.value.style.weightLabels.show ? (_(), f("circle", {
key: 1,
cx: t.midPointLine.x,
cy: t.midPointLine.y,
fill: Y(t),
r: H.value,
stroke: j.value.style.backgroundColor,
"stroke-width": "1"
}, null, 8, $e)) : d("", !0),
X(t) && !e.$slots.dataLabel && j.value.style.weightLabels.show ? (_(), f("text", {
key: 2,
x: t.midPointLine.x,
y: t.midPointLine.y + H.value / 3,
fill: S(ne)(Y(t)),
"text-anchor": "middle",
"font-size": H.value
}, x(S(a)(j.value.style.weightLabels.formatter, t.weight, S(i)({
p: j.value.style.weightLabels.prefix,
v: t.weight,
s: j.value.style.weightLabels.suffix,
r: j.value.style.weightLabels.rounding
}), { ...t })), 9, et)) : d("", !0)
]))), 256))])),
(_(!0), f(c, null, y(I.value, (e, t) => (_(), f("text", {
key: `plot_text_${t}`,
"text-anchor": Kt(e),
transform: Yt(e),
x: qt(e),
y: e.y + 5,
class: "vue-ui-relation-circle-legend",
"transform-origin": "start",
"font-weight": R.value.id === e.id ? "900" : "400",
style: g(`font-family:${j.value.style.fontFamily};${Jt(e)};cursor:${M.value ? "pointer" : "default"}`),
"font-size": W.value,
fill: j.value.style.labels.color,
"text-decoration": t === Z.value || t === k.value ? "underline" : void 0,
onClick: (n) => $t(e, t),
onMouseenter: (n) => Xt(e, t),
onMouseleave: (n) => Zt(e, t)
}, [S(yt) ? (_(), f(c, { key: 0 }, [Ee("--------")], 64)) : (_(), f(c, { key: 1 }, [Ee(x(e.label) + " (" + x(S(a)(j.value.style.weightLabels.formatter, e.totalWeight, S(i)({
p: j.value.style.weightLabels.prefix,
v: e.totalWeight,
s: j.value.style.weightLabels.suffix,
r: j.value.style.weightLabels.rounding
}), { ...e })) + ") ", 1)], 64))], 44, tt))), 128)),
(_(!0), f(c, null, y(I.value, (e, t) => (_(), f("circle", {
cx: e.x,
cy: e.y,
key: `plot_${t}`,
style: g(`${Wt(e)}; transition: r 0.2s ease-in-out; cursor:${M.value ? "pointer" : "default"}`),
class: "vue-ui-relation-circle-plot",
fill: j.value.style.plot.useSerieColor ? e.color : j.value.style.plot.color,
stroke: j.value.style.backgroundColor,
"stroke-width": "1",
r: U.value * (t === Z.value || t === k.value ? 2 : 1),
onClick: (n) => $t(e, t),
onMouseenter: (n) => Xt(e, t),
onMouseleave: (n) => Zt(e, t)
}, null, 44, nt))), 128)),
b(e.$slots, "svg", { svg: {
...G.value,
isPrintingImg: S(wt) || S(Tt) || D.value,
isPrintingSvg: O.value
} }, void 0, !0)
], 42, He)), e.$slots.hint ? (_(), f("div", rt, [b(e.$slots, "hint", h(m({
hint: j.value.a11y.translations.keyboardNavigation,
isVisible: A.value
})), void 0, !0)])) : d("", !0)]),
e.$slots.watermark ? (_(), f("div", it, [b(e.$slots, "watermark", h(m({ isPrinting: S(wt) || S(Tt) || D.value || O.value })), void 0, !0)])) : d("", !0),
e.$slots.source ? (_(), f("div", {
key: 6,
ref_key: "source",
ref: ht,
dir: "auto"
}, [b(e.$slots, "source", {}, void 0, !0)], 512)) : d("", !0),
b(e.$slots, "skeleton", {}, () => [S(yt) ? (_(), u(de, { key: 0 })) : d("", !0)], !0)
], 44, ze));
}
}, [["__scopeId", "data-v-7f386d86"]]);
//#endregion
export { Re as n, at as t };