Merge pull request #71 from cubedro/develop

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',
+							success: '#7BCC3A',
-							info: '#10a0de',
+							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, {
+					scope.map.bubbles(scope.data, bubbleConfig);
-						borderWidth: 0,
-						popupOnHover: false,
-						highlightOnHover: false
-					});
 				}
 
 				scope.init();
@@ -57,11 +65,7 @@ angular.module('netStatsApp.directives', []).
 				};
 
 				scope.$watch('data', function() {
-					scope.map.bubbles(scope.data, {
+					scope.map.bubbles(scope.data, bubbleConfig);
-						borderWidth: 0,
-						popupOnHover: false,
-						highlightOnHover: false
-					});
 				}, true);
 
 				scope.$watch(function() {

public/js/filters.js

@@ -45,16 +45,9 @@ angular.module('netStatsApp.filters', [])
 .filter('nodeVersion', function($sce) {
 	return function(version) {
 		if(typeof version !== 'undefined') {
-			version = version.replace('eth version ', 'v')
+			return $sce.trustAsHtml(version);
-				.replace("\n" + 'Network protocol version: ', ' (')
-				.replace("\n" + 'Client database version: ', ',')
-				.replace("\n" + 'Build: ', ') - ')
-				.replace('/Debug', '')
-				.replace('/.', '');
 		} else
 			return '';
-
-		return $sce.trustAsHtml(version);
 	};
 })
 .filter('blockClass', function() {
@@ -219,7 +212,7 @@ angular.module('netStatsApp.filters', [])
 		}
 
 		if(node.info.contact !== '') {
-			string = "Contact: <b>" + node.info.contact + "</b>";
+			string = "Contact: <b>" + (typeof node.info.contact !== 'undefined' ? node.info.contact : '-') + "</b>";
 
 			tooltip.push(string);
 		}
@@ -241,13 +234,13 @@ angular.module('netStatsApp.filters', [])
 		}
 
 		if(node.info.net !== '') {
-			string = "Network: <b>" + node.info.net + "</b>";
+			string = "Network: <b>" + (typeof node.info.net !== 'undefined' ? node.info.net : '-') + "</b>";
 
 			tooltip.push(string);
 		}
 
 		if(node.info.protocol !== '') {
-			string = "Protocol: <b>" + node.info.protocol + "</b>";
+			string = "Protocol: <b>" + (typeof node.info.protocol !== 'undefined' ? node.info.protocol : '-') + "</b>";
 
 			tooltip.push(string);
 		}
@@ -259,7 +252,7 @@ angular.module('netStatsApp.filters', [])
 		}
 
 		if(node.info.client !== '') {
-			string = "API: <b>" + node.info.client + "</b>";
+			string = "API: <b>" + (typeof node.info.client !== 'undefined' ? node.info.client : '> 0.0.3') + "</b>";
 
 			tooltip.push(string);
 		}
@@ -303,7 +296,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',