Merge pull request #6788 from devaskim/latest_value_in_legend

[3.4] UI: Add option to show latest value in widget's legend.

ui-ngx/src/app/core/api/widget-subscription.ts

@@ -285,7 +285,8 @@ export class WidgetSubscription implements IWidgetSubscription {
         (this.legendConfig.showMin === true ||
           this.legendConfig.showMax === true ||
           this.legendConfig.showAvg === true ||
-          this.legendConfig.showTotal === true);
+          this.legendConfig.showTotal === true ||
+          this.legendConfig.showLatest === true);
       this.initDataSubscription().subscribe(() => {
           subscriptionSubject.next(this);
           subscriptionSubject.complete();
@@ -1295,6 +1296,7 @@ export class WidgetSubscription implements IWidgetSubscription {
                   max: null,
                   avg: null,
                   total: null,
+                  latest: null,
                   hidden: false
                 };
                 this.legendData.data.push(legendKeyData);
@@ -1526,6 +1528,9 @@ export class WidgetSubscription implements IWidgetSubscription {
     if (this.legendConfig.showTotal) {
       legendKeyData.total = this.ctx.widgetUtils.formatValue(calculateTotal(data), decimals, units);
     }
+    if (this.legendConfig.showLatest) {
+      legendKeyData.latest = this.ctx.widgetUtils.formatValue(calculateLatest(data), decimals, units);
+    }
     this.callbacks.legendDataUpdated(this, detectChanges !== false);
   }
 
@@ -1598,3 +1603,11 @@ function calculateTotal(data: DataSet): number {
     return null;
   }
 }
+
+function calculateLatest(data: DataSet): number {
+  if (data.length > 0) {
+    return Number(data[data.length - 1][1]);
+  } else {
+    return null;
+  }
+}

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

@@ -50,6 +50,9 @@
     <mat-checkbox formControlName="showTotal" fxFlex="48">
       {{ 'legend.show-total' | translate }}
     </mat-checkbox>
+    <mat-checkbox formControlName="showLatest" fxFlex="48">
+      {{ 'legend.show-latest' | translate }}
+    </mat-checkbox>
     <mat-checkbox formControlName="sortDataKeys" fxFlex="48">
       {{ 'legend.sort-legend' | translate }}
     </mat-checkbox>

ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts

@@ -66,7 +66,8 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
       showMin: [null, []],
       showMax: [null, []],
       showAvg: [null, []],
-      showTotal: [null, []]
+      showTotal: [null, []],
+      showLatest: [null, []]
     });
     this.legendSettingsFormDirectionChanges$ = this.legendConfigForm.get('direction').valueChanges
       .subscribe((direction: LegendDirection) => {
@@ -124,7 +125,8 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
         showMin: isDefined(legendConfig.showMin) ? legendConfig.showMin : false,
         showMax: isDefined(legendConfig.showMax) ? legendConfig.showMax : false,
         showAvg: isDefined(legendConfig.showAvg) ? legendConfig.showAvg : false,
-        showTotal: isDefined(legendConfig.showTotal) ? legendConfig.showTotal : false
+        showTotal: isDefined(legendConfig.showTotal) ? legendConfig.showTotal : false,
+        showLatest: isDefined(legendConfig.showLatest) ? legendConfig.showLatest : false
       }, {emitEvent: false});
     }
     this.onDirectionChanged(legendConfig.direction);

ui-ngx/src/app/modules/home/components/widget/legend.component.html

@@ -23,6 +23,7 @@
     <th *ngIf="legendConfig.showMax === true">{{ 'legend.max' | translate }}</th>
     <th *ngIf="legendConfig.showAvg === true">{{ 'legend.avg' | translate }}</th>
     <th *ngIf="legendConfig.showTotal === true">{{ 'legend.total' | translate }}</th>
+    <th *ngIf="legendConfig.showLatest === true">{{ 'legend.latest' | translate }}</th>
   </tr>
   </thead>
   <tbody>
@@ -38,6 +39,7 @@
         <td class="tb-legend-value" *ngIf="legendConfig.showMax === true">{{ legendData.data[legendKey.dataIndex].max }}</td>
         <td class="tb-legend-value" *ngIf="legendConfig.showAvg === true">{{ legendData.data[legendKey.dataIndex].avg }}</td>
         <td class="tb-legend-value" *ngIf="legendConfig.showTotal === true">{{ legendData.data[legendKey.dataIndex].total }}</td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showLatest === true">{{ legendData.data[legendKey.dataIndex].latest }}</td>
       </tr>
     </ng-container>
     <tr *ngIf="isRowDirection" class="tb-legend-keys" [ngClass]="{ 'tb-row-direction': !displayHeader }">
@@ -75,5 +77,11 @@
         {{ legendData.data[legendKey.dataIndex].total }}
       </td>
     </tr>
+    <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showLatest === true">
+      <td class="tb-legend-type">{{ 'legend.latest' | translate }}</td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
+        {{ legendData.data[legendKey.dataIndex].latest }}
+      </td>
+    </tr>
   </tbody>
 </table>

ui-ngx/src/app/modules/home/components/widget/legend.component.ts

@@ -43,7 +43,8 @@ export class LegendComponent implements OnInit {
     this.displayHeader = this.legendConfig.showMin === true ||
       this.legendConfig.showMax === true ||
       this.legendConfig.showAvg === true ||
-      this.legendConfig.showTotal === true;
+      this.legendConfig.showTotal === true ||
+      this.legendConfig.showLatest === true;
 
     this.isHorizontal = this.legendConfig.position === LegendPosition.bottom ||
       this.legendConfig.position === LegendPosition.top;

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

@@ -243,6 +243,7 @@ export interface LegendConfig {
   showMax: boolean;
   showAvg: boolean;
   showTotal: boolean;
+  showLatest: boolean;
 }
 
 export function defaultLegendConfig(wType: widgetType): LegendConfig {
@@ -253,7 +254,8 @@ export function defaultLegendConfig(wType: widgetType): LegendConfig {
     showMin: false,
     showMax: false,
     showAvg: wType === widgetType.timeseries,
-    showTotal: false
+    showTotal: false,
+    showLatest: false
   };
 }
 
@@ -362,6 +364,7 @@ export interface LegendKeyData {
   max: string;
   avg: string;
   total: string;
+  latest: string;
   hidden: boolean;
 }
 

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

@@ -2501,11 +2501,13 @@
         "show-min": "Show min value",
         "show-avg": "Show average value",
         "show-total": "Show total value",
+        "show-latest": "Show latest value",
         "settings": "Legend settings",
         "min": "min",
         "max": "max",
         "avg": "avg",
         "total": "total",
+        "latest": "latest",
         "comparison-time-ago": {
             "previousInterval": "(previous interval)",
             "customInterval": "(custom interval)",