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 @@
-
+
  • Gauge @@ -169,12 +169,6 @@ ng-model="ctrl.panel.gauge.show" ng-checked="ctrl.panel.gauge.show" ng-change="ctrl.render()">
  • -
  • - Threshold labels  - - -
  • Min
  • @@ -195,6 +189,19 @@
+
+
  • + Threshold labels  + + +
  • +
  • + Threshold markers  + + +
  • +
    +
    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 }