Vladyslav_Prykhodko
3 years ago
19 changed files with 411 additions and 163 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