vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
65 lines (64 loc) • 2.36 kB
JavaScript
import { toRef as k, resolveComponent as d, createElementBlock as o, openBlock as e, Fragment as r, renderList as c, createCommentVNode as s, createElementVNode as y, createBlock as h } from "vue";
const g = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], x = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], C = {
__name: "RecursiveLinks",
props: {
dataset: {
type: Array,
default: () => []
},
color: {
type: String,
default: "#DDDDDD"
},
backgroundColor: {
type: String,
default: "#FFFFFF"
}
},
setup(n) {
return k(n, "dataset").value.forEach((a) => {
a.nodes && a.nodes.length > 0 && a.nodes.forEach((u) => {
u.ancestor = a;
});
}), (a, u) => {
const i = d("RecursiveLinks", !0);
return e(), o(r, null, [
(e(!0), o(r, null, c(n.dataset, (t) => (e(), o(r, null, [
t.polygonPath && t.polygonPath.coordinates ? (e(!0), o(r, { key: 0 }, c(t.polygonPath.coordinates, (l, f) => (e(), o(r, null, [
t.ancestor && t.ancestor.polygonPath ? (e(), o(r, { key: 0 }, [
y("line", {
x1: l.x,
y1: l.y,
x2: t.ancestor.polygonPath.coordinates[0].x,
y2: t.ancestor.polygonPath.coordinates[0].y,
stroke: n.backgroundColor,
"stroke-width": t.circleRadius / 1.5
}, null, 8, g),
y("line", {
x1: l.x,
y1: l.y,
x2: t.ancestor.polygonPath.coordinates[0].x,
y2: t.ancestor.polygonPath.coordinates[0].y,
stroke: n.color,
"stroke-width": t.circleRadius / 2
}, null, 8, x)
], 64)) : s("", !0)
], 64))), 256)) : s("", !0)
], 64))), 256)),
(e(!0), o(r, null, c(n.dataset, (t) => (e(), o(r, null, [
t.polygonPath && t.polygonPath.coordinates ? (e(), o(r, { key: 0 }, [
t.nodes && t.nodes.length > 0 ? (e(), h(i, {
key: 0,
dataset: t.nodes,
color: n.color,
backgroundColor: n.backgroundColor
}, null, 8, ["dataset", "color", "backgroundColor"])) : s("", !0)
], 64)) : s("", !0)
], 64))), 256))
], 64);
};
}
};
export {
C as default
};