35 lines
732 B
TypeScript
35 lines
732 B
TypeScript
|
import { Ref, useEffect, useRef } from 'preact/hooks'
|
||
|
|
import * as vis from 'vis-network'
|
||
|
|
import { DbEntry } from '../datas.ts'
|
||
|
|
|
||
|
|
export function DbGraph({ db }: { db: DbEntry[] }) {
|
||
|
|
const graph = useRef<HTMLDivElement>(null)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
drawDb({ db, graph })
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return <div class='graph' ref={graph}></div>
|
||
|
|
}
|
||
|
|
|
||
|
|
function drawDb({ db, graph }: { db: DbEntry[]; graph: Ref<HTMLDivElement> }) {
|
||
|
|
const nodes = db.map(({ id, title, links }) => ({
|
||
|
|
id,
|
||
|
|
label: title,
|
||
|
|
value: links.length,
|
||
|
|
}))
|
||
|
|
|
||
|
|
const edges = db.map(({ id, links }) =>
|
||
|
|
links.map((link) => ({ from: id, to: link, value: id + link }))
|
||
|
|
).flat()
|
||
|
|
|
||
|
|
return new vis.Network(graph.current!, {
|
||
|
|
nodes,
|
||
|
|
edges,
|
||
|
|
}, {
|
||
|
|
nodes: {
|
||
|
|
shape: 'dot',
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}
|