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