From 3adf1aa2d8e90394b7539650b7f0794ff600824f Mon Sep 17 00:00:00 2001 From: cubedro Date: Fri, 24 Apr 2015 11:44:21 +0300 Subject: [PATCH] added second top row --- public/css/style.css | 43 +++++++++++++------- public/js/controllers.js | 15 ++----- public/js/directives.js | 10 ----- public/js/filters.js | 26 +++++++++++++ views/index.jade | 84 ++++++++++++++++++++++++++-------------- 5 files changed, 113 insertions(+), 65 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 9e9801b..1368a67 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -7,14 +7,14 @@ body { min-width: 1900px; font-smooth: auto; -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } table td { font-size: 14px; white-space: nowrap !important; -webkit-font-smoothing: subpixel-antialiased; - -moz-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; } .propagationBox { @@ -116,10 +116,12 @@ div.small-title-miner { span.small-title span.small { font-size: 11px; - letter-spacing: -.5px; + font-weight: 600; + line-height: 16px; + letter-spacing: 0px; color: #666; -webkit-font-smoothing: subpixel-antialiased; - -moz-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; } .big-info .big-details { @@ -156,7 +158,7 @@ span.small-title span.small { .blocks-holder { -webkit-font-smoothing: subpixel-antialiased; - -moz-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; } .blocks-holder div.small-title-miner { @@ -194,15 +196,28 @@ span.small-title span.small { margin-right: 0px; } -.page-latency { - position: absolute; - top: 395px; - left: 15px; +.second-row .box { + height: 40px; + line-height: 24px !important; + padding: 5px 15px; } -.page-latency .small-title { - letter-spacing: 0px; - opacity: .8; +.second-row .box i { + position: relative; + top: 2px; + left: -3px; + font-size: 24px; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + margin-right: 7px; + float: left; +} + +.second-row .box .small-value { + font-weight: 300; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + float: right; } .tableHolder { @@ -211,7 +226,7 @@ span.small-title span.small { } table i { -webkit-font-smoothing: subpixel-antialiased; - -moz-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; } table th, @@ -402,7 +417,7 @@ svg .axis text { font-family: "Source Sans Pro"; font-weight: 700; -webkit-font-smoothing: subpixel-antialiased; - -moz-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; } svg .y.axis .tick:first-child text { diff --git a/public/js/controllers.js b/public/js/controllers.js index 7e181e7..41ebc18 100644 --- a/public/js/controllers.js +++ b/public/js/controllers.js @@ -9,12 +9,6 @@ function StatsCtrl($scope, $filter, socket, _, toastr) { $scope.nodesTotal = 0; $scope.nodesActive = 0; - $scope.bestBlockObject = { - number: 0, - hash: "0x?", - transactions: [], - uncles: [] - } $scope.bestBlock = 0; $scope.lastBlock = 0; $scope.lastDifficulty = 0; @@ -219,12 +213,11 @@ function StatsCtrl($scope, $filter, socket, _, toastr) { var bestBlock = _.max($scope.nodes, function(node) { return parseInt(node.stats.block.number); - }).stats.block; + }).stats.block.number; - if(bestBlock.number > $scope.bestBlock) + if(bestBlock > $scope.bestBlock) { - $scope.bestBlockObject = bestBlock; - $scope.bestBlock = bestBlock.number; + $scope.bestBlock = bestBlock; $scope.bestStats = _.max($scope.nodes, function(node) { return parseInt(node.stats.block.number); }).stats; @@ -245,7 +238,7 @@ function StatsCtrl($scope, $filter, socket, _, toastr) { jQuery('.spark-gasspending').sparkline($scope.gasSpending.reverse(), {type: 'bar'}); } - $scope.lastDifficulty = $scope.bestBlockObject.difficulty; + $scope.lastDifficulty = $scope.bestStats.block.difficulty; $scope.avgBlockTime = _.max($scope.nodes, function(node) { return parseInt(node.stats.block.number); diff --git a/public/js/directives.js b/public/js/directives.js index 4996944..b5559f1 100644 --- a/public/js/directives.js +++ b/public/js/directives.js @@ -60,19 +60,9 @@ angular.module('netStatsApp.directives', []). scope.init(); - window.onresize = function() { - scope.$apply(); - }; - scope.$watch('data', function() { scope.map.bubbles(scope.data, bubbleConfig); }, true); - - scope.$watch(function() { - return angular.element(window)[0].innerWidth; - }, function() { - scope.init(); - }); } }; }]). diff --git a/public/js/filters.js b/public/js/filters.js index 2116985..5214f26 100644 --- a/public/js/filters.js +++ b/public/js/filters.js @@ -100,6 +100,32 @@ angular.module('netStatsApp.filters', []) return (best - current.block.number <= 1 ? 'text-success' : (best - current.block.number > 1 && best - current.block.number < 4 ? 'text-warning' : 'text-danger')); }; }) +.filter('gasPriceFilter', ['$filter', function(filter) { + var numberFilter = filter('number') + return function(price) { + console.log("--------------------"); + console.log(price.length); + if(price.length < 4) + return price + " wei"; + + if(price.length < 7) + return (price/1000) + " kwei"; + + if(price.length < 10) + return (price/1000000) + " mwei"; + + if(price.length < 13) + return (price/1000000000) + " gwei"; + + if(price.length < 16) + return (price/1000000000000) + " szabo"; + + if(price.length < 19) + return (price.substr(0, price.length - 15)) + " finney"; + + return numberFilter(price.substr(0, price.length - 18)) + " ether"; + } +}]) .filter('gasFilter', function() { return function(gas) { return (typeof gas !== 'undefined' ? parseInt(gas) : '?'); diff --git a/views/index.jade b/views/index.jade index a1b001a..05ad806 100644 --- a/views/index.jade +++ b/views/index.jade @@ -2,9 +2,6 @@ extends layout block content div.container-fluid(ng-controller='StatsCtrl') - div.page-latency(ng-cloak) - span.small-title page latency:#[ ] - span(class="{{ {active: true, latency: latency} | latencyClass }}") {{latency}} ms div.row(ng-cloak) div.col-xs-2.stat-holder div.big-info.nodesactive(class="{{ nodesActive | nodesActiveClass : nodesTotal }}") @@ -45,7 +42,7 @@ block content div.pull-left span.small-title uncles #[ ] span.small (current / last 50) - span.big-details {{ bestBlockObject.uncles.length }}/{{ uncleCount }} + span.big-details {{ bestStats.block.uncles.length }}/{{ uncleCount }} div.clearfix div.col-xs-2.stat-holder div.big-info.blocktime(class="{{ lastBlock | timeClass : true }}") @@ -63,46 +60,55 @@ block content span.small-title avg block time span.big-details {{ avgBlockTime | avgTimeFilter }} div.clearfix - div.clearfix + div.row(ng-cloak) - div.col-xs-6.stats-boxes(style="padding-top: 30px;") + div.col-xs-8.stats-boxes(style="padding-top: 0px;") + div.row.second-row(ng-cloak) + //- div.col-xs-3.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.gasprice.text-info + i.icon-difficulty + 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-gas + 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 - div.col-xs-4.stat-holder + div.col-xs-3.stat-holder div.big-info.chart span.small-title block time span.big-details.spark-blocktimes - div.col-xs-4.stat-holder + div.col-xs-3.stat-holder div.big-info.chart span.small-title difficulty span.big-details.spark-difficulty - div.col-xs-4.stat-holder.pull-right + div.col-xs-3.stat-holder.xpull-right div.big-info.chart.xdouble-chart span.small-title block propagation histogram.big-details.d3-blockpropagation(data="blockPropagationChart") - div.col-xs-4.stat-holder - div.big-info.chart - span.small-title uncle count #[ ] - span.small (25 blocks per bar) - span.big-details.spark-uncles - - div.col-xs-4.stat-holder - div.big-info.chart - span.small-title transactions - span.big-details.spark-transactions - - div.col-xs-4.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.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', data-toggle="tooltip", data-placement="right", title="{{miner.blocks}}") @@ -111,9 +117,27 @@ block content div.block(ng-repeat="i in getNumber(miner.blocks) track by $index", class="{{miner.blocks | minerBlocksClass}}") div.clearfix + div.col-xs-3.stat-holder + div.big-info.chart + span.small-title uncle count #[ ] + span.small (25 blocks per bar) + span.big-details.spark-uncles + + div.col-xs-3.stat-holder + div.big-info.chart + span.small-title transactions + span.big-details.spark-transactions + + div.col-xs-3.stat-holder + div.big-info.chart + span.small-title gas spending + span.big-details.spark-gasspending + + + div.col-xs-4 - div.col-xs-12 - nodemap#mapHolder(data="map") + //- div.col-xs-12 + nodemap#mapHolder(data="map") div.clearfix