91 lines
2 KiB
JavaScript
91 lines
2 KiB
JavaScript
// import cola from 'cytoscape-cola';
|
|
|
|
async function getData() {
|
|
try {
|
|
const resp = await fetch("/api/data");
|
|
if (!resp.ok) {
|
|
throw new Error(`Response status: ${resp.status}`);
|
|
}
|
|
|
|
const json = await resp.json();
|
|
return json;
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
function setupGraph() {
|
|
|
|
getData()
|
|
.catch(function (err) { console.error(err) })
|
|
.then(function (elements) {
|
|
|
|
var cy = window.cy = cytoscape({
|
|
container: document.getElementById('map-container'),
|
|
elements: elements,
|
|
|
|
style: [ // the stylesheet for the graph
|
|
{
|
|
selector: 'node',
|
|
style: {
|
|
'background-color': '#E1F5FE',
|
|
'border-color': '#03A9F4',
|
|
'border-width': 0.5,
|
|
'label': 'data(label)'
|
|
}
|
|
},
|
|
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'width': 1,
|
|
'line-color': '#42A5F5',
|
|
'target-arrow-color': '#1E88E5',
|
|
'target-arrow-shape': 'none',
|
|
'curve-style': 'bezier'
|
|
}
|
|
},
|
|
{
|
|
selector: ".link-virtual",
|
|
style: {
|
|
"line-color": "#BDBDBD",
|
|
"line-style": "dashed",
|
|
},
|
|
},
|
|
{
|
|
selector: ".link-fast",
|
|
style: {
|
|
"width": 1.5,
|
|
"line-color": "#1565C0",
|
|
},
|
|
},
|
|
{
|
|
selector: ".link-slow",
|
|
style: {
|
|
"line-color": "#FFC107",
|
|
},
|
|
},
|
|
{
|
|
selector: ".unmonitored",
|
|
style: {
|
|
"background-color": "#E57373",
|
|
"border-color": "#C62828"
|
|
}
|
|
}
|
|
],
|
|
|
|
layout: {
|
|
name: 'cose',
|
|
nodeDimensionsIncludeLabels: true,
|
|
}
|
|
// layout: {
|
|
// name: "cola",
|
|
// nodeDimensionsIncludeLabels: true,
|
|
// }
|
|
|
|
});
|
|
});
|
|
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', setupGraph);
|