client/vpn toggle

This commit is contained in:
Nils Schneider 2012-06-06 04:15:08 +02:00
parent c7b33a4839
commit a9b5cd6cfc

View file

@ -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()