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) {
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 != "" {
//generate hash from string
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
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)
tx, err := client.GetRawTransactionVerbose(th)
txVi, err := client.GetRawTransactionVerbose(th)
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
blockHash = block.NextHash
@ -99,11 +112,13 @@ func explore(client *btcrpcclient.Client, blockHash string) {
n1.Id = t.From
n1.Label = t.From
n1.Title = t.From
n1.Group = newBlock.Hash
n1.Value = 1
n1.Shape = "dot"
n2.Id = t.To
n2.Label = t.To
n2.Title = t.To
n2.Group = newBlock.Hash
n2.Value = 1
n2.Shape = "dot"
@ -112,6 +127,7 @@ func explore(client *btcrpcclient.Client, blockHash string) {
e.To = t.To
e.Label = t.Amount
e.Txid = t.Txid
e.Arrows = "to"
saveNode(nodeCollection, n1)
saveNode(nodeCollection, n2)

+ 2
- 2
instructions.md

@ -22,11 +22,11 @@ execute wallet:
```json
{
"user": "faircoinrpc",
"user": "usernamerpc",
"pass": "password",
"host": "127.0.0.1",
"port": "3021",
"genesisTx": "7c27ade2c28e67ed3077f8f77b8ea6d36d4f5eba04c099be3c9faa9a4a04c046",
"genesisBlock": "beed44fa5e96150d95d56ebd5d2625781825a9407a5215dd7eda723373a0a1d7"
}
```
```

+ 4
- 4
mongoModels.go

@ -25,13 +25,13 @@ type NodeModel struct {
}
type EdgeModel struct {
Txid string
Txid string `json:"txid"`
From string `json:"from"`
To string `json:"to"`
Label float64 `json:"label"`
Arrows string
Arrows string `json:"arrows"`
}
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) {
result := []NodeModel{}
iter := nodeCollection.Find(bson.M{}).Limit(500).Iter()
iter := nodeCollection.Find(bson.M{}).Limit(100).Iter()
err := iter.All(&result)
return result, err
}
@ -89,7 +89,7 @@ func saveNode(c *mgo.Collection, node NodeModel) {
func getAllEdges() ([]EdgeModel, error) {
result := []EdgeModel{}
iter := edgeCollection.Find(bson.M{}).Limit(500).Iter()
iter := edgeCollection.Find(bson.M{}).Limit(100).Iter()
err := iter.All(&result)
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>
<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">
#mynetwork {
/*width: 75%;*/
height: 600px;
border: 1px solid lightgray;
display: inline-block;
top: 0px;
background: black;
}
@ -54,63 +52,44 @@
</style>
</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