added zoom & pan to map

This commit is contained in:
cubedro 2015-04-24 19:49:39 +03:00
parent c2cbb295ad
commit 08d240fb70
5 changed files with 63 additions and 10 deletions

View File

@ -291,11 +291,15 @@ table td.peerPropagationChart {
font-size: 12px; font-size: 12px;
} }
.map-holder {
padding: 0;
}
#mapHolder { #mapHolder {
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
height: 284px; height: 282px;
overflow: hidden; overflow: hidden;
} }
@ -389,6 +393,8 @@ svg .line {
fill: none; fill: none;
stroke: #ff0000; stroke: #ff0000;
stroke-width: 1.3px; stroke-width: 1.3px;
stroke-linejoin: round;
stroke-linecap: round;
shape-rendering: geometric-precision; shape-rendering: geometric-precision;
-webkit-svg-shadow: 0 0 7px #fff; -webkit-svg-shadow: 0 0 7px #fff;
} }

View File

@ -236,6 +236,7 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
$scope.lastBlock = $scope.bestStats.block.received; $scope.lastBlock = $scope.bestStats.block.received;
$scope.lastBlocksTime = $scope.bestStats.blockTimes; $scope.lastBlocksTime = $scope.bestStats.blockTimes;
$scope.lastDifficulty = $scope.bestStats.block.difficulty;
$scope.difficultyChart = $scope.bestStats.difficulty; $scope.difficultyChart = $scope.bestStats.difficulty;
$scope.transactionDensity = $scope.bestStats.txDensity; $scope.transactionDensity = $scope.bestStats.txDensity;
$scope.gasSpending = $scope.bestStats.gasSpending; $scope.gasSpending = $scope.bestStats.gasSpending;
@ -262,8 +263,6 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
jQuery('.spark-gasspending').sparkline($scope.gasSpending.reverse(), {type: 'bar'}); jQuery('.spark-gasspending').sparkline($scope.gasSpending.reverse(), {type: 'bar'});
} }
$scope.lastDifficulty = $scope.bestStats.block.difficulty;
$scope.avgBlockTime = _.max($scope.nodes, function(node) { $scope.avgBlockTime = _.max($scope.nodes, function(node) {
return parseInt(node.stats.block.number); return parseInt(node.stats.block.number);
}).stats.blocktimeAvg; }).stats.blocktimeAvg;

View File

@ -21,19 +21,27 @@ angular.module('netStatsApp.directives', []).
highlightOnHover: false, highlightOnHover: false,
popupOnHover: true, popupOnHover: true,
popupTemplate: function(geo, data) { popupTemplate: function(geo, data) {
return ['<div class="tooltip-arrow"></div><div class="hoverinfo ' + data.fillClass + '"><div class="propagationBox"></div><strong>', return ['<div class="tooltip-arrow"></div>',
'<div class="hoverinfo ' + data.fillClass + '">',
'<div class="propagationBox"></div>',
'<strong>',
data.nodeName, data.nodeName,
'</strong></div>'].join(''); '</strong>',
'</div>'].join('');
} }
}; };
scope.init = function() { scope.init = function() {
element.empty(); element.empty();
var width = 628,
height = 244;
scope.map = new Datamap({ scope.map = new Datamap({
element: element[0], element: element[0],
scope: 'world', scope: 'world',
responsive: true, width: 600,
height: 300,
fills: { fills: {
success: '#7BCC3A', success: '#7BCC3A',
info: '#10A0DE', info: '#10A0DE',
@ -52,6 +60,46 @@ angular.module('netStatsApp.directives', []).
borderWidth: 0, borderWidth: 0,
highlightOnHover: false, highlightOnHover: false,
popupOnHover: true popupOnHover: true
},
done: function(datamap) {
var ev;
var zoomListener = d3.behavior.zoom()
.size([width, height])
.scaleExtent([1, 2])
.on("zoom", redraw)
.on("zoomend", animadraw);
function redraw() {
datamap.svg.select(".datamaps-subunits").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
datamap.svg.select(".bubbles").selectAll("circle")
.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")
.attr("r", 3/d3.event.scale);
ev = d3.event;
}
zoomListener(datamap.svg);
function animadraw() {
var x = Math.min(0, Math.max(ev.translate[0], (-1) * width * (ev.scale-1)));
var y = Math.min(0, Math.max(ev.translate[1], (-1) * height * (ev.scale-1)));
datamap.svg.select(".datamaps-subunits")
.transition()
.delay(150)
.duration(750)
.attr("transform", "translate(" + x + "," + y + ")scale(" + ev.scale + ")");
datamap.svg.select(".bubbles").selectAll("circle")
.transition()
.delay(150)
.duration(750)
.attr("transform", "translate(" + x + "," + y + ")scale(" + ev.scale + ")")
.attr("r", 3/ev.scale);
zoomListener.translate([x,y]);
}
} }
}); });

File diff suppressed because one or more lines are too long

View File

@ -135,7 +135,7 @@ block content
div.col-xs-4 div.col-xs-4.stat-holder.map-holder
//- div.col-xs-12 //- div.col-xs-12
nodemap#mapHolder(data="map") nodemap#mapHolder(data="map")