Skip to content

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

Start of map settings, tab control

parent a4f503d8
Showing with 133 additions and 102 deletions
panels/map2/editor.html
<div class="row-fluid" ng-controller="map"> <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>
...@@ -21,15 +21,47 @@ ...@@ -21,15 +21,47 @@
<div class="span1"><h6>Map</h6> <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> <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="span6">
<div data-fade="1" bs-tabs>
<div data-title="'Home'"><p>Static tab content A</p></div>
<div data-title="'Profile'"><p>Static tab content B</p></div>
</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>
</div>
<h5>Panel Spy</h5> <h5>Panel Spy</h5>
<div class="row-fluid"> <div class="row-fluid">
<div class="span2"> <div class="span2">
......
panels/map2/module.js
angular.module('kibana.map2', []) angular.module('kibana.map2', [])
.controller('map2', function($scope, eventBus) { .controller('map2', function ($scope, eventBus) {
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
query : "*", query: "*",
map : "world", map: "world",
colors : ['#C8EEFF', '#0071A4'], colors: ['#C8EEFF', '#0071A4'],
size : 1000, size: 1000,
exclude : [], exclude: [],
spyable : true, spyable: true,
group : "default", group: "default",
index_limit : 0 index_limit: 0,
display: {
geopoints: {
enabled: true,
enabledText: "Enabled"
},
binning: {
} }
},
displayTabs: ["Geopoints", "Binning"],
activeDisplayTab:"Geopoints"
};
_.defaults($scope.panel,_d) _.defaults($scope.panel, _d)
console.log("$scope.panel", $scope.panel); $scope.init = function () {
console.log("_d", _d);
$scope.init = function() {
console.log("init"); console.log("init");
eventBus.register($scope,'time', function(event,time){set_time(time)}); eventBus.register($scope, 'time', function (event, time) {
eventBus.register($scope,'query', function(event, query) { set_time(time)
});
eventBus.register($scope, 'query', function (event, query) {
$scope.panel.query = _.isArray(query) ? query[0] : query; $scope.panel.query = _.isArray(query) ? query[0] : query;
$scope.get_data(); $scope.get_data();
}); });
// Now that we're all setup, request the time from our group // Now that we're all setup, request the time from our group
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time') eventBus.broadcast($scope.$id, $scope.panel.group, 'get_time')
} };
$scope.isNumber = function(n) { $scope.isNumber = function (n) {
return !isNaN(parseFloat(n)) && isFinite(n); return !isNaN(parseFloat(n)) && isFinite(n);
} };
$scope.get_data = function() { $scope.get_data = function () {
console.log("get_data"); console.log("get_data");
// Make sure we have everything for the request to complete // Make sure we have everything for the request to complete
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time)) if (_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
return return
...@@ -53,13 +64,7 @@ angular.module('kibana.map2', []) ...@@ -53,13 +64,7 @@ angular.module('kibana.map2', [])
ejs.QueryStringQuery($scope.panel.query || '*'), ejs.QueryStringQuery($scope.panel.query || '*'),
ejs.RangeFilter($scope.time.field) ejs.RangeFilter($scope.time.field)
.from($scope.time.from) .from($scope.time.from)
.to($scope.time.to) .to($scope.time.to))));
)));
// Then the insert into facet and make the request // Then the insert into facet and make the request
var request = request.facet(facet).size(0); var request = request.facet(facet).size(0);
...@@ -69,12 +74,12 @@ angular.module('kibana.map2', []) ...@@ -69,12 +74,12 @@ angular.module('kibana.map2', [])
var results = request.doSearch(); var results = request.doSearch();
// Populate scope when we have results // Populate scope when we have results
results.then(function(results) { results.then(function (results) {
$scope.panel.loading = false; $scope.panel.loading = false;
$scope.hits = results.hits.total; $scope.hits = results.hits.total;
$scope.data = {}; $scope.data = {};
console.log("results",results);
_.each(results.facets.map.terms, function(v) { _.each(results.facets.map.terms, function (v) {
//FIX THIS //FIX THIS
if (!$scope.isNumber(v.term)) { if (!$scope.isNumber(v.term)) {
...@@ -82,25 +87,20 @@ angular.module('kibana.map2', []) ...@@ -82,25 +87,20 @@ angular.module('kibana.map2', [])
} else { } else {
$scope.data[v.term] = v.count; $scope.data[v.term] = v.count;
} }
}); });
console.log("emit render"); console.log("emit render");
$scope.$emit('render') $scope.$emit('render')
}); });
};
}
// I really don't like this function, too much dom manip. Break out into directive? // I really don't like this function, too much dom manip. Break out into directive?
$scope.populate_modal = function(request) { $scope.populate_modal = function (request) {
$scope.modal = { $scope.modal = {
title: "Inspector", title: "Inspector",
body : "<h5>Last Elasticsearch Query</h5><pre>"+ body: "<h5>Last Elasticsearch Query</h5><pre>" + 'curl -XGET ' + config.elasticsearch + '/' + $scope.panel.index + "/_search?pretty -d'\n" + angular.toJson(JSON.parse(request.toString()), true) + "'</pre>",
'curl -XGET '+config.elasticsearch+'/'+$scope.panel.index+"/_search?pretty -d'\n"+
angular.toJson(JSON.parse(request.toString()),true)+
"'</pre>",
}
} }
};
function set_time(time) { function set_time(time) {
$scope.time = time; $scope.time = time;
...@@ -108,39 +108,55 @@ angular.module('kibana.map2', []) ...@@ -108,39 +108,55 @@ angular.module('kibana.map2', [])
$scope.get_data(); $scope.get_data();
} }
$scope.build_search = function(field,value) { $scope.build_search = function (field, value) {
$scope.panel.query = add_to_query($scope.panel.query,field,value,false) $scope.panel.query = add_to_query($scope.panel.query, field, value, false)
$scope.get_data(); $scope.get_data();
eventBus.broadcast($scope.$id,$scope.panel.group,'query',$scope.panel.query); eventBus.broadcast($scope.$id, $scope.panel.group, 'query', $scope.panel.query);
};
$scope.isActive = function(tab) {
return (tab.toLowerCase() === $scope.panel.activeDisplayTab.toLowerCase());
} }
}) $scope.tabClick = function(tab) {
.directive('map2', function() { $scope.panel.activeDisplayTab = tab;
}
})
.filter('enabledText', function() {
return function (value) {
console.log(value);
if (value === true) {
return "Enabled";
} else {
return "Disabled";
}
}
})
.directive('map2', function () {
return { return {
restrict: 'A', restrict: 'A',
link: function(scope, elem, attrs) { link: function (scope, elem, attrs) {
elem.html('<center><img src="common/img/load_big.gif"></center>') elem.html('<center><img src="common/img/load_big.gif"></center>')
// Receive render events // Receive render events
scope.$on('render',function(){ scope.$on('render', function () {
console.log("render"); console.log("render");
render_panel(); render_panel();
}); });
// Or if the window is resized // Or if the window is resized
angular.element(window).bind('resize', function(){ angular.element(window).bind('resize', function () {
console.log("resize"); console.log("resize");
render_panel(); render_panel();
}); });
function render_panel() { function render_panel() {
console.log("render_panel"); console.log("render_panel");
console.log(scope.panel); console.log(scope.panel);
console.log(elem); console.log(elem);
// Using LABjs, wait until all scripts are loaded before rendering panel // Using LABjs, wait until all scripts are loaded before rendering panel
var scripts = $LAB.script("panels/map2/lib/d3.v3.min.js") var scripts = $LAB.script("panels/map2/lib/d3.v3.min.js")
.script("panels/map2/lib/topojson.v0.min.js") .script("panels/map2/lib/topojson.v0.min.js")
...@@ -148,11 +164,9 @@ angular.module('kibana.map2', []) ...@@ -148,11 +164,9 @@ angular.module('kibana.map2', [])
.script("panels/map2/lib/d3.hexbin.v0.min.js"); .script("panels/map2/lib/d3.hexbin.v0.min.js");
// Populate element. Note that jvectormap appends, does not replace. // Populate element. Note that jvectormap appends, does not replace.
scripts.wait(function(){ scripts.wait(function () {
elem.text(''); elem.text('');
//Better way to get these values? Seems kludgy to use jQuery on the div... //Better way to get these values? Seems kludgy to use jQuery on the div...
var width = $(elem[0]).width(), var width = $(elem[0]).width(),
height = $(elem[0]).height(); height = $(elem[0]).height();
...@@ -162,7 +176,6 @@ angular.module('kibana.map2', []) ...@@ -162,7 +176,6 @@ angular.module('kibana.map2', [])
//Scale the map by whichever dimension is the smallest, helps to make sure the whole map is shown //Scale the map by whichever dimension is the smallest, helps to make sure the whole map is shown
var scale = (width > height) ? (height / 2 / Math.PI) : (width / 2 / Math.PI); var scale = (width > height) ? (height / 2 / Math.PI) : (width / 2 / Math.PI);
var projection = d3.geo.mercator() var projection = d3.geo.mercator()
.translate([0, 0]) .translate([0, 0])
.scale(scale); .scale(scale);
...@@ -174,7 +187,6 @@ angular.module('kibana.map2', []) ...@@ -174,7 +187,6 @@ angular.module('kibana.map2', [])
var path = d3.geo.path() var path = d3.geo.path()
.projection(projection); .projection(projection);
var svg = d3.select(elem[0]).append("svg") var svg = d3.select(elem[0]).append("svg")
.attr("width", width) .attr("width", width)
.attr("height", height) .attr("height", height)
...@@ -191,28 +203,23 @@ angular.module('kibana.map2', []) ...@@ -191,28 +203,23 @@ angular.module('kibana.map2', [])
.attr("width", width) .attr("width", width)
.attr("height", height); .attr("height", height);
d3.json("panels/map2/lib/world-50m.json", function(error, world) { d3.json("panels/map2/lib/world-50m.json", function (error, world) {
g.append("path") g.append("path")
.datum(topojson.object(world, world.objects.countries)) .datum(topojson.object(world, world.objects.countries))
.attr("class", "land") .attr("class", "land")
.attr("d", path); .attr("d", path);
g.append("path") g.append("path")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) .datum(topojson.mesh(world, world.objects.countries, function (a, b) {
return a !== b;
}))
.attr("class", "boundary") .attr("class", "boundary")
.attr("d", path); .attr("d", path);
var points = _.map(scope.data, function (k, v) {
var points = _.map(scope.data, function (k,v) {
var decoded = geohash.decode(v); var decoded = geohash.decode(v);
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])
...@@ -223,48 +230,44 @@ angular.module('kibana.map2', []) ...@@ -223,48 +230,44 @@ angular.module('kibana.map2', [])
.size([width, height]) .size([width, height])
.radius(10); .radius(10);
g.selectAll(".hexagon") g.selectAll(".hexagon")
.data(hexbin(points)) .data(hexbin(points))
.enter().append("path") .enter().append("path")
.attr("d", function(d) { return hexbin.hexagon(); }) .attr("d", function (d) {
return hexbin.hexagon();
})
.attr("class", "hexagon") .attr("class", "hexagon")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) .attr("transform", function (d) {
.style("fill", function(d) { console.log(d); return color(d.length); }) return "translate(" + d.x + "," + d.y + ")";
})
.style("fill", function (d) {
return color(d.length);
})
.attr("opacity", 1); .attr("opacity", 1);
/* /*
raw, ugly points raw, ugly points
*/ */
var points = _.map(scope.data, function (k,v) { var points = _.map(scope.data, function (k, v) {
var decoded = geohash.decode(v); var decoded = geohash.decode(v);
return {lat: decoded.latitude, lon: decoded.longitude}; 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", 1)
.attr("transform", function(d) {return "translate(" + projection([d.lon,d.lat]) + ")";}); .attr("transform", function (d) {
return "translate(" + projection([d.lon, d.lat]) + ")";
}); });
});
function move() { function move() {
var t = d3.event.translate, var t = d3.event.translate,
...@@ -275,13 +278,9 @@ angular.module('kibana.map2', []) ...@@ -275,13 +278,9 @@ angular.module('kibana.map2', [])
g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")"); g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
} }
}) })
} }
} }
}; };
}); });
\ No newline at end of file \ No newline at end of file
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