Graph panel: Move Stacking and null values before Hover tooltip options (#26037)

docs/sources/panels/visualizations/graph-panel.md

@@ -32,6 +32,17 @@ Use these settings to refine your visualization.
 - **Points -** Display points for values.
 - **Points -** Display points for values.
 - **Point radius -** Controls how large the points are.
 - **Point radius -** Controls how large the points are.
 
 
+### Stacking and null value
+
+- **Stack -** Each series is stacked on top of another.
+- **Percent -** Available when **Stack** is selected. Each series is drawn as a percentage of the total of all series.
+- **Null value -** How null values are displayed. _This is a very important setting._ See note below.
+  - **connected -** If there is a gap in the series, meaning a null value or values, then the line will skip the gap and connect to the next non-null value.
+  - **null -** (default) If there is a gap in the series, meaning a null value, then the line in the graph will be broken and show the gap.
+  - **null as zero -** If there is a gap in the series, meaning  a null value, then it will be displayed as a zero value in the graph panel.
+
+> **Note:** If you are monitoring a server's CPU load and the load reaches 100%, then the server will lock up and the agent sending statistics will not be able to collect the load statistic. This leads to a gap in the metrics and having the default as _null_ means Grafana will show the gaps and indicate that something is wrong. If this is set to _connected_, then it would be easy to miss this signal.
+
 ### Hover tooltip
 ### Hover tooltip
 
 
 Use these settings to change the appearance of the tooltip that appears when you hover your cursor over the graph visualization.
 Use these settings to change the appearance of the tooltip that appears when you hover your cursor over the graph visualization.
@@ -44,17 +55,6 @@ Use these settings to change the appearance of the tooltip that appears when you
   - **Increasing -** The series in the hover tooltip are sorted by value and in increasing order, with the lowest value at the top of the list.
   - **Increasing -** The series in the hover tooltip are sorted by value and in increasing order, with the lowest value at the top of the list.
   - **Decreasing -** The series in the hover tooltip are sorted by value and in decreasing order, with the highest value at the top of the list.
   - **Decreasing -** The series in the hover tooltip are sorted by value and in decreasing order, with the highest value at the top of the list.
 
 
-### Stacking and null value
-
-- **Stack -** Each series is stacked on top of another.
-- **Percent -** Available when **Stack** is selected. Each series is drawn as a percentage of the total of all series.
-- **Null value -** How null values are displayed. _This is a very important setting._ See note below.
-  - **connected -** If there is a gap in the series, meaning a null value or values, then the line will skip the gap and connect to the next non-null value.
-  - **null -** (default) If there is a gap in the series, meaning a null value, then the line in the graph will be broken and show the gap.
-  - **null as zero -** If there is a gap in the series, meaning  a null value, then it will be displayed as a zero value in the graph panel.
-
-> **Note:** If you are monitoring a server's CPU load and the load reaches 100%, then the server will lock up and the agent sending statistics will not be able to collect the load statistic. This leads to a gap in the metrics and having the default as _null_ means Grafana will show the gaps and indicate that something is wrong. If this is set to _connected_, then it would be easy to miss this signal.
-
 ## Series overrides
 ## Series overrides
 
 
 Series overrides allow a series in a graph panel to be rendered differently from the others. You can customize display options on a per-series bases or by using regex rules. For example, one series can have a thicker line width to make it stand out or be moved to the right Y-axis.
 Series overrides allow a series in a graph panel to be rendered differently from the others. You can customize display options on a per-series bases or by using regex rules. For example, one series can have a thicker line width to make it stand out or be moved to the right Y-axis.

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

@@ -82,6 +82,38 @@
 </div>
 </div>
 
 
 <div class="gf-form-group">
 <div class="gf-form-group">
+  <h5 class="section-heading">Stacking and null value</h5>
+  <gf-form-switch
+    class="gf-form"
+    label="Stack"
+    label-class="width-7"
+    checked="ctrl.panel.stack"
+    on-change="ctrl.render()"
+  >
+  </gf-form-switch>
+  <gf-form-switch
+    class="gf-form"
+    ng-show="ctrl.panel.stack"
+    label="Percent"
+    label-class="width-7"
+    checked="ctrl.panel.percentage"
+    on-change="ctrl.render()"
+  >
+  </gf-form-switch>
+  <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-9"
+        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 class="gf-form-group">
   <h5 class="section-heading">Hover tooltip</h5>
   <h5 class="section-heading">Hover tooltip</h5>
   <div class="gf-form">
   <div class="gf-form">
     <label class="gf-form-label width-9">Mode</label>
     <label class="gf-form-label width-9">Mode</label>
@@ -117,35 +149,3 @@
     </div>
     </div>
   </div>
   </div>
 </div>
 </div>
-
-<div class="gf-form-group">
-  <h5 class="section-heading">Stacking and null value</h5>
-  <gf-form-switch
-    class="gf-form"
-    label="Stack"
-    label-class="width-7"
-    checked="ctrl.panel.stack"
-    on-change="ctrl.render()"
-  >
-  </gf-form-switch>
-  <gf-form-switch
-    class="gf-form"
-    ng-show="ctrl.panel.stack"
-    label="Percent"
-    label-class="width-7"
-    checked="ctrl.panel.percentage"
-    on-change="ctrl.render()"
-  >
-  </gf-form-switch>
-  <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-9"
-        ng-model="ctrl.panel.nullPointMode"
-        ng-options="f for f in ['connected', 'null', 'null as zero']"
-        ng-change="ctrl.render()"
-      ></select>
-    </div>
-  </div>
-</div>