Add input field no data to display alternative message

ui-ngx/src/app/modules/home/components/widget/widget-config.component.html

@@ -306,6 +306,12 @@
                 <input matInput formControlName="decimals" type="number" min="0" max="15" step="1">
               </mat-form-field>
             </div>
+            <div fxLayout="row">
+              <mat-form-field fxFlex>
+                <mat-label translate>widget-config.no-data-display-message</mat-label>
+                <input matInput formControlName="noDataDisplayMessage">
+              </mat-form-field>
+            </div>
           </ng-template>
         </mat-expansion-panel>
       </mat-accordion>

ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts

@@ -209,6 +209,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
       titleStyle: [null, []],
       units: [null, []],
       decimals: [null, [Validators.min(0), Validators.max(15), Validators.pattern(/^\d*$/)]],
+      noDataDisplayMessage: [null, []],
       showLegend: [null, []],
       legendConfig: [null, []]
     });
@@ -411,6 +412,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
             },
             units: config.units,
             decimals: config.decimals,
+            noDataDisplayMessage: isDefined(config.noDataDisplayMessage) ? config.noDataDisplayMessage : '',
             showLegend: isDefined(config.showLegend) ? config.showLegend :
               this.widgetType === widgetType.timeseries,
             legendConfig: config.legendConfig || defaultLegendConfig(this.widgetType)

ui-ngx/src/app/modules/home/components/widget/widget.component.html

@@ -39,8 +39,7 @@
 <div class="tb-absolute-fill tb-widget-no-data" *ngIf="displayNoData">
   <span fxLayoutAlign="center center"
         style="display: flex;"
-        class="tb-absolute-fill"
+        class="tb-absolute-fill">{{ noDataDisplayMessageText }}</span>
-        translate>widget.no-data</span>
 </div>
 <div class="tb-absolute-fill tb-widget-loading" [fxShow]="loadingData" fxLayout="column" fxLayoutAlign="center center">
   <mat-spinner color="accent" md-mode="indeterminate" diameter="40"></mat-spinner>

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

@@ -361,6 +361,11 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
     }, 0);
   }
 
+  get noDataDisplayMessageText(): string {
+    const noDataDisplayMessage = isNotEmptyStr(this.widget.config.noDataDisplayMessage) ? this.widget.config.noDataDisplayMessage : '{i18n:widget.no-data}';
+    return this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage);
+  }
+
   ngAfterViewInit(): void {
   }
 

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

@@ -323,6 +323,8 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
   dropShadow: boolean;
   enableFullscreen: boolean;
 
+  noDataDisplayMessage: string;
+
   hasTimewindow: boolean;
 
   hasAggregation: boolean;
@@ -411,6 +413,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
 
     this.titleIcon = isDefined(this.widget.config.titleIcon) ? this.widget.config.titleIcon : '';
     this.showTitleIcon = isDefined(this.widget.config.showTitleIcon) ? this.widget.config.showTitleIcon : false;
+    this.noDataDisplayMessage = isDefined(this.widget.config.noDataDisplayMessage) ? this.widget.config.noDataDisplayMessage : '';
     this.titleIconStyle = {};
     if (this.widget.config.iconColor) {
       this.titleIconStyle.color = this.widget.config.iconColor;

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

@@ -509,6 +509,7 @@ export interface WidgetConfig {
   titleStyle?: {[klass: string]: any};
   units?: string;
   decimals?: number;
+  noDataDisplayMessage?: string;
   actions?: {[actionSourceId: string]: Array<WidgetActionDescriptor>};
   settings?: any;
   alarmSource?: Datasource;

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

@@ -3077,7 +3077,8 @@
         "icon-color": "Icon color",
         "icon-size": "Icon size",
         "advanced-settings": "Advanced settings",
-        "data-settings": "Data settings"
+        "data-settings": "Data settings",
+        "no-data-display-message": "\"No data to display\" alternative message"
     },
     "widget-type": {
         "import": "Import widget type",

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

@@ -1679,7 +1679,8 @@
         "icon-color": "Цвет иконки",
         "icon-size": "Размер иконки",
         "advanced-settings": "Расширенные настройки",
-        "data-settings": "Настройки данных"
+        "data-settings": "Настройки данных",
+        "no-data-display-message": "\"Нет данных для отображения\" альтернативный текст"
     },
     "widget-type": {
         "import": "Импортировать тип виджета",

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

@@ -2251,7 +2251,8 @@
         "icon-color": "Колір іконки",
         "icon-size": "Розмір іконки",
         "advanced-settings": "Розширені налаштування",
-        "data-settings": "Налаштування даних"
+        "data-settings": "Налаштування даних",
+        "no-data-display-message": "\"Немає данних для відображення\" альтернативний текст"
     },
     "widget-type": {
         "import": "Імпортувати тип віджета",