+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts
index ea17f19637..35e51f6c98 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts
@@ -24,7 +24,7 @@ import {
UntypedFormBuilder,
UntypedFormGroup
} from '@angular/forms';
-import { AdvancedGradient, ColorGradientSettings } from '@shared/models/widget-settings.models';
+import { AdvancedGradient, ColorGradientSettings, ValueSourceDataKeyType } from '@shared/models/widget-settings.models';
import { TbPopoverComponent } from '@shared/components/popover.component';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@@ -33,6 +33,8 @@ import { IAliasController } from '@core/api/widget-api.models';
import { DomSanitizer } from '@angular/platform-browser';
import { coerceBoolean } from '@shared/decorators/coercion';
import { isDefinedAndNotNull } from '@core/utils';
+import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models';
+import { Datasource } from '@shared/models/widget.models';
@Component({
selector: 'tb-gradient',
@@ -62,6 +64,12 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
@Input()
aliasController: IAliasController;
+ @Input()
+ dataKeyCallbacks: DataKeysCallbacks;
+
+ @Input()
+ datasource: Datasource;
+
@Input()
minValue: string;
@@ -84,6 +92,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
private sanitizer: DomSanitizer) {}
ngOnInit(): void {
+ console.log(this.minValue, this.maxValue);
this.gradientFormGroup = this.fb.group({
advancedMode: [false],
gradient: this.fb.group({
@@ -93,12 +102,12 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
}),
gradientAdvanced: this.fb.group({
start: this.fb.group({
- source: [],
+ source: [{type: ValueSourceDataKeyType.constant}],
color: ['rgba(0, 255, 0, 1)']
}),
gradientList: this.fb.array([]),
end: this.fb.group({
- source: [],
+ source: [{type: ValueSourceDataKeyType.constant}],
color: ['rgba(255, 0, 0, 1)']
})
})
@@ -147,26 +156,27 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
get generatePointers() {
if (this.gradientFormGroup.get('advancedMode').value) {
- const point = 100 / (this.advancedGradientListFormArray.value.length + 1);
+ const shift = 100 / (this.advancedGradientListFormArray.value.length + 1);
return `
` +
- this.advancedGradientListFormArray.value.map((v, i) => this.pointer(point * (i + 1), true)).join('') +
+ this.advancedGradientListFormArray.value.map((v, i) => this.pointer(shift * (i + 1), i+1, null, true)).join('') +
`
`;
} else {
- const point = 100 / (this.gradientListFormArray.value.length + 1);
+ const point = (+this.maxValue - +this.minValue) / (this.gradientListFormArray.value.length + 1);
+ const shift = 100 / (this.gradientListFormArray.value.length + 1);
const min = isDefinedAndNotNull(this.minValue) ? this.minValue : 0;
const max = isDefinedAndNotNull(this.maxValue) ? this.maxValue : 100;
return `
` +
- this.gradientListFormArray.value.map((v, i) => this.pointer(point * (i + 1))).join('') +
+ this.gradientListFormArray.value.map((v, i) => this.pointer(shift * (i + 1), i+1, point)).join('') +
`
`;
}
}
- pointer(value?: number, advanced = false) {
+ pointer(shift: number, index?: number, value?: number, advanced = false) {
if (advanced) {
- return `
`;
+ return `
`;
} else {
- return `
` +
- `
${Math.floor((+this.maxValue*value)/100)}
`;
+ return `
` +
+ `
${Math.floor(+this.minValue + (value * index))}
`;
}
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.html
new file mode 100644
index 0000000000..be6faaefaf
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.html
@@ -0,0 +1,77 @@
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.scss
new file mode 100644
index 0000000000..5d769d867a
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.scss
@@ -0,0 +1,40 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+ .tb-value-source {
+ display: flex;
+ gap: 12px;
+ }
+ .tb-source-field {
+ display: flex;
+ flex: 1;
+ gap: 12px;
+ .tb-type-field, .tb-entity-alias-field {
+ flex: 1;
+ }
+ }
+ .tb-key-value-field, .tb-constant-field {
+ display: flex;
+ flex: 1;
+ }
+ ::ng-deep {
+ .tb-data-key-input {
+ flex: 1;
+ }
+ }
+}
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.ts
new file mode 100644
index 0000000000..ed5f8eadf5
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source-data-key.component.ts
@@ -0,0 +1,191 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+/// http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core';
+import {
+ ControlValueAccessor,
+ NG_VALUE_ACCESSOR,
+ UntypedFormBuilder,
+ UntypedFormControl,
+ UntypedFormGroup,
+ Validators
+} from '@angular/forms';
+import { PageComponent } from '@shared/components/page.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { IAliasController } from '@core/api/widget-api.models';
+import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import { DataKey, Datasource, DatasourceType } from '@app/shared/models/widget.models';
+import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models';
+import {
+ ValueSourceDataKeyType,
+ ValueSourceDataKeyTypes,
+ ValueSourceDataKeyTypeTranslation
+} from '@shared/models/widget-settings.models';
+
+@Component({
+ selector: 'tb-value-source-data-key',
+ templateUrl: './value-source-data-key.component.html',
+ styleUrls: ['value-source-data-key.component.scss'],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => ValueSourceDataKeyComponent),
+ multi: true
+ }
+ ]
+})
+export class ValueSourceDataKeyComponent extends PageComponent implements OnInit, ControlValueAccessor {
+
+ dataKeyType = DataKeyType;
+ datasourceType = DatasourceType;
+
+ valueSourceDataKeyType = ValueSourceDataKeyType;
+ valueSourceDataKeyTypes = ValueSourceDataKeyTypes;
+ valueSourceDataKeyTypeTranslation = ValueSourceDataKeyTypeTranslation;
+
+ @Input()
+ disabled: boolean;
+
+ @Input()
+ aliasController: IAliasController;
+
+ @Input()
+ dataKeyCallbacks: DataKeysCallbacks;
+
+ @Input()
+ datasource: Datasource;
+
+ valueSourceFormGroup: UntypedFormGroup;
+
+ modelValue;
+
+ latestKeyFormControl: UntypedFormControl;
+ entityKeyFormControl: UntypedFormControl;
+
+ private propagateChange = (_val: any) => {};
+
+ constructor(protected store: Store
,
+ private fb: UntypedFormBuilder,
+ private cd: ChangeDetectorRef) {
+ super(store);
+ }
+
+ ngOnInit(): void {
+ this.valueSourceFormGroup = this.fb.group({
+ type: [ValueSourceDataKeyType.constant, []],
+ value: [null, [Validators.required]],
+ entityAlias: [null, [Validators.required]]
+ });
+ this.latestKeyFormControl = this.fb.control(null, [Validators.required]);
+ this.entityKeyFormControl = this.fb.control(null, [Validators.required]);
+ this.valueSourceFormGroup.valueChanges.subscribe(
+ () => this.updateModel()
+ );
+ this.latestKeyFormControl.valueChanges.subscribe(
+ () => this.updateModel()
+ );
+ this.entityKeyFormControl.valueChanges.subscribe(
+ () => this.updateModel()
+ );
+ this.valueSourceFormGroup.get('type').valueChanges.subscribe(() => {
+ this.updateValidators();
+ });
+ }
+
+ registerOnChange(fn: any): void {
+ this.propagateChange = fn;
+ }
+
+ registerOnTouched(fn: any): void {
+ }
+
+ setDisabledState(isDisabled: boolean): void {
+ this.disabled = isDisabled;
+ if (isDisabled) {
+ this.valueSourceFormGroup.disable({emitEvent: false});
+ this.latestKeyFormControl.disable({emitEvent: false});
+ this.entityKeyFormControl.disable({emitEvent: false});
+ } else {
+ this.valueSourceFormGroup.enable({emitEvent: false});
+ this.updateValidators();
+ }
+ }
+
+ writeValue(value): void {
+ this.modelValue = value;
+ this.valueSourceFormGroup.patchValue(
+ {
+ type: value.type,
+ value: value.value,
+ entityAlias: value.entityAlias
+ }, {emitEvent: false}
+ );
+ if (value.type === ValueSourceDataKeyType.latestKey) {
+ this.latestKeyFormControl.patchValue({
+ type: value.latestKeyType,
+ name: value.latestKey
+ }, {emitEvent: false});
+ } else if (value.type === ValueSourceDataKeyType.entity) {
+ this.entityKeyFormControl.patchValue({
+ type: value.entityKeyType,
+ name: value.entityKey
+ }, {emitEvent: false});
+ }
+
+ this.updateValidators();
+ this.cd.markForCheck();
+ }
+
+ private updateModel() {
+ const value = this.valueSourceFormGroup.value;
+ this.modelValue.type = value.type;
+ this.modelValue.value = value.value;
+ this.modelValue.entityAlias = value.entityAlias;
+
+ if (value.type === ValueSourceDataKeyType.latestKey) {
+ const latestKey: DataKey = this.latestKeyFormControl.value;
+ this.modelValue.latestKey = latestKey?.name;
+ this.modelValue.latestKeyType = (latestKey?.type as any);
+ } else if (value.type === ValueSourceDataKeyType.entity) {
+ const entityKey: DataKey = this.entityKeyFormControl.value;
+ this.modelValue.entityKey = entityKey?.name;
+ this.modelValue.entityKeyType = (entityKey?.type as any);
+ }
+ this.propagateChange(this.modelValue);
+ }
+
+ private updateValidators(): void {
+ const type: ValueSourceDataKeyType = this.valueSourceFormGroup.get('type').value;
+ if (type === ValueSourceDataKeyType.constant) {
+ this.valueSourceFormGroup.get('value').enable({emitEvent: false});
+ this.valueSourceFormGroup.get('entityAlias').disable({emitEvent: false});
+ this.latestKeyFormControl.disable({emitEvent: false});
+ this.entityKeyFormControl.disable({emitEvent: false});
+ } else if (type === ValueSourceDataKeyType.latestKey) {
+ this.valueSourceFormGroup.get('value').disable({emitEvent: false});
+ this.valueSourceFormGroup.get('entityAlias').disable({emitEvent: false});
+ this.latestKeyFormControl.enable({emitEvent: false});
+ this.entityKeyFormControl.disable({emitEvent: false});
+ } else if (type === ValueSourceDataKeyType.entity) {
+ this.valueSourceFormGroup.get('value').disable({emitEvent: false});
+ this.valueSourceFormGroup.get('entityAlias').enable({emitEvent: false});
+ this.latestKeyFormControl.disable({emitEvent: false});
+ this.entityKeyFormControl.enable({emitEvent: false});
+ }
+ }
+
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts
index 75e4874b23..781042a4cf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts
@@ -152,6 +152,9 @@ import {
import { ChartBarSettingsComponent } from '@home/components/widget/lib/settings/common/chart/chart-bar-settings.component';
import { AdvancedRangeComponent } from '@home/components/widget/lib/settings/common/advanced-range.component';
import { GradientComponent } from '@home/components/widget/lib/settings/common/gradient.component';
+import {
+ ValueSourceDataKeyComponent
+} from '@home/components/widget/lib/settings/common/value-source-data-key.component';
@NgModule({
declarations: [
@@ -170,6 +173,7 @@ import { GradientComponent } from '@home/components/widget/lib/settings/common/g
BackgroundSettingsComponent,
BackgroundSettingsPanelComponent,
ValueSourceComponent,
+ ValueSourceDataKeyComponent,
LegendConfigComponent,
WidgetFontComponent,
CountWidgetSettingsComponent,
@@ -233,6 +237,7 @@ import { GradientComponent } from '@home/components/widget/lib/settings/common/g
BackgroundSettingsComponent,
BackgroundSettingsPanelComponent,
ValueSourceComponent,
+ ValueSourceDataKeyComponent,
LegendConfigComponent,
WidgetFontComponent,
CountWidgetSettingsComponent,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
index 6c264d7a18..86cd0ff825 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
@@ -32,38 +32,36 @@
-
@@ -75,6 +79,8 @@
minValue="0"
maxValue="100"
[aliasController]="aliasController"
+ [dataKeyCallbacks]="dataKeyCallbacks"
+ [datasource]="datasource"
settingsKey="{{'widgets.battery-level.battery-shape-color' | translate }}">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts
index fb0e2b540c..2b27a40eff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts
@@ -15,7 +15,7 @@
///
import { Component, Injector } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { Datasource, WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@@ -48,6 +48,15 @@ export class BatteryLevelWidgetSettingsComponent extends WidgetSettingsComponent
return [BatteryLevelLayout.vertical_divided, BatteryLevelLayout.horizontal_divided].includes(layout);
}
+ public get datasource(): Datasource {
+ const datasources: Datasource[] = this.widgetConfig.config.datasources;
+ if (datasources && datasources.length) {
+ return datasources[0];
+ } else {
+ return null;
+ }
+ }
+
constructor(protected store: Store