added difficulty & transactions charts

public/css/style.css

@@ -35,7 +35,10 @@ body {
 }
 
 .big-info.chart {
-	padding-left: 15px;
+	padding-left: 14px;
+	padding-right: 14px;
+	-webkit-box-sizing: border-box
+	box-sizing: border-box;
 }
 
 .big-info span.big-details {
@@ -57,8 +60,8 @@ body {
 .jqsfield {
 	position: relative;
 	padding: 5px 0;
-	width: 40px;
-	left: -20px;
+	width: 60px;
+	left: -30px;
 	word-wrap: wrap;
 	text-align: center;
 }

public/js/controllers.js

@@ -16,6 +16,8 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 	$scope.avgBlockTime = 0;
 
 	$scope.lastBlocksTime = [];
+	$scope.difficultyChange = [];
+	$scope.transactionDensity = [];
 
 	$scope.nodes = [];
 	$scope.map = [];
@@ -143,6 +145,18 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 
 			jQuery('.spark-blocktimes').sparkline($scope.lastBlocksTime, {type: 'bar', tooltipSuffix: 's'});
 
+			$scope.difficultyChange = _.max($scope.nodes, function(node) {
+				return parseInt(node.stats.block.number);
+			}).stats.difficulty;
+
+			jQuery('.spark-difficulty').sparkline($scope.difficultyChange, {type: 'bar'});
+
+			$scope.transactionDensity = _.max($scope.nodes, function(node) {
+				return parseInt(node.stats.block.number);
+			}).stats.txDensity;
+
+			jQuery('.spark-transactions').sparkline($scope.transactionDensity, {type: 'bar'});
+
 			$scope.map = _.map($scope.nodes, function(node) {
 				if(node.geo != null)
 					return {

public/js/script.js

@@ -10,7 +10,8 @@
 	$.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"><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',
 		'12:19': '#10a0de',

views/index.jade

@@ -61,14 +61,25 @@ block content
 
         div.clearfix
 
-      div.col-xs.12
+      div.col-xs-12
+        div.row
           div.col-lg-8(style="padding-top: 30px;")
             div.col-xs-3.stat-holder
-            div.row.big-info.chart.nodesactive(class="{{ nodesActive | nodesActiveClass : nodesTotal }}")
+              div.row.big-info.chart
                 span.small-title block time
                 span.big-details.spark-blocktimes {{ lastBlocksTime.join(',') }}
 
-          div.clearfix
+            div.col-xs-3.stat-holder
+              div.row.big-info.chart
+                span.small-title difficulty
+                span.big-details.spark-difficulty {{ difficultyChange.join(',') }}
+
+            div.col-xs-3.stat-holder
+              div.row.big-info.chart
+                span.small-title transactions
+                span.big-details.spark-transactions {{ transactionDensity.join(',') }}
+
+            //- div.clearfix
 
           div.col-lg-4
             div.col-xs-12