Skip to content

N
nexpie-grafana-theme
Commit c68e68a0 by Zachary Tong
Options

Fix bug where key listeners would die if >1 graph present

parent 604fc067
Showing with 59 additions and 17 deletions
panels/map2/display/binning.js
function displayBinning(scope, dimensions, projection) { function displayBinning(scope, dimensions, projection, path) {
/** /**
* Hexbin-specific setup * Hexbin-specific setup
*/ */
...@@ -26,7 +27,11 @@ function displayBinning(scope, dimensions, projection) { ...@@ -26,7 +27,11 @@ function displayBinning(scope, dimensions, projection) {
}); });
} else { } else {
binPoints = points;
binPoints = _.map(scope.data, function (k, v) {
var decoded = geohash.decode(v);
return projection([decoded.longitude, decoded.latitude]);
});
} }
//bin and sort the points, so we can set the various ranges appropriately //bin and sort the points, so we can set the various ranges appropriately
...@@ -50,7 +55,7 @@ function displayBinning(scope, dimensions, projection) { ...@@ -50,7 +55,7 @@ function displayBinning(scope, dimensions, projection) {
*/ */
scope.g.selectAll(".hexagon") scope.g.selectAll("hexagon")
.data(binnedPoints) .data(binnedPoints)
.enter().append("path") .enter().append("path")
.attr("d", function (d) { .attr("d", function (d) {
......
panels/map2/display/bullseye.js
...@@ -13,8 +13,6 @@ function displayBullseye(scope, projection, path) { ...@@ -13,8 +13,6 @@ function displayBullseye(scope, projection, path) {
.data(data) .data(data)
.enter().append("path") .enter().append("path")
.datum(function(d) { .datum(function(d) {
console.log(d);
return circle.origin([d.lon, d.lat]).angle(1000 / 6371 * degrees)(); return circle.origin([d.lon, d.lat]).angle(1000 / 6371 * degrees)();
}) })
.attr("d", path) .attr("d", path)
......
panels/map2/display/geopoints.js
function displayGeopoints(scope) { function displayGeopoints(scope, path) {
/*
scope.g.selectAll("circles.points") scope.g.selectAll("circles.points")
.data(points) .data(points)
.enter() .enter()
...@@ -8,4 +10,19 @@ function displayGeopoints(scope) { ...@@ -8,4 +10,19 @@ function displayGeopoints(scope) {
.attr("transform", function (d) { .attr("transform", function (d) {
return "translate(" + d[0] + "," + d[1] + ")"; return "translate(" + d[0] + "," + d[1] + ")";
}); });
*/
var circle = d3.geo.circle();
var degrees = 180 / Math.PI
scope.g.selectAll("circles.points")
.data(points)
.enter().append("path")
.datum(function(d) {
return circle.origin([d[0], d[1]]).angle(5 / 6371 * degrees)();
})
.attr("d", path)
.attr("class", "geopoint");
} }
\ No newline at end of file
panels/map2/module.html
...@@ -37,6 +37,12 @@ ...@@ -37,6 +37,12 @@
stroke-width: .5px; stroke-width: .5px;
fill: none; fill: none;
} }
.geopoint {
stroke: #000;
stroke-width: .5px;
fill: #000;
}
</style> </style>
<span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'> <span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i> <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
......
panels/map2/module.js
...@@ -61,7 +61,10 @@ angular.module('kibana.map2', []) ...@@ -61,7 +61,10 @@ angular.module('kibana.map2', [])
$scope.get_data(); $scope.get_data();
}); });
// Now that we're all setup, request the time from our group // Now that we're all setup, request the time from our group
eventBus.broadcast($scope.$id, $scope.panel.group, 'get_time') eventBus.broadcast($scope.$id, $scope.panel.group, 'get_time');
}; };
$scope.isNumber = function (n) { $scope.isNumber = function (n) {
...@@ -193,6 +196,8 @@ angular.module('kibana.map2', []) ...@@ -193,6 +196,8 @@ angular.module('kibana.map2', [])
scope.worldNames = null; scope.worldNames = null;
scope.svg = null; scope.svg = null;
scope.g = null; scope.g = null;
scope.ctrlKey = false;
// Receive render events // Receive render events
scope.$on('render', function () { scope.$on('render', function () {
...@@ -220,6 +225,8 @@ angular.module('kibana.map2', []) ...@@ -220,6 +225,8 @@ angular.module('kibana.map2', [])
scripts.wait(function () { scripts.wait(function () {
elem.text(''); elem.text('');
//these files can take a bit of time to process, so save them in a variable //these files can take a bit of time to process, so save them in a variable
//and use those on redraw //and use those on redraw
if (scope.worldData === null || scope.worldNames === null) { if (scope.worldData === null || scope.worldNames === null) {
...@@ -244,6 +251,7 @@ angular.module('kibana.map2', []) ...@@ -244,6 +251,7 @@ angular.module('kibana.map2', [])
var world = scope.worldData, var world = scope.worldData,
names = scope.worldNames; names = scope.worldNames;
...@@ -315,7 +323,7 @@ angular.module('kibana.map2', []) ...@@ -315,7 +323,7 @@ angular.module('kibana.map2', [])
//Geocoded points are decoded into lat/lon, then projected onto x/y //Geocoded points are decoded into lat/lon, then projected onto x/y
points = _.map(scope.data, function (k, v) { points = _.map(scope.data, function (k, v) {
var decoded = geohash.decode(v); var decoded = geohash.decode(v);
return projection([decoded.longitude, decoded.latitude]); return [decoded.longitude, decoded.latitude];
}); });
...@@ -325,14 +333,14 @@ angular.module('kibana.map2', []) ...@@ -325,14 +333,14 @@ angular.module('kibana.map2', [])
* D3 SVG Setup * D3 SVG Setup
*/ */
var ctrlKey = false; //set up some key listeners for our sphere dragging
//set up listener for ctrl key window.focus();
d3.select("body") d3.select(window)
.on("keydown", function() { .on("keydown", function() {
ctrlKey = d3.event.ctrlKey; scope.ctrlKey = d3.event.ctrlKey;
}) })
.on("keyup", function() { .on("keyup", function() {
ctrlKey = d3.event.ctrlKey; scope.ctrlKey = d3.event.ctrlKey;
}); });
//remove our old svg...is there a better way to update than remove/append? //remove our old svg...is there a better way to update than remove/append?
...@@ -345,6 +353,7 @@ angular.module('kibana.map2', []) ...@@ -345,6 +353,7 @@ angular.module('kibana.map2', [])
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.call(zoom); .call(zoom);
scope.g = scope.svg.append("g"); scope.g = scope.svg.append("g");
//Overlay is used so that the entire map is draggable, not just the locations //Overlay is used so that the entire map is draggable, not just the locations
...@@ -355,6 +364,11 @@ angular.module('kibana.map2', []) ...@@ -355,6 +364,11 @@ angular.module('kibana.map2', [])
.attr("height", height) .attr("height", height)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//set up listener for ctrl key
//scope.svg
//Draw the countries, if this is a choropleth, draw with fancy colors //Draw the countries, if this is a choropleth, draw with fancy colors
scope.g.selectAll("path") scope.g.selectAll("path")
.data(countries) .data(countries)
...@@ -381,9 +395,10 @@ angular.module('kibana.map2', []) ...@@ -381,9 +395,10 @@ angular.module('kibana.map2', [])
.call(d3.behavior.drag() .call(d3.behavior.drag()
.origin(function() { var rotate = projection.rotate(); return {x: 2 * rotate[0], y: -2 * rotate[1]}; }) .origin(function() { var rotate = projection.rotate(); return {x: 2 * rotate[0], y: -2 * rotate[1]}; })
.on("drag", function() { .on("drag", function() {
if (ctrlKey) { if ( scope.ctrlKey) {
projection.rotate([d3.event.x / 2, -d3.event.y / 2, projection.rotate()[2]]); projection.rotate([d3.event.x / 2, -d3.event.y / 2, projection.rotate()[2]]);
scope.svg.selectAll("path").attr("d", path); scope.svg.selectAll("path").attr("d", path);
//displayBinning(scope, dimensions, projection, path);
} }
})); }));
} }
...@@ -396,12 +411,12 @@ angular.module('kibana.map2', []) ...@@ -396,12 +411,12 @@ angular.module('kibana.map2', [])
if (scope.panel.display.binning.enabled) { if (scope.panel.display.binning.enabled) {
//@todo fix this //@todo fix this
var dimensions = [width, height]; var dimensions = [width, height];
displayBinning(scope, dimensions, projection); displayBinning(scope, dimensions, projection, path);
} }
//Raw geopoints //Raw geopoints
if (scope.panel.display.geopoints.enabled) { if (scope.panel.display.geopoints.enabled) {
displayGeopoints(scope); displayGeopoints(scope, path);
} }
if (scope.panel.display.bullseye.enabled) { if (scope.panel.display.bullseye.enabled) {
...@@ -420,7 +435,7 @@ angular.module('kibana.map2', []) ...@@ -420,7 +435,7 @@ angular.module('kibana.map2', [])
function move() { function move() {
if (!ctrlKey) { if (! scope.ctrlKey) {
var t = d3.event.translate, var t = d3.event.translate,
s = d3.event.scale; s = d3.event.scale;
t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0])); t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment