UI: Improve 'Wind speed and direction' widget data keys configuration.

application/src/main/data/json/system/widget_types/wind_speed_and_direction.json

@@ -11,13 +11,13 @@
     "resources": [],
     "templateHtml": "<tb-wind-speed-direction-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-wind-speed-direction-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 2,\n        singleEntity: true,\n        previewWidth: '270px',\n        previewHeight: '270px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'direction', label: 'Direction', type: 'timeseries' },\n                    { name: 'speed', label: 'centerValue', type: 'timeseries',\n                      units: 'm/s', decimals: 1 }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 2,\n        singleEntity: true,\n        previewWidth: '270px',\n        previewHeight: '270px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'direction', label: 'Wind Direction', type: 'timeseries' },\n                    { name: 'speed', label: 'Wind Speed', type: 'timeseries',\n                      units: 'm/s', decimals: 1 }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-wind-speed-direction-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-wind-speed-direction-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"windDirection\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.7227918773301678,\"funcBody\":\"if (prevValue === 0) {\\n    prevValue = Math.random() * 360;\\n}\\nvar value = prevValue + Math.random() * 20 - 10;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 360) {\\n\\tvalue = 360;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"centerValue\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"var value = prevValue + Math.random() * 16 - 8;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 26) {\\n\\tvalue = 26;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":\"m/s\",\"decimals\":1,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"layout\":\"default\",\"centerValueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"32px\"},\"centerValueColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"rangeList\":[{\"from\":0,\"to\":0.2,\"color\":\"#7191EF\"},{\"from\":0.2,\"to\":3.4,\"color\":\"#5B7EE6\"},{\"from\":3.4,\"to\":8,\"color\":\"#5B7EE6\"},{\"from\":8,\"to\":10.8,\"color\":\"#305AD7\"},{\"from\":10.8,\"to\":17.2,\"color\":\"#234CC7\"},{\"from\":17.2,\"to\":24.5,\"color\":\"#F04022\"},{\"from\":24.5,\"to\":null,\"color\":\"#D81838\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"ticksColor\":\"rgba(0, 0, 0, 0.12)\",\"directionalNamesElseDegrees\":true,\"majorTicksFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"20px\"},\"majorTicksColor\":\"rgba(158, 158, 158, 1)\",\"minorTicksFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"20px\"},\"minorTicksColor\":\"rgba(0, 0, 0, 0.12)\",\"arrowColor\":\"rgba(0, 0, 0, 0.87)\",\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Wind Speed\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":\"\",\"decimals\":0,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{\"headerButton\":[]},\"configMode\":\"basic\",\"displayTimewindow\":true,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showTitleIcon\":true,\"titleTooltip\":\"\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"titleIcon\":\"mdi:windsock\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"14px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"color\":null},\"titleColor\":\"rgba(0, 0, 0, 0.87)\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Wind Direction\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.7227918773301678,\"funcBody\":\"if (prevValue === 0) {\\n    prevValue = Math.random() * 360;\\n}\\nvar value = prevValue + Math.random() * 20 - 10;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 360) {\\n\\tvalue = 360;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Wind Speed\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"var value = prevValue + Math.random() * 16 - 8;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 26) {\\n\\tvalue = 26;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":\"m/s\",\"decimals\":1,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"layout\":\"default\",\"centerValueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"32px\"},\"centerValueColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"rangeList\":[{\"from\":0,\"to\":0.2,\"color\":\"#7191EF\"},{\"from\":0.2,\"to\":3.4,\"color\":\"#5B7EE6\"},{\"from\":3.4,\"to\":8,\"color\":\"#5B7EE6\"},{\"from\":8,\"to\":10.8,\"color\":\"#305AD7\"},{\"from\":10.8,\"to\":17.2,\"color\":\"#234CC7\"},{\"from\":17.2,\"to\":24.5,\"color\":\"#F04022\"},{\"from\":24.5,\"to\":null,\"color\":\"#D81838\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"ticksColor\":\"rgba(0, 0, 0, 0.12)\",\"directionalNamesElseDegrees\":true,\"majorTicksFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"20px\"},\"majorTicksColor\":\"rgba(158, 158, 158, 1)\",\"minorTicksFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"20px\"},\"minorTicksColor\":\"rgba(0, 0, 0, 0.12)\",\"arrowColor\":\"rgba(0, 0, 0, 0.87)\",\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Wind Speed\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":\"\",\"decimals\":0,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{\"headerButton\":[]},\"configMode\":\"basic\",\"displayTimewindow\":true,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showTitleIcon\":true,\"titleTooltip\":\"\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"titleIcon\":\"mdi:windsock\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"14px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"color\":null},\"titleColor\":\"rgba(0, 0, 0, 0.87)\"}"
   },
   "externalId": null,
   "tags": [

ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts

@@ -34,15 +34,8 @@ import {
   setTimewindowConfig
 } from '@home/components/widget/config/timewindow-config-panel.component';
 import { formatValue, isDefinedAndNotNull, isUndefined } from '@core/utils';
+import { cssSizeToStrSize, getDataKey, resolveCssSize, updateDataKeys } from '@shared/models/widget-settings.models';
 import {
-  cssSizeToStrSize, getDataKey,
-  getDataKeyByLabel,
-  resolveCssSize,
-  updateDataKeyByLabel
-} from '@shared/models/widget-settings.models';
-import {
-  centerValueLabel,
-  windDirectionLabel,
   windSpeedDirectionDefaultSettings,
   WindSpeedDirectionLayout,
   windSpeedDirectionLayoutImages,
@@ -108,25 +101,21 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
   }
 
   protected defaultDataKeys(configData: WidgetConfigComponentData): DataKey[] {
-    return [{ name: 'winddirection', label: windDirectionLabel, type: DataKeyType.timeseries },
+    return [{ name: 'direction', label: 'Wind Direction', type: DataKeyType.timeseries },
-      { name: 'windspeed', label: centerValueLabel, type: DataKeyType.timeseries,
+      { name: 'speed', label: 'Wind Speed', type: DataKeyType.timeseries,
         units: 'm/s', decimals: 1 }];
   }
 
   protected onConfigSet(configData: WidgetConfigComponentData) {
     const settings: WindSpeedDirectionWidgetSettings = {...windSpeedDirectionDefaultSettings, ...(configData.config.settings || {})};
     const iconSize = resolveCssSize(configData.config.iconSize);
-    let windDirectionDataKey = getDataKeyByLabel(configData.config.datasources, windDirectionLabel);
-    if (!windDirectionDataKey) {
-      windDirectionDataKey = getDataKey(configData.config.datasources);
-    }
     this.windSpeedDirectionWidgetConfigForm = this.fb.group({
       timewindowConfig: [getTimewindowConfig(configData.config), []],
       datasources: [configData.config.datasources, []],
 
-      windDirectionKey: [windDirectionDataKey, [Validators.required]],
+      windDirectionKey: [getDataKey(configData.config.datasources, 0), [Validators.required]],
 
-      centerValueKey: [getDataKeyByLabel(configData.config.datasources, centerValueLabel), []],
+      centerValueKey: [getDataKey(configData.config.datasources, 1), []],
       centerValueFont: [settings.centerValueFont, []],
       centerValueColor: [settings.centerValueColor, []],
 
@@ -167,8 +156,15 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
     setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig);
     this.widgetConfig.config.datasources = config.datasources;
 
-    updateDataKeyByLabel(this.widgetConfig.config.datasources, config.windDirectionKey, windDirectionLabel);
+    const dataKeys: DataKey[] = [];
-    updateDataKeyByLabel(this.widgetConfig.config.datasources, config.centerValueKey, centerValueLabel);
+    if (config.windDirectionKey) {
+      dataKeys.push(config.windDirectionKey);
+      if (config.centerValueKey) {
+        dataKeys.push(config.centerValueKey);
+      }
+    }
+
+    updateDataKeys(this.widgetConfig.config.datasources, dataKeys);
 
     this.widgetConfig.config.showTitle = config.showTitle;
     this.widgetConfig.config.title = config.title;

ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts

@@ -21,14 +21,13 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { formatValue, isDefinedAndNotNull } from '@core/utils';
 import {
-  centerValueLabel,
   windSpeedDirectionDefaultSettings,
   WindSpeedDirectionLayout,
   windSpeedDirectionLayoutImages,
   windSpeedDirectionLayouts,
   windSpeedDirectionLayoutTranslations
 } from '@home/components/widget/lib/weather/wind-speed-direction-widget.models';
-import { getDataKeyByLabel } from '@shared/models/widget-settings.models';
+import { getDataKey } from '@shared/models/widget-settings.models';
 
 @Component({
   selector: 'tb-wind-speed-direction-widget-settings',
@@ -38,7 +37,7 @@ import { getDataKeyByLabel } from '@shared/models/widget-settings.models';
 export class WindSpeedDirectionWidgetSettingsComponent extends WidgetSettingsComponent {
 
   get hasCenterValue(): boolean {
-    return !!getDataKeyByLabel(this.widgetConfig.config.datasources, centerValueLabel);
+    return !!getDataKey(this.widgetConfig.config.datasources, 1);
   }
 
   get majorTicksFontEnabled(): boolean {
@@ -120,7 +119,7 @@ export class WindSpeedDirectionWidgetSettingsComponent extends WidgetSettingsCom
   }
 
   private _centerValuePreviewFn(): string {
-    const centerValueDataKey = getDataKeyByLabel(this.widgetConfig.config.datasources, centerValueLabel);
+    const centerValueDataKey = getDataKey(this.widgetConfig.config.datasources, 1);
     if (centerValueDataKey) {
       let units: string = this.widgetConfig.config.units;
       let decimals: number = this.widgetConfig.config.decimals;

ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts

@@ -24,12 +24,11 @@ import {
   OnInit,
   Renderer2,
   TemplateRef,
-  ViewChild, ViewEncapsulation
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import { WidgetContext } from '@home/models/widget-component.models';
 import {
-  centerValueLabel,
-  windDirectionLabel,
   windSpeedDirectionDefaultSettings,
   WindSpeedDirectionLayout,
   WindSpeedDirectionWidgetSettings
@@ -38,8 +37,8 @@ import {
   backgroundStyle,
   ColorProcessor,
   ComponentStyle,
-  Font, getDataKey,
+  Font,
-  getDataKeyByLabel,
+  getDataKey,
   getSingleTsValueByDataKey,
   overlayStyle
 } from '@shared/models/widget-settings.models';
@@ -118,11 +117,8 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
     this.ctx.$scope.windSpeedDirectionWidget = this;
     this.settings = {...windSpeedDirectionDefaultSettings, ...this.ctx.settings};
 
-    this.windDirectionDataKey = getDataKeyByLabel(this.ctx.datasources, windDirectionLabel);
+    this.windDirectionDataKey = getDataKey(this.ctx.datasources, 0);
-    if (!this.windDirectionDataKey) {
+    this.centerValueDataKey = getDataKey(this.ctx.datasources, 1);
-      this.windDirectionDataKey = getDataKey(this.ctx.datasources);
-    }
-    this.centerValueDataKey = getDataKeyByLabel(this.ctx.datasources, centerValueLabel);
 
     if (this.centerValueDataKey) {
       this.decimals = this.ctx.decimals;
@@ -169,21 +165,27 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
   }
 
   public onDataUpdated() {
-    let centerValue = 0;
+    let value = 0;
     this.windDirection = 0;
     this.centerValueText = 'N/A';
-    const windDirectionTsValue = getSingleTsValueByDataKey(this.ctx.data, this.windDirectionDataKey);
+    if (this.windDirectionDataKey) {
-    if (windDirectionTsValue && isDefinedAndNotNull(windDirectionTsValue[1]) && isNumeric(windDirectionTsValue[1])) {
+      const windDirectionTsValue = getSingleTsValueByDataKey(this.ctx.data, this.windDirectionDataKey);
-      this.windDirection = windDirectionTsValue[1];
+      if (windDirectionTsValue && isDefinedAndNotNull(windDirectionTsValue[1]) && isNumeric(windDirectionTsValue[1])) {
+        this.windDirection = windDirectionTsValue[1];
+        if (!this.centerValueDataKey) {
+          value = this.windDirection;
+          this.centerValueText = formatValue(value, 0, '') + '°';
+        }
+      }
     }
     if (this.centerValueDataKey) {
       const centerValueTsValue = getSingleTsValueByDataKey(this.ctx.data, this.centerValueDataKey);
       if (centerValueTsValue && isDefinedAndNotNull(centerValueTsValue[1]) && isNumeric(centerValueTsValue[1])) {
-        centerValue = centerValueTsValue[1];
+        value = centerValueTsValue[1];
-        this.centerValueText = formatValue(centerValue, this.decimals, '', true);
+        this.centerValueText = formatValue(value, this.decimals, '', true);
       }
     }
-    this.centerValueColor.update(centerValue);
+    this.centerValueColor.update(value);
     this.renderValues();
   }
 
@@ -313,9 +315,8 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
   }
 
   private renderCenterValueText() {
-    const text = this.centerValueDataKey ? this.centerValueText : formatValue(this.windDirection, 0, '') + '°';
     this.centerValueTextNode.text(add => {
-      add.tspan(text).font({size: '24px'});
+      add.tspan(this.centerValueText).font({size: '24px'});
       if (this.units) {
         add.tspan(this.units).newLine().font({size: '14px'});
       }

ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts

@@ -103,6 +103,3 @@ export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings
     }
   }
 };
-
-export const windDirectionLabel = 'windDirection';
-export const centerValueLabel = 'centerValue';

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

@@ -422,16 +422,23 @@ export const overlayStyle = (overlay: OverlaySettings): ComponentStyle => (
   }
 );
 
-export const getDataKey = (datasources?: Datasource[]): DataKey => {
+export const getDataKey = (datasources?: Datasource[], index = 0): DataKey => {
   if (datasources && datasources.length) {
     const dataKeys = datasources[0].dataKeys;
-    if (dataKeys && dataKeys.length) {
+    if (dataKeys && dataKeys.length > index) {
-      return dataKeys[0];
+      return dataKeys[index];
     }
   }
   return null;
 };
 
+export const updateDataKeys = (datasources: Datasource[], dataKeys: DataKey[]): void => {
+  if (datasources && datasources.length) {
+    datasources[0].dataKeys = dataKeys;
+  }
+};
+
+
 export const getDataKeyByLabel = (datasources: Datasource[], label: string): DataKey => {
   if (datasources && datasources.length) {
     const dataKeys = datasources[0].dataKeys;