proportions: allow hiding of statistics and add gateway client statistics

Update proportions.js: enable onclick hiding of Statistics <H2> and add clients per GW <H2>
hiding works by clicking on H2 element, so you can have the overview you like
[need to add some hidden line in scss/main.scss also]
clients per GW is based on nodes.json and the offered clientcount by the nodes directly (so this is only rough idea of reality, for alfred this means extra timedifferences upto 30 minutes)

update main.scss: to allow hiding of statistics element
add this to allow statistics element hiding

use consistent var table and dict Names
change gwTable and gwDict (and gw2 ...) to
gwNodes and gwClients

lib/proportions.js

@@ -23,8 +23,11 @@ define(["chroma-js", "virtual-dom", "numeral-intl", "filters/genericnode", "verc
     var uplinkTable = document.createElement("table")
     uplinkTable.classList.add("proportion")
 
-    var gwTable = document.createElement("table")
+    var  gwNodesTable = document.createElement("table")
-    gwTable.classList.add("proportion")
+    gwNodesTable.classList.add("proportion")
+
+    var gwClientsTable = document.createElement("table")
+    gwClientsTable.classList.add("proportion")
 
     var siteTable = document.createElement("table")
     siteTable.classList.add("proportion")
@@ -80,6 +83,25 @@ define(["chroma-js", "virtual-dom", "numeral-intl", "filters/genericnode", "verc
       return Object.keys(dict).map(function (d) { return [d, dict[d], key, f] })
     }
 
+    function count2(nodes, key, f) {
+      var dict = {}
+
+      nodes.forEach( function (d) {
+        var v = dictGet(d, key.slice(0))
+
+        if (f !== undefined)
+          v = f(v)
+
+        if (v === null)
+          return
+
+        dict[v] = d.statistics.clients + (v in dict ? dict[v] : 0)
+      })
+
+      return Object.keys(dict).map(function (d) { return [d, dict[d], key, f] })
+    }
+
+
     function addFilter(filter) {
       return function () {
         filterManager.addFilter(filter)
@@ -139,6 +161,7 @@ define(["chroma-js", "virtual-dom", "numeral-intl", "filters/genericnode", "verc
       var geoDict = count(nodes, ["nodeinfo", "location"], function (d) {
         return d ? "ja" : "nein"
       })
+
       var autoDict = count(nodes, ["nodeinfo", "software", "autoupdater"], function (d) {
         if (d === null)
           return null
@@ -147,11 +170,22 @@ define(["chroma-js", "virtual-dom", "numeral-intl", "filters/genericnode", "verc
         else
           return "(deaktiviert)"
       })
+
       var uplinkDict = count(nodes, ["flags", "uplink"], function (d) {
         return d ? "ja" : "nein"
       })
 
-      var gwDict = count(nodes, ["statistics", "gateway"], function (d) {
+      var gwNodesDict = count(nodes, ["statistics", "gateway"], function (d) {
+        if (d === null)
+          return null
+
+        if (d in nodeDict)
+          return nodeDict[d].nodeinfo.hostname
+
+        return d
+      })
+
+      var gwClientsDict = count2(onlineNodes, ["statistics", "gateway"], function (d) {
         if (d === null)
           return null
 
@@ -175,71 +209,45 @@ define(["chroma-js", "virtual-dom", "numeral-intl", "filters/genericnode", "verc
       fillTable("Firmware", fwTable, fwDict.sort(function (a, b) { return vercomp(b[0], a[0]) }))
       fillTable("Hardware", hwTable, hwDict.sort(function (a, b) { return b[1] - a[1] }))
       fillTable("Koordinaten", geoTable, geoDict.sort(function (a, b) { return b[1] - a[1] }))
-      fillTable("Autom. Updates", autoTable, autoDict.sort(function (a, b) { return b[1] - a[1] }))
       fillTable("Uplink", uplinkTable, uplinkDict.sort(function (a, b) { return b[1] - a[1] }))
-      fillTable("Gewähltes Gateway", gwTable, gwDict.sort(function (a, b) { return b[1] - a[1] }))
+      fillTable("Autom. Updates", autoTable, autoDict.sort(function (a, b) { return b[1] - a[1] }))
+      fillTable("Nodes on Gateway", gwNodesTable, gwNodesDict.sort(function (a, b) { return b[1] - a[1] }))
+      fillTable("Clients on Gateway", gwClientsTable, gwClientsDict.sort(function (a, b) { return b[1] - a[1] }))
       fillTable("Site", siteTable, siteDict.sort(function (a, b) { return b[1] - a[1] }))
     }
 
+
     self.render = function (el) {
       var h2
-      h2 = document.createElement("h2")
+      self.renderSingle(el, "Status", statusTable)
-      h2.textContent = "Status"
+      self.renderSingle(el, "Gewählter Gateway", gwNodesTable)
-      el.appendChild(h2)
+      self.renderSingle(el, "Clients on Gateway", gwClientsTable)
-      el.appendChild(statusTable)
+      self.renderSingle(el, "Firmwareversionen", fwTable)
-
+      self.renderSingle(el, "Uplink", uplinkTable)
-      h2 = document.createElement("h2")
+      self.renderSingle(el, "Hardwaremodelle", hwTable)
-      h2.textContent = "Firmwareversionen"
+      self.renderSingle(el, "Auf der Karte sichtbar", geoTable)
-      el.appendChild(h2)
+      self.renderSingle(el, "Autoupdater", autoTable)
-      el.appendChild(fwTable)
+      self.renderSingle(el, "Site", siteTable)
-
-      if(config.siteNames || config.showSites) {
-        h2 = document.createElement("h2")
-        h2.textContent = "Orte"
-        el.appendChild(h2)
-        el.appendChild(siteTable)
-      }
-
-      h2 = document.createElement("h2")
-      h2.textContent = "Hardwaremodelle"
-      el.appendChild(h2)
-      el.appendChild(hwTable)
-
-      h2 = document.createElement("h2")
-      h2.textContent = "Auf der Karte sichtbar"
-      el.appendChild(h2)
-      el.appendChild(geoTable)
-
-      h2 = document.createElement("h2")
-      h2.textContent = "Autoupdater"
-      el.appendChild(h2)
-      el.appendChild(autoTable)
-
-      h2 = document.createElement("h2")
-      h2.textContent = "Uplink"
-      el.appendChild(h2)
-      el.appendChild(uplinkTable)
-
-      h2 = document.createElement("h2")
-      h2.textContent = "Gewählter Gateway"
-      el.appendChild(h2)
-      el.appendChild(gwTable)
-
-      h2 = document.createElement("h2")
-      h2.textContent = "Site"
-      el.appendChild(h2)
-      el.appendChild(siteTable)
 
       if (config.globalInfos)
-          config.globalInfos.forEach( function (globalInfo) {
+        config.globalInfos.forEach(function (globalInfo) {
-            h2 = document.createElement("h2")
+          h2 = document.createElement("h2")
-            h2.textContent = globalInfo.name
+          h2.textContent = globalInfo.name
-            el.appendChild(h2)
+          el.appendChild(h2)
+          el.appendChild(showStatGlobal(globalInfo))
+        })
+      }
 
-            el.appendChild(showStatGlobal(globalInfo))
+    self.renderSingle = function (el, heading, table) {
-          })
+       var h2
-    }
+       h2 = document.createElement("h2")
-
+       h2.textContent = heading
-    return self
+       h2.onclick = function () {
+         table.classList.toggle("hidden")
+       }
+       el.appendChild(h2)
+       el.appendChild(table)
+     }
+     return self
   }
 })

scss/main.scss

@@ -127,6 +127,10 @@ table.attributes td {
     display: none;
   }
 
+  .container table.hidden {
+    display: none;
+  }
+
   p {
     line-height: 1.67em;
   }