From c40f6bf47c58cfc26d6d04729093da50e0a3b054 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 23 Oct 2020 18:42:07 +0300
Subject: [PATCH] UI: Added new options for legend config (sort datakeys in
 legend)

---
 ui-ngx/src/app/core/api/widget-subscription.ts             | 3 ---
 .../components/widget/legend-config-panel.component.html   | 3 +++
 .../components/widget/legend-config-panel.component.ts     | 1 +
 .../app/modules/home/components/widget/legend.component.ts | 7 +++++--
 ui-ngx/src/app/shared/models/widget.models.ts              | 2 ++
 ui-ngx/src/assets/locale/locale.constant-en_US.json        | 1 +
 6 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/ui-ngx/src/app/core/api/widget-subscription.ts b/ui-ngx/src/app/core/api/widget-subscription.ts
index f7017652d8..123fe010c8 100644
--- a/ui-ngx/src/app/core/api/widget-subscription.ts
+++ b/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);
diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.html
index 15e5466e80..28cabf7cd8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.ts
index 5f5abff7a3..05e515100e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.ts
+++ b/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, []],
diff --git a/ui-ngx/src/app/modules/home/components/widget/legend.component.ts b/ui-ngx/src/app/modules/home/components/widget/legend.component.ts
index 55fffa2b5b..3691742406 100644
--- a/ui-ngx/src/app/modules/home/components/widget/legend.component.ts
+++ b/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);
   }
 
 }
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index 8ea338a98f..a97a66a1ef 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/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,
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 453d5d2abd..11cf7dcbc0 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/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",