UI: Improve time series chart legend configuration - added font/color settings for legend value and column title.

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

@@ -199,6 +199,7 @@
           <div>{{ 'legend.label' | translate }}</div>
           <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
             <tb-font-settings formControlName="legendLabelFont"
+                              [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendLabelColor').value}"
                               previewText="Temperature">
             </tb-font-settings>
             <tb-color-input asBoxInput
@@ -207,6 +208,32 @@
             </tb-color-input>
           </div>
         </div>
+        <div class="tb-form-row space-between">
+          <div>{{ 'legend.value' | translate }}</div>
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <tb-font-settings formControlName="legendValueFont"
+                              [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendValueColor').value}"
+                              previewText="22 °C">
+            </tb-font-settings>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="legendValueColor">
+            </tb-color-input>
+          </div>
+        </div>
+        <div class="tb-form-row space-between">
+          <div>{{ 'legend.column-title' | translate }}</div>
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <tb-font-settings formControlName="legendColumnTitleFont"
+                              [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendColumnTitleColor').value}"
+                              previewText="{{ 'legend.Avg' | translate }}">
+            </tb-font-settings>
+            <tb-color-input asBoxInput
+                            colorClearButton
+                            formControlName="legendColumnTitleColor">
+            </tb-color-input>
+          </div>
+        </div>
         <tb-legend-config hideDirection
                           formControlName="legendConfig">
         </tb-legend-config>

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

@@ -168,8 +168,12 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       noAggregationBarWidthSettings: [settings.noAggregationBarWidthSettings, []],
 
       showLegend: [settings.showLegend, []],
+      legendColumnTitleFont: [settings.legendColumnTitleFont, []],
+      legendColumnTitleColor: [settings.legendColumnTitleColor, []],
       legendLabelFont: [settings.legendLabelFont, []],
       legendLabelColor: [settings.legendLabelColor, []],
+      legendValueFont: [settings.legendValueFont, []],
+      legendValueColor: [settings.legendValueColor, []],
       legendConfig: [settings.legendConfig, []],
 
       showTooltip: [settings.showTooltip, []],
@@ -236,8 +240,12 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
     this.widgetConfig.config.settings.noAggregationBarWidthSettings = config.noAggregationBarWidthSettings;
 
     this.widgetConfig.config.settings.showLegend = config.showLegend;
+    this.widgetConfig.config.settings.legendColumnTitleFont = config.legendColumnTitleFont;
+    this.widgetConfig.config.settings.legendColumnTitleColor = config.legendColumnTitleColor;
     this.widgetConfig.config.settings.legendLabelFont = config.legendLabelFont;
     this.widgetConfig.config.settings.legendLabelColor = config.legendLabelColor;
+    this.widgetConfig.config.settings.legendValueFont = config.legendValueFont;
+    this.widgetConfig.config.settings.legendValueColor = config.legendValueColor;
     this.widgetConfig.config.settings.legendConfig = config.legendConfig;
 
     this.widgetConfig.config.settings.showTooltip = config.showTooltip;
@@ -318,12 +326,20 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
     }
 
     if (showLegend) {
+      this.timeSeriesChartWidgetConfigForm.get('legendColumnTitleFont').enable();
+      this.timeSeriesChartWidgetConfigForm.get('legendColumnTitleColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('legendLabelFont').enable();
       this.timeSeriesChartWidgetConfigForm.get('legendLabelColor').enable();
+      this.timeSeriesChartWidgetConfigForm.get('legendValueFont').enable();
+      this.timeSeriesChartWidgetConfigForm.get('legendValueColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('legendConfig').enable();
     } else {
+      this.timeSeriesChartWidgetConfigForm.get('legendColumnTitleFont').disable();
+      this.timeSeriesChartWidgetConfigForm.get('legendColumnTitleColor').disable();
       this.timeSeriesChartWidgetConfigForm.get('legendLabelFont').disable();
       this.timeSeriesChartWidgetConfigForm.get('legendLabelColor').disable();
+      this.timeSeriesChartWidgetConfigForm.get('legendValueFont').disable();
+      this.timeSeriesChartWidgetConfigForm.get('legendValueColor').disable();
       this.timeSeriesChartWidgetConfigForm.get('legendConfig').disable();
     }
 

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

@@ -63,11 +63,11 @@
         <thead>
         <tr>
           <th></th>
-          <th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showMin === true">{{ 'legend.Min' | translate }}</th>
+          <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showMin === true">{{ 'legend.Min' | translate }}</th>
-          <th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showMax === true">{{ 'legend.Max' | translate }}</th>
+          <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showMax === true">{{ 'legend.Max' | translate }}</th>
-          <th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showAvg === true">{{ 'legend.Avg' | translate }}</th>
+          <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showAvg === true">{{ 'legend.Avg' | translate }}</th>
-          <th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showTotal === true">{{ 'legend.Total' | translate }}</th>
+          <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showTotal === true">{{ 'legend.Total' | translate }}</th>
-          <th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showLatest === true">{{ 'legend.Latest' | translate }}</th>
+          <th class="tb-time-series-chart-legend-type-label right" [style]="legendColumnTitleStyle" *ngIf="legendConfig.showLatest === true">{{ 'legend.Latest' | translate }}</th>
         </tr>
         </thead>
         <tbody>
@@ -75,19 +75,19 @@
             <th>
               <ng-container *ngTemplateOutlet="legendItem; context:{legendKey: legendKey, left: true}"></ng-container>
             </th>
-            <td *ngIf="legendConfig.showMin === true" class="tb-time-series-chart-legend-value">
+            <td *ngIf="legendConfig.showMin === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
               {{ legendData.data[legendKey.dataIndex].min }}
             </td>
-            <td *ngIf="legendConfig.showMax === true" class="tb-time-series-chart-legend-value">
+            <td *ngIf="legendConfig.showMax === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
               {{ legendData.data[legendKey.dataIndex].max }}
             </td>
-            <td *ngIf="legendConfig.showAvg === true" class="tb-time-series-chart-legend-value">
+            <td *ngIf="legendConfig.showAvg === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
               {{ legendData.data[legendKey.dataIndex].avg }}
             </td>
-            <td *ngIf="legendConfig.showTotal === true" class="tb-time-series-chart-legend-value">
+            <td *ngIf="legendConfig.showTotal === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
               {{ legendData.data[legendKey.dataIndex].total }}
             </td>
-            <td *ngIf="legendConfig.showLatest === true" class="tb-time-series-chart-legend-value">
+            <td *ngIf="legendConfig.showLatest === true" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
               {{ legendData.data[legendKey.dataIndex].latest }}
             </td>
           </tr>
@@ -113,8 +113,8 @@
     </ng-template>
     <ng-template #legendDataRow let-label="label" let-type="type">
       <tr>
-        <th class="tb-time-series-chart-legend-type-label">{{ label | translate }}</th>
+        <th class="tb-time-series-chart-legend-type-label" [style]="legendColumnTitleStyle">{{ label | translate }}</th>
-        <td *ngFor="let legendKey of legendKeys" class="tb-time-series-chart-legend-value">
+        <td *ngFor="let legendKey of legendKeys" class="tb-time-series-chart-legend-value" [style]="legendValueStyle">
           {{ legendData.data[legendKey.dataIndex][type] }}
         </td>
       </tr>

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

@@ -147,11 +147,6 @@ $maxLegendHeight: 35%;
         }
       }
       .tb-time-series-chart-legend-type-label {
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 16px;
-        color: rgba(0, 0, 0, 0.38);
         white-space: nowrap;
         text-align: left;
         &.right {
@@ -159,11 +154,6 @@ $maxLegendHeight: 35%;
         }
       }
       .tb-time-series-chart-legend-value {
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 16px;
-        color: rgba(0, 0, 0, 0.87);
         white-space: nowrap;
         text-align: right;
       }

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

@@ -73,8 +73,10 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV
   overlayEnabled: boolean;
   padding: string;
 
+  legendColumnTitleStyle: ComponentStyle;
   legendLabelStyle: ComponentStyle;
   disabledLegendLabelStyle: ComponentStyle;
+  legendValueStyle: ComponentStyle;
 
   displayLegendValues = false;
 
@@ -117,9 +119,13 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV
     if (this.showLegend) {
       this.horizontalLegendPosition = [LegendPosition.left, LegendPosition.right].includes(this.legendConfig.position);
       this.legendClass = `legend-${this.legendConfig.position}`;
+      this.legendColumnTitleStyle = textStyle(this.settings.legendColumnTitleFont);
+      this.legendColumnTitleStyle.color = this.settings.legendColumnTitleColor;
       this.legendLabelStyle = textStyle(this.settings.legendLabelFont);
       this.disabledLegendLabelStyle = textStyle(this.settings.legendLabelFont);
       this.legendLabelStyle.color = this.settings.legendLabelColor;
+      this.legendValueStyle = textStyle(this.settings.legendValueFont);
+      this.legendValueStyle.color = this.settings.legendValueColor;
       this.displayLegendValues = this.legendConfig.showMin || this.legendConfig.showMax ||
         this.legendConfig.showAvg || this.legendConfig.showTotal || this.legendConfig.showLatest;
     }

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

@@ -21,8 +21,12 @@ import { mergeDeep } from '@core/utils';
 
 export interface TimeSeriesChartWidgetSettings extends TimeSeriesChartSettings {
   showLegend: boolean;
+  legendColumnTitleFont: Font;
+  legendColumnTitleColor: string;
   legendLabelFont: Font;
   legendLabelColor: string;
+  legendValueFont: Font;
+  legendValueColor: string;
   legendConfig: LegendConfig;
   background: BackgroundSettings;
   padding: string;
@@ -31,6 +35,15 @@ export interface TimeSeriesChartWidgetSettings extends TimeSeriesChartSettings {
 export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings =
   mergeDeep({} as TimeSeriesChartWidgetSettings, timeSeriesChartDefaultSettings as TimeSeriesChartWidgetSettings, {
     showLegend: true,
+    legendColumnTitleFont: {
+      family: 'Roboto',
+      size: 12,
+      sizeUnit: 'px',
+      style: 'normal',
+      weight: '400',
+      lineHeight: '16px'
+    },
+    legendColumnTitleColor: 'rgba(0, 0, 0, 0.38)',
     legendLabelFont: {
       family: 'Roboto',
       size: 12,
@@ -40,6 +53,15 @@ export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings
       lineHeight: '16px'
     },
     legendLabelColor: 'rgba(0, 0, 0, 0.76)',
+    legendValueFont: {
+      family: 'Roboto',
+      size: 12,
+      sizeUnit: 'px',
+      style: 'normal',
+      weight: '500',
+      lineHeight: '16px'
+    },
+    legendValueColor: 'rgba(0, 0, 0, 0.87)',
     legendConfig: {...defaultLegendConfig(widgetType.timeseries), position: LegendPosition.top},
     background: {
       type: BackgroundType.color,

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

@@ -118,6 +118,7 @@
             <div>{{ 'legend.label' | translate }}</div>
             <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
               <tb-font-settings formControlName="legendLabelFont"
+                                [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendLabelColor').value}"
                                 previewText="Temperature">
               </tb-font-settings>
               <tb-color-input asBoxInput
@@ -126,6 +127,32 @@
               </tb-color-input>
             </div>
           </div>
+          <div class="tb-form-row space-between">
+            <div>{{ 'legend.value' | translate }}</div>
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+              <tb-font-settings formControlName="legendValueFont"
+                                [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendValueColor').value}"
+                                previewText="22 °C">
+              </tb-font-settings>
+              <tb-color-input asBoxInput
+                              colorClearButton
+                              formControlName="legendValueColor">
+              </tb-color-input>
+            </div>
+          </div>
+          <div class="tb-form-row space-between">
+            <div>{{ 'legend.column-title' | translate }}</div>
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+              <tb-font-settings formControlName="legendColumnTitleFont"
+                                [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendColumnTitleColor').value}"
+                                previewText="{{ 'legend.Avg' | translate }}">
+              </tb-font-settings>
+              <tb-color-input asBoxInput
+                              colorClearButton
+                              formControlName="legendColumnTitleColor">
+              </tb-color-input>
+            </div>
+          </div>
           <tb-legend-config hideDirection
                             formControlName="legendConfig">
           </tb-legend-config>

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

@@ -133,8 +133,12 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       noAggregationBarWidthSettings: [settings.noAggregationBarWidthSettings, []],
 
       showLegend: [settings.showLegend, []],
+      legendColumnTitleFont: [settings.legendColumnTitleFont, []],
+      legendColumnTitleColor: [settings.legendColumnTitleColor, []],
       legendLabelFont: [settings.legendLabelFont, []],
       legendLabelColor: [settings.legendLabelColor, []],
+      legendValueFont: [settings.legendValueFont, []],
+      legendValueColor: [settings.legendValueColor, []],
       legendConfig: [settings.legendConfig, []],
 
       showTooltip: [settings.showTooltip, []],
@@ -182,12 +186,20 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
     }
 
     if (showLegend) {
+      this.timeSeriesChartWidgetSettingsForm.get('legendColumnTitleFont').enable();
+      this.timeSeriesChartWidgetSettingsForm.get('legendColumnTitleColor').enable();
       this.timeSeriesChartWidgetSettingsForm.get('legendLabelFont').enable();
       this.timeSeriesChartWidgetSettingsForm.get('legendLabelColor').enable();
+      this.timeSeriesChartWidgetSettingsForm.get('legendValueFont').enable();
+      this.timeSeriesChartWidgetSettingsForm.get('legendValueColor').enable();
       this.timeSeriesChartWidgetSettingsForm.get('legendConfig').enable();
     } else {
+      this.timeSeriesChartWidgetSettingsForm.get('legendColumnTitleFont').disable();
+      this.timeSeriesChartWidgetSettingsForm.get('legendColumnTitleColor').disable();
       this.timeSeriesChartWidgetSettingsForm.get('legendLabelFont').disable();
       this.timeSeriesChartWidgetSettingsForm.get('legendLabelColor').disable();
+      this.timeSeriesChartWidgetSettingsForm.get('legendValueFont').disable();
+      this.timeSeriesChartWidgetSettingsForm.get('legendValueColor').disable();
       this.timeSeriesChartWidgetSettingsForm.get('legendConfig').disable();
     }
 

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

@@ -3292,6 +3292,7 @@
             "months": "(month ago)",
             "years": "(year ago)"
         },
+        "column-title": "Column title",
         "label": "Label",
         "value": "Value"
     },