implemented sankey of block.txs[] and from tx, in frontend and backend

This commit is contained in:
arnaucode
2017-08-30 15:47:20 +02:00
parent 52ec7f0a0a
commit 9092aea11b
7 changed files with 228 additions and 4 deletions

View File

@@ -15,10 +15,13 @@
<div class="col-sm-8">
<div class="panel">
<div class="panel-heading c_deepPurpleG300to500">
<h3 class="panel-title">Block evolution</h3>
<h3 class="panel-title">Block transactions flow</h3>
</div>
<div class="panel-body">
<div class="panel-body" style="height: 300px;overflow-y: hidden;">
<div id="sankeyChart">
<canvas></canvas>
<svg></svg>
</div>
</div>
</div>
</div>

View File

@@ -1,6 +1,6 @@
'use strict';
angular.module('app.block', ['ngRoute'])
angular.module('app.block', ['ngRoute', 'ngSankey'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/block/:height', {
@@ -18,4 +18,34 @@ angular.module('app.block', ['ngRoute'])
}, function(data, status, headers, config) {
console.log('data error');
});
//Sankey
$scope.options = {
chart: '#sankeyChart',
width: 700,
height: 280,
margin: {top: 1, right: 1, bottom: 6, left: 1},
node: {width: 15, padding :10, showValue: false},
value: {format: ',.0f', unit : ''},
dynamicLinkColor: true,
trafficInLinks: true
};
$scope.data={
nodes: [],
links: []
};
$http.get(urlapi + 'block/' + $routeParams.height + '/sankey')
.then(function(data, status, headers, config) {
console.log('data success');
console.log(data);
$scope.data.nodes = data.data.nodes;
$scope.data.links = data.data.links;
console.log($scope.data);
d3.selectAll("svg > *").remove();
let chart = new d3.sankeyChart(data.data, $scope.options);
//$scope.data = data.data;
}, function(data, status, headers, config) {
console.log('data error');
});
});

View File

@@ -45,3 +45,18 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel">
<div class="panel-heading c_deepPurpleG300to500">
<h3 class="panel-title">Transaction flow</h3>
</div>
<div class="panel-body" style="height: 300px;overflow-y: hidden;">
<div id="sankeyChart">
<canvas></canvas>
<svg></svg>
</div>
</div>
</div>
</div>
</div>

View File

@@ -18,4 +18,32 @@ angular.module('app.tx', ['ngRoute'])
}, function(data, status, headers, config) {
console.log('data error');
});
//Sankey
$scope.options = {
chart: '#sankeyChart',
width: 1000,
height: 280,
margin: {top: 1, right: 1, bottom: 6, left: 1},
node: {width: 15, padding :10, showValue: false},
value: {format: ',.0f', unit : ''},
dynamicLinkColor: true,
trafficInLinks: true
};
$scope.data={
nodes: [],
links: []
};
$http.get(urlapi + 'tx/' + $routeParams.txid + '/sankey')
.then(function(data, status, headers, config) {
console.log('data success');
console.log(data);
$scope.data.nodes = data.data.nodes;
$scope.data.links = data.data.links;
console.log($scope.data);
d3.selectAll("svg > *").remove();
let chart = new d3.sankeyChart(data.data, $scope.options);
//$scope.data = data.data;
}, function(data, status, headers, config) {
console.log('data error');
});
});