Frontend generated node charts with graphite as backend

app.js

@@ -14,7 +14,8 @@ require.config({
     "virtual-dom": "../bower_components/virtual-dom/dist/virtual-dom",
     "rbush": "../bower_components/rbush/rbush",
     "helper": "../helper",
-    "jshashes": "../bower_components/jshashes/hashes"
+    "jshashes": "../bower_components/jshashes/hashes",
+    "c3": "../bower_components/c3/c3.min"
   },
   shim: {
     "leaflet.label": ["leaflet"],

bower.json

@@ -25,11 +25,15 @@
     "virtual-dom": "~2.0.1",
     "leaflet-providers": "~1.0.27",
     "rbush": "https://github.com/mourner/rbush.git#~1.3.5",
-    "jshashes": "~1.0.5"
+    "jshashes": "~1.0.5",
+    "c3": "~0.4.10"
   },
   "authors": [
     "Nils Schneider <[email protected]>"
   ],
   "license": "GPL3",
-  "private": true
+  "private": true,
+  "resolutions": {
+    "d3": "~3.5.5"
+  }
 }

config.json.example

@@ -17,5 +17,39 @@
     {
       "name": "Stamen.TonerLite"
     }
+  ],
+  "nodeCharts": [
+    {
+      "name": "Statistik",
+      "metrics": [
+        {
+          "id": "clientcount",
+          "color": "#1566A9",
+          "label": "Clients"
+        },
+        {
+          "id": "loadavg",
+          "color": "#1566A9",
+          "label": "Load"
+        },
+        {
+          "id": "uptime",
+          "color": "#1566A9",
+          "label": "Uptime"
+        }
+      ],
+      "defaultMetric": "clientcount",
+      "data": {
+        "url": "http://137.226.33.62:8002/render",
+        "parameters": [
+          "format=json",
+          "from=-###ZOOM_FROM###",
+          "target=alias(summarize(freifunk.nodes-legacy.###NODE_ID###.clientcount,\"###ZOOM_INTERVAL###\",\"max\"),\"clientcount\")",
+          "target=alias(summarize(freifunk.nodes-legacy.###NODE_ID###.loadavg,\"###ZOOM_INTERVAL###\",\"avg\"),\"loadavg\")",
+          "target=alias(summarize(freifunk.nodes-legacy.###NODE_ID###.uptime,\"###ZOOM_INTERVAL###\",\"last\"),\"uptime\")"
+        ]
+      },
+      "quirks": [ "id_to_mac" ]
+    }
   ]
 }

html/index.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="css/ionicons.min.css">
     <link rel="stylesheet" href="roboto-slab-fontface.css">
     <link rel="stylesheet" href="roboto-fontface.css">
+    <link rel="stylesheet" href="c3.min.css">
     <link rel="stylesheet" href="style.css">
     <script src="vendor/es6-shim/es6-shim.min.js"></script>
     <script src="app.js"></script>

index.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css">
     <link rel="stylesheet" href="bower_components/Leaflet.label/dist/leaflet.label.css">
     <link rel="stylesheet" href="bower_components/ionicons/css/ionicons.min.css">
+    <link rel="stylesheet" href="bower_components/c3/c3.min.css">
     <link rel="stylesheet" href="style.css">
     <script src="bower_components/es6-shim/es6-shim.min.js"></script>
     <script src="bower_components/requirejs/require.js" data-main="app"></script>

lib/infobox/charts.js

@@ -0,0 +1,265 @@
+define(["c3", "d3"], function (c3, d3) {
+
+    var charts = function (node, config) {
+        this.node = node
+
+        this.chartConfig = config
+        this.chart = null
+
+        this.zoomConfig = {
+            "levels": [
+                {"label": "8h", "from": "8h", "interval": "15min"},
+                {"label": "24h", "from": "26h", "interval": "1h"},
+                {"label": "1m", "from": "1mon", "interval": "1d"},
+                {"label": "1y", "from": "1y", "interval": "1mon"}
+            ]
+        }
+        this.zoomLevel = 0
+
+        this.c3Config = {
+            "size": {
+                "height": 240
+            },
+            padding: {
+                bottom: 30
+            },
+            "legend": {
+                "item": {
+                    "onclick": function (id) {
+                        this.api.hide()
+                        this.api.show(id)
+                    }
+                }
+            },
+            "tooltip": {
+                "format": {
+                    "value": this.c3FormatToolTip.bind(this)
+                }
+            },
+            "axis": {
+                "x": {
+                    "type": "timeseries",
+                    "tick": {
+                        "format": this.c3FormatXAxis.bind(this),
+                        "rotate": -45
+                    }
+                },
+                "y": {
+                    "min": 0,
+                    "padding": {
+                        "bottom": 0
+                    }
+                }
+            }
+        }
+
+        this.cache = []
+
+        this.init()
+    }
+
+    charts.prototype = {
+
+        init: function () {
+            // Workaround for endless loop bug
+            if (this.c3Config.axis.x.tick && this.c3Config.axis.x.tick.format && typeof this.c3Config.axis.x.tick.format === "function") {
+                if (this.c3Config.axis.x.tick.format && !this.c3Config.axis.x.tick._format)
+                    this.c3Config.axis.x.tick._format = this.c3Config.axis.x.tick.format
+                this.c3Config.axis.x.tick.format = function (val) {
+                    return this.c3Config.axis.x.tick._format(val)
+                }.bind(this)
+            }
+
+            // Configure metrics
+            this.c3Config.data = {
+                "keys": {
+                    "x": "time",
+                    "value": this.chartConfig.metrics.map(function (metric) {
+                        return metric.id
+                    })
+                },
+                "colors": this.chartConfig.metrics.reduce(function (collector, metric) {
+                    collector[metric.id] = metric.color
+                    return collector
+                }, {}),
+                "names": this.chartConfig.metrics.reduce(function (collector, metric) {
+                    collector[metric.id] = metric.label
+                    return collector
+                }, {}),
+                "hide": this.chartConfig.metrics.map(function (metric) {
+                    return metric.id
+                }).filter(function (id) {
+                    return id !== this.chartConfig.defaultMetric
+                }.bind(this))
+            }
+        },
+
+        render: function () {
+            var div = document.createElement("div")
+            div.classList.add("chart")
+            var h4 = document.createElement("h4")
+            h4.textContent = this.chartConfig.name
+            div.appendChild(h4)
+
+
+            // Render chart
+            this.load(function (data) {
+                div.appendChild(this.renderChart(data))
+
+                // Render zoom controls
+                if (this.zoomConfig.levels.length > 0)
+                    div.appendChild(this.renderZoomControls())
+
+            }.bind(this))
+
+            return div
+        },
+
+        renderChart: function (data) {
+            this.c3Config.data.json = data
+            this.chart = c3.generate(this.c3Config)
+            return this.chart.element
+        },
+
+        updateChart: function (data) {
+            this.c3Config.data.json = data
+            this.chart.load(this.c3Config.data)
+        },
+
+        renderZoomControls: function () {
+            // Draw zoom controls
+            var zoomDiv = document.createElement("div")
+            zoomDiv.classList.add("zoom-buttons")
+
+            var zoomButtons = []
+            this.zoomConfig.levels.forEach(function (v, level) {
+                var btn = document.createElement("button")
+                btn.classList.add("zoom-button")
+                btn.setAttribute("data-zoom-level", level)
+
+                if (level === this.zoomLevel)
+                    btn.classList.add("active")
+
+                btn.onclick = function () {
+                    if (level !== this.zoomLevel) {
+                        zoomButtons.forEach(function (v, k) {
+                            if (level !== k)
+                                v.classList.remove("active")
+                            else
+                                v.classList.add("active")
+                        })
+                        this.setZoomLevel(level)
+                    }
+                }.bind(this)
+                btn.textContent = v.label
+                zoomButtons[level] = btn
+                zoomDiv.appendChild(btn)
+            }.bind(this))
+            return zoomDiv
+        },
+
+        setZoomLevel: function (level) {
+            if (level !== this.zoomLevel) {
+                this.zoomLevel = level
+                this.load(this.updateChart.bind(this))
+            }
+        },
+
+        load: function (callback) {
+            if (this.cache[this.zoomLevel])
+                callback(this.cache[this.zoomLevel])
+            else {
+                var url = this.chartConfig.data.url +
+                    "?" +
+                    this.chartConfig.data.parameters.join("&")
+
+                var zoomConfig = this.zoomConfig.levels[this.zoomLevel]
+
+                var id = this.node.nodeinfo.node_id
+
+                if (this.chartConfig.quirks
+                    && Array.isArray(this.chartConfig.quirks)
+                    && this.chartConfig.quirks.indexOf("id_to_mac") >= 0) {
+
+                    // Quirk for legacy graphite data of Freifunk Aachen (data is stored by the node's mac address)
+                    var regex = /^([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i
+                    var match = regex.exec(id)
+                    if (match)
+                        id = match[1] + ":" + match[2] + ":" + match[3] + ":" + match[4] + ":" + match[5] + ":" + match[6]
+                }
+
+                // Using split as workaround for replacing all occurrences (to avoid regexps)
+                url = url.split("###NODE_ID###").join(id)
+                url = url.split("###ZOOM_FROM###").join(zoomConfig.from)
+                url = url.split("###ZOOM_INTERVAL###").join(zoomConfig.interval)
+
+                // In case we will have multiple urls in the future
+                Promise.all([url].map(getJSON)).then(function (data) {
+                    this.cache[this.zoomLevel] = this.parse(data)
+                    callback(this.cache[this.zoomLevel])
+                }.bind(this))
+            }
+        },
+
+        parse: function (results) {
+            var data = []
+            results.forEach(function (d) {
+                if (d[0] && d[0].target && d[0].datapoints)
+                    d[0].datapoints.forEach(function (dp, dpk) {
+                        var tmp = {"time": new Date(dp[1] * 1000)}
+                        for (var i = 0; i < d.length; i++) {
+                            var target = d[i].target
+                            var v = (d[i].datapoints[dpk] ? d[i].datapoints[dpk][0] : 0)
+                            tmp[target] = this.formatValue(target, v)
+                        }
+                        data.push(tmp)
+                    }.bind(this))
+            }.bind(this))
+            return data
+        },
+
+        c3FormatToolTip: function (d, ratio, id) {
+            switch (id) {
+                case "uptime":
+                    return d.toFixed(1) + " Tage"
+                default:
+                    return d
+            }
+        },
+
+        c3FormatXAxis: function (d) {
+            var pad = function (number, pad) {
+                var N = Math.pow(10, pad)
+                return number < N ? ("" + (N + number)).slice(1) : "" + number
+            }
+            switch (this.zoomLevel) {
+                case 0: // 8h
+                case 1: // 24h
+                    return pad(d.getHours(), 2) + ":" + pad(d.getMinutes(), 2)
+                case 2: // 1m
+                    return pad(d.getDate(), 2) + "." + pad(d.getMonth() + 1, 2)
+                case 3: // 1y
+                    return ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"][d.getMonth()]
+                default:
+                    break
+            }
+        },
+
+        formatValue: function (id, value) {
+            switch (id) {
+                case "loadavg":
+                    return (d3.format(".2r")(value))
+                case "clientcount":
+                    return (Math.ceil(value))
+                case "uptime":
+                    return (value / 86400)
+                default:
+                    return value
+            }
+        }
+
+    }
+
+
+    return charts
+})

lib/infobox/node.js

@@ -1,5 +1,5 @@
-define(["moment", "numeral", "tablesort", "tablesort.numeric"],
-  function (moment, numeral, Tablesort) {
+define(["moment", "numeral", "tablesort", "infobox/charts", "tablesort.numeric"],
+  function (moment, numeral, Tablesort, Charts) {
   function showGeoURI(d) {
     function showLatitude(d) {
       var suffix = Math.sign(d) > -1 ? "' N" : "' S"
@@ -200,6 +200,10 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
 
     el.appendChild(attributes)
 
+    if (!d.flags.gateway && config.nodeCharts)
+      config.nodeCharts.forEach( function (config) {
+        el.appendChild((new Charts(d, config)).render())
+      })
 
     if (config.nodeInfos)
       config.nodeInfos.forEach( function (nodeInfo) {

scss/_chart.scss

@@ -0,0 +1,20 @@
+.infobox .chart {
+  position: relative;
+  & > .c3 {
+    margin-right: 20px;
+  }
+
+  .zoom-buttons {
+    position: absolute;
+    top: 0px;
+    right: 20px;
+
+    button {
+      font-size: 10pt;
+      width: 3em;
+      height: 3em;
+      border-radius: 1.5em;
+      margin-left: 6px;
+    }
+  }
+}

scss/main.scss

@@ -13,6 +13,7 @@ $buttondistance: 12pt;
 @import '_map';
 @import '_forcegraph';
 @import '_legend';
+@import '_chart';
 
 .content {
   position: fixed;