Skip to content

N
nexpie-grafana-theme
Commit b7a5afcb by Zachary Tong
Options

Geopoint settings

parent a1fea1e6
Showing with 120 additions and 75 deletions
panels/map2/editor.html
<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">
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 class="row-fluid">
<div class="row-fluid">
<div class="span3">
<form>
<h6>Field</h6>
<input type="text" class="input-small" ng-model="panel.field">
</form>
<form>
<h6>Field</h6>
<input type="text" class="input-small" ng-model="panel.field">
</form>
</div>
<div class="span6">
<form class="input-append">
<h6>Query</h6>
<input type="text" ng-model="panel.query">
<button class="btn" ng-click="get_data();"><i class="icon-search"></i></button>
</form>
<form class="input-append">
<h6>Query</h6><input type="text" ng-model="panel.query">
</form>
</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 class="span1">
<h6>Map</h6>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11">
<div class="row-fluid">
<div class="span11">
<h4>Display Options</h4>
</div>
<!--
</div>
<!--
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...
-->
<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')">
<table ng-controller="map2">
<tbody>
<tr>
<td style="width:100px" >
<button type="button" class="btn"
bs-button
ng-class="{'btn-success': panel.display.geopoints.enabled}"
ng-model="panel.display.geopoints.enabled">{{panel.display.geopoints.enabled|enabledText}}</button>
</td>
<td>
-->
<div class="span11">
<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>
</div>
</td>
</tr>
</tbody>
<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"
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>
</table>
</div>
</div>
</div>
<h5>Panel Spy</h5>
<h5>Panel Spy</h5>
<div class="row-fluid">
<div class="span2">
<label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
<div class="row-fluid">
<div class="span2">
<label class="small">Spyable</label> <input type="checkbox" ng-model=
"panel.spyable" ng-checked="panel.spyable">
</div>
<div class="span9 small">
The panel spy shows 'behind the scenes' information about a panel. It can
be accessed by clicking the <i class='icon-eye-open'></i> in the top right
of the panel.
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.
</div>
</div>
</div>
\ No newline at end of file
panels/map2/module.js
......@@ -14,7 +14,9 @@ angular.module('kibana.map2', [])
display: {
geopoints: {
enabled: true,
enabledText: "Enabled"
enabledText: "Enabled",
pointSize: 1,
pointAlpha: 0.6
},
binning: {
......@@ -221,6 +223,8 @@ angular.module('kibana.map2', [])
return projection([decoded.longitude, decoded.latitude]);
});
var color = d3.scale.linear()
.domain([0, 20])
.range(["white", "steelblue"])
......@@ -245,27 +249,22 @@ angular.module('kibana.map2', [])
})
.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")
.data(points)
.enter()
.append("circle")
.attr("r", 1)
.attr("transform", function (d) {
return "translate(" + projection([d.lon, d.lat]) + ")";
});
g.selectAll("circles.points")
.data(points)
.enter()
.append("circle")
.attr("r", scope.panel.display.geopoints.pointSize)
.attr("opacity", scope.panel.display.geopoints.pointAlpha)
.attr("transform", function (d) {
return "translate(" + d[0] + "," + d[1] + ")";
});
}
});
......
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