AngularPanels: Fixed inner height calculation (#22796)

(cherry picked from commit f78501f3)

public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx

@@ -11,11 +11,13 @@ import { PanelHeader } from './PanelHeader/PanelHeader';
 import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
 import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
 import { getAngularLoader, AngularComponent } from '@grafana/runtime';
 import { getAngularLoader, AngularComponent } from '@grafana/runtime';
 import { setPanelAngularComponent } from '../state/reducers';
 import { setPanelAngularComponent } from '../state/reducers';
+import config from 'app/core/config';
 
 
 // Types
 // Types
 import { DashboardModel, PanelModel } from '../state';
 import { DashboardModel, PanelModel } from '../state';
 import { StoreState } from 'app/types';
 import { StoreState } from 'app/types';
 import { LoadingState, DefaultTimeRange, PanelData, PanelPlugin, PanelEvents } from '@grafana/data';
 import { LoadingState, DefaultTimeRange, PanelData, PanelPlugin, PanelEvents } from '@grafana/data';
+import { PANEL_BORDER } from 'app/core/constants';
 
 
 interface OwnProps {
 interface OwnProps {
   panel: PanelModel;
   panel: PanelModel;
@@ -135,15 +137,32 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
 
 
     if (prevProps.width !== width || prevProps.height !== height) {
     if (prevProps.width !== width || prevProps.height !== height) {
       if (this.scopeProps) {
       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);
         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() {
   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 we have no element or already have loaded the panel return
     if (!this.element) {
     if (!this.element) {
@@ -156,7 +175,7 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
     this.scopeProps = {
     this.scopeProps = {
       panel: panel,
       panel: panel,
       dashboard: dashboard,
       dashboard: dashboard,
-      size: { width, height },
+      size: { width: this.getInnerPanelWidth(), height: this.getInnerPanelHeight() },
     };
     };
 
 
     setPanelAngularComponent({
     setPanelAngularComponent({

public/app/plugins/panel/graph/graph.ts

@@ -102,7 +102,7 @@ class GraphElement {
 
 
     this.annotations = this.ctrl.annotations || [];
     this.annotations = this.ctrl.annotations || [];
     this.buildFlotPairs(this.data);
     this.buildFlotPairs(this.data);
-    const graphHeight = this.elem.height();
+    const graphHeight = this.ctrl.height;
     updateLegendValues(this.data, this.panel, graphHeight);
     updateLegendValues(this.data, this.panel, graphHeight);
 
 
     if (!this.panel.legend.show) {
     if (!this.panel.legend.show) {