Igor Kulikov
3 years ago
13 changed files with 295 additions and 139 deletions
@ -0,0 +1,75 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-form-panel" [formGroup]="barWidthSettingsFormGroup"> |
||||
|
<div fxLayout="row" fxLayoutAlign="space-between center"> |
||||
|
<div fxFlex translate>widgets.time-series-chart.no-aggregation-bar-width-strategy</div> |
||||
|
<tb-toggle-select formControlName="strategy" selectMediaBreakpoint="xs"> |
||||
|
<tb-toggle-option *ngFor="let strategy of timeSeriesChartNoAggregationBarWidthStrategies" [value]="strategy"> |
||||
|
{{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }} |
||||
|
</tb-toggle-option> |
||||
|
</tb-toggle-select> |
||||
|
</div> |
||||
|
<ng-container *ngIf="barWidthSettingsFormGroup.get('strategy').value === TimeSeriesChartNoAggregationBarWidthStrategy.group"> |
||||
|
<ng-container |
||||
|
*ngTemplateOutlet="barWidth; |
||||
|
context: { |
||||
|
formGroup: barWidthSettingsFormGroup.get('groupWidth'), |
||||
|
label: 'widgets.time-series-chart.bar-group-width' |
||||
|
}"> |
||||
|
</ng-container> |
||||
|
</ng-container> |
||||
|
<ng-container *ngIf="barWidthSettingsFormGroup.get('strategy').value === TimeSeriesChartNoAggregationBarWidthStrategy.separate"> |
||||
|
<ng-container |
||||
|
*ngTemplateOutlet="barWidth; |
||||
|
context: { |
||||
|
formGroup: barWidthSettingsFormGroup.get('barWidth'), |
||||
|
label: 'widgets.time-series-chart.bar-width' |
||||
|
}"> |
||||
|
</ng-container> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
<ng-template #barWidth let-label="label" let-formGroup="formGroup"> |
||||
|
<div class="tb-form-row space-between column-lt-md" [formGroup]="formGroup"> |
||||
|
<div translate>{{ label }}</div> |
||||
|
<div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="relative"> |
||||
|
<mat-select-trigger> |
||||
|
{{ (formGroup.get('relative').value ? |
||||
|
'widgets.time-series-chart.bar-width-relative' : |
||||
|
'widgets.time-series-chart.bar-width-absolute') | translate }} |
||||
|
</mat-select-trigger> |
||||
|
<mat-option [value]="true"> |
||||
|
{{ 'widgets.time-series-chart.bar-width-relative' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="false"> |
||||
|
{{ 'widgets.time-series-chart.bar-width-absolute' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field *ngIf="formGroup.get('relative').value" class="number fixed-width" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input required matInput type="number" formControlName="relativeWidth" min="0.1" max="100" placeholder="{{ 'widget-config.set' | translate }}"/> |
||||
|
<span matSuffix>%</span> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field *ngIf="!formGroup.get('relative').value" class="number fixed-width" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input required matInput type="number" formControlName="absoluteWidth" min="100" step="1" placeholder="{{ 'widget-config.set' | translate }}"/> |
||||
|
<span matSuffix>ms</span> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-template> |
||||
@ -0,0 +1,147 @@ |
|||||
|
///
|
||||
|
/// 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 { Component, forwardRef, Input, OnInit } from '@angular/core'; |
||||
|
import { |
||||
|
ControlValueAccessor, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
UntypedFormBuilder, |
||||
|
UntypedFormGroup, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { |
||||
|
TimeSeriesChartNoAggregationBarWidthSettings, |
||||
|
timeSeriesChartNoAggregationBarWidthStrategies, |
||||
|
TimeSeriesChartNoAggregationBarWidthStrategy, |
||||
|
timeSeriesChartNoAggregationBarWidthStrategyTranslations |
||||
|
} from '@home/components/widget/lib/chart/time-series-chart.models'; |
||||
|
import { merge } from 'rxjs'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-time-series-no-aggregation-bar-width-settings', |
||||
|
templateUrl: './time-series-no-aggregation-bar-width-settings.component.html', |
||||
|
styleUrls: ['./../../widget-settings.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => TimeSeriesNoAggregationBarWidthSettingsComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class TimeSeriesNoAggregationBarWidthSettingsComponent implements OnInit, ControlValueAccessor { |
||||
|
|
||||
|
TimeSeriesChartNoAggregationBarWidthStrategy = TimeSeriesChartNoAggregationBarWidthStrategy; |
||||
|
|
||||
|
timeSeriesChartNoAggregationBarWidthStrategies = timeSeriesChartNoAggregationBarWidthStrategies; |
||||
|
|
||||
|
timeSeriesChartNoAggregationBarWidthStrategyTranslations = timeSeriesChartNoAggregationBarWidthStrategyTranslations; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
private modelValue: TimeSeriesChartNoAggregationBarWidthSettings; |
||||
|
|
||||
|
private propagateChange = null; |
||||
|
|
||||
|
public barWidthSettingsFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.barWidthSettingsFormGroup = this.fb.group({ |
||||
|
strategy: [null, []], |
||||
|
groupWidth: this.fb.group({ |
||||
|
relative: [null, []], |
||||
|
relativeWidth: [null, [Validators.required, Validators.min(0.1), Validators.max(100)]], |
||||
|
absoluteWidth: [null, [Validators.required, Validators.min(100)]] |
||||
|
}), |
||||
|
barWidth: this.fb.group({ |
||||
|
relative: [null, []], |
||||
|
relativeWidth: [null, [Validators.required, Validators.min(0.1), Validators.max(100)]], |
||||
|
absoluteWidth: [null, [Validators.required, Validators.min(100)]] |
||||
|
}) |
||||
|
}); |
||||
|
this.barWidthSettingsFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
merge(this.barWidthSettingsFormGroup.get('strategy').valueChanges, |
||||
|
this.barWidthSettingsFormGroup.get('groupWidth.relative').valueChanges, |
||||
|
this.barWidthSettingsFormGroup.get('barWidth.relative').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.barWidthSettingsFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.barWidthSettingsFormGroup.enable({emitEvent: false}); |
||||
|
this.updateValidators(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: TimeSeriesChartNoAggregationBarWidthSettings): void { |
||||
|
this.modelValue = value; |
||||
|
this.barWidthSettingsFormGroup.patchValue( |
||||
|
value, {emitEvent: false} |
||||
|
); |
||||
|
this.updateValidators(); |
||||
|
} |
||||
|
|
||||
|
private updateValidators() { |
||||
|
const strategy: TimeSeriesChartNoAggregationBarWidthStrategy = |
||||
|
this.barWidthSettingsFormGroup.get('strategy').value; |
||||
|
const groupWidthRelative: boolean = this.barWidthSettingsFormGroup.get('groupWidth.relative').value; |
||||
|
const barWidthRelative: boolean = this.barWidthSettingsFormGroup.get('barWidth.relative').value; |
||||
|
if (strategy === TimeSeriesChartNoAggregationBarWidthStrategy.group) { |
||||
|
this.barWidthSettingsFormGroup.get('groupWidth').enable({emitEvent: false}); |
||||
|
this.barWidthSettingsFormGroup.get('barWidth').disable({emitEvent: false}); |
||||
|
if (groupWidthRelative) { |
||||
|
this.barWidthSettingsFormGroup.get('groupWidth').get('relativeWidth').enable({emitEvent: false}); |
||||
|
this.barWidthSettingsFormGroup.get('groupWidth').get('absoluteWidth').disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.barWidthSettingsFormGroup.get('groupWidth').get('relativeWidth').disable({emitEvent: false}); |
||||
|
this.barWidthSettingsFormGroup.get('groupWidth').get('absoluteWidth').enable({emitEvent: false}); |
||||
|
} |
||||
|
} else if (strategy === TimeSeriesChartNoAggregationBarWidthStrategy.separate) { |
||||
|
this.barWidthSettingsFormGroup.get('groupWidth').disable({emitEvent: false}); |
||||
|
this.barWidthSettingsFormGroup.get('barWidth').enable({emitEvent: false}); |
||||
|
if (barWidthRelative) { |
||||
|
this.barWidthSettingsFormGroup.get('barWidth').get('relativeWidth').enable({emitEvent: false}); |
||||
|
this.barWidthSettingsFormGroup.get('barWidth').get('absoluteWidth').disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.barWidthSettingsFormGroup.get('barWidth').get('relativeWidth').disable({emitEvent: false}); |
||||
|
this.barWidthSettingsFormGroup.get('barWidth').get('absoluteWidth').enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
this.modelValue = this.barWidthSettingsFormGroup.getRawValue(); |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue