From 607c15ef3b28aaf1c54be06eebfe71f86ee6f021 Mon Sep 17 00:00:00 2001 From: Little-Ben Date: Sun, 7 Jun 2015 18:47:14 +0200 Subject: [PATCH] statistics: show global statistics image (globalGraph) - v2 --- README.md | 29 +++++++++++++++++++++++++++++ lib/gui.js | 2 +- lib/proportions.js | 44 +++++++++++++++++++++++++++++++++++++++++++- scss/main.scss | 3 +++ 4 files changed, 76 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 1599690..d2f9dd8 100644 --- a/README.md +++ b/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: diff --git a/lib/gui.js b/lib/gui.js index e3d64fc..a1b6b2e 100644 --- a/lib/gui.js +++ b/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) diff --git a/lib/proportions.js b/lib/proportions.js index 7a2e5b0..f9bf90e 100644 --- a/lib/proportions.js +++ b/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 diff --git a/scss/main.scss b/scss/main.scss index fe848dd..9112d95 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -221,6 +221,9 @@ button.close { table { padding: 0 $buttondistance; } + img { + max-width: 100%; + } } table {