UI: Time series chart animation settings.
This commit is contained in:
Igor Kulikov
parent
c688f516c7
commit
7823f1533c
@ -223,6 +223,9 @@
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
<tb-time-series-chart-animation-settings
|
||||
formControlName="animation">
|
||||
</tb-time-series-chart-animation-settings>
|
||||
<div class="tb-form-panel">
|
||||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
|
||||
<div class="tb-form-row space-between">
|
||||
|
||||
@ -168,6 +168,8 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
|
||||
tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
|
||||
tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
|
||||
|
||||
animation: [settings.animation, []],
|
||||
|
||||
background: [settings.background, []],
|
||||
|
||||
cardButtons: [this.getCardButtons(configData.config), []],
|
||||
@ -221,6 +223,8 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
|
||||
this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor;
|
||||
this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur;
|
||||
|
||||
this.widgetConfig.config.settings.animation = config.animation;
|
||||
|
||||
this.widgetConfig.config.settings.background = config.background;
|
||||
|
||||
this.setCardButtons(config.cardButtons, this.widgetConfig.config);
|
||||
|
||||
@ -157,6 +157,9 @@
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
<tb-time-series-chart-animation-settings
|
||||
formControlName="animation">
|
||||
</tb-time-series-chart-animation-settings>
|
||||
<div class="tb-form-row space-between">
|
||||
<div>{{ 'widgets.background.background' | translate }}</div>
|
||||
<tb-background-settings formControlName="background">
|
||||
|
||||
@ -138,6 +138,8 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
|
||||
tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
|
||||
tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
|
||||
|
||||
animation: [settings.animation, []],
|
||||
|
||||
background: [settings.background, []]
|
||||
});
|
||||
}
|
||||
|
||||
@ -0,0 +1,89 @@
|
||||
<!--
|
||||
|
||||
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.
|
||||
|
||||
-->
|
||||
<ng-container [formGroup]="animationSettingsFormGroup">
|
||||
<div class="tb-form-panel tb-slide-toggle">
|
||||
<mat-expansion-panel class="tb-settings" [(expanded)]="settingsExpanded"
|
||||
[disabled]="!animationSettingsFormGroup.get('animation').value">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-panel-title>
|
||||
<mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
|
||||
fxLayoutAlign="center">
|
||||
{{ 'widgets.time-series-chart.animation.animation' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div>{{ 'widgets.time-series-chart.animation.animation-threshold' | translate }}</div>
|
||||
<mat-form-field appearance="outline" class="medium-width number" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="animationThreshold" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<div matSuffix>ms</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div>{{ 'widgets.time-series-chart.animation.animation-duration' | translate }}</div>
|
||||
<mat-form-field appearance="outline" class="medium-width number" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="animationDuration" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<div matSuffix>ms</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div translate>widgets.time-series-chart.animation.animation-easing</div>
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select formControlName="animationEasing">
|
||||
<mat-option *ngFor="let easing of timeSeriesChartAnimationEasings" [value]="easing">
|
||||
{{ easing }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div>{{ 'widgets.time-series-chart.animation.animation-delay' | translate }}</div>
|
||||
<mat-form-field appearance="outline" class="medium-width number" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="animationDelay" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<div matSuffix>ms</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div>{{ 'widgets.time-series-chart.animation.update-animation-duration' | translate }}</div>
|
||||
<mat-form-field appearance="outline" class="medium-width number" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="animationDurationUpdate" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<div matSuffix>ms</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div translate>widgets.time-series-chart.animation.update-animation-easing</div>
|
||||
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select formControlName="animationEasingUpdate">
|
||||
<mat-option *ngFor="let easing of timeSeriesChartAnimationEasings" [value]="easing">
|
||||
{{ easing }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div>{{ 'widgets.time-series-chart.animation.update-animation-delay' | translate }}</div>
|
||||
<mat-form-field appearance="outline" class="medium-width number" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="animationDelayUpdate" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<div matSuffix>ms</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
</ng-container>
|
||||
@ -0,0 +1,124 @@
|
||||
///
|
||||
/// 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 {
|
||||
timeSeriesChartAnimationEasings,
|
||||
TimeSeriesChartAnimationSettings
|
||||
} from '@home/components/widget/lib/chart/time-series-chart.models';
|
||||
import { WidgetService } from '@core/http/widget.service';
|
||||
|
||||
@Component({
|
||||
selector: 'tb-time-series-chart-animation-settings',
|
||||
templateUrl: './time-series-chart-animation-settings.component.html',
|
||||
styleUrls: ['./../../widget-settings.scss'],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => TimeSeriesChartAnimationSettingsComponent),
|
||||
multi: true
|
||||
}
|
||||
]
|
||||
})
|
||||
export class TimeSeriesChartAnimationSettingsComponent implements OnInit, ControlValueAccessor {
|
||||
|
||||
settingsExpanded = false;
|
||||
|
||||
timeSeriesChartAnimationEasings = timeSeriesChartAnimationEasings;
|
||||
|
||||
@Input()
|
||||
disabled: boolean;
|
||||
|
||||
private modelValue: TimeSeriesChartAnimationSettings;
|
||||
|
||||
private propagateChange = null;
|
||||
|
||||
public animationSettingsFormGroup: UntypedFormGroup;
|
||||
|
||||
constructor(private fb: UntypedFormBuilder,
|
||||
private widgetService: WidgetService,) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.animationSettingsFormGroup = this.fb.group({
|
||||
animation: [null, []],
|
||||
animationThreshold: [null, [Validators.min(0)]],
|
||||
animationDuration: [null, [Validators.min(0)]],
|
||||
animationEasing: [null, []],
|
||||
animationDelay: [null, [Validators.min(0)]],
|
||||
animationDurationUpdate: [null, [Validators.min(0)]],
|
||||
animationEasingUpdate: [null, []],
|
||||
animationDelayUpdate: [null, [Validators.min(0)]]
|
||||
});
|
||||
this.animationSettingsFormGroup.valueChanges.subscribe(() => {
|
||||
this.updateModel();
|
||||
});
|
||||
this.animationSettingsFormGroup.get('animation').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.animationSettingsFormGroup.disable({emitEvent: false});
|
||||
} else {
|
||||
this.animationSettingsFormGroup.enable({emitEvent: false});
|
||||
this.updateValidators();
|
||||
}
|
||||
}
|
||||
|
||||
writeValue(value: TimeSeriesChartAnimationSettings): void {
|
||||
this.modelValue = value;
|
||||
this.animationSettingsFormGroup.patchValue(
|
||||
value, {emitEvent: false}
|
||||
);
|
||||
this.updateValidators();
|
||||
this.animationSettingsFormGroup.get('animation').valueChanges.subscribe((animation) => {
|
||||
this.settingsExpanded = animation;
|
||||
});
|
||||
}
|
||||
|
||||
private updateValidators() {
|
||||
const animation: boolean = this.animationSettingsFormGroup.get('animation').value;
|
||||
if (animation) {
|
||||
this.animationSettingsFormGroup.enable({emitEvent: false});
|
||||
} else {
|
||||
this.animationSettingsFormGroup.disable({emitEvent: false});
|
||||
this.animationSettingsFormGroup.get('animation').enable({emitEvent: false});
|
||||
}
|
||||
}
|
||||
|
||||
private updateModel() {
|
||||
this.modelValue = this.animationSettingsFormGroup.getRawValue();
|
||||
this.propagateChange(this.modelValue);
|
||||
}
|
||||
}
|
||||
@ -118,6 +118,9 @@ import {
|
||||
import {
|
||||
TimeSeriesChartYAxisSettingsPanelComponent
|
||||
} from '@home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-settings-panel.component';
|
||||
import {
|
||||
TimeSeriesChartAnimationSettingsComponent
|
||||
} from '@home/components/widget/lib/settings/common/chart/time-series-chart-animation-settings.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -162,6 +165,7 @@ import {
|
||||
TimeSeriesChartYAxesPanelComponent,
|
||||
TimeSeriesChartYAxisRowComponent,
|
||||
TimeSeriesChartYAxisSettingsPanelComponent,
|
||||
TimeSeriesChartAnimationSettingsComponent,
|
||||
DataKeyInputComponent,
|
||||
EntityAliasInputComponent
|
||||
],
|
||||
@ -212,6 +216,7 @@ import {
|
||||
TimeSeriesChartYAxesPanelComponent,
|
||||
TimeSeriesChartYAxisRowComponent,
|
||||
TimeSeriesChartYAxisSettingsPanelComponent,
|
||||
TimeSeriesChartAnimationSettingsComponent,
|
||||
DataKeyInputComponent,
|
||||
EntityAliasInputComponent
|
||||
],
|
||||
|
||||
@ -6696,6 +6696,16 @@
|
||||
"show": "Show",
|
||||
"add-y-axis": "Add Y axis"
|
||||
},
|
||||
"animation": {
|
||||
"animation": "Animation",
|
||||
"animation-threshold": "Animation threshold",
|
||||
"animation-duration": "Animation duration",
|
||||
"animation-easing": "Animation easing",
|
||||
"animation-delay": "Animation delay",
|
||||
"update-animation-duration": "Update animation duration",
|
||||
"update-animation-easing": "Update animation easing",
|
||||
"update-animation-delay": "Update animation delay"
|
||||
},
|
||||
"series": {
|
||||
"legend-settings": "Legend settings",
|
||||
"show-in-legend": "Show in legend",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user