Added 'Use entity lable in tab name' checkbox in Timeseries table

Kalutka Zhenya
1 parent dc875508
Showing 3 changed files with 13 additions and 2 deletions
application/src/main/data/json/system/widget_bundles/cards.json
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
--- a/application/src/main/data/json/system/widget_bundles/cards.json
View file @2c7ab1a
+++ b/application/src/main/data/json/system/widget_bundles/cards.json
View file @2c7ab1a
@@ -55,7 +55,7 @@
         "templateHtml": "<tb-timeseries-table-widget \n    [ctx]=\"ctx\">\n</tb-timeseries-table-widget>",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n     self.ctx.$scope.timeseriesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        ignoreDataUpdateOnIntervalTick: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"TimeseriesTableSettings\",\n        \"properties\": {\n            \"enableSearch\": {\n                \"title\": \"Enable search\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyHeader\": {\n                \"title\": \"Always display header\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyAction\": {\n                \"title\": \"Always display actions column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"showTimestamp\": {\n                \"title\": \"Display timestamp column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"showMilliseconds\": {\n                \"title\": \"Display timestamp milliseconds\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"displayPagination\": {\n                \"title\": \"Display pagination\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },            \n            \"defaultPageSize\": {\n                \"title\": \"Default page size\",\n                \"type\": \"number\",\n                \"default\": 10\n            },\n            \"hideEmptyLines\": {\n                \"title\": \"Hide empty lines\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"disableStickyHeader\": {\n                \"title\": \"Disable sticky header\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"useRowStyleFunction\": {\n                \"title\": \"Use row style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"rowStyleFunction\": {\n                \"title\": \"Row style function: f(rowData, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"enableSearch\",\n        \"enableStickyHeader\",\n        \"enableStickyAction\",\n        \"showTimestamp\",\n        \"showMilliseconds\",\n        \"displayPagination\",\n        \"defaultPageSize\",\n        \"hideEmptyLines\",\n        \"useRowStyleFunction\",\n        {\n            \"key\": \"rowStyleFunction\",\n            \"type\": \"javascript\",\n            \"condition\": \"model.useRowStyleFunction === true\"\n        }\n    ]\n}",
+        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"TimeseriesTableSettings\",\n        \"properties\": {\n            \"enableSearch\": {\n                \"title\": \"Enable search\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyHeader\": {\n                \"title\": \"Always display header\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyAction\": {\n                \"title\": \"Always display actions column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"showTimestamp\": {\n                \"title\": \"Display timestamp column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"showMilliseconds\": {\n                \"title\": \"Display timestamp milliseconds\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"displayPagination\": {\n                \"title\": \"Display pagination\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },     \n            \"useDeviceLabel\": {\n                \"title\": \"Use entity label in tab name\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"defaultPageSize\": {\n                \"title\": \"Default page size\",\n                \"type\": \"number\",\n                \"default\": 10\n            },\n            \"hideEmptyLines\": {\n                \"title\": \"Hide empty lines\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"disableStickyHeader\": {\n                \"title\": \"Disable sticky header\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"useRowStyleFunction\": {\n                \"title\": \"Use row style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"rowStyleFunction\": {\n                \"title\": \"Row style function: f(rowData, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"enableSearch\",\n        \"enableStickyHeader\",\n        \"enableStickyAction\",\n        \"showTimestamp\",\n        \"showMilliseconds\",\n        \"displayPagination\",\n        \"useDeviceLabel\",\n        \"defaultPageSize\",\n        \"identifyDeviceSelector\",\n        \"hideEmptyLines\",\n        \"useRowStyleFunction\",\n        {\n            \"key\": \"rowStyleFunction\",\n            \"type\": \"javascript\",\n            \"condition\": \"model.useRowStyleFunction === true\"\n        }\n    ]\n}",
         "dataKeySettingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"DataKeySettings\",\n        \"properties\": {\n            \"useCellStyleFunction\": {\n                \"title\": \"Use cell style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellStyleFunction\": {\n                \"title\": \"Cell style function: f(value, rowData, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"useCellContentFunction\": {\n                \"title\": \"Use cell content function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellContentFunction\": {\n                \"title\": \"Cell content function: f(value, rowData, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"useCellStyleFunction\",\n        {\n            \"key\": \"cellStyleFunction\",\n            \"type\": \"javascript\",\n            \"condition\": \"model.useCellStyleFunction === true\"\n        },\n        \"useCellContentFunction\",\n        {\n            \"key\": \"cellContentFunction\",\n            \"type\": \"javascript\",\n            \"condition\": \"model.useCellContentFunction === true\"\n        }\n    ]\n}",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature  °C\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n    var percent = (value + 60)/120 * 100;\\n    var color = tinycolor.mix('blue', 'red', amount = percent);\\n    color.setAlpha(.5);\\n    return {\\n      paddingLeft: '20px',\\n      color: '#ffffff',\\n      background: color.toRgbString(),\\n      fontSize: '18px'\\n    };\\n} else {\\n    return {};\\n}\"},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Humidity, %\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n    var percent = value;\\n    var backgroundColor = tinycolor('blue');\\n    backgroundColor.setAlpha(value/100);\\n    var color = 'blue';\\n    if (value > 50) {\\n        color = 'white';\\n    }\\n    \\n    return {\\n      paddingLeft: '20px',\\n      color: color,\\n      background: backgroundColor.toRgbString(),\\n      fontSize: '18px'\\n    };\\n} else {\\n    return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 20 - 10;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":60000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"showTimestamp\":true,\"displayPagination\":true,\"defaultPageSize\":10},\"title\":\"Timeseries table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"showTitleIcon\":false,\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\"}"
       }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
View file @2c7ab1a
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
View file @2c7ab1a
@@ -39,7 +39,7 @@
     </mat-toolbar>
     <mat-tab-group [ngClass]="{'tb-headless': sources.length === 1}" fxFlex
                    [(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()">
-      <mat-tab *ngFor="let source of sources; trackBy: trackBySourcesIndex; let index = index;" label="{{ source.datasource.name }}">
+      <mat-tab *ngFor="let source of sources; trackBy: trackBySourcesIndex; let index = index;" label="{{getTabLabel(source, this.useDeviceLabel)}}">
         <ng-template [ngIf]="isActiveTab(index)">
           <div fxFlex class="table-container">
             <table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowTimestamp"
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
View file @2c7ab1a
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
View file @2c7ab1a
@@ -93,6 +93,7 @@ interface TimeseriesTableSource {
   header: TimeseriesHeader[];
   stylesInfo: CellStyleInfo[];
   contentsInfo: CellContentInfo[];
+  useDeviceLabel: boolean,
   rowDataTemplate: {[key: string]: any};
 }
@@ -129,6 +130,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   private defaultSortOrder = '-0';
   private hideEmptyLines = false;
   public showTimestamp = true;
+  public  useDeviceLabel = false;
   private dateFormatFilter: string;
   private rowStylesInfo: RowStyleInfo;
@@ -205,6 +207,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     this.enableStickyHeader = isDefined(this.settings.enableStickyHeader) ? this.settings.enableStickyHeader : true;
     this.enableStickyAction = isDefined(this.settings.enableStickyAction) ? this.settings.enableStickyAction : true;
     this.hideEmptyLines = isDefined(this.settings.hideEmptyLines) ? this.settings.hideEmptyLines : false;
+    this.useDeviceLabel = isDefined(this.widgetConfig.settings.useDeviceLabel) ? this.widgetConfig.settings.useDeviceLabel : false;
     this.showTimestamp = this.settings.showTimestamp !== false;
     this.dateFormatFilter = (this.settings.showMilliseconds !== true) ? 'yyyy-MM-dd HH:mm:ss' :  'yyyy-MM-dd HH:mm:ss.SSS';
@@ -232,6 +235,14 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     this.updateDatasources();
   }
+  public getTabLabel(source, useDeviceLabel){
+    if(useDeviceLabel){
+      return source.datasource.entityLabel ? source.datasource.entityLabel : source.datasource.entityName;
+    } else {
+      return source.datasource.entityName;
+    }
+  }
+
   private updateDatasources() {
     this.sources = [];
     this.sourceIndex = 0;