trafficgraphs, move common code to 1 file, and remove usage of 'localstorage' which shares unwanted changes to graph settings between widget and stats

3 files changed, 116 insertions, 180 deletions

diff --git a/src/usr/local/www/js/traffic-graphs.js b/src/usr/local/www/js/traffic-graphs.js
index cfd0a40..8a29a20 100644
--- a/src/usr/local/www/js/traffic-graphs.js
+++ b/src/usr/local/www/js/traffic-graphs.js
@@ -16,15 +16,107 @@
  * limitations under the License.
  */
 
-function draw_graph(refreshInterval, then, backgroundupdate) {
+function graph_init() {
+
+	window.charts = {};
+    window.myData = {};
+    window.updateIds = 0;
+    window.updateTimerIds = 0;
+    window.latest = [];
+    //TODO make it fall on a second value so it increments better
+    var now = then = new Date(Date.now());
+
+    var nowTime = now.getTime();
+
+	$.each(window.interfaces, function( key, value ) {
+
+		myData[value] = [];
+		updateIds = 0;
+		updateTimerIds = 0;
+
+		var itemIn = new Object();
+		var itemOut = new Object();
+
+		itemIn.key = value + " (in)";
+		if (window.invert) {
+			itemIn.area = true;
+		}
+		itemIn.first = true;
+		itemIn.values = [{x: nowTime, y: 0}];
+		myData[value].push(itemIn);
+
+		itemOut.key = value + " (out)";
+		if (window.invert) {
+			itemOut.area = true;
+		}
+		itemOut.first = true;
+		itemOut.values = [{x: nowTime, y: 0}];
+		myData[value].push(itemOut);
+
+	});
+
+	if (window.interfaces.length > 0) {
+		draw_graph(then);
+	}
+}
+
+function graph_visibilitycheck() {
+	//re-draw graph when the page goes from inactive (in it's window) to active
+	Visibility.change(function (e, state) {
+		if (window.graph_backgroundupdate) {
+			return;
+		}
+		if (state === "visible") {
+
+			now = then = new Date(Date.now());
+
+			var nowTime = now.getTime();
+
+			$.each(window.interfaces, function( key, value ) {
+
+				Visibility.stop(updateIds);
+				clearInterval(updateTimerIds);
+
+				myData[value] = [];
+
+				var itemIn = new Object();
+				var itemOut = new Object();
+
+				itemIn.key = value + " (in)";
+				if (window.invert) {
+					itemIn.area = true;
+				}
+				itemIn.first = true;
+				itemIn.values = [{x: nowTime, y: 0}];
+				myData[value].push(itemIn);
+
+				itemOut.key = value + " (out)";
+				if (window.invert) {
+					itemOut.area = true;
+				}
+				itemOut.first = true;
+				itemOut.values = [{x: nowTime, y: 0}];
+				myData[value].push(itemOut);
+
+			});
+
+			if (window.interfaces.length > 0) {
+				draw_graph(then);
+			}
+
+		}
+	});
+}
+
+function draw_graph(then) {
 
 	d3.select("div[id^=nvtooltip-]").remove();
 	d3.select(".interface-label").remove();
 
-	var invert = localStorage.getItem('invert');
-	var size = localStorage.getItem('size');
+	var invert = window.invert;
+	var size = window.size;
+	var refreshInterval = window.interval;
 	var lasttime = 0;
-
 	startTime = 120 * refreshInterval;
 	then.setSeconds(then.getSeconds() - startTime);
 	var thenTime = then.getTime();
@@ -92,7 +184,7 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 			charts[value].interactiveLayer.tooltip.contentGenerator(function(data) {
 
 				var units = 'b/s';
-				if(localStorage.getItem('size') === "1") {
+				if(window.size === 1) {
 					units = 'B/s'
 				}
 
@@ -102,7 +194,7 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 
 					var rawValue = data.series[v].value;
 
-					if((invert === "true") && data.series[v].key.includes("(out)")) {
+					if(invert && data.series[v].key.includes("(out)")) {
 						rawValue = 0 - rawValue;
 					}
 
@@ -172,7 +264,7 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 					var trafficIn = ((ifVals[0].values[1] * size) - latest[ifVals[0].key]) / timeDiff;
 					var trafficOut = ((ifVals[1].values[1] * size) - latest[ifVals[1].key]) / timeDiff;
 
-					if((localStorage.getItem('invert') === "true")) {
+					if(window.invert) {
 						trafficOut = 0 - trafficOut;
 					}
 
@@ -224,7 +316,7 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 
 	}
 	
-	if(backgroundupdate) {
+	if(window.graph_backgroundupdate) {
 		updateTimerIds = setInterval(refreshGraphFunction, refreshInterval * 1000);
 	} else {
 		//only update the graphs when tab is active in window to save resources and prevent build up
diff --git a/src/usr/local/www/status_graph.php b/src/usr/local/www/status_graph.php
index 54dde34..d62257a 100644
--- a/src/usr/local/www/status_graph.php
+++ b/src/usr/local/www/status_graph.php
@@ -184,96 +184,22 @@ $realif = get_real_interface($curif);
 
 <script type="text/javascript">
 
+
 //<![CDATA[
 events.push(function() {
 
 	var InterfaceString = "<?=$curif?>";
 	var RealInterfaceString = "<?=$realif?>";
+    window.graph_backgroundupdate = $('#backgroundupdate').val() === "true";
 
-	//store saved settings in a fresh localstorage
-	localStorage.clear();
-	localStorage.setItem('interval', 1);
-	localStorage.setItem('invert', "true");
-	localStorage.setItem('size', 1);
-	window.interfaces = InterfaceString.split("|");
-	window.realinterfaces = RealInterfaceString.split("|");
-	window.charts = {};
-    window.myData = {};
-    window.updateIds = 0;
-    window.updateTimerIds = 0;
-    window.latest = [];
-    var refreshInterval = localStorage.getItem('interval');
-
-    //TODO make it fall on a second value so it increments better
-    var now = then = new Date(Date.now());
-
-    var nowTime = now.getTime();
-
-	$.each( window.interfaces, function( key, value ) {
-
-		myData[value] = [];
-		updateIds = 0;
-		updateTimerIds = 0;
-
-		var itemIn = new Object();
-		var itemOut = new Object();
-
-		itemIn.key = value + " (in)";
-		if(localStorage.getItem('invert') === "true") { itemIn.area = true; }
-		itemIn.first = true;
-		itemIn.values = [{x: nowTime, y: 0}];
-		myData[value].push(itemIn);
-
-		itemOut.key = value + " (out)";
-		if(localStorage.getItem('invert') === "true") { itemOut.area = true; }
-		itemOut.first = true;
-		itemOut.values = [{x: nowTime, y: 0}];
-		myData[value].push(itemOut);
-
-	});
-
-    var backgroundupdate = $('#backgroundupdate').val() === "true";
-	draw_graph(refreshInterval, then, backgroundupdate);
-
-	//re-draw graph when the page goes from inactive (in it's window) to active
-	Visibility.change(function (e, state) {
-		if($('#backgroundupdate').val() === "true"){
-			return;
-		}
-		if(state === "visible") {
-
-			now = then = new Date(Date.now());
-
-			var nowTime = now.getTime();
-
-			$.each( window.interfaces, function( key, value ) {
+	window.interval = 1;
+	window.invert = "true";
+	window.size = 8;
+	window.interfaces = InterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
+	window.realinterfaces = RealInterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
 
-				Visibility.stop(updateIds);
-				clearInterval(updateTimerIds);
-
-				myData[value] = [];
-
-				var itemIn = new Object();
-				var itemOut = new Object();
-
-				itemIn.key = value + " (in)";
-				if(localStorage.getItem('invert') === "true") { itemIn.area = true; }
-				itemIn.first = true;
-				itemIn.values = [{x: nowTime, y: 0}];
-				myData[value].push(itemIn);
-
-				itemOut.key = value + " (out)";
-				if(localStorage.getItem('invert') === "true") { itemOut.area = true; }
-				itemOut.first = true;
-				itemOut.values = [{x: nowTime, y: 0}];
-				myData[value].push(itemOut);
-
-			});
-
-			draw_graph(refreshInterval, then, false);
-
-		}
-	});
+	graph_init();
+	graph_visibilitycheck();
 
 });
 //]]>
diff --git a/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php b/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php
index 6952e7b..52ce62f 100644
--- a/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php
+++ b/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php
@@ -258,99 +258,17 @@ events.push(function() {
 
 	var InterfaceString = "<?=implode("|", $tg_displayed_ifs_array)?>";
 	var RealInterfaceString = "<?=implode("|", $tg_displayed_realifsarray)?>";
+    window.graph_backgroundupdate = <?=$tg_backgroundupdate?>;
 
-	//store saved settings in a fresh localstorage
-	localStorage.clear();
-	localStorage.setItem('interval', <?=$tg_refreshinterval?>);
-	localStorage.setItem('invert', <?=$tg_invert?>);
-	localStorage.setItem('size', <?=$tg_size?>);
-	localStorage.setItem('backgroundupdate', <?=$tg_backgroundupdate?>);
-
+	window.interval = <?=$tg_refreshinterval?>;
+	window.invert = <?=$tg_invert?>;
+	window.size = <?=$tg_size?>;
 	window.interfaces = InterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
 	window.realinterfaces = RealInterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
-	window.charts = {};
-    window.myData = {};
-    window.updateIds = 0;
-    window.updateTimerIds = 0;
-    window.latest = [];
-    var refreshInterval = localStorage.getItem('interval');
-    var backgroundupdate = localStorage.getItem('backgroundupdate');
-
-    var refreshInterval = localStorage.getItem('interval');
-    //TODO make it fall on a second value so it increments better
-    var now = then = new Date(Date.now());
-
-    var nowTime = now.getTime();
-
-	$.each(window.interfaces, function( key, value ) {
-
-		myData[value] = [];
-		updateIds = 0;
-		updateTimerIds = 0;
-
-		var itemIn = new Object();
-		var itemOut = new Object();
-
-		itemIn.key = value + " (in)";
-		if (localStorage.getItem('invert') === "true") { itemIn.area = true; }
-		itemIn.first = true;
-		itemIn.values = [{x: nowTime, y: 0}];
-		myData[value].push(itemIn);
-
-		itemOut.key = value + " (out)";
-		if (localStorage.getItem('invert') === "true") { itemOut.area = true; }
-		itemOut.first = true;
-		itemOut.values = [{x: nowTime, y: 0}];
-		myData[value].push(itemOut);
-
-	});
-
-	if (window.interfaces.length > 0) {
-		draw_graph(refreshInterval, then, backgroundupdate);
-	}
-
-	//re-draw graph when the page goes from inactive (in it's window) to active
-	Visibility.change(function (e, state) {
-		if (backgroundupdate) {
-			return;
-		}
-		if (state === "visible") {
-
-			now = then = new Date(Date.now());
-
-			var nowTime = now.getTime();
-
-			$.each(window.interfaces, function( key, value ) {
-
-				Visibility.stop(updateIds);
-				clearInterval(updateTimerIds);
-
-				myData[value] = [];
-
-				var itemIn = new Object();
-				var itemOut = new Object();
-
-				itemIn.key = value + " (in)";
-				if (localStorage.getItem('invert') === "true") { itemIn.area = true; }
-				itemIn.first = true;
-				itemIn.values = [{x: nowTime, y: 0}];
-				myData[value].push(itemIn);
-
-				itemOut.key = value + " (out)";
-				if (localStorage.getItem('invert') === "true") { itemOut.area = true; }
-				itemOut.first = true;
-				itemOut.values = [{x: nowTime, y: 0}];
-				myData[value].push(itemOut);
-
-			});
-
-			if (window.interfaces.length > 0) {
-				draw_graph(refreshInterval, then, backgroundupdate);
-			}
-
-		}
-	});
 
+	graph_init();
+	graph_visibilitycheck();
+	
 	set_widget_checkbox_events("#widget-<?=$widgetname?>_panel-footer [id^=show]", "showalltgitems");
 });
 //]]>