arnaucube
/
goBlockchainDataAnalysis
mirror of https://github.com/arnaucube/goBlockchainDataAnalysis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

improved frontend layout

master
arnaucode 7 years ago
parent
9f8fdcd740
commit
d8d49e4e4a
7 changed files with 161 additions and 111 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      goBlockchainDataAnalysis
  2. +1
    -0
      web/app.js
  3. +2
    -1
      web/bower.json
  4. +6
    -2
      web/index.html
  5. +136
    -105
      web/views/main/main.html
  6. +5
    -2
      web/views/main/main.js
  7. +11
    -1
      web/views/sidebar.html

BIN
goBlockchainDataAnalysis
View File


+ 1
- 0
web/app.js
View File

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

+ 2
- 1
web/bower.json
View File

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

+ 6
- 2
web/index.html
View File

@ -24,13 +24,14 @@
--> -->
</head> </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="row" style="padding-right:10px;">
<div class="col-md-2"> <div class="col-md-2">
<div ng-include="'views/sidebar.html'"></div> <div ng-include="'views/sidebar.html'"></div>
</div> </div>
<div class="col-md-10"> <div class="col-md-10">
<!--<div ng-include="'views/navbar.html'"></div>-->
<br>
<div ng-view></div> <div ng-view></div>
</div> </div>
</div> </div>
@ -52,6 +53,9 @@
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-bootstrap-material/dist/angular-bootstrap-material.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 --> <!-- Angular Chart -->
<script src="bower_components/chart.js/dist/Chart.min.js"></script> <script src="bower_components/chart.js/dist/Chart.min.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script> <script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>

+ 136
- 105
web/views/main/main.html
View File

@ -1,104 +1,135 @@
<div class="row"> <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> </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> </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> </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> </div>
<div class="row"> <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> <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">
</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 class="panel-body">
<canvas id="line" class="chart chart-line" chart-data="last24hour.data" chart-labels="last24hour.labels">
</canvas> </canvas>
</div>
</div>
</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 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 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>
</div>
</div> </div>
<div class="row"> <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"> <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">
<col class="col-md-2"> <col class="col-md-2">
</colgroup>--> </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>
</div> </div>

+ 5
- 2
web/views/main/main.js
View File

@ -11,6 +11,8 @@ angular.module('app.main', ['ngRoute'])
.controller('MainCtrl', function($scope, $http) { .controller('MainCtrl', function($scope, $http) {
$scope.stats = []; $scope.stats = [];
$scope.current=0;
$scope.max=100;
$scope.blockProgress={ $scope.blockProgress={
"width": "0%" "width": "0%"
}; };
@ -22,11 +24,12 @@ angular.module('app.main', ['ngRoute'])
$scope.blockProgress={ $scope.blockProgress={
"width": tantpercent+"%" "width": tantpercent+"%"
}; };
$scope.current=80;
}, function(data, status, headers, config) { }, function(data, status, headers, config) {
console.log('data error'); console.log('data error');
}); });
//last addr //last addr
$scope.addresses = []; $scope.addresses = [];
$http.get(urlapi + 'lastaddr') $http.get(urlapi + 'lastaddr')

+ 11
- 1
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"> <ul class="nav o_sidebar">
<li class="c_grey800">
<a href="#!/main">
goBlockchainDataAnalysis
</a>
</li>
<li> <li>
<a href="#!/main"> <a href="#!/main">
<i class="fa fa-home o_sidebarIcon" aria-hidden="true"></i> 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 <i class="fa fa-area-chart o_sidebarIcon" aria-hidden="true"></i> Timeline
</a> </a>
</li> </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> </ul>
</div> </div>

Write Preview
Loading…
Cancel
Save