sidebar with nodecounts

html/force-big.css

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

html/force-light.css

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

html/force.css

@@ -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;
 }

html/force.js

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

html/nodes.html

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