Browse Source

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

master
arnaucode 7 years ago
parent
commit
568bd6af46
17 changed files with 895 additions and 176 deletions
  1. +54
    -38
      exploreBlockchain.go
  2. +2
    -2
      instructions.md
  3. +4
    -4
      mongoModels.go
  4. +2
    -2
      mongoOperations.go
  5. +22
    -0
      web/app.js
  6. +17
    -14
      web/bower.json
  7. +0
    -53
      web/controllers.js
  8. +531
    -0
      web/css/colors.css
  9. +42
    -63
      web/index.html
  10. +54
    -0
      web/views/main/main.html
  11. +14
    -0
      web/views/main/main.js
  12. +43
    -0
      web/views/navbar.html
  13. +18
    -0
      web/views/navbar.js
  14. +12
    -0
      web/views/network/network.html
  15. +53
    -0
      web/views/network/network.js
  16. +12
    -0
      web/views/sankey/sankey.html
  17. +15
    -0
      web/views/sankey/sankey.js

+ 54
- 38
exploreBlockchain.go

@ -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,52 +53,55 @@ 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 {
for k, txHash := range block.Tx {
//first Tx is the Fee
//after first Tx is the Sent Amount
if k > 0 {
th, err := chainhash.NewHashFromStr(txHash)
//if len(block.Tx) < 10 {
for k, txHash := range block.Tx {
//first Tx is the Fee
//after first Tx is the Sent Amount
if k > 0 {
th, err := chainhash.NewHashFromStr(txHash)
check(err)
tx, err := client.GetRawTransactionVerbose(th)
check(err)
var originAddress string
for _, Vi := range tx.Vin {
th, err := chainhash.NewHashFromStr(Vi.Txid)
check(err) check(err)
tx, err := client.GetRawTransactionVerbose(th)
txVi, err := client.GetRawTransactionVerbose(th)
check(err) check(err)
var originAddress string
for _, Vi := range tx.Vin {
th, err := chainhash.NewHashFromStr(Vi.Txid)
check(err)
txVi, err := client.GetRawTransactionVerbose(th)
check(err)
if len(txVi.Vout[0].ScriptPubKey.Addresses) > 0 {
originAddress = txVi.Vout[0].ScriptPubKey.Addresses[0]
}
}
for _, Vo := range tx.Vout {
totalAmount = totalAmount + Vo.Value
var blockTx TxModel
blockTx.Txid = tx.Txid
blockTx.Amount = Vo.Value
blockTx.From = originAddress
blockTx.To = Vo.ScriptPubKey.Addresses[0]
newBlock.Tx = append(newBlock.Tx, blockTx)
if len(txVi.Vout[0].ScriptPubKey.Addresses) > 0 {
originAddress = txVi.Vout[0].ScriptPubKey.Addresses[0]
} else {
originAddress = "origin"
} }
} }
}
for _, Vo := range tx.Vout {
totalAmount = totalAmount + Vo.Value
if totalAmount > 0 {
newBlock.Amount = totalAmount
saveBlock(blockCollection, newBlock)
fmt.Print("Height: ")
fmt.Println(newBlock.Height)
fmt.Print("Amount: ")
fmt.Println(newBlock.Amount)
fmt.Print("Fee: ")
fmt.Println(newBlock.Fee)
fmt.Println("-----")
realBlocks++
var blockTx TxModel
blockTx.Txid = tx.Txid
blockTx.Amount = Vo.Value
blockTx.From = originAddress
blockTx.To = Vo.ScriptPubKey.Addresses[0]
newBlock.Tx = append(newBlock.Tx, blockTx)
}
} }
} }
if totalAmount > 0 {
newBlock.Amount = totalAmount
saveBlock(blockCollection, newBlock)
fmt.Print("Height: ")
fmt.Println(newBlock.Height)
fmt.Print("Amount: ")
fmt.Println(newBlock.Amount)
fmt.Print("Fee: ")
fmt.Println(newBlock.Fee)
fmt.Println("-----")
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)

+ 2
- 2
instructions.md

@ -22,11 +22,11 @@ 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",
"genesisTx": "7c27ade2c28e67ed3077f8f77b8ea6d36d4f5eba04c099be3c9faa9a4a04c046", "genesisTx": "7c27ade2c28e67ed3077f8f77b8ea6d36d4f5eba04c099be3c9faa9a4a04c046",
"genesisBlock": "beed44fa5e96150d95d56ebd5d2625781825a9407a5215dd7eda723373a0a1d7" "genesisBlock": "beed44fa5e96150d95d56ebd5d2625781825a9407a5215dd7eda723373a0a1d7"
} }
```
```

+ 4
- 4
mongoModels.go

@ -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
Edges []EdgeModel
Nodes []NodeModel `json:"nodes"`
Edges []EdgeModel `json:"edges"`
} }

+ 2
- 2
mongoOperations.go

@ -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
- 0
web/app.js

@ -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'
});
}]);

+ 17
- 14
web/bower.json

@ -1,16 +1,19 @@
{ {
"name": "goBlockchainDataAnalysis",
"description": "goBlockchainDataAnalysis",
"version": "0.0.0",
"homepage": "https://github.com/arnaucode/goBlockchainDataAnalysis",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "^1.6.2",
"angular-route": "^1.6.1",
"angular-chart.js": "^1.1.1",
"vis": "^4.18.1",
"materialize": "^0.100.1",
"toastr": "^2.1.3"
}
"name": "goBlockchainDataAnalysis",
"description": "goBlockchainDataAnalysis",
"version": "0.0.0",
"homepage": "https://github.com/arnaucode/goBlockchainDataAnalysis",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "^1.6.2",
"angular-route": "^1.6.1",
"angular-chart.js": "^1.1.1",
"vis": "^4.18.1",
"mui": "^0.9.20",
"angular-bootstrap-material": "abm#^0.1.4",
"angular-bootstrap": "^2.5.0",
"angular-messages": "^1.6.5",
"components-font-awesome": "^4.7.0"
}
} }

+ 0
- 53
web/controllers.js

@ -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
- 0
web/css/colors.css

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

+ 42
- 63
web/index.html

@ -2,27 +2,25 @@
<html> <html>
<head> <head>
<meta charset=utf-8>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="bower_components/materialize/dist/css/materialize.min.css" media="screen,projection" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>goBlockchainDataAnalysis</title>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700'>
<!-- 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">
<script type="text/javascript" src="bower_components/vis/dist/vis.min.js"></script>
<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" />
<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"> <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>
<!-- Angular js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<div class="row" ng-app="webApp" ng-controller="webCtrl">
<!-- 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">
<div class="col s3 o-height600">
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-bootstrap-material/dist/angular-bootstrap-material.js"></script>
<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>
<!-- Angular Chart -->
<script src="bower_components/chart.js/dist/Chart.min.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
<!--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 -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- visjs -->
<script type="text/javascript" src="bower_components/vis/dist/vis.min.js"></script>
<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" />
<!-- Angular Chart -->
<script src="bower_components/chart.js/dist/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>
<!-- 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>
<script type="text/javascript" src="controllers.js"></script>
</body>
</html>
</html>

+ 54
- 0
web/views/main/main.html

@ -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
- 0
web/views/main/main.js

@ -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
- 0
web/views/navbar.html

@ -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
- 0
web/views/navbar.js

@ -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();
};
});

+ 12
- 0
web/views/network/network.html

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

+ 53
- 0
web/views/network/network.js

@ -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');
});
});

+ 12
- 0
web/views/sankey/sankey.html

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

+ 15
- 0
web/views/sankey/sankey.js

@ -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) {
});

Loading…
Cancel
Save