diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts index 7650583a91..99e6ec66b6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts @@ -25,16 +25,9 @@ import { isDefined, isDefinedAndNotNull } from '@core/utils'; import { prepareFontSettings } from '@home/components/widget/lib/settings.models'; import { CanvasDigitalGauge, CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge'; import { DatePipe } from '@angular/common'; -import { Datasource } from '@shared/models/widget.models'; import { IWidgetSubscription } from '@core/api/widget-api.models'; import { Subscription } from 'rxjs'; -import { - ColorProcessor, - generateDatasource, - subscribeForDatasource, - ValueSourceConfig, - ValueSourceType -} from '@shared/models/widget-settings.models'; +import { ColorProcessor, createdValueSubscription, ValueSourceType } from '@shared/models/widget-settings.models'; import GenericOptions = CanvasGauges.GenericOptions; // @dynamic @@ -209,7 +202,16 @@ export class TbCanvasDigitalGauge { init() { let updateSetting = false; if (this.localSettings.showTicks && this.localSettings.ticksValue?.length) { - this.localSettings.ticks = this.settingTicksSubscribe(this.localSettings.ticksValue); + this.localSettings.ticks = this.localSettings.ticksValue + .map(tick => tick.type === ValueSourceType.constant && isFinite(tick.value) ? tick.value : null); + + createdValueSubscription( + this.ctx, + this.localSettings.ticksValue, + this.updateAttribute.bind(this) + ).subscribe((subscription) => { + this.ticksSourcesSubscription = subscription; + }); updateSetting = true; } @@ -222,42 +224,12 @@ export class TbCanvasDigitalGauge { }); } - settingTicksSubscribe(options: ValueSourceConfig[]): number[] { - let ticksDatasource: Datasource[] = []; - const predefineTicks: number[] = []; - - for (const tick of options) { - if (tick.type === ValueSourceType.constant && isFinite(tick.value)) { - if (isFinite(tick.value)) { - predefineTicks.push(tick.value); - } else { - predefineTicks.push(null); - } - } else { - try { - ticksDatasource = generateDatasource(this.ctx, ticksDatasource, tick, predefineTicks.length); - } catch (e) { - continue; - } - predefineTicks.push(null); - } - } - - if (ticksDatasource.length) { - subscribeForDatasource(this.ctx, ticksDatasource, this.updateAttribute.bind(this)).subscribe((subscription) => { - this.ticksSourcesSubscription = subscription; - }); - } - - return predefineTicks; - } - updateAttribute(subscription: IWidgetSubscription) { for (const keyData of subscription.data) { if (keyData && keyData.data && keyData.data[0]) { const attrValue = keyData.data[0][1]; if (isFinite(attrValue)) { - for (const index of keyData.dataKey.settings.keyIds) { + for (const index of keyData.dataKey.settings.indexes) { this.localSettings.ticks[index] = attrValue; } } diff --git a/ui-ngx/src/app/shared/models/widget-settings.models.ts b/ui-ngx/src/app/shared/models/widget-settings.models.ts index 1f314f6d2a..a8ef6fa4d6 100644 --- a/ui-ngx/src/app/shared/models/widget-settings.models.ts +++ b/ui-ngx/src/app/shared/models/widget-settings.models.ts @@ -151,6 +151,26 @@ export interface ColorRangeSettings extends AdvancedColorMode { rangeAdvanced?: AdvancedColorRange[]; } +export interface ColorGradientSettings extends AdvancedColorMode { + gradient?: string[]; + gradientAdvanced?: AdvancedGradient[]; + minValue?: number; + maxValue?: number; +} + +export interface AdvancedGradient { + source: ValueSourceConfig; + color: string; +} + +export interface ColorSettings { + type: ColorType; + color: string; + rangeList?: ColorRangeSettings; + gradient?: ColorGradientSettings; + colorFunction?: string; +} + export const colorRangeIncludes = (range: ColorRange, toCheck: ColorRange): boolean => { if (isNumber(range.from) && isNumber(range.to)) { if (isNumber(toCheck.from) && isNumber(toCheck.to)) { @@ -224,26 +244,6 @@ export const sortedColorRange = (ranges: Array): Array = } ) : []; -export interface ColorGradientSettings extends AdvancedColorMode { - gradient?: string[]; - gradientAdvanced?: AdvancedGradient[]; - minValue?: number; - maxValue?: number; -} - -export interface AdvancedGradient { - source: ValueSourceConfig; - color: string; -} - -export interface ColorSettings { - type: ColorType; - color: string; - rangeList?: ColorRangeSettings; - gradient?: ColorGradientSettings; - colorFunction?: string; -} - export interface TimewindowStyle { showIcon: boolean; icon: string; @@ -377,7 +377,7 @@ export abstract class ColorProcessor { } abstract update(value: any): void; - abstract destroy(): void; + destroy(): void {}; } class ConstantColorProcessor extends ColorProcessor { @@ -386,7 +386,22 @@ class ConstantColorProcessor extends ColorProcessor { } update(value: any): void {} - destroy(): void {} +} + +class FunctionColorProcessor extends ColorProcessor { + + private readonly colorFunction: ValueColorFunction; + + constructor(protected settings: ColorSettings) { + super(settings); + this.colorFunction = parseFunction(settings.colorFunction, ['value']); + } + + update(value: any): void { + if (this.colorFunction) { + this.color = this.colorFunction(value) || this.settings.color; + } + } } export abstract class AdvancedModeColorProcessor extends ColorProcessor { @@ -400,11 +415,17 @@ export abstract class AdvancedModeColorProcessor extends ColorProcessor { super(settings); this.advancedMode = this.getCurrentConfig().advancedMode; if (this.advancedMode) { - this.subscribe(); + createdValueSubscription( + this.ctx, + this.datasourceConfigs(), + this.onDataUpdated.bind(this) + ).subscribe((subscription) => { + this.sourcesSubscription = subscription; + }); } } - abstract updatedAdvancedData(data: Array); + abstract updatedAdvancedData(data: Array): void; abstract datasourceConfigs(): Array; abstract getCurrentConfig(): AdvancedColorMode; @@ -420,28 +441,6 @@ export abstract class AdvancedModeColorProcessor extends ColorProcessor { } } - private subscribe(){ - let sourcesDatasource: Datasource[] = []; - let index = 0; - - this.datasourceConfigs().forEach(config => { - if (config.type !== ValueSourceType.constant) { - try { - sourcesDatasource = generateDatasource(this.ctx, sourcesDatasource, config, index); - } catch (e) { - return; - } - } - index++; - }); - - if (sourcesDatasource.length) { - subscribeForDatasource(this.ctx, sourcesDatasource, this.onDataUpdated.bind(this)).subscribe((subscription) => { - this.sourcesSubscription = subscription; - }); - } - } - private onDataUpdated(subscription: IWidgetSubscription) { this.updatedAdvancedData(subscription.data); if (this.currentValue) { @@ -468,9 +467,9 @@ class RangeColorProcessor extends AdvancedModeColorProcessor { if (keyData && keyData.data && keyData.data[0]) { const attrValue = keyData.data[0][1]; if (isFinite(attrValue)) { - for (const id of keyData.dataKey.settings.keyIds) { - const index = Math.floor(id / 2); - if (index === id / 2) { + for (const currentIndex of keyData.dataKey.settings.indexes) { + const index = Math.floor(currentIndex / 2); + if (index === currentIndex / 2) { this.settings.rangeList.rangeAdvanced[index].from.value = attrValue; } else { this.settings.rangeList.rangeAdvanced[index].to.value = attrValue; @@ -536,24 +535,6 @@ class RangeColorProcessor extends AdvancedModeColorProcessor { } } -class FunctionColorProcessor extends ColorProcessor { - - private readonly colorFunction: ValueColorFunction; - - constructor(protected settings: ColorSettings) { - super(settings); - this.colorFunction = parseFunction(settings.colorFunction, ['value']); - } - - update(value: any): void { - if (this.colorFunction) { - this.color = this.colorFunction(value) || this.settings.color; - } - } - - destroy(): void {} -} - class GradientColorProcessor extends AdvancedModeColorProcessor { private readonly minValue: number; @@ -577,8 +558,8 @@ class GradientColorProcessor extends AdvancedModeColorProcessor { if (keyData && keyData.data && keyData.data[0]) { const attrValue = keyData.data[0][1]; if (isFinite(attrValue)) { - for (const id of keyData.dataKey.settings.keyIds) { - this.settings.gradient.gradientAdvanced[id].source.value = attrValue; + for (const index of keyData.dataKey.settings.indexes) { + this.settings.gradient.gradientAdvanced[index].source.value = attrValue; } } } @@ -1160,7 +1141,30 @@ export const getLatestSingleTsValue = (data: Array): DataEntry = return null; }; -export const generateDatasource = (ctx: WidgetContext, +export const createdValueSubscription = (ctx: WidgetContext, + datasourceConfigs: ValueSourceConfig[], + onDataUpdated: WidgetSubscriptionCallbacks['onDataUpdated']): Observable => { + let datasources: Datasource[] = []; + let index = 0; + + datasourceConfigs.forEach(config => { + if (config.type !== ValueSourceType.constant) { + try { + datasources = generateDatasource(ctx, datasources, config, index); + } catch (e) { + return; + } + } + index++; + }); + + if (datasources.length) { + return subscribeForDatasource(ctx, datasources, onDataUpdated); + } + return EMPTY; +}; + +const generateDatasource = (ctx: WidgetContext, datasources: Datasource[], valueSource: ValueSourceConfig, index: number): Datasource[] => { @@ -1176,13 +1180,13 @@ export const generateDatasource = (ctx: WidgetContext, return datasources; }; -export const configureDatasource = (ctx: WidgetContext, +const configureDatasource = (ctx: WidgetContext, valueSource: ValueSourceConfig, entityAlias: string, datasources: Datasource[], index: number, isLatest: boolean): Datasource[] => { - const keyIds = [index]; + const indexes = [index]; const entityAliasId = ctx.aliasController.getEntityAliasId(entityAlias); let datasource = datasources.find(d => entityAlias ? (d.entityAliasId === entityAliasId) : (d.deviceId === ctx.datasources[0].deviceId) @@ -1191,13 +1195,13 @@ export const configureDatasource = (ctx: WidgetContext, type: isLatest ? valueSource.latestKeyType : valueSource.entityKeyType, name: isLatest ? valueSource.latestKey : valueSource.entityKey, label: isLatest ? valueSource.latestKey : valueSource.entityKey, - settings: {keyIds} + settings: {indexes} }; if (datasource) { const findDataKey = datasource.dataKeys.find(dataKeyIteration => dataKeyIteration.name === (isLatest ? valueSource.latestKey : valueSource.entityKey)); if (findDataKey) { - findDataKey.settings.keyIds.push(index); + findDataKey.settings.indexes.push(index); } else { datasource.dataKeys.push(dataKey); } @@ -1225,7 +1229,7 @@ export const configureDatasource = (ctx: WidgetContext, }; -export const subscribeForDatasource = (ctx: WidgetContext, +const subscribeForDatasource = (ctx: WidgetContext, datasource: Datasource[], onDataUpdated: WidgetSubscriptionCallbacks['onDataUpdated']): Observable => { if (!datasource.length) {