singlestat: fix sizing bug #9337 (#9448)

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

@@ -432,7 +432,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     function addGauge() {
       var width = elem.width();
       var height = elem.height();
-      var dimension = Math.min(width, height);
+      // Allow to use a bit more space for wide gauges
+      var dimension = Math.min(width, height * 1.3);
 
       ctrl.invalidGaugeRange = false;
       if (panel.gauge.minValue > panel.gauge.maxValue) {
@@ -469,8 +470,11 @@ class SingleStatCtrl extends MetricsPanelCtrl {
 
       var fontScale = parseInt(panel.valueFontSize) / 100;
       var fontSize = Math.min(dimension/5, 100) * fontScale;
-      var gaugeWidth = Math.min(dimension/6, 60);
+      // Reduce gauge width if threshold labels enabled
+      var gaugeWidthReduceRatio = panel.gauge.thresholdLabels ? 1.5 : 1;
+      var gaugeWidth = Math.min(dimension/6, 60) / gaugeWidthReduceRatio;
       var thresholdMarkersWidth = gaugeWidth/5;
+      var thresholdLabelFontSize = fontSize / 2.5;
 
       var options = {
         series: {
@@ -491,8 +495,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
               values: thresholds,
               label: {
                 show: panel.gauge.thresholdLabels,
-                margin: 8,
-                font: { size: 18 }
+                margin: thresholdMarkersWidth + 1,
+                font: { size: thresholdLabelFontSize }
               },
               show: panel.gauge.thresholdMarkers,
               width: thresholdMarkersWidth,