vue-data-ui 3.19.8 → 3.20.0

package/dist/vue-ui-relation-circle-MxYh6hSt.js

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