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