mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Geopoint settings
This commit is contained in:
Zachary Tong
parent
a1fea1e6fe
commit
b7a5afcbd3
@ -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">
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span11">
|
||||
<div class="span1">
|
||||
<h6>Map</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@ -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] + ")";
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user