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

torkelo · torkelo · commit f00cbc0aebfd · 2016-05-20T12:23:26.000+02:00
diff --git a/public/app/features/panel/panel_ctrl.ts b/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?) {
diff --git a/public/app/plugins/panel/graph/graph.js b/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) {
diff --git a/public/app/plugins/panel/singlestat/module.html b/public/app/plugins/panel/singlestat/module.html
@@ -1,4 +1,3 @@
 <div class="singlestat-panel">
 
 </div>
-<div class="clearfix"></div>
diff --git a/public/app/plugins/panel/singlestat/module.ts b/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',
diff --git a/public/sass/components/_panel_singlestat.scss b/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;

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ import $ from 'jquery';`
`8`	`8`	`const TITLE_HEIGHT = 25;`
`9`	`9`	`const EMPTY_TITLE_HEIGHT = 9;`
`10`	`10`	`const PANEL_PADDING = 5;`
	`11`	`+const PANEL_BORDER = 2;`
`11`	`12`
`12`	`13`	`import {Emitter} from 'app/core/core';`
`13`	`14`
`@@ -141,7 +142,7 @@ export class PanelCtrl {`
`141`	`142`	`}`
`142`	`143`	`}`
`143`	`144`
`144`		`- this.height = this.containerHeight - (PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));`
	`145`	`+ this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));`
`145`	`146`	`}`
`146`	`147`
`147`	`148`	`render(payload?) {`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {`
`66`	`66`
`67`	`67`	`function getLegendHeight(panelHeight) {`
`68`	`68`	`if (!panel.legend.show \|\| panel.legend.rightSide) {`
`69`		`- return 2;`
	`69`	`+ return 0;`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`if (panel.legend.alignAsTable) {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`	`1`	`<div class="singlestat-panel">`
`2`	`2`
`3`	`3`	`</div>`
`4`		`-<div class="clearfix"></div>`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,6 @@`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`.singlestat-panel-value-container {`
`8`		`- padding: 20px;`
`9`	`8`	`display: table-cell;`
`10`	`9`	`vertical-align: middle;`
`11`	`10`	`text-align: center;`