added zoom & pan to map
This commit is contained in:
parent
c2cbb295ad
commit
08d240fb70
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
4
public/js/lib/datamaps.min.js
vendored
4
public/js/lib/datamaps.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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")
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user