replace vega drawing by vis.js

This commit is contained in:
flynn 2019-06-09 15:53:36 +02:00
parent 1fc8b9ee5d
commit 655b9231d3
7 changed files with 98 additions and 18 deletions

View File

@ -375,10 +375,11 @@
{% style "/assets/font-awesome/css/all.css" %}
{% style "/css/screen.css" %}
{% script "/js/vendor/vega-4.4.0.js" %}
{% style "/css/vendor/vis.min.css" %}
{% script "js/vendor/vis.min.js" %}
{% script "/assets/font-awesome/js/all.js" %}
{% script "/js/home.js" %}
{% script "/assets/font-awesome/js/all.js" %}
<script type="text/javascript">
var csrfToken = "{{csrf-token}}";

View File

@ -25,4 +25,9 @@ body {
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
}
#view {
height: 600px;
max-height: 100%;
}

File diff suppressed because one or more lines are too long

View File

@ -1,13 +1,40 @@
var view;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var responseData = this.responseText;
console.log(responseData);
loadGraph(JSON.parse(responseData));
}
};
xhttp.open("GET", "relations_zeroed", true);
xhttp.send();
vega.loader()
.load('/js/spec.json')
.then(function(data) { render(JSON.parse(data)); });
function render(spec) {
view = new vega.View(vega.parse(spec))
.renderer('canvas') // set renderer (canvas or svg)
.initialize('#view') // initialize view within parent DOM container
.hover() // enable hover encode set processing
.run();
}
function loadGraph(request_data) {
var nodes = new vis.DataSet(
request_data["nodes"].map(node => {
return {
id: node.index,
label: node.name.slice(0,30) + (node.name.length > 30 ? "..." : ""),
color: 'hsl('+Math.floor(Math.random()*361)+',50%,75%)'
};
})
);
var edges = new vis.DataSet(
request_data["links"].map(link => {
return {
from: link.source,
to: link.target
};
})
);
var container = document.getElementById("view");
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
}

View File

@ -1,7 +1,7 @@
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
@ -26,4 +26,4 @@ document.addEventListener('DOMContentLoaded', () => {
function removeThis(ele) {
ele.parentNode.remove();
}
}

File diff suppressed because one or more lines are too long

47
resources/public/js/vendor/vis.min.js vendored Normal file

File diff suppressed because one or more lines are too long