added map tooltip

public/js/controllers.js

@@ -146,7 +146,7 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 			height: 18,
 			barWidth : 2,
 			barSpacing : 1,
-			tooltipSuffix: 'ms',
+			tooltipSuffix: ' ms',
 			colorMap: jQuery.range_map({
 				'0:1': '#10a0de',
 				'1:1000': '#7bcc3a',
@@ -205,7 +205,7 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 					$scope.miners = $scope.bestStats.miners;
 				}
 
-				jQuery('.spark-blocktimes').sparkline($scope.lastBlocksTime.reverse(), {type: 'bar', tooltipSuffix: 's'});
+				jQuery('.spark-blocktimes').sparkline($scope.lastBlocksTime.reverse(), {type: 'bar', tooltipSuffix: ' s'});
 				jQuery('.spark-difficulty').sparkline($scope.difficultyChange.reverse(), {type: 'bar'});
 				jQuery('.spark-transactions').sparkline($scope.transactionDensity.reverse(), {type: 'bar'});
 				jQuery('.spark-gasspending').sparkline($scope.gasSpending.reverse(), {type: 'bar'});
@@ -224,12 +224,16 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 			}, 0) / $scope.nodes.length;
 
 			$scope.map = _.map($scope.nodes, function(node) {
+				var fill = $filter('bubbleClass')(node.stats, $scope.bestBlock);
+
 				if(node.geo != null)
 					return {
-						radius: 2,
+						radius: 3,
 						latitude: node.geo.ll[0],
 						longitude: node.geo.ll[1],
-						fillKey: $filter('bubbleClass')(node.stats, $scope.bestBlock)
+						nodeName: node.info.name,
+						fillClass: "text-" + fill,
+						fillKey: fill,
 					};
 				else
 					return {

public/js/directives.js

@@ -16,6 +16,17 @@ angular.module('netStatsApp.directives', []).
 				data: '='
 			},
 			link: function(scope, element, attrs) {
+				var bubbleConfig = {
+					borderWidth: 0,
+					highlightOnHover: false,
+					popupOnHover: true,
+					popupTemplate: function(geo, data) {
+						return ['<div class="tooltip-arrow"></div><div class="hoverinfo ' + data.fillClass + '"><div class="propagationBox"></div><strong>',
+								data.nodeName,
+								'</strong></div>'].join('');
+					}
+				};
+
 				scope.init = function() {
 					element.empty();
 
@@ -24,9 +35,10 @@ angular.module('netStatsApp.directives', []).
 						scope: 'world',
 						responsive: true,
 						fills: {
-							success: '#7bcc3a',
-							info: '#10a0de',
+							success: '#7BCC3A',
+							info: '#10A0DE',
 							warning: '#FFD162',
+							orange: '#FF8A00',
 							danger: '#F74B4B',
 							defaultFill: '#282828'
 						},
@@ -38,16 +50,12 @@ angular.module('netStatsApp.directives', []).
 						},
 						bubblesConfig: {
 							borderWidth: 0,
-							popupOnHover: false,
-							highlightOnHover: false
+							highlightOnHover: false,
+							popupOnHover: true
 						}
 					});
 
-					scope.map.bubbles(scope.data, {
-						borderWidth: 0,
-						popupOnHover: false,
-						highlightOnHover: false
-					});
+					scope.map.bubbles(scope.data, bubbleConfig);
 				}
 
 				scope.init();
@@ -57,11 +65,7 @@ angular.module('netStatsApp.directives', []).
 				};
 
 				scope.$watch('data', function() {
-					scope.map.bubbles(scope.data, {
-						borderWidth: 0,
-						popupOnHover: false,
-						highlightOnHover: false
-					});
+					scope.map.bubbles(scope.data, bubbleConfig);
 				}, true);
 
 				scope.$watch(function() {

public/js/filters.js

@@ -303,7 +303,6 @@ function mainClass(node, bestBlock)
 	if(node.peers === 0)
 		return 'text-danger';
 
-	// return timeClass(node.block.timestamp);
 	return peerClass(node.peers, node.active);
 }
 

public/js/script.js

@@ -10,7 +10,7 @@
 	$.fn.sparkline.defaults.bar.barSpacing = 2;
 	$.fn.sparkline.defaults.bar.tooltipClassname = 'jqstooltip';
 	$.fn.sparkline.defaults.bar.tooltipOffsetX = 0;
-	$.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('<div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">{{prefix}}{{value}}{{suffix}}</div>');
+	$.fn.sparkline.defaults.bar.tooltipFormat = $.spformat('<div class="tooltip-arrow"></div><div class="tooltip-inner">{{prefix}}{{value}}{{suffix}}</div>');
 	$.fn.sparkline.defaults.bar.colorMap = $.range_map({
 		'0:5': '#10a0de',
 		'6:12': '#7bcc3a',