UI: Added new options for legend config (sort datakeys in legend)

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

@@ -1226,9 +1226,6 @@ export class WidgetSubscription implements IWidgetSubscription {
         });
       });
     }
-    if (this.displayLegend) {
-      this.legendData.keys = this.legendData.keys.sort((key1, key2) => key1.dataKey.label.localeCompare(key2.dataKey.label));
-    }
     if (this.caulculateLegendData) {
       this.data.forEach((dataSetHolder, keyIndex) => {
         this.updateLegend(keyIndex, dataSetHolder.data, false);

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

@@ -38,6 +38,9 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
+          <mat-checkbox formControlName="sortDataKeys">
+            {{ 'legend.sort-legend' | translate }}
+          </mat-checkbox>
           <mat-checkbox formControlName="showMin">
             {{ 'legend.show-min' | translate }}
           </mat-checkbox>

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

@@ -68,6 +68,7 @@ export class LegendConfigPanelComponent extends PageComponent implements OnInit
     this.legendConfigForm = this.fb.group({
       direction: [this.data.legendConfig.direction, []],
       position: [this.data.legendConfig.position, []],
+      sortDataKeys: [this.data.legendConfig.sortDataKeys, []],
       showMin: [this.data.legendConfig.showMin, []],
       showMax: [this.data.legendConfig.showMax, []],
       showAvg: [this.data.legendConfig.showAvg, []],

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

@@ -60,8 +60,11 @@ export class LegendComponent implements OnInit {
   }
 
   legendKeys(): LegendKey[] {
-    return this.legendData.keys
-      .filter(legendKey => this.legendData.keys[legendKey.dataIndex].dataKey.inLegend);
+    let keys = this.legendData.keys;
+    if (this.legendConfig.sortDataKeys) {
+      keys = this.legendData.keys.sort((key1, key2) => key1.dataKey.label.localeCompare(key2.dataKey.label));
+    }
+    return keys.filter(legendKey => this.legendData.keys[legendKey.dataIndex].dataKey.inLegend);
   }
 
 }

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

@@ -203,6 +203,7 @@ export const legendPositionTranslationMap = new Map<LegendPosition, string>(
 export interface LegendConfig {
   position: LegendPosition;
   direction?: LegendDirection;
+  sortDataKeys: boolean;
   showMin: boolean;
   showMax: boolean;
   showAvg: boolean;
@@ -213,6 +214,7 @@ export function defaultLegendConfig(wType: widgetType): LegendConfig {
   return {
     direction: LegendDirection.column,
     position: LegendPosition.bottom,
+    sortDataKeys: false,
     showMin: false,
     showMax: false,
     showAvg: wType === widgetType.timeseries,

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

@@ -1664,6 +1664,7 @@
     "legend": {
         "direction": "Legend direction",
         "position": "Legend position",
+        "sort-legend": "Sort datakeys in legend",
         "show-max": "Show max value",
         "show-min": "Show min value",
         "show-avg": "Show average value",