6371:dashboard_layouts_width_sizing

ui-ngx/src/app/core/services/dashboard-utils.service.ts

@@ -287,12 +287,12 @@ export class DashboardUtilsService {
     let addedCount = 0;
     let removedCount = 0;
     for (const l of Object.keys(state.layouts)) {
-      if (!newLayouts[l]) {
+      if (!newLayouts[l] && l !== 'layoutDimension') {
         removedCount++;
       }
     }
-    for (const l of Object.keys(newLayouts)) {
+    for (const l of Object.keys(newLayouts) ) {
-      if (!state.layouts[l]) {
+      if (!state.layouts[l] && l !== 'layoutDimension') {
         addedCount++;
       }
     }
@@ -301,17 +301,21 @@ export class DashboardUtilsService {
     let newColumns;
     if (addedCount) {
       for (const l of Object.keys(state.layouts)) {
-        newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount;
+        if(l !== 'layoutDimension') {
-        if (newColumns > 0) {
+          newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount;
-          state.layouts[l].gridSettings.columns = newColumns;
+          if (newColumns > 0) {
+            state.layouts[l].gridSettings.columns = newColumns;
+          }
         }
       }
     }
     if (removedCount) {
       for (const l of Object.keys(state.layouts)) {
-        newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount;
+        if(l !== 'layoutDimension') {
-        if (newColumns > 0) {
+          newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount;
-          state.layouts[l].gridSettings.columns = newColumns;
+          if (newColumns > 0) {
+            state.layouts[l].gridSettings.columns = newColumns;
+          }
         }
       }
     }
@@ -335,18 +339,20 @@ export class DashboardUtilsService {
     if (state) {
       const result: DashboardLayoutsInfo = {};
       for (const l of Object.keys(state.layouts)) {
-        const layout: DashboardLayout = state.layouts[l];
+        if(l !== 'layoutDimension') {
-        if (layout) {
+          const layout: DashboardLayout = state.layouts[l];
-          result[l] = {
+          if (layout) {
-            widgetIds: [],
+            result[l] = {
-            widgetLayouts: {},
+              widgetIds: [],
-            gridSettings: {}
+              widgetLayouts: {},
-          } as DashboardLayoutInfo;
+              gridSettings: {}
-          for (const id of Object.keys(layout.widgets)) {
+            } as DashboardLayoutInfo;
-            result[l].widgetIds.push(id);
+            for (const id of Object.keys(layout.widgets)) {
+              result[l].widgetIds.push(id);
+            }
+            result[l].widgetLayouts = layout.widgets;
+            result[l].gridSettings = layout.gridSettings;
           }
-          result[l].widgetLayouts = layout.widgets;
-          result[l].gridSettings = layout.gridSettings;
         }
       }
       return result;

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -266,7 +266,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
         ctrl: null,
         dashboardCtrl: this
       }
-    }
+    },
+    layoutDimension: null
   };
 
   addWidgetFabButtons: FooterFabButtons = {
@@ -654,7 +655,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') {
       return '100%';
     } else {
-      return this.layouts.right.show && !this.isMobile ? '50%' : '100%';
+      return this.layouts.right.show && !this.isMobile ? this.calculateWidth('main') : '100%';
     }
   }
 
@@ -670,10 +671,32 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') {
       return '100%';
     } else {
-      return this.isMobile ? '100%' : '50%';
+      return this.isMobile ? '100%' : this.calculateWidth('right');
     }
   }
 
+  private calculateWidth(layout: string): string {
+      const layoutDimension = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.layoutDimension;
+      if (layoutDimension) {
+        if (layoutDimension.type === 'percentage') {
+          if(layout === 'right') {
+            return (100 - layoutDimension.leftWidthPercentage) + '%';
+          } else {
+            return layoutDimension.leftWidthPercentage + '%';
+          }
+        } else {
+          if (layoutDimension.fixedLayout === layout) {
+            return layoutDimension.fixedWidth + 'px';
+          } else {
+            const layoutWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width - layoutDimension.fixedWidth;
+            return layoutWidth + 'px';
+          }
+        }
+      } else {
+        return '50%';
+      }
+  }
+
   public rightLayoutHeight(): string {
     if (!this.isEditingWidget || this.editingLayoutCtx.id === 'right') {
       return '100%';
@@ -887,13 +910,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
     for (const l of Object.keys(this.layouts)) {
       const layout: DashboardPageLayout = this.layouts[l];
-      if (layoutsData[l]) {
+      if(l !== 'layoutDimension') {
-        layout.show = true;
+        if (layoutsData[l]) {
-        const layoutInfo: DashboardLayoutInfo = layoutsData[l];
+          layout.show = true;
-        this.updateLayout(layout, layoutInfo);
+          const layoutInfo: DashboardLayoutInfo = layoutsData[l];
-      } else {
+          this.updateLayout(layout, layoutInfo);
-        layout.show = false;
+        } else {
-        this.updateLayout(layout, {widgetIds: [], widgetLayouts: {}, gridSettings: null});
+          layout.show = false;
+          this.updateLayout(layout, {widgetIds: [], widgetLayouts: {}, gridSettings: null});
+        }
       }
     }
   }
@@ -942,9 +967,11 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   private resetHighlight() {
     for (const l of Object.keys(this.layouts)) {
-      if (this.layouts[l].layoutCtx) {
+      if(l !== 'layoutDimension' ) {
-        if (this.layouts[l].layoutCtx.ctrl) {
+        if (this.layouts[l].layoutCtx) {
-          this.layouts[l].layoutCtx.ctrl.resetHighlight();
+          if (this.layouts[l].layoutCtx.ctrl) {
+            this.layouts[l].layoutCtx.ctrl.resetHighlight();
+          }
         }
       }
     }

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts

@@ -14,7 +14,13 @@
 /// limitations under the License.
 ///
 
-import { Dashboard, DashboardLayoutId, GridSettings, WidgetLayouts } from '@app/shared/models/dashboard.models';
+import {
+  Dashboard,
+  DashboardLayoutId,
+  GridSettings,
+  LayoutDimension,
+  WidgetLayouts
+} from '@app/shared/models/dashboard.models';
 import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
 import { Timewindow } from '@shared/models/time/time.models';
 import { IAliasController, IStateController } from '@core/api/widget-api.models';
@@ -68,7 +74,7 @@ export interface DashboardPageLayout {
   layoutCtx: DashboardPageLayoutContext;
 }
 
-export declare type DashboardPageLayouts = {[key in DashboardLayoutId]: DashboardPageLayout};
+export declare type DashboardPageLayouts = {[key in DashboardLayoutId | 'layoutDimension']: DashboardPageLayout & LayoutDimension};
 
 export class LayoutWidgetsArray implements Iterable<Widget> {
 

ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html

@@ -34,7 +34,7 @@
     <button mat-button *ngIf="isEdit && !widgetEditMode" class="tb-add-new-widget"
             (click)="addWidget($event)">
       <mat-icon class="tb-mat-96">add</mat-icon>
-      {{ 'dashboard.add-widget' | translate }}
+      <span>{{ 'dashboard.add-widget' | translate }}</span>
     </button>
   </section>
   <tb-dashboard #dashboard [dashboardStyle]="dashboardStyle"

ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.scss

@@ -16,8 +16,15 @@
 :host {
   button.tb-add-new-widget {
     padding-right: 12px;
-    font-size: 24px;
+    font-size: 20px;
     border-style: dashed;
     border-width: 2px;
+
+    ::ng-deep .mat-button-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }

ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts

@@ -22,3 +22,14 @@ export interface ILayoutController {
   pasteWidget($event: MouseEvent);
   pasteWidgetReference($event: MouseEvent);
 }
+
+export enum LayoutWidthType {
+  PERCENTAGE = "percentage",
+  FIXED = "fixed"
+}
+
+export enum LaouytType {
+  MAIN = "main",
+  RIGHT = "right",
+  LEFT = "left"
+}

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html

@@ -27,29 +27,126 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div mat-dialog-content>
+  <div mat-dialog-content style="min-width: 300px;">
     <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
         <mat-checkbox fxFlex formControlName="main">
-          {{ 'layout.main' | translate }}
+          {{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}
         </mat-checkbox>
         <mat-checkbox fxFlex formControlName="right">
           {{ 'layout.right' | translate }}
         </mat-checkbox>
       </div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <button fxFlex
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
-                type="button" mat-raised-button color="primary"
+          <button fxFlex
-                class="tb-layout-button"
+                  type="button"
-                (click)="openLayoutSettings('main')">
+                  mat-raised-button
-          <span translate>layout.main</span>
+                  color="primary"
-        </button>
+                  class="tb-layout-button"
-        <button fxFlex [fxShow]="layoutsFormGroup.get('right').value"
+                  (click)="openLayoutSettings('main')"
-                type="button" mat-raised-button color="primary"
+                  [ngStyle]="buttonStyle('main')">
-                class="tb-layout-button"
+            <span >{{ (layoutsFormGroup.value.right ? 'layout.left' :'layout.main')  | translate }}</span>
-                (click)="openLayoutSettings('right')">
+          </button>
-          <span translate>layout.right</span>
+          <button fxFlex [fxShow]="layoutsFormGroup.get('right').value"
-        </button>
+                  type="button"
+                  mat-raised-button
+                  color="primary"
+                  class="tb-layout-button"
+                  (click)="openLayoutSettings('right')"
+                  [ngStyle]="buttonStyle('right')">
+            <span >{{ 'layout.right' | translate }}</span>
+          </button>
+        </div>
+        <div fxLayout="column"
+             fxLayoutAlign="start center"
+             fxLayoutGap="8px"
+             [fxShow]="layoutsFormGroup.get('right').value">
+          <mat-button-toggle-group aria-label="Select width value type"
+                                   formControlName="type"
+                                   style="width: 100%;">
+            <mat-button-toggle style="width: 50%;" value="percentage">
+              {{ 'layout.percentage-width' | translate }}
+            </mat-button-toggle>
+            <mat-button-toggle style="width: 50%;" value="fixed">
+              {{ 'layout.fixed-width' | translate }}
+            </mat-button-toggle>
+          </mat-button-toggle-group>
+          <div [fxShow]="layoutsFormGroup.get('type').value === 'percentage'">
+            <div
+                 fxLayoutAlign="start center"
+                 fxLayoutGap="8px"
+                 style="width: 100%;">
+              <mat-slider min="10"
+                          step="1"
+                          style="width: 100%;"
+                          max="90"
+                          (input)="sliderChange($event)"
+                          formControlName="leftWidthPercentage"
+                          thumbLabel
+                          [displayWith]="formatSliderTooltipLabel"
+              ></mat-slider>
+            </div>
+            <div fxLayout="column">
+              <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
+                <mat-form-field class="mat-block">
+                  <mat-label>{{ 'layout.left-width' | translate }}</mat-label>
+                  <input matInput
+                         [value]="layoutValue('main')"
+                         (input)="layoutValueChange($event, 'main')"
+                         type="number"
+                         step="any"
+                         min="10"
+                         max="90">
+                </mat-form-field>
+                <mat-form-field fxFlex class="mat-block">
+                  <mat-label>{{ 'layout.right-width' | translate }}</mat-label>
+                  <input matInput
+                         [value]="layoutValue('right')"
+                         (input)="layoutValueChange($event, 'right')"
+                         type="number"
+                         step="any"
+                         min="10"
+                         max="90">
+                </mat-form-field>
+              </div>
+              <mat-hint class="tb-hint">{{'layout.layout-min-max' | translate: { min: 10, max: 90 } }}</mat-hint>
+            </div>
+          </div>
+          <div [fxShow]="layoutsFormGroup.get('type').value === 'fixed'"
+               style="width: 100%;"
+               fxLayout="column"
+               fxLayoutAlign="start center">
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container">
+              <label>{{ 'layout.pick-fixed-side' | translate }}</label>
+              <mat-radio-group aria-label="Select side"
+                               formControlName="fixedLayout"
+                               fxLayout="row"
+                               fxLayoutAlign="start center"
+                               fxLayoutGap="8px">
+                <mat-radio-button value="main">
+                  {{ 'layout.left' | translate }}
+                </mat-radio-button>
+                <mat-radio-button value="right">
+                  {{ 'layout.right' | translate }}
+                </mat-radio-button>
+              </mat-radio-group>
+            </div>
+            <div fxLayout="column" style="width: 100%; min-width: 368px;">
+              <mat-form-field class="mat-block" style="width: 100%;">
+                <mat-label>{{ 'layout.layout-fixed-width' | translate }}</mat-label>
+                <input matInput
+                       formControlName="fixedWidth"
+                       type="number"
+                       step="any"
+                       min="150"
+                       max="1700"
+                       required>
+              </mat-form-field>
+              <mat-hint class="tb-hint">{{ 'layout.layout-min-max' | translate: {min: 150, max: 1700 } }}</mat-hint>
+            </div>
+          </div>
+        </div>
       </div>
     </fieldset>
   </div>

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss

@@ -0,0 +1,33 @@
+/**
+ * Copyright © 2016-2022 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host {
+  ::ng-deep .mat-slider-wrapper {
+
+    .mat-slider-thumb-container {
+      .mat-slider-thumb-label {
+        width: 35px;
+        height: 35px;
+      }
+    }
+  }
+
+  .tb-layout-fixed-container {
+    width: 100%;
+    min-width: 368px;
+    padding: 8px 8px 8px 0;
+    min-height: 48px;
+  }
+}

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts

@@ -19,7 +19,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { UtilsService } from '@core/services/utils.service';
@@ -31,6 +31,8 @@ import {
   DashboardSettingsDialogComponent,
   DashboardSettingsDialogData
 } from '@home/components/dashboard-page/dashboard-settings-dialog.component';
+import { MatSliderChange } from "@angular/material/slider";
+import { LaouytType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
 
 export interface ManageDashboardLayoutsDialogData {
   layouts: DashboardStateLayouts;
@@ -40,7 +42,7 @@ export interface ManageDashboardLayoutsDialogData {
   selector: 'tb-manage-dashboard-layouts-dialog',
   templateUrl: './manage-dashboard-layouts-dialog.component.html',
   providers: [{provide: ErrorStateMatcher, useExisting: ManageDashboardLayoutsDialogComponent}],
-  styleUrls: ['../../../components/dashboard/layout-button.scss']
+  styleUrls: ['./manage-dashboard-layouts-dialog.component.scss', '../../../components/dashboard/layout-button.scss']
 })
 export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>
   implements OnInit, ErrorStateMatcher {
@@ -67,14 +69,29 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     this.layoutsFormGroup = this.fb.group({
         main:  [{value: isDefined(this.layouts.main), disabled: true}, []],
         right: [isDefined(this.layouts.right), []],
+        leftWidthPercentage: [50, [Validators.min(10), Validators.max(90)]],
+        type: [LayoutWidthType.PERCENTAGE, []],
+        fixedWidth: [150, [Validators.min(150), Validators.max(1700)]],
+        fixedLayout: [LaouytType.MAIN, []]
       }
     );
-    for (const l of Object.keys(this.layoutsFormGroup.controls)) {
+
-      const control = this.layoutsFormGroup.controls[l];
+    if(this.layouts.layoutDimension) {
-      if (!this.layouts[l]) {
+      this.layoutsFormGroup.get('type').setValue(this.layouts.layoutDimension.type);
-        this.layouts[l] = this.dashboardUtils.createDefaultLayoutData();
+      if(this.layouts.layoutDimension.type === LayoutWidthType.FIXED) {
+        this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.layoutDimension.fixedWidth);
+        this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.layoutDimension.fixedLayout);
+      } else {
+        this.layoutsFormGroup.get('leftWidthPercentage').setValue(this.layouts.layoutDimension.leftWidthPercentage);
       }
     }
+
+    if(!this.layouts[LaouytType.MAIN]) {
+      this.layouts[LaouytType.MAIN] = this.dashboardUtils.createDefaultLayoutData();
+    }
+    if(!this.layouts[LaouytType.RIGHT]) {
+      this.layouts[LaouytType.RIGHT] = this.dashboardUtils.createDefaultLayoutData();
+    }
   }
 
   ngOnInit(): void {
@@ -116,6 +133,66 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
         delete this.layouts[l];
       }
     }
+    if(this.layoutsFormGroup.value.right) {
+      const formValues = this.layoutsFormGroup.value;
+      const widthType = formValues.type;
+      (this.layouts.layoutDimension as any) = {
+        type: widthType
+      }
+      if(widthType === LayoutWidthType.PERCENTAGE) {
+        this.layouts.layoutDimension.leftWidthPercentage = formValues.leftWidthPercentage;
+      } else {
+        this.layouts.layoutDimension.fixedWidth = formValues.fixedWidth;
+        this.layouts.layoutDimension.fixedLayout = formValues.fixedLayout;
+      }
+    }
     this.dialogRef.close(this.layouts);
   }
+
+  buttonStyle(layout: DashboardLayoutId): { maxWidth: string } {
+    if(this.layoutsFormGroup.value.type && this.layoutsFormGroup.value.right) {
+      if (this.layoutsFormGroup.value.type !== LayoutWidthType.FIXED) {
+        if (layout === LaouytType.MAIN) {
+          return { maxWidth: this.layoutsFormGroup.value.leftWidthPercentage + "%" };
+        } else {
+          return { maxWidth: (100 - this.layoutsFormGroup.value.leftWidthPercentage) + "%" };
+        }
+      } else {
+        return { maxWidth: '100%' };
+      }
+    }
+  }
+
+  layoutValue(layout:DashboardLayoutId): number {
+    if(layout === LaouytType.MAIN) {
+      return this.layoutsFormGroup.value.leftWidthPercentage;
+    } else {
+      return (100 - this.layoutsFormGroup.value.leftWidthPercentage);
+    }
+  }
+
+  layoutValueChange($event: Event, layout:DashboardLayoutId): void {
+    let widthValue: number;
+    if(Number(($event.target as any).value) > 90) {
+      widthValue = 90;
+    } else if (Number(($event.target as any).value) < 10) {
+      widthValue = 10;
+    } else {
+      widthValue = Number(($event.target as any).value);
+    }
+    if(layout === LaouytType.MAIN) {
+      this.layoutsFormGroup.get('leftWidthPercentage').setValue(widthValue);
+    } else {
+      this.layoutsFormGroup.get('leftWidthPercentage').setValue(100 - widthValue);
+    }
+    this.layoutsFormGroup.markAsDirty();
+  }
+
+  formatSliderTooltipLabel(value: number):string {
+    return `${value}|${100 - value}`;
+  }
+
+  sliderChange($event: MatSliderChange) {
+    this.layoutsFormGroup.get('leftWidthPercentage').setValue($event.value);
+  }
 }

ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss

@@ -17,7 +17,9 @@
   button.tb-layout-button {
     width: 100%;
     height: 100%;
-    padding: 40px 20px;
+    padding: 40px 10px;
+    transition-duration: 0.5s;
+    transition-property: max-width;
   }
 
   &::ng-deep {

ui-ngx/src/app/modules/home/components/home-components.module.ts

@@ -17,6 +17,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@app/shared/shared.module';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { AddEntityDialogComponent } from '@home/components/entity/add-entity-dialog.component';
 import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
 import { DetailsPanelComponent } from '@home/components/details-panel.component';
@@ -277,7 +278,8 @@ import { EntityDetailsPageComponent } from '@home/components/entity/entity-detai
     SnmpDeviceProfileTransportModule,
     StatesControllerModule,
     DeviceCredentialsModule,
-    DeviceProfileCommonModule
+    DeviceProfileCommonModule,
+    MatButtonToggleModule
   ],
   exports: [
     EntitiesTableComponent,

ui-ngx/src/app/shared/models/dashboard.models.ts

@@ -69,9 +69,18 @@ export interface DashboardLayoutInfo {
   gridSettings?: GridSettings;
 }
 
+export interface LayoutDimension {
+  type?: LayoutType,
+  fixedWidth?: number,
+  fixedLayout?: DashboardLayoutId,
+  leftWidthPercentage?: number
+}
+
 export declare type DashboardLayoutId = 'main' | 'right';
 
-export declare type DashboardStateLayouts = {[key in DashboardLayoutId]?: DashboardLayout};
+export declare type LayoutType = 'percentage' | 'fixed';
+
+export declare type DashboardStateLayouts = {[key in DashboardLayoutId | 'layoutDimension']?: DashboardLayout & LayoutDimension };
 
 export declare type DashboardLayoutsInfo = {[key in DashboardLayoutId]?: DashboardLayoutInfo};
 

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2344,7 +2344,15 @@
         "color": "Color",
         "main": "Main",
         "right": "Right",
-        "select": "Select target layout"
+        "left": "Left",
+        "select": "Select target layout",
+        "percentage-width": "Percentage width (%)",
+        "fixed-width": "Fixed width (px)",
+        "left-width": "Left width (%)",
+        "right-width": "Right width (%)",
+        "pick-fixed-side": "Fixed side: ",
+        "layout-fixed-width": "Fixed width (px)",
+        "layout-min-max": "Width should not be lower then {{min}} and higher then {{max}}"
     },
     "legend": {
         "direction": "Legend direction",