UI: Time series chart animation settings.

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html

@@ -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">

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts

@@ -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);

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html

@@ -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">

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts

@@ -138,6 +138,8 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
 
+      animation: [settings.animation, []],
+
       background: [settings.background, []]
     });
   }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-animation-settings.component.html

@@ -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>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-animation-settings.component.ts

@@ -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);
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts

@@ -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
   ],

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -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",