feat(graph): graph tooltip sort order PR refactored/changed #4944, changed the layout graph display options, #4944

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

@@ -135,13 +135,13 @@ function ($) {
 
         // Dynamically reorder the hovercard for the current time point if the
         // option is enabled.
-        if (panel.tooltip.ordering === 'decreasing') {
+        if (panel.tooltip.sort === 2) {
           seriesHoverInfo.sort(function(a, b) {
-            return parseFloat(b.value) - parseFloat(a.value);
+            return b.value - a.value;
           });
-        } else if (panel.tooltip.ordering === 'increasing') {
+        } else if (panel.tooltip.sort === 1) {
           seriesHoverInfo.sort(function(a, b) {
-            return parseFloat(a.value) - parseFloat(b.value);
+            return a.value - b.value;
           });
         }
 

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

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

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

@@ -28,41 +28,39 @@
 				<select class="gf-form-input" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
 			</div>
 		</div>
+		<gf-form-switch ng-show="ctrl.panel.lines" class="gf-form" label="Staircase" label-class="width-8" checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
+		</gf-form-switch>
 		<div class="gf-form" ng-show="ctrl.panel.points">
 			<label class="gf-form-label width-8">Point Radius</label>
 			<div class="gf-form-select-wrapper max-width-5">
 				<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
 			</div>
 		</div>
-		<gf-form-switch class="gf-form"
-			label="Staircase" label-class="width-8"
-			checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
-		</gf-form-switch>
 	</div>
 	<div class="section gf-form-group">
-		<h5 class="section-heading">Misc options</h5>
+		<h5 class="section-heading">Hover info</h5>
 		<div class="gf-form">
-			<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>
+			<label class="gf-form-label width-9">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 mode</label>
+			<label class="gf-form-label width-9">Sort order</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>
+				<select class="gf-form-input" ng-model="ctrl.panel.tooltip.sort" ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]" 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" ng-show="ctrl.panel.stack">
+			<label class="gf-form-label width-9">Stacked value</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>
+				<select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select>
 			</div>
 		</div>
 	</div>
 
 	<div class="section gf-form-group">
-		<h5 class="section-heading">Multiple Series</h5>
+		<h5 class="section-heading">Stacking & Null value</h5>
 		<gf-form-switch class="gf-form"
 			label="Stack" label-class="width-7"
 			checked="ctrl.panel.stack" on-change="ctrl.render()">
@@ -71,10 +69,10 @@
 			label="Percent" label-class="width-7"
 			checked="ctrl.panel.percentage" on-change="ctrl.render()">
 		</gf-form-switch>
-		<div class="gf-form" ng-show="ctrl.panel.stack">
-			<label class="gf-form-label width-7">Tooltip value</label>
-			<div class="gf-form-select-wrapper max-width-8">
-				<select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select>
+		<div class="gf-form">
+			<label class="gf-form-label width-7">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>

public/sass/components/_old_stuff.scss

@@ -4,7 +4,7 @@
 }
 
 .section {
-  margin-right: 20px;
+  margin-right: 3rem;
   vertical-align: top;
   display: inline-block;
 }