From c1f1a0989da0a2ed18d0247ad0bb4d594807c0f2 Mon Sep 17 00:00:00 2001 From: Fabian Vogelsteller Date: Thu, 6 Aug 2015 12:22:47 +0200 Subject: [PATCH 1/2] add gas limit chart --- lib/history.js | 21 +++++++++++++++++++++ src/js/controllers.js | 4 ++++ src/views/index.jade | 21 +++++++++++++++++++++ 3 files changed, 46 insertions(+) diff --git a/lib/history.js b/lib/history.js index 0975634..e50cd92 100644 --- a/lib/history.js +++ b/lib/history.js @@ -436,6 +436,25 @@ History.prototype.getBlockTimes = function() return blockTimes; } +History.prototype.getGasLimit = function() +{ + var gasLimitHistory = _( this._items ) + .sortByOrder( 'height', false ) + .filter(function (item) + { + return item.block.trusted; + }) + .slice(0, MAX_BINS) + .reverse() + .map(function (item) + { + return item.block.gasLimit; + }) + .value(); + + return gasLimitHistory; +} + History.prototype.getDifficulty = function() { var difficultyHistory = _( this._items ) @@ -570,6 +589,7 @@ History.prototype.getCharts = function() uncles: item.block.uncles.length, transactions: item.block.transactions.length, gasSpending: item.block.gasUsed, + gasLimit: item.block.gasLimit, miner: item.block.miner }; }) @@ -583,6 +603,7 @@ History.prototype.getCharts = function() uncles : _.pluck( chartHistory, 'uncles' ), transactions : _.pluck( chartHistory, 'transactions' ), gasSpending : _.pluck( chartHistory, 'gasSpending' ), + gasLimit : _.pluck( chartHistory, 'gasLimit' ), miners : this.getMinersCount(), propagation : this.getBlockPropagation(), uncleCount : this.getUncleCount(), diff --git a/src/js/controllers.js b/src/js/controllers.js index 7246095..ee9bb87 100644 --- a/src/js/controllers.js +++ b/src/js/controllers.js @@ -21,6 +21,7 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, $localStorage, soc $scope.uncleCount = 0; $scope.bestStats = {}; + $scope.lastGasLimit = _.fill(Array(MAX_BINS), 2); $scope.lastBlocksTime = _.fill(Array(MAX_BINS), 2); $scope.difficultyChart = _.fill(Array(MAX_BINS), 2); $scope.transactionDensity = _.fill(Array(MAX_BINS), 2); @@ -327,6 +328,9 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, $localStorage, soc if( !_.isEqual($scope.avgHashrate, data.avgHashrate) ) $scope.avgHashrate = data.avgHashrate; + if( !_.isEqual($scope.lastGasLimit, data.gasLimit) && data.gasLimit.length >= MAX_BINS ) + $scope.lastGasLimit = data.gasLimit; + if( !_.isEqual($scope.lastBlocksTime, data.blocktime) && data.blocktime.length >= MAX_BINS ) $scope.lastBlocksTime = data.blocktime; diff --git a/src/views/index.jade b/src/views/index.jade index 42a87d9..fc113bd 100644 --- a/src/views/index.jade +++ b/src/views/index.jade @@ -88,6 +88,16 @@ block content span.small-title uptime span.small-value {{ upTimeTotal | upTimeFilter }} + div.row.second-row + div.col-xs-3.stat-holder.box + div.col-xs-3.stat-holder.box + div.gasprice.text-info + i.icon-gasprice + span.small-title gas limit + span.small-value {{ bestStats.block.gasLimit }} gas + div.col-xs-3.stat-holder.box + div.col-xs-3.stat-holder.box + div.row div.col-xs-3.stat-holder div.big-info.chart(class="{{ avgBlockTime | avgTimeClass }}") @@ -146,6 +156,16 @@ block content //- div.col-xs-12 nodemap#mapHolder(data="map") + + div.row + div.col-xs-3.stat-holder + div.big-info.chart.text-info + //- i.icon-difficulty + span.small-title gas limit + //- span.small-value {{ lastDifficulty | number }} + sparkchart.big-details.spark-difficulty(data="{{lastGasLimit.join(',')}}") + + div.row div.col-xs-12.stats-boxes div.row.second-row div.col-xs-12.stat-holder.box @@ -154,6 +174,7 @@ block content span.small-title Block #1028201 hash span.small-value {{frontierHash}} + //- div.clearfix div.row(ng-cloak, style="padding-top: 10px") From 409af3720e863320139ccf523a17d87bd2b05cd3 Mon Sep 17 00:00:00 2001 From: cubedro Date: Thu, 6 Aug 2015 13:54:10 +0300 Subject: [PATCH 2/2] fixed styling --- lib/history.js | 10 +-- src/css/style.css | 2 +- src/js/directives.js | 4 +- src/views/index.jade | 152 ++++++++++++++++++++----------------------- 4 files changed, 80 insertions(+), 88 deletions(-) diff --git a/lib/history.js b/lib/history.js index e50cd92..430312f 100644 --- a/lib/history.js +++ b/lib/history.js @@ -440,10 +440,10 @@ History.prototype.getGasLimit = function() { var gasLimitHistory = _( this._items ) .sortByOrder( 'height', false ) - .filter(function (item) - { - return item.block.trusted; - }) + // .filter(function (item) + // { + // return item.block.trusted; + // }) .slice(0, MAX_BINS) .reverse() .map(function (item) @@ -559,7 +559,7 @@ History.prototype.getMinersCount = function() return _(minerCount) .sortByOrder( 'blocks', false ) - .slice(0, 5) + .slice(0, 2) .value(); } diff --git a/src/css/style.css b/src/css/style.css index 36315b6..d887cc9 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -343,7 +343,7 @@ nodepropagchart { position: relative; display: block; width: 100%; - height: 282px; + height: 242px; overflow: hidden; } diff --git a/src/js/directives.js b/src/js/directives.js index 6ef7632..b71c62b 100644 --- a/src/js/directives.js +++ b/src/js/directives.js @@ -211,13 +211,13 @@ angular.module('netStatsApp.directives', []) element.empty(); var width = 628, - height = 244; + height = 202; scope.map = new Datamap({ element: element[0], scope: 'world', width: width, - height: 300, + height: 242, fills: { success: '#7BCC3A', info: '#10A0DE', diff --git a/src/views/index.jade b/src/views/index.jade index 563ccfc..c9cbb04 100644 --- a/src/views/index.jade +++ b/src/views/index.jade @@ -60,111 +60,103 @@ block content div.row(ng-cloak) - div.col-xs-8.stats-boxes(style="padding-top: 0px;") + div.col-xs-12.stats-boxes(style="padding-top: 0px;") div.row.second-row - div.col-xs-3.stat-holder.box + div.col-xs-2.stat-holder.box div.active-nodes(class="{{ nodesActive | nodesActiveClass : nodesTotal }}") i.icon-node span.small-title active nodes span.small-value {{nodesActive}}/{{nodesTotal}} - //- div.col-xs-3.stat-holder.box - //- div.difficulty.text-info - //- i.icon-difficulty - //- span.small-title difficulty - //- span.small-value {{ lastDifficulty | number }} - div.col-xs-3.stat-holder.box + div.col-xs-2.stat-holder.box div.gasprice.text-info i.icon-gasprice span.small-title gas price span.small-value {{ bestStats.gasPrice.toString() | gasPriceFilter }} - div.col-xs-3.stat-holder.box - div.page-latency(class="{{ {active: true, latency: latency} | latencyClass }}") - i.icon-clock - span.small-title page latency - span.small-value {{latency}} ms - div.col-xs-3.stat-holder.box - div.uptime(class="{{ upTimeTotal | upTimeClass : true }}") - i.icon-bulb - span.small-title uptime - span.small-value {{ upTimeTotal | upTimeFilter }} - - div.row.second-row - div.col-xs-3.stat-holder.box - div.col-xs-3.stat-holder.box + div.col-xs-2.stat-holder.box div.gasprice.text-info i.icon-gasprice span.small-title gas limit span.small-value {{ bestStats.block.gasLimit }} gas - div.col-xs-3.stat-holder.box - div.col-xs-3.stat-holder.box + div.col-xs-2.stat-holder.box + div.page-latency(class="{{ {active: true, latency: latency} | latencyClass }}") + i.icon-clock + span.small-title page latency + span.small-value {{latency}} ms + div.col-xs-2.stat-holder.box + div.uptime(class="{{ upTimeTotal | upTimeClass : true }}") + i.icon-bulb + span.small-title uptime + span.small-value {{ upTimeTotal | upTimeFilter }} + div.col-xs-2.stat-holder.box div.row - div.col-xs-3.stat-holder - div.big-info.chart(class="{{ avgBlockTime | avgTimeClass }}") - //- i.icon-time - span.small-title block time - //- span.small-value {{ avgBlockTime | avgTimeFilter }} - sparkchart.big-details.spark-blocktimes(data="{{lastBlocksTime.join(',')}}", tooltipsuffix="s") + div.col-xs-8 + div.row + div.col-xs-3.stat-holder + div.big-info.chart(class="{{ avgBlockTime | avgTimeClass }}") + //- i.icon-time + span.small-title block time + //- span.small-value {{ avgBlockTime | avgTimeFilter }} + sparkchart.big-details.spark-blocktimes(data="{{lastBlocksTime.join(',')}}", tooltipsuffix="s") - div.col-xs-3.stat-holder - div.big-info.chart.text-info - //- i.icon-difficulty - span.small-title difficulty - //- span.small-value {{ lastDifficulty | number }} - sparkchart.big-details.spark-difficulty(data="{{difficultyChart.join(',')}}") + div.col-xs-3.stat-holder + div.big-info.chart.text-info + //- i.icon-difficulty + span.small-title difficulty + //- span.small-value {{ lastDifficulty | number }} + sparkchart.big-details.spark-difficulty(data="{{difficultyChart.join(',')}}") - div.col-xs-3.stat-holder.xpull-right - div.big-info.chart.xdouble-chart(class="{{ blockPropagationAvg | propagationAvgTimeClass : true }}") - //- i.icon-gas - span.small-title block propagation - //- span.small-value {{ blockPropagationAvg | blockPropagationFilter : '' }} - histogram.big-details.d3-blockpropagation(data="blockPropagationChart") + div.col-xs-3.stat-holder.xpull-right + div.big-info.chart.xdouble-chart(class="{{ blockPropagationAvg | propagationAvgTimeClass : true }}") + //- i.icon-gas + span.small-title block propagation + //- span.small-value {{ blockPropagationAvg | blockPropagationFilter : '' }} + histogram.big-details.d3-blockpropagation(data="blockPropagationChart") - div.col-xs-3.stat-holder.pull-right - div.big-info.chart.double-chart - span.small-title last blocks miners - div.blocks-holder(ng-repeat='miner in miners track by miner.miner', data-toggle="tooltip", data-placement="right", data-original-title="{{miner.blocks}}") - div.block-count(class="{{miner.blocks | minerBlocksClass : 'text-'}}") {{miner.blocks}} - //- div.small-title-miner {{miner.miner | minerNameFilter : miner.name}} - div.small-title-miner {{miner.miner}} - minerblock(blocks="{{miner.blocks}}") - div.clearfix + div.col-xs-3.stat-holder.xpull-right + div.big-info.chart.xdouble-chart + span.small-title last blocks miners + div.blocks-holder(ng-repeat='miner in miners track by miner.miner', data-toggle="tooltip", data-placement="right", data-original-title="{{miner.blocks}}") + div.block-count(class="{{miner.blocks | minerBlocksClass : 'text-'}}") {{miner.blocks}} + //- div.small-title-miner {{miner.miner | minerNameFilter : miner.name}} + div.small-title-miner {{miner.miner}} + minerblock(blocks="{{miner.blocks}}") + div.clearfix - div.col-xs-3.stat-holder - div.big-info.chart.text-info - //- i.icon-uncle - span.small-title uncle count  - span.small (25 blocks per bar) - //- span.small-value {{ bestStats.block.uncles.length }}/{{ uncleCount }} - sparkchart.big-details.spark-uncles(data="{{uncleCountChart.join(',')}}") + div.col-xs-3.stat-holder + div.big-info.chart.text-info + //- i.icon-uncle + span.small-title uncle count  + span.small (25 blocks per bar) + //- span.small-value {{ bestStats.block.uncles.length }}/{{ uncleCount }} + sparkchart.big-details.spark-uncles(data="{{uncleCountChart.join(',')}}") - div.col-xs-3.stat-holder - div.big-info.chart.text-info - //- i.icon-uncle - span.small-title transactions - sparkchart.big-details.spark-transactions(data="{{transactionDensity.join(',')}}") + div.col-xs-3.stat-holder + div.big-info.chart.text-info + //- i.icon-uncle + span.small-title transactions + sparkchart.big-details.spark-transactions(data="{{transactionDensity.join(',')}}") - div.col-xs-3.stat-holder - div.big-info.chart.text-info - //- i.icon-gasprice - span.small-title gas spending - sparkchart.big-details.spark-gasspending(data="{{gasSpending.join(',')}}") + div.col-xs-3.stat-holder + div.big-info.chart.text-info + //- i.icon-gasprice + span.small-title gas spending + sparkchart.big-details.spark-gasspending(data="{{gasSpending.join(',')}}") + + div.col-xs-3.stat-holder + div.big-info.chart.text-info + //- i.icon-difficulty + span.small-title gas limit + //- span.small-value {{ lastDifficulty | number }} + sparkchart.big-details.spark-difficulty(data="{{lastGasLimit.join(',')}}") - div.col-xs-4.stat-holder.map-holder - //- div.col-xs-12 - nodemap#mapHolder(data="map") + div.col-xs-4.stat-holder.map-holder + //- div.col-xs-12 + nodemap#mapHolder(data="map") - div.row - div.col-xs-3.stat-holder - div.big-info.chart.text-info - //- i.icon-difficulty - span.small-title gas limit - //- span.small-value {{ lastDifficulty | number }} - sparkchart.big-details.spark-difficulty(data="{{lastGasLimit.join(',')}}") - - div.row + //- div.row div.col-xs-12.stats-boxes div.row.second-row div.col-xs-12.stat-holder.box