added second top row

public/css/style.css

@@ -7,14 +7,14 @@ body {
 	min-width: 1900px;
 	font-smooth: auto;
 	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 table td {
 	font-size: 14px;
 	white-space: nowrap !important;
 	-webkit-font-smoothing: subpixel-antialiased;
-	-moz-font-smoothing: subpixel-antialiased;
+	-moz-osx-font-smoothing: auto;
 }
 
 .propagationBox {
@@ -116,10 +116,12 @@ div.small-title-miner {
 
 span.small-title span.small {
 	font-size: 11px;
-	letter-spacing: -.5px;
+	font-weight: 600;
+	line-height: 16px;
+	letter-spacing: 0px;
 	color: #666;
 	-webkit-font-smoothing: subpixel-antialiased;
-	-moz-font-smoothing: subpixel-antialiased;
+	-moz-osx-font-smoothing: auto;
 }
 
 .big-info .big-details {
@@ -156,7 +158,7 @@ span.small-title span.small {
 
 .blocks-holder {
 	-webkit-font-smoothing: subpixel-antialiased;
-	-moz-font-smoothing: subpixel-antialiased;
+	-moz-osx-font-smoothing: auto;
 }
 
 .blocks-holder div.small-title-miner {
@@ -194,15 +196,28 @@ span.small-title span.small {
 	margin-right: 0px;
 }
 
-.page-latency {
+.second-row .box {
-	position: absolute;
+	height: 40px;
-	top: 395px;
+	line-height: 24px !important;
-	left: 15px;
+	padding: 5px 15px;
 }
 
-.page-latency .small-title {
+.second-row .box i {
-	letter-spacing: 0px;
+	position: relative;
-	opacity: .8;
+	top: 2px;
+	left: -3px;
+	font-size: 24px;
+	-webkit-font-smoothing: subpixel-antialiased;
+	-moz-osx-font-smoothing: auto;
+	margin-right: 7px;
+	float: left;
+}
+
+.second-row .box .small-value {
+	font-weight: 300;
+	-webkit-font-smoothing: subpixel-antialiased;
+	-moz-osx-font-smoothing: auto;
+	float: right;
 }
 
 .tableHolder {
@@ -211,7 +226,7 @@ span.small-title span.small {
 }
 table i {
 	-webkit-font-smoothing: subpixel-antialiased;
-	-moz-font-smoothing: subpixel-antialiased;
+	-moz-osx-font-smoothing: auto;
 }
 
 table th,
@@ -402,7 +417,7 @@ svg .axis text {
 	font-family: "Source Sans Pro";
 	font-weight: 700;
 	-webkit-font-smoothing: subpixel-antialiased;
-	-moz-font-smoothing: subpixel-antialiased;
+	-moz-osx-font-smoothing: auto;
 }
 
 svg .y.axis .tick:first-child text {

public/js/controllers.js

@@ -9,12 +9,6 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 
 	$scope.nodesTotal = 0;
 	$scope.nodesActive = 0;
-	$scope.bestBlockObject = {
-		number: 0,
-		hash: "0x?",
-		transactions: [],
-		uncles: []
-	}
 	$scope.bestBlock = 0;
 	$scope.lastBlock = 0;
 	$scope.lastDifficulty = 0;
@@ -219,12 +213,11 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 
 			var bestBlock = _.max($scope.nodes, function(node) {
 				return parseInt(node.stats.block.number);
-			}).stats.block;
+			}).stats.block.number;
 
-			if(bestBlock.number > $scope.bestBlock)
+			if(bestBlock > $scope.bestBlock)
 			{
-				$scope.bestBlockObject = bestBlock;
+				$scope.bestBlock = bestBlock;
-				$scope.bestBlock = bestBlock.number;
 				$scope.bestStats = _.max($scope.nodes, function(node) {
 					return parseInt(node.stats.block.number);
 				}).stats;
@@ -245,7 +238,7 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 				jQuery('.spark-gasspending').sparkline($scope.gasSpending.reverse(), {type: 'bar'});
 			}
 
-			$scope.lastDifficulty = $scope.bestBlockObject.difficulty;
+			$scope.lastDifficulty = $scope.bestStats.block.difficulty;
 
 			$scope.avgBlockTime = _.max($scope.nodes, function(node) {
 				return parseInt(node.stats.block.number);

public/js/directives.js

@@ -60,19 +60,9 @@ angular.module('netStatsApp.directives', []).
 
 				scope.init();
 
-				window.onresize = function() {
-					scope.$apply();
-				};
-
 				scope.$watch('data', function() {
 					scope.map.bubbles(scope.data, bubbleConfig);
 				}, true);
-
-				scope.$watch(function() {
-					return angular.element(window)[0].innerWidth;
-				}, function() {
-					scope.init();
-				});
 			}
 		};
 }]).

public/js/filters.js

@@ -100,6 +100,32 @@ angular.module('netStatsApp.filters', [])
 		return (best - current.block.number <= 1 ? 'text-success' : (best - current.block.number > 1 && best - current.block.number < 4 ? 'text-warning' : 'text-danger'));
 	};
 })
+.filter('gasPriceFilter', ['$filter', function(filter) {
+	var numberFilter = filter('number')
+	return function(price) {
+		console.log("--------------------");
+		console.log(price.length);
+		if(price.length < 4)
+			return price + " wei";
+
+		if(price.length < 7)
+			return (price/1000) + " kwei";
+
+		if(price.length < 10)
+			return (price/1000000) + " mwei";
+
+		if(price.length < 13)
+			return (price/1000000000) + " gwei";
+
+		if(price.length < 16)
+			return (price/1000000000000) + " szabo";
+
+		if(price.length < 19)
+			return (price.substr(0, price.length - 15)) + " finney";
+
+		return numberFilter(price.substr(0, price.length - 18)) + " ether";
+	}
+}])
 .filter('gasFilter', function() {
 	return function(gas) {
 		return (typeof gas !== 'undefined' ? parseInt(gas) : '?');

views/index.jade

@@ -2,9 +2,6 @@ extends layout
 
 block content
   div.container-fluid(ng-controller='StatsCtrl')
-    div.page-latency(ng-cloak)
-      span.small-title page latency:#[ ]
-      span(class="{{ {active: true, latency: latency} | latencyClass }}") {{latency}} ms
     div.row(ng-cloak)
       div.col-xs-2.stat-holder
         div.big-info.nodesactive(class="{{ nodesActive | nodesActiveClass : nodesTotal }}")
@@ -45,7 +42,7 @@ block content
           div.pull-left
             span.small-title uncles #[ ]
               span.small (current / last 50)
-            span.big-details {{ bestBlockObject.uncles.length }}/{{ uncleCount }}
+            span.big-details {{ bestStats.block.uncles.length }}/{{ uncleCount }}
           div.clearfix
       div.col-xs-2.stat-holder
         div.big-info.blocktime(class="{{ lastBlock | timeClass : true }}")
@@ -63,46 +60,55 @@ block content
             span.small-title avg block time
             span.big-details {{ avgBlockTime | avgTimeFilter }}
           div.clearfix
-
       div.clearfix
 
+
     div.row(ng-cloak)
-      div.col-xs-6.stats-boxes(style="padding-top: 30px;")
+      div.col-xs-8.stats-boxes(style="padding-top: 0px;")
+        div.row.second-row(ng-cloak)
+          //- div.col-xs-3.stat-holder.box
+          //-   div.active-nodes(class="{{ nodesActive | nodesActiveClass : nodesTotal }}")
+          //-     i.icon-node
+          //-     span.small-title active nodes
+          //-     span.small-value {{nodesActive}}/{{nodesTotal}}
+          div.col-xs-3.stat-holder.box
+            div.difficulty.text-info
+              i.icon-difficulty
+              span.small-title difficulty
+              span.small-value {{ lastDifficulty | number }}
+          div.col-xs-3.stat-holder.box
+            div.gasprice.text-info
+              i.icon-difficulty
+              span.small-title gas price
+              span.small-value {{ bestStats.gasPrice.toString() | gasPriceFilter }}
+          div.col-xs-3.stat-holder.box
+            div.page-latency(class="{{ {active: true, latency: latency} | latencyClass }}")
+              i.icon-gas
+              span.small-title page latency
+              span.small-value {{latency}} ms
+          div.col-xs-3.stat-holder.box
+            div.uptime(class="{{ upTimeTotal | upTimeClass : true }}")
+              i.icon-bulb
+              span.small-title uptime
+              span.small-value {{ upTimeTotal | upTimeFilter }}
+
         div.row
-          div.col-xs-4.stat-holder
+          div.col-xs-3.stat-holder
             div.big-info.chart
               span.small-title block time
               span.big-details.spark-blocktimes
 
-          div.col-xs-4.stat-holder
+          div.col-xs-3.stat-holder
             div.big-info.chart
               span.small-title difficulty
               span.big-details.spark-difficulty
 
-          div.col-xs-4.stat-holder.pull-right
+          div.col-xs-3.stat-holder.xpull-right
             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.col-xs-3.stat-holder.pull-right
-            div.big-info.chart
-              span.small-title uncle count #[ ]
-                span.small (25 blocks per bar)
-              span.big-details.spark-uncles
-
-          div.col-xs-4.stat-holder
-            div.big-info.chart
-              span.small-title transactions
-              span.big-details.spark-transactions
-
-          div.col-xs-4.stat-holder
-            div.big-info.chart
-              span.small-title gas spending
-              span.big-details.spark-gasspending
-
-      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}}")
@@ -111,9 +117,27 @@ block content
                 div.block(ng-repeat="i in getNumber(miner.blocks) track by $index", class="{{miner.blocks | minerBlocksClass}}")
                 div.clearfix
 
+          div.col-xs-3.stat-holder
+            div.big-info.chart
+              span.small-title uncle count #[ ]
+                span.small (25 blocks per bar)
+              span.big-details.spark-uncles
+
+          div.col-xs-3.stat-holder
+            div.big-info.chart
+              span.small-title transactions
+              span.big-details.spark-transactions
+
+          div.col-xs-3.stat-holder
+            div.big-info.chart
+              span.small-title gas spending
+              span.big-details.spark-gasspending
+
+
+
       div.col-xs-4
-        div.col-xs-12
+        //- div.col-xs-12
-          nodemap#mapHolder(data="map")
+        nodemap#mapHolder(data="map")
 
       div.clearfix