diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index b4ee2bf7fb7..e6e8858d6e8 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/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,