Add optional tooltip ordering

public/app/plugins/panel/graph/graph_tooltip.js

@@ -81,9 +81,9 @@ function ($) {
           // Stacked series can increase its length on each new stacked serie if null points found,
           // 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.
           // to speed the index search we begin always on the last found hoverIndex.
           var newhoverIndex = this.findHoverIndexFromDataPoints(pos.x, series, 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 {
         } 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);
         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++) {
         for (i = 0; i < seriesHoverInfo.length; i++) {
           hoverInfo = seriesHoverInfo[i];
           hoverInfo = seriesHoverInfo[i];
 
 
@@ -150,7 +162,7 @@ function ($) {
           value = series.formatValue(hoverInfo.value);
           value = series.formatValue(hoverInfo.value);
 
 
           seriesHtml += '<div class="graph-tooltip-list-item ' + highlightClass + '"><div class="graph-tooltip-series-name">';
           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>';
           seriesHtml += '<div class="graph-tooltip-value">' + value + '</div></div>';
           plot.highlight(i, hoverInfo.hoverIndex);
           plot.highlight(i, hoverInfo.hoverIndex);
         }
         }

public/app/plugins/panel/graph/module.ts

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

public/app/plugins/panel/graph/tab_display.html

@@ -42,23 +42,29 @@
 	<div class="section gf-form-group">
 	<div class="section gf-form-group">
 		<h5 class="section-heading">Misc options</h5>
 		<h5 class="section-heading">Misc options</h5>
 		<div class="gf-form">
 		<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">
 			<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>
 				<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>
 		</div>
 		<div class="gf-form">
 		<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">
 			<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>
 				<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>
 		</div>
 		<div class="gf-form">
 		<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">
 			<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>
 				<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>
 		</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>
 
 
 	<div class="section gf-form-group">
 	<div class="section gf-form-group">