diff --git a/panels/map2/display/binning.js b/panels/map2/display/binning.js index 418cc79f5f4..a13db8ecdd4 100644 --- a/panels/map2/display/binning.js +++ b/panels/map2/display/binning.js @@ -1,10 +1,10 @@ -function displayBinning() { +function displayBinning(scope, dimensions, projection) { /** * Hexbin-specific setup */ var hexbin = d3.hexbin() - .size([width, height]) + .size(dimensions) .radius(scope.panel.display.binning.hexagonSize); @@ -16,7 +16,7 @@ function displayBinning() { //However, we don't want to add a million points, so normalize against the largest value if (scope.panel.display.binning.areaEncodingField === 'secondary') { var max = Math.max.apply(Math, _.map(scope.data, function(k,v){return k;})), - scale = 10/max; + scale = 50/max; _.map(scope.data, function (k, v) { var decoded = geohash.decode(v); @@ -50,7 +50,7 @@ function displayBinning() { */ - g.selectAll(".hexagon") + scope.g.selectAll(".hexagon") .data(binnedPoints) .enter().append("path") .attr("d", function (d) { diff --git a/panels/map2/display/geopoints.js b/panels/map2/display/geopoints.js index 12d4b9ab88a..0602c160cc0 100644 --- a/panels/map2/display/geopoints.js +++ b/panels/map2/display/geopoints.js @@ -1,5 +1,5 @@ -function displayGeopoints() { - g.selectAll("circles.points") +function displayGeopoints(scope) { + scope.g.selectAll("circles.points") .data(points) .enter() .append("circle") diff --git a/panels/map2/editor.html b/panels/map2/editor.html index 6dd8a930319..d67fcea0264 100644 --- a/panels/map2/editor.html +++ b/panels/map2/editor.html @@ -8,230 +8,273 @@ padding-bottom:10px; } -
-
- The map panel uses 2 letter country or US state codes to plot concentrations - on a map. Darker terroritories mean more records matched that area. If - multiple queries are sent from a single panel the first query will be - displayed +
+
+
+ The map panel uses 2 letter country or US state codes to plot concentrations + on a map. Darker terroritories mean more records matched that area. If + multiple queries are sent from a single panel the first query will be + displayed +
-
-
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
-
-
-
-

Display Options

-
- - -
- -
-
- -
-
- - - - - - - - - - - - - - - - - - - -
Geopoints - -
Point size - -
Point Transparency - -
Autosizing - -
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - -
Binning - -
Hexagon size - -
Hexagon Transparency - -
- - -
- - +
+
+
+
+ +
+
-
- - -
- - +
+
+ +
+
-
+
+
+ +
+ +
+
+ +
-
+
+
+

Display Options

+
+ -
-
- - - - - + + + + + + + + + + + + + + +
Choropleth - +
Point size + +
Point Transparency + +
Autosizing + +
+
-
- The panel spy shows 'behind the scenes' information about a panel. It can be - accessed by clicking the in the top right of the panel. +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
Binning + +
Hexagon size + +
Hexagon Transparency + +
+ + +
+ + +
+
+ + +
+ + +
+
+
+
+ +
+
+ + + + + + + +
Choropleth + +
+
+
+ +
+
+ + + + + + + + + + + +
Bullseye + +
Bullseye Coordinates + + + +
+
+
+ +
+
+ + + + + + + +
Data Points + +
+
+
+ +
Panel Spy
+ +
+
+ +
+ +
+ The panel spy shows 'behind the scenes' information about a panel. It can be + accessed by clicking the in the top right of the panel. +
\ No newline at end of file diff --git a/panels/map2/module.js b/panels/map2/module.js index 225a07ebf9b..bebd5db6d5b 100644 --- a/panels/map2/module.js +++ b/panels/map2/module.js @@ -34,9 +34,12 @@ angular.module('kibana.map2', []) }, choropleth: { enabled: false + }, + bullseye: { + enabled: false } }, - displayTabs: ["Geopoints", "Binning", "Choropleth", "Data"], + displayTabs: ["Geopoints", "Binning", "Choropleth", "Bullseye", "Data"], activeDisplayTab:"Geopoints" }; @@ -138,7 +141,7 @@ angular.module('kibana.map2', []) $scope.populate_modal = function (request) { $scope.modal = { title: "Inspector", - body: "
Last Elasticsearch Query
" + 'curl -XGET ' + config.elasticsearch + '/' + $scope.panel.index + "/_search?pretty -d'\n" + angular.toJson(JSON.parse(request.toString()), true) + "'
", + body: "
Last Elasticsearch Query
" + 'curl -XGET ' + config.elasticsearch + '/' + $scope.panel.index + "/_search?pretty -d'\n" + angular.toJson(JSON.parse(request.toString()), true) + "'
" } }; @@ -179,8 +182,10 @@ angular.module('kibana.map2', []) elem.html('
') - var worldData = null, - worldNames = null; + scope.worldData = null; + scope.worldNames = null; + scope.svg = null; + scope.g = null; // Receive render events scope.$on('render', function () { @@ -209,13 +214,13 @@ angular.module('kibana.map2', []) //these files can take a bit of time to process, so save them in a variable //and use those on redraw - if (worldData === null || worldNames === null) { + if (scope.worldData === null || scope.worldNames === null) { queue() .defer(d3.json, "panels/map2/lib/world-110m.json") .defer(d3.tsv, "panels/map2/lib/world-country-names.tsv") .await(function(error, world, names) { - worldData = world; - worldNames = names; + scope.worldData = world; + scope.worldNames = names; ready(); }); } else { @@ -229,8 +234,10 @@ angular.module('kibana.map2', []) */ function ready() { - var world = worldData, - names = worldNames; + + + var world = scope.worldData, + names = scope.worldNames; //Better way to get these values? Seems kludgy to use jQuery on the div... var width = $(elem[0]).width(), @@ -287,18 +294,21 @@ angular.module('kibana.map2', []) * D3 SVG Setup */ - var svg = d3.select(elem[0]).append("svg") + //remove our old svg...is there a better way to update than remove/append? + d3.select(elem[0]).select("svg").remove(); + + //create the new svg + scope.svg = d3.select(elem[0]).append("svg") .attr("width", width) .attr("height", height) - .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") .call(zoom); - var g = svg.append("g"); + scope.g = scope.svg.append("g"); //Overlay is used so that the entire map is draggable, not just the locations //where countries are - svg.append("rect") + scope.svg.append("rect") .attr("class", "overlay") .attr("x", -width / 2) .attr("y", -height / 2) @@ -306,7 +316,7 @@ angular.module('kibana.map2', []) .attr("height", height); //Draw the countries, if this is a choropleth, draw with fancy colors - g.selectAll("path") + scope.g.selectAll("path") .data(countries) .enter().append("path") .attr("class", function(d) { @@ -319,7 +329,7 @@ angular.module('kibana.map2', []) .attr("d", path); //draw boundaries - g.append("path") + scope.g.selectAll("land").append("path") .datum(topojson.mesh(world, world.objects.land, function(a, b) { return a !== b; })) .attr("class", "land boundary") .attr("d", path); @@ -332,12 +342,13 @@ angular.module('kibana.map2', []) //Hexagonal Binning if (scope.panel.display.binning.enabled) { - displayBinning(); + var dimensions = [width, height]; + displayBinning(scope, dimensions, projection); } //Raw geopoints if (scope.panel.display.geopoints.enabled) { - displayGeopoints(); + displayGeopoints(scope); } @@ -346,7 +357,7 @@ angular.module('kibana.map2', []) */ if (scope.panel.display.scale != -1) { zoom.scale(scope.panel.display.scale).translate(scope.panel.display.translate); - g.style("stroke-width", 1 / scope.panel.display.scale).attr("transform", "translate(" + scope.panel.display.translate + ") scale(" + scope.panel.display.scale + ")"); + scope.g.style("stroke-width", 1 / scope.panel.display.scale).attr("transform", "translate(" + scope.panel.display.translate + ") scale(" + scope.panel.display.scale + ")"); } @@ -359,7 +370,7 @@ angular.module('kibana.map2', []) scope.panel.display.translate = t; scope.panel.display.scale = s; - g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")"); + scope.g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")"); } }