vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
672 lines (671 loc) • 29.4 kB
JavaScript
import { useCssVars as wt, computed as y, defineAsyncComponent as Z, ref as u, toRefs as Ct, watch as ee, shallowRef as ze, onMounted as At, onBeforeUnmount as xt, createElementBlock as n, openBlock as a, unref as i, normalizeStyle as I, createBlock as U, createCommentVNode as g, withCtx as h, renderSlot as v, normalizeProps as w, guardReactiveProps as C, createSlots as $t, normalizeClass as te, createVNode as _t, createElementVNode as Lt, Fragment as _, renderList as M, mergeProps as Oe, toDisplayString as V, createTextVNode as Se } from "vue";
import { c as Pt, t as zt, i as Ot, j as Ie, k as St, o as Me, g as Be, l as It, X as Mt, x as Ee, a as le, d as se, a2 as oe } from "./lib-2iaAPQ_c.js";
import { t as Bt, u as Et } from "./useResponsive-DfdjqQps.js";
import { u as Ft, a as ae } from "./useNestedProp-2p4Tjzc8.js";
import { u as Tt, B as Dt } from "./BaseScanner-BMpwQAfz.js";
import { u as Rt } from "./usePrinter-ChVMpU2f.js";
import { u as jt } from "./useSvgExport-ByUukOZt.js";
import { u as Nt } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Ut } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Vt } from "./useChartAccessibility-9icAAmYg.js";
import { u as Gt } from "./useAutoSizeLabelsInsideViewbox-DmpzKQ9i.js";
import Wt from "./img-CqYIrJ8I.js";
import Xt from "./Title-DSOZzIrU.js";
import { _ as Yt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Fe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", labels: { color: "#CCCCCC" }, circle: { stroke: "#5A5A5A" }, plot: { color: "#1A1A1A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } }, Te = { style: { backgroundColor: "#FFF8E1", color: "#424242", labels: { color: "#424242" }, circle: { stroke: "#5D403780" }, plot: { color: "#5D4037" }, title: { color: "#424242", subtitle: { color: "#757575" } } } }, De = { style: { backgroundColor: "#1E1E1E", color: "#BDBDBD", labels: { color: "#BDBDBD" }, circle: { stroke: "#5D403780" }, plot: { color: "#5D4037" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } }, Re = { style: { backgroundColor: "#1A1A1A", color: "#99AA99", labels: { color: "#AACCAA" }, circle: { stroke: "#333333" }, plot: { color: "#66CC66" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } }, je = { style: { backgroundColor: "#fbfafa", color: "#8A9892", labels: { color: "#A0AC94" }, circle: { stroke: "transparent" }, plot: { color: "#C09E85" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } }, Ne = { style: { backgroundColor: "#f6f6fb", color: "#50606C", labels: { color: "#61747E" }, circle: { stroke: "#D2D7E0" }, plot: { color: "#97ACB7" }, title: { color: "#50606C", subtitle: { color: "#718890" } } } }, Ue = {
default: {},
dark: Fe,
celebration: Te,
celebrationNight: De,
hack: Re,
zen: je,
concrete: Ne
}, Ll = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Te,
celebrationNight: De,
concrete: Ne,
dark: Fe,
default: Ue,
hack: Re,
zen: je
}, Symbol.toStringTag, { value: "Module" })), qt = ["id"], Ht = ["xmlns", "viewBox"], Jt = ["width", "height"], Kt = ["cx", "cy", "r", "stroke", "stroke-width"], Qt = { key: 1 }, Zt = ["stroke", "d", "stroke-width"], el = { style: { "pointer-events": "none" } }, tl = ["cx", "cy", "fill", "r", "stroke"], ll = ["x", "y", "fill", "font-size"], sl = { key: 2 }, ol = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], al = { style: { "pointer-events": "none" } }, nl = ["cx", "cy", "fill", "r", "stroke"], il = ["x", "y", "fill", "font-size"], rl = ["text-anchor", "transform", "x", "y", "font-weight", "font-size", "fill", "text-decoration", "onClick", "onMouseenter", "onMouseleave"], ul = ["cx", "cy", "fill", "stroke", "r", "onClick", "onMouseenter", "onMouseleave"], cl = {
key: 4,
class: "vue-data-ui-watermark"
}, dl = {
__name: "vue-ui-relation-circle",
props: {
dataset: {
type: Array,
default() {
return [];
}
},
config: {
type: Object,
default() {
return {};
}
}
},
setup(Ve, { expose: Ge }) {
wt((e) => ({
v0ccf0e06: st.value,
v0ab0445c: lt.value,
v08643f3e: ot.value
}));
const We = Z(() => import("./PenAndPaper-CvyKWfNl.js")), Xe = Z(() => import("./UserOptions-BQO4YFrn.js")), Ye = Z(() => import("./PackageVersion-Br3DrrFh.js")), { vue_ui_relation_circle: qe } = Ft(), { isThemeValid: He, warnInvalidTheme: Je } = Nt(), m = Ve, Ke = y(() => !!m.dataset && Object.keys(m.dataset).length), B = u(Pt()), ne = u(0), L = u(null), ie = u(null), re = u(null), ue = u(null), ce = u(0), l = u(X()), { loading: de, FINAL_DATASET: Qe, manualLoading: G } = Tt({
...Ct(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: zt({
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: W, setUserOptionsVisibility: ve, keepUserOptionState: fe } = Ut({ config: l.value }), { svgRef: F } = Vt({ config: l.value.style.title });
function X() {
const e = ae({
userConfig: m.config,
defaultConfig: qe
}), s = e.theme;
if (!s) return e;
if (!He.value(e))
return Je(e), e;
const t = ae({
userConfig: Ue[s] || m.config,
defaultConfig: e
}), o = ae({
userConfig: m.config,
defaultConfig: t
});
return {
...o,
customPalette: o.customPalette.length ? o.customPalette : Ot[s] || Ie
};
}
ee(() => m.config, (e) => {
l.value = X(), W.value = !l.value.userOptions.showOnChartHover, P.value = l.value.style.size, b.value = l.value.style.weightLabels.size, D.value = l.value.style.plot.radius, E.value = l.value.style.labels.fontSize, r.value.height = l.value.style.size, r.value.width = l.value.style.size, ke(), ce.value += 1;
}, { deep: !0 }), ee(() => m.dataset, (e) => {
Array.isArray(e) && e.length > 0 && (G.value = !1);
}, { deep: !0 });
const { isPrinting: ge, isImaging: ye, generatePdf: he, generateImage: me } = Rt({
elementId: `relation_circle_${B.value}`,
fileName: l.value.style.title.text || "vue-ui-relation-circle",
options: l.value.userOptions.print
}), Ze = y(() => l.value.userOptions.show && !l.value.style.title.text), be = y(() => St(l.value.customPalette)), A = u([]), p = u([]), f = u({}), k = u([]), et = u(0), T = y(() => Qe.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(T, () => {
A.value = [], p.value = [], Y(), q();
});
const P = u(l.value.style.size), b = u(l.value.style.weightLabels.size), D = u(l.value.style.plot.radius), E = u(l.value.style.labels.fontSize), r = u({
height: l.value.style.size,
width: l.value.style.size
}), z = y({
get() {
return P.value * l.value.style.circle.radiusProportion;
},
set(e) {
return e;
}
}), tt = y(() => l.value.style.links.curved), lt = y(() => `${l.value.style.animation.speedMs}ms`), st = y(() => z.value * 2), ot = y(() => z.value * 4), x = ze(null), O = ze(null);
At(() => {
ke(), document.getElementById(`relation_circle_${B.value}`).addEventListener("click", Ce);
});
const pe = y(() => l.value.debug);
function ke() {
if (Me(m.dataset) ? (Be({
componentName: "VueUiRelationCircle",
type: "dataset",
debug: pe.value
}), G.value = !0) : m.dataset.forEach((e, s) => {
It({
datasetObject: e,
requiredAttributes: ["id", "label", "relations", "weights"]
}).forEach((t) => {
Be({
componentName: "VueUiRelationCircle",
type: "datasetSerieAttribute",
property: t,
index: s,
debug: pe.value
});
});
}), Me(m.dataset) || (G.value = l.value.loading), l.value.responsive) {
const e = Bt(() => {
const { width: s, height: t } = Et({
chart: L.value,
title: l.value.style.title.text ? ie.value : null,
source: re.value,
noTitle: ue.value
});
requestAnimationFrame(() => {
P.value = Math.min(s, t), r.value.width = Math.max(0.1, s), r.value.height = Math.max(0.1, t - 12), z.value = P.value * l.value.style.circle.radiusProportion, A.value = [], p.value = [], Y(), q(), we(), l.value.responsiveProportionalSizing ? (b.value = oe({
relator: P.value,
adjuster: l.value.style.size,
source: l.value.style.weightLabels.size,
threshold: 6,
fallback: 6
}), D.value = oe({
relator: P.value,
adjuster: l.value.style.size,
source: l.value.style.plot.radius,
threshold: 1,
fallback: 1
}), E.value = oe({
relator: P.value,
adjuster: l.value.style.size,
source: l.value.style.labels.fontSize,
threshold: 6,
fallback: 6
})) : (b.value = l.value.style.weightLabels.size, D.value = l.value.style.plot.radius, E.value = l.value.style.labels.fontSize);
});
});
x.value && (O.value && x.value.unobserve(O.value), x.value.disconnect()), x.value = new ResizeObserver(e), O.value = L.value.parentNode, x.value.observe(O.value);
} else
A.value = [], p.value = [], Y(), q();
we();
}
xt(() => {
document.getElementById(`relation_circle_${B.value}`).removeEventListener("click", Ce), x.value && (O.value && x.value.unobserve(O.value), x.value.disconnect());
});
const { autoSizeLabels: we } = Gt({
svgRef: F,
fontSize: l.value.style.labels.fontSize,
minFontSize: l.value.style.labels.minFontSize,
sizeRef: E,
labelClass: ".vue-ui-relation-circle-legend"
});
function Ce(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") || (f.value = {}, k.value = []);
}
function Y() {
const e = 6.28319 / T.value.length, s = 360 / T.value.length;
let t = 0, o = 0;
T.value.forEach((c, d) => {
const K = c.weights.reduce((pt, kt) => pt + kt, 0), Q = z.value * Math.cos(t) + r.value.width / 2, bt = z.value * Math.sin(t) + r.value.height / 2 + l.value.style.circle.offsetY;
A.value.push({ x: Q, y: bt, ...c, color: c.color ? c.color : be.value[d] ? be.value[d] : Ie[d], regAngle: o, totalWeight: K }), t += e, o += s;
});
}
function at(e, s) {
const t = (e.x + s.x) / 2, o = (e.y + s.y) / 2;
return { x: t, y: o };
}
function q() {
p.value = [], A.value.forEach((e) => {
A.value.filter((t) => t.relations.includes(e.id)).forEach((t, o) => {
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: at({ x: e.x, y: e.y }, { x: t.x, y: t.y }),
midPointBezier: nt({
x1: e.x,
x2: t.x,
y1: e.y,
y2: t.y
}),
...e
});
});
});
}
function nt(e) {
const s = { x: e.x1, y: e.y1 }, t = { x: e.x2, y: e.y2 }, o = { x: e.x1, y: e.y1 }, c = {
x: r.value.width / 2,
y: r.value.height / 2 + l.value.style.circle.offsetY
}, d = 0.5, K = Math.pow(1 - d, 3) * s.x + 3 * Math.pow(1 - d, 2) * d * o.x + 3 * (1 - d) * Math.pow(d, 2) * c.x + Math.pow(d, 3) * t.x, Q = Math.pow(1 - d, 3) * s.y + 3 * Math.pow(1 - d, 2) * d * o.y + 3 * (1 - d) * Math.pow(d, 2) * c.y + Math.pow(d, 3) * t.y;
return { x: K, y: Q };
}
const it = y(() => Math.max(...p.value.map((e) => e.weight)));
function rt(e) {
return Object.hasOwn(f.value, "x") ? k.value.includes(e.id) ? "opacity:1" : "opacity:0.1" : "opacity:1";
}
function $(e) {
return e.colorSource;
}
function Ae(e) {
return Object.hasOwn(f.value, "x") ? k.value.includes(e.id) && e.relationId === `${e.id}_${f.value.id}` || e.relationId === `${f.value.id}_${e.id}` ? `opacity:1;stroke-width:${H(e)}` : "opacity: 0" : "opacity: 1";
}
function S(e) {
return Object.hasOwn(f.value, "x") ? !!(k.value.includes(e.id) && e.relationId === `${e.id}_${f.value.id}` || e.relationId === `${f.value.id}_${e.id}`) : !1;
}
function ut(e) {
return e.regAngle > 90 && e.regAngle < 270 ? "end" : "start";
}
function ct(e) {
return e.regAngle > 90 && e.regAngle < 270 ? e.x - 5 : e.x + 5;
}
function dt(e) {
return Object.hasOwn(f.value, "x") ? f.value.id === e.id || k.value.includes(e.id) ? "opacity:1" : "opacity:0.2" : "opacity:1";
}
function vt(e) {
return e.regAngle > 90 && e.regAngle < 270 ? `rotate(${e.regAngle + 180},${e.x},${e.y})` : `rotate(${e.regAngle},${e.x},${e.y})`;
}
const R = u(null);
function xe(e, s) {
R.value = s, l.value.events.datapointEnter && l.value.events.datapointEnter({ datapoint: e, seriesIndex: s });
}
function $e(e, s) {
R.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 }), et.value = 360 - e.regAngle, f.value.id && e.id === f.value.id ? (f.value = {}, k.value = []) : (f.value = e, k.value = [...e.relations]);
}
function H(e) {
const s = e.weight / it.value * l.value.style.links.maxWidth;
return Math.max(0.3, s);
}
const j = u(!1);
function Le(e) {
j.value = e, ne.value += 1;
}
const N = u(!1);
function J() {
N.value = !N.value;
}
async function ft({ scale: e = 2 } = {}) {
if (!L.value) return;
const { width: s, height: t } = L.value.getBoundingClientRect(), o = s / t, { imageUri: c, base64: d } = await Wt({ domElement: L.value, base64: !0, img: !0, scale: e });
return {
imageUri: c,
base64: d,
title: l.value.style.title.text,
width: s,
height: t,
aspectRatio: o
};
}
const gt = y(() => l.value.style.backgroundColor), yt = y(() => l.value.style.title), { exportSvg: ht, getSvg: mt } = jt({
svg: F,
title: yt,
backgroundColor: gt
});
async function Pe({ isCb: e }) {
if (e) {
const { blob: s, url: t, text: o, dataUrl: c } = await mt();
l.value.userOptions.callbacks.svg({ blob: s, url: t, text: o, dataUrl: c });
} else
ht();
}
return Ge({
getImage: ft,
generatePdf: he,
generateSvg: Pe,
generateImage: me,
toggleAnnotator: J,
toggleFullscreen: Le
}), (e, s) => (a(), n("div", {
ref_key: "relationCircleChart",
ref: L,
class: "vue-data-ui-component vue-ui-relation-circle",
style: I(`width:100%;background:${l.value.style.backgroundColor};text-align:center;${l.value.responsive ? "height: 100%" : ""}`),
id: `relation_circle_${B.value}`,
onMouseenter: s[0] || (s[0] = () => i(ve)(!0)),
onMouseleave: s[1] || (s[1] = () => i(ve)(!1))
}, [
l.value.userOptions.buttons.annotator ? (a(), U(i(We), {
key: 0,
svgRef: i(F),
backgroundColor: l.value.style.backgroundColor,
color: l.value.style.color,
active: N.value,
onClose: J
}, {
"annotator-action-close": h(() => [
v(e.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": h(({ color: t }) => [
v(e.$slots, "annotator-action-color", w(C({ color: t })), void 0, !0)
]),
"annotator-action-draw": h(({ mode: t }) => [
v(e.$slots, "annotator-action-draw", w(C({ mode: t })), void 0, !0)
]),
"annotator-action-undo": h(({ disabled: t }) => [
v(e.$slots, "annotator-action-undo", w(C({ disabled: t })), void 0, !0)
]),
"annotator-action-redo": h(({ disabled: t }) => [
v(e.$slots, "annotator-action-redo", w(C({ disabled: t })), void 0, !0)
]),
"annotator-action-delete": h(({ disabled: t }) => [
v(e.$slots, "annotator-action-delete", w(C({ disabled: t })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
Ze.value ? (a(), n("div", {
key: 1,
ref_key: "noTitle",
ref: ue,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : g("", !0),
l.value.style.title.text ? (a(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: ie,
style: "width:100%;background:transparent"
}, [
(a(), U(Xt, {
key: `title_${ce.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)) : g("", !0),
l.value.userOptions.show && Ke.value && (i(fe) || i(W)) ? (a(), U(i(Xe), {
ref: "details",
key: `user_options_${ne.value}`,
backgroundColor: l.value.style.backgroundColor,
color: l.value.style.color,
isPrinting: i(ge),
isImaging: i(ye),
uid: B.value,
hasPdf: l.value.userOptions.buttons.pdf,
hasImg: l.value.userOptions.buttons.img,
hasSvg: l.value.userOptions.buttons.svg,
hasFullscreen: l.value.userOptions.buttons.img,
hasXls: !1,
isFullscreen: j.value,
titles: { ...l.value.userOptions.buttonTitles },
chartElement: L.value,
position: l.value.userOptions.position,
hasAnnotator: l.value.userOptions.buttons.annotator,
isAnnotation: N.value,
callbacks: l.value.userOptions.callbacks,
printScale: l.value.userOptions.print.scale,
onToggleFullscreen: Le,
onGeneratePdf: i(he),
onGenerateImage: i(me),
onGenerateSvg: Pe,
onToggleAnnotator: J,
style: I({
visibility: i(fe) ? i(W) ? "visible" : "hidden" : "visible"
})
}, $t({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: h(({ isOpen: t, color: o }) => [
v(e.$slots, "menuIcon", w(C({ isOpen: t, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: h(() => [
v(e.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: h(() => [
v(e.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: h(() => [
v(e.$slots, "optionSvg", {}, void 0, !0)
]),
key: "3"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: h(({ toggleFullscreen: t, isFullscreen: o }) => [
v(e.$slots, "optionFullscreen", w(C({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
]),
key: "4"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: h(({ toggleAnnotator: t, isAnnotator: o }) => [
v(e.$slots, "optionAnnotator", w(C({ toggleAnnotator: t, isAnnotator: o })), void 0, !0)
]),
key: "5"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
(a(), n("svg", {
ref_key: "svgRef",
ref: F,
xmlns: i(Mt),
class: te([{ "vue-data-ui-fullscreen--on": j.value, "vue-data-ui-fulscreen--off": !j.value }, "relation-circle"]),
viewBox: `0 0 ${r.value.width <= 0 ? 10 : r.value.width} ${r.value.height <= 0 ? 10 : r.value.height}`,
width: "100%",
style: "user-select:none; background:transparent"
}, [
_t(i(Ye)),
e.$slots["chart-background"] ? (a(), n("foreignObject", {
key: 0,
x: 0,
y: 0,
width: r.value.width <= 0 ? 10 : r.value.width,
height: r.value.height <= 0 ? 10 : r.value.height,
style: {
pointerEvents: "none"
}
}, [
v(e.$slots, "chart-background", {}, void 0, !0)
], 8, Jt)) : g("", !0),
Lt("circle", {
cx: (r.value.width <= 0 ? 1e-4 : r.value.width) / 2,
cy: (r.value.height <= 0 ? 1e-4 : r.value.height) / 2 + l.value.style.circle.offsetY,
r: z.value <= 0 ? 1e-4 : z.value,
stroke: l.value.style.circle.stroke,
"stroke-width": l.value.style.circle.strokeWidth,
fill: "transparent",
class: "main-circle"
}, null, 8, Kt),
tt.value ? (a(), n("g", Qt, [
(a(!0), n(_, null, M(p.value, (t, o) => (a(), n("path", {
key: `relation_${o}`,
style: I(Ae(t)),
stroke: $(t),
class: te(["relation", { "vue-ui-relation-circle-selected": f.value.hasOwnProperty("id") && k.value.includes(t.id) }]),
d: `M${t.x1},${t.y1} C${t.x1},${t.y1} ${r.value.width / 2},${r.value.height / 2 + l.value.style.circle.offsetY} ${t.x2},${t.y2}`,
fill: "none",
"stroke-width": H(t),
"stroke-linecap": "round"
}, null, 14, Zt))), 128)),
(a(!0), n(_, null, M(p.value, (t, o) => (a(), n("g", el, [
S(t) ? v(e.$slots, "dataLabel", Oe({
key: 0,
ref_for: !0
}, {
x: t.midPointBezier.x,
y: t.midPointBezier.y,
color: $(t),
weight: t.weight,
fontSize: b.value
}), void 0, !0) : g("", !0),
S(t) && !e.$slots.dataLabel ? (a(), n("circle", {
key: 1,
cx: t.midPointBezier.x,
cy: t.midPointBezier.y,
fill: $(t),
r: b.value,
stroke: l.value.style.backgroundColor,
"stroke-width": "1"
}, null, 8, tl)) : g("", !0),
S(t) && !e.$slots.dataLabel ? (a(), n("text", {
key: 2,
x: t.midPointBezier.x,
y: t.midPointBezier.y + b.value / 3,
fill: i(Ee)($(t)),
"text-anchor": "middle",
"font-size": b.value
}, V(i(le)(
l.value.style.weightLabels.formatter,
t.weight,
i(se)({
p: l.value.style.weightLabels.prefix,
v: t.weight,
s: l.value.style.weightLabels.suffix,
r: l.value.style.weightLabels.rounding
}),
{ ...t }
)), 9, ll)) : g("", !0)
]))), 256))
])) : (a(), n("g", sl, [
(a(!0), n(_, null, M(p.value, (t, o) => (a(), n("line", {
key: `relation_${o}`,
stroke: $(t),
"stroke-width": H(t),
style: I(Ae(t)),
x1: t.x1,
x2: t.x2,
y1: t.y1,
y2: t.y2,
class: te({ "vue-ui-relation-circle-selected": f.value.hasOwnProperty("id") && k.value.includes(t.id) }),
"stroke-linecap": "round"
}, null, 14, ol))), 128)),
(a(!0), n(_, null, M(p.value, (t, o) => (a(), n("g", al, [
S(t) ? v(e.$slots, "dataLabel", Oe({
key: 0,
ref_for: !0
}, {
x: t.midPointLine.x,
y: t.midPointLine.y,
color: $(t),
weight: t.weight,
fontSize: b.value
}), void 0, !0) : g("", !0),
S(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (a(), n("circle", {
key: 1,
cx: t.midPointLine.x,
cy: t.midPointLine.y,
fill: $(t),
r: b.value,
stroke: l.value.style.backgroundColor,
"stroke-width": "1"
}, null, 8, nl)) : g("", !0),
S(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (a(), n("text", {
key: 2,
x: t.midPointLine.x,
y: t.midPointLine.y + b.value / 3,
fill: i(Ee)($(t)),
"text-anchor": "middle",
"font-size": b.value
}, V(i(le)(
l.value.style.weightLabels.formatter,
t.weight,
i(se)({
p: l.value.style.weightLabels.prefix,
v: t.weight,
s: l.value.style.weightLabels.suffix,
r: l.value.style.weightLabels.rounding
}),
{ ...t }
)), 9, il)) : g("", !0)
]))), 256))
])),
(a(!0), n(_, null, M(A.value, (t, o) => (a(), n("text", {
key: `plot_text_${o}`,
"text-anchor": ut(t),
transform: vt(t),
x: ct(t),
y: t.y + 5,
class: "vue-ui-relation-circle-legend",
"transform-origin": "start",
"font-weight": f.value.id === t.id ? "900" : "400",
style: I(`font-family:${l.value.style.fontFamily};${dt(t)}`),
"font-size": E.value,
fill: l.value.style.labels.color,
"text-decoration": o === R.value ? "underline" : void 0,
onClick: (c) => _e(t, o),
onMouseenter: (c) => xe(t, o),
onMouseleave: (c) => $e(t, o)
}, [
i(de) ? (a(), n(_, { key: 0 }, [
Se(" -------- ")
], 64)) : (a(), n(_, { key: 1 }, [
Se(V(t.label) + " (" + V(i(le)(
l.value.style.weightLabels.formatter,
t.totalWeight,
i(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, rl))), 128)),
(a(!0), n(_, null, M(A.value, (t, o) => (a(), n("circle", {
cx: t.x,
cy: t.y,
key: `plot_${o}`,
style: I(`${rt(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: D.value * (o === R.value ? 2 : 1),
onClick: (c) => _e(t, o),
onMouseenter: (c) => xe(t, o),
onMouseleave: (c) => $e(t, o)
}, null, 44, ul))), 128)),
v(e.$slots, "svg", { svg: r.value }, void 0, !0)
], 10, Ht)),
e.$slots.watermark ? (a(), n("div", cl, [
v(e.$slots, "watermark", w(C({ isPrinting: i(ge) || i(ye) })), void 0, !0)
])) : g("", !0),
e.$slots.source ? (a(), n("div", {
key: 5,
ref_key: "source",
ref: re,
dir: "auto"
}, [
v(e.$slots, "source", {}, void 0, !0)
], 512)) : g("", !0),
i(de) ? (a(), U(Dt, { key: 6 })) : g("", !0)
], 44, qt));
}
}, vl = /* @__PURE__ */ Yt(dl, [["__scopeId", "data-v-f336b6ba"]]), Pl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: vl
}, Symbol.toStringTag, { value: "Module" }));
export {
Ll as a,
Pl as b,
vl as v
};