Maksym Tsymbarov
8 months ago
29 changed files with 1136 additions and 79 deletions
@ -0,0 +1,71 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2025 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. |
|||
|
|||
--> |
|||
<div [formGroup]="limitForm" class="tb-form-table-row overflow-hidden items-start"> |
|||
<div class="flex-shrink capitalize" [class]="isPanelView ? 'basis-10' : 'basis-1/5'"> |
|||
{{ labelKey | translate}} |
|||
</div> |
|||
<div class="flex-grow flex-shrink flex flex-col gap-2 gt-sm:flex-row gt-sm:gap-3" [class]="isPanelView ? 'basis-1/2' : 'basis-40%'"> |
|||
<mat-form-field class="tb-inline-field flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="type"> |
|||
<mat-option *ngFor="let type of ValueSourceTypes" [value]="type"> |
|||
{{ ValueSourceTypeTranslation.get(type) | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<tb-entity-alias-input |
|||
required |
|||
class="flex-1" |
|||
*ngIf="limitForm.get('type').value === ValueSourceType.entity" |
|||
[aliasController]="aliasController" |
|||
formControlName="entityAlias"> |
|||
</tb-entity-alias-input> |
|||
</div> |
|||
<div class="flex-grow flex-shrink" [class]="isPanelView ? 'basis-1/2' : 'basis-40%'"> |
|||
<mat-form-field *ngIf="limitForm.get('type').value === ValueSourceType.constant" |
|||
appearance="outline" class="tb-inline-field !w-full number" subscriptSizing="dynamic" |
|||
[class.tb-suffix-absolute]="!limitForm.get('value').value"> |
|||
<input matInput formControlName="value" type="number" placeholder="{{ 'widgets.chart.chart-axis.scale-auto' | translate }}"> |
|||
</mat-form-field> |
|||
<tb-data-key-input |
|||
required |
|||
*ngIf="limitForm.get('type').value === ValueSourceType.latestKey" |
|||
requiredText="widgets.chart.chart-axis.key-required" |
|||
[datasourceType]="datasource?.type" |
|||
[entityAliasId]="datasource?.entityAliasId" |
|||
[deviceId]="datasource?.deviceId" |
|||
[aliasController]="aliasController" |
|||
[dataKeyType]="datasource?.type === DatasourceType.function ? DataKeyType.function : null" |
|||
[dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]" |
|||
[callbacks]="callbacks" |
|||
[editable]="false" |
|||
formControlName="value"> |
|||
</tb-data-key-input> |
|||
<tb-data-key-input |
|||
required |
|||
*ngIf="limitForm.get('type').value === ValueSourceType.entity" |
|||
requiredText="widgets.chart.chart-axis.entity-key-required" |
|||
[datasourceType]="DatasourceType.entity" |
|||
[aliasController]="aliasController" |
|||
[entityAlias]="limitForm.get('entityAlias').value" |
|||
[dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]" |
|||
[callbacks]="callbacks" |
|||
[editable]="false" |
|||
formControlName="value"> |
|||
</tb-data-key-input> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,15 @@ |
|||
/** |
|||
* Copyright © 2016-2025 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. |
|||
*/ |
|||
@ -0,0 +1,204 @@ |
|||
///
|
|||
/// Copyright © 2016-2025 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 { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
UntypedFormBuilder, |
|||
UntypedFormGroup, ValidationErrors, Validator, |
|||
Validators, |
|||
} from '@angular/forms'; |
|||
import { ValueSourceType, ValueSourceTypes, ValueSourceTypeTranslation } from '@shared/models/widget-settings.models'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { AxisLimitConfig } from '@home/components/widget/lib/chart/time-series-chart.models'; |
|||
import { Datasource, DatasourceType, } from '@shared/models/widget.models'; |
|||
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
|||
import { IAliasController } from '@core/api/widget-api.models'; |
|||
import { DataKeysCallbacks } from '@home/components/widget/lib/settings/common/key/data-keys.component.models'; |
|||
import { isEqual } from '@core/utils'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-axis-scale-row', |
|||
templateUrl: './axis-scale-row.component.html', |
|||
styleUrl: './axis-scale-row.component.scss', |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => AxisScaleRowComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => AxisScaleRowComponent), |
|||
multi: true |
|||
}, |
|||
] |
|||
}) |
|||
export class AxisScaleRowComponent implements ControlValueAccessor, OnInit, Validator { |
|||
|
|||
@Input() |
|||
isPanelView = false; |
|||
|
|||
@Input() |
|||
aliasController: IAliasController; |
|||
|
|||
@Input() |
|||
callbacks: DataKeysCallbacks; |
|||
|
|||
@Input() |
|||
datasource: Datasource; |
|||
|
|||
@Input() |
|||
labelKey: string; |
|||
|
|||
ValueSourceType = ValueSourceType; |
|||
|
|||
DataKeyType = DataKeyType; |
|||
|
|||
DatasourceType = DatasourceType; |
|||
|
|||
ValueSourceTypeTranslation = ValueSourceTypeTranslation; |
|||
|
|||
ValueSourceTypes = ValueSourceTypes; |
|||
|
|||
limitForm: UntypedFormGroup; |
|||
|
|||
private propagateChanges: (value: any) => void = () => {}; |
|||
|
|||
private modelValue: AxisLimitConfig | null = null; |
|||
|
|||
constructor(private fb: UntypedFormBuilder, |
|||
private destroyRef: DestroyRef) { |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.limitForm = this.fb.group({ |
|||
type: [ValueSourceType.constant], |
|||
value: [null], |
|||
entityAlias: [null] |
|||
}); |
|||
this.subscribeToTypeChanges(); |
|||
|
|||
this.limitForm.valueChanges |
|||
.pipe(takeUntilDestroyed(this.destroyRef)) |
|||
.subscribe(value => { |
|||
this.updateValidators(); |
|||
this.updateView(value); |
|||
}); |
|||
} |
|||
|
|||
writeValue(value: AxisLimitConfig) { |
|||
this.modelValue = value; |
|||
|
|||
if (!this.limitForm) { |
|||
return; |
|||
} |
|||
|
|||
if (value) { |
|||
this.limitForm.patchValue({ |
|||
type: value.type ?? ValueSourceType.constant, |
|||
value: value.value ?? null, |
|||
entityAlias: value.entityAlias ?? null |
|||
}, |
|||
{ emitEvent: false } |
|||
); |
|||
} else { |
|||
this.limitForm.patchValue({ |
|||
type: ValueSourceType.constant, |
|||
value: null, |
|||
entityAlias: null |
|||
}, |
|||
{ emitEvent: false } |
|||
); |
|||
} |
|||
|
|||
this.updateValidators(); |
|||
} |
|||
|
|||
registerOnChange(fn: any) { |
|||
this.propagateChanges = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any) { |
|||
} |
|||
|
|||
validate(): ValidationErrors | null { |
|||
return this.limitForm.valid ? null : { |
|||
axisLimitForm: { |
|||
valid: false, |
|||
errors: this.getFormErrors() |
|||
} |
|||
}; |
|||
} |
|||
|
|||
private getFormErrors(): any { |
|||
const errors: any = {}; |
|||
Object.keys(this.limitForm.controls).forEach(key => { |
|||
const control = this.limitForm.get(key); |
|||
if (control && control.errors) { |
|||
errors[key] = control.errors; |
|||
} |
|||
}); |
|||
return errors; |
|||
} |
|||
|
|||
private updateValidators() { |
|||
const axisTypeControl = this.limitForm.get('type'); |
|||
const axisValueControl = this.limitForm.get('value'); |
|||
const axisEntityAliasControl = this.limitForm.get('entityAlias'); |
|||
|
|||
if (axisTypeControl && axisValueControl && axisEntityAliasControl) { |
|||
const type = axisTypeControl.value; |
|||
if (type === ValueSourceType.latestKey || type === ValueSourceType.entity) { |
|||
axisValueControl.setValidators([Validators.required]); |
|||
} else { |
|||
axisValueControl.clearValidators(); |
|||
} |
|||
|
|||
if (type === ValueSourceType.entity) { |
|||
axisEntityAliasControl.setValidators([Validators.required]); |
|||
} else { |
|||
axisEntityAliasControl.clearValidators(); |
|||
} |
|||
|
|||
axisValueControl.updateValueAndValidity({ emitEvent: false }); |
|||
axisEntityAliasControl.updateValueAndValidity({ emitEvent: false }); |
|||
} |
|||
} |
|||
|
|||
private subscribeToTypeChanges() { |
|||
this.limitForm.controls.type.valueChanges |
|||
.pipe(takeUntilDestroyed(this.destroyRef)) |
|||
.subscribe(() => { |
|||
const axisValueControl = this.limitForm.get('value'); |
|||
const axisEntityAliasControl = this.limitForm.get('entityAlias'); |
|||
if (axisValueControl) { |
|||
axisValueControl.setValue(null, { emitEvent: true }); |
|||
} |
|||
if (axisEntityAliasControl) { |
|||
axisEntityAliasControl.setValue(null, { emitEvent: true }); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
private updateView(value: AxisLimitConfig) { |
|||
if (!isEqual(this.modelValue, value)) { |
|||
this.modelValue = value; |
|||
this.propagateChanges(value); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue