grassrootseconomics/ethstats-server
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

moved datamaps as angular directive

Browse Source
This commit is contained in:
Marian Oancea 2015-02-08 17:03:05 +02:00
parent 2be95fb402
commit dad7b8f2ba
6 changed files with 115 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/css/style.css
View File

@ -62,6 +62,7 @@ table td i {
}
#mapHolder {
display: block;
position: relative;
padding-bottom: 56.25%;
height: 0;

54
public/js/controllers.js
View File

@ -2,7 +2,7 @@
/* Controllers */
function StatsCtrl($scope, socket, _) {
function StatsCtrl($scope, $filter, socket, _) {
// Main Stats init
// ---------------
@ -13,16 +13,28 @@ function StatsCtrl($scope, socket, _) {
$scope.lastBlock = 0;
$scope.upTimeTotal = 0;
$scope.map = [
{
radius: 5,
latitude: 11.515,
longitude: 165.1619
}
];
// Socket listeners
// ----------------
socket.on('init', function(data){
socket.emit('ready');
socket.on('init', function(data)
{
$scope.nodes = data.nodes;
updateStats();
});
socket.on('update', function(data){
socket.on('update', function(data)
{
$scope.nodes[data.id] = data;
updateStats();
@ -31,9 +43,37 @@ function StatsCtrl($scope, socket, _) {
function updateStats()
{
$scope.nodesTotal = $scope.nodes.length;
$scope.nodesActive = _.filter($scope.nodes, function(node){ return node.stats.active == true; }).length;
$scope.bestBlock = _.max($scope.nodes, function(node){ return parseInt(node.stats.block.height); }).stats.block.height;
$scope.lastBlock = _.max($scope.nodes, function(node){ return parseInt(node.stats.block.timestamp); }).stats.block.timestamp;
$scope.upTimeTotal = _.reduce($scope.nodes, function(total, node){ return total + node.stats.uptime.total; }, 0) / $scope.nodes.length;
$scope.nodesActive = _.filter($scope.nodes, function(node) {
return node.stats.active == true;
}).length;
$scope.bestBlock = _.max($scope.nodes, function(node) {
return parseInt(node.stats.block.height);
}).stats.block.height;
$scope.lastBlock = _.max($scope.nodes, function(node) {
return parseInt(node.stats.block.timestamp);
}).stats.block.timestamp;
$scope.upTimeTotal = _.reduce($scope.nodes, function(total, node) {
return total + node.stats.uptime.total;
}, 0) / $scope.nodes.length;
$scope.map = _.map($scope.nodes, function(node) {
if(node.geo != null)
return {
radius: 3,
latitude: node.geo.ll[0],
longitude: node.geo.ll[1],
fillKey: $filter('bubbleClass')(node, $scope.bestBlock)
};
else
return {
radius: 0,
latitude: 0,
longitude: 0
};
});
}
}

47
public/js/directives.js
View File

@ -8,4 +8,49 @@ angular.module('netStatsApp.directives', []).
return function(scope, elm, attrs) {
elm.text(version);
};
}]);
}]).
directive('nodemap', ['$compile', function($compile) {
return {
restrict: 'EA',
scope: {
data: '='
},
link: function(scope, element, attrs) {
element.empty();
scope.map = new Datamap({
element: element[0],
scope: 'world',
responsive: true,
fills: {
success: '#7bcc3a',
info: '#10a0de',
warning: '#FFD162',
danger: '#F74B4B',
defaultFill: '#282828'
},
geographyConfig: {
borderWidth: 0,
borderColor: '#000',
highlightOnHover: false,
popupOnHover: false
},
bubblesConfig: {
borderWidth: 0,
popupOnHover: false,
highlightOnHover: false
}
});
scope.map.bubbles(scope.data);
scope.$watch('data', function() {
scope.map.bubbles(scope.data, {
borderWidth: 0,
popupOnHover: false,
highlightOnHover: false
});
}, true);
}
};
}]);

24
public/js/filters.js
View File

@ -21,13 +21,7 @@ angular.module('netStatsApp.filters', [])
})
.filter('mainClass', function() {
return function(node, bestBlock) {
if( ! node.active)
return 'text-danger';
if(node.peers === 0)
return 'text-danger';
return timeClass(node.block.timestamp);
return mainClass(node, bestBlock);
};
})
.filter('peerClass', function() {
@ -78,8 +72,24 @@ angular.module('netStatsApp.filters', [])
return '';
};
})
.filter('bubbleClass', function() {
return function(node, bestBlock) {
return mainClass(node, bestBlock).replace('text-', '');
}
});
function mainClass(node, bestBlock)
{
if( ! node.active)
return 'text-danger';
if(node.peers === 0)
return 'text-danger';
return timeClass(node.block.timestamp);
}
function peerClass(peers)
{
return (peers <= 1 ? 'text-danger' : (peers > 1 && peers < 4 ? 'text-warning' : 'text-success'));

61
public/js/script.js
View File

@ -13,68 +13,13 @@
}
}
var map = new Datamap({
scope: 'world',
responsive: true,
element: mapHolder,
fills: {
defaultFill: '#282828'
},
geographyConfig: {
borderWidth: 0,
borderColor: '#000',
highlightOnHover: false,
popupOnHover: false
},
arcConfig: {
strokeColor: '#10A0DE',
strokeWidth: 1,
arcSharpness: 1,
animationSpeed: 600
}
});
map.arc([
{
origin: {
latitude: 40.7089,
longitude: -74.0012
},
destination: {
latitude: 37.618889,
longitude: -122.375
}
},
{
origin: {
latitude: 40.7089,
longitude: -74.0012
},
destination: {
latitude: 40.639722,
longitude: 73.778889
}
},
{
origin: {
latitude: 40.7089,
longitude: -74.0012
},
destination: {
latitude: 25.793333,
longitude: -0.290556
}
}
], { strokeColor: '#10A0DE' });
d3.select(mapHolder).select('svg').attr('data-width', mapHolder.clientWidth);
window.addEventListener("resize", function (event) {
map.resize();
});
// window.addEventListener("resize", function (event) {
// map.resize();
// });
var socket = io.connect();
socket.emit('ready');
socket.on('init', function(data){
console.log(data);

2
views/index.jade
View File

@ -47,7 +47,7 @@ block content
div.col-lg-6
div.col-xs-12
div#mapHolder
nodemap#mapHolder(data="map")
div.clearfix