Skip to content

N
nexpie-grafana-theme
Commit 73253bb5 by Spencer Alger
Options

added a tooltip settings section to the histogram settings editor. Currently the… 

added a tooltip settings section to the histogram settings editor. Currently the only setting defines which value is displayed on stacked charts.
parent 2e9bdedc
Showing with 31 additions and 14 deletions
panels/histogram/editor.html
<div class="row-fluid"> <div class="row-fluid">
<div class="span2"> <div class="span2">
<label class="small">Mode</label> <label class="small">Mode</label>
<select ng-change="set_refresh(true)" class="input-small" ng-model="panel.mode" ng-options="f for f in ['count','min','mean','max','total']"></select> <select ng-change="set_refresh(true)" class="input-small" ng-model="panel.mode" ng-options="f for f in ['count','min','mean','max','total']"></select>
</div> </div>
<div class="span2"> <div class="span2">
...@@ -15,8 +15,8 @@ ...@@ -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> <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> </div>
<h5>Chart Settings</h5>
<div class="row-fluid" style="margin-bottom:10px;"> <div class="row-fluid" style="margin-bottom:10px;">
<h5>Chart Settings</h5>
<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">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">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> <div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
...@@ -26,36 +26,43 @@ ...@@ -26,36 +26,43 @@
<div class="span1"> <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div> <div class="span1"> <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
<div class="span1"> <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div> <div class="span1"> <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
<div class="span2" ng-show="panel.lines"> <div class="span2" ng-show="panel.lines">
<label class="small">Line Fill</label> <label class="small">Line Fill</label>
<select 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> <select 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>
</div> </div>
<div class="span2" ng-show="panel.lines"> <div class="span2" ng-show="panel.lines">
<label class="small">Line Width</label> <label class="small">Line Width</label>
<select class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select> <select class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span2"> <div class="span2">
<label class="small">Time correction</label> <label class="small">Time correction</label>
<select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select> <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div> </div>
<div class="span1"> <label class="small">Selectable</label><input type="checkbox" ng-model="panel.interactive" ng-checked="panel.interactive"></div> <div class="span1"> <label class="small">Selectable</label><input type="checkbox" ng-model="panel.interactive" ng-checked="panel.interactive"></div>
<div class="span2"> <div class="span2">
<label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" /> <label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
</div> </div>
<div class="span2"> <div class="span2">
<label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" /> <label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
</div> </div>
<div class="span2" ng-show='panel.auto_int'> <div class="span2" ng-show='panel.auto_int'>
<label class="small">Resolution</label><input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/> <label class="small">Resolution</label><input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/>
</div> </div>
<div class="span3" ng-show='panel.auto_int'> <div class="span3" ng-show='panel.auto_int'>
<label class="small">Shoot for this many data points, rounding to sane intervals</label> <label class="small">Shoot for this many data points, rounding to sane intervals</label>
</div> </div>
<div class="span2" ng-hide='panel.auto_int'> <div class="span2" ng-hide='panel.auto_int'>
<label class="small">Interval</label><input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/> <label class="small">Interval</label><input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
</div> </div>
<div class="span3" ng-hide='panel.auto_int'> <div class="span3" ng-hide='panel.auto_int'>
<label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label> <label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label>
</div> </div>
</div> </div>
<h5>Tooltip Settings</h5>
<div class="row-fluid" style="margin-bottom:10px;">
<div class="span3">
<label class="small" bs-tooltip="'How should the values in stacked charts to be calculated?'">Stacked Values</label>
<select class="input-medium" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']"></select>
</div>
</div>
\ No newline at end of file
panels/histogram/module.js
...@@ -72,6 +72,9 @@ angular.module('kibana.histogram', []) ...@@ -72,6 +72,9 @@ angular.module('kibana.histogram', [])
'y-axis' : true, 'y-axis' : true,
percentage : false, percentage : false,
interactive : true, interactive : true,
tooltip : {
value_type: 'cumulative'
}
}; };
_.defaults($scope.panel,_d); _.defaults($scope.panel,_d);
...@@ -426,11 +429,17 @@ angular.module('kibana.histogram', []) ...@@ -426,11 +429,17 @@ angular.module('kibana.histogram', [])
var $tooltip = $('<div>'); var $tooltip = $('<div>');
elem.bind("plothover", function (event, pos, item) { elem.bind("plothover", function (event, pos, item) {
var value;
if (item) { 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 $tooltip
.html( .html(
kbn.query_color_dot(item.series.color, 15) + ' ' + kbn.query_color_dot(item.series.color, 15) + ' ' +
item.datapoint[1].toFixed(0) + " @ " + value + " @ " +
moment(item.datapoint[0]).format('MM/DD HH:mm:ss') moment(item.datapoint[0]).format('MM/DD HH:mm:ss')
) )
.place_tt(pos.pageX, pos.pageY); .place_tt(pos.pageX, pos.pageY);
......
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