UI: Aggregated value card

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts

@@ -33,7 +33,7 @@ import {
   ComparisonResultType,
   DataKey,
   DataKeyConfigMode,
-  DatasourceType,
+  DatasourceType, Widget,
   widgetType
 } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -100,6 +100,10 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
     return this.widgetConfigComponent.widgetConfigCallbacks;
   }
 
+  get widget(): Widget {
+    return this.widgetConfigComponent.widget;
+  }
+
   get isEntityDatasource(): boolean {
     return [DatasourceType.device, DatasourceType.entity].includes(this.datasourceType);
   }
@@ -190,7 +194,7 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
           dataKeySettingsDirective: null,
           dashboard: null,
           aliasController: null,
-          widget: null,
+          widget: this.widget,
           widgetType: widgetType.latest,
           deviceId: null,
           entityAliasId: null,

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html

@@ -28,8 +28,7 @@
       <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
     <div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-form-table-body">
-      <div class="tb-form-table-row"
+      <div *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
-           *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
         <tb-aggregated-data-key-row fxFlex
                          [formControl]="keyControl"
                          [datasourceType]="datasourceType"

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts

@@ -112,6 +112,8 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
 
   protected onConfigSet(configData: WidgetConfigComponentData) {
     const settings: AggregatedValueCardWidgetSettings = {...aggregatedValueCardDefaultSettings, ...(configData.config.settings || {})};
+    const dataKey = getDataKey(configData.config.datasources);
+    const keyName = dataKey?.name;
     const iconSize = resolveCssSize(configData.config.iconSize);
     this.aggregatedValueCardWidgetConfigForm = this.fb.group({
       timewindowConfig: [getTimewindowConfig(configData.config), []],
@@ -141,7 +143,7 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
       showChart: [settings.showChart, []],
       chartColor: [settings.chartColor, []],
 
-      values: [this.getValues(configData.config.datasources), []],
+      values: [this.getValues(configData.config.datasources, keyName), []],
 
       background: [settings.background, []],
 
@@ -257,9 +259,9 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
     }
   }
 
-  private getValues(datasources?: Datasource[]): DataKey[] {
+  private getValues(datasources: Datasource[], keyName: string): DataKey[] {
     if (datasources && datasources.length) {
-      return datasources[0].latestDataKeys || [];
+      return (datasources[0].latestDataKeys || []).filter(k => k.name === keyName);
     }
     return [];
   }

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="keyRowFormGroup" class="tb-form-table-row tb-data-key-row no-padding-right">
+<div [formGroup]="keyRowFormGroup" class="tb-form-table-row tb-data-key-row">
   <mat-form-field *ngIf="hasAdditionalLatestDataKeys" class="tb-inline-field tb-source-field" appearance="outline" subscriptSizing="dynamic">
     <mat-select formControlName="latest">
       <mat-option [value]="false">{{ 'datakey.timeseries' | translate }}</mat-option>

ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html

@@ -32,7 +32,7 @@
          [cdkDropListDisabled]="!dragEnabled"
          (cdkDropListDropped)="keyDrop($event)">
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
-           class="tb-form-table-row tb-draggable no-padding-right"
+           class="tb-draggable-form-table-row"
            *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
         <tb-data-key-row fxFlex
                          [formControl]="keyControl"

ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts

@@ -149,6 +149,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
     if (this.showChart) {
       const settings = {
         shadowSize: 0,
+        enableSelection: false,
         smoothLines: false,
         grid: {
           tickColor: 'rgba(0,0,0,0.12)',

ui-ngx/src/form.scss

@@ -400,12 +400,18 @@
     }
   }
 
-  .tb-form-table-row {
+  .tb-draggable-form-table-row {
-    &.tb-draggable {
+    background: #fff;
-      gap: 0;
+    display: flex;
-      padding-left: 0;
+    flex-direction: row;
-      background: #fff;
+    place-content: center flex-start;
+    align-items: center;
+    .tb-form-table-row {
+      padding-right: 0;
     }
+  }
+
+  .tb-form-table-row {
 
     &-cell {
       color: rgba(0, 0, 0, 0.87);