grassrootseconomics/ethstats-server
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added last blocks miners chart

Browse Source
This commit is contained in:
cubedro 2015-04-06 02:28:42 +03:00
parent adb3f21a31
commit 8efec7d029
5 changed files with 243 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
public/css/style.css
View File

@ -10,19 +10,35 @@ body {
-moz-font-smoothing: antialiased;
}
.stat-holder {
.bg-success {
background: #7bcc3a;
}
.bg-info {
background: #10a0de;
}
.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);
}
.big-info {
padding-bottom: 15px;
padding-top: 15px;
background: #090909;
border: 1px solid rgba(255,255,255,0.05);
}
.stats-boxes .big-info {
margin-right: -30px;
}
.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 {
display: none !important;
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}

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

276
views/index.jade
View File

@ -3,142 +3,148 @@ 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.pull-left.icon-full-width
i.icon-node
div.pull-left
span.small-title active nodes
span.big-details {{nodesActive}}/{{nodesTotal}}
div.clearfix
div.col-xs-2.stat-holder
div.row.big-info.uptime(class="{{ upTimeTotal | upTimeClass }}")
div.pull-left.icon-full-width
i.icon-bulb
div.pull-left
span.small-title up-time
span.big-details {{ upTimeTotal | upTimeFilter }}
div.clearfix
div.col-xs-2.stat-holder
div.row.big-info.difficulty.text-info
div.pull-left.icon-full-width
i.icon-difficulty
div.pull-left
span.small-title difficulty
span.big-details {{ lastDifficulty }}
div.clearfix
div.col-xs-2.stat-holder
div.row.big-info.bestblock.text-info
div.pull-left.icon-full-width
i.icon-block
div.pull-left
span.small-title best block
span.big-details {{"#" + bestBlock}}
div.clearfix
div.col-xs-2.stat-holder
div.row.big-info.blocktime(class="{{ lastBlock | timeClass }}")
div.pull-left.icon-full-width
i.icon-time
div.pull-left
span.small-title last block
span.big-details {{ lastBlock | blockTimeFilter }}
div.clearfix
div.col-xs-2.stat-holder
div.row.big-info.avgblocktime(class="{{ avgBlockTime | timeClass }}")
div.pull-left.icon-full-width
i.icon-gas
div.pull-left
span.small-title avg block time
span.big-details {{ avgBlockTime | avgTimeFilter }}
div.clearfix
div.clearfix
div.col-xs-12
div.row
div.col-xs-4.stats-boxes(style="padding-top: 30px;")
div.row
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title block time
span.big-details.spark-blocktimes
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title difficulty
span.big-details.spark-difficulty
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title transactions
span.big-details.spark-transactions
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title gas spending
span.big-details.spark-gasspending
div.col-xs-4
div.col-xs-4
div.col-xs-12
nodemap#mapHolder(data="map")
div.col-xs-2.stat-holder
div.big-info.nodesactive(class="{{ nodesActive | nodesActiveClass : nodesTotal }}")
div.pull-left.icon-full-width
i.icon-node
div.pull-left
span.small-title active nodes
span.big-details {{nodesActive}}/{{nodesTotal}}
div.clearfix
div.col-xs-2.stat-holder
div.big-info.uptime(class="{{ upTimeTotal | upTimeClass }}")
div.pull-left.icon-full-width
i.icon-bulb
div.pull-left
span.small-title up-time
span.big-details {{ upTimeTotal | upTimeFilter }}
div.clearfix
div.col-xs-2.stat-holder
div.big-info.difficulty.text-info
div.pull-left.icon-full-width
i.icon-difficulty
div.pull-left
span.small-title difficulty
span.big-details {{ lastDifficulty }}
div.clearfix
div.col-xs-2.stat-holder
div.big-info.bestblock.text-info
div.pull-left.icon-full-width
i.icon-block
div.pull-left
span.small-title best block
span.big-details {{"#" + bestBlock}}
div.clearfix
div.col-xs-2.stat-holder
div.big-info.blocktime(class="{{ lastBlock | timeClass }}")
div.pull-left.icon-full-width
i.icon-time
div.pull-left
span.small-title last block
span.big-details {{ lastBlock | blockTimeFilter }}
div.clearfix
div.col-xs-2.stat-holder
div.big-info.avgblocktime(class="{{ avgBlockTime | timeClass }}")
div.pull-left.icon-full-width
i.icon-gas
div.pull-left
span.small-title avg block time
span.big-details {{ avgBlockTime | avgTimeFilter }}
div.clearfix
div.clearfix
div.col-xs-12
//- h1 Nodes in detail
div.row
div.col-xs-4.stats-boxes(style="padding-top: 30px;")
div.row
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title block time
span.big-details.spark-blocktimes
table.table.table-striped
thead
tr.text-info
th
i.icon-node(data-toggle="tooltip", data-placement="top", title="Node")
th.th-nodename
i.icon-laptop(data-toggle="tooltip", data-placement="top", title="Node type")
th.th-latency
i.icon-clock(data-toggle="tooltip", data-placement="top", title="Node latency")
th
i.icon-mining(data-toggle="tooltip", data-placement="top", title="Is mining")
th
i.icon-group(data-toggle="tooltip", data-placement="top", title="Peers")
th
i.icon-network(data-toggle="tooltip", data-placement="top", title="Pending transactions")
th
i.icon-block(data-toggle="tooltip", data-placement="top", title="Last node block")
th.th-blockhash &nbsp;
th
i.icon-check-o(data-toggle="tooltip", data-placement="top", title="Block transactions")
th.th-blocktime
i.icon-time(data-toggle="tooltip", data-placement="top", title="Last block time")
th
i.icon-gas(data-toggle="tooltip", data-placement="top", title="Propagation time")
th
i.icon-bulb(data-toggle="tooltip", data-placement="top", title="Up-time")
tbody
tr(ng-repeat='node in nodes', class="{{ node.stats | mainClass : bestBlock }}")
td(rel="{{node.id}}")
span.small(data-toggle="tooltip", data-placement="top", data-original-title="{{node.geo | geoTooltip}}") {{node.info.name}}
span.small &nbsp({{node.info.ip}})
td
div.small(ng-bind-html="node.info.node | nodeVersion")
//- div.small {{node.info.os}}, {{node.info.os_v}}
td.small(class="{{ node.stats | latencyClass }}") {{node.stats | latencyFilter}}
td(class="{{ node.stats.mining | miningClass }}")
i.small(class="{{ node.stats.mining | miningIconClass }}")
td(class="{{ node.stats.peers | peerClass }}", style="padding-left: 11px;") {{node.stats.peers}}
td(style="padding-left: 15px;") {{node.stats.pending}}
td(class="{{ node.stats.block.number | blockClass : bestBlock }}") {{'#' + node.stats.block.number}}
td(class="{{ node.stats.block.number | blockClass : bestBlock }}")
span.small {{node.stats.block.hash}}
td(style="padding-left: 14px;") {{node.stats.block.transactions.length || 0}}
td(class="{{ node.stats.block.timestamp | timeClass }}") {{node.stats.block.received | blockTimeFilter }}
td(class="{{ node.stats.block.propagation | propagationTimeClass }}") {{node.stats.block.propagation | blockPropagationFilter}}
td(class="{{ node.stats.uptime | upTimeClass }}") {{ node.stats.uptime | upTimeFilter }}
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title difficulty
span.big-details.spark-difficulty
div.col-xs-6.stat-holder
div.big-info.chart
span.small-title transactions
span.big-details.spark-transactions
div.col-xs-6.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}}")
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
nodemap#mapHolder(data="map")
div.clearfix
div.row
table.table.table-striped
thead
tr.text-info
th
i.icon-node(data-toggle="tooltip", data-placement="top", title="Node")
th.th-nodename
i.icon-laptop(data-toggle="tooltip", data-placement="top", title="Node type")
th.th-latency
i.icon-clock(data-toggle="tooltip", data-placement="top", title="Node latency")
th
i.icon-mining(data-toggle="tooltip", data-placement="top", title="Is mining")
th
i.icon-group(data-toggle="tooltip", data-placement="top", title="Peers")
th
i.icon-network(data-toggle="tooltip", data-placement="top", title="Pending transactions")
th
i.icon-block(data-toggle="tooltip", data-placement="top", title="Last node block")
th.th-blockhash &nbsp;
th
i.icon-check-o(data-toggle="tooltip", data-placement="top", title="Block transactions")
th.th-blocktime
i.icon-time(data-toggle="tooltip", data-placement="top", title="Last block time")
th
i.icon-gas(data-toggle="tooltip", data-placement="top", title="Propagation time")
th
i.icon-bulb(data-toggle="tooltip", data-placement="top", title="Up-time")
tbody
tr(ng-repeat='node in nodes', class="{{ node.stats | mainClass : bestBlock }}")
td(rel="{{node.id}}")
span.small(data-toggle="tooltip", data-placement="top", data-original-title="{{node.geo | geoTooltip}}") {{node.info.name}}
span.small &nbsp({{node.info.ip}})
td
div.small(ng-bind-html="node.info.node | nodeVersion")
//- div.small {{node.info.os}}, {{node.info.os_v}}
td.small(class="{{ node.stats | latencyClass }}") {{node.stats | latencyFilter}}
td(class="{{ node.stats.mining | miningClass }}")
i.small(class="{{ node.stats.mining | miningIconClass }}")
td(class="{{ node.stats.peers | peerClass }}", style="padding-left: 11px;") {{node.stats.peers}}
td(style="padding-left: 15px;") {{node.stats.pending}}
td(class="{{ node.stats.block.number | blockClass : bestBlock }}") {{'#' + node.stats.block.number}}
td(class="{{ node.stats.block.number | blockClass : bestBlock }}")
span.small {{node.stats.block.hash}}
td(style="padding-left: 14px;") {{node.stats.block.transactions.length || 0}}
td(class="{{ node.stats.block.timestamp | timeClass }}") {{node.stats.block.received | blockTimeFilter }}
td(class="{{ node.stats.block.propagation | propagationTimeClass }}") {{node.stats.block.propagation | blockPropagationFilter}}
td(class="{{ node.stats.uptime | upTimeClass }}") {{ node.stats.uptime | upTimeFilter }}