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('

{{prefix}}{{value}}{{suffix}}
'); + // $.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('

{{prefix}}{{value}}{{suffix}}
'); + $.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('
{{prefix}}{{value}}{{suffix}}
'); $.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