sidebar with nodecounts

alfred-data
Nils Schneider 2012-06-16 04:31:24 +02:00
parent 41410d53ab
commit b6ea47573f
5 changed files with 78 additions and 47 deletions

View File

@ -49,6 +49,6 @@
fill: #C83771;
}
#legend {
sidebar {
color: #ddd;
}

View File

@ -55,6 +55,6 @@
fill: #C83771;
}
#legend {
sidebar {
color: #777;
}

View File

@ -131,16 +131,16 @@
text-shadow: none;
}
#legend {
sidebar {
position: absolute;
top: 1em;
right: 1.5em;
z-index: 0;
font-size: 9pt;
}
#legend ul {
list-style: none;
font-size: 9pt;
}
#legend li {
@ -153,7 +153,7 @@
vertical-align: center;
}
#legend h2 {
sidebar h2 {
margin-top: 0;
font-size: 9pt;
}

View File

@ -90,6 +90,20 @@ btns.append("button")
.text("VPN")
.on("click", update_graph)
var meshinfo = d3.select("sidebar")
.insert("div", ":first-child")
meshinfo.append("h2").text("Mesh")
meshinfo.append("p")
.attr("id", "nodecount")
meshinfo.append("p")
.attr("id", "clientcount")
meshinfo.append("p")
.attr("id", "gatewaycount")
//cp.append("input")
// .on("keyup", function(){show_node(this.value)})
// .on("change", function(){show_node(this.value)})
@ -310,6 +324,21 @@ function reload() {
updated_at.text(d3.time.format("%X")(new Date()))
d3.select("#nodecount")
.text((data.nodes.filter(function(d) {
return !d.flags.client
}).length) + " Knoten")
d3.select("#gatewaycount")
.text((data.nodes.filter(function(d) {
return d.flags.gateway
}).length) + " Gateways")
d3.select("#clientcount")
.text((data.nodes.filter(function(d) {
return d.flags.client
}).length) + " Clients")
update()
})
}

View File

@ -22,6 +22,7 @@
</ul>
</header>
<div id="chart">
<sidebar>
<div id="legend">
<h2>Legende</h2>
<ul>
@ -65,6 +66,7 @@
</li>
</ul>
</div>
</sidebar>
</div>
<script src='force.js' type='text/javascript'></script>
</body>