Merge pull request #93 from cubedro/develop

Added uncle count chart

app.js

@@ -66,6 +66,9 @@ api.on('connection', function(spark) {
 
             var blockPropagationChart = Nodes.blockPropagationChart();
             client.write({action: 'blockPropagationChart', data: blockPropagationChart});
+
+            var uncleCount = Nodes.getUncleCount();
+            client.write({action: 'uncleCount', data: uncleCount});
         }
     });
 
@@ -83,6 +86,9 @@ api.on('connection', function(spark) {
 
             var blockPropagationChart = Nodes.blockPropagationChart();
             client.write({action: 'blockPropagationChart', data: blockPropagationChart});
+
+            var uncleCount = Nodes.getUncleCount();
+            client.write({action: 'uncleCount', data: uncleCount});
         }
     });
 
@@ -124,6 +130,9 @@ client.on('connection', function(spark) {
 
         var blockPropagationChart = Nodes.blockPropagationChart();
         spark.write({action: 'blockPropagationChart', data: blockPropagationChart});
+
+        var uncleCount = Nodes.getUncleCount();
+        spark.write({action: 'uncleCount', data: uncleCount});
     });
 
     spark.on('client-pong', function(data) {

models/collection.js

@@ -103,4 +103,9 @@ Collection.prototype.blockPropagationChart = function()
 	return this._history.getBlockPropagation();
 }
 
+Collection.prototype.getUncleCount = function()
+{
+	return this._history.getUncleCount();
+}
+
 module.exports = Collection;

models/history.js

@@ -1,11 +1,11 @@
 var _ = require('lodash');
 var d3 = require('d3');
 
-var MAX_HISTORY = 1008;
+var MAX_HISTORY = 1000;
 var MAX_PEER_PROPAGATION = 36;
-var MAX_BLOCK_PROPAGATION = 96;
-var MIN_PROPAGATION_RANGE = 1;
+var MIN_PROPAGATION_RANGE = 0;
 var MAX_PROPAGATION_RANGE = 20000;
+var MAX_UNCLE_BINS = 36;
 var MAX_BINS = 40;
 
 var History = function History(data)
@@ -114,7 +114,6 @@ History.prototype.getNodePropagation = function(id)
 		{
 			var index = MAX_PEER_PROPAGATION - 1 - bestBlock + n.height;
 
-
 			if(index > 0)
 			{
 				propagation[index] = _.result(_.find(n.propagTimes, 'node', id), 'propagation', -1);
@@ -141,7 +140,7 @@ History.prototype.getBlockPropagation = function()
 	});
 
 	var x = d3.scale.linear()
-		.domain([0, 20000])
+		.domain([MIN_PROPAGATION_RANGE, MAX_PROPAGATION_RANGE])
 		.interpolate(d3.interpolateRound);
 
 	var data = d3.layout.histogram()
@@ -150,13 +149,37 @@ History.prototype.getBlockPropagation = function()
 		(propagation);
 
 	var freqCum = 0;
-	var histo = data.map(function(val) {
+	var histogram = data.map(function(val) {
 		freqCum += val.length;
 		var cumPercent = (freqCum / Math.max(1, propagation.length));
 		return {x: val.x, dx: val.dx, y: val.y, frequency: val.length, cumulative: freqCum, cumpercent: cumPercent};
 	});
 
-	return histo;
+	return histogram;
+}
+
+History.prototype.getUncleCount = function(id)
+{
+	var uncles = _(this._items)
+		.sortByOrder('height', false)
+		.map(function(item)
+		{
+			return item.block.uncles.length;
+		})
+		.value();
+
+	console.log(uncles);
+
+	var uncleBins = _.fill(Array(MAX_UNCLE_BINS), 0);
+
+	var sumMapper = function(array, key) {
+		uncleBins[key] = _.sum(array);
+		return _.sum(array);
+	};
+
+	_.map(_.chunk(uncles, MAX_BINS), sumMapper);
+
+	return uncleBins;
 }
 
 History.prototype.history = function()

public/js/controllers.js

@@ -14,6 +14,7 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 	$scope.lastDifficulty = 0;
 	$scope.upTimeTotal = 0;
 	$scope.avgBlockTime = 0;
+	$scope.unclesInLast = 0;
 	$scope.bestStats = {};
 
 	$scope.lastBlocksTime = [];
@@ -25,6 +26,7 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 	$scope.nodes = [];
 	$scope.map = [];
 	$scope.blockPropagationChart = [];
+	$scope.uncleCount = [];
 
 	$scope.latency = 0;
 
@@ -129,6 +131,14 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 
 				break;
 
+			case "uncleCount":
+				$scope.uncleCount = data;
+				$scope.unclesInLast = data[0];
+
+				jQuery('.spark-uncles').sparkline($scope.uncleCount.reverse(), {type: 'bar'});
+
+				break;
+
 			case "inactive":
 				$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!");

public/js/directives.js

@@ -85,7 +85,7 @@ angular.module('netStatsApp.directives', []).
 			link: function(scope, element, attrs) {
 				var margin = {top: 0, right: 0, bottom: 0, left: 0};
 				var width = 280 - margin.left - margin.right,
-					height = 173 - margin.top - margin.bottom;
+					height = 50 - margin.top - margin.bottom;
 
 				var TICKS = 40;
 
@@ -111,7 +111,7 @@ angular.module('netStatsApp.directives', []).
 				var yAxis = d3.svg.axis()
 					.scale(y)
 					.orient("left")
-					.ticks(4)
+					.ticks(3)
 					.tickFormat(d3.format("%"));
 
 				var line = d3.svg.line()
@@ -124,7 +124,7 @@ angular.module('netStatsApp.directives', []).
 					.offset([10, 0])
 					.direction('s')
 					.html(function(d) {
-						return '<div class="tooltip-arrow"></div><div class="tooltip-inner"><b>' + (d.x/1000) + 's - ' + ((d.x + d.dx)/1000) + 's</b><div class="small">Percent: <b>' + Math.round(d.y * 100) + '%</b>' + '<br>Frequency: <b>' + d.frequency + '</b><br>Cumulative: <b>' + Math.floor(d.cumpercent*100) + '%</b></div></div>';
+						return '<div class="tooltip-arrow"></div><div class="tooltip-inner"><b>' + (d.x/1000) + 's - ' + ((d.x + d.dx)/1000) + 's</b><div class="small">Percent: <b>' + Math.round(d.y * 100) + '%</b>' + '<br>Frequency: <b>' + d.frequency + '</b><br>Cumulative: <b>' + Math.round(d.cumpercent*100) + '%</b></div></div>';
 					})
 
 				scope.init = function()

views/index.jade

@@ -71,10 +71,15 @@ block content
               span.big-details.spark-difficulty
 
           div.col-xs-4.stat-holder.pull-right
-            div.big-info.chart.double-chart
+            div.big-info.chart.xdouble-chart
               span.small-title block propagation
               histogram.big-details.d3-blockpropagation(data="blockPropagationChart")
 
+          div.col-xs-4.stat-holder
+            div.big-info.chart
+              span.small-title uncle count
+              span.big-details.spark-uncles
+
           div.col-xs-4.stat-holder
             div.big-info.chart
               span.small-title transactions