mirror of
https://github.com/grafana/grafana.git
synced 2025-01-01 11:47:05 -06:00
Binning settings, data settings
This commit is contained in:
Zachary Tong
parent
b7a5afcbd3
commit
54bc5ddb71
@ -54,54 +54,112 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span8 offset1 tabDetails">
|
||||
<div ng-show="isActive('geopoints')">
|
||||
<table>
|
||||
<tbody >
|
||||
<tr>
|
||||
<td>Geopoints</td>
|
||||
<td>
|
||||
<button type="button" class="btn" bs-button
|
||||
<div class="row-fluid tabDetails" ng-show="isActive('geopoints')">
|
||||
<div class="span8 offset1">
|
||||
<table>
|
||||
<tbody >
|
||||
<tr>
|
||||
<td>Geopoints</td>
|
||||
<td>
|
||||
<button type="button" class="btn" bs-button
|
||||
ng-change="$emit('render')"
|
||||
ng-class="{'btn-success': panel.display.geopoints.enabled}"
|
||||
ng-model="panel.display.geopoints.enabled">{{panel.display.geopoints.enabled|enabledText}}</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Point size</td>
|
||||
<td>
|
||||
<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-class="{'btn-success': panel.display.geopoints.enabled}"
|
||||
ng-model="panel.display.geopoints.enabled">{{panel.display.geopoints.enabled|enabledText}}</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Point size</td>
|
||||
<td>
|
||||
<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>
|
||||
ng-class="{'btn-success': panel.display.binning.enabled}"
|
||||
ng-model="panel.display.binning.enabled">{{panel.display.binning.enabled|enabledText}}</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hexagon size</td>
|
||||
<td>
|
||||
<input type="text" style="width:100px"
|
||||
ng-change="$emit('render')"
|
||||
data-placement="right"
|
||||
bs-tooltip="'Controls the size of the hexagonal binning'"
|
||||
ng-model="panel.display.binning.hexagonSize"
|
||||
value="{{panel.display.binning.hexagonSize}}" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hexagon Transparency</td>
|
||||
<td>
|
||||
<input type="text" style="width:100px"
|
||||
ng-change="$emit('render')"
|
||||
data-placement="right"
|
||||
bs-tooltip="'Controls the transparency of hexagonal bins. Valid numbers are between 0.0 and 1.0'"
|
||||
ng-model="panel.display.binning.hexagonAlpha"
|
||||
value="{{panel.display.binning.hexagonAlpha}}" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
|
||||
|
||||
@ -6,12 +6,15 @@ angular.module('kibana.map2', [])
|
||||
query: "*",
|
||||
map: "world",
|
||||
colors: ['#C8EEFF', '#0071A4'],
|
||||
size: 1000,
|
||||
size: 100,
|
||||
exclude: [],
|
||||
spyable: true,
|
||||
group: "default",
|
||||
index_limit: 0,
|
||||
display: {
|
||||
data: {
|
||||
samples: 1000
|
||||
},
|
||||
geopoints: {
|
||||
enabled: true,
|
||||
enabledText: "Enabled",
|
||||
@ -19,10 +22,13 @@ angular.module('kibana.map2', [])
|
||||
pointAlpha: 0.6
|
||||
},
|
||||
binning: {
|
||||
enabled: true,
|
||||
hexagonSize: 10,
|
||||
hexagonAlpha: 1.0
|
||||
|
||||
}
|
||||
},
|
||||
displayTabs: ["Geopoints", "Binning"],
|
||||
displayTabs: ["Geopoints", "Binning", "Data"],
|
||||
activeDisplayTab:"Geopoints"
|
||||
};
|
||||
|
||||
@ -59,7 +65,7 @@ angular.module('kibana.map2', [])
|
||||
|
||||
var facet = $scope.ejs.TermsFacet('map')
|
||||
.field($scope.panel.field)
|
||||
.size(1000)
|
||||
.size($scope.panel.display.data.samples)
|
||||
.exclude($scope.panel.exclude)
|
||||
.facetFilter(ejs.QueryFilter(
|
||||
ejs.FilteredQuery(
|
||||
@ -218,42 +224,45 @@ angular.module('kibana.map2', [])
|
||||
.attr("class", "boundary")
|
||||
.attr("d", path);
|
||||
|
||||
|
||||
//Geocoded points are decoded into lat/lon, then projected onto x/y
|
||||
var points = _.map(scope.data, function (k, v) {
|
||||
var decoded = geohash.decode(v);
|
||||
return projection([decoded.longitude, decoded.latitude]);
|
||||
});
|
||||
|
||||
|
||||
//hexagonal binning
|
||||
if (scope.panel.display.binning.enabled) {
|
||||
|
||||
var color = d3.scale.linear()
|
||||
.domain([0, 20])
|
||||
.range(["white", "steelblue"])
|
||||
.interpolate(d3.interpolateLab);
|
||||
var color = d3.scale.linear()
|
||||
.domain([0, 20])
|
||||
.range(["white", "steelblue"])
|
||||
.interpolate(d3.interpolateLab);
|
||||
|
||||
var hexbin = d3.hexbin()
|
||||
.size([width, height])
|
||||
.radius(10);
|
||||
var hexbin = d3.hexbin()
|
||||
.size([width, height])
|
||||
.radius(scope.panel.display.binning.hexagonSize);
|
||||
|
||||
g.selectAll(".hexagon")
|
||||
.data(hexbin(points))
|
||||
.enter().append("path")
|
||||
.attr("d", function (d) {
|
||||
return hexbin.hexagon();
|
||||
})
|
||||
.attr("class", "hexagon")
|
||||
.attr("transform", function (d) {
|
||||
return "translate(" + d.x + "," + d.y + ")";
|
||||
})
|
||||
.style("fill", function (d) {
|
||||
return color(d.length);
|
||||
})
|
||||
.attr("opacity", 1);
|
||||
g.selectAll(".hexagon")
|
||||
.data(hexbin(points))
|
||||
.enter().append("path")
|
||||
.attr("d", function (d) {
|
||||
return hexbin.hexagon();
|
||||
})
|
||||
.attr("class", "hexagon")
|
||||
.attr("transform", function (d) {
|
||||
return "translate(" + d.x + "," + d.y + ")";
|
||||
})
|
||||
.style("fill", function (d) {
|
||||
return color(d.length);
|
||||
})
|
||||
.attr("opacity", scope.panel.display.binning.hexagonAlpha);
|
||||
}
|
||||
|
||||
/* raw geopoints */
|
||||
|
||||
//Raw geopoints
|
||||
if (scope.panel.display.geopoints.enabled) {
|
||||
|
||||
|
||||
g.selectAll("circles.points")
|
||||
.data(points)
|
||||
.enter()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user