vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
599 lines (598 loc) • 25.6 kB
JavaScript
import { useCssVars as ut, computed as h, defineAsyncComponent as Z, ref as r, toRefs as ot, watch as ee, shallowRef as Le, onMounted as rt, onBeforeUnmount as ct, createElementBlock as n, openBlock as i, unref as u, normalizeStyle as z, createBlock as N, createCommentVNode as f, createSlots as vt, withCtx as M, renderSlot as g, normalizeProps as j, guardReactiveProps as D, normalizeClass as te, createVNode as dt, createElementVNode as ft, Fragment as $, renderList as O, mergeProps as Pe, toDisplayString as U, createTextVNode as ze } from "vue";
import { u as yt, c as ht, t as gt, a as mt, p as Oe, b as pt, d as bt, o as Se, f as Ie, g as kt, X as wt, F as Me, k as le, i as se, E as ae } from "./index-q-LPw2IT.js";
import { t as xt, u as $t } from "./useResponsive-DfdjqQps.js";
import { u as At, B as _t } from "./useLoading-D7YHNtLX.js";
import { u as Ct } from "./usePrinter-DX7efa1s.js";
import { u as Ee } from "./useNestedProp-04aFeUYu.js";
import { u as Lt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Pt } from "./useChartAccessibility-9icAAmYg.js";
import { u as zt } from "./useAutoSizeLabelsInsideViewbox-bEAG5sD1.js";
import Ot from "./img-Ctts6JQb.js";
import St from "./Title-B55R8CAZ.js";
import { _ as It } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["cx", "cy", "r", "stroke", "stroke-width"], Rt = { key: 1 }, Tt = ["stroke", "d", "stroke-width"], Nt = { style: { "pointer-events": "none" } }, jt = ["cx", "cy", "fill", "r", "stroke"], Dt = ["x", "y", "fill", "font-size"], Ut = { key: 2 }, Vt = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], Gt = { style: { "pointer-events": "none" } }, Wt = ["cx", "cy", "fill", "r", "stroke"], Xt = ["x", "y", "fill", "font-size"], Yt = ["text-anchor", "transform", "x", "y", "font-weight", "font-size", "fill", "text-decoration", "onClick", "onMouseenter", "onMouseleave"], qt = ["cx", "cy", "fill", "stroke", "r", "onClick", "onMouseenter", "onMouseleave"], Ht = {
key: 4,
class: "vue-data-ui-watermark"
}, Jt = {
__name: "vue-ui-relation-circle",
props: {
dataset: {
type: Array,
default() {
return [];
}
},
config: {
type: Object,
default() {
return {};
}
}
},
setup(Fe, { expose: Be }) {
ut((e) => ({
"51791a0b": Ye.value,
"501dae6a": Xe.value,
"2abe5668": qe.value
}));
const Re = Z(() => import("./PenAndPaper-BJ0hcgsa.js")), Te = Z(() => import("./UserOptions-DVzyjG-W.js")), Ne = Z(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_relation_circle: je } = yt(), m = Fe, De = h(() => !!m.dataset && Object.keys(m.dataset).length), S = r(ht()), ie = r(0), A = r(null), ne = r(null), ue = r(null), oe = r(null), re = r(0), l = r(X()), { loading: ce, FINAL_DATASET: Ue, manualLoading: V } = At({
...ot(m),
FINAL_CONFIG: l,
prepareConfig: X,
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: gt({
defaultConfig: l.value,
userConfig: {
userOptions: { show: !1 },
customPalette: new Array(7).fill("#CACACA"),
style: {
backgroundColor: "#99999930",
labels: { color: "#6A6A6A" },
circle: { stroke: "#6A6A6A" },
plot: { color: "#6A6A6A", useSerieColor: !0 },
links: { maxWidth: 2 }
}
}
})
}), { userOptionsVisible: G, setUserOptionsVisibility: ve, keepUserOptionState: de } = Lt({ config: l.value }), { svgRef: W } = Pt({ config: l.value.style.title });
function X() {
const e = Ee({
userConfig: m.config,
defaultConfig: je
});
return e.theme ? {
...Ee({
userConfig: pt.vue_ui_relation_circle[e.theme] || m.config,
defaultConfig: e
}),
customPalette: mt[e.theme] || Oe
} : e;
}
ee(() => m.config, (e) => {
l.value = X(), G.value = !l.value.userOptions.showOnChartHover, _.value = l.value.style.size, y.value = l.value.style.weightLabels.size, F.value = l.value.style.plot.radius, I.value = l.value.style.labels.fontSize, o.value.height = l.value.style.size, o.value.width = l.value.style.size, be(), re.value += 1;
}, { deep: !0 }), ee(() => m.dataset, (e) => {
Array.isArray(e) && e.length > 0 && (V.value = !1);
}, { deep: !0 });
const { isPrinting: fe, isImaging: ye, generatePdf: he, generateImage: ge } = Ct({
elementId: `relation_circle_${S.value}`,
fileName: l.value.style.title.text || "vue-ui-relation-circle",
options: l.value.userOptions.print
}), Ve = h(() => l.value.userOptions.show && !l.value.style.title.text), me = h(() => bt(l.value.customPalette)), k = r([]), p = r([]), d = r({}), b = r([]), Ge = r(0), E = h(() => Ue.value.slice(0, l.value.style.limit).map((e) => {
const s = Array.isArray(e.relations) ? e.relations : [];
return {
...e,
weights: Array.isArray(e.weights) ? e.weights : new Array(s.length).fill(1),
relations: s
};
}));
ee(E, () => {
k.value = [], p.value = [], Y(), q();
});
const _ = r(l.value.style.size), y = r(l.value.style.weightLabels.size), F = r(l.value.style.plot.radius), I = r(l.value.style.labels.fontSize), o = r({
height: l.value.style.size,
width: l.value.style.size
}), C = h({
get() {
return _.value * l.value.style.circle.radiusProportion;
},
set(e) {
return e;
}
}), We = h(() => l.value.style.links.curved), Xe = h(() => `${l.value.style.animation.speedMs}ms`), Ye = h(() => C.value * 2), qe = h(() => C.value * 4), w = Le(null), L = Le(null);
rt(() => {
be(), document.getElementById(`relation_circle_${S.value}`).addEventListener("click", we);
});
const pe = h(() => l.value.debug);
function be() {
if (Se(m.dataset) ? (Ie({
componentName: "VueUiRelationCircle",
type: "dataset",
debug: pe.value
}), V.value = !0) : m.dataset.forEach((e, s) => {
kt({
datasetObject: e,
requiredAttributes: ["id", "label", "relations", "weights"]
}).forEach((t) => {
Ie({
componentName: "VueUiRelationCircle",
type: "datasetSerieAttribute",
property: t,
index: s,
debug: pe.value
});
});
}), Se(m.dataset) || (V.value = l.value.loading), l.value.responsive) {
const e = xt(() => {
const { width: s, height: t } = $t({
chart: A.value,
title: l.value.style.title.text ? ne.value : null,
source: ue.value,
noTitle: oe.value
});
requestAnimationFrame(() => {
_.value = Math.min(s, t), o.value.width = Math.max(0.1, s), o.value.height = Math.max(0.1, t - 12), C.value = _.value * l.value.style.circle.radiusProportion, k.value = [], p.value = [], Y(), q(), ke(), l.value.responsiveProportionalSizing ? (y.value = ae({
relator: _.value,
adjuster: l.value.style.size,
source: l.value.style.weightLabels.size,
threshold: 6,
fallback: 6
}), F.value = ae({
relator: _.value,
adjuster: l.value.style.size,
source: l.value.style.plot.radius,
threshold: 1,
fallback: 1
}), I.value = ae({
relator: _.value,
adjuster: l.value.style.size,
source: l.value.style.labels.fontSize,
threshold: 6,
fallback: 6
})) : (y.value = l.value.style.weightLabels.size, F.value = l.value.style.plot.radius, I.value = l.value.style.labels.fontSize);
});
});
w.value && (L.value && w.value.unobserve(L.value), w.value.disconnect()), w.value = new ResizeObserver(e), L.value = A.value.parentNode, w.value.observe(L.value);
} else
k.value = [], p.value = [], Y(), q();
ke();
}
ct(() => {
document.getElementById(`relation_circle_${S.value}`).removeEventListener("click", we), w.value && (L.value && w.value.unobserve(L.value), w.value.disconnect());
});
const { autoSizeLabels: ke } = zt({
svgRef: W,
fontSize: l.value.style.labels.fontSize,
minFontSize: l.value.style.labels.minFontSize,
sizeRef: I,
labelClass: ".vue-ui-relation-circle-legend"
});
function we(e) {
const s = e.target;
s && Array.from(s.classList).includes("vue-ui-user-options") || s && Array.from(s.classList).includes("vue-ui-user-options-summary") || s && Array.from(s.classList).includes("vue-data-ui-button") || s && Array.from(s.classList).includes("vue-ui-relation-circle-legend") || (d.value = {}, b.value = []);
}
function Y() {
const e = 6.28319 / E.value.length, s = 360 / E.value.length;
let t = 0, a = 0;
E.value.forEach((c, v) => {
const K = c.weights.reduce((it, nt) => it + nt, 0), Q = C.value * Math.cos(t) + o.value.width / 2, at = C.value * Math.sin(t) + o.value.height / 2 + l.value.style.circle.offsetY;
k.value.push({ x: Q, y: at, ...c, color: c.color ? c.color : me.value[v] ? me.value[v] : Oe[v], regAngle: a, totalWeight: K }), t += e, a += s;
});
}
function He(e, s) {
const t = (e.x + s.x) / 2, a = (e.y + s.y) / 2;
return { x: t, y: a };
}
function q() {
p.value = [], k.value.forEach((e) => {
k.value.filter((t) => t.relations.includes(e.id)).forEach((t, a) => {
const c = t.relations.indexOf(e.id);
p.value.push({
weight: t.weights[c] ? t.weights[c] : 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: He({ x: e.x, y: e.y }, { x: t.x, y: t.y }),
midPointBezier: Je({
x1: e.x,
x2: t.x,
y1: e.y,
y2: t.y
}),
...e
});
});
});
}
function Je(e) {
const s = { x: e.x1, y: e.y1 }, t = { x: e.x2, y: e.y2 }, a = { x: e.x1, y: e.y1 }, c = {
x: o.value.width / 2,
y: o.value.height / 2 + l.value.style.circle.offsetY
}, v = 0.5, K = Math.pow(1 - v, 3) * s.x + 3 * Math.pow(1 - v, 2) * v * a.x + 3 * (1 - v) * Math.pow(v, 2) * c.x + Math.pow(v, 3) * t.x, Q = Math.pow(1 - v, 3) * s.y + 3 * Math.pow(1 - v, 2) * v * a.y + 3 * (1 - v) * Math.pow(v, 2) * c.y + Math.pow(v, 3) * t.y;
return { x: K, y: Q };
}
const Ke = h(() => Math.max(...p.value.map((e) => e.weight)));
function Qe(e) {
return Object.hasOwn(d.value, "x") ? b.value.includes(e.id) ? "opacity:1" : "opacity:0.1" : "opacity:1";
}
function x(e) {
return e.colorSource;
}
function xe(e) {
return Object.hasOwn(d.value, "x") ? b.value.includes(e.id) && e.relationId === `${e.id}_${d.value.id}` || e.relationId === `${d.value.id}_${e.id}` ? `opacity:1;stroke-width:${H(e)}` : "opacity: 0" : "opacity: 1";
}
function P(e) {
return Object.hasOwn(d.value, "x") ? !!(b.value.includes(e.id) && e.relationId === `${e.id}_${d.value.id}` || e.relationId === `${d.value.id}_${e.id}`) : !1;
}
function Ze(e) {
return e.regAngle > 90 && e.regAngle < 270 ? "end" : "start";
}
function et(e) {
return e.regAngle > 90 && e.regAngle < 270 ? e.x - 5 : e.x + 5;
}
function tt(e) {
return Object.hasOwn(d.value, "x") ? d.value.id === e.id || b.value.includes(e.id) ? "opacity:1" : "opacity:0.2" : "opacity:1";
}
function lt(e) {
return e.regAngle > 90 && e.regAngle < 270 ? `rotate(${e.regAngle + 180},${e.x},${e.y})` : `rotate(${e.regAngle},${e.x},${e.y})`;
}
const B = r(null);
function $e(e, s) {
B.value = s, l.value.events.datapointEnter && l.value.events.datapointEnter({ datapoint: e, seriesIndex: s });
}
function Ae(e, s) {
B.value = null, l.value.events.datapointLeave && l.value.events.datapointLeave({ datapoint: e, seriesIndex: s });
}
function _e(e, s) {
l.value.events.datapointClick && l.value.events.datapointClick({ datapoint: e, seriesIndex: s }), Ge.value = 360 - e.regAngle, d.value.id && e.id === d.value.id ? (d.value = {}, b.value = []) : (d.value = e, b.value = [...e.relations]);
}
function H(e) {
const s = e.weight / Ke.value * l.value.style.links.maxWidth;
return Math.max(0.3, s);
}
const R = r(!1);
function Ce(e) {
R.value = e, ie.value += 1;
}
const T = r(!1);
function J() {
T.value = !T.value;
}
async function st({ scale: e = 2 } = {}) {
if (!A.value) return;
const { width: s, height: t } = A.value.getBoundingClientRect(), a = s / t, { imageUri: c, base64: v } = await Ot({ domElement: A.value, base64: !0, img: !0, scale: e });
return {
imageUri: c,
base64: v,
title: l.value.style.title.text,
width: s,
height: t,
aspectRatio: a
};
}
return Be({
getImage: st,
generatePdf: he,
generateImage: ge,
toggleAnnotator: J,
toggleFullscreen: Ce
}), (e, s) => (i(), n("div", {
ref_key: "relationCircleChart",
ref: A,
class: "vue-ui-relation-circle",
style: z(`width:100%;background:${l.value.style.backgroundColor};text-align:center;${l.value.responsive ? "height: 100%" : ""}`),
id: `relation_circle_${S.value}`,
onMouseenter: s[0] || (s[0] = () => u(ve)(!0)),
onMouseleave: s[1] || (s[1] = () => u(ve)(!1))
}, [
l.value.userOptions.buttons.annotator ? (i(), N(u(Re), {
key: 0,
svgRef: u(W),
backgroundColor: l.value.style.backgroundColor,
color: l.value.style.color,
active: T.value,
onClose: J
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
Ve.value ? (i(), n("div", {
key: 1,
ref_key: "noTitle",
ref: oe,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : f("", !0),
l.value.style.title.text ? (i(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: ne,
style: "width:100%;background:transparent"
}, [
(i(), N(St, {
key: `title_${re.value}`,
config: {
title: {
cy: "relation-div-title",
...l.value.style.title
},
subtitle: {
cy: "relation-div-subtitle",
...l.value.style.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : f("", !0),
l.value.userOptions.show && De.value && (u(de) || u(G)) ? (i(), N(u(Te), {
ref: "details",
key: `user_options_${ie.value}`,
backgroundColor: l.value.style.backgroundColor,
color: l.value.style.color,
isPrinting: u(fe),
isImaging: u(ye),
uid: S.value,
hasPdf: l.value.userOptions.buttons.pdf,
hasImg: l.value.userOptions.buttons.img,
hasFullscreen: l.value.userOptions.buttons.img,
hasXls: !1,
isFullscreen: R.value,
titles: { ...l.value.userOptions.buttonTitles },
chartElement: A.value,
position: l.value.userOptions.position,
hasAnnotator: l.value.userOptions.buttons.annotator,
isAnnotation: T.value,
callbacks: l.value.userOptions.callbacks,
printScale: l.value.userOptions.print.scale,
onToggleFullscreen: Ce,
onGeneratePdf: u(he),
onGenerateImage: u(ge),
onToggleAnnotator: J,
style: z({
visibility: u(de) ? u(G) ? "visible" : "hidden" : "visible"
})
}, vt({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: M(({ isOpen: t, color: a }) => [
g(e.$slots, "menuIcon", j(D({ isOpen: t, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: M(() => [
g(e.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: M(() => [
g(e.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: M(({ toggleFullscreen: t, isFullscreen: a }) => [
g(e.$slots, "optionFullscreen", j(D({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
]),
key: "3"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: M(({ toggleAnnotator: t, isAnnotator: a }) => [
g(e.$slots, "optionAnnotator", j(D({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
]),
key: "4"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
(i(), n("svg", {
ref_key: "svgRef",
ref: W,
xmlns: u(wt),
class: te([{ "vue-data-ui-fullscreen--on": R.value, "vue-data-ui-fulscreen--off": !R.value }, "relation-circle"]),
viewBox: `0 0 ${o.value.width <= 0 ? 10 : o.value.width} ${o.value.height <= 0 ? 10 : o.value.height}`,
width: "100%",
style: "user-select:none; background:transparent"
}, [
dt(u(Ne)),
e.$slots["chart-background"] ? (i(), n("foreignObject", {
key: 0,
x: 0,
y: 0,
width: o.value.width <= 0 ? 10 : o.value.width,
height: o.value.height <= 0 ? 10 : o.value.height,
style: {
pointerEvents: "none"
}
}, [
g(e.$slots, "chart-background", {}, void 0, !0)
], 8, Ft)) : f("", !0),
ft("circle", {
cx: (o.value.width <= 0 ? 1e-4 : o.value.width) / 2,
cy: (o.value.height <= 0 ? 1e-4 : o.value.height) / 2 + l.value.style.circle.offsetY,
r: C.value <= 0 ? 1e-4 : C.value,
stroke: l.value.style.circle.stroke,
"stroke-width": l.value.style.circle.strokeWidth,
fill: "transparent",
class: "main-circle"
}, null, 8, Bt),
We.value ? (i(), n("g", Rt, [
(i(!0), n($, null, O(p.value, (t, a) => (i(), n("path", {
key: `relation_${a}`,
style: z(xe(t)),
stroke: x(t),
class: te(["relation", { "vue-ui-relation-circle-selected": d.value.hasOwnProperty("id") && b.value.includes(t.id) }]),
d: `M${t.x1},${t.y1} C${t.x1},${t.y1} ${o.value.width / 2},${o.value.height / 2 + l.value.style.circle.offsetY} ${t.x2},${t.y2}`,
fill: "none",
"stroke-width": H(t),
"stroke-linecap": "round"
}, null, 14, Tt))), 128)),
(i(!0), n($, null, O(p.value, (t, a) => (i(), n("g", Nt, [
P(t) ? g(e.$slots, "dataLabel", Pe({
key: 0,
ref_for: !0
}, {
x: t.midPointBezier.x,
y: t.midPointBezier.y,
color: x(t),
weight: t.weight,
fontSize: y.value
}), void 0, !0) : f("", !0),
P(t) && !e.$slots.dataLabel ? (i(), n("circle", {
key: 1,
cx: t.midPointBezier.x,
cy: t.midPointBezier.y,
fill: x(t),
r: y.value,
stroke: l.value.style.backgroundColor,
"stroke-width": "1"
}, null, 8, jt)) : f("", !0),
P(t) && !e.$slots.dataLabel ? (i(), n("text", {
key: 2,
x: t.midPointBezier.x,
y: t.midPointBezier.y + y.value / 3,
fill: u(Me)(x(t)),
"text-anchor": "middle",
"font-size": y.value
}, U(u(le)(
l.value.style.weightLabels.formatter,
t.weight,
u(se)({
p: l.value.style.weightLabels.prefix,
v: t.weight,
s: l.value.style.weightLabels.suffix,
r: l.value.style.weightLabels.rounding
}),
{ ...t }
)), 9, Dt)) : f("", !0)
]))), 256))
])) : (i(), n("g", Ut, [
(i(!0), n($, null, O(p.value, (t, a) => (i(), n("line", {
key: `relation_${a}`,
stroke: x(t),
"stroke-width": H(t),
style: z(xe(t)),
x1: t.x1,
x2: t.x2,
y1: t.y1,
y2: t.y2,
class: te({ "vue-ui-relation-circle-selected": d.value.hasOwnProperty("id") && b.value.includes(t.id) }),
"stroke-linecap": "round"
}, null, 14, Vt))), 128)),
(i(!0), n($, null, O(p.value, (t, a) => (i(), n("g", Gt, [
P(t) ? g(e.$slots, "dataLabel", Pe({
key: 0,
ref_for: !0
}, {
x: t.midPointLine.x,
y: t.midPointLine.y,
color: x(t),
weight: t.weight,
fontSize: y.value
}), void 0, !0) : f("", !0),
P(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (i(), n("circle", {
key: 1,
cx: t.midPointLine.x,
cy: t.midPointLine.y,
fill: x(t),
r: y.value,
stroke: l.value.style.backgroundColor,
"stroke-width": "1"
}, null, 8, Wt)) : f("", !0),
P(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (i(), n("text", {
key: 2,
x: t.midPointLine.x,
y: t.midPointLine.y + y.value / 3,
fill: u(Me)(x(t)),
"text-anchor": "middle",
"font-size": y.value
}, U(u(le)(
l.value.style.weightLabels.formatter,
t.weight,
u(se)({
p: l.value.style.weightLabels.prefix,
v: t.weight,
s: l.value.style.weightLabels.suffix,
r: l.value.style.weightLabels.rounding
}),
{ ...t }
)), 9, Xt)) : f("", !0)
]))), 256))
])),
(i(!0), n($, null, O(k.value, (t, a) => (i(), n("text", {
key: `plot_text_${a}`,
"text-anchor": Ze(t),
transform: lt(t),
x: et(t),
y: t.y + 5,
class: "vue-ui-relation-circle-legend",
"transform-origin": "start",
"font-weight": d.value.id === t.id ? "900" : "400",
style: z(`font-family:${l.value.style.fontFamily};${tt(t)}`),
"font-size": I.value,
fill: l.value.style.labels.color,
"text-decoration": a === B.value ? "underline" : void 0,
onClick: (c) => _e(t, a),
onMouseenter: (c) => $e(t, a),
onMouseleave: (c) => Ae(t, a)
}, [
u(ce) ? (i(), n($, { key: 0 }, [
ze(" -------- ")
], 64)) : (i(), n($, { key: 1 }, [
ze(U(t.label) + " (" + U(u(le)(
l.value.style.weightLabels.formatter,
t.totalWeight,
u(se)({
p: l.value.style.weightLabels.prefix,
v: t.totalWeight,
s: l.value.style.weightLabels.suffix,
r: l.value.style.weightLabels.rounding
}),
{ ...t }
)) + ") ", 1)
], 64))
], 44, Yt))), 128)),
(i(!0), n($, null, O(k.value, (t, a) => (i(), n("circle", {
cx: t.x,
cy: t.y,
key: `plot_${a}`,
style: z(`${Qe(t)}; transition: r 0.2s ease-in-out;`),
class: "vue-ui-relation-circle-plot",
fill: l.value.style.plot.useSerieColor ? t.color : l.value.style.plot.color,
stroke: l.value.style.backgroundColor,
"stroke-width": "1",
r: F.value * (a === B.value ? 2 : 1),
onClick: (c) => _e(t, a),
onMouseenter: (c) => $e(t, a),
onMouseleave: (c) => Ae(t, a)
}, null, 44, qt))), 128)),
g(e.$slots, "svg", { svg: o.value }, void 0, !0)
], 10, Et)),
e.$slots.watermark ? (i(), n("div", Ht, [
g(e.$slots, "watermark", j(D({ isPrinting: u(fe) || u(ye) })), void 0, !0)
])) : f("", !0),
e.$slots.source ? (i(), n("div", {
key: 5,
ref_key: "source",
ref: ue,
dir: "auto"
}, [
g(e.$slots, "source", {}, void 0, !0)
], 512)) : f("", !0),
u(ce) ? (i(), N(_t, { key: 6 })) : f("", !0)
], 44, Mt));
}
}, rl = /* @__PURE__ */ It(Jt, [["__scopeId", "data-v-72b30f4c"]]);
export {
rl as default
};