From 0d584e1562b881aa6e1332ac4d3569dd9e3e6403 Mon Sep 17 00:00:00 2001
From: cubedro <contact@siteshop.ro>
Date: Sat, 28 Mar 2015 01:27:40 +0200
Subject: [PATCH] added difficulty & transactions charts

---
 public/css/style.css     |  9 ++++++---
 public/js/controllers.js | 14 ++++++++++++++
 public/js/script.js      |  3 ++-
 views/index.jade         | 31 +++++++++++++++++++++----------
 4 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 09b0363..df14802 100644
--- a/public/css/style.css
+++ b/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;
 }
diff --git a/public/js/controllers.js b/public/js/controllers.js
index 619d7df..b7a82f2 100644
--- a/public/js/controllers.js
+++ b/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 {
diff --git a/public/js/script.js b/public/js/script.js
index 39616c7..982088d 100644
--- a/public/js/script.js
+++ b/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',
diff --git a/views/index.jade b/views/index.jade
index ea1004d..2ae21f9 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -61,18 +61,29 @@ block content
 
         div.clearfix
 
-      div.col-xs.12
-        div.col-lg-8(style="padding-top: 30px;")
-          div.col-xs-3.stat-holder
-            div.row.big-info.chart.nodesactive(class="{{ nodesActive | nodesActiveClass : nodesTotal }}")
-              span.small-title block time
-              span.big-details.spark-blocktimes {{ lastBlocksTime.join(',') }}
+      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
+                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-lg-4
-          div.col-xs-12
-            nodemap#mapHolder(data="map")
+            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
+              nodemap#mapHolder(data="map")
 
       div.clearfix