Customizable threshold for summarized edges
Krakoer opened this issue · comments
Hi,
First, congrats for this great lib, very user-friendly and well-developed.
Are you planning on making the threshold at which edges start to get summarized customizable? I think it would be a useful quick win.
Thanks again
Hi @Krakoer,
Thank you for using v-network-graph!
The following ways can be used to adjust the threshold for summarizing edges.
The callback of configs.edge.summarize
is executed when two or more edges exist between nodes. Edges are summarized if the return value is true
.
<script setup lang="ts">
import { defineConfigs, Edges } from "v-network-graph";
import data from "./data";
const configs = defineConfigs({
edge: {
summarize: (edges: Edges) => {
console.log(edges);
return Object.keys(edges).length > 4
}
}
});
</script>
<template>
<v-network-graph
:nodes="data.nodes"
:edges="data.edges"
:layouts="data.layouts"
:configs="configs"
/>
</template>
// data.ts
import { Nodes, Edges, Layouts } from "v-network-graph"
const nodes: Nodes = {
node1: { name: "N1" },
node2: { name: "N2" },
node3: { name: "N3" },
}
const edges: Edges = {
edge1: { source: "node1", target: "node2" },
edge2: { source: "node1", target: "node2" },
edge3: { source: "node1", target: "node2" },
edge4: { source: "node1", target: "node2" },
edge5: { source: "node1", target: "node2" },
edge6: { source: "node2", target: "node3" },
edge7: { source: "node2", target: "node3" },
edge8: { source: "node3", target: "node1" },
}
const layouts: Layouts = {
nodes: {
node1: { x: 50, y: 0 },
node2: { x: 0, y: 75 },
node3: { x: 100, y: 75 },
},
}
export default {
nodes,
edges,
layouts,
}
Best Regards
Thank you for the really quick answer! I'll keep the callback trick in mind for further customization.