added last blocks miners chart

public/css/style.css

@@ -10,19 +10,35 @@ body {
 	-moz-font-smoothing: antialiased;
 }
 
-.stat-holder {
+.bg-success {
+	background: #7bcc3a;
+}
 
+.bg-info {
+	background: #10a0de;
+}
+
+.bg-warning {
+	background: #FFD162;
+}
+
+.bg-danger {
+	background: #F74B4B;
+}
+
+.container-fluid {
+	padding-left: 30px;
+	padding-right: 30px;
+}
+
+.stat-holder {
+	background: #090909;
+	border: 1px solid rgba(255,255,255,0.05);
 }
 
 .big-info {
 	padding-bottom: 15px;
 	padding-top: 15px;
-	background: #090909;
-	border: 1px solid rgba(255,255,255,0.05);
-}
-
-.stats-boxes .big-info {
-	margin-right: -30px;
 }
 
 .big-info .icon-full-width i {
@@ -32,27 +48,22 @@ body {
 	font-size: 70px;
 	line-height: 70px;
 	margin-right: 15px;
+	margin-left: -15px;
 }
 
 .big-info span {
 	opacity: 0.7;
 }
 
-.big-info span.small-title {
+.big-info span.small-title,
+.big-info div.small-title-miner {
 	display: block;
 	font-weight: 700;
 	font-size: 14px;
 	line-height: 20px;
 	letter-spacing: 1px;
 	text-transform: uppercase;
-	color: #aaa !important;
+	color: #aaa;
-}
-
-.big-info.chart {
-	padding-left: 14px;
-	padding-right: 14px;
-	-webkit-box-sizing: border-box
-	box-sizing: border-box;
 }
 
 .big-info span.big-details {
@@ -67,6 +78,45 @@ body {
 	padding-top: 15px;
 }
 
+.big-info.chart {
+	height: 120px;
+	-webkit-box-sizing: border-box
+	box-sizing: border-box;
+}
+
+.big-info.chart.double-chart {
+	height: 242px;
+}
+
+.blocks-holder {
+	padding-top: 5px;
+}
+
+.blocks-holder div.small-title-miner {
+	font-size: 12px;
+	font-weight: normal;
+	letter-spacing: 0px;
+	text-transform: none;
+	white-space: nowrap;
+	-webkit-font-smoothing: subpixel-antialiased;
+	-moz-font-smoothing: subpixel-antialiased;
+}
+
+.blocks-holder .block-count {
+	float: right;
+	line-height: 18px;
+	color: #aaa;
+}
+
+.blocks-holder .block {
+	width: 6px;
+	height: 6px;
+	margin: 2px 1px 6px 1px;
+	float: left;
+	-webkit-border-radius: 1px;
+	border-radius: 1px;
+}
+
 .jqstooltip {
 
 }
@@ -195,6 +245,6 @@ table td {
 	}*/
 }
 
-.ng-cloak {
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
   display: none !important;
 }

public/js/controllers.js

@@ -14,11 +14,13 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 	$scope.lastDifficulty = 0;
 	$scope.upTimeTotal = 0;
 	$scope.avgBlockTime = 0;
+	$scope.bestStats = {};
 
 	$scope.lastBlocksTime = [];
 	$scope.difficultyChange = [];
 	$scope.transactionDensity = [];
 	$scope.gasSpending = [];
+	$scope.miners = [];
 
 	$scope.nodes = [];
 	$scope.map = [];
@@ -131,39 +133,24 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 			if(bestBlock > $scope.bestBlock)
 			{
 				$scope.bestBlock = bestBlock;
-
+				$scope.bestStats = _.max($scope.nodes, function(node) {
-				$scope.lastBlock = _.max($scope.nodes, function(node) {
 					return parseInt(node.stats.block.number);
-				}).stats.block.received;
+				}).stats;
 
-				$scope.lastBlocksTime = _.max($scope.nodes, function(node) {
+				$scope.lastBlock = $scope.bestStats.block.received;
-					return parseInt(node.stats.block.number);
+				$scope.lastBlocksTime = $scope.bestStats.blockTimes;
-				}).stats.blockTimes;
+				$scope.difficultyChange = $scope.bestStats.difficulty;
+				$scope.transactionDensity = $scope.bestStats.txDensity;
+				$scope.gasSpending = $scope.bestStats.gasSpending;
+				$scope.miners = $scope.bestStats.miners;
+
+				$scope.getNumber = function(num) {
+					return new Array(num);
+				}
 
 				jQuery('.spark-blocktimes').sparkline($scope.lastBlocksTime.reverse(), {type: 'bar', tooltipSuffix: 's'});
-
-				$scope.difficultyChange = _.max($scope.nodes, function(node) {
-					return parseInt(node.stats.block.number);
-				}).stats.difficulty;
-
-				$scope.difficultyChange.pop();
-
 				jQuery('.spark-difficulty').sparkline($scope.difficultyChange.reverse(), {type: 'bar'});
-
-				$scope.transactionDensity = _.max($scope.nodes, function(node) {
-					return parseInt(node.stats.block.number);
-				}).stats.txDensity;
-
-				$scope.transactionDensity.pop();
-
 				jQuery('.spark-transactions').sparkline($scope.transactionDensity.reverse(), {type: 'bar'});
-
-				$scope.gasSpending = _.max($scope.nodes, function(node) {
-					return parseInt(node.stats.block.number);
-				}).stats.gasSpending;
-
-				$scope.gasSpending.pop();
-
 				jQuery('.spark-gasspending').sparkline($scope.gasSpending.reverse(), {type: 'bar'});
 			}
 

public/js/filters.js

@@ -189,7 +189,26 @@ angular.module('netStatsApp.filters', [])
 .filter('bubbleClass', function() {
 	return function(node, bestBlock) {
 		return mainClass(node, bestBlock).replace('text-', '');
-	}
+	};
+})
+.filter('minerNameFilter', function() {
+	return function(name) {
+		return name.replace('0x', '');
+	};
+})
+.filter('minerBlocksClass', function() {
+	return function(blocks) {
+		if(blocks <= 6)
+			return 'bg-success';
+
+		if(blocks <= 12)
+			return 'bg-info';
+
+		if(blocks <= 18)
+			return 'bg-warning';
+
+		return 'bg-danger';
+	};
 });
 
 function mainClass(node, bestBlock)

public/js/script.js

@@ -10,7 +10,6 @@
 	$.fn.sparkline.defaults.bar.barSpacing = 2;
 	$.fn.sparkline.defaults.bar.tooltipClassname = 'jqstooltip';
 	$.fn.sparkline.defaults.bar.tooltipOffsetX = 0;
-	// $.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('<div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner"><span style="color: {{color}}">&#9679;</span><br>{{prefix}}{{value}}{{suffix}}</div>');
 	$.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('<div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">{{prefix}}{{value}}{{suffix}}</div>');
 	$.fn.sparkline.defaults.bar.colorMap = $.range_map({
 		'1:12': '#7bcc3a',

views/index.jade

@@ -3,15 +3,8 @@ extends layout
 block content
   div.container-fluid(ng-controller='StatsCtrl')
     div.row(ng-cloak)
-      div.col-xs-12
-        //- div.col-sm-12
-          //- h1= title
-          //- p Welcome to #{title}
-
-        //- div.clearfix
-
       div.col-xs-2.stat-holder
-          div.row.big-info.nodesactive(class="{{ nodesActive | nodesActiveClass : nodesTotal }}")
+        div.big-info.nodesactive(class="{{ nodesActive | nodesActiveClass : nodesTotal }}")
           div.pull-left.icon-full-width
             i.icon-node
           div.pull-left
@@ -19,7 +12,7 @@ block content
             span.big-details {{nodesActive}}/{{nodesTotal}}
           div.clearfix
       div.col-xs-2.stat-holder
-          div.row.big-info.uptime(class="{{ upTimeTotal | upTimeClass }}")
+        div.big-info.uptime(class="{{ upTimeTotal | upTimeClass }}")
           div.pull-left.icon-full-width
             i.icon-bulb
           div.pull-left
@@ -27,7 +20,7 @@ block content
             span.big-details {{ upTimeTotal | upTimeFilter }}
           div.clearfix
       div.col-xs-2.stat-holder
-          div.row.big-info.difficulty.text-info
+        div.big-info.difficulty.text-info
           div.pull-left.icon-full-width
             i.icon-difficulty
           div.pull-left
@@ -35,7 +28,7 @@ block content
             span.big-details {{ lastDifficulty }}
           div.clearfix
       div.col-xs-2.stat-holder
-          div.row.big-info.bestblock.text-info
+        div.big-info.bestblock.text-info
           div.pull-left.icon-full-width
             i.icon-block
           div.pull-left
@@ -43,7 +36,7 @@ block content
             span.big-details {{"#" + bestBlock}}
           div.clearfix
       div.col-xs-2.stat-holder
-          div.row.big-info.blocktime(class="{{ lastBlock | timeClass }}")
+        div.big-info.blocktime(class="{{ lastBlock | timeClass }}")
           div.pull-left.icon-full-width
             i.icon-time
           div.pull-left
@@ -51,7 +44,7 @@ block content
             span.big-details {{ lastBlock | blockTimeFilter }}
           div.clearfix
       div.col-xs-2.stat-holder
-          div.row.big-info.avgblocktime(class="{{ avgBlockTime | timeClass }}")
+        div.big-info.avgblocktime(class="{{ avgBlockTime | timeClass }}")
           div.pull-left.icon-full-width
             i.icon-gas
           div.pull-left
@@ -61,7 +54,6 @@ block content
 
       div.clearfix
 
-      div.col-xs-12
     div.row
       div.col-xs-4.stats-boxes(style="padding-top: 30px;")
         div.row
@@ -85,7 +77,23 @@ block content
               span.small-title gas spending
               span.big-details.spark-gasspending
 
-          div.col-xs-4
+      div.col-xs-2.stats-boxes(style="padding-top: 30px;")
+        div.row
+          div.col-xs-12.stat-holder
+            div.big-info.chart.double-chart
+              span.small-title last blocks miners
+              div.blocks-holder(ng-repeat='miner in miners', data-toggle="tooltip", data-placement="right", title="{{miner.blocks}}")
+                div.block-count ({{miner.blocks}})
+                div.small-title-miner {{miner.miner | minerNameFilter}}
+                div.block(ng-repeat="i in getNumber(miner.blocks) track by $index", class="{{miner.blocks | minerBlocksClass}}")
+                div.clearfix
+
+      div.col-xs-2.stats-boxes(style="padding-top: 30px;")
+        div.row
+          //- div.col-xs-12.stat-holder
+          //-   div.big-info.chart
+          //-     span.small-title miners
+          //-     span.big-details test
 
       div.col-xs-4
         div.col-xs-12
@@ -93,9 +101,7 @@ block content
 
       div.clearfix
 
-      div.col-xs-12
+    div.row
-        //- h1 Nodes in detail
-
       table.table.table-striped
         thead
           tr.text-info