easypiechart and gauge charts now support fixed aspect ratio which is pre-calculated to avoid resizing the DOM on scroll

3 files changed, 56 insertions, 56 deletions

diff --git a/web/dashboard.css b/web/dashboard.css
index 937825d7f5..f17d73566f 100755
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -19,6 +19,13 @@ html {
 	/* width and height is given per chart with data-width and data-height */
 }
 
+.netdata-aspect {
+	position: relative;
+	width: 100%;
+	padding: 0px;
+	margin: 0px;
+}
+
 .netdata-container-with-legend {
 	display: -webkit-flex; /* Safari */
 	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
@@ -361,7 +368,6 @@ html {
 	font-weight: normal;
 }
 
-
 .gaugeChart {
 	position: relative;
 	text-align: center;
diff --git a/web/dashboard.js b/web/dashboard.js
index 2dd1e2ecac..1ac5c5b560 100755
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -385,6 +385,8 @@
 	};
 
 	NETDATA.onscroll = function() {
+		// console.log('onscroll');
+
 		NETDATA.options.last_page_scroll = new Date().getTime();
 		if(NETDATA.options.targets === null) return;
 
@@ -1012,10 +1014,19 @@
 			else if(typeof(that.width) === 'number')
 				$(that.element).css('width', that.width + 'px');
 
-			if(typeof(that.height) === 'string')
-				$(that.element).css('height', that.height);
-			else if(typeof(that.height) === 'number')
-				$(that.element).css('height', that.height + 'px');
+			if(typeof(that.library.aspect_ratio) === 'undefined') {
+				if(typeof(that.height) === 'string')
+					$(that.element).css('height', that.height);
+				else if(typeof(that.height) === 'number')
+					$(that.element).css('height', that.height + 'px');
+			}
+			else {
+				var w = that.element.offsetWidth;
+				if(w === null || w === 0)
+					that.tm.last_resized = 0;
+				else
+					$(that.element).css('height', (that.element.offsetWidth * that.library.aspect_ratio / 100).toString() + 'px');
+			}
 
 			if(NETDATA.chartDefaults.min_width !== null)
 				$(that.element).css('min-width', NETDATA.chartDefaults.min_width);
@@ -2969,6 +2980,10 @@
 
 		// bootstrap tab switching
 		$('a[data-toggle="tab"]').on('shown.bs.tab', NETDATA.onscroll);
+
+		// bootstrap modal switching
+		$('.modal').on('hidden.bs.modal', NETDATA.onscroll);
+		$('.modal').on('shown.bs.modal', NETDATA.onscroll);
 		
 		NETDATA.parseDom(NETDATA.chartRefresher);
 	}
@@ -4561,14 +4576,14 @@
 		else
 			state.gaugeMax = max;
 
-		var width = state.chartWidth(), height = state.chartHeight(), ratio = 1.5;
-		switch(adjust) {
-			case 'width': width = height * ratio; break;
-			case 'height':
-			default: height = width / ratio; break;
-		}
-		state.element.style.width = width.toString() + 'px';
-		state.element.style.height = height.toString() + 'px';
+		var width = state.chartWidth(), height = state.chartHeight(); //, ratio = 1.5;
+		//switch(adjust) {
+		//	case 'width': width = height * ratio; break;
+		//	case 'height':
+		//	default: height = width / ratio; break;
+		//}
+		//state.element.style.width = width.toString() + 'px';
+		//state.element.style.height = height.toString() + 'px';
 
 		var lum_d = 0.05;
 
@@ -4846,7 +4861,8 @@
 			autoresize: function(state) { return false; },
 			max_updates_to_recreate: function(state) { return 5000; },
 			track_colors: function(state) { return false; },
-			pixels_per_point: function(state) { return 3; }
+			pixels_per_point: function(state) { return 3; },
+			aspect_ratio: 100
 		},
 		"gauge": {
 			initialize: NETDATA.gaugeInitialize,
@@ -4863,7 +4879,8 @@
 			autoresize: function(state) { return false; },
 			max_updates_to_recreate: function(state) { return 5000; },
 			track_colors: function(state) { return false; },
-			pixels_per_point: function(state) { return 3; }
+			pixels_per_point: function(state) { return 3; },
+			aspect_ratio: 70
 		}
 	};
 
diff --git a/web/index.html b/web/index.html
index 8c600bb035..b70946c131 100755
--- a/web/index.html
+++ b/web/index.html
@@ -253,7 +253,7 @@
 	<!-- <script> netdataServer = "http://box:19999"; </script> -->
 
 	<!-- load the dashboard manager - it will do the rest -->
-	<script type="text/javascript" src="dashboard.js?v18"></script>
+	<script type="text/javascript" src="dashboard.js?v19"></script>
 </head>
 
 <body data-spy="scroll" data-target="#sidebar">
@@ -912,8 +912,7 @@ function prepareScreen(data) {
 							+ ' data-chart-library="gauge"'
 							+ ' data-gauge-adjust="width"'
 							+ ' data-title="Receive"'
-							+ ' data-width="100px"'
-							+ ' data-height="100px"'
+							+ ' data-width="12%"'
 							+ ' data-before="0"'
 							+ ' data-after="-' + duration.toString() + '"'
 							+ ' data-points="' + duration.toString() + '"'
@@ -925,8 +924,7 @@ function prepareScreen(data) {
 							+ ' data-chart-library="gauge"'
 							+ ' data-gauge-adjust="width"'
 							+ ' data-title="Sent"'
-							+ ' data-width="100px"'
-							+ ' data-height="100px"'
+							+ ' data-width="12%"'
 							+ ' data-before="0"'
 							+ ' data-after="-' + duration.toString() + '"'
 							+ ' data-points="' + duration.toString() + '"'
@@ -941,8 +939,7 @@ function prepareScreen(data) {
 								+ ' data-chart-library="gauge"'
 								+ ' data-gauge-adjust="width"'
 								+ ' data-title="Receive"'
-								+ ' data-width="100px"'
-								+ ' data-height="100px"'
+								+ ' data-width="12%"'
 								+ ' data-before="0"'
 								+ ' data-after="-' + duration.toString() + '"'
 								+ ' data-points="' + duration.toString() + '"'
@@ -954,8 +951,7 @@ function prepareScreen(data) {
 								+ ' data-chart-library="gauge"'
 								+ ' data-gauge-adjust="width"'
 								+ ' data-title="Sent"'
-								+ ' data-width="100px"'
-								+ ' data-height="100px"'
+								+ ' data-width="12%"'
 								+ ' data-before="0"'
 								+ ' data-after="-' + duration.toString() + '"'
 								+ ' data-points="' + duration.toString() + '"'
@@ -1000,8 +996,7 @@ function prepareScreen(data) {
 								+ ' data-chart-library="gauge"'
 								+ ' data-gauge-adjust="width"'
 								+ ' data-title="Read"'
-								+ ' data-width="100px"'
-								+ ' data-height="100px"'
+								+ ' data-width="12%"'
 								+ ' data-before="0"'
 								+ ' data-after="-' + duration.toString() + '"'
 								+ ' data-points="' + duration.toString() + '"'
@@ -1013,8 +1008,7 @@ function prepareScreen(data) {
 								+ ' data-chart-library="gauge"'
 								+ ' data-gauge-adjust="width"'
 								+ ' data-title="Write"'
-								+ ' data-width="100px"'
-								+ ' data-height="100px"'
+								+ ' data-width="12%"'
 								+ ' data-before="0"'
 								+ ' data-after="-' + duration.toString() + '"'
 								+ ' data-points="' + duration.toString() + '"'
@@ -1028,8 +1022,7 @@ function prepareScreen(data) {
 								+ ' data-title="Utilization"'
 								+ ' data-gauge-max-value="100"'
 								+ ' data-gauge-adjust="width"'
-								+ ' data-width="100px"'
-								+ ' data-height="100px"'
+								+ ' data-width="12%"'
 								+ ' data-before="0"'
 								+ ' data-after="-' + duration.toString() + '"'
 								+ ' data-points="' + duration.toString() + '"'
@@ -1087,7 +1080,6 @@ function prepareScreen(data) {
 				+ ' data-units="%"'
 				+ ' data-easypiechart-max-value="100"'
 				+ ' data-width="8%"'
-				+ ' data-height="49px"'
 				+ ' data-before="0"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
@@ -1101,7 +1093,6 @@ function prepareScreen(data) {
 				+ ' data-title="Disk Read"'
 				+ ' data-units="KB / s"'
 				+ ' data-width="10%"'
-				+ ' data-height="49px"'
 				+ ' data-before="0"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
@@ -1114,7 +1105,6 @@ function prepareScreen(data) {
 				+ ' data-title="Disk Write"'
 				+ ' data-units="KB / s"'
 				+ ' data-width="10%"'
-				+ ' data-height="49px"'
 				+ ' data-before="0"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
@@ -1129,7 +1119,6 @@ function prepareScreen(data) {
 				+ ' data-units="%"'
 				+ ' data-gauge-max-value="100"'
 				+ ' data-width="18%"'
-				+ ' data-height="49px"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
 				+ ' data-colors="' + NETDATA.colors[12] + '"'
@@ -1142,7 +1131,6 @@ function prepareScreen(data) {
 				+ ' data-title="IPv4 Inbound"'
 				+ ' data-units="kbps"'
 				+ ' data-width="10%"'
-				+ ' data-height="49px"'
 				+ ' data-before="0"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
@@ -1155,7 +1143,6 @@ function prepareScreen(data) {
 				+ ' data-title="IPv4 Outbound"'
 				+ ' data-units="kbps"'
 				+ ' data-width="10%"'
-				+ ' data-height="49px"'
 				+ ' data-before="0"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
@@ -1172,8 +1159,6 @@ function prepareScreen(data) {
 				+ ' data-units="%"'
 				+ ' data-easypiechart-max-value="100"'
 				+ ' data-width="8%"'
-				+ ' data-height="1"'
-				+ ' data-before="49px"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
 				+ ' data-colors="' + NETDATA.colors[7] + '"'
@@ -1187,7 +1172,6 @@ function prepareScreen(data) {
 				+ ' data-chart-library="easypiechart"'
 				+ ' data-title="Swap Read"'
 				+ ' data-width="100px"'
-				+ ' data-height="100px"'
 				+ ' data-before="0"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
@@ -1199,7 +1183,6 @@ function prepareScreen(data) {
 				+ ' data-chart-library="easypiechart"'
 				+ ' data-title="Swap Write"'
 				+ ' data-width="100px"'
-				+ ' data-height="100px"'
 				+ ' data-before="0"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
@@ -1214,7 +1197,6 @@ function prepareScreen(data) {
 				+ ' data-chart-library="easypiechart"'
 				+ ' data-title="Switches"'
 				+ ' data-width="100px"'
-				+ ' data-height="100px"'
 				+ ' data-before="0"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
@@ -1226,7 +1208,6 @@ function prepareScreen(data) {
 				+ ' data-chart-library="easypiechart"'
 				+ ' data-title="Interrupts"'
 				+ ' data-width="100px"'
-				+ ' data-height="100px"'
 				+ ' data-before="0"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
@@ -1258,8 +1239,7 @@ function prepareScreen(data) {
 							+ ' data-chart-library="gauge"'
 							+ ' data-title="Received"'
 							+ ' data-gauge-adjust="width"'
-							+ ' data-width="100px"'
-							+ ' data-height="100px"'
+							+ ' data-width="12%"'
 							+ ' data-before="0"'
 							+ ' data-after="-' + duration.toString() + '"'
 							+ ' data-points="' + duration.toString() + '"'
@@ -1270,8 +1250,7 @@ function prepareScreen(data) {
 							+ ' data-chart-library="gauge"'
 							+ ' data-title="Sent"'
 							+ ' data-gauge-adjust="width"'
-							+ ' data-width="100px"'
-							+ ' data-height="100px"'
+							+ ' data-width="12%"'
 							+ ' data-before="0"'
 							+ ' data-after="-' + duration.toString() + '"'
 							+ ' data-points="' + duration.toString() + '"'
@@ -1283,8 +1262,7 @@ function prepareScreen(data) {
 							+ ' data-chart-library="gauge"'
 							+ ' data-title="Requests / second"'
 							+ ' data-gauge-adjust="width"'
-							+ ' data-width="100px"'
-							+ ' data-height="100px"'
+							+ ' data-width="12%"'
 							+ ' data-before="0"'
 							+ ' data-after="-' + duration.toString() + '"'
 							+ ' data-points="' + duration.toString() + '"'
@@ -1297,8 +1275,7 @@ function prepareScreen(data) {
 							+ ' data-chart-library="gauge"'
 							+ ' data-title="Connections"'
 							+ ' data-gauge-adjust="width"'
-							+ ' data-width="100px"'
-							+ ' data-height="100px"'
+							+ ' data-width="12%"'
 							+ ' data-before="0"'
 							+ ' data-after="-' + duration.toString() + '"'
 							+ ' data-points="' + duration.toString() + '"'
@@ -1438,12 +1415,12 @@ function prepareScreen(data) {
 
 NETDATA.pause(function() {
 
-	$('#welcomeModal').on('hidden.bs.modal', function (e) {
-		NETDATA.updatedDom();
-	});
-	$('#welcomeModal').on('shown.bs.modal', function (e) {
-		NETDATA.updatedDom();
-	});
+//	$('#welcomeModal').on('hidden.bs.modal', function (e) {
+//		NETDATA.updatedDom();
+//	});
+//	$('#welcomeModal').on('shown.bs.modal', function (e) {
+//		NETDATA.updatedDom();
+//	});
 
 	// download all the charts the server knows
 	NETDATA.chartRegistry.downloadAll(NETDATA.serverDefault, function(data) {