tdf#107278 Beautification of graphs

- better looking axis
- smooth transition for axis and data path

Change-Id: I419a1e9a0691fc4b6a396a970a438431aa724d9c
Reviewed-on: https://gerrit.libreoffice.org/41313
Reviewed-by: pranavk <pranavk@collabora.co.uk>
Tested-by: pranavk <pranavk@collabora.co.uk>

2 files changed, 62 insertions, 16 deletions

diff --git a/loleaflet/dist/admin/bootstrap/dashboard.css b/loleaflet/dist/admin/bootstrap/dashboard.css
index 82fb2f5f2..1f627f0e1 100644
--- a/loleaflet/dist/admin/bootstrap/dashboard.css
+++ b/loleaflet/dist/admin/bootstrap/dashboard.css
@@ -140,10 +140,20 @@ tr:hover .userContainer .dropdown-menu, td:hover .docContainer .dropdown-menu{
 /*
  * Graph view buttons
  */
-
 .nav-tabs > li.active > a{
   background-color: #f5f5f5;
 }
 .graph-content {
   background-color: #f5f5f5;
+}
+
+.axis path, .axis line{
+  fill: none;
+  stroke: grey;
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+
+path {
+  stroke-width: 1;
 }
\ No newline at end of file
diff --git a/loleaflet/src/admin/AdminSocketAnalytics.js b/loleaflet/src/admin/AdminSocketAnalytics.js
index 72d5f2757..f22865960 100644
--- a/loleaflet/src/admin/AdminSocketAnalytics.js
+++ b/loleaflet/src/admin/AdminSocketAnalytics.js
@@ -120,12 +120,17 @@ var AdminSocketAnalytics = AdminSocketBase.extend({
 		d3XAxis = d3.svg.axis()
 			.scale(xScale)
 			.tickFormat(function(d) {
-				d = Math.abs(d / 1000);
+				var d = Math.abs(d / 1000), sUnit;
 				var units = ['s', 'min', 'hr'];
 				for (var i = 0; i < units.length && Math.abs(d) >= 60; i++) {
+					sUnit = parseInt(d % 60);
 					d = parseInt(d / 60);
 				}
-				return parseInt(d) + units[i] + ' ago';
+				if (i !== 0 && sUnit !== 0) {
+					return d + units[i][0] + ' ' + sUnit + units[i-1][0];
+				}
+				else
+					return d + units[i];
 			});
 
 		d3Line = d3.svg.line()
@@ -236,12 +241,12 @@ var AdminSocketAnalytics = AdminSocketBase.extend({
 		}
 
 		vis.append('svg:g')
-		.attr('class', 'x-axis')
+		.attr('class', 'x-axis axis')
 		.attr('transform', 'translate(0,' + (this._graphHeight - this._graphMargins.bottom) + ')')
 		.call(xAxis);
 
 		vis.append('svg:g')
-		.attr('class', 'y-axis')
+		.attr('class', 'y-axis axis')
 		.attr('transform', 'translate(' + this._graphMargins.left + ',0)')
 		.call(yAxis);
 
@@ -251,7 +256,7 @@ var AdminSocketAnalytics = AdminSocketBase.extend({
 				.attr('d', line(data))
 				.attr('class', 'line')
 				.attr('stroke', 'blue')
-				.attr('stroke-width', 2)
+				.attr('stroke-width', 1)
 				.attr('fill', 'none');
 		}
 		else if (option === 'net') {
@@ -260,29 +265,54 @@ var AdminSocketAnalytics = AdminSocketBase.extend({
 				.attr('d', this._d3NetSentLine(this._sentAvgStats))
 				.attr('class', 'lineSent')
 				.attr('stroke', 'red')
-				.attr('stroke-width', 2)
+				.attr('stroke-width', 1)
 				.attr('fill', 'none');
 
 			vis.append('svg:path')
 				.attr('d', this._d3NetRecvLine(this._recvAvgStats))
 				.attr('class', 'lineRecv')
 				.attr('stroke', 'green')
-				.attr('stroke-width', 2)
+				.attr('stroke-width', 1)
 				.attr('fill', 'none');
 		}
 
 	},
 
 	_addNewData: function(oldData, newData, option) {
-		var size;
-		if (option === 'mem')
+		var size, graphName, line, elemSize;
+		elemSize = this._graphWidth - this._graphMargins['left'] - this._graphMargins['right'];
+
+		if (option === 'mem') {
 			size = this._memStatsSize;
-		else if (option === 'cpu')
+			graphName = '#MemVisualisation';
+			line = 'line';
+		}
+		else if (option === 'cpu') {
 			size = this._cpuStatsSize;
+			graphName = '#CpuVisualisation';
+			line = 'line';
+		}
+		else if (option === 'sent_avg') {
+			size = this._netStatsSize - this._netAvgSize + 1;
+			graphName = '#NetVisualisation';
+			line = 'lineSent';
+		}
+		else if (option === 'recv_avg') {
+			size = this._netStatsSize - this._netAvgSize + 1;
+			graphName = '#NetVisualisation';
+			line = 'lineRecv';
+		}
 		else if (option === 'sent' || option === 'recv')
 			size = this._netStatsSize;
-		else if (option === 'sent_avg' || option === 'recv_avg')
-			size = this._netStatsSize - this._netAvgSize + 1;
+
+		if (graphName === '#MemVisualisation' || graphName === '#CpuVisualisation' ||
+				graphName === '#NetVisualisation') {
+			d3.select(graphName)
+			.select('.' + line)
+			.attr('transform', 'translate(' + elemSize/size + ')')
+			.transition()
+			.attr('transform', 'translate(' + 0 + ')');
+		}
 
 		// make a space for new data
 		for (var i = oldData.length - 1; i > 0; i--) {
@@ -309,7 +339,9 @@ var AdminSocketAnalytics = AdminSocketBase.extend({
 		svg.select('.x-axis')
 		.call(this._d3MemXAxis);
 
-		svg.select('.y-axis')
+		svg.transition()
+		.duration(500)
+		.select('.y-axis')
 		.call(this._d3MemYAxis);
 	},
 
@@ -324,7 +356,9 @@ var AdminSocketAnalytics = AdminSocketBase.extend({
 		svg.select('.x-axis')
 		.call(this._d3CpuXAxis);
 
-		svg.select('.y-axis')
+		svg.transition()
+		.select('.y-axis')
+		.duration(500)
 		.call(this._d3CpuYAxis);
 	},
 
@@ -341,7 +375,9 @@ var AdminSocketAnalytics = AdminSocketBase.extend({
 		svg.select('.x-axis')
 		.call(this._d3NetXAxis);
 
-		svg.select('.y-axis')
+		svg.transition()
+		.select('.y-axis')
+		.duration(500)
 		.call(this._d3NetYAxis);
 	},