Commit f78501f3 by Torkel Ödegaard Committed by GitHub

AngularPanels: Fixed inner height calculation (#22796)

parent 1db06739
...@@ -11,11 +11,13 @@ import { PanelHeader } from './PanelHeader/PanelHeader'; ...@@ -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> { ...@@ -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.height = this.getInnerPanelHeight();
this.scopeProps.size.width = width; 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> { ...@@ -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({
......
...@@ -102,7 +102,7 @@ class GraphElement { ...@@ -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) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment