@c8y/ngx-components 1023.57.0 → 1023.59.1

package/fesm2022/c8y-ngx-components-map.mjs

@@ -6,12 +6,12 @@ import * as i3 from '@ngx-translate/core';
 import * as i4 from 'rxjs';
 import { of, combineLatest, defer, firstValueFrom, NEVER, BehaviorSubject, Subject, fromEvent, merge, from } from 'rxjs';
 import { map, first, takeUntil, scan, filter, switchMap, tap, mergeMap, catchError, take, debounceTime, skip } from 'rxjs/operators';
-import { gettext } from '@c8y/ngx-components/gettext';
 import * as i1 from '@c8y/client';
 import { QueriesUtil } from '@c8y/client';
 import { latLng, latLngBounds } from 'leaflet';
 import { get, remove, isUndefined, flatten, every, isNull, isEmpty, cloneDeep } from 'lodash-es';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { gettext } from '@c8y/ngx-components/gettext';
 import { NgClass, AsyncPipe, CommonModule } from '@angular/common';
 import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
 import { FormsModule } from '@angular/forms';
@@ -123,6 +123,42 @@ class MapService {
         }
         return 'text-muted';
     }
+    /**
+     * Returns the status of a group (highest severity among its devices).
+     * @param group The group of devices.
+     * @returns The status string representing the highest severity in the group.
+     */
+    static getGroupStatus(group) {
+        let mostCriticalStatus = 'text-muted';
+        let highestSeverity = 0;
+        for (const device of group.items) {
+            const status = this.getStatus(device);
+            const severity = this.getStatusSeverity(status);
+            if (severity > highestSeverity) {
+                highestSeverity = severity;
+                mostCriticalStatus = status;
+                if (severity === 4) {
+                    return status; // Critical is highest, return immediately
+                }
+            }
+        }
+        return mostCriticalStatus;
+    }
+    /**
+     * Maps status strings to severity levels for comparison.
+     * @param status The status string.
+     * @returns Numeric severity level (higher = more severe).
+     */
+    static getStatusSeverity(status) {
+        const severityMap = {
+            'status critical': 4,
+            'status major': 3,
+            'status minor': 2,
+            'status warning': 1,
+            'text-muted': 0
+        };
+        return severityMap[status] ?? 0;
+    }
     /**
      * @ignore: Only DI.
      */
@@ -555,9 +591,8 @@ class ClusterMap {
     }
     setClusterToBigMarker(map, count, leaflet) {
         const bound = this.rect.getBounds();
-        const text = this.translateService.instant(gettext('Zoom in'));
         const divMarker = leaflet.divIcon({
-            html: `<div class="c8y-map-marker-count" data-count="${count}" title="${text}"></div>`
+            html: `<div><div class="popover top show"><span class="popover-content p-l-0 p-t-0 p-b-0 p-r-4 d-flex a-i-center"><i class="dlt-c8y-icon-marker"></i><span class="text-12 text-nowrap">${count}</span></span><span class="arrow" style="translate: -50% 0"></span></div></div>`
         });
         const labelIcon = leaflet.marker(bound.getCenter(), {
             icon: divMarker
@@ -580,17 +615,19 @@ class ClusterMap {
         }
     }
     trackBy(index, item) {
-        const trackItems = [
-            item.id,
-            item.c8y_Position.lat,
-            item.c8y_Position.lng,
-            MapService.getStatus(item)
-        ];
+        const trackItems = item.items.map(i => [
+            i.id,
+            i.c8y_Position.lat,
+            i.c8y_Position.lng,
+            MapService.getStatus(i)
+        ]);
         return trackItems.join('');
     }
-    removeMarkerFromMap(device) {
-        const markers = this.markers.filter((marker) => marker.asset?.id === device.id);
-        markers.forEach(marker => marker.remove());
+    removeMarkerFromMap(group) {
+        group.items.forEach(device => {
+            const markers = this.markers.filter((marker) => marker.asset?.id === device.id);
+            markers.forEach(marker => marker.remove());
+        });
     }
 }
 
@@ -649,6 +686,7 @@ class MapComponent {
         this.unsubscribeTrigger$ = new Subject();
         this.destroy$ = new Subject();
         this.markerTitle = gettext('Marker at position {{lat}}, {{lng}}');
+        this.markerGroupTitle = gettext('Group of {{count}} assets');
         this.initOutputs();
     }
     /**
@@ -712,7 +750,7 @@ class MapComponent {
         }
     }
     /**
-     * Finds a marker on the map by asset, event, or ID.
+     * Finds a marker on the map by asset, event, or ID. (only if it is a C8yMarker)
      * @param moOrId Asset, event, or string ID to search for.
      * @returns The found marker or undefined.
      */
@@ -734,9 +772,22 @@ class MapComponent {
      * @returns The created marker.
      */
     getAssetMarker(asset) {
-        if (!asset) {
+        if (!asset || asset.items.length === 0) {
             return;
         }
+        if (asset.items.length === 1) {
+            return this.getAssetMarkerSingle(asset.items[0]);
+        }
+        else {
+            return this.getGroupedMarker(asset);
+        }
+    }
+    /**
+     * Creates and returns a marker for a single asset, including icon and popup.
+     * @param asset The asset to create a marker for.
+     * @returns The created marker.
+     */
+    getAssetMarkerSingle(asset) {
         const icon = this.getAssetIcon(asset);
         const { lat, lng } = asset.c8y_Position;
         const leafletMarker = this.leaflet.marker(this.geo.getLatLong(asset), {
@@ -747,6 +798,113 @@ class MapComponent {
         this.bindPopup(marker, asset);
         return marker;
     }
+    /**
+     * Returns a marker with popup for a group of assets (clustered).
+     * @param group The asset group.
+     * @returns A marker for a group of assets (clustered).
+     */
+    getGroupedMarker(group) {
+        const latLngs = group.items.map(item => this.leaflet.latLng(item.c8y_Position.lat, item.c8y_Position.lng));
+        const bounds = this.leaflet.latLngBounds(latLngs);
+        const center = bounds.getCenter();
+        const icon = this.getGroupAssetIcon(group);
+        const leafletMarker = this.leaflet.marker(center, {
+            icon,
+            title: this.translateService.instant(this.markerGroupTitle, { count: group.items.length })
+        });
+        const asset = group.items[0];
+        const marker = getC8yMarker(leafletMarker, asset);
+        marker.on('click', () => {
+            this.map.fitBounds(bounds, { padding: [50, 50] });
+            // Check if all markers are at the same position (within a small threshold)
+            const areAllSamePosition = latLngs.every(ll => Math.abs(ll.lat - center.lat) < 0.0001 && Math.abs(ll.lng - center.lng) < 0.0001);
+            // If all markers are at the same position and zoom is low, create spider layout
+            if (areAllSamePosition && this.map && this.map.getZoom() >= 10) {
+                this.createSpiderMarkers(group, center, marker);
+            }
+        });
+        return marker;
+    }
+    /**
+     * Creates spider markers for a group of assets at the same position.
+     * @param group The group of assets to create spider markers for.
+     * @param center The center position of the group.
+     * @param originalMarker The marker which was replaced by spider markers.
+     */
+    createSpiderMarkers(group, center, originalMarker) {
+        const markerGroup = this.leaflet.featureGroup();
+        const items = group.items;
+        const count = items.length;
+        const radius = 0.0002; // Adjust based on your needs
+        const angleStep = (2 * Math.PI) / count;
+        originalMarker.setOpacity(0); // Hide the original marker
+        items.forEach((item, index) => {
+            const angle = angleStep * index;
+            const offsetLat = center.lat + radius * Math.cos(angle);
+            const offsetLng = center.lng + radius * Math.sin(angle);
+            const markerPos = this.leaflet.latLng(offsetLat, offsetLng);
+            // Create spider leg (line from center to marker)
+            const polyline = this.leaflet.polyline([center, markerPos], {
+                color: '#666',
+                weight: 2,
+                opacity: 1
+            });
+            polyline.addTo(markerGroup);
+            // Create individual marker
+            const icon = this.getAssetIcon(item, [6, -12]);
+            const leafletMarker = this.leaflet.marker(markerPos, {
+                icon,
+                title: this.translateService.instant(this.markerTitle, {
+                    lat: item.c8y_Position.lat,
+                    lng: item.c8y_Position.lng
+                })
+            });
+            const marker = getC8yMarker(leafletMarker, item);
+            this.bindPopup(marker, item, new this.leaflet.Point(-2, -20));
+            marker.addTo(markerGroup);
+        });
+        // Create red center dot
+        const centerIcon = this.leaflet.divIcon({
+            html: '<div style="background-color: red; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white;"></div>',
+            className: 'spider-center-marker',
+            iconSize: [12, 12],
+            iconAnchor: [6, 6]
+        });
+        const centerMarker = this.leaflet.marker(center, {
+            icon: centerIcon,
+            title: this.translateService.instant(gettext('Click to collapse'))
+        });
+        const restoreOriginalMarker = () => {
+            this.map.off('zoomstart', restoreOriginalMarker);
+            this.map.off('movestart', restoreOriginalMarker);
+            markerGroup.remove();
+            originalMarker.setOpacity(1);
+        };
+        // Add click handler to collapse spider and remove it
+        // if user navigates away
+        centerMarker.on('click', restoreOriginalMarker);
+        this.map.on('zoomstart', restoreOriginalMarker);
+        this.map.on('movestart', restoreOriginalMarker);
+        centerMarker.addTo(markerGroup);
+        markerGroup.addTo(this.map);
+    }
+    /**
+     * The icon for a group of assets (clustered).
+     * It shows the count and is colored based on the highest severity status in the group.
+     * @param group The group of assets.
+     * @returns The marker icon for the group.
+     */
+    getGroupAssetIcon(group) {
+        const status = MapService.getGroupStatus(group);
+        const color = this.config.color ? `style='color: ${this.config.color};'` : '';
+        const moreThan99 = group.items.length > 99 ? 'more-than-99' : '';
+        const icon = this.leaflet.divIcon({
+            html: `<div><div class="popover top show"><span class="popover-content p-l-0 p-t-0 p-b-0 p-r-4 d-flex a-i-center"><i class="dlt-c8y-icon-marker  ${status}" ${color}></i><span class="text-12 text-nowrap ${moreThan99}">${group.items.length > 99 ? '99+' : group.items.length}</span></span><span class="arrow" style="translate: -50% 0"></span></div></div>`,
+            className: 'c8y-map-marker-icon',
+            iconAnchor: [21, 40]
+        });
+        return icon;
+    }
     /**
      * Creates and returns a marker for a tracking event, including icon and popup.
      * @param event The event to create a marker for.
@@ -769,9 +927,10 @@ class MapComponent {
     /**
      * Returns a Leaflet icon for the given asset, using config or asset icon and color.
      * @param asset The asset to get the icon for.
+     * @param anchor The icon anchor point.
      * @returns The Leaflet icon.
      */
-    getAssetIcon(asset) {
+    getAssetIcon(asset, anchor = [8, 8]) {
         const assetTypeIcon = this.config.icon || asset.icon?.name;
         const status = MapService.getStatus(asset);
         const color = this.config.color ? `style='color: ${this.config.color};'` : '';
@@ -779,7 +938,7 @@ class MapComponent {
             html: `<div class="dlt-c8y-icon-marker icon-3x ${status}" ${color}><i class="dlt-c8y-icon-${assetTypeIcon || 'data-transfer'}" /></div>`,
             className: 'c8y-map-marker-icon',
             // iconAnchor is used to set the marker accurately on click
-            iconAnchor: [8, 8]
+            iconAnchor: anchor
         });
         return icon;
     }
@@ -825,7 +984,7 @@ class MapComponent {
             assets = Array.isArray(this.assets) ? this.assets : [this.assets];
         }
         assets.forEach(asset => {
-            const marker = this.getAssetMarker(asset);
+            const marker = this.getAssetMarkerSingle(asset);
             this.addMarkerToMap(marker);
         });
         if (!this.config.center) {
@@ -1064,7 +1223,7 @@ class MapComponent {
             this.map.fitBounds(bounds, this.config.fitBoundsOptions);
         }
     }
-    bindPopup(marker, context) {
+    bindPopup(marker, context, offset = new this.leaflet.Point(-3, -40)) {
         if (this.popup) {
             marker.on('click', () => {
                 this.popup.viewContainer.clear();
@@ -1075,7 +1234,7 @@ class MapComponent {
                 marker
                     .unbindPopup()
                     .bindPopup(this.popup.elementRef.nativeElement.previousSibling, {
-                    offset: [-3, -40],
+                    offset,
                     maxWidth: 140,
                     autoPan: true,
                     closeButton: false
@@ -1275,7 +1434,7 @@ class ClusterMapComponent extends MapComponent {
             }
             clusters.forEach(cluster => cluster.render(this.map));
             if (clusters.length === 1 && clusters[0].positions?.length === 1 && this.config.follow) {
-                const position = clusters[0].positions[0];
+                const position = clusters[0].positions[0].items[0];
                 const newPos = { lat: position.c8y_Position.lat, lng: position.c8y_Position.lng };
                 if (this.skipNextFollowMove) {
                     this.skipNextFollowMove = false;
@@ -1324,7 +1483,7 @@ class ClusterMapComponent extends MapComponent {
             // Try to use current position from clusters if available (prevents jumping to old position)
             const hasClusterWithPosition = this.clusters?.length === 1 && this.clusters[0].positions?.length === 1;
             if (hasClusterWithPosition) {
-                this.assets = this.clusters[0].positions[0];
+                this.assets = this.clusters[0].positions[0].items[0];
             }
             else if (this.rootNode?.c8y_Position && this.rootNode?.c8y_IsDevice) {
                 this.assets = this.rootNode;
@@ -1436,7 +1595,7 @@ class ClusterMapComponent extends MapComponent {
         // Use current cluster position if available
         const hasClusterWithPosition = this.clusters?.length === 1 && this.clusters[0].positions?.length === 1;
         if (hasClusterWithPosition) {
-            this.assets = this.clusters[0].positions[0];
+            this.assets = this.clusters[0].positions[0].items[0];
         }
         else if (this.rootNode?.c8y_Position && this.rootNode?.c8y_IsDevice) {
             this.assets = this.rootNode;
@@ -1452,7 +1611,7 @@ class ClusterMapComponent extends MapComponent {
         // Extract and preserve position from cluster for later use
         const hasClusterWithPosition = this.clusters?.length === 1 && this.clusters[0].positions?.length === 1;
         if (hasClusterWithPosition) {
-            const position = this.clusters[0].positions[0];
+            const position = this.clusters[0].positions[0].items[0];
             this.assets = position; // Store for later use when resuming to realtime
         }
     }
@@ -1568,9 +1727,67 @@ class ClusterMapComponent extends MapComponent {
             return cluster;
         }
         cluster.removeClusterToBigMarker();
-        cluster.positions = await this.mapService.getPositionMOsFromBound(cluster.rect.getBounds(), this.rootNode);
+        const positionMOs = await this.mapService.getPositionMOsFromBound(cluster.rect.getBounds(), this.rootNode);
+        const NEARBY_GROUPING_THRESHOLD_PX = 25;
+        const groupedPositions = this.groupNearbyAssets(positionMOs, NEARBY_GROUPING_THRESHOLD_PX);
+        cluster.positions = groupedPositions;
         return cluster;
     }
+    /**
+     * Groups nearby assets based on pixel distance threshold.
+     * @param assets Array of assets to group.
+     * @param thresholdPixels Distance threshold in pixels.
+     * @returns Array of asset groups.
+     */
+    groupNearbyAssets(assets, thresholdPixels) {
+        // Get current zoom level and adjust threshold accordingly
+        const currentZoom = this.map.getZoom();
+        const zoomThreshold = 15; // Zoom level above which grouping is disabled
+        const zoomFactor = 1 - currentZoom / zoomThreshold;
+        const NEARBY_GROUPING_MIN_ZOOM_FACTOR = 0.3;
+        const adjustedThreshold = thresholdPixels * Math.max(NEARBY_GROUPING_MIN_ZOOM_FACTOR, zoomFactor);
+        // Sort assets by latitude first, then longitude for efficient proximity checks
+        const sortedAssets = [...assets].sort((a, b) => {
+            const latDiff = a.c8y_Position.lat - b.c8y_Position.lat;
+            return latDiff !== 0 ? latDiff : a.c8y_Position.lng - b.c8y_Position.lng;
+        });
+        const groups = [];
+        const processed = new Set();
+        sortedAssets.forEach(asset => {
+            if (processed.has(asset.id)) {
+                return;
+            }
+            const group = [asset];
+            processed.add(asset.id);
+            sortedAssets.forEach(otherAsset => {
+                if (processed.has(otherAsset.id)) {
+                    return;
+                }
+                const isClose = group.some(groupAsset => this.areMarkersClose(groupAsset, otherAsset, adjustedThreshold));
+                if (isClose) {
+                    group.push(otherAsset);
+                    processed.add(otherAsset.id);
+                }
+            });
+            groups.push({ items: group });
+        });
+        return groups;
+    }
+    /**
+     * Checks if two assets are within the specified pixel distance.
+     * @param asset1 First asset.
+     * @param asset2 Second asset.
+     * @param thresholdPixels Distance threshold in pixels.
+     * @returns True if assets are close, false otherwise.
+     */
+    areMarkersClose(asset1, asset2, thresholdPixels) {
+        const latLng1 = this.leaflet.latLng(asset1.c8y_Position.lat, asset1.c8y_Position.lng);
+        const latLng2 = this.leaflet.latLng(asset2.c8y_Position.lat, asset2.c8y_Position.lng);
+        const point1 = this.map.latLngToContainerPoint(latLng1);
+        const point2 = this.map.latLngToContainerPoint(latLng2);
+        const distance = point1.distanceTo(point2);
+        return distance <= thresholdPixels;
+    }
     createOrUpdateCluster(rects) {
         const isNew = rects.length !== this.clusters.length;
         if (isNew) {