CipherLabs
/
ethstats-server
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added last blocks miners chart

Browse Source
pull/5/head
cubedro 10 years ago
parent adb3f21a31
commit 8efec7d029
5 changed files with 235 additions and 174 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 82
      public/css/style.css
  2. 41
      public/js/controllers.js
  3. 21
      public/js/filters.js
  4. 1
      public/js/script.js
  5. 42
      views/index.jade

82
public/css/style.css
Unescape View File

@ -10,19 +10,35 @@ body {
-moz-font-smoothing: antialiased;
}
.stat-holder {
.bg-success {
background: #7bcc3a;
}
.bg-info {
background: #10a0de;
}
.big-info {
padding-bottom: 15px;
padding-top: 15px;
.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);
}
.stats-boxes .big-info {
margin-right: -30px;
.big-info {
padding-bottom: 15px;
padding-top: 15px;
}
.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;
}
.big-info.chart {
padding-left: 14px;
padding-right: 14px;
-webkit-box-sizing: border-box
box-sizing: border-box;
color: #aaa;
}
.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;
}

41
public/js/controllers.js
Unescape View File

@ -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.lastBlock = _.max($scope.nodes, function(node) {
return parseInt(node.stats.block.number);
}).stats.block.received;
$scope.lastBlocksTime = _.max($scope.nodes, function(node) {
$scope.bestStats = _.max($scope.nodes, function(node) {
return parseInt(node.stats.block.number);
}).stats.blockTimes;
jQuery('.spark-blocktimes').sparkline($scope.lastBlocksTime.reverse(), {type: 'bar', tooltipSuffix: 's'});
}).stats;
$scope.difficultyChange = _.max($scope.nodes, function(node) {
return parseInt(node.stats.block.number);
}).stats.difficulty;
$scope.lastBlock = $scope.bestStats.block.received;
$scope.lastBlocksTime = $scope.bestStats.blockTimes;
$scope.difficultyChange = $scope.bestStats.difficulty;
$scope.transactionDensity = $scope.bestStats.txDensity;
$scope.gasSpending = $scope.bestStats.gasSpending;
$scope.miners = $scope.bestStats.miners;
$scope.difficultyChange.pop();
$scope.getNumber = function(num) {
return new Array(num);
}
jQuery('.spark-blocktimes').sparkline($scope.lastBlocksTime.reverse(), {type: 'bar', tooltipSuffix: 's'});
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'});
}

21
public/js/filters.js
Unescape View File

@ -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)

1
public/js/script.js
Unescape View File

@ -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',

42
views/index.jade
Unescape View File

@ -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
//- h1 Nodes in detail
div.row
table.table.table-striped
thead
tr.text-info

Write Preview
Loading…
Cancel
Save