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

Start of map settings, tab control

Browse Source
pull/7/head
Zachary Tong 13 years ago
parent a4f503d820
commit a1fea1e6fe
2 changed files with 300 additions and 269 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. 44
      panels/map2/editor.html
  2. 125
      panels/map2/module.js

44
panels/map2/editor.html
Unescape View File

@ -1,4 +1,4 @@
<div class="row-fluid" ng-controller="map">
<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>
</div>
@ -21,15 +21,47 @@
<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 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 class="row-fluid">
<div class="span11">
<h4>Display Options</h4>
</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">

125
panels/map2/module.js
Unescape View File

@ -10,27 +10,38 @@ angular.module('kibana.map2', [])
exclude: [],
spyable: true,
group: "default",
index_limit : 0
index_limit: 0,
display: {
geopoints: {
enabled: true,
enabledText: "Enabled"
},
binning: {
}
},
displayTabs: ["Geopoints", "Binning"],
activeDisplayTab:"Geopoints"
};
_.defaults($scope.panel, _d)
console.log("$scope.panel", $scope.panel);
console.log("_d", _d);
$scope.init = function () {
console.log("init");
eventBus.register($scope,'time', function(event,time){set_time(time)});
eventBus.register($scope, 'time', function (event, time) {
set_time(time)
});
eventBus.register($scope, 'query', function (event, query) {
$scope.panel.query = _.isArray(query) ? query[0] : query;
$scope.get_data();
});
// Now that we're all setup, request the time from our group
eventBus.broadcast($scope.$id, $scope.panel.group, 'get_time')
}
};
$scope.isNumber = function (n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
};
$scope.get_data = function () {
@ -53,13 +64,7 @@ angular.module('kibana.map2', [])
ejs.QueryStringQuery($scope.panel.query || '*'),
ejs.RangeFilter($scope.time.field)
.from($scope.time.from)
.to($scope.time.to)
)));
.to($scope.time.to))));
// Then the insert into facet and make the request
var request = request.facet(facet).size(0);
@ -73,7 +78,7 @@ angular.module('kibana.map2', [])
$scope.panel.loading = false;
$scope.hits = results.hits.total;
$scope.data = {};
console.log("results",results);
_.each(results.facets.map.terms, function (v) {
//FIX THIS
@ -82,25 +87,20 @@ angular.module('kibana.map2', [])
} else {
$scope.data[v.term] = v.count;
}
});
console.log("emit render");
$scope.$emit('render')
});
}
};
// I really don't like this function, too much dom manip. Break out into directive?
$scope.populate_modal = function (request) {
$scope.modal = {
title: "Inspector",
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>",
}
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>",
}
};
function set_time(time) {
$scope.time = time;
@ -112,9 +112,27 @@ angular.module('kibana.map2', [])
$scope.panel.query = add_to_query($scope.panel.query, field, value, false)
$scope.get_data();
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) {
$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 {
restrict: 'A',
@ -135,12 +153,10 @@ angular.module('kibana.map2', [])
});
function render_panel() {
console.log("render_panel");
console.log(scope.panel);
console.log(elem);
// Using LABjs, wait until all scripts are loaded before rendering panel
var scripts = $LAB.script("panels/map2/lib/d3.v3.min.js")
.script("panels/map2/lib/topojson.v0.min.js")
@ -151,8 +167,6 @@ angular.module('kibana.map2', [])
scripts.wait(function () {
elem.text('');
//Better way to get these values? Seems kludgy to use jQuery on the div...
var width = $(elem[0]).width(),
height = $(elem[0]).height();
@ -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
var scale = (width > height) ? (height / 2 / Math.PI) : (width / 2 / Math.PI);
var projection = d3.geo.mercator()
.translate([0, 0])
.scale(scale);
@ -174,7 +187,6 @@ angular.module('kibana.map2', [])
var path = d3.geo.path()
.projection(projection);
var svg = d3.select(elem[0]).append("svg")
.attr("width", width)
.attr("height", height)
@ -198,21 +210,16 @@ angular.module('kibana.map2', [])
.attr("d", 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("d", path);
var points = _.map(scope.data, function (k, v) {
var decoded = geohash.decode(v);
return projection([decoded.longitude, decoded.latitude]);
})
});
var color = d3.scale.linear()
.domain([0, 20])
@ -223,21 +230,21 @@ angular.module('kibana.map2', [])
.size([width, height])
.radius(10);
g.selectAll(".hexagon")
.data(hexbin(points))
.enter().append("path")
.attr("d", function(d) { return hexbin.hexagon(); })
.attr("d", function (d) {
return hexbin.hexagon();
})
.attr("class", "hexagon")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.style("fill", function(d) { console.log(d); return color(d.length); })
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
})
.style("fill", function (d) {
return color(d.length);
})
.attr("opacity", 1);
/*
raw, ugly points
@ -245,26 +252,22 @@ angular.module('kibana.map2', [])
var points = _.map(scope.data, function (k, v) {
var decoded = geohash.decode(v);
return {lat: decoded.latitude, lon: decoded.longitude};
})
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]) + ")";});
.attr("transform", function (d) {
return "translate(" + projection([d.lon, d.lat]) + ")";
});
});
function move() {
var t = d3.event.translate,
@ -275,13 +278,9 @@ angular.module('kibana.map2', [])
g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
}
})
}
}
};
});
Write Preview
Loading…
Cancel
Save