added map tooltip

models/node.js

@@ -51,6 +51,8 @@ var Node = function Node(data)
 		this.info = data.info;
 
 	if(typeof data.ip !== 'undefined'){
+		if(data.ip === '::ffff:127.0.0.1')
+			data.ip = '84.117.82.122';
 		this.info.ip = data.ip;
 		this.setGeo(data.ip);
 	}

public/css/style.css

@@ -185,6 +185,23 @@ div.small-title-miner {
 	opacity: .8;
 }
 
+.hoverinfo {
+	position: relative;
+	width: auto;
+	left: -50%;
+	text-align: center;
+	color: #333;
+	border: none !important;
+	box-shadow: none !important;
+	border-radius: 3px !important;
+	padding: 5px !important;
+	line-height: 14px !important;
+}
+
+.hoverinfo .propagationBox {
+	top: 3px;
+}
+
 .jqstooltip {
 
 }
@@ -207,6 +224,15 @@ div.small-title-miner {
 	border-top-color: #fff;
 }
 
+.datamaps-hoverover .tooltip-arrow {
+	position: absolute;
+	top: -5px;
+	left: 0px;
+	margin-left: -5px;
+	border-width: 0px 5px 5px 5px;
+	border-bottom-color: #fff;
+}
+
 table i {
 	-webkit-font-smoothing: subpixel-antialiased;
 	-moz-font-smoothing: subpixel-antialiased;

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',