diff --git a/src/sql/parts/dashboard/containers/dashboardGridContainer.component.html b/src/sql/parts/dashboard/containers/dashboardGridContainer.component.html
index b68f52a9ee..80823e57f4 100644
--- a/src/sql/parts/dashboard/containers/dashboardGridContainer.component.html
+++ b/src/sql/parts/dashboard/containers/dashboardGridContainer.component.html
@@ -9,15 +9,15 @@
- |
-
-
-
+ |
-
-
-
- |
+
+
+
+
+
+
+
diff --git a/src/sql/parts/dashboard/containers/dashboardGridContainer.component.ts b/src/sql/parts/dashboard/containers/dashboardGridContainer.component.ts
index 3e1857a07a..8b6ac26684 100644
--- a/src/sql/parts/dashboard/containers/dashboardGridContainer.component.ts
+++ b/src/sql/parts/dashboard/containers/dashboardGridContainer.component.ts
@@ -24,8 +24,8 @@ export interface GridCellConfig {
id?: string;
row?: number;
col?: number;
- colspan?: number;
- rowspan?: number;
+ colspan?: string;
+ rowspan?: string;
}
export interface GridWidgetConfig extends GridCellConfig, WidgetConfig {
@@ -47,6 +47,8 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O
private _contents: GridCellConfig[];
private _onResize = new Emitter();
public readonly onResize: Event = this._onResize.event;
+ private cellWidth: number = 270;
+ private cellHeight: number = 270;
protected SKELETON_WIDTH = 5;
@@ -99,20 +101,47 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O
return undefined;
}
- protected getColspan(row: number, col: number): number {
+ protected getColspan(row: number, col: number): string {
let content = this.getContent(row, col);
- let colspan: number = 1;
+ let colspan: string = '1';
if (content && content.colspan) {
colspan = content.colspan;
}
return colspan;
}
- protected getRowspan(row: number, col: number): number {
+ protected getRowspan(row: number, col: number): string {
let content = this.getContent(row, col);
if (content && (content.rowspan)) {
return content.rowspan;
} else {
+ return '1';
+ }
+ }
+
+ protected getWidgetWidth(row: number, col: number): string {
+ let content = this.getContent(row, col);
+ let colspan = this.getColspan(row, col);
+ let columnCount = this.covertToNumber(colspan, this.cols.length);
+
+ return columnCount * this.cellWidth + 'px';
+ }
+
+ protected getWidgetHeight(row: number, col: number): string {
+ let content = this.getContent(row, col);
+ let rowspan = this.getRowspan(row, col);
+ let rowCount = this.covertToNumber(rowspan, this.rows.length);
+
+ return rowCount * this.cellHeight + 'px';
+ }
+
+ private covertToNumber(value: string, maxNumber: number): number {
+ if (value === '*') {
+ return maxNumber;
+ }
+ try {
+ return +value;
+ } catch {
return 1;
}
}
@@ -140,10 +169,10 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O
widget.col = 0;
}
if (!widget.colspan) {
- widget.colspan = 1;
+ widget.colspan = '1';
}
if (!widget.rowspan) {
- widget.rowspan = 1;
+ widget.rowspan = '1';
}
});
this.rows = this.createIndexes(this._contents.map(w => w.row));
diff --git a/src/sql/parts/dashboard/containers/dashboardGridContainer.css b/src/sql/parts/dashboard/containers/dashboardGridContainer.css
index bfd9b141f0..6f338ccda9 100644
--- a/src/sql/parts/dashboard/containers/dashboardGridContainer.css
+++ b/src/sql/parts/dashboard/containers/dashboardGridContainer.css
@@ -18,8 +18,7 @@ dashboard-tab {
}
.table-cell {
- height: 270px;
- min-width: 300px;
+
vertical-align: top;
padding: 7px;
}