vue-data-ui 3.19.9 → 3.20.0

package/dist/vue-ui-relation-circle-D-rUk-0P.js

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