arnaucube/goBlockchainDataAnalysis
1
0
Fork 0
mirror of https://github.com/arnaucube/goBlockchainDataAnalysis.git synced 2026-02-07 03:36:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

improved frontend layout

Browse Source
This commit is contained in:
arnaucode
2017-08-23 17:39:02 +02:00
parent 9f8fdcd740
commit d8d49e4e4a
7 changed files with 161 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
goBlockchainDataAnalysis
View File

Binary file not shown.

1
web/app.js
View File

@@ -8,6 +8,7 @@ angular.module('webApp', [
'ngRoute',
'ngMessages',
'angularBootstrapMaterial',
'angular-svg-round-progressbar',
'app.navbar',
'app.main',
'app.network',

3
web/bower.json
View File

@@ -14,6 +14,7 @@
"angular-bootstrap": "^2.5.0",
"angular-messages": "^1.6.5",
"components-font-awesome": "^4.7.0",
"sankeyjs": "^1.2.2"
"sankeyjs": "^1.2.2",
"angular-svg-round-progressbar": "0.4.8"
}
}

8
web/index.html
View File

@@ -24,13 +24,14 @@
-->
</head>
<body ng-app="webApp" style="overflow-x:scroll;">
<div ng-include="'views/navbar.html'"></div>
<body ng-app="webApp" style="overflow-x:hidden;">
<div class="row" style="padding-right:10px;">
<div class="col-md-2">
<div ng-include="'views/sidebar.html'"></div>
</div>
<div class="col-md-10">
<!--<div ng-include="'views/navbar.html'"></div>-->
<br>
<div ng-view></div>
</div>
</div>
@@ -52,6 +53,9 @@
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-bootstrap-material/dist/angular-bootstrap-material.js"></script>
<!-- progressbar -->
<script src="bower_components/angular-svg-round-progressbar/build/roundProgress.min.js"></script>
<!-- Angular Chart -->
<script src="bower_components/chart.js/dist/Chart.min.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>

241
web/views/main/main.html
View File

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

3
web/views/main/main.js
View File

@@ -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,6 +24,7 @@ angular.module('app.main', ['ngRoute'])
$scope.blockProgress={
"width": tantpercent+"%"
};
$scope.current=80;
}, function(data, status, headers, config) {
console.log('data error');
});

12
web/views/sidebar.html
View File

@@ -1,5 +1,10 @@
<div class="c_grey600" style="height:800px;margin-top:-20px;">
<div class="c_grey600" style="height:100%;position:fixed;"><!-- margin-top:-20px; -->
<ul class="nav o_sidebar">
<li class="c_grey800">
<a href="#!/main">
goBlockchainDataAnalysis
</a>
</li>
<li>
<a href="#!/main">
<i class="fa fa-home o_sidebarIcon" aria-hidden="true"></i> Main
@@ -30,5 +35,10 @@
<i class="fa fa-area-chart o_sidebarIcon" aria-hidden="true"></i> Timeline
</a>
</li>
<li>
<a target="_blank" href="https://github.com/arnaucode/goBlockchainDataAnalysis">
<i class="fa fa-code o_sidebarIcon" aria-hidden="true"></i> Code
</a>
</li>
</ul>
</div>