label fix & tooltips support

ui-ngx/src/app/core/utils.ts

@@ -518,3 +518,50 @@ export function parseFunction(source: string, params: string[] = []): Function {
   }
   return res;
 }
+
+export function parseTemplate(template, data) {
+  function formatValue(value, pattern) {
+
+  }
+
+  let res = '';
+  try {
+    let variables = '';
+    let expressions = template
+      .match(/\{(.*?)\}/g) // find expressions
+      .map(exp => exp.replace(/{|}/g, '')) // remove brackets 
+      .map(exp => exp.split(':'))
+      .filter(arr => !!arr[1]) //filter expressions without format
+      .reduce((res, current) => {
+        res[current[0]] = current[1];
+        return res;
+      }, {});
+
+    for (let key in data) {
+      if (!key.includes('|'))
+        variables += `let ${key} = '${expressions[key] ? padValue(data[key], +expressions[key]) : data[key]}';`;
+    }
+    template = template.replace(/:\d+}/g, '}');
+    res = safeExecute(parseFunction(variables + 'return' + '`' + template + '`'));
+  }
+  catch (ex) {
+  }
+  return res;
+}
+
+export function padValue(val: any, dec: number): string {
+  let strVal;
+  let n;
+
+  val = parseFloat(val);
+  n = (val < 0);
+  val = Math.abs(val);
+
+  if (dec > 0) {
+    strVal = val.toFixed(dec).toString()
+  } else {
+    strVal = Math.round(val).toString();
+  }
+  strVal = (n ? '-' : '') + strVal;
+  return strVal;
+}

ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts

@@ -20,7 +20,7 @@ import BaseGauge = CanvasGauges.BaseGauge;
 import { FontStyle, FontWeight } from '@home/components/widget/lib/settings.models';
 import * as tinycolor_ from 'tinycolor2';
 import { ColorFormats } from 'tinycolor2';
-import { isDefined, isString, isUndefined } from '@core/utils';
+import { isDefined, isString, isUndefined, padValue } from '@core/utils';
 
 const tinycolor = tinycolor_;
 
@@ -765,24 +765,6 @@ function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, option
   drawText(context, options, 'MinMax', options.maxValue+'', maxX, maxY);
 }
 
-function padValue(val: any, options: CanvasDigitalGaugeOptions): string {
-  const dec = options.valueDec;
-  let strVal;
-  let n;
-
-  val = parseFloat(val);
-  n = (val < 0);
-  val = Math.abs(val);
-
-  if (dec > 0) {
-    strVal = val.toFixed(dec).toString()
-  } else {
-    strVal = Math.round(val).toString();
-  }
-  strVal = (n ? '-' : '') + strVal;
-  return strVal;
-}
-
 function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, value: any) {
   if (options.hideValue) return;
 
@@ -792,7 +774,7 @@ function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options
   const textX = Math.round(baseX + width / 2);
   const textY = valueY;
 
-  let text = options.valueText || padValue(value, options);
+  let text = options.valueText || padValue(value, options.valueDec);
   text += options.symbol;
 
   context.save();

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

@@ -98,26 +98,6 @@ export default abstract class LeafletMap {
         this.map.invalidateSize(true);
     }
 
-    createTooltip(marker, dsIndex, settings, markerArgs) {
-        var popup = L.popup();
-        popup.setContent('');
-        marker.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false });
-        if (settings.displayTooltipAction == 'hover') {
-            marker.off('click');
-            marker.on('mouseover', function () {
-                this.openPopup();
-            });
-            marker.on('mouseout', function () {
-                this.closePopup();
-            });
-        }
-        return {
-            markerArgs: markerArgs,
-            popup: popup,
-            locationSettings: settings,
-            dsIndex: dsIndex
-        }
-    }
 
     onResize() {
 
@@ -169,6 +149,9 @@ export default abstract class LeafletMap {
         if (!location.equals(marker.location)) {
             marker.updateMarkerPosition(location);
         }
+        if (settings.showTooltip) {
+            marker.updateMarkerTooltip(data);
+        }
         marker.setDataSources(data, dataSources);
         marker.updateMarkerIcon(settings);
     }
@@ -207,11 +190,11 @@ export default abstract class LeafletMap {
     updatePolyline(data, dataSources, settings) {
         this.ready$.subscribe(() => {
             this.poly.updatePolyline(settings, data, dataSources);
-            const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds());
+            /*   const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds());
-            if (bounds.isValid()) {
+               if (bounds.isValid()) {
-                this.map.fitBounds(bounds);
+                   this.map.fitBounds(bounds);
-                this.bounds = bounds;
+                   this.bounds = bounds;
-            }
+               }*/
         });
     }
 }

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

@@ -46,10 +46,11 @@ export enum MapProviders {
 }
 
 export interface MarkerSettings extends MapOptions {
+    tooltipPattern?: any;
     icon?: any;
     showLabel?: boolean,
     draggable?: boolean,
-    displayTooltip?: boolean,
+    showTooltip?: boolean,
     color?: string,
     currentImage?: string;
     useMarkerImageFunction?: boolean,

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

@@ -40,7 +40,7 @@ export class MapWidgetController implements MapWidgetInterface {
     schema;
     data;
 
-    constructor(public mapProvider: MapProviders, private drawRoutes, ctx, $element) {
+    constructor(public mapProvider: MapProviders, private drawRoutes, public ctx, $element) {
         if (this.map) {
             this.map.map.remove();
             delete this.map;
@@ -73,6 +73,7 @@ export class MapWidgetController implements MapWidgetInterface {
             colorFunction: parseFunction(settings.colorFunction, functionParams),
             polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams),
             markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']),
+            labelColor: this.ctx.widgetConfig.color,
             tooltipPattern: settings.tooltipPattern ||
                 "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + settings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + settings.lngKeyName + ":7}",
             defaultCenterPosition: settings?.defaultCenterPosition?.split(',') || [0, 0],
@@ -120,7 +121,6 @@ export class MapWidgetController implements MapWidgetInterface {
         //const providerInfo = providerSets[mapProvider];
         let schema = initSchema();
         addToSchema(schema,this.getProvidersSchema());
-
         addGroupInfo(schema, "Map Provider Settings");
         addToSchema(schema, commonMapSettingsSchema);
         addGroupInfo(schema, "Common Map Settings");

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

@@ -31,12 +31,12 @@ export function createTooltip(target, settings, targetArgs?) {
             this.closePopup();
         });
     }
-    return {
+    return popup/*{
         markerArgs: targetArgs,
         popup: popup,
         locationSettings: settings,
         dsIndex: settings.dsIndex
-    };
+    };*/
 }
 
 

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

@@ -22,7 +22,10 @@
   background-position: center center;
 }
 
-.leaflet-div-icon {
+.leaflet-div-icon,
-  background: none;
+.tb-marker-label,
+.tb-marker-label:before {
   border: none;
+  background: none;
+  box-shadow: none;
 }

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

@@ -16,7 +16,7 @@
 
 import L from 'leaflet';
 import { MarkerSettings } from './map-models';
-import { aspectCache, safeExecute, parseFunction } from '@app/core/utils';
+import { aspectCache, safeExecute, parseTemplate } from '@app/core/utils';
 import { createTooltip } from './maps-utils';
 
 export class Marker {
@@ -32,24 +32,21 @@ export class Marker {
     constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data, dataSources, onClickListener?, markerArgs?, onDragendListener?) {
         //this.map = map;
         this.location = location;
-        this.setDataSources(data, dataSources)
+        this.setDataSources(data, dataSources);
         this.leafletMarker = L.marker(location, {
             draggable: settings.draggable
         });
 
         this.createMarkerIcon((iconInfo) => {
             this.leafletMarker.setIcon(iconInfo.icon);
-            if (settings.showLabel) {
+            this.tooltipOffset = [0, -iconInfo.size[1] + 10];
-                this.tooltipOffset = [0, -iconInfo.size[1] + 10];
+            this.updateMarkerLabel(settings);
-               // this.updateMarkerLabel(settings)
+            this.leafletMarker.addTo(map);
-            }
+        });
 
-            this.leafletMarker.addTo(map)
+        if (settings.showTooltip) {
-        }
-        );
-
-        if (settings.displayTooltip) {
             this.tooltip = createTooltip(this.leafletMarker, settings, markerArgs);
+            this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data));
         }
 
         if (onClickListener) {
@@ -67,35 +64,22 @@ export class Marker {
         this.dataSources = dataSources;
     }
 
+    updateMarkerTooltip(data) {
+        this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data));
+    }
+
     updateMarkerPosition(position: L.LatLngExpression) {
         this.leafletMarker.setLatLng(position);
     }
 
     updateMarkerLabel(settings) {
-
-        function getText(template, data) {
-            let res = null;
-            try {
-                let variables = '';
-                for (let key in data) {
-                    if (!key.includes('|'))
-                        variables += `var ${key} = '${data[key]}';`;
-                }
-                res = safeExecute(parseFunction(variables + 'return' + '`' + template + '`'));
-            }
-            catch (ex) {
-            }
-            return res;
-        }
-
-
         this.leafletMarker.unbindTooltip();
+
         if (settings.showLabel) {
             if (settings.useLabelFunction) {
                 settings.labelText = safeExecute(settings.labelFunction, [this.data, this.dataSources, this.data.dsIndex])
             }
-            else settings.labelText = getText(settings.label, this.data);
+            else settings.labelText = parseTemplate(settings.label, this.data);
-
             this.leafletMarker.bindTooltip(`<div style="color: ${settings.labelColor};"><b>${settings.labelText}</b></div>`,
                 { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset });
         }
@@ -110,10 +94,8 @@ export class Marker {
     updateMarkerIcon(settings) {
         this.createMarkerIcon((iconInfo) => {
             this.leafletMarker.setIcon(iconInfo.icon);
-            if (settings.showLabel) {
+            this.tooltipOffset = [0, -iconInfo.size[1] + 10];
-                this.tooltipOffset = [0, -iconInfo.size[1] + 10];
+            this.updateMarkerLabel(settings);
-                this.updateMarkerLabel(settings)
-            }
         });
     }
 
@@ -121,7 +103,7 @@ export class Marker {
 
         if (this.settings.icon) {
             onMarkerIconReady({
-                size: [30,30],
+                size: [30, 30],
                 icon: this.settings.icon,
             });
             return;

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

@@ -34,7 +34,7 @@ export class Polygon {
             opacity: settings.polygonStrokeOpacity
         }).addTo(this.map);
 
-        if (settings.displayTooltip) {
+        if (settings.showTooltip) {
             this.tooltip = createTooltip(this.leafletPoly, location.dsIndex, settings);
         }
         if (onClickListener) {

ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts

@@ -48,6 +48,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
     this.widgetConfig = this.ctx.widgetConfig;
     const settings = {
       normalizationStep: 1000,
+      showLabel: false,
       buttonColor: tinycolor(this.widgetConfig.color).setAlpha(0.54).toRgbString(),
       disabledButtonColor: tinycolor(this.widgetConfig.color).setAlpha(0.3).toRgbString(),
       rotationAngle: 0
@@ -73,7 +74,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
 
   timeUpdated(time) {
     const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]);
-      this.mapWidget.map.updateMarkers(currentPosition);
+    this.mapWidget.map.updateMarkers(currentPosition);
   }
 
   calculateIntervals() {

ui-ngx/src/polyfills.ts

@@ -108,4 +108,3 @@ const tinycolor = tinycolor_;
 (window as any).TbCanvasDigitalGauge = TbCanvasDigitalGauge;
 (window as any).TbMapWidgetV2 = TbMapWidgetV2;
 (window as any).TbTripAnimationWidget = TbTripAnimationWidget;
-console.log("TbTripAnimationWidget", TbTripAnimationWidget)