From 0451480d9129386bf0d052b995535e2fbf23af6c Mon Sep 17 00:00:00 2001
From: Adrian Schmutzler <freifunk@adrianschmutzler.de>
Date: Sun, 21 Jan 2018 21:36:42 +0100
Subject: [PATCH] router.html: Show bit per second for data rates

Signed-off-by: Adrian Schmutzler <freifunk@adrianschmutzler.de>
---
 ffmap/web/filters.py                          | 13 ++-
 ffmap/web/static/js/graph.js                  |  6 +-
 ffmap/web/static/js/graph/jquery.flot.byte.js | 82 +++++++++++++++++++
 ffmap/web/templates/router.html               |  8 +-
 4 files changed, 100 insertions(+), 9 deletions(-)

diff --git a/ffmap/web/filters.py b/ffmap/web/filters.py
index 77e3733..2c305be 100644
--- a/ffmap/web/filters.py
+++ b/ffmap/web/filters.py
@@ -114,9 +114,18 @@ def nbsp(txt):
 def humanize_bytes(num, suffix='B'):
 	for unit in ['','Ki','Mi','Gi','Ti','Pi','Ei','Zi']:
 		if abs(num) < 1024.0 and unit != '':
-			return "%3.1f%s%s" % (num, unit, suffix)
+			return "%3.1f %s%s" % (num, unit, suffix)
 		num /= 1024.0
-	return "%.1f%s%s" % (num, 'Yi', suffix)
+	return "%.1f %s%s" % (num, 'Yi', suffix)
+
+@filters.app_template_filter('bytes_to_bits')
+def bytes_to_bits(num, suffix='b'):
+	num *= 8.0
+	for unit in ['','k','M','G','T','P','E','Z']:
+		if abs(num) < 1000.0 and unit != '':
+			return "%3.1f %s%s" % (num, unit, suffix)
+		num /= 1000.0
+	return "%.1f %s%s" % (num, 'Y', suffix)
 
 @filters.app_template_filter('mac2fe80')
 def mac_to_ipv6_linklocal(mac):
diff --git a/ffmap/web/static/js/graph.js b/ffmap/web/static/js/graph.js
index cf48139..2206121 100644
--- a/ffmap/web/static/js/graph.js
+++ b/ffmap/web/static/js/graph.js
@@ -77,8 +77,8 @@ function network_graph(netif) {
 			var rx_value = netif_stats[i].rx;
 			var date_value = netif_stats[i].time.$date;
 			if(tx_value != null && rx_value != null) {
-				tx.push([date_value, tx_value]);
-				rx.push([date_value, rx_value]);
+				tx.push([date_value, tx_value * 8]);
+				rx.push([date_value, rx_value * 8]);
 			}
 		}
 		catch(TypeError) {
@@ -92,7 +92,7 @@ function network_graph(netif) {
 	var plot = $.plot(netstat, pdata, {
 		xaxis: {mode: "time", timezone: "browser"},
 		selection: {mode: "x"},
-		yaxis: {min: 0, mode: "byteRate"},
+		yaxis: {min: 0, mode: "bitRate"},
 		legend: {noColumns: 2, hideable: true},
 		series: {downsample: {threshold: Math.floor(netstat.width() * points_per_px)}}
 	});
diff --git a/ffmap/web/static/js/graph/jquery.flot.byte.js b/ffmap/web/static/js/graph/jquery.flot.byte.js
index ef1f383..ec62739 100644
--- a/ffmap/web/static/js/graph/jquery.flot.byte.js
+++ b/ffmap/web/static/js/graph/jquery.flot.byte.js
@@ -87,6 +87,88 @@
 						}
 
 
+						if (typeof axis.rate !== "undefined") {
+							ext += "/s";
+						}
+
+						return (size.toFixed(axis.tickDecimals) + ext);
+					};
+				}
+				else if (opts.mode === "bit" || opts.mode === "bitRate") {
+					axis.tickGenerator = function (axis) {
+						var returnTicks = [],
+							tickSize = 2,
+							delta = axis.delta,
+							steps = 0,
+							tickMin = 0,
+							tickVal,
+							tickCount = 0;
+
+						//Set the reference for the formatter
+						if (opts.mode === "bitRate") {
+							axis.rate = true;
+						}
+
+						//Enforce maximum tick Decimals
+						if (typeof opts.tickDecimals === "number") {
+							axis.tickDecimals = opts.tickDecimals;
+						} else {
+							axis.tickDecimals = 0;
+						}
+
+						//Count the steps
+						while (Math.abs(delta) >= 1000) {
+							steps++;
+							delta /= 1000;
+						}
+
+						//Set the tick size relative to the remaining delta
+						while (tickSize <= 1000) {
+							if (delta <= tickSize) {
+								break;
+							}
+							tickSize *= 2;
+						}
+
+						//Tell flot the tickSize we've calculated
+						if (typeof opts.minTickSize !== "undefined" && tickSize < opts.minTickSize) {
+							axis.tickSize = opts.minTickSize;
+						} else {
+							axis.tickSize = tickSize * Math.pow(1000,steps);
+						}
+
+						//Calculate the new ticks
+						tickMin = floorInBase(axis.min, axis.tickSize);
+						do {
+							tickVal = tickMin + (tickCount++) * axis.tickSize;
+							returnTicks.push(tickVal);
+						} while (tickVal < axis.max);
+
+						return returnTicks;
+					};
+
+					axis.tickFormatter = function(size, axis) {
+						var ext, steps = 0;
+
+						while (Math.abs(size) >= 1000) {
+							steps++;
+							size /= 1000;
+						}
+
+
+						switch (steps) {
+							case 0: ext = " b";  break;
+							case 1: ext = " kb"; break;
+							case 2: ext = " Mb"; break;
+							case 3: ext = " Gb"; break;
+							case 4: ext = " Tb"; break;
+							case 5: ext = " Pb"; break;
+							case 6: ext = " Eb"; break;
+							case 7: ext = " Zb"; break;
+							case 8: ext = " Yb"; break;
+						}
+
+
 						if (typeof axis.rate !== "undefined") {
 							ext += "/s";
 						}
diff --git a/ffmap/web/templates/router.html b/ffmap/web/templates/router.html
index f839d1d..a66d6b2 100644
--- a/ffmap/web/templates/router.html
+++ b/ffmap/web/templates/router.html
@@ -273,8 +273,8 @@
 							</div>
 							{%- if netif.rx is defined %}
 							<div class="col-xs-7 col-sm-7 text-right">
-								<span class="glyphicon glyphicon-arrow-down"></span>{{ netif.rx|humanize_bytes }}/s
-								<span class="glyphicon glyphicon-arrow-up"></span>{{ netif.tx|humanize_bytes }}/s
+								<span class="glyphicon glyphicon-arrow-down"></span>{{ netif.rx|bytes_to_bits }}/s
+								<span class="glyphicon glyphicon-arrow-up"></span>{{ netif.tx|bytes_to_bits }}/s
 							</div>
 							{%- endif %}
 						</div>
@@ -318,8 +318,8 @@
 							</div>
 							{%- if netif.rx is defined %}
 							<div class="col-xs-7 col-sm-7 text-right">
-								<span class="glyphicon glyphicon-arrow-down"></span>{{ netif.rx|humanize_bytes }}/s
-								<span class="glyphicon glyphicon-arrow-up"></span>{{ netif.tx|humanize_bytes }}/s
+								<span class="glyphicon glyphicon-arrow-down"></span>{{ netif.rx|bytes_to_bits }}/s
+								<span class="glyphicon glyphicon-arrow-up"></span>{{ netif.tx|bytes_to_bits }}/s
 							</div>
 							{%- endif %}
 						</div>