arnaucube/goBlockchainDataAnalysis
1
0
Fork 0
mirror of https://github.com/arnaucube/goBlockchainDataAnalysis.git synced 2026-02-07 11:46:38 +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', 'ngRoute',
'ngMessages', 'ngMessages',
'angularBootstrapMaterial', 'angularBootstrapMaterial',
'angular-svg-round-progressbar',
'app.navbar', 'app.navbar',
'app.main', 'app.main',
'app.network', 'app.network',

3
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"
} }
} }

8
web/index.html
View File

@@ -24,13 +24,14 @@
--> -->
</head> </head>
<body ng-app="webApp" style="overflow-x:scroll;"> <body ng-app="webApp" style="overflow-x:hidden;">
<div ng-include="'views/navbar.html'"></div>
<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>

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

@@ -29,33 +29,48 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-2">
<div class="panel"> <div class="panel">
<div class="panel-body"> <div class="panel-body">
<h4>300-500 Min-Max Block Size</h4> <round-progress
<div class="progress" style="margin:0;"> max="max"
<div class="progress-bar c_blueGrey500" ng-style="txProgress"></div> 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>
</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="col-sm-4">
<div class="panel"> <div class="panel">
<div class="panel-heading c_blueGrey300"> <div class="panel-heading c_blueGrey300">
@@ -67,6 +82,18 @@
</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-8">
<div class="panel"> <div class="panel">
<div class="panel-heading c_blueGrey300"> <div class="panel-heading c_blueGrey300">
<h3 class="panel-title">Last 7 days Tx/Hour <h3 class="panel-title">Last 7 days Tx/Hour
@@ -78,25 +105,29 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<div class="panel"> <div class="panel">
<div class="panel-heading c_blueGrey300"> <div class="panel-heading c_blueGrey300">
<h3 class="panel-title">Tx/Day Last 7 Days</h3> <h3 class="panel-title">Last addresses used</h3>
</div> </div>
<div class="panel-body"> <div class="panel-body" style="max-height: 250px;overflow-y: scroll;">
<canvas id="horizontal-bar" class="chart chart-horizontal-bar" chart-data="last7day.data" chart-labels="last7day.labels" chart-series="last7day.series"> <div class="list-group-item" ng-repeat="address in addresses">
</canvas> <div class="row-content">
<p class="list-group-item-text">{{address.hash}}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-12"> </div>
<div class="col-md-8">
<div class="panel"> <div class="panel">
<div class="panel-heading c_blueGrey300"> <div class="panel-heading c_blueGrey300">
<h3 class="panel-title">Last Tx with amount</h3> <h3 class="panel-title">Last Tx with amount</h3>
</div> </div>
<div class="panel-body" style="max-height: 200px;overflow-y: scroll;"> <div class="panel-body" style="max-height: 250px;overflow-y: scroll;">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<!--<colgroup> <!--<colgroup>
<col class="col-md-2"> <col class="col-md-2">
@@ -117,10 +148,10 @@
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat="tx in txs"> <tr ng-repeat="tx in txs">
<td>{{tx.blockheight}}</td> <td style="max-width:20px; overflow:hidden;">{{tx.blockheight}}</td>
<td>{{tx.from}}</td> <td style="max-width:20px; overflow:hidden;">{{tx.from}}</td>
<td>{{tx.to}}</td> <td style="max-width:20px; overflow:hidden;">{{tx.to}}</td>
<td>{{tx.label}}</td> <td>{{tx.amount}}</td>
<td><a ng-href="#!/tx/{{tx.id}}">View</a></td> <td><a ng-href="#!/tx/{{tx.id}}">View</a></td>
</tr> </tr>
</tbody> </tbody>

3
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,6 +24,7 @@ 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');
}); });

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