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

UI: Refactoring widget settings models

pull/10557/head
Vladyslav_Prykhodko 2 years ago
parent
59066a3ef0
commit
004fbc1c6b
2 changed files with 91 additions and 115 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. 52
      ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
  2. 154
      ui-ngx/src/app/shared/models/widget-settings.models.ts

52
ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
View File

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

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

@ -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<ColorRange>): Array<ColorRange> =
}
) : [];
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<DatasourceData>);
abstract updatedAdvancedData(data: Array<DatasourceData>): void;
abstract datasourceConfigs(): Array<ValueSourceConfig>;
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<DatasourceData>): DataEntry =
return null;
};
export const generateDatasource = (ctx: WidgetContext,
export const createdValueSubscription = (ctx: WidgetContext,
datasourceConfigs: ValueSourceConfig[],
onDataUpdated: WidgetSubscriptionCallbacks['onDataUpdated']): Observable<IWidgetSubscription> => {
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<IWidgetSubscription> => {
if (!datasource.length) {

Write Preview
Loading…
Cancel
Save