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 #4944 from Gueust/optional_tooltip_ordering

Browse Source 
Add optional tooltip ordering (against the development branch)
This commit is contained in:
Carl Bergquist 2016-05-10 12:51:44 +02:00
commit c522341136
3 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/app/plugins/panel/graph/graph_tooltip.js
View File

@ -81,9 +81,9 @@ function ($) {
// Stacked series can increase its length on each new stacked serie if null points found,
// to speed the index search we begin always on the last found hoverIndex.
var newhoverIndex = this.findHoverIndexFromDataPoints(pos.x, series, hoverIndex);
results.push({ value: value, hoverIndex: newhoverIndex });
results.push({ value: value, hoverIndex: newhoverIndex, color: series.color, label: series.label });
} else {
results.push({ value: value, hoverIndex: hoverIndex });
results.push({ value: value, hoverIndex: hoverIndex, color: series.color, label: series.label });
}
}
@ -133,6 +133,18 @@ function ($) {
absoluteTime = dashboard.formatDate(seriesHoverInfo.time, tooltipFormat);
// Dynamically reorder the hovercard for the current time point if the
// option is enabled.
if (panel.tooltip.ordering === 'decreasing') {
seriesHoverInfo.sort(function(a, b) {
return parseFloat(b.value) - parseFloat(a.value);
});
} else if (panel.tooltip.ordering === 'increasing') {
seriesHoverInfo.sort(function(a, b) {
return parseFloat(a.value) - parseFloat(b.value);
});
}
for (i = 0; i < seriesHoverInfo.length; i++) {
hoverInfo = seriesHoverInfo[i];
@ -150,7 +162,7 @@ function ($) {
value = series.formatValue(hoverInfo.value);
seriesHtml += '<div class="graph-tooltip-list-item ' + highlightClass + '"><div class="graph-tooltip-series-name">';
seriesHtml += '<i class="fa fa-minus" style="color:' + series.color +';"></i> ' + series.label + ':</div>';
seriesHtml += '<i class="fa fa-minus" style="color:' + hoverInfo.color +';"></i> ' + hoverInfo.label + ':</div>';
seriesHtml += '<div class="graph-tooltip-value">' + value + '</div></div>';
plot.highlight(i, hoverInfo.hoverIndex);
}

1
public/app/plugins/panel/graph/module.ts
View File

@ -92,6 +92,7 @@ class GraphCtrl extends MetricsPanelCtrl {
tooltip : {
value_type: 'cumulative',
shared: true,
ordering: 'alphabetical',
msResolution: false,
},
// time overrides

12
public/app/plugins/panel/graph/tab_display.html
View File

@ -42,23 +42,29 @@
<div class="section gf-form-group">
<h5 class="section-heading">Misc options</h5>
<div class="gf-form">
<label class="gf-form-label width-7">Null value</label>
<label class="gf-form-label width-9">Null value</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input max-width-8" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Renderer</label>
<label class="gf-form-label width-9">Renderer</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.renderer" ng-options="f for f in ['flot', 'png']" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Tooltip mode</label>
<label class="gf-form-label width-9">Tooltip mode</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.shared" ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Tooltip ordering<tip>The ordering from top to bottom</tip></label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.ordering" ng-options="f.value as f.text for f in [{text: 'Alphabetical', value: 'alphabetical'}, {text: 'Increasing', value: 'increasing'}, {text: 'Decreasing', value: 'decreasing'}]" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="section gf-form-group">