IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Geopoint settings

Browse Source
This commit is contained in:
Zachary Tong 2013-04-05 11:51:03 -04:00
parent a1fea1e6fe
commit b7a5afcbd3
2 changed files with 123 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
panels/map2/editor.html
View File

@ -1,75 +1,120 @@
<div class="row-fluid" ng-controller="map2"> <style>
.tabDetails {
border-bottom: 1px solid #ddd;
padding-bottom:20px;
}
.tabDetails td {
padding-right: 10px;
padding-bottom:10px;
}
</style>
<div class="row-fluid" ng-controller="map2">
<div class="span11"> <div class="span11">
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 <strong>first query will be displayed</strong> 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 <strong>first query will be
displayed</strong>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3">
<form> <form>
<h6>Field</h6> <h6>Field</h6>
<input type="text" class="input-small" ng-model="panel.field"> <input type="text" class="input-small" ng-model="panel.field">
</form> </form>
</div> </div>
<div class="span6"> <div class="span6">
<form class="input-append"> <form class="input-append">
<h6>Query</h6> <h6>Query</h6><input type="text" ng-model="panel.query">
<input type="text" ng-model="panel.query"> </form>
<button class="btn" ng-click="get_data();"><i class="icon-search"></i></button>
</form>
</div> </div>
<div class="span1"><h6>Map</h6>
<select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select>
</div>
</div>
<div class="row-fluid"> <div class="span1">
<div class="span11"> <h6>Map</h6>
</div>
</div>
<div class="row-fluid">
<div class="span11">
<h4>Display Options</h4> <h4>Display Options</h4>
</div> </div>
<!--
<!--
Rolling our own tab control here because the Angular-Strap Tab directive doesn't allow Rolling our own tab control here because the Angular-Strap Tab directive doesn't allow
updates to components inside, which is quite bizarre. Or I just can't figure it out... updates to components inside, which is quite bizarre. Or I just can't figure it out...
--> -->
<div class="span11" style="margin-bottom:20px">
<ul class="nav nav-tabs" ng-cloak>
<li ng-repeat="tab in panel.displayTabs" ng-class="{active:isActive(tab)}">
<a ng-click="tabClick(tab)">{{tab}}</a>
</li>
</ul>
<div ng-show="isActive('geopoints')"> <div class="span11">
<table ng-controller="map2"> <ul class="nav nav-tabs" ng-cloak="">
<tbody> <li ng-repeat="tab in panel.displayTabs" ng-class="{active:isActive(tab)}">
<tr> <a ng-click="tabClick(tab)">{{tab}}</a>
<td style="width:100px" > </li>
<button type="button" class="btn" </ul>
bs-button </div>
ng-class="{'btn-success': panel.display.geopoints.enabled}" </div>
ng-model="panel.display.geopoints.enabled">{{panel.display.geopoints.enabled|enabledText}}</button>
</td> <div class="row-fluid">
<td> <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"
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>
<h5>Panel Spy</h5>
</td> <div class="row-fluid">
</tr>
</tbody>
</table>
</div>
</div>
</div>
<h5>Panel Spy</h5>
<div class="row-fluid">
<div class="span2"> <div class="span2">
<label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable"> <label class="small">Spyable</label> <input type="checkbox" ng-model=
"panel.spyable" ng-checked="panel.spyable">
</div> </div>
<div class="span9 small"> <div class="span9 small">
The panel spy shows 'behind the scenes' information about a panel. It can The panel spy shows 'behind the scenes' information about a panel. It can be
be accessed by clicking the <i class='icon-eye-open'></i> in the top right accessed by clicking the in the top right of the panel.
of the panel.
</div> </div>
</div> </div>

37
panels/map2/module.js
View File

@ -14,7 +14,9 @@ angular.module('kibana.map2', [])
display: { display: {
geopoints: { geopoints: {
enabled: true, enabled: true,
enabledText: "Enabled" enabledText: "Enabled",
pointSize: 1,
pointAlpha: 0.6
}, },
binning: { binning: {
@ -221,6 +223,8 @@ angular.module('kibana.map2', [])
return projection([decoded.longitude, decoded.latitude]); return projection([decoded.longitude, decoded.latitude]);
}); });
var color = d3.scale.linear() var color = d3.scale.linear()
.domain([0, 20]) .domain([0, 20])
.range(["white", "steelblue"]) .range(["white", "steelblue"])
@ -245,27 +249,22 @@ angular.module('kibana.map2', [])
}) })
.attr("opacity", 1); .attr("opacity", 1);
/* /* raw geopoints */
raw, ugly points if (scope.panel.display.geopoints.enabled) {
*/
var points = _.map(scope.data, function (k, v) {
var decoded = geohash.decode(v);
return {
lat: decoded.latitude,
lon: decoded.longitude
};
});
g.selectAll("circles.points") g.selectAll("circles.points")
.data(points) .data(points)
.enter() .enter()
.append("circle") .append("circle")
.attr("r", 1) .attr("r", scope.panel.display.geopoints.pointSize)
.attr("transform", function (d) { .attr("opacity", scope.panel.display.geopoints.pointAlpha)
return "translate(" + projection([d.lon, d.lat]) + ")"; .attr("transform", function (d) {
}); return "translate(" + d[0] + "," + d[1] + ")";
});
}
}); });