UI: Improve latest data key aggregation config

ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html

@@ -63,24 +63,30 @@
         </mat-form-field>
       </div>
       <section *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries" fxLayout="column">
-        <mat-form-field style="padding-bottom: 16px;">
-          <mat-label translate>datakey.aggregation-type</mat-label>
+        <mat-form-field style="padding-bottom: 46px;">
+          <mat-label translate>datakey.aggregation</mat-label>
           <mat-select formControlName="aggregationType" style="min-width: 150px;">
             <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
-              {{ (aggregation === aggregationTypes.NONE ? 'datakey.latest-value' : aggregationTypesTranslations.get(aggregationTypes[aggregation])) | translate }}
+              {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
             </mat-option>
           </mat-select>
-          <mat-hint>{{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }}</mat-hint>
+          <mat-hint style="line-height: 15px;">
+            {{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }}
+            <section *ngIf="dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE">
+              {{ 'datakey.aggregation-type-hint-common' | translate }}
+            </section>
+          </mat-hint>
         </mat-form-field>
         <fieldset *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" class="fields-group fields-group-slider">
-          <legend class="group-title" translate>widgets.chart.comparison-settings</legend>
+          <legend class="group-title" translate>datakey.delta-calculation</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value">
             <mat-expansion-panel-header fxLayout="row wrap">
-              <mat-panel-title>
+              <mat-panel-title fxLayout="column">
                 <mat-slide-toggle formControlName="comparisonEnabled" (click)="$event.stopPropagation()"
                                   fxLayoutAlign="center">
-                  {{ 'widgets.chart.enable-comparison' | translate }}
+                  {{ 'datakey.enable-delta-calculation' | translate }}
                 </mat-slide-toggle>
+                <mat-hint class="tb-hint" style="line-height: 15px; padding-left: 45px;">{{ 'datakey.enable-delta-calculation-hint' | translate }}</mat-hint>
               </mat-panel-title>
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
@@ -113,7 +119,7 @@
                   <input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue">
                 </mat-form-field>
                 <mat-form-field style="padding-bottom: 16px;">
-                  <mat-label translate>datakey.comparison-result</mat-label>
+                  <mat-label translate>datakey.delta-calculation-result</mat-label>
                   <mat-select formControlName="comparisonResultType" style="min-width: 150px;">
                     <mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType">
                       {{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }}

ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss

@@ -83,6 +83,7 @@
         .mat-expansion-panel-header {
           padding: 0;
           color: rgba(0, 0, 0, 0.87);
+          height: 140px;
 
           &:hover {
             background: none;

ui-ngx/src/app/shared/models/widget.models.ts

@@ -267,9 +267,9 @@ export enum ComparisonResultType {
 
 export const comparisonResultTypeTranslationMap = new Map<ComparisonResultType, string>(
   [
-    [ComparisonResultType.PREVIOUS_VALUE, 'datakey.comparison-result-previous-value'],
-    [ComparisonResultType.DELTA_ABSOLUTE, 'datakey.comparison-result-delta-absolute'],
-    [ComparisonResultType.DELTA_PERCENT, 'datakey.comparison-result-delta-percent']
+    [ComparisonResultType.PREVIOUS_VALUE, 'datakey.delta-calculation-result-previous-value'],
+    [ComparisonResultType.DELTA_ABSOLUTE, 'datakey.delta-calculation-result-delta-absolute'],
+    [ComparisonResultType.DELTA_PERCENT, 'datakey.delta-calculation-result-delta-percent']
   ]
 );
 

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

@@ -1040,18 +1040,21 @@
         "prev-value-description": "result of the previous function call;",
         "time-prev-description": "timestamp of the previous value;",
         "prev-orig-value-description": "original previous value;",
-        "aggregation-type": "Aggregation type",
-        "latest-value": "Latest value",
-        "aggregation-type-none-hint": "Take latest value",
-        "aggregation-type-min-hint": "Take min value",
-        "aggregation-type-max-hint": "Take max value",
-        "aggregation-type-avg-hint": "Calculate average value",
-        "aggregation-type-sum-hint": "Calculate sum value",
-        "aggregation-type-count-hint": "Calculate count value",
-        "comparison-result": "Comparison result",
-        "comparison-result-previous-value": "Previous value",
-        "comparison-result-delta-absolute": "Delta (absolute)",
-        "comparison-result-delta-percent": "Delta (percent)"
+        "aggregation": "Aggregation",
+        "aggregation-type-hint-common": "For performance reasons, the aggregated values calculation is available only for fixed time intervals like \"current day\", \"current month\", etc, and is not available for sliding window intervals like 'last 30 minutes' or 'last 24 hours'.",
+        "aggregation-type-none-hint": "Take latest value.",
+        "aggregation-type-min-hint": "Find minimum value among data points within a selected time window.",
+        "aggregation-type-max-hint": "Find maximum value among data points within a selected time window.",
+        "aggregation-type-avg-hint": "Calculate an average value among data points within a selected time window.",
+        "aggregation-type-sum-hint": "Sum all values of the data points within a selected time window.",
+        "aggregation-type-count-hint": "Total number of the data points within a selected time window.",
+        "delta-calculation": "Delta calculation",
+        "enable-delta-calculation": "Enable delta calculation",
+        "enable-delta-calculation-hint": "When enabled, the data key value is calculated based on the aggregated values for a selected time window and a specified comparison period. For performance reasons, the delta calculation is available only for history time windows and not for real-time values. For example, you may calculate the delta between the energy consumption for yesterday compared to the energy consumption for the day before yesterday.",
+        "delta-calculation-result": "Delta calculation result",
+        "delta-calculation-result-previous-value": "Previous value",
+        "delta-calculation-result-delta-absolute": "Delta (absolute)",
+        "delta-calculation-result-delta-percent": "Delta (percent)"
     },
     "datasource": {
         "type": "Datasource type",