mirror of
https://github.com/arnaucube/goBlockchainDataAnalysis.git
synced 2026-02-07 03:36:44 +01:00
improved frontend layout
This commit is contained in:
arnaucode
@@ -1,104 +1,135 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<h4>{{stats.realblockcount}}/{{stats.blockcount}} Blocks with content</h4>
|
||||
<div class="progress" style="margin:0;">
|
||||
<div class="progress-bar c_blueGrey500" ng-style="blockProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<h4>{{stats.realblockcount}}/{{stats.blockcount}} Blocks with content</h4>
|
||||
<div class="progress" style="margin:0;">
|
||||
<div class="progress-bar c_blueGrey500" ng-style="blockProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<h4>{{stats.txcount}} Txs</h4>
|
||||
<div class="progress" style="margin:0;">
|
||||
<div class="progress-bar c_blueGrey500" ng-style="txProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<h4>{{stats.txcount}} Txs</h4>
|
||||
<div class="progress" style="margin:0;">
|
||||
<div class="progress-bar c_blueGrey500" ng-style="txProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<h4>{{stats.addrcount}} Addr</h4>
|
||||
<div class="progress" style="margin:0;">
|
||||
<div class="progress-bar c_blueGrey500" ng-style="txProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<h4>{{stats.addrcount}} Addr</h4>
|
||||
<div class="progress" style="margin:0;">
|
||||
<div class="progress-bar c_blueGrey500" ng-style="txProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<h4>300-500 Min-Max Block Size</h4>
|
||||
<div class="progress" style="margin:0;">
|
||||
<div class="progress-bar c_blueGrey500" ng-style="txProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<round-progress
|
||||
max="max"
|
||||
current="current"
|
||||
color="#45CCCE"
|
||||
bgcolor="#eaeaea"
|
||||
radius="100"
|
||||
stroke="20"
|
||||
semi="true"
|
||||
rounded="false"
|
||||
clockwise="true"
|
||||
responsive="true"
|
||||
duration="800"
|
||||
animation="easeInOutQuart"
|
||||
animation-delay="0">{{current}}/{{max}}</round-progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<round-progress
|
||||
max="max"
|
||||
current="current"
|
||||
color="#607D8B"
|
||||
bgcolor="#eaeaea"
|
||||
radius="100"
|
||||
stroke="20"
|
||||
semi="true"
|
||||
rounded="false"
|
||||
clockwise="true"
|
||||
responsive="true"
|
||||
duration="800"
|
||||
animation="easeInOutQuart"
|
||||
animation-delay="0">{{current}}/{{max}}</round-progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Last addresses used</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 300px;overflow-y: scroll;">
|
||||
<div class="list-group-item" ng-repeat="address in addresses">
|
||||
<div class="row-content">
|
||||
<p class="list-group-item-text">{{address.hash}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Last 24 hours Tx/Hour
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Last 24 hours Tx/Hour
|
||||
<a ng-href="#!/dateAnalysis" class="pull-right c_blueGrey300">View more</a></h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="line" class="chart chart-line" chart-data="last24hour.data" chart-labels="last24hour.labels">
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="line" class="chart chart-line" chart-data="last24hour.data" chart-labels="last24hour.labels">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Last 7 days Tx/Hour
|
||||
<a ng-href="#!/dateAnalysis" class="pull-right c_blueGrey300">View more</a></h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="line" class="chart chart-line" chart-data="last7dayhour.data" chart-labels="last7dayhour.labels" chart-series="last7dayhour.series">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Tx/Day Last 7 Days</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="horizontal-bar" class="chart chart-horizontal-bar" chart-data="last7day.data" chart-labels="last7day.labels" chart-series="last7day.series">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Last 7 days Tx/Hour
|
||||
<a ng-href="#!/dateAnalysis" class="pull-right c_blueGrey300">View more</a></h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="line" class="chart chart-line" chart-data="last7dayhour.data" chart-labels="last7dayhour.labels" chart-series="last7dayhour.series">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Tx/Day Last 7 Days</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="horizontal-bar" class="chart chart-horizontal-bar" chart-data="last7day.data" chart-labels="last7day.labels" chart-series="last7day.series">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Last Tx with amount</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 200px;overflow-y: scroll;">
|
||||
<table class="table table-striped table-hover">
|
||||
<!--<colgroup>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Last addresses used</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 250px;overflow-y: scroll;">
|
||||
<div class="list-group-item" ng-repeat="address in addresses">
|
||||
<div class="row-content">
|
||||
<p class="list-group-item-text">{{address.hash}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Last Tx with amount</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 250px;overflow-y: scroll;">
|
||||
<table class="table table-striped table-hover">
|
||||
<!--<colgroup>
|
||||
<col class="col-md-2">
|
||||
<col class="col-md-2">
|
||||
<col class="col-md-2">
|
||||
@@ -106,26 +137,26 @@
|
||||
<col class="col-md-2">
|
||||
<col class="col-md-2">
|
||||
</colgroup>-->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>BlockHeight</th>
|
||||
<th>From</th>
|
||||
<th>To</th>
|
||||
<th>Amount</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="tx in txs">
|
||||
<td>{{tx.blockheight}}</td>
|
||||
<td>{{tx.from}}</td>
|
||||
<td>{{tx.to}}</td>
|
||||
<td>{{tx.label}}</td>
|
||||
<td><a ng-href="#!/tx/{{tx.id}}">View</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>BlockHeight</th>
|
||||
<th>From</th>
|
||||
<th>To</th>
|
||||
<th>Amount</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="tx in txs">
|
||||
<td style="max-width:20px; overflow:hidden;">{{tx.blockheight}}</td>
|
||||
<td style="max-width:20px; overflow:hidden;">{{tx.from}}</td>
|
||||
<td style="max-width:20px; overflow:hidden;">{{tx.to}}</td>
|
||||
<td>{{tx.amount}}</td>
|
||||
<td><a ng-href="#!/tx/{{tx.id}}">View</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,6 +11,8 @@ angular.module('app.main', ['ngRoute'])
|
||||
|
||||
.controller('MainCtrl', function($scope, $http) {
|
||||
$scope.stats = [];
|
||||
$scope.current=0;
|
||||
$scope.max=100;
|
||||
$scope.blockProgress={
|
||||
"width": "0%"
|
||||
};
|
||||
@@ -22,11 +24,12 @@ angular.module('app.main', ['ngRoute'])
|
||||
$scope.blockProgress={
|
||||
"width": tantpercent+"%"
|
||||
};
|
||||
$scope.current=80;
|
||||
}, function(data, status, headers, config) {
|
||||
console.log('data error');
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//last addr
|
||||
$scope.addresses = [];
|
||||
$http.get(urlapi + 'lastaddr')
|
||||
|
||||
Reference in New Issue
Block a user