Merge pull request #7531 from thingsboard/engix-ltd-threshold_array

[3.4.2] UI: Chart thresholds support array of values

ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts

@@ -909,41 +909,52 @@ export class TbFlot {
                                        isLatest = false): TbFlotThresholdMarking[] {
     const thresholds: TbFlotThresholdMarking[] = [];
     data.forEach((keyData) => {
-      let skip = false;
-      let latestSettings: TbFlotLatestKeySettings;
-      if (isLatest) {
-        latestSettings = keyData.dataKey.settings;
-        if (!latestSettings.useAsThreshold) {
-          skip = true;
-        }
-      }
+      const skip = isLatest && !keyData.dataKey.settings.useAsThreshold;
       if (!skip && keyData && keyData.data && keyData.data[0]) {
-        const attrValue = keyData.data[0][1];
-        if (isNumeric(attrValue) && isFinite(attrValue)) {
-          let yaxis: number;
-          let lineWidth: number;
-          let color: string;
-          if (isLatest) {
-            yaxis = 1;
-            lineWidth = latestSettings.thresholdLineWidth;
-            color = latestSettings.thresholdColor || keyData.dataKey.color;
-          } else {
-            const settings: TbFlotThresholdKeySettings = keyData.dataKey.settings;
-            yaxis = settings.yaxis;
-            lineWidth = settings.lineWidth;
-            color = settings.color || keyData.dataKey.color;
-          }
-          const colorIndex = this.subscription.data.length + existingThresholds.length;
-          const threshold = this.generateThreshold(existingThresholds, yaxis, lineWidth, color, colorIndex, attrValue);
+        const values = this.parseThresholdData(keyData.data[0][1]);
+        values.forEach(v => {
+          const threshold = this.processSingleDataValue(v, keyData, keyData.dataKey.settings, existingThresholds, isLatest);
           if (threshold != null) {
             thresholds.push(threshold);
           }
-        }
+        });
       }
     });
     return thresholds;
   }
 
+  private parseThresholdData(value: any): Array<any> {
+    let values;
+    try {
+      const parsedData = JSON.parse(value);
+      values = Array.isArray(parsedData) ? parsedData : [parsedData];
+    } catch (e) {
+      values = [value];
+    }
+    return values;
+  }
+
+  private processSingleDataValue(attrValue: number, keyData: DatasourceData, latestSettings: TbFlotLatestKeySettings,
+                                 existingThresholds: TbFlotThresholdMarking[], isLatest = false) {
+    if (isNumeric(attrValue) && isFinite(attrValue)) {
+      let yaxis: number;
+      let lineWidth: number;
+      let color: string;
+      if (isLatest) {
+        yaxis = 1;
+        lineWidth = latestSettings.thresholdLineWidth;
+        color = latestSettings.thresholdColor || keyData.dataKey.color;
+      } else {
+        const settings: TbFlotThresholdKeySettings = keyData.dataKey.settings;
+        yaxis = settings.yaxis;
+        lineWidth = settings.lineWidth;
+        color = settings.color || keyData.dataKey.color;
+      }
+      const colorIndex = this.subscription.data.length + existingThresholds.length;
+      return this.generateThreshold(existingThresholds, yaxis, lineWidth, color, colorIndex, attrValue);
+    }
+  }
+
   private generateThreshold(existingThresholds: TbFlotThresholdMarking[], yaxis: number, lineWidth: number,
                             color: string, defaultColorIndex: number, thresholdValue: number): TbFlotThresholdMarking {
     const marking: TbFlotThresholdMarking = {};