IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #450 from rashidkpc/tooltip

Browse Source 
Tooltip stacked values separation option
This commit is contained in:
Rashid Khan 2013-08-30 14:53:48 -07:00
commit 838d78ce1f
2 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
panels/histogram/editor.html
View File

@ -15,8 +15,8 @@
<label class="small">Note</label><small> In <strong>{{panel.mode}}</strong> mode the configured field <strong>must</strong> be a numeric type</small>
</div>
</div>
<div class="row-fluid" style="margin-bottom:10px;">
<h5>Chart Settings</h5>
<div class="row-fluid" style="margin-bottom:10px;">
<div class="span1"> <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
<div class="span1"> <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
<div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
@ -59,3 +59,10 @@
<label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label>
</div>
</div>
<h5>Tooltip Settings</h5>
<div class="row-fluid" style="margin-bottom:10px;">
<div class="span3">
<label class="small">Stacked Values <i class="icon-question-sign" bs-tooltip="'How should the values in stacked charts to be calculated?'"></i></label>
<select class="input-medium" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']"></select>
</div>
</div>

11
panels/histogram/module.js
View File

@ -72,6 +72,9 @@ angular.module('kibana.histogram', [])
'y-axis' : true,
percentage : false,
interactive : true,
tooltip : {
value_type: 'cumulative'
}
};
_.defaults($scope.panel,_d);
@ -426,11 +429,17 @@ angular.module('kibana.histogram', [])
var $tooltip = $('<div>');
elem.bind("plothover", function (event, pos, item) {
var value;
if (item) {
if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') {
value = item.datapoint[1] - item.datapoint[2];
} else {
value = item.datapoint[1];
}
$tooltip
.html(
kbn.query_color_dot(item.series.color, 15) + ' ' +
item.datapoint[1].toFixed(0) + " @ " +
value + " @ " +
moment(item.datapoint[0]).format('MM/DD HH:mm:ss')
)
.place_tt(pos.pageX, pos.pageY);