statistics: show global statistics image (globalGraph) - v2

README.md

@@ -97,6 +97,35 @@ Examples for `nodeInfos`:
 
 In order to have statistics images available, you have to run the backend with parameter `--with-rrd` or generate them in other ways.
 
+## globalInfos (array, optional)
+
+This option allows to show global statistics on statistics page depending on following case-sensitive parameters:
+
+- `name` caption of statistics segment in infobox
+- `href` absolute or relative URL to statistics image
+- `thumbnail` absolute or relative URL to thumbnail image,
+  can be the same like `href`
+- `caption` is shown, if `thumbnail` is not present (no thumbnail in infobox)
+
+In contrast to `nodeInfos` there is no template substitution in  `href`, `thumbnail` or `caption`.
+
+Examples for `globalInfos`:
+
+    "globalInfos": [
+      { "name": "Wochenstatistik",
+        "href": "nodes/globalGraph.png",
+        "thumbnail": "nodes/globalGraph.png",
+        "caption": "Bild mit Wochenstatistik"
+      },
+      { "name": "Jahresstatistik",
+        "href": "nodes/globalGraph52.png",
+        "thumbnail": "nodes/globalGraph52.png",
+        "caption": "Bild mit Jahresstatistik"
+      }
+    ]
+
+In order to have global statistics available, you have to run the backend with parameter `--with-rrd` (this only creates globalGraph.png) or generate them in other ways.
+
 # Building
 
 Just run the following command from the meshviewer directory:

lib/gui.js

@@ -74,7 +74,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     var lostnodeslist = new SimpleNodelist("lost", "lastseen", router, "Verschwundene Knoten")
     var nodelist = new Nodelist(router)
     var linklist = new Linklist(linkScale, router)
-    var statistics = new Proportions()
+    var statistics = new Proportions(config)
     var about = new About()
 
     dataTargets.push(meshstats)

lib/proportions.js

@@ -1,11 +1,44 @@
 define(["chroma-js", "virtual-dom", "numeral-intl"],
   function (Chroma, V, numeral) {
 
-  return function () {
+  return function (config) {
     var self = this
     var fwTable, hwTable, autoTable, gwTable
     var scale = Chroma.scale("YlGnBu").mode("lab")
 
+    function showStatGlobal(o) {
+      var content, caption
+
+      if (o.thumbnail) {
+        content = document.createElement("img")
+        content.src = o.thumbnail
+      }
+
+      if (o.caption) {
+        caption = o.caption
+
+        if (!content)
+          content = document.createTextNode(caption)
+      }
+
+      var p = document.createElement("p")
+
+      if (o.href) {
+        var link = document.createElement("a")
+        link.target = "_blank"
+        link.href = o.href
+        link.appendChild(content)
+
+        if (caption && o.thumbnail)
+          link.title = caption
+
+        p.appendChild(link)
+      } else
+        p.appendChild(content)
+
+      return p
+    }
+
     function count(nodes, key, f) {
       var dict = {}
 
@@ -123,6 +156,15 @@ define(["chroma-js", "virtual-dom", "numeral-intl"],
       gwTable = document.createElement("table")
       gwTable.classList.add("proportion")
       el.appendChild(gwTable)
+
+      if (config.globalInfos)
+          config.globalInfos.forEach( function (globalInfo) {
+            h2 = document.createElement("h2")
+            h2.textContent = globalInfo.name
+            el.appendChild(h2)
+
+            el.appendChild(showStatGlobal(globalInfo))
+          })
     }
 
     return self

scss/main.scss

@@ -221,6 +221,9 @@ button.close {
   table {
     padding: 0 $buttondistance;
   }
+  img {
+    max-width: 100%;
+  }
 }
 
 table {