insert statistics image in infobox of node

README.md

@@ -67,6 +67,36 @@ Setting this to `false` will hide contact information for nodes.
 Nodes being online for less than maxAge days are considered "new". Likewise,
 nodes being offline for less than than maxAge days are considered "lost".
 
+## nodeInfos (array, optional)
+
+This option allows to show client statistics 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 `type` is `link` (no thumbnail in infobox)
+
+To insert current node-id in either `href`, `thumbnail` or `caption`
+you can use the case-sensitive template string `{NODE_ID}`.
+
+Examples for `nodeInfos`:
+
+    "nodeInfos": [
+      { "name": "Clientstatistik"
+        "href": "nodes/{NODE_ID}.png",
+        "thumbnail": "nodes/{NODE_ID}.png",
+        "caption": "Knoten {NODE_ID}"
+      },
+      { "name": "Uptime",
+        "href": "nodes_uptime/{NODE_ID}.png",
+        "thumbnail": "nodes_uptime/{NODE_ID}.png",
+        "caption": "Knoten {NODE_ID}"
+      }
+    ]
+
+In order to have statistics images available, you have to run the backend with parameter `--with-rrd` or generate them in other ways.
+
 # Building
 
 Just run the following command from the meshviewer directory:

lib/infobox/node.js

@@ -133,6 +133,37 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
     return au.enabled ? "aktiviert (" + au.branch + ")" : "deaktiviert"
   }
 
+  function showStatImg(o, nodeId) {
+    return function (el) {
+      var content, caption
+
+      if (o.thumbnail) {
+        content = document.createElement("img")
+        content.src = o.thumbnail.replace("{NODE_ID}", nodeId)
+      }
+
+      if (o.caption) {
+        caption = o.caption.replace("{NODE_ID}", nodeId)
+
+        if (!content)
+          content = document.createTextNode(caption)
+      }
+
+      if (o.href) {
+        var link = document.createElement("a")
+        link.target = "_blank"
+        link.href = o.href.replace("{NODE_ID}", nodeId)
+        link.appendChild(content)
+
+        if (caption && o.thumbnail)
+          link.title = caption
+
+        el.appendChild(link)
+      } else
+        el.appendChild(content)
+    }
+  }
+
   return function(config, el, router, d) {
     var h2 = document.createElement("h2")
     h2.textContent = d.nodeinfo.hostname
@@ -161,6 +192,12 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
     attributeEntry(attributes, "IP Adressen", showIPs(d))
     attributeEntry(attributes, "Autom. Updates", showAutoupdate(d))
     attributeEntry(attributes, "Clients", showClients(d))
+
+    if (config.nodeInfos)
+      config.nodeInfos.forEach( function (nodeInfo) {
+        attributeEntry(attributes, nodeInfo.name, showStatImg(nodeInfo, d.nodeinfo.node_id))
+      })
+
     el.appendChild(attributes)
 
     if (d.neighbours.length > 0) {

scss/main.scss

@@ -141,6 +141,10 @@ table.attributes td {
   position: relative;
   padding: 0.25em 0;
   margin-bottom: $buttondistance;
+
+  img {
+    max-width: 100%;
+  }
 }
 
 button {