Add entity description to datasource. Fix map markers color.

ui-ngx/src/app/core/api/entity-data-subscription.ts

@@ -193,6 +193,12 @@ export class EntityDataSubscription {
           key: 'label'
         });
       }
+      if (!entityFields.find(key => key.key === 'additionalInfo')) {
+        entityFields.push({
+          type: EntityKeyType.ENTITY_FIELD,
+          key: 'additionalInfo'
+        });
+      }
 
       this.attrFields = this.entityDataSubscriptionOptions.dataKeys.filter(dataKey => dataKey.type === DataKeyType.attribute).map(
         dataKey => ({ type: EntityKeyType.ATTRIBUTE, key: dataKey.name })

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

@@ -242,6 +242,7 @@ export interface SubscriptionEntityInfo {
   entityId: EntityId;
   entityName: string;
   entityLabel: string;
+  entityDescription: string;
 }
 
 export interface IWidgetSubscription {

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

@@ -455,6 +455,7 @@ export class WidgetSubscription implements IWidgetSubscription {
     let entityId: EntityId;
     let entityName: string;
     let entityLabel: string;
+    let entityDescription: string;
     if (this.type === widgetType.rpc) {
       if (this.targetDeviceId) {
         entityId = {
@@ -474,6 +475,18 @@ export class WidgetSubscription implements IWidgetSubscription {
           if (labelValue) {
             entityLabel = labelValue.value;
           }
+          const additionalInfoValue = entityFields.additionalInfo;
+          if (additionalInfoValue) {
+            const additionalInfo = additionalInfoValue.value;
+            if (additionalInfo && additionalInfo.length) {
+              try {
+                const additionalInfoJson = JSON.parse(additionalInfo);
+                if (additionalInfoJson && additionalInfoJson.description) {
+                  entityDescription = additionalInfoJson.description;
+                }
+              } catch (e) {}
+            }
+          }
         }
       }
     } else {
@@ -485,6 +498,7 @@ export class WidgetSubscription implements IWidgetSubscription {
           };
           entityName = datasource.entityName;
           entityLabel = datasource.entityLabel;
+          entityDescription = datasource.entityDescription;
           break;
         }
       }
@@ -493,7 +507,8 @@ export class WidgetSubscription implements IWidgetSubscription {
       return {
         entityId,
         entityName,
-        entityLabel
+        entityLabel,
+        entityDescription
       };
     } else {
       return null;

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

@@ -23,11 +23,12 @@ import L, {
   MarkerClusterGroup,
   MarkerClusterGroupOptions
 } from 'leaflet';
-
+import tinycolor from 'tinycolor2';
 import 'leaflet-providers';
 import 'leaflet.markercluster/dist/leaflet.markercluster';
 
 import {
+  defaultSettings,
   FormattedData,
   MapSettings,
   MarkerSettings,
@@ -76,6 +77,7 @@ export default abstract class LeafletMap {
     }
 
     public initSettings(options: MapSettings) {
+        this.options.tinyColor = tinycolor(this.options.color || defaultSettings.color);
         const { initCallback,
             disableScrollZooming,
             useClusterMarkers,

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

@@ -24,6 +24,7 @@ import {
     googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema
 } from './schemes';
 import { EntityType } from '@shared/models/entity-type.models';
+import tinycolor from 'tinycolor2';
 
 export const DEFAULT_MAP_PAGE_SIZE = 16384;
 
@@ -93,6 +94,7 @@ export type MarkerSettings = {
     useTooltipFunction: boolean;
     useColorFunction: boolean;
     color?: string;
+    tinyColor?: tinycolor.Instance;
     autocloseTooltip: boolean;
     showTooltipAction: string;
     useClusterMarkers: boolean;

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

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import L, { LeafletMouseEvent } from 'leaflet';
+import L, { Icon, LeafletMouseEvent } from 'leaflet';
 import { FormattedData, MarkerSettings } from './map-models';
 import {
   aspectCache,
@@ -26,7 +26,7 @@ import {
   safeExecute
 } from './maps-utils';
 import tinycolor from 'tinycolor2';
-import { isDefined } from '@core/utils';
+import { isDefined, isDefinedAndNotNull } from '@core/utils';
 import LeafletMap from './leaflet-map';
 
 export class Marker {
@@ -138,8 +138,14 @@ export class Marker {
         const currentImage = this.settings.useMarkerImageFunction ?
             safeExecute(this.settings.markerImageFunction,
                 [this.data, this.settings.markerImages, this.dataSources, this.data.dsIndex]) : this.settings.currentImage;
-        const currentColor = tinycolor(this.settings.useColorFunction ? safeExecute(this.settings.colorFunction,
+        let currentColor = this.settings.tinyColor;
-            [this.data, this.dataSources, this.data.dsIndex]) : this.settings.color).toHex();
+        if (this.settings.useColorFunction) {
+          const functionColor = safeExecute(this.settings.colorFunction,
+            [this.data, this.dataSources, this.data.dsIndex]);
+          if (isDefinedAndNotNull(functionColor)) {
+            currentColor = tinycolor(functionColor);
+          }
+        }
         if (currentImage && currentImage.url) {
             aspectCache(currentImage.url).subscribe(
                 (aspect) => {
@@ -174,23 +180,32 @@ export class Marker {
         }
     }
 
-    createDefaultMarkerIcon(color, onMarkerIconReady) {
+    createDefaultMarkerIcon(color: tinycolor.Instance, onMarkerIconReady) {
-      if (!this.map.defaultMarkerIconInfo) {
+      let icon: { size: number[], icon: Icon };
-        const icon = L.icon({
+      if (!tinycolor.equals(color, this.settings.tinyColor)) {
-          iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color,
+        icon = this.createColoredMarkerIcon(color);
-          iconSize: [21, 34],
+      } else {
-          iconAnchor: [21 * this.markerOffset[0], 34 * this.markerOffset[1]],
+        if (!this.map.defaultMarkerIconInfo) {
-          popupAnchor: [0, -34],
+          this.map.defaultMarkerIconInfo = this.createColoredMarkerIcon(color);
-          shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
+        }
-          shadowSize: [40, 37],
+        icon = this.map.defaultMarkerIconInfo;
-          shadowAnchor: [12, 35]
-        });
-        this.map.defaultMarkerIconInfo = {
-          size: [21, 34],
-          icon
-        };
       }
-      onMarkerIconReady(this.map.defaultMarkerIconInfo);
+      onMarkerIconReady(icon);
+    }
+
+    createColoredMarkerIcon(color: tinycolor.Instance): { size: number[], icon: Icon } {
+      return {
+            size: [21, 34],
+            icon: L.icon({
+              iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color.toHex(),
+              iconSize: [21, 34],
+              iconAnchor: [21 * this.markerOffset[0], 34 * this.markerOffset[1]],
+              popupAnchor: [0, -34],
+              shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
+              shadowSize: [40, 37],
+              shadowAnchor: [12, 35]
+        })
+      };
     }
 
     removeMarker() {

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

@@ -300,7 +300,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
             id: datasource.entityId
           },
           entityName: datasource.entityName,
-          entityLabel: datasource.entityLabel
+          entityLabel: datasource.entityLabel,
+          entityDescription: datasource.entityDescription
         };
       }
     }

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

@@ -589,6 +589,10 @@ export const entityInfoFields: EntityKey[] = [
   {
     type: EntityKeyType.ENTITY_FIELD,
     key: 'label'
+  },
+  {
+    type: EntityKeyType.ENTITY_FIELD,
+    key: 'additionalInfo'
   }
 ];
 
@@ -609,7 +613,18 @@ export function entityDataToEntityInfo(entityData: EntityData): EntityInfo {
     } else {
       entityInfo.label = '';
     }
-    entityInfo.entityDescription = 'TODO: Not implemented';
+    entityInfo.entityDescription = '';
+    if (fields.additionalInfo) {
+      const additionalInfo = fields.additionalInfo.value;
+      if (additionalInfo && additionalInfo.length) {
+        try {
+          const additionalInfoJson = JSON.parse(additionalInfo);
+          if (additionalInfoJson && additionalInfoJson.description) {
+            entityInfo.entityDescription = additionalInfoJson.description;
+          }
+        } catch (e) {}
+      }
+    }
   }
   return entityInfo;
 }