vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
51 lines (50 loc) • 1.62 kB
JavaScript
import { toRef as y, resolveComponent as h, createElementBlock as l, openBlock as t, Fragment as n, renderList as c, createCommentVNode as i, createBlock as f, toDisplayString as p } from "vue";
const v = ["x", "y", "fill", "font-size"], _ = {
__name: "RecursiveLabels",
props: {
color: {
type: String,
default: "#000000"
},
dataset: {
type: Array,
default: () => []
},
hoveredUid: {
type: String,
default: null
}
},
emits: ["zoom", "hover"],
setup(o, { emit: g }) {
return y(o, "dataset").value.forEach((r) => {
r.nodes && r.nodes.length > 0 && r.nodes.forEach((a) => {
a.ancestor = r;
});
}), (r, a) => {
const u = h("RecursiveLabels", !0);
return t(!0), l(n, null, c(o.dataset, (e, d) => (t(), l(n, null, [
e.polygonPath && e.polygonPath.coordinates ? (t(), l(n, { key: 0 }, [
(t(!0), l(n, null, c(e.polygonPath.coordinates, (s, m) => (t(), l("text", {
key: `node_${d}_${m}`,
x: s.x,
y: s.y + e.circleRadius * 2,
fill: o.color,
"font-size": e.circleRadius,
"text-anchor": "middle",
style: { opacity: "0.8", "pointer-events": "none" }
}, p(e.name), 9, v))), 128)),
e.nodes && e.nodes.length > 0 ? (t(), f(u, {
key: 0,
dataset: e.nodes,
color: o.color,
hoveredUid: o.hoveredUid
}, null, 8, ["dataset", "color", "hoveredUid"])) : i("", !0)
], 64)) : i("", !0)
], 64))), 256);
};
}
};
export {
_ as default
};