moved datamaps as angular directive

public/css/style.css

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

public/js/controllers.js

@@ -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.nodesActive = _.filter($scope.nodes, function(node) {
-		$scope.lastBlock = _.max($scope.nodes, function(node){ return parseInt(node.stats.block.timestamp); }).stats.block.timestamp;
+			return node.stats.active == true;
-		$scope.upTimeTotal = _.reduce($scope.nodes, function(total, node){ return total + node.stats.uptime.total; }, 0) / $scope.nodes.length;
+		}).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
+				};
+		});
 	}
 }

public/js/directives.js

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

public/js/filters.js

@@ -21,13 +21,7 @@ angular.module('netStatsApp.filters', [])
 })
 .filter('mainClass', function() {
 	return function(node, bestBlock) {
-	  	if( ! node.active)
+	  	return mainClass(node, bestBlock);
-			return 'text-danger';
-
-		if(node.peers === 0)
-			return 'text-danger';
-
-		return timeClass(node.block.timestamp);
 	};
 })
 .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'));

public/js/script.js

@@ -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) {
+	// window.addEventListener("resize", function (event) {
-		map.resize();
+	// 	map.resize();
-	});
+	// });
 
 	var socket = io.connect();
-	socket.emit('ready');
 
 	socket.on('init', function(data){
 		console.log(data);

views/index.jade

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