@ -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> |
@ -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); |
||||
|
}; |
||||
|
}); |
@ -1,43 +1,44 @@ |
|||||
<div ng-controller="NavbarCtrl"> |
<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> |
<span class="icon-bar"></span> |
||||
<span class="icon-bar"></span> |
<span class="icon-bar"></span> |
||||
</button> |
</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> |
<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> |
||||
</div> |
|
||||
<!-- |
|
||||
|
<!-- |
||||
<div ng-click="goBack()" class="btn"><span class="glyphicon glyphicon-arrow-left"></span> Back</div> |
<div ng-click="goBack()" class="btn"><span class="glyphicon glyphicon-arrow-left"></span> Back</div> |
||||
--> |
--> |
||||
</div> |
</div> |