apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Binning settings, data settings

Browse Source
pull/7/head
Zachary Tong 12 years ago
parent b7a5afcbd3
commit 54bc5ddb71
2 changed files with 141 additions and 74 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 152
      panels/map2/editor.html
  2. 63
      panels/map2/module.js

152
panels/map2/editor.html
Unescape View File

@ -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
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"
<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')"
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>

63
panels/map2/module.js
Unescape View File

@ -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()

Write Preview
Loading…
Cancel
Save