added origin node, upgraded webapp with angularbootstrapmaterial and better files distribution

This commit is contained in:
arnaucode
2017-07-26 19:58:52 +02:00
parent 57f953dcc9
commit 568bd6af46
17 changed files with 898 additions and 179 deletions

View File

@@ -9,6 +9,16 @@ import (
func explore(client *btcrpcclient.Client, blockHash string) { func explore(client *btcrpcclient.Client, blockHash string) {
var realBlocks int var realBlocks int
var nOrigin NodeModel
nOrigin.Id = "origin"
nOrigin.Label = "origin"
nOrigin.Title = "origin"
nOrigin.Group = "origin"
nOrigin.Value = 1
nOrigin.Shape = "dot"
saveNode(nodeCollection, nOrigin)
for blockHash != "" { for blockHash != "" {
//generate hash from string //generate hash from string
bh, err := chainhash.NewHashFromStr(blockHash) bh, err := chainhash.NewHashFromStr(blockHash)
@@ -43,7 +53,7 @@ func explore(client *btcrpcclient.Client, blockHash string) {
Each Tx moves all the wallet amount, and the realTx amount is sent to the destination Each Tx moves all the wallet amount, and the realTx amount is sent to the destination
and the rest of the wallet amount, is send to another owned wallet and the rest of the wallet amount, is send to another owned wallet
*/ */
if len(block.Tx) < 10 { //if len(block.Tx) < 10 {
for k, txHash := range block.Tx { for k, txHash := range block.Tx {
//first Tx is the Fee //first Tx is the Fee
//after first Tx is the Sent Amount //after first Tx is the Sent Amount
@@ -60,7 +70,10 @@ func explore(client *btcrpcclient.Client, blockHash string) {
check(err) check(err)
if len(txVi.Vout[0].ScriptPubKey.Addresses) > 0 { if len(txVi.Vout[0].ScriptPubKey.Addresses) > 0 {
originAddress = txVi.Vout[0].ScriptPubKey.Addresses[0] originAddress = txVi.Vout[0].ScriptPubKey.Addresses[0]
} else {
originAddress = "origin"
} }
} }
for _, Vo := range tx.Vout { for _, Vo := range tx.Vout {
totalAmount = totalAmount + Vo.Value totalAmount = totalAmount + Vo.Value
@@ -87,7 +100,7 @@ func explore(client *btcrpcclient.Client, blockHash string) {
fmt.Println("-----") fmt.Println("-----")
realBlocks++ realBlocks++
} }
} //}
//set the next block //set the next block
blockHash = block.NextHash blockHash = block.NextHash
@@ -99,11 +112,13 @@ func explore(client *btcrpcclient.Client, blockHash string) {
n1.Id = t.From n1.Id = t.From
n1.Label = t.From n1.Label = t.From
n1.Title = t.From n1.Title = t.From
n1.Group = newBlock.Hash
n1.Value = 1 n1.Value = 1
n1.Shape = "dot" n1.Shape = "dot"
n2.Id = t.To n2.Id = t.To
n2.Label = t.To n2.Label = t.To
n2.Title = t.To n2.Title = t.To
n2.Group = newBlock.Hash
n2.Value = 1 n2.Value = 1
n2.Shape = "dot" n2.Shape = "dot"
@@ -112,6 +127,7 @@ func explore(client *btcrpcclient.Client, blockHash string) {
e.To = t.To e.To = t.To
e.Label = t.Amount e.Label = t.Amount
e.Txid = t.Txid e.Txid = t.Txid
e.Arrows = "to"
saveNode(nodeCollection, n1) saveNode(nodeCollection, n1)
saveNode(nodeCollection, n2) saveNode(nodeCollection, n2)

View File

@@ -22,7 +22,7 @@ execute wallet:
```json ```json
{ {
"user": "faircoinrpc", "user": "usernamerpc",
"pass": "password", "pass": "password",
"host": "127.0.0.1", "host": "127.0.0.1",
"port": "3021", "port": "3021",

View File

@@ -25,13 +25,13 @@ type NodeModel struct {
} }
type EdgeModel struct { type EdgeModel struct {
Txid string Txid string `json:"txid"`
From string `json:"from"` From string `json:"from"`
To string `json:"to"` To string `json:"to"`
Label float64 `json:"label"` Label float64 `json:"label"`
Arrows string Arrows string `json:"arrows"`
} }
type NetworkModel struct { type NetworkModel struct {
Nodes []NodeModel Nodes []NodeModel `json:"nodes"`
Edges []EdgeModel Edges []EdgeModel `json:"edges"`
} }

View File

@@ -66,7 +66,7 @@ func saveBlock(c *mgo.Collection, block BlockModel) {
func getAllNodes() ([]NodeModel, error) { func getAllNodes() ([]NodeModel, error) {
result := []NodeModel{} result := []NodeModel{}
iter := nodeCollection.Find(bson.M{}).Limit(500).Iter() iter := nodeCollection.Find(bson.M{}).Limit(100).Iter()
err := iter.All(&result) err := iter.All(&result)
return result, err return result, err
} }
@@ -89,7 +89,7 @@ func saveNode(c *mgo.Collection, node NodeModel) {
func getAllEdges() ([]EdgeModel, error) { func getAllEdges() ([]EdgeModel, error) {
result := []EdgeModel{} result := []EdgeModel{}
iter := edgeCollection.Find(bson.M{}).Limit(500).Iter() iter := edgeCollection.Find(bson.M{}).Limit(100).Iter()
err := iter.All(&result) err := iter.All(&result)
return result, err return result, err
} }

22
web/app.js Normal file
View File

@@ -0,0 +1,22 @@
'use strict';
var urlapi = "http://127.0.0.1:3014/";
//var urlapi = "http://51.255.193.106:3014/";
// Declare app level module which depends on views, and components
angular.module('webApp', [
'ngRoute',
'ngMessages',
'angularBootstrapMaterial',
'app.navbar',
'app.main',
'app.network',
'app.sankey'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({
redirectTo: '/main'
});
}]);

View File

@@ -10,7 +10,10 @@
"angular-route": "^1.6.1", "angular-route": "^1.6.1",
"angular-chart.js": "^1.1.1", "angular-chart.js": "^1.1.1",
"vis": "^4.18.1", "vis": "^4.18.1",
"materialize": "^0.100.1", "mui": "^0.9.20",
"toastr": "^2.1.3" "angular-bootstrap-material": "abm#^0.1.4",
"angular-bootstrap": "^2.5.0",
"angular-messages": "^1.6.5",
"components-font-awesome": "^4.7.0"
} }
} }

View File

@@ -1,53 +0,0 @@
var urlapi = "http://127.0.0.1:3014/";
//var urlapi = document.location.href + "api/";
console.log(urlapi);
var app = angular.module("webApp", ['chart.js']);
var nodes, edges, container;
var options = {
layout:{
improvedLayout: false
}/*,
physics:{
//stabilization: false,
// enabled: false
}*/
};
app.controller("webCtrl", function($scope, $http) {
//chart
$scope.labels=[];
$scope.data=[];
$scope.nodes=[];
$scope.edges=[];
$http.get(urlapi + 'map')
.then(function (data) {
console.log('data success');
console.log(data); // for browser console
$scope.nodes=data.data.Nodes;
$scope.edges=data.data.Edges;
console.log($scope.nodes);
console.log($scope.edges);
$scope.showMap();
//alert("Ara mateix es mostren (entre persones i tweets): " + nodes.length + " nodes.");
//$scope.refreshChart();
}, function(data){
console.log('data error');
console.log(status);
console.log(data);
});
$scope.showMap=function(){
var nodes = $scope.nodes;
var edges = $scope.edges;
container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var network = new vis.Network(container, data, options);
toastr.info("map completed");
};
});

531
web/css/colors.css Normal file
View File

@@ -0,0 +1,531 @@
/* red */
.c_red50{
background: #FFEBEE!important;
color: #000000!important;
}
.c_red100{
background: #FFCDD2!important;
color: #000000!important;
}
.c_red200{
background: #EF9A9A!important;
color: #000000!important;
}
.c_red300{
background: #E57373!important;
color: #ffffff!important;
}
.c_red400{
background: #EF5350!important;
color: #ffffff!important;
}
.c_red500{
background: #F44336!important;
color: #ffffff!important;
}
.c_red600{
background: #E53935!important;
color: #ffffff!important;
}
.c_red700{
background: #D32F2F!important;
color: #ffffff!important;
}
.c_red800{
background: #C62828!important;
color: #ffffff!important;
}
.c_red900{
background: #B71C1C!important;
color: #ffffff!important;
}
.ctext_red400{
color: #EF5350!important;
}
.ctext_red500{
color: #F44336!important;
}
.ctext_red600{
color: #E53935!important;
}
/* pink */
.c_pink50{
background: #FCE4EC!important;
color: #000000!important;
}
.c_pink100{
background: #F8BBD0!important;
color: #000000!important;
}
.c_pink200{
background: #F48FB1!important;
color: #000000!important;
}
.c_pink300{
background: #F06292!important;
color: #ffffff!important;
}
.c_pink400{
background: #EC407A!important;
color: #ffffff!important;
}
.c_pink500{
background: #E91E63!important;
color: #ffffff!important;
}
.c_pink600{
background: #D81B60!important;
color: #ffffff!important;
}
.c_pink700{
background: #C2185B!important;
color: #ffffff!important;
}
.c_pink800{
background: #AD1457!important;
color: #ffffff!important;
}
.c_pink900{
background: #880E4F!important;
color: #ffffff!important;
}
/* deepPurple */
.c_deepPurple50{
background: #EDE7F6!important;
color: #000000!important;
}
.c_deepPurple100{
background: #D1C4E9!important;
color: #000000!important;
}
.c_deepPurple200{
background: #B39DDB!important;
color: #000000!important;
}
.c_deepPurple300{
background: #9575CD!important;
color: #ffffff!important;
}
.c_deepPurple400{
background: #7E57C2!important;
color: #ffffff!important;
}
.c_deepPurple500{
background: #673AB7!important;
color: #ffffff!important;
}
.c_deepPurple600{
background: #5E35B1!important;
color: #ffffff!important;
}
.c_deepPurple700{
background: #512DA8!important;
color: #ffffff!important;
}
.c_deepPurple800{
background: #4527A0!important;
color: #ffffff!important;
}
.c_deepPurple900{
background: #311B92!important;
color: #ffffff!important;
}
.c_deepPurpleG000to200{
background: -moz-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%)!important; /* ff3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(100%, #D1C4E9))!important; /* safari4+,chrome */
background: -webkit-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%)!important; /* safari5.1+,chrome10+ */
background: -o-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%)!important; /* opera 11.10+ */
background: -ms-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%)!important; /* ie10+ */
background: linear-gradient(90deg, #ffffff 0%, #D1C4E9 100%)!important; /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#D1C4E9',GradientType=1 )!important; /* ie6-9 */
}
.c_deepPurpleG500to300{
background: -moz-linear-gradient(219deg, #9575CD 0%, #673AB7 100%)!important; /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #673AB7), color-stop(100%, #9575CD))!important; /* safari4+,chrome */
background: -webkit-linear-gradient(219deg, #9575CD 0%, #673AB7 100%)!important; /* safari5.1+,chrome10+ */
background: -o-linear-gradient(219deg, #9575CD 0%, #673AB7 100%)!important; /* opera 11.10+ */
background: -ms-linear-gradient(219deg, #9575CD 0%, #673AB7 100%)!important; /* ie10+ */
background: linear-gradient(231deg, #9575CD 0%, #673AB7 100%)!important; /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#673AB7', endColorstr='#9575CD',GradientType=1 )!important; /* ie6-9 */
color: #ffffff!important;
}
.c_deepPurpleG300to500{
background: -moz-linear-gradient(42deg, #9575CD 0%, #673AB7 100%)!important; /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #9575CD), color-stop(100%, #673AB7))!important; /* safari4+,chrome */
background: -webkit-linear-gradient(42deg, #9575CD 0%, #673AB7 100%)!important; /* safari5.1+,chrome10+ */
background: -o-linear-gradient(42deg, #9575CD 0%, #673AB7 100%)!important; /* opera 11.10+ */
background: -ms-linear-gradient(42deg, #9575CD 0%, #673AB7 100%)!important; /* ie10+ */
background: linear-gradient(48deg, #9575CD 0%, #673AB7 100%)!important; /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9575CD', endColorstr='#673AB7',GradientType=1 )!important; /* ie6-9 */
color: #ffffff!important;
}
/* indigo */
.c_indigo50{
background:#E8EAF6!important;
color: #000000!important;
}
.c_indigo100{
background:#C5CAE9!important;
color: #000000!important;
}
.c_indigo200{
background:#9FA8DA!important;
color: #000000!important;
}
.c_indigo300{
background:#7986CB!important;
color: #ffffff!important;
}
.c_indigo400{
background:#5C6BC0!important;
color: #ffffff!important;
}
.c_indigo500{
background:#3F51B5!important;
color: #ffffff!important;
}
.c_indigo600{
background:#3949AB!important;
color: #ffffff!important;
}
.c_indigo700{
background:#303F9F!important;
color: #ffffff!important;
}
.c_indigo800{
background:#283593!important;
color: #ffffff!important;
}
.c_indigo900{
background:#1A237E!important;
color: #ffffff!important;
}
.ctext_indigo500{
color: #3F51B5!important;
}
/* blue */
.c_blue50{
background: #E3F2FD!important;
color: #000000!important;
}
.c_blue100{
background: #BBDEFB!important;
color: #000000!important;
}
.c_blue200{
background: #90CAF9!important;
color: #000000!important;
}
.c_blue300{
background: #64B5F6!important;
color: #ffffff!important;
}
.c_blue400{
background: #42A5F5!important;
color: #ffffff!important;
}
.c_blue500{
background: #2196F3!important;
color: #ffffff!important;
}
.c_blue600{
background: #1E88E5!important;
color: #ffffff!important;
}
.c_blue700{
background: #1976D2!important;
color: #ffffff!important;
}
.c_blue800{
background: #1565C0!important;
color: #ffffff!important;
}
.c_blue900{
background: #0D47A1!important;
color: #ffffff!important;
}
/* cyan */
.c_cyan50{
background: #E0F7FA!important;
color: #000000!important;
}
.c_cyan100{
background: #B2EBF2!important;
color: #000000!important;
}
.c_cyan200{
background: #80DEEA!important;
color: #000000!important;
}
.c_cyan300{
background: #4DD0E1!important;
color: #ffffff!important;
}
.c_cyan400{
background: #26C6DA!important;
color: #ffffff!important;
}
.c_cyan500{
background: #00BCD4!important;
color: #ffffff!important;
}
.c_cyan600{
background: #00ACC1!important;
color: #ffffff!important;
}
.c_cyan700{
background: #0097A7!important;
color: #ffffff!important;
}
.c_cyan800{
background: #00838F!important;
color: #ffffff!important;
}
.c_cyan900{
background: #006064!important;
color: #ffffff!important;
}
/* green */
.c_green50{
background: #E8F5E9!important;
color: #000000!important;
}
.c_green100{
background: #C8E6C9!important;
color: #000000!important;
}
.c_green200{
background: #A5D6A7!important;
color: #000000!important;
}
.c_green300{
background: #81C784!important;
color: #ffffff!important;
}
.c_green400{
background: #66BB6A!important;
color: #ffffff!important;
}
.c_green500{
background: #4CAF50!important;
color: #ffffff!important;
}
.c_green600{
background: #43A047!important;
color: #ffffff!important;
}
.c_green700{
background: #388E3C!important;
color: #ffffff!important;
}
.c_green800{
background: #2E7D32!important;
color: #ffffff!important;
}
.c_green900{
background: #1B5E20!important;
color: #ffffff!important;
}
/* yellow */
.c_yellow50{
background: #FFFDE7!important;
color: #000000!important;
}
.c_yellow100{
background: #FFF9C4!important;
color: #000000!important;
}
.c_yellow200{
background: #FFF59D!important;
color: #000000!important;
}
.c_yellow300{
background: #FFF176!important;
color: #ffffff!important;
}
.c_yellow400{
background: #FFEE58!important;
color: #ffffff!important;
}
.c_yellow500{
background: #FFEB3B!important;
color: #ffffff!important;
}
.c_yellow600{
background: #FDD835!important;
color: #ffffff!important;
}
.c_yellow700{
background: #FBC02D!important;
color: #ffffff!important;
}
.c_yellow800{
background: #F9A825!important;
color: #ffffff!important;
}
.c_yellow900{
background: #F57F17!important;
color: #ffffff!important;
}
/* orange */
.c_orange50{
background: #FFF3E0!important;
color: #000000!important;
}
.c_orange100{
background: #FFE0B2!important;
color: #000000!important;
}
.c_orange200{
background: #FFCC80!important;
color: #000000!important;
}
.c_orange300{
background: #FFB74D!important;
color: #ffffff!important;
}
.c_orange400{
background: #FFA726!important;
color: #ffffff!important;
}
.c_orange500{
background: #FF9800!important;
color: #ffffff!important;
}
.c_orange600{
background: #FB8C00!important;
color: #ffffff!important;
}
.c_orange700{
background: #F57C00!important;
color: #ffffff!important;
}
.c_orange800{
background: #EF6C00!important;
color: #ffffff!important;
}
.c_orange900{
background: #E65100!important;
color: #ffffff!important;
}
/* grey */
.c_grey50{
background: #FAFAFA!important;
color: #000000!important;
}
.c_grey100{
background: #F5F5F5!important;
color: #000000!important;
}
.c_grey200{
background: #EEEEEE!important;
color: #000000!important;
}
.c_grey300{
background: #E0E0E0!important;
color: #ffffff!important;
}
.c_grey400{
background: #BDBDBD!important;
color: #ffffff!important;
}
.c_grey500{
background: #9E9E9E!important;
color: #ffffff!important;
}
.c_grey600{
background: #757575!important;
color: #ffffff!important;
}
.c_grey700{
background: #616161!important;
color: #ffffff!important;
}
.c_grey800{
background: #424242!important;
color: #ffffff!important;
}
.c_grey900{
background: #212121!important;
color: #ffffff!important;
}
/* blue grey */
.c_blueGrey50{
background: #ECEFF1!important;
color: #000000!important;
}
.c_blueGrey100{
background: #CFD8DC!important;
color: #000000!important;
}
.c_blueGrey200{
background: #B0BEC5!important;
color: #000000!important;
}
.c_blueGrey300{
background: #90A4AE!important;
color: #ffffff!important;
}
.c_blueGrey400{
background: #78909C!important;
color: #ffffff!important;
}
.c_blueGrey500{
background: #607D8B!important;
color: #ffffff!important;
}
.c_blueGrey600{
background: #546E7A!important;
color: #ffffff!important;
}
.c_blueGrey700{
background: #455A64!important;
color: #ffffff!important;
}
.c_blueGrey800{
background: #37474F!important;
color: #ffffff!important;
}
.c_blueGrey900{
background: #263238!important;
color: #ffffff!important;
}
.ctext_blueGrey500{
color: #607D8B!important;
}
.c_blueGradient1{
background: #2d4a56!important;
background: -moz-linear-gradient(left, #2d4a56 0%, #1c2b36 100%)!important;
background: -webkit-linear-gradient(left, #2d4a56 0%,#1c2b36 100%)!important;
background: linear-gradient(to right, #2d4a56 0%,#1c2b36 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d4a56', endColorstr='#1c2b36',GradientType=1 )!important;
color: rgba(255,255,255,0.9)!important;
}
.c_blue2{
background: rgb(28,43,54)!important;
color: rgba(255,255,255,0.8)!important;
}
.cf_green2{
color: rgb(32,158,145)!important;
}

View File

@@ -2,27 +2,25 @@
<html> <html>
<head> <head>
<meta charset=utf-8> <meta charset="utf-8">
<!--Import Google Icon Font--> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>goBlockchainDataAnalysis</title>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="bower_components/materialize/dist/css/materialize.min.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile--> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700'>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Material Design fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css">
<link href="css/colors.css" rel="stylesheet">
<script type="text/javascript" src="bower_components/vis/dist/vis.min.js"></script> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="bower_components/vis/dist/vis.min.css" rel="stylesheet" type="text/css" /> <link href="css/ionic.app.css" rel="stylesheet">
<link href="bower_components/vis/dist/vis-network.min.css" rel="stylesheet" type="text/css" /> -->
<style type="text/css"> <style type="text/css">
#mynetwork { #mynetwork {
/*width: 75%;*/
height: 600px;
border: 1px solid lightgray;
display: inline-block;
top: 0px;
background: black; background: black;
} }
@@ -54,63 +52,44 @@
</style> </style>
</head> </head>
<body> <body ng-app="webApp">
<div ng-include="'views/navbar.html'"></div>
<div ng-view></div>
<nav>
<div class="nav-wrapper teal lighten-2">
<a href="#" class="brand-logo">goBlockchainDataAnalysis</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="https://github.com/arnaucode/goBlockchainDataAnalysis" target="_blank"><b>Code</b></a></li>
</ul>
</div>
</nav>
<div class="row" ng-app="webApp" ng-controller="webCtrl">
<div class="col s3 o-height600">
<b>Comptes:</b><br>
<div class="input-field col s12">
<i class="material-icons prefix">search</i>
<input ng-model="userfilter" id="search" type="text" class="validate">
<label for="search">Search...</label>
</div>
<ul class="collection o-overflowScroll o-height500">
<li ng-click="clickUser(node)" class="collection-item o-mouseoverGrey" ng-repeat="node in nodes">
<img ng-src="{{node.image}}" alt="" class="circle">
<span class="title">{{node.id}}</title>
<i class="material-icons">launch</i>
</a>
</li>
</ul>
</div>
<div id="mynetwork" class="col s9">
</div>
</div>
<div class="row">
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="bower_components/materialize/dist/js/materialize.min.js"></script>
<!--<script src="/socket.io/socket.io.js"></script>-->
<!-- Angular js --> <!-- Angular js -->
<script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<!-- Bootstrap Material Design -->
<link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" href="bower_components/bootstrap-material-design/dist/css/ripples.css">
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-bootstrap-material/dist/angular-bootstrap-material.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>
<link type="text/css" rel="stylesheet" href="bower_components/toastr/toastr.css"/>
<script type="text/javascript" src="bower_components/toastr/toastr.js"></script>
<script type="text/javascript" src="controllers.js"></script> <!-- visjs -->
</body> <script type="text/javascript" src="bower_components/vis/dist/vis.min.js"></script>
</html> <link href="bower_components/vis/dist/vis.min.css" rel="stylesheet" type="text/css" />
<link href="bower_components/vis/dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<!-- app's js -->
<script src="app.js"></script>
<script src="views/navbar.js"></script>
<script src="views/main/main.js"></script>
<script src="views/network/network.js"></script>
<script src="views/sankey/sankey.js"></script>
</body>
</html>

54
web/views/main/main.html Normal file
View File

@@ -0,0 +1,54 @@
<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 blocks</h3>
</div>
<div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
</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">
<div class="panel-heading c_blueGrey300">
<h3 class="panel-title">Other</h3>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>

14
web/views/main/main.js Normal file
View File

@@ -0,0 +1,14 @@
'use strict';
angular.module('app.main', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/main', {
templateUrl: 'views/main/main.html',
controller: 'MainCtrl'
});
}])
.controller('MainCtrl', function($scope, $http) {
});

43
web/views/navbar.html Normal file
View File

@@ -0,0 +1,43 @@
<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">
<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
<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>
</div>
</div>
</div>
<!--
<div ng-click="goBack()" class="btn"><span class="glyphicon glyphicon-arrow-left"></span> Back</div>
-->
</div>

18
web/views/navbar.js Normal file
View File

@@ -0,0 +1,18 @@
'use strict';
angular.module('app.navbar', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/navbar', {
templateUrl: 'views/navbar/navbar.html',
controller: 'NavbarCtrl'
});
}])
.controller('NavbarCtrl', function($scope, $http, $routeParams, $location) {
$scope.locationHash = $location.path();
$scope.goBack = function() {
console.log("goBack");
window.history.back();
};
});

View File

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

View File

@@ -0,0 +1,53 @@
'use strict';
angular.module('app.network', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/network', {
templateUrl: 'views/network/network.html',
controller: 'NetworkCtrl'
});
}])
.controller('NetworkCtrl', function($scope, $http, $routeParams) {
$scope.data = [];
$scope.nodes = [];
$scope.edges = [];
var nodes, edges, container;
var options = {
layout: {
improvedLayout: false
}
/*,
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
};
var network = new vis.Network(container, data, options);
};
$http.get(urlapi + 'map')
.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');
});
});

View File

@@ -0,0 +1,12 @@
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel-heading c_blueGrey300">
<h3 class="panel-title">Sankey</h3>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,15 @@
'use strict';
angular.module('app.sankey', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/sankey', {
templateUrl: 'views/sankey/sankey.html',
controller: 'SankeyCtrl'
});
}])
.controller('SankeyCtrl', function($scope, $http, $routeParams) {
});