From 0ad27a65962481664b1c08b4112bb6edc29db3ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 16 Mar 2020 09:48:44 +0100
Subject: [PATCH] AngularPanels: Fixed inner height calculation (#22796)

(cherry picked from commit f78501f3b59b48e1db061192adf7e5c9d8546e08)
---
 .../dashboard/dashgrid/PanelChromeAngular.tsx | 27 ++++++++++++++++---
 public/app/plugins/panel/graph/graph.ts       |  2 +-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
index 341d7fef1bb..730602270a9 100644
--- a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
@@ -11,11 +11,13 @@ import { PanelHeader } from './PanelHeader/PanelHeader';
 import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
 import { getAngularLoader, AngularComponent } from '@grafana/runtime';
 import { setPanelAngularComponent } from '../state/reducers';
+import config from 'app/core/config';
 
 // Types
 import { DashboardModel, PanelModel } from '../state';
 import { StoreState } from 'app/types';
 import { LoadingState, DefaultTimeRange, PanelData, PanelPlugin, PanelEvents } from '@grafana/data';
+import { PANEL_BORDER } from 'app/core/constants';
 
 interface OwnProps {
   panel: PanelModel;
@@ -135,15 +137,32 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
 
     if (prevProps.width !== width || prevProps.height !== height) {
       if (this.scopeProps) {
-        this.scopeProps.size.height = height;
-        this.scopeProps.size.width = width;
+        this.scopeProps.size.height = this.getInnerPanelHeight();
+        this.scopeProps.size.width = this.getInnerPanelWidth();
         panel.events.emit(PanelEvents.panelSizeChanged);
       }
     }
   }
 
+  getInnerPanelHeight() {
+    const { plugin, height } = this.props;
+    const { theme } = config;
+
+    const headerHeight = this.hasOverlayHeader() ? 0 : theme.panelHeaderHeight;
+    const chromePadding = plugin.noPadding ? 0 : theme.panelPadding;
+    return height - headerHeight - chromePadding * 2 - PANEL_BORDER;
+  }
+
+  getInnerPanelWidth() {
+    const { plugin, width } = this.props;
+    const { theme } = config;
+
+    const chromePadding = plugin.noPadding ? 0 : theme.panelPadding;
+    return width - chromePadding * 2 - PANEL_BORDER;
+  }
+
   loadAngularPanel() {
-    const { panel, dashboard, height, width, setPanelAngularComponent } = this.props;
+    const { panel, dashboard, setPanelAngularComponent } = this.props;
 
     // if we have no element or already have loaded the panel return
     if (!this.element) {
@@ -156,7 +175,7 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
     this.scopeProps = {
       panel: panel,
       dashboard: dashboard,
-      size: { width, height },
+      size: { width: this.getInnerPanelWidth(), height: this.getInnerPanelHeight() },
     };
 
     setPanelAngularComponent({
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index fd53faccea5..6fd4d456c3d 100644
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -102,7 +102,7 @@ class GraphElement {
 
     this.annotations = this.ctrl.annotations || [];
     this.buildFlotPairs(this.data);
-    const graphHeight = this.elem.height();
+    const graphHeight = this.ctrl.height;
     updateLegendValues(this.data, this.panel, graphHeight);
 
     if (!this.panel.legend.show) {