fix(panel height): fixed issue with singlestat height, fixes #4679, fixes #4894, fixes #5113

public/app/features/panel/panel_ctrl.ts

@@ -8,6 +8,7 @@ import $ from 'jquery';
 const TITLE_HEIGHT = 25;
 const EMPTY_TITLE_HEIGHT = 9;
 const PANEL_PADDING = 5;
+const PANEL_BORDER = 2;
 
 import {Emitter} from 'app/core/core';
 
@@ -141,7 +142,7 @@ export class PanelCtrl {
       }
     }
 
-    this.height = this.containerHeight - (PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));
+    this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));
   }
 
   render(payload?) {

public/app/plugins/panel/graph/graph.js

@@ -66,7 +66,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
 
         function getLegendHeight(panelHeight) {
           if (!panel.legend.show || panel.legend.rightSide) {
-            return 2;
+            return 0;
           }
 
           if (panel.legend.alignAsTable) {

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

@@ -1,4 +1,3 @@
 <div class="singlestat-panel">
 
 </div>
-<div class="clearfix"></div>

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

@@ -234,10 +234,13 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     var panel = ctrl.panel;
     var templateSrv = this.templateSrv;
     var data, linkInfo;
+    var width, height;
     var $panelContainer = elem.find('.panel-container');
     elem = elem.find('.singlestat-panel');
 
     function setElementHeight() {
+      width = elem.width();
+      height = elem.height();
       elem.css('height', ctrl.height + 'px');
     }
 
@@ -291,8 +294,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       }
 
       var plotCanvas = $('<div></div>');
-      var width = elem.width();
-      var height = elem.height();
       var plotCss = {
         top: '10px',
         margin: 'auto',

public/sass/components/_panel_singlestat.scss

@@ -5,7 +5,6 @@
 }
 
 .singlestat-panel-value-container {
-  padding: 20px;
   display: table-cell;
   vertical-align: middle;
   text-align: center;