diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts
index e2320d593b..d0d81fca8a 100644
--- a/ui-ngx/src/app/core/utils.ts
+++ b/ui-ngx/src/app/core/utils.ts
@@ -517,4 +517,51 @@ 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;
}
\ No newline at end of file
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
index d95056a3a3..edecba5434 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
+++ b/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();
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
index 632a3fd7da..3177fbd1de 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
+++ b/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());
- if (bounds.isValid()) {
- this.map.fitBounds(bounds);
- this.bounds = bounds;
- }
+ /* const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds());
+ if (bounds.isValid()) {
+ this.map.fitBounds(bounds);
+ this.bounds = bounds;
+ }*/
});
}
}
\ No newline at end of file
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
index 6f244dcdaf..f9f821a07b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
+++ b/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,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
index f77496e089..d106724727 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
+++ b/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 ||
"${entityName}
Latitude: ${" + settings.latKeyName + ":7}
Longitude: ${" + 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");
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
index e43ad2cada..be040fa20f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
+++ b/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
- };
+ };*/
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.scss b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.scss
index 76cabbaeba..a017edeb9f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.scss
@@ -22,7 +22,10 @@
background-position: center center;
}
-.leaflet-div-icon {
- background: none;
+.leaflet-div-icon,
+.tb-marker-label,
+.tb-marker-label:before {
border: none;
+ background: none;
+ box-shadow: none;
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
index cbb990bf19..f8748a246f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
+++ b/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.updateMarkerLabel(settings)
- }
+ this.tooltipOffset = [0, -iconInfo.size[1] + 10];
+ this.updateMarkerLabel(settings);
+ this.leafletMarker.addTo(map);
+ });
- this.leafletMarker.addTo(map)
- }
- );
-
- if (settings.displayTooltip) {
+ if (settings.showTooltip) {
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(`${settings.labelText}
`,
{ 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.updateMarkerLabel(settings)
- }
+ this.tooltipOffset = [0, -iconInfo.size[1] + 10];
+ 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;
@@ -130,8 +112,8 @@ export class Marker {
let currentImage = this.settings.useMarkerImageFunction ?
safeExecute(this.settings.markerImageFunction,
[this.data, this.settings.markerImages, this.dataSources, this.data.dsIndex]) : this.settings.currentImage;
-
-
+
+
if (currentImage && currentImage.url) {
aspectCache(currentImage.url).subscribe(
(aspect) => {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
index 0d0a140a48..e742d45555 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
+++ b/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) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts
index 29f53f207e..69882fa35f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts
@@ -48,8 +48,9 @@ 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(),
+ disabledButtonColor: tinycolor(this.widgetConfig.color).setAlpha(0.3).toRgbString(),
rotationAngle: 0
}
this.settings = { ...settings, ...this.ctx.settings };
@@ -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() {
diff --git a/ui-ngx/src/polyfills.ts b/ui-ngx/src/polyfills.ts
index dd78865e00..8f299cd1aa 100644
--- a/ui-ngx/src/polyfills.ts
+++ b/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)