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

Removed loops to build legend, replaced by adding plot to scope

Browse Source
pull/7/head
Rashid Khan 12 years ago
parent ed297092a4
commit 1d51e96ccb
5 changed files with 25 additions and 39 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. 6
      panels/histogram/editor.html
  2. 2
      panels/histogram/module.html
  3. 41
      panels/histogram/module.js
  4. 4
      panels/hits/module.html
  5. 11
      panels/hits/module.js

6
panels/histogram/editor.html
Unescape View File

@ -33,14 +33,14 @@
</div>
</div>
<h5>Chart Options</h5>
<div class="row-fluid">
<div class="row-fluid" style="margin-bottom:10px;">
<div class="span1"> <label class="small">Bars</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
<div class="span1"> <label class="small">Lines</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
<div class="span1"> <label class="small">Points</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
<div class="span1"> <label class="small">Stack</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
<div class="span1"> <label class="small">Legend</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
<div class="span1"> <label class="small">x-Axis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
<div class="span1"> <label class="small">y-Axis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
<div class="span1"> <label class="small">xAxis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
<div class="span1"> <label class="small">yAxis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
<div class="span2" ng-show="panel.lines">
<label class="small">Line Fill</label>
<select ng-change="$emit('render')" class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>

2
panels/histogram/module.html
Unescape View File

@ -7,7 +7,7 @@
<a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>
<a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a>
</span> |
<span ng-show="panel.legend" ng-repeat='series in legend' style='display:inline-block;padding-right:5px'>
<span ng-show="panel.legend" ng-repeat='series in plot.getData()' style='display:inline-block;padding-right:5px'>
<div style="display:inline-block;background:{{series.color}};height:10px;width:10px;border-radius:5px;"></div>
<div class='small' style='display:inline-block'>{{series.label}} ({{series.hits}})</div>
</span><span class="small"> per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> total)</span>

41
panels/histogram/module.js
Unescape View File

@ -23,6 +23,8 @@ angular.module('kibana.histogram', [])
$scope.init = function() {
eventBus.register($scope,'time', function(event,time){$scope.set_time(time)});
// Consider eliminating the check for array, this should always be an array
eventBus.register($scope,'query', function(event, query) {
if(_.isArray(query)) {
$scope.panel.query = _.map(query,function(q) {
@ -33,6 +35,7 @@ angular.module('kibana.histogram', [])
}
$scope.get_data();
});
// Now that we're all setup, request the time from our group if we don't
// have it yet
if(_.isUndefined($scope.time))
@ -60,9 +63,8 @@ angular.module('kibana.histogram', [])
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
return
var _segment = _.isUndefined(segment) ? 0 : segment
$scope.panel.loading = true;
var _segment = _.isUndefined(segment) ? 0 : segment
var request = $scope.ejs.Request().indices($scope.panel.index[_segment]);
// Build the question part of the query
@ -76,7 +78,7 @@ angular.module('kibana.histogram', [])
)
});
// Build the facet part
// Build the facet part, injecting the query in as a facet filter
_.each(queries, function(v) {
request = request
.facet($scope.ejs.DateHistogramFacet("chart"+_.indexOf(queries,v))
@ -86,6 +88,7 @@ angular.module('kibana.histogram', [])
).size(0)
})
// Populate the inspector panel
$scope.populate_modal(request);
// Then run it
@ -106,17 +109,11 @@ angular.module('kibana.histogram', [])
return;
}
// Make sure we're still on the same query
if($scope.query_id === query_id) {
var i = 0;
_.each(results.facets, function(v, k) {
// If this isn't a date histogram it must be a QueryFacet, get the
// count and return
if(v._type !== 'date_histogram') {
//$scope.hits += v.count;
return
}
// Null values at each end of the time range ensure we see entire range
if(_.isUndefined($scope.data[i]) || _segment == 0) {
@ -131,14 +128,14 @@ angular.module('kibana.histogram', [])
var segment_data = [];
_.each(v.entries, function(v, k) {
segment_data.push([v['time'],v['count']])
hits += v['count'];
$scope.hits += v['count'];
hits += v['count']; // The series level hits counter
$scope.hits += v['count']; // Entire dataset level hits counter
});
data.splice.apply(data,[1,0].concat(segment_data))
data.splice.apply(data,[1,0].concat(segment_data)) // Join histogram data
// Create the flot series
// Create the flot series object
var series = {
data: {
label: $scope.panel.query[i].label || "query"+(parseInt(i)+1),
@ -155,7 +152,10 @@ angular.module('kibana.histogram', [])
i++;
});
// Tell the histogram directive to render.
$scope.$emit('render')
// If we still have segments left, get them
if(_segment < $scope.panel.index.length-1) {
$scope.get_data(_segment+1,query_id)
}
@ -209,8 +209,6 @@ angular.module('kibana.histogram', [])
// Function for rendering panel
function render_panel() {
// Determine format
// Set barwidth based on specified interval
var barwidth = interval_to_seconds(scope.panel.interval)*1000
@ -226,10 +224,8 @@ angular.module('kibana.histogram', [])
// Populate element
try {
var plot = $.plot(elem, scope.data, {
legend: {
show: false,
},
scope.plot = $.plot(elem, scope.data, {
legend: { show: false },
series: {
stack: stack,
lines: {
@ -264,11 +260,6 @@ angular.module('kibana.histogram', [])
},
colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F']
})
scope.legend = [];
_.each(plot.getData(),function(series) {
scope.legend.push(_.pick(series,'label','color','hits'))
})
// Work around for missing legend at initialization
if(!scope.$$phase)

4
panels/hits/module.html
Unescape View File

@ -2,11 +2,11 @@
<div ng-show="panel.counters">
<p ng-style="panel.style" ng-show="panel.aggregate">{{hits}}</p>
<table ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'vertical'">
<tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in data">
<tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in plot.getData()">
<td ng-show="panel.chart" style="background:{{query.color}};width:{{panel.style['font-size']}}"></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.hits}}</td>
</tr>
</table>
<div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;">
<div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
<span ng-show='panel.chart'><div style="display:inline-block;border-radius:{{panel.style['font-size']}};background:{{query.color}};height:{{panel.style['font-size']}};width:{{panel.style['font-size']}}"></div></span> {{query.label}} ({{query.hits}}) <span ng-show="!$last">|</span>
</div><br>
</div><div style="clear:both"></div>

11
panels/hits/module.js
Unescape View File

@ -147,8 +147,9 @@ angular.module('kibana.hits', [])
// Populate element. Note that jvectormap appends, does not replace.
scripts.wait(function(){
// Populate element
try {
var plot = $.plot(elem, scope.data, {
try {
// Add plot to scope so we can build out own legend
scope.plot = $.plot(elem, scope.data, {
legend: { show: false },
series: {
lines: { show: false, },
@ -166,12 +167,6 @@ angular.module('kibana.hits', [])
},
colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F']
})
var i = 0;
_.each(plot.getData(),function(series) {
scope.data[i].color = series.color;
i++;
})
// Work around for missing legend at initialization
if(!scope.$$phase)

Write Preview
Loading…
Cancel
Save