Skip to content

N
nexpie-grafana-theme
Commit 54bc5ddb by Zachary Tong
Options

Binning settings, data settings

parent b7a5afcb
Showing with 141 additions and 74 deletions
panels/map2/editor.html
...@@ -54,54 +54,112 @@ ...@@ -54,54 +54,112 @@
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid tabDetails" ng-show="isActive('geopoints')">
<div class="span8 offset1 tabDetails"> <div class="span8 offset1">
<div ng-show="isActive('geopoints')"> <table>
<table> <tbody >
<tbody > <tr>
<tr> <td>Geopoints</td>
<td>Geopoints</td> <td>
<td> <button type="button" class="btn" bs-button
<button type="button" class="btn" bs-button ng-change="$emit('render')"
ng-change="$emit('render')" ng-class="{'btn-success': panel.display.geopoints.enabled}"
ng-class="{'btn-success': panel.display.geopoints.enabled}" ng-model="panel.display.geopoints.enabled">{{panel.display.geopoints.enabled|enabledText}}</button>
ng-model="panel.display.geopoints.enabled">{{panel.display.geopoints.enabled|enabledText}}</button> </td>
</td> </tr>
</tr> <tr>
<tr> <td>Point size</td>
<td>Point size</td> <td>
<td> <input type="text" style="width:100px"
<input type="text" style="width:100px" ng-change="$emit('render')"
data-placement="right"
bs-tooltip="'Controls the size of the geopoints on the map'"
ng-model="panel.display.geopoints.pointSize"
value="{{panel.display.geopoints.pointSize}}" />
</td>
</tr>
<tr>
<td>Point Transparency</td>
<td>
<input type="text" style="width:100px"
ng-change="$emit('render')"
data-placement="right"
bs-tooltip="'Controls the transparency of geopoints. Valid numbers are between 0.0 and 1.0'"
ng-model="panel.display.geopoints.pointAlpha"
value="{{panel.display.geopoints.pointAlpha}}" />
</td>
</tr>
<tr>
<td>Autosizing</td>
<td>
<input type="checkbox"
ng-change="$emit('render')"
data-placement="right"
bs-tooltip="'Allows point sizes to scale as you zoom in and out of the map.'" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-fluid tabDetails" ng-show="isActive('binning')">
<div class="span8 offset1">
<table>
<tbody >
<tr>
<td>Binning</td>
<td>
<button type="button" class="btn" bs-button
ng-change="$emit('render')" ng-change="$emit('render')"
data-placement="right" ng-class="{'btn-success': panel.display.binning.enabled}"
bs-tooltip="'Controls the size of the geopoints on the map'" ng-model="panel.display.binning.enabled">{{panel.display.binning.enabled|enabledText}}</button>
ng-model="panel.display.geopoints.pointSize" </td>
value="{{panel.display.geopoints.pointSize}}" /> </tr>
</td> <tr>
</tr> <td>Hexagon size</td>
<tr> <td>
<td>Point Transparency</td> <input type="text" style="width:100px"
<td> ng-change="$emit('render')"
<input type="text" style="width:100px" data-placement="right"
ng-change="$emit('render')" bs-tooltip="'Controls the size of the hexagonal binning'"
data-placement="right" ng-model="panel.display.binning.hexagonSize"
bs-tooltip="'Controls the transparency of geopoints. Valid numbers are between 0.0 and 1.0'" value="{{panel.display.binning.hexagonSize}}" />
ng-model="panel.display.geopoints.pointAlpha" </td>
value="{{panel.display.geopoints.pointAlpha}}" /> </tr>
</td> <tr>
</tr> <td>Hexagon Transparency</td>
<tr> <td>
<td>Autosizing</td> <input type="text" style="width:100px"
<td> ng-change="$emit('render')"
<input type="checkbox" data-placement="right"
ng-change="$emit('render')" bs-tooltip="'Controls the transparency of hexagonal bins. Valid numbers are between 0.0 and 1.0'"
data-placement="right" ng-model="panel.display.binning.hexagonAlpha"
bs-tooltip="'Allows point sizes to scale as you zoom in and out of the map.'" /> value="{{panel.display.binning.hexagonAlpha}}" />
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<div class="row-fluid tabDetails" ng-show="isActive('data')">
<div class="span8 offset1">
<table>
<tbody >
<tr>
<td>Data Points</td>
<td>
<input type="text" style="width:100px"
ng-change="get_data()"
data-placement="right"
bs-tooltip="'Controls the number of samples used in the map. Be careful with this value!'"
ng-model="panel.display.data.samples"
value="{{panel.display.data.samples}}" />
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
......
panels/map2/module.js
...@@ -6,12 +6,15 @@ angular.module('kibana.map2', []) ...@@ -6,12 +6,15 @@ angular.module('kibana.map2', [])
query: "*", query: "*",
map: "world", map: "world",
colors: ['#C8EEFF', '#0071A4'], colors: ['#C8EEFF', '#0071A4'],
size: 1000, size: 100,
exclude: [], exclude: [],
spyable: true, spyable: true,
group: "default", group: "default",
index_limit: 0, index_limit: 0,
display: { display: {
data: {
samples: 1000
},
geopoints: { geopoints: {
enabled: true, enabled: true,
enabledText: "Enabled", enabledText: "Enabled",
...@@ -19,10 +22,13 @@ angular.module('kibana.map2', []) ...@@ -19,10 +22,13 @@ angular.module('kibana.map2', [])
pointAlpha: 0.6 pointAlpha: 0.6
}, },
binning: { binning: {
enabled: true,
hexagonSize: 10,
hexagonAlpha: 1.0
} }
}, },
displayTabs: ["Geopoints", "Binning"], displayTabs: ["Geopoints", "Binning", "Data"],
activeDisplayTab:"Geopoints" activeDisplayTab:"Geopoints"
}; };
...@@ -59,7 +65,7 @@ angular.module('kibana.map2', []) ...@@ -59,7 +65,7 @@ angular.module('kibana.map2', [])
var facet = $scope.ejs.TermsFacet('map') var facet = $scope.ejs.TermsFacet('map')
.field($scope.panel.field) .field($scope.panel.field)
.size(1000) .size($scope.panel.display.data.samples)
.exclude($scope.panel.exclude) .exclude($scope.panel.exclude)
.facetFilter(ejs.QueryFilter( .facetFilter(ejs.QueryFilter(
ejs.FilteredQuery( ejs.FilteredQuery(
...@@ -218,42 +224,45 @@ angular.module('kibana.map2', []) ...@@ -218,42 +224,45 @@ angular.module('kibana.map2', [])
.attr("class", "boundary") .attr("class", "boundary")
.attr("d", path); .attr("d", path);
//Geocoded points are decoded into lat/lon, then projected onto x/y
var points = _.map(scope.data, function (k, v) { var points = _.map(scope.data, function (k, v) {
var decoded = geohash.decode(v); var decoded = geohash.decode(v);
return projection([decoded.longitude, decoded.latitude]); return projection([decoded.longitude, decoded.latitude]);
}); });
//hexagonal binning
if (scope.panel.display.binning.enabled) {
var color = d3.scale.linear() var color = d3.scale.linear()
.domain([0, 20]) .domain([0, 20])
.range(["white", "steelblue"]) .range(["white", "steelblue"])
.interpolate(d3.interpolateLab); .interpolate(d3.interpolateLab);
var hexbin = d3.hexbin() var hexbin = d3.hexbin()
.size([width, height]) .size([width, height])
.radius(10); .radius(scope.panel.display.binning.hexagonSize);
g.selectAll(".hexagon") g.selectAll(".hexagon")
.data(hexbin(points)) .data(hexbin(points))
.enter().append("path") .enter().append("path")
.attr("d", function (d) { .attr("d", function (d) {
return hexbin.hexagon(); return hexbin.hexagon();
}) })
.attr("class", "hexagon") .attr("class", "hexagon")
.attr("transform", function (d) { .attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")"; return "translate(" + d.x + "," + d.y + ")";
}) })
.style("fill", function (d) { .style("fill", function (d) {
return color(d.length); return color(d.length);
}) })
.attr("opacity", 1); .attr("opacity", scope.panel.display.binning.hexagonAlpha);
}
/* raw geopoints */
//Raw geopoints
if (scope.panel.display.geopoints.enabled) { if (scope.panel.display.geopoints.enabled) {
g.selectAll("circles.points") g.selectAll("circles.points")
.data(points) .data(points)
.enter() .enter()
......
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