Singlestat: Add y min/max config to singlestat sparklines (#17527)

* Add scaling toggle to Singlestat panel

This toggle allows a user to choose between auto scaling or
zero-based scaling.

* Update Singlestat docs to include Zero Scale option

* Add min/max config to Singlestat sparklines y axis

docs/sources/features/panels/singlestat.md

@@ -57,8 +57,10 @@ Sparklines are a great way of seeing the historical data related to the summary
 
 1. **Show**: The show checkbox will toggle whether the spark line is shown in the Panel. When unselected, only the Singlestat value will appear.
 2. **Full Height**: Check if you want the sparklines to take up the full panel height, or uncheck if they should be below the main Singlestat value.
-3. **Line Color**: This color selection applies to the color of the sparkline itself.
-4. **Fill Color**: This color selection applies to the area below the sparkline.
+3. **Y-Min**: The minimum Y value. (default auto)
+4. **Y-Max**: The maximum Y value. (default auto)
+5. **Line Color**: This color selection applies to the color of the sparkline itself.
+6. **Fill Color**: This color selection applies to the area below the sparkline.
 
 <div class="clearfix"></div>
 

public/app/plugins/panel/singlestat/editor.html

@@ -89,6 +89,14 @@
     <div ng-if="ctrl.panel.sparkline.show">
       <gf-form-switch class="gf-form" label-class="width-9" label="Full height" checked="ctrl.panel.sparkline.full" on-change="ctrl.render()"></gf-form-switch>
       <div class="gf-form">
+        <label class="gf-form-label width-9">Y-Min</label>
+        <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" ng-model="ctrl.panel.sparkline.ymin" ng-change="ctrl.render()" ng-model-onblur empty-to-null>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-9">Y-Max</label>
+        <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" ng-model="ctrl.panel.sparkline.ymax" ng-change="ctrl.render()" ng-model-onblur empty-to-null>
+      </div>
+      <div class="gf-form">
         <label class="gf-form-label width-9">Line Color</label>
         <span class="gf-form-label">
           <color-picker color="ctrl.panel.sparkline.lineColor" onChange="ctrl.onSparklineColorChange"></color-picker>

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

@@ -67,6 +67,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     sparkline: {
       show: false,
       full: false,
+      ymin: null,
+      ymax: null,
       lineColor: 'rgb(31, 120, 193)',
       fillColor: 'rgba(31, 118, 189, 0.18)',
     },
@@ -548,12 +550,15 @@ class SingleStatCtrl extends MetricsPanelCtrl {
           lines: {
             show: true,
             fill: 1,
-            zero: false,
             lineWidth: 1,
             fillColor: getColorFromHexRgbOrName(panel.sparkline.fillColor, config.theme.type),
           },
         },
-        yaxes: { show: false },
+        yaxes: {
+          show: false,
+          min: panel.sparkline.ymin,
+          max: panel.sparkline.ymax,
+        },
         xaxis: {
           show: false,
           mode: 'time',