Fixed show polygon on image map widget

ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts

@@ -14,25 +14,32 @@
 /// limitations under the License.
 ///
 
-import L, { FeatureGroup, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions, MarkerClusterGroup } from 'leaflet';
+import L, {
+  FeatureGroup,
+  LatLngBounds,
+  LatLngTuple,
+  markerClusterGroup,
+  MarkerClusterGroup,
+  MarkerClusterGroupOptions
+} from 'leaflet';
 
 import 'leaflet-providers';
 import 'leaflet.markercluster/dist/leaflet.markercluster';
 
 import {
-    FormattedData,
+  FormattedData,
-    MapSettings,
+  MapSettings,
-    MarkerSettings,
+  MarkerSettings,
-    PolygonSettings,
+  PolygonSettings,
-    PolylineSettings,
+  PolylineSettings,
-    UnitedMapSettings
+  UnitedMapSettings
 } from './map-models';
 import { Marker } from './markers';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { Polyline } from './polyline';
 import { Polygon } from './polygon';
-import { createTooltip, parseArray, parseData, safeExecute } from '@home/components/widget/lib/maps/maps-utils';
+import { createTooltip, parseArray, safeExecute } from '@home/components/widget/lib/maps/maps-utils';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { DatasourceData } from '@shared/models/widget.models';
 
@@ -246,6 +253,12 @@ export default abstract class LeafletMap {
             return L.latLng(lat, lng) as L.LatLng;
     }
 
+    convertPositionPolygon(expression: Array<[number, number]>): L.LatLngExpression[] {
+      return expression.map((el) => {
+        return el.length === 2 && !el.some(isNaN) ? el : null
+      }).filter(el => !!el)
+    }
+
     convertToCustomFormat(position: L.LatLng): object {
         return {
             [this.options.latKeyName]: position.lat % 90,
@@ -465,31 +478,33 @@ export default abstract class LeafletMap {
 
     // Polygon
 
-    updatePolygons(polyData: FormattedData[], updateBounds = true) {
+  updatePolygons(polyData: FormattedData[], updateBounds = true) {
-        const keys: string[] = [];
+    const keys: string[] = [];
-        polyData.forEach((data: FormattedData) => {
+    polyData.forEach((data: FormattedData) => {
-            if (data && data.hasOwnProperty(this.options.polygonKeyName)) {
+      if (data && data.hasOwnProperty(this.options.polygonKeyName) && data[this.options.polygonKeyName] !== null) {
-                if (typeof (data[this.options.polygonKeyName]) === 'string') {
+        if (typeof (data[this.options.polygonKeyName]) === 'string') {
-                    data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]) as LatLngTuple[];
+          data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]);
-                }
+        }
-                if (this.polygons.get(data.entityName)) {
+        data[this.options.polygonKeyName] = this.convertPositionPolygon(data[this.options.polygonKeyName]);
-                    this.updatePolygon(data, polyData, this.options, updateBounds);
+
-                } else {
+        if (this.polygons.get(data.entityName)) {
-                    this.createPolygon(data, polyData, this.options, updateBounds);
+          this.updatePolygon(data, polyData, this.options, updateBounds);
-                }
+        } else {
-                keys.push(data.entityName);
+          this.createPolygon(data, polyData, this.options, updateBounds);
-            }
+        }
-        });
+        keys.push(data.entityName);
-        const toDelete: string[] = [];
+      }
-        this.polygons.forEach((v, mKey) => {
+    });
-          if (!keys.includes(mKey)) {
+    const toDelete: string[] = [];
-            toDelete.push(mKey);
+    this.polygons.forEach((v, mKey) => {
-          }
+      if (!keys.includes(mKey)) {
-        });
+        toDelete.push(mKey);
-        toDelete.forEach((key) => {
+      }
-          this.removePolygon(key);
+    });
-        });
+    toDelete.forEach((key) => {
-    }
+      this.removePolygon(key);
+    });
+  }
 
     createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) {
         this.ready$.subscribe(() => {

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

@@ -249,8 +249,8 @@ export function parseData(input: DatasourceData[]): FormattedData[] {
         deviceType: null
       };
       entityArray.filter(el => el.data.length).forEach(el => {
-        obj[el?.dataKey?.label] = el?.data[0][1];
+        obj[el?.dataKey?.label] = el?.data[0][0] ? el?.data[0][1] : null;
-        obj[el?.dataKey?.label + '|ts'] = el?.data[0][0];
+        obj[el?.dataKey?.label + '|ts'] = el?.data[0][0] || null;
         if (el?.dataKey?.label === 'type') {
           obj.deviceType = el?.data[0][1];
         }

ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts

@@ -215,6 +215,17 @@ export class ImageMap extends LeafletMap {
             expression.y * this.height);
     }
 
+    convertPositionPolygon(expression: Array<[number, number]>): L.LatLngExpression[] {
+      return expression.map((el) => {
+        if (el.length === 2 && !el.some(isNaN)) {
+          return this.pointToLatLng(
+            el[0] * this.width,
+            el[1] * this.height)
+        }
+        return null;
+      }).filter(el => !!el)
+    }
+
     pointToLatLng(x, y): L.LatLng {
         return L.CRS.Simple.pointToLatLng({ x, y } as L.PointExpression, maxZoom - 1);
     }