tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/9460/head
Igor Kulikov 3 years ago
parent
f88734c010
commit
54ef5364ec
7 changed files with 51 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      application/src/main/data/json/system/widget_types/wind_speed_and_direction.json
  2. 4
      application/src/main/data/json/system/widget_types/wind_speed_and_direction_with_background.json
  3. 32
      ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
  4. 7
      ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
  5. 39
      ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
  6. 3
      ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts
  7. 13
      ui-ngx/src/app/shared/models/widget-settings.models.ts

4
application/src/main/data/json/system/widget_types/wind_speed_and_direction.json
View File

@ -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": [

4
application/src/main/data/json/system/widget_types/wind_speed_and_direction_with_background.json
View File

File diff suppressed because one or more lines are too long

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

@ -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 },
{ name: 'windspeed', label: centerValueLabel, type: DataKeyType.timeseries,
return [{ name: 'direction', label: 'Wind Direction', 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);
updateDataKeyByLabel(this.widgetConfig.config.datasources, config.centerValueKey, centerValueLabel);
const dataKeys: DataKey[] = [];
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;

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

@ -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;

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

@ -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,
getDataKeyByLabel,
Font,
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);
if (!this.windDirectionDataKey) {
this.windDirectionDataKey = getDataKey(this.ctx.datasources);
}
this.centerValueDataKey = getDataKeyByLabel(this.ctx.datasources, centerValueLabel);
this.windDirectionDataKey = getDataKey(this.ctx.datasources, 0);
this.centerValueDataKey = getDataKey(this.ctx.datasources, 1);
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 (windDirectionTsValue && isDefinedAndNotNull(windDirectionTsValue[1]) && isNumeric(windDirectionTsValue[1])) {
this.windDirection = windDirectionTsValue[1];
if (this.windDirectionDataKey) {
const windDirectionTsValue = getSingleTsValueByDataKey(this.ctx.data, this.windDirectionDataKey);
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];
this.centerValueText = formatValue(centerValue, this.decimals, '', true);
value = centerValueTsValue[1];
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'});
}

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

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

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

@ -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) {
return dataKeys[0];
if (dataKeys && dataKeys.length > index) {
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;

Write Preview
Loading…
Cancel
Save