diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html
index b128c21b97a..fc3c9f69542 100644
--- a/public/app/plugins/panel/singlestat/editor.html
+++ b/public/app/plugins/panel/singlestat/editor.html
@@ -158,7 +158,7 @@
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index 74c34bd13b4..3c0b9e5342a 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -54,7 +54,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
show: false,
minValue: 0,
maxValue: 100,
- thresholdLabels: true
+ thresholdMarkers: true,
+ thresholdLabels: false
}
};
@@ -295,12 +296,14 @@ class SingleStatCtrl extends MetricsPanelCtrl {
}
var plotCanvas = $('
');
+ var width = elem.width();
+ var height = elem.height();
var plotCss = {
top: '10px',
margin: 'auto',
position: 'relative',
- height: (elem.height() * 0.9) + 'px',
- width: elem.width() + 'px'
+ height: (height * 0.9) + 'px',
+ width: width + 'px'
};
plotCanvas.css(plotCss);
@@ -321,6 +324,12 @@ class SingleStatCtrl extends MetricsPanelCtrl {
? 'rgb(230,230,230)'
: 'rgb(38,38,38)';
+
+ var dimension = Math.min(width, height);
+ var fontSize = Math.min(dimension/4, 100);
+ var gaugeWidth = Math.min(dimension/6, 60);
+ var thresholdMarkersWidth = gaugeWidth/5;
+
var options = {
series: {
gauges: {
@@ -330,11 +339,11 @@ class SingleStatCtrl extends MetricsPanelCtrl {
background: { color: bgColor },
border: { color: null },
shadow: { show: false },
- width: 38
+ width: gaugeWidth,
},
frame: { show: false },
label: { show: false },
- layout: { margin: 0 },
+ layout: { margin: 0, thresholdWidth: 0 },
cell: { border: { width: 0 } },
threshold: {
values: thresholds,
@@ -343,12 +352,13 @@ class SingleStatCtrl extends MetricsPanelCtrl {
margin: 8,
font: { size: 18 }
},
- width: 8
+ show: panel.gauge.thresholdMarkers,
+ width: thresholdMarkersWidth,
},
value: {
color: panel.colorValue ? getColorForValue(data, data.valueRounded) : null,
formatter: function() { return getValueText(); },
- font: { size: getGaugeFontSize(), family: 'Helvetica Neue", Helvetica, Arial, sans-serif' }
+ font: { size: fontSize, family: 'Helvetica Neue", Helvetica, Arial, sans-serif' }
},
show: true
}