IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-23 01:16:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

DashboardGrid: compare window width against theme breakpoints (#37868)

Browse Source
This commit is contained in:
Ashley Harrison 2021-08-17 16:53:25 +01:00 committed by GitHub
parent 1e221b6452
commit f8d7726187
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
View File

@ -32,6 +32,7 @@ export class DashboardGrid extends PureComponent<Props, State> {
private panelMap: { [id: string]: PanelModel } = {};
private eventSubs = new Subscription();
private windowHeight = 1200;
private windowWidth = 1920;
private gridWidth = 0;
constructor(props: Props) {
@ -152,6 +153,7 @@ export class DashboardGrid extends PureComponent<Props, State> {
// We assume here that if width change height might have changed as well
if (this.gridWidth !== gridWidth) {
this.windowHeight = window.innerHeight ?? 1000;
this.windowWidth = window.innerWidth;
this.gridWidth = gridWidth;
}
@ -170,6 +172,7 @@ export class DashboardGrid extends PureComponent<Props, State> {
gridPos={panel.gridPos}
gridWidth={gridWidth}
windowHeight={this.windowHeight}
windowWidth={this.windowWidth}
isViewing={panel.isViewing}
>
{(width: number, height: number) => {
@ -259,6 +262,7 @@ interface GrafanaGridItemProps extends Record<string, any> {
gridPos?: GridPos;
isViewing: string;
windowHeight: number;
windowWidth: number;
children: any;
}
@ -270,15 +274,15 @@ const GrafanaGridItem = React.forwardRef<HTMLDivElement, GrafanaGridItemProps>((
let width = 100;
let height = 100;
const { gridWidth, gridPos, isViewing, windowHeight, ...divProps } = props;
const { gridWidth, gridPos, isViewing, windowHeight, windowWidth, ...divProps } = props;
const style: CSSProperties = props.style ?? {};
if (isViewing) {
width = props.gridWidth!;
width = gridWidth!;
height = windowHeight * 0.85;
style.height = height;
style.width = '100%';
} else if (props.gridWidth! < theme.breakpoints.values.md) {
} else if (windowWidth < theme.breakpoints.values.md) {
width = props.gridWidth!;
height = props.gridPos!.h * (GRID_CELL_HEIGHT + GRID_CELL_VMARGIN) - GRID_CELL_VMARGIN;
style.height = height;