client/vpn toggle
This commit is contained in:
parent
c7b33a4839
commit
a9b5cd6cfc
|
@ -20,18 +20,17 @@ var cp = d3.select("#chart").append("div")
|
||||||
|
|
||||||
var btns = cp.append("div")
|
var btns = cp.append("div")
|
||||||
.attr("class", "btn-group")
|
.attr("class", "btn-group")
|
||||||
.attr("data-toggle", "buttons-radio")
|
|
||||||
|
|
||||||
btns.append("button")
|
btns.append("button")
|
||||||
.attr("class", "btn active left")
|
.attr("class", "btn active left")
|
||||||
.attr("value", "all")
|
.attr("value", "clients")
|
||||||
.text("Alles")
|
.text("Clients")
|
||||||
.on("click", update_graph)
|
.on("click", update_graph)
|
||||||
|
|
||||||
btns.append("button")
|
btns.append("button")
|
||||||
.attr("class", "btn right")
|
.attr("class", "btn active right")
|
||||||
.attr("value", "mesh")
|
.attr("value", "vpn")
|
||||||
.text("nur Mesh")
|
.text("VPN")
|
||||||
.on("click", update_graph)
|
.on("click", update_graph)
|
||||||
|
|
||||||
cp.append("label")
|
cp.append("label")
|
||||||
|
@ -109,8 +108,10 @@ function show_node_info(d) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function update_graph() {
|
function update_graph() {
|
||||||
|
jQuery(this).toggleClass("active")
|
||||||
var value = jQuery(this).val()
|
var value = jQuery(this).val()
|
||||||
update(data, value)
|
visible[value] = jQuery(this).hasClass("active")
|
||||||
|
update(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
var vis = d3.select("#chart").append("svg")
|
var vis = d3.select("#chart").append("svg")
|
||||||
|
@ -176,8 +177,20 @@ force.on("tick", function() {
|
||||||
|
|
||||||
var data
|
var data
|
||||||
|
|
||||||
|
var visible = {clients: true, vpn: true}
|
||||||
|
|
||||||
d3.json("nodes.json", function(json) {
|
d3.json("nodes.json", function(json) {
|
||||||
json.links.forEach(function(d) {
|
data = json
|
||||||
|
|
||||||
|
// start force-layout early as it will
|
||||||
|
// replace indexes to source and target
|
||||||
|
// in data.links with actual elements from
|
||||||
|
// nodes
|
||||||
|
force.nodes(data.nodes)
|
||||||
|
.links(data.links)
|
||||||
|
.start()
|
||||||
|
|
||||||
|
data.links.forEach(function(d) {
|
||||||
var node, other
|
var node, other
|
||||||
|
|
||||||
if (d.source.group == 2) {
|
if (d.source.group == 2) {
|
||||||
|
@ -198,21 +211,19 @@ d3.json("nodes.json", function(json) {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
data = json
|
update(data)
|
||||||
|
|
||||||
update(data, "all")
|
|
||||||
})
|
})
|
||||||
|
|
||||||
function update(src, type) {
|
function update(src) {
|
||||||
var linkdata = data.links;
|
|
||||||
|
|
||||||
var links = force.links(data.links
|
var links = force.links(data.links
|
||||||
.filter(function (d) {
|
.filter(function (d) {
|
||||||
return type != "mesh" ||
|
if (!visible.clients && (d.source.group == 3 || d.target.group == 3))
|
||||||
d.source.group != 2 &&
|
return false
|
||||||
d.source.group != 3 &&
|
|
||||||
d.target.group != 2 &&
|
if (!visible.vpn && (d.source.group == 2 || d.target.group == 2))
|
||||||
d.target.group != 3
|
return false
|
||||||
|
|
||||||
|
return true
|
||||||
})
|
})
|
||||||
).links()
|
).links()
|
||||||
|
|
||||||
|
@ -247,8 +258,16 @@ function update(src, type) {
|
||||||
|
|
||||||
var nodes = force.nodes(data.nodes
|
var nodes = force.nodes(data.nodes
|
||||||
.filter(function (d) {
|
.filter(function (d) {
|
||||||
return type != "mesh" ||
|
if (!visible.vpn && d.group == 2)
|
||||||
(d.group != 2 && d.group != 3)
|
return false
|
||||||
|
|
||||||
|
if (!visible.vpn && d.group == 3 && d.uplinks)
|
||||||
|
return false
|
||||||
|
|
||||||
|
if (!visible.clients && d.group == 3)
|
||||||
|
return false
|
||||||
|
|
||||||
|
return true
|
||||||
})
|
})
|
||||||
).nodes()
|
).nodes()
|
||||||
|
|
||||||
|
@ -294,26 +313,29 @@ function update(src, type) {
|
||||||
nodeEnter.append("title")
|
nodeEnter.append("title")
|
||||||
.text(function(d) { return d.macs })
|
.text(function(d) { return d.macs })
|
||||||
|
|
||||||
if (type == "mesh") {
|
if (!visible.vpn) {
|
||||||
var uplink_info = node.filter(function (d) {
|
var uplink_info = node.filter(function (d) {
|
||||||
if (d.uplinks !== undefined)
|
if (d.uplinks !== undefined)
|
||||||
return d.uplinks.length > 0;
|
return d.uplinks.length > 0
|
||||||
else
|
else
|
||||||
return false;
|
return false
|
||||||
})
|
})
|
||||||
.append("g");
|
.append("g")
|
||||||
|
.attr("class", "uplinks")
|
||||||
|
|
||||||
uplink_info.append("path")
|
uplink_info.append("path")
|
||||||
.attr("d","m -2.8850049,-13.182327"
|
.attr("d","m -2.8850049,-13.182327"
|
||||||
+ "c 7.5369165,0.200772 12.1529864,-1.294922 12.3338513,-10.639456"
|
+ "c 7.5369165,0.200772 12.1529864,-1.294922 12.3338513,-10.639456"
|
||||||
+ "l 2.2140476,1.018191 -3.3137621,-5.293097 -3.2945999,5.20893 2.4339957,-0.995747"
|
+ "l 2.2140476,1.018191 -3.3137621,-5.293097 -3.2945999,5.20893 2.4339957,-0.995747"
|
||||||
+ "c -0.4041883,5.76426 -1.1549641,10.561363 -10.3735326,10.701179 z")
|
+ "c -0.4041883,5.76426 -1.1549641,10.561363 -10.3735326,10.701179 z")
|
||||||
.style("fill", "#333");
|
.style("fill", "#333")
|
||||||
|
|
||||||
uplink_info.append("text")
|
uplink_info.append("text")
|
||||||
.attr("text-anchor", "middle")
|
.attr("text-anchor", "middle")
|
||||||
.attr("y", 3 - 20)
|
.attr("y", 3 - 20)
|
||||||
.text(function (d) {return d.uplinks.length});
|
.text(function (d) {return d.uplinks.length})
|
||||||
|
} else {
|
||||||
|
node.selectAll(".uplinks").remove()
|
||||||
}
|
}
|
||||||
|
|
||||||
node.exit().remove()
|
node.exit().remove()
|
||||||
|
|
Loading…
Reference in a new issue