Propagate UI changes.

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

@@ -91,22 +91,9 @@ export class LegendConfigPanelComponent extends PageComponent implements OnInit
       }
       this.legendConfigForm.patchValue(
         {
-          position,
-          showMin: false,
-          showMax: false,
-          showAvg: false,
-          showTotal: false
+          position
         }, {emitEvent: false}
       );
-      this.legendConfigForm.get('showMin').disable({emitEvent: false});
-      this.legendConfigForm.get('showMax').disable({emitEvent: false});
-      this.legendConfigForm.get('showAvg').disable({emitEvent: false});
-      this.legendConfigForm.get('showTotal').disable({emitEvent: false});
-    } else {
-      this.legendConfigForm.get('showMin').enable({emitEvent: false});
-      this.legendConfigForm.get('showMax').enable({emitEvent: false});
-      this.legendConfigForm.get('showAvg').enable({emitEvent: false});
-      this.legendConfigForm.get('showTotal').enable({emitEvent: false});
     }
   }
 

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

@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<table class="tb-legend">
+<table class="tb-legend" [ngClass]="isRowDirection ? 'tb-legend-row' : 'tb-legend-column'"
+       [ngStyle]="{ marginRight: isRowDirection && !displayHeader ? 'auto' : '20px' }">
   <thead>
   <tr class="tb-legend-header" *ngIf="!isRowDirection">
     <th colspan="2"></th>
@@ -26,17 +27,54 @@
   </tr>
   </thead>
   <tbody>
-  <tr class="tb-legend-keys" *ngFor="let legendKey of legendKeys()" [ngClass]="{ 'tb-row-direction': isRowDirection }">
-    <td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td>
-    <td class="tb-legend-label"
-        (click)="toggleHideData(legendKey.dataIndex)"
-        [ngClass]="{ 'tb-hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden, 'tb-horizontal': isHorizontal }">
-      {{ legendKey.dataKey.label }}
-    </td>
-    <td class="tb-legend-value" *ngIf="legendConfig.showMin === true">{{ legendData.data[legendKey.dataIndex].min }}</td>
-    <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>
-  </tr>
+    <ng-container *ngIf="!isRowDirection">
+      <tr class="tb-legend-keys" *ngFor="let legendKey of legendKeys()">
+        <td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td>
+        <td class="tb-legend-label"
+            (click)="toggleHideData(legendKey.dataIndex)"
+            [ngClass]="{ 'tb-hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden, 'tb-horizontal': isHorizontal }">
+          {{ legendKey.dataKey.label }}
+        </td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showMin === true">{{ legendData.data[legendKey.dataIndex].min }}</td>
+        <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>
+      </tr>
+    </ng-container>
+    <tr *ngIf="isRowDirection" class="tb-legend-keys" [ngClass]="{ 'tb-row-direction': !displayHeader }">
+      <td></td>
+      <td *ngFor="let legendKey of legendKeys()">
+        <span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span>
+        <span class="tb-legend-label"
+              (click)="toggleHideData(legendKey.dataIndex)"
+              [ngClass]="{ 'tb-hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden}">
+                  {{ legendKey.dataKey.label }}
+        </span>
+      </td>
+    </tr>
+    <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMin === true">
+      <td class="tb-legend-type">{{ 'legend.min' | translate }}</td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
+        {{ legendData.data[legendKey.dataIndex].min }}
+      </td>
+    </tr>
+    <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMax === true">
+      <td class="tb-legend-type">{{ 'legend.max' | translate }}</td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
+        {{ legendData.data[legendKey.dataIndex].max }}
+      </td>
+    </tr>
+    <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showAvg === true">
+      <td class="tb-legend-type">{{ 'legend.avg' | translate }}</td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
+        {{ legendData.data[legendKey.dataIndex].avg }}
+      </td>
+    </tr>
+    <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showTotal === true">
+      <td class="tb-legend-type">{{ 'legend.total' | translate }}</td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
+        {{ legendData.data[legendKey.dataIndex].total }}
+      </td>
+    </tr>
   </tbody>
 </table>

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

@@ -15,9 +15,17 @@
  */
 :host {
   table.tb-legend {
-    width: 100%;
     font-size: 12px;
 
+    &.tb-legend-column {
+      width: 100%;
+    }
+
+    &.tb-legend-row {
+      width: auto;
+      margin-left: auto;
+    }
+
     .tb-legend-header,
     .tb-legend-value {
       text-align: right;
@@ -42,6 +50,15 @@
         white-space: nowrap;
       }
 
+      .tb-legend-type {
+        min-width: 50px;
+        padding: 0 10px 1px 0;
+        font-weight: 700;
+        color: rgb(255, 110, 64);
+        text-align: right;
+        white-space: nowrap;
+      }
+
       .tb-legend-line {
         display: inline-block;
         width: 15px;
@@ -50,7 +67,9 @@
       }
 
       .tb-legend-label {
+        padding: 2px 10px;
         text-align: left;
+        white-space: nowrap;
         outline: none;
 
         &.tb-horizontal {

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

@@ -46,5 +46,6 @@
 
   #widget-container {
     min-height: 0;
+    min-width: 0;
   }
 }