performance improvements

app.js

@@ -157,11 +157,6 @@ api.on('connection', function(spark) {
 		});
 
 		askedForHistory = false;
-
-		client.write({
-			action: 'charts',
-			data: Nodes.getCharts()
-		});
 	});
 
 	spark.on('node-ping', function(data)

public/css/style.css

@@ -277,6 +277,12 @@ table td i {
 table td.peerPropagationChart {
 	padding: 4px 5px !important;
 }
+nodepropagchart {
+	display: inline-block;
+	width: 107px;
+	height: 20px;
+	vertical-align: top;
+}
 
 .table>tbody>tr>td,
 .table>thead>tr>th {

public/js/controllers.js

@@ -132,10 +132,6 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, socket, _, toastr)
 
 					// Init or recover pin
 					$scope.nodes[index].pinned = _.result(_.find(oldNodes, 'id', node.id), 'pinned', false);
-
-					$scope.$apply();
-
-					makePeerPropagationChart($scope.nodes[index]);
 				});
 
 				if($scope.nodes.length > 0)
@@ -144,22 +140,21 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, socket, _, toastr)
 				break;
 
 			case "add":
-				if(addNewNode(data))
+				var index = findIndex({id: data.id});
-					toastr['success']("New node "+ $scope.nodes[findIndex({id: data.id})].info.name +" connected!", "New node!");
-				else
-					toastr['info']("Node "+ $scope.nodes[findIndex({id: data.id})].info.name +" reconnected!", "Node is back!");
 
-				$scope.$apply();
+				if( addNewNode(data) )
-				makePeerPropagationChart($scope.nodes[findIndex({id: data.id})]);
+					toastr['success']("New node "+ $scope.nodes[index].info.name +" connected!", "New node!");
+				else
+					toastr['info']("Node "+ $scope.nodes[index].info.name +" reconnected!", "Node is back!");
 
 				break;
 
 			case "update":
-				if(typeof data.stats.hashrate === 'undefined')
-					data.stats.hashrate = 0;
-
 				var index = findIndex({id: data.id});
 
+				if( _.isUndefined(data.stats.hashrate) )
+					data.stats.hashrate = 0;
+
 				if( !_.isUndefined($scope.nodes[index].stats) ) {
 
 					if( $scope.nodes[index].stats.block.number < data.stats.block.number )
@@ -173,23 +168,22 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, socket, _, toastr)
 						} else {
 							data.stats.block.arrived = best.arrived;
 						}
+
+						$scope.nodes[index].history = data.history;
 					}
 
 					$scope.nodes[index].stats = data.stats;
-					$scope.nodes[index].history = data.history;
-
-					$scope.$apply();
-
-					makePeerPropagationChart($scope.nodes[index]);
 				}
 
 				break;
 
 			case "info":
-				$scope.nodes[findIndex({id: data.id})].info = data.info;
+				var index = findIndex({id: data.id});
 
-				if(_.isUndefined($scope.nodes[findIndex({id: data.id})].pinned))
+				$scope.nodes[index].info = data.info;
-					$scope.nodes[findIndex({id: data.id})].pinned = false;
+
+				if( _.isUndefined($scope.nodes[index].pinned) )
+					$scope.nodes[index].pinned = false;
 
 				break;
 
@@ -200,10 +194,8 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, socket, _, toastr)
 				break;
 
 			case "uncleCount":
-				$scope.uncleCountChart = data;
 				$scope.uncleCount = data[0] + data[1];
-
+				$scope.uncleCountChart = data.reverse();
-				jQuery('.spark-uncles').sparkline($scope.uncleCountChart.reverse(), {type: 'bar', barSpacing: 1});
 
 				break;
 
@@ -214,40 +206,34 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, socket, _, toastr)
 				$scope.difficultyChart = data.difficulty;
 				$scope.blockPropagationChart = data.propagation.histogram;
 				$scope.blockPropagationAvg = data.propagation.avg;
-				$scope.uncleCountChart = data.uncleCount;
 				$scope.uncleCount = data.uncleCount[0] + data.uncleCount[1];
+				$scope.uncleCountChart = data.uncleCount.reverse();
 				$scope.transactionDensity = data.transactions;
 				$scope.gasSpending = data.gasSpending;
 				$scope.miners = data.miners;
 
-				$scope.$apply();
-
 				getMinersNames();
 
-				jQuery('.spark-blocktimes').sparkline($scope.lastBlocksTime, {type: 'bar', tooltipSuffix: ' s'});
-				jQuery('.spark-difficulty').sparkline($scope.difficultyChart, {type: 'bar'});
-				jQuery('.spark-transactions').sparkline($scope.transactionDensity, {type: 'bar'});
-				jQuery('.spark-gasspending').sparkline($scope.gasSpending, {type: 'bar'});
-				jQuery('.spark-uncles').sparkline($scope.uncleCountChart.reverse(), {type: 'bar', barSpacing: 1});
-
 				break;
 
 			case "inactive":
-				if( !_.isUndefined(data.stats) )
+				var index = findIndex({id: data.id});
-					$scope.nodes[findIndex({id: data.id})].stats = data.stats;
 
-				toastr['error']("Node "+ $scope.nodes[findIndex({id: data.id})].info.name +" went away!", "Node connection was lost!");
+				if( !_.isUndefined(data.stats) )
+					$scope.nodes[index].stats = data.stats;
+
+				toastr['error']("Node "+ $scope.nodes[index].info.name +" went away!", "Node connection was lost!");
 
 				break;
 
 			case "latency":
+				var index = findIndex({id: data.id});
+
 				if( !_.isUndefined(data.id) )
-					var node = $scope.nodes[findIndex({id: data.id})];
+					var node = $scope.nodes[index];
 
 				if( !_.isUndefined(node) && !_.isUndefined(node.stats) && !_.isUndefined(node.stats.latency) )
-					$scope.nodes[findIndex({id: data.id})].stats.latency = data.latency;
+					$scope.nodes[index].stats.latency = data.latency;
-
-				$scope.$apply();
 
 				break;
 
@@ -257,7 +243,7 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, socket, _, toastr)
 				break;
 		}
 
-		if(action !== "latency")
+		if( action !== "latency" && action !== "client-ping" )
 		{
 			updateStats();
 		}
@@ -268,34 +254,6 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, socket, _, toastr)
 		return _.findIndex($scope.nodes, search);
 	}
 
-	function makePeerPropagationChart(node)
-	{
-		jQuery('.' + node.id).sparkline(node.history, {
-			type: 'bar',
-			negBarColor: '#7f7f7f',
-			zeroAxis: false,
-			height: 20,
-			barWidth : 2,
-			barSpacing : 1,
-			tooltipSuffix: '',
-			chartRangeMax: 8000,
-			colorMap: jQuery.range_map({
-				'0:1': '#10a0de',
-				'1:1000': '#7bcc3a',
-				'1001:3000': '#FFD162',
-				'3001:7000': '#ff8a00',
-				'7001:': '#F74B4B'
-			}),
-			tooltipFormatter: function (spark, opt, ms) {
-				var tooltip = '<div class="tooltip-arrow"></div><div class="tooltip-inner">';
-				tooltip += $filter('blockPropagationFilter')(ms[0].value, '');
-				tooltip += '</div>';
-
-				return tooltip;
-			}
-		});
-	}
-
 	function getMinersNames()
 	{
 		if( $scope.miners.length > 0 )
@@ -310,7 +268,7 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, socket, _, toastr)
 
 				var name = _.result(_.find(_.pluck($scope.nodes, 'info'), 'coinbase', value.miner), 'name');
 
-				if(typeof name !== 'undefined')
+				if( !_.isUndefined(name) )
 					$scope.miners[key].name = name;
 			});
 		}
@@ -319,12 +277,6 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, socket, _, toastr)
 	function addNewNode(data)
 	{
 		var index = findIndex({id: data.id});
-		if(index < 0)
-		{
-			if(typeof data.stats !== 'undefined' && typeof data.stats.hashrate === 'undefined')
-				data.stats.hashrate = 0;
-
-			data.pinned = false;
 
 		if( _.isUndefined(data.history) )
 		{
@@ -332,31 +284,25 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, socket, _, toastr)
 			_.fill(data.history, -1);
 		}
 
+		if( index < 0 )
+		{
+			if( !_.isUndefined(data.stats) && _.isUndefined(data.stats.hashrate) )
+			{
+				data.stats.hashrate = 0;
+			}
+
+			data.pinned = false;
+
 			$scope.nodes.push(data);
 
 			return true;
 		}
 
-		if( !_.isUndefined($scope.nodes[index].pinned) )
+		data.pinned = ( !_.isUndefined($scope.nodes[index].pinned) ? $scope.nodes[index].pinned : false);
-		{
-			data.pinned = $scope.nodes[index].pinned
-		}
-		else
-		{
-			data.pinned = false;
-		}
 
-		if( !_.isUndefined($scope.nodes[index].pinned) )
+		if( !_.isUndefined($scope.nodes[index].history) )
 		{
-			data.history = $scope.nodes[index].history
+			data.history = $scope.nodes[index].history;
-		}
-		else
-		{
-			if( _.isUndefined(data.history) )
-			{
-				data.history = new Array(40);
-				_.fill(data.history, -1);
-			}
 		}
 
 		$scope.nodes[index] = data;

public/js/directives.js

@@ -2,13 +2,89 @@
 
 /* Directives */
 
-angular.module('netStatsApp.directives', []).
+angular.module('netStatsApp.directives', [])
-	directive('appVersion', ['version', function(version) {
+	.directive('appVersion', ['version', function (version) {
 		return function(scope, elm, attrs) {
 			elm.text(version);
 		};
-}]).
+}])
-	directive('nodemap', ['$compile', function($compile) {
+	.directive('sparkchart', ['$compile', '$filter', function($compile, $filter) {
+		return {
+			restrict: 'EA',
+			scope: {
+				data: '='
+			},
+			link: function (scope, element, attrs)
+			{
+				scope.init = function ()
+				{
+					element.empty();
+
+					jQuery(element[0]).sparkline(scope.data, {
+						type: 'bar',
+						tooltipSuffix: (attrs.tooltipsuffix || '')
+					});
+				}
+
+				scope.init();
+
+				scope.$watch('data', function ()
+				{
+					scope.init();
+				}, true);
+			}
+		};
+}])
+	.directive('nodepropagchart', ['$compile', '$filter', function($compile, $filter) {
+		return {
+			restrict: 'EA',
+			scope: {
+				data: '='
+			},
+			link: function (scope, element, attrs)
+			{
+				var options = {
+					type: 'bar',
+					negBarColor: '#7f7f7f',
+					zeroAxis: false,
+					height: 20,
+					barWidth : 2,
+					barSpacing : 1,
+					tooltipSuffix: '',
+					chartRangeMax: 8000,
+					colorMap: jQuery.range_map({
+						'0:1': '#10a0de',
+						'1:1000': '#7bcc3a',
+						'1001:3000': '#FFD162',
+						'3001:7000': '#ff8a00',
+						'7001:': '#F74B4B'
+					}),
+					tooltipFormatter: function (spark, opt, ms) {
+						var tooltip = '<div class="tooltip-arrow"></div><div class="tooltip-inner">';
+						tooltip += $filter('blockPropagationFilter')(ms[0].value, '');
+						tooltip += '</div>';
+
+						return tooltip;
+					}
+				};
+
+				scope.init = function ()
+				{
+					element.empty();
+
+					jQuery(element[0]).sparkline(scope.data, options);
+				}
+
+				scope.init();
+
+				scope.$watch('data', function ()
+				{
+					scope.init();
+				}, true);
+			}
+		};
+}])
+	.directive('nodemap', ['$compile', function($compile) {
 		return {
 			restrict: 'EA',
 			scope: {
@@ -112,8 +188,8 @@ angular.module('netStatsApp.directives', []).
 				}, true);
 			}
 		};
-}]).
+}])
-	directive('histogram', ['$compile', function($compile) {
+	.directive('histogram', ['$compile', function($compile) {
 		return {
 			restrict: 'EA',
 			scope: {

views/index.jade

@@ -92,14 +92,14 @@ block content
               //- i.icon-time
               span.small-title block time
               //- span.small-value {{ avgBlockTime | avgTimeFilter }}
-              span.big-details.spark-blocktimes
+              sparkchart.big-details.spark-blocktimes(data="lastBlocksTime", tooltipsuffix="s")
 
           div.col-xs-3.stat-holder
             div.big-info.chart.text-info
               //- i.icon-difficulty
               span.small-title difficulty
               //- span.small-value {{ lastDifficulty | number }}
-              span.big-details.spark-difficulty
+              sparkchart.big-details.spark-difficulty(data="difficultyChart")
 
           div.col-xs-3.stat-holder.xpull-right
             div.big-info.chart.xdouble-chart(class="{{ blockPropagationAvg | propagationAvgTimeClass : true }}")
@@ -123,19 +123,19 @@ block content
               span.small-title uncle count #[ ]
                 span.small (25 blocks per bar)
               //- span.small-value {{ bestStats.block.uncles.length }}/{{ uncleCount }}
-              span.big-details.spark-uncles
+              sparkchart.big-details.spark-uncles(data="uncleCountChart")
 
           div.col-xs-3.stat-holder
             div.big-info.chart.text-info
               //- i.icon-uncle
               span.small-title transactions
-              span.big-details.spark-transactions
+              sparkchart.big-details.spark-transactions(data="transactionDensity")
 
           div.col-xs-3.stat-holder
             div.big-info.chart.text-info
               //- i.icon-gasprice
               span.small-title gas spending
-              span.big-details.spark-gasspending
+              sparkchart.big-details.spark-gasspending(data="gasSpending")
 
 
 
@@ -209,5 +209,6 @@ block content
               div.propagationBox
               span {{node.stats.block.propagation | blockPropagationFilter}}
             td.peerPropagationChart(class="{{node.id}}")
+              nodepropagchart(data="node.history")
             td(class="{{ node.stats | propagationNodeAvgTimeClass : bestBlock }}") {{ node.stats | blockPropagationAvgFilter : bestBlock }}
             td(class="{{ node.stats.uptime | upTimeClass : node.stats.active }}") {{ node.stats.uptime | upTimeFilter }}