mirror of
https://github.com/arnaucube/goBlockchainDataAnalysis.git
synced 2026-02-06 19:26:41 +01:00
fixed generation of tx and address relations structure. Improved webapp layout. Not finished addressTree generation algorithm
This commit is contained in:
arnaucode
39
web/css/style.css
Normal file
39
web/css/style.css
Normal file
@@ -0,0 +1,39 @@
|
||||
#mynetwork {
|
||||
/*background: black;*/
|
||||
}
|
||||
|
||||
.o-height600 {
|
||||
max-height: 600px!important;
|
||||
}
|
||||
|
||||
.o-height500 {
|
||||
max-height: 500px!important;
|
||||
}
|
||||
|
||||
.o-height300 {
|
||||
max-height: 300px!important;
|
||||
}
|
||||
|
||||
.o-overflowScroll {
|
||||
/*max-height: 600px;*/
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.o-mouseoverGrey {
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.o-mouseoverGrey:hover {
|
||||
background: #cccccc;
|
||||
}
|
||||
|
||||
|
||||
/* sidebar */
|
||||
.o_sidebar a{
|
||||
color: white;
|
||||
}
|
||||
.o_sidebar a:hover{
|
||||
background: #9E9E9E!important;
|
||||
color: white;
|
||||
}
|
||||
@@ -14,48 +14,25 @@
|
||||
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css">
|
||||
|
||||
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<link href="css/colors.css" rel="stylesheet">
|
||||
|
||||
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
|
||||
<link href="css/ionic.app.css" rel="stylesheet">
|
||||
-->
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
/*background: black;*/
|
||||
}
|
||||
|
||||
.o-height600 {
|
||||
max-height: 600px!important;
|
||||
}
|
||||
|
||||
.o-height500 {
|
||||
max-height: 500px!important;
|
||||
}
|
||||
|
||||
.o-height300 {
|
||||
max-height: 300px!important;
|
||||
}
|
||||
|
||||
.o-overflowScroll {
|
||||
/*max-height: 600px;*/
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.o-mouseoverGrey {
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.o-mouseoverGrey:hover {
|
||||
background: #cccccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body ng-app="webApp">
|
||||
<body ng-app="webApp" style="overflow-x:scroll;">
|
||||
<div ng-include="'views/navbar.html'"></div>
|
||||
<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-view></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-view></div>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,29 +1,27 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">All addresses</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
|
||||
<div class="form-group label-floating">
|
||||
<input ng-model="filterAddress" abmFormControl class="form-control" placeholder="Filter" type="text">
|
||||
</div>
|
||||
<div ng-click="getAddressNetwork(node)" class="list-group-item" ng-repeat="node in addresses | filter: filterAddress">
|
||||
<div class="row-content">
|
||||
<p class="list-group-item-text">{{node.id}}</p>
|
||||
|
||||
<!--<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">All addresses</h3>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Address history Network Map</h3>
|
||||
<div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
|
||||
<div class="form-group label-floating">
|
||||
<input ng-model="filterAddress" abmFormControl class="form-control" placeholder="Filter" type="text">
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="mynetwork" style="height:800px;"></div>
|
||||
<div ng-click="getAddressNetwork(node)" class="list-group-item" ng-repeat="node in addresses | filter: filterAddress">
|
||||
<div class="row-content">
|
||||
<p class="list-group-item-text">{{node.id}}</p>
|
||||
|
||||
<!--<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Address history Network Map</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="mynetwork" style="height:800px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Tx for each Hour</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Tx for each Hour</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,57 +1,75 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Last addresses</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
|
||||
<div class="list-group-item" ng-repeat="node in addresses">
|
||||
<div class="row-content">
|
||||
<p class="list-group-item-text">{{node.id}}</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Last addresses</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 300px;overflow-y: scroll;">
|
||||
<div class="list-group-item" ng-repeat="node in addresses">
|
||||
<div class="row-content">
|
||||
<p class="list-group-item-text">{{node.id}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Last transactions</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
|
||||
<table class="table table-striped table-hover ">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Hash</th>
|
||||
<th>From</th>
|
||||
<th>Date</th>
|
||||
<th>nºSubtx</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="tx in txs">
|
||||
<td>
|
||||
txhash
|
||||
</td>
|
||||
<td>{{tx.f}}</td>
|
||||
<td>{{tx.date}}</td>
|
||||
<td>{{tx.subtx.length}}</td>
|
||||
<td><a ng-href="#!/tx/{{tx.id}}">View</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Tx/Hour</h3>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Other</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Other</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels">
|
||||
</canvas>
|
||||
</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: 350px;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">
|
||||
</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 style="max-width:100px;overflow-x:hidden;">{{tx.from}}</td>
|
||||
<td style="max-width:100px;overflow-x:hidden;">{{tx.to}}</td>
|
||||
<td>{{tx.label}}</td>
|
||||
<td><a ng-href="#!/tx/{{tx.id}}">View</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,22 +2,49 @@
|
||||
|
||||
angular.module('app.main', ['ngRoute'])
|
||||
|
||||
.config(['$routeProvider', function($routeProvider) {
|
||||
$routeProvider.when('/main', {
|
||||
templateUrl: 'views/main/main.html',
|
||||
controller: 'MainCtrl'
|
||||
});
|
||||
}])
|
||||
|
||||
.controller('MainCtrl', function($scope, $http) {
|
||||
$scope.addresses = [];
|
||||
$http.get(urlapi + 'lasttx')
|
||||
.then(function(data, status, headers, config) {
|
||||
console.log('data success');
|
||||
console.log(data);
|
||||
|
||||
$scope.addresses = data.data;
|
||||
}, function(data, status, headers, config) {
|
||||
console.log('data error');
|
||||
.config(['$routeProvider', function($routeProvider) {
|
||||
$routeProvider.when('/main', {
|
||||
templateUrl: 'views/main/main.html',
|
||||
controller: 'MainCtrl'
|
||||
});
|
||||
});
|
||||
}])
|
||||
|
||||
.controller('MainCtrl', function($scope, $http) {
|
||||
//last addr
|
||||
$scope.addresses = [];
|
||||
$http.get(urlapi + 'lastaddr')
|
||||
.then(function(data, status, headers, config) {
|
||||
console.log('data success');
|
||||
console.log(data);
|
||||
|
||||
$scope.addresses = data.data;
|
||||
}, function(data, status, headers, config) {
|
||||
console.log('data error');
|
||||
});
|
||||
|
||||
//last tx
|
||||
$scope.txs = [];
|
||||
$http.get(urlapi + 'lasttx')
|
||||
.then(function(data, status, headers, config) {
|
||||
console.log('data success');
|
||||
console.log(data);
|
||||
|
||||
$scope.txs = data.data;
|
||||
}, function(data, status, headers, config) {
|
||||
console.log('data error');
|
||||
});
|
||||
|
||||
//date analysis
|
||||
$scope.data = [];
|
||||
$scope.labels = [];
|
||||
$http.get(urlapi + 'houranalysis')
|
||||
.then(function(data, status, headers, config) {
|
||||
console.log('data success');
|
||||
console.log(data);
|
||||
|
||||
$scope.data = data.data.data;
|
||||
$scope.labels = data.data.labels;
|
||||
}, function(data, status, headers, config) {
|
||||
console.log('data error');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<li><a href="#!/network">Network</a></li>
|
||||
<li><a href="#!/addressNetwork">Address Network</a></li>
|
||||
<li><a href="#!/sankey">Sankey diagram</a></li>
|
||||
<li class="active"><a href="#!/dateAnalysis">Date Analysis</a></li>
|
||||
<li><a href="#!/dateAnalysis">Date Analysis</a></li>
|
||||
<li><a href="javascript:void(0)">Timeline</a></li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-left">
|
||||
|
||||
@@ -1,32 +1,30 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Nodes</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 300px;overflow-y: scroll;">
|
||||
<div ng-click="focusNode(node)" class="list-group-item" ng-repeat="node in nodes">
|
||||
<div class="row-content">
|
||||
<p class="list-group-item-text">{{node.id}}</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Nodes</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 300px;overflow-y: scroll;">
|
||||
<div ng-click="focusNode(node)" class="list-group-item" ng-repeat="node in nodes">
|
||||
<div class="row-content">
|
||||
<p class="list-group-item-text">{{node.id}}</p>
|
||||
|
||||
<!--<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>-->
|
||||
</div>
|
||||
<!--<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Selected node</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 200px;overflow-y: scroll;">
|
||||
{{selectedNode.nodes}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Network</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="mynetwork" style="height:500px;"></div>
|
||||
</div>
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Selected node</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 200px;overflow-y: scroll;">
|
||||
{{selectedNode.nodes}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Network</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="mynetwork" style="height:500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,34 +1,32 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">All addresses</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
|
||||
<div class="form-group label-floating">
|
||||
<input ng-model="filterAddress" abmFormControl class="form-control" placeholder="Filter" type="text">
|
||||
</div>
|
||||
<div ng-click="getAddressSankey(node)" class="list-group-item" ng-repeat="node in addresses | filter: filterAddress">
|
||||
<div class="row-content">
|
||||
<p class="list-group-item-text">{{node.id}}</p>
|
||||
|
||||
<!--<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">All addresses</h3>
|
||||
</div>
|
||||
<div class="col-sm-10">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Sankey - address {{selectedAddress}}</h3>
|
||||
<div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
|
||||
<div class="form-group label-floating">
|
||||
<input ng-model="filterAddress" abmFormControl class="form-control" placeholder="Filter" type="text">
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<!--<ng-sankey id="sankeyChart" options="options" data="data"></ng-sankey>
|
||||
-->
|
||||
<div id="sankeyChart">
|
||||
<canvas></canvas>
|
||||
<svg></svg>
|
||||
<div ng-click="getAddressSankey(node)" class="list-group-item" ng-repeat="node in addresses | filter: filterAddress">
|
||||
<div class="row-content">
|
||||
<p class="list-group-item-text">{{node.id}}</p>
|
||||
|
||||
<!--<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="panel-heading c_blueGrey300">
|
||||
<h3 class="panel-title">Sankey - address {{selectedAddress}}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<!--<ng-sankey id="sankeyChart" options="options" data="data"></ng-sankey>
|
||||
-->
|
||||
<div id="sankeyChart">
|
||||
<canvas></canvas>
|
||||
<svg></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
34
web/views/sidebar.html
Normal file
34
web/views/sidebar.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<div class="c_grey600" style="height:800px;margin-top:-20px;">
|
||||
<ul class="nav o_sidebar">
|
||||
<li>
|
||||
<a href="#!/main">
|
||||
<i class="fa fa-home" aria-hidden="true"></i> Main
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!/network">
|
||||
<i class="fa fa-chain" aria-hidden="true"></i> Network
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!/addressNetwork">
|
||||
<i class="fa fa-sitemap" aria-hidden="true"></i> Address Network
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!/sankey">
|
||||
<i class="fa fa-code-fork" aria-hidden="true"></i> Sankey diagram
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!/dateAnalysis">
|
||||
<i class="fa fa-bar-chart" aria-hidden="true"></i> Date Analysis
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<i class="fa fa-area-chart" aria-hidden="true"></i> Timeline
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
Reference in New Issue
Block a user