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

implemented generation of network map of address history, not finished

Browse Source
This commit is contained in:
arnaucode
2017-07-27 13:57:05 +02:00
parent 568bd6af46
commit f9262f72a1
12 changed files with 401 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/app.js
View File

@@ -11,6 +11,7 @@ angular.module('webApp', [
'app.navbar',
'app.main',
'app.network',
'app.addressNetwork',
'app.sankey'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {

3
web/index.html
View File

@@ -21,7 +21,7 @@
-->
<style type="text/css">
#mynetwork {
background: black;
/*background: black;*/
}
.o-height600 {
@@ -89,6 +89,7 @@
<script src="views/navbar.js"></script>
<script src="views/main/main.js"></script>
<script src="views/network/network.js"></script>
<script src="views/addressNetwork/addressNetwork.js"></script>
<script src="views/sankey/sankey.js"></script>
</body>

29
web/views/addressNetwork/addressNetwork.html Normal file
View File

@@ -0,0 +1,29 @@
<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>
<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:800px;"></div>
</div>
</div>
</div>
</div>

104
web/views/addressNetwork/addressNetwork.js Normal file
View File

@@ -0,0 +1,104 @@
'use strict';
angular.module('app.addressNetwork', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/addressNetwork', {
templateUrl: 'views/addressNetwork/addressNetwork.html',
controller: 'AddressNetworkCtrl'
});
}])
.controller('AddressNetworkCtrl', function($scope, $http, $routeParams) {
$scope.data = [];
$scope.addresses;
$scope.nodes = [];
$scope.edges = [];
$scope.selectedNode = {};
var nodes, edges, container, network;
var options = {
layout: {
improvedLayout: false
},
interaction: {
hover: true
},
physics: {
stabilization: false,
//enabled: false
}
};
$scope.showMap = function() {
var nodes = $scope.nodes;
var edges = $scope.edges;
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
network = new vis.Network(container, data, options);
network.on("click", function(params) {
params.event = "[original event]";
//$scope.selectedNode = JSON.stringify(params, null, 4);
$scope.selectedNode = params;
console.log($scope.selectedNode);
console.log($scope.selectedNode.nodes);
var options = {
// position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
scale: 1,
offset: {
x: 0,
y: 0
},
animation: {
duration: 500,
easingFunction: "easeInOutQuad"
}
};
network.focus($scope.selectedNode.nodes[0], options);
//console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
});
};
$http.get(urlapi + 'alladdresses')
.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');
});
$scope.getAddressNetwork = function(address) {
console.log(address);
$http.get(urlapi + 'address/network/' + address.id)
.then(function(data, status, headers, config) {
console.log('data success');
console.log(data);
$scope.nodes = data.data.nodes;
$scope.edges = data.data.edges;
$scope.showMap();
}, function(data, status, headers, config) {
console.log('data error');
});
};
$scope.focusNode = function(node) {
var options = {
// position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
scale: 1,
offset: {
x: 0,
y: 0
},
animation: {
duration: 500,
easingFunction: "easeInOutQuad"
}
};
network.focus(node.id, options);
};
});

65
web/views/navbar.html
View File

@@ -1,43 +1,44 @@
<div ng-controller="NavbarCtrl">
<div class="navbar c_grey800">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<div class="navbar c_grey800">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">goBlockchainDataAnalysis</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#!/network">Network</a></li>
<li><a href="#!/sankey">Sankey diagram</a></li>
<li><a href="javascript:void(0)">Timeline</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input class="form-control col-md-8" placeholder="Search" type="text">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/arnaucode/goBlockchainDataAnalysis" target="_blank">Info</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Settings
<a class="navbar-brand" href="/">goBlockchainDataAnalysis</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#!/network">Network</a></li>
<li><a href="#!/addressNetwork">Address Network</a></li>
<li><a href="#!/sankey">Sankey diagram</a></li>
<li><a href="javascript:void(0)">Timeline</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input class="form-control col-md-8" placeholder="Search" type="text">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/arnaucode/goBlockchainDataAnalysis" target="_blank">Info</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Settings
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--
<!--
<div ng-click="goBack()" class="btn"><span class="glyphicon glyphicon-arrow-left"></span> Back</div>
-->
</div>

22
web/views/network/network.html
View File

@@ -1,6 +1,26 @@
<div class="container">
<div class="row">
<div class="col-sm-12">
<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>
</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>

54
web/views/network/network.js
View File

@@ -13,16 +13,19 @@ angular.module('app.network', ['ngRoute'])
$scope.data = [];
$scope.nodes = [];
$scope.edges = [];
var nodes, edges, container;
$scope.selectedNode = {};
var nodes, edges, container, network;
var options = {
layout: {
improvedLayout: false
},
interaction: {
hover: true
},
physics: {
stabilization: false,
//enabled: false
}
/*,
physics:{
//stabilization: false,
// enabled: false
}*/
};
@@ -35,7 +38,28 @@ angular.module('app.network', ['ngRoute'])
nodes: nodes,
edges: edges
};
var network = new vis.Network(container, data, options);
network = new vis.Network(container, data, options);
network.on("click", function(params) {
params.event = "[original event]";
//$scope.selectedNode = JSON.stringify(params, null, 4);
$scope.selectedNode = params;
console.log($scope.selectedNode);
console.log($scope.selectedNode.nodes);
var options = {
// position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
scale: 1,
offset: {
x: 0,
y: 0
},
animation: {
duration: 500,
easingFunction: "easeInOutQuad"
}
};
network.focus($scope.selectedNode.nodes[0], options);
//console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
});
};
$http.get(urlapi + 'map')
@@ -50,4 +74,20 @@ angular.module('app.network', ['ngRoute'])
console.log('data error');
});
$scope.focusNode = function(node) {
var options = {
// position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
scale: 1,
offset: {
x: 0,
y: 0
},
animation: {
duration: 500,
easingFunction: "easeInOutQuad"
}
};
network.focus(node.id, options);
};
});