From 643563ec6a8cdce5df02b1e4adfc8d7a8d9c00ae Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Wed, 11 Nov 2020 13:24:10 +0200 Subject: [PATCH 1/8] bug-fix: trip animation for multiple devices --- .../components/widget/lib/maps/leaflet-map.ts | 38 +++--- .../trip-animation.component.ts | 111 ++++++++++++------ 2 files changed, 99 insertions(+), 50 deletions(-) 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 5d6f39850e..6944e4d23d 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 @@ -599,26 +599,32 @@ export default abstract class LeafletMap { return polygon; } - updatePoints(pointsData: FormattedData[], getTooltip: (point: FormattedData, setTooltip?: boolean) => string) { - if (this.points) { + updatePoints(pointsData: FormattedData[][], getTooltip: (point: FormattedData[], setTooltip?: boolean) => string) { + for(let i = 0; i < pointsData.length; i++) { + let pointsList = pointsData[i]; + if(i === 0) { + if (this.points) { this.map.removeLayer(this.points); + } + this.points = new FeatureGroup(); } - this.points = new FeatureGroup(); - pointsData.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { - const point = L.circleMarker(this.convertPosition(data), { - color: this.options.pointColor, - radius: this.options.pointSize - }); - if (!this.options.pointTooltipOnRightPanel) { - point.on('click', () => getTooltip(data)); - } - else { - createTooltip(point, this.options, data.$datasource, getTooltip(data, false)); - } - this.points.addLayer(point); + pointsList.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { + const point = L.circleMarker(this.convertPosition(data), { + color: this.options.pointColor, + radius: this.options.pointSize + }); + if (!this.options.pointTooltipOnRightPanel) { + point.on('click', () => getTooltip([data])); + } else { + createTooltip(point, this.options, data.$datasource, getTooltip([data], false)); + } + this.points.addLayer(point); }); - this.map.addLayer(this.points); + if(i === 0) { + this.map.addLayer(this.points); + } } + } // Polyline 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 99c399d3f2..b51cda6cbb 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 @@ -47,6 +47,9 @@ import moment from 'moment'; import { isUndefined } from '@core/utils'; import { ResizeObserver } from '@juggle/resize-observer'; +interface dataMap { + [key: string] : FormattedData +} @Component({ // tslint:disable-next-line:component-selector @@ -70,7 +73,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy interpolatedTimeData = []; widgetConfig: WidgetConfig; settings: TripAnimationSettings; - mainTooltip = ''; + mainTooltips = []; visibleTooltip = false; activeTrip: FormattedData; label: string; @@ -115,7 +118,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy this.historicalData = parseArray(this.ctx.data).filter(arr => arr.length); if (this.historicalData.length) { this.calculateIntervals(); - this.timeUpdated(this.currentTime && this.currentTime > this.minTime ? this.currentTime : this.minTime); + this.timeUpdated(this.minTime); } this.mapWidget.map.map?.invalidateSize(); this.cd.detectChanges(); @@ -138,34 +141,41 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy timeUpdated(time: number) { this.currentTime = time; - const currentPosition = this.interpolatedTimeData + let currentPosition = this.interpolatedTimeData .map(dataSource => dataSource[time]) - .filter(ds => ds); - if (isUndefined(currentPosition[0])) { - const timePoints = Object.keys(this.interpolatedTimeData[0]).map(item => parseInt(item, 10)); - for (let i = 1; i < timePoints.length; i++) { - if (timePoints[i - 1] < time && timePoints[i] > time) { - const beforePosition = this.interpolatedTimeData[0][timePoints[i - 1]]; - const afterPosition = this.interpolatedTimeData[0][timePoints[i]]; - const ratio = getRatio(timePoints[i - 1], timePoints[i], time); - currentPosition[0] = { - ...beforePosition, - time, - ...interpolateOnLineSegment(beforePosition, afterPosition, this.settings.latKeyName, this.settings.lngKeyName, ratio) + for(let j = 0; j < this.interpolatedTimeData.length; j++) { + if (isUndefined(currentPosition[j])) { + const timePoints = Object.keys(this.interpolatedTimeData[j]).map(item => parseInt(item, 10)); + for (let i = 1; i < timePoints.length; i++) { + if (timePoints[i - 1] < time && timePoints[i] > time) { + const beforePosition = this.interpolatedTimeData[j][timePoints[i - 1]]; + const afterPosition = this.interpolatedTimeData[j][timePoints[i]]; + const ratio = getRatio(timePoints[i - 1], timePoints[i], time); + currentPosition[j] = { + ...beforePosition, + time, + ...interpolateOnLineSegment(beforePosition, afterPosition, this.settings.latKeyName, this.settings.lngKeyName, ratio) + } + break; } - break; } } } - this.calcLabel(); - this.calcTooltip(currentPosition.find(position => position.entityName === this.activeTrip.entityName)); + for(let j = 0; j < this.interpolatedTimeData.length; j++) { + if (isUndefined(currentPosition[j])) { + currentPosition[j] = this.calculateLastPoints(this.interpolatedTimeData[j], time); + } + } + this.calcLabel(currentPosition); + this.calcTooltip(currentPosition, true); if (this.mapWidget && this.mapWidget.map && this.mapWidget.map.map) { - this.mapWidget.map.updatePolylines(this.interpolatedTimeData.map(ds => _.values(ds)), true, this.activeTrip); + const formattedInterpolatedTimeData = this.interpolatedTimeData.map(ds => _.values(ds)); + this.mapWidget.map.updatePolylines(formattedInterpolatedTimeData, true); if (this.settings.showPolygon) { this.mapWidget.map.updatePolygons(this.interpolatedTimeData); } if (this.settings.showPoints) { - this.mapWidget.map.updatePoints(_.values(_.union(this.interpolatedTimeData)[0]), this.calcTooltip); + this.mapWidget.map.updatePoints(formattedInterpolatedTimeData, this.calcTooltip); } this.mapWidget.map.updateMarkers(currentPosition, true, (trip) => { this.activeTrip = trip; @@ -177,6 +187,23 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy setActiveTrip() { } + private calculateLastPoints(dataSource: dataMap, time: number): FormattedData { + const timeArr = Object.keys(dataSource); + let index = timeArr.findIndex((dtime, index) => { + return Number(dtime) >= time; + }); + + if(index !== -1) { + if(Number(timeArr[index]) !== time && index !== 0) { + index--; + } + } else { + index = timeArr.length - 1; + } + + return dataSource[timeArr[index]]; + } + calculateIntervals() { this.historicalData.forEach((dataSource, index) => { this.minTime = dataSource[0]?.time || Infinity; @@ -194,23 +221,39 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy } } - calcTooltip = (point?: FormattedData): string => { - const data = point ? point : this.activeTrip; - const tooltipPattern: string = this.settings.useTooltipFunction ? - safeExecute(this.settings.tooltipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; - const tooltipText = parseWithTranslation.parseTemplate(tooltipPattern, data, true); - this.mainTooltip = this.sanitizer.sanitize( - SecurityContext.HTML, tooltipText); - this.cd.detectChanges(); - this.activeTrip = point; + calcTooltip = (points?: FormattedData[], isMainTooltip: boolean = false): string => { + let tooltipText; + if(isMainTooltip) { + this.mainTooltips = [] + } + for (let point of points) { + const data = point ? point : this.activeTrip; + const tooltipPattern: string = this.settings.useTooltipFunction ? + safeExecute(this.settings.tooltipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; + tooltipText = parseWithTranslation.parseTemplate(tooltipPattern, data, true); + if(isMainTooltip) { + this.mainTooltips.push(this.sanitizer.sanitize(SecurityContext.HTML, tooltipText)); + } + this.cd.detectChanges(); + this.activeTrip = point; + } return tooltipText; } - calcLabel() { - const data = this.activeTrip; - const labelText: string = this.settings.useLabelFunction ? - safeExecute(this.settings.labelFunction, [data, this.historicalData, data.dsIndex]) : this.settings.label; - this.label = (parseWithTranslation.parseTemplate(labelText, data, true)); + calcLabel(formattedDataArr: FormattedData[]) { + // const data = this.activeTrip; + // const labelText: string = this.settings.useLabelFunction ? + // safeExecute(this.settings.labelFunction, [data, this.historicalData, data.dsIndex]) : this.settings.label; + // this.label = (parseWithTranslation.parseTemplate(labelText, data, true)); + // console.log(this.label, 'this.label'); + this.label = ''; + for (let formattedData of formattedDataArr) { + const data = formattedData; + const labelText: string = this.settings.useLabelFunction ? + safeExecute(this.settings.labelFunction, [data, this.historicalData, data.dsIndex]) : this.settings.label; + const label = (parseWithTranslation.parseTemplate(labelText, data, true)); + this.label = this.label.length ? this.label + ',' + label : label; + } } interpolateArray(originData: FormattedData[]) { From 33b1cee2d018a277d7179e3d6fcd4600f0dd99dc Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Wed, 11 Nov 2020 13:27:18 +0200 Subject: [PATCH 2/8] bug-fix: trip animation for multiple devices --- .../widget/trip-animation/trip-animation.component.ts | 5 ----- 1 file changed, 5 deletions(-) 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 b51cda6cbb..a392481259 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 @@ -241,11 +241,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy } calcLabel(formattedDataArr: FormattedData[]) { - // const data = this.activeTrip; - // const labelText: string = this.settings.useLabelFunction ? - // safeExecute(this.settings.labelFunction, [data, this.historicalData, data.dsIndex]) : this.settings.label; - // this.label = (parseWithTranslation.parseTemplate(labelText, data, true)); - // console.log(this.label, 'this.label'); this.label = ''; for (let formattedData of formattedDataArr) { const data = formattedData; From 2e624994da5da91f42b127f02bb6777432cba433 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Wed, 11 Nov 2020 14:38:24 +0200 Subject: [PATCH 3/8] additional fix to component html --- .../widget/trip-animation/trip-animation.component.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html index 2ea80cf2af..be82969986 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html @@ -28,8 +28,12 @@
+ [ngClass]="{'trip-animation-tooltip-hidden':!visibleTooltip}" + [ngStyle]="{'background-color': settings.tooltipColor, 'opacity': settings.tooltipOpacity, 'color': settings.tooltipFontColor}"> +
+
Date: Thu, 10 Dec 2020 18:08:12 +0200 Subject: [PATCH 4/8] Addition to ServicesMap --- ui-ngx/src/app/modules/home/models/services.map.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui-ngx/src/app/modules/home/models/services.map.ts b/ui-ngx/src/app/modules/home/models/services.map.ts index 8a8fbbce4e..75956db4e4 100644 --- a/ui-ngx/src/app/modules/home/models/services.map.ts +++ b/ui-ngx/src/app/modules/home/models/services.map.ts @@ -32,9 +32,11 @@ import { DashboardService } from '@core/http/dashboard.service'; import { UserService } from '@core/http/user.service'; import { AlarmService } from '@core/http/alarm.service'; import { Router } from '@angular/router'; +import { BroadcastService } from "@core/services/broadcast.service"; export const ServicesMap = new Map>( [ + ['broadcastService', BroadcastService], ['deviceService', DeviceService], ['alarmService', AlarmService], ['assetService', AssetService], From 235946691bfcb96fa0c10b689d6fc69b0c61bce5 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Thu, 10 Dec 2020 18:20:51 +0200 Subject: [PATCH 5/8] Revert "Addition to ServicesMap" This reverts commit 0d9f36ead79ccaad8fa20528c130004bdb4574a7. --- ui-ngx/src/app/modules/home/models/services.map.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui-ngx/src/app/modules/home/models/services.map.ts b/ui-ngx/src/app/modules/home/models/services.map.ts index 75956db4e4..8a8fbbce4e 100644 --- a/ui-ngx/src/app/modules/home/models/services.map.ts +++ b/ui-ngx/src/app/modules/home/models/services.map.ts @@ -32,11 +32,9 @@ import { DashboardService } from '@core/http/dashboard.service'; import { UserService } from '@core/http/user.service'; import { AlarmService } from '@core/http/alarm.service'; import { Router } from '@angular/router'; -import { BroadcastService } from "@core/services/broadcast.service"; export const ServicesMap = new Map>( [ - ['broadcastService', BroadcastService], ['deviceService', DeviceService], ['alarmService', AlarmService], ['assetService', AssetService], From 96ff9ddeddaa37273b2065906ca0373b66d2109f Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Wed, 16 Dec 2020 17:36:08 +0200 Subject: [PATCH 6/8] Fixes after review --- .../components/widget/lib/maps/leaflet-map.ts | 2 +- .../trip-animation/trip-animation.component.html | 2 +- .../trip-animation/trip-animation.component.scss | 5 ++++- .../trip-animation/trip-animation.component.ts | 15 +++++++-------- 4 files changed, 13 insertions(+), 11 deletions(-) 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 b74323a00a..43c954aeed 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 @@ -629,7 +629,7 @@ export default abstract class LeafletMap { } this.points.addLayer(point); }); - if(i === 0) { + if(i === (pointsData.length - 1)) { this.map.addLayer(this.points); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html index be82969986..8d0998f063 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html @@ -32,7 +32,7 @@ [ngStyle]="{'background-color': settings.tooltipColor, 'opacity': settings.tooltipOpacity, 'color': settings.tooltipFontColor}">
+ ngStyle="{'padding': '10px 0'}">
diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.scss b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.scss index cdb28f8a27..b1a49da9fb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.scss @@ -73,6 +73,9 @@ } .trip-animation-tooltip { + display: flex; + overflow: auto; + max-height: 90%; position: absolute; top: 30px; right: 0; @@ -86,4 +89,4 @@ } } } -} \ No newline at end of file +} 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 a392481259..4477d855a2 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 @@ -141,7 +141,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy timeUpdated(time: number) { this.currentTime = time; - let currentPosition = this.interpolatedTimeData + const currentPosition = this.interpolatedTimeData .map(dataSource => dataSource[time]) for(let j = 0; j < this.interpolatedTimeData.length; j++) { if (isUndefined(currentPosition[j])) { @@ -175,7 +175,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy this.mapWidget.map.updatePolygons(this.interpolatedTimeData); } if (this.settings.showPoints) { - this.mapWidget.map.updatePoints(formattedInterpolatedTimeData, this.calcTooltip); + this.mapWidget.map.updatePoints(formattedInterpolatedTimeData.map(ds => _.union(ds)), this.calcTooltip); } this.mapWidget.map.updateMarkers(currentPosition, true, (trip) => { this.activeTrip = trip; @@ -235,20 +235,19 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy this.mainTooltips.push(this.sanitizer.sanitize(SecurityContext.HTML, tooltipText)); } this.cd.detectChanges(); - this.activeTrip = point; } return tooltipText; } calcLabel(formattedDataArr: FormattedData[]) { - this.label = ''; + let labelToSet = ''; for (let formattedData of formattedDataArr) { - const data = formattedData; const labelText: string = this.settings.useLabelFunction ? - safeExecute(this.settings.labelFunction, [data, this.historicalData, data.dsIndex]) : this.settings.label; - const label = (parseWithTranslation.parseTemplate(labelText, data, true)); - this.label = this.label.length ? this.label + ',' + label : label; + safeExecute(this.settings.labelFunction, [formattedData, this.historicalData, formattedData.dsIndex]) : this.settings.label; + const label = (parseWithTranslation.parseTemplate(labelText, formattedData, true)); + labelToSet = labelToSet.length ? labelToSet + ',' + label : label; } + this.label = labelToSet; } interpolateArray(originData: FormattedData[]) { From 65027b9c17f13ebcb9d11d317013bacf28bfdda1 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Wed, 16 Dec 2020 18:42:55 +0200 Subject: [PATCH 7/8] Additions to fixes after review --- .../widget/trip-animation/trip-animation.component.html | 2 +- .../widget/trip-animation/trip-animation.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html index 8d0998f063..6264231b68 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html @@ -32,7 +32,7 @@ [ngStyle]="{'background-color': settings.tooltipColor, 'opacity': settings.tooltipOpacity, 'color': settings.tooltipFontColor}">
+ style="padding: 10px 0">
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 4477d855a2..5872c9023e 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 @@ -234,8 +234,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy if(isMainTooltip) { this.mainTooltips.push(this.sanitizer.sanitize(SecurityContext.HTML, tooltipText)); } - this.cd.detectChanges(); } + this.cd.detectChanges(); return tooltipText; } From fd3208cf827e22c185542abdc0dc7208b9089c5b Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Wed, 23 Dec 2020 17:14:19 +0200 Subject: [PATCH 8/8] 2nd part of additions to fix after review --- .../components/widget/lib/maps/leaflet-map.ts | 26 +++++------ .../trip-animation.component.ts | 43 ++++++++----------- 2 files changed, 31 insertions(+), 38 deletions(-) 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 43c954aeed..5430aa2e69 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 @@ -608,30 +608,30 @@ export default abstract class LeafletMap { return polygon; } - updatePoints(pointsData: FormattedData[][], getTooltip: (point: FormattedData[], setTooltip?: boolean) => string) { - for(let i = 0; i < pointsData.length; i++) { - let pointsList = pointsData[i]; - if(i === 0) { - if (this.points) { - this.map.removeLayer(this.points); - } - this.points = new FeatureGroup(); + updatePoints(pointsData: FormattedData[][], getTooltip: (point: FormattedData) => string) { + if(pointsData.length) { + if (this.points) { + this.map.removeLayer(this.points); } + this.points = new FeatureGroup(); + } + for(let i = 0; i < pointsData.length; i++) { + const pointsList = pointsData[i]; pointsList.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { const point = L.circleMarker(this.convertPosition(data), { color: this.options.pointColor, radius: this.options.pointSize }); if (!this.options.pointTooltipOnRightPanel) { - point.on('click', () => getTooltip([data])); + point.on('click', () => getTooltip(data)); } else { - createTooltip(point, this.options, data.$datasource, getTooltip([data], false)); + createTooltip(point, this.options, data.$datasource, getTooltip(data)); } this.points.addLayer(point); }); - if(i === (pointsData.length - 1)) { - this.map.addLayer(this.points); - } + } + if(pointsData.length) { + this.map.addLayer(this.points); } } 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 5872c9023e..8de3269bb0 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 @@ -166,8 +166,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy currentPosition[j] = this.calculateLastPoints(this.interpolatedTimeData[j], time); } } - this.calcLabel(currentPosition); - this.calcTooltip(currentPosition, true); + this.calcLabel(); + this.calcMainTooltip(currentPosition); if (this.mapWidget && this.mapWidget.map && this.mapWidget.map.map) { const formattedInterpolatedTimeData = this.interpolatedTimeData.map(ds => _.values(ds)); this.mapWidget.map.updatePolylines(formattedInterpolatedTimeData, true); @@ -221,33 +221,26 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy } } - calcTooltip = (points?: FormattedData[], isMainTooltip: boolean = false): string => { - let tooltipText; - if(isMainTooltip) { - this.mainTooltips = [] - } + calcTooltip = (point: FormattedData): string => { + const data = point ? point : this.activeTrip; + const tooltipPattern: string = this.settings.useTooltipFunction ? + safeExecute(this.settings.tooltipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; + return parseWithTranslation.parseTemplate(tooltipPattern, data, true); + } + + private calcMainTooltip(points: FormattedData[]): void { + const tooltips = []; for (let point of points) { - const data = point ? point : this.activeTrip; - const tooltipPattern: string = this.settings.useTooltipFunction ? - safeExecute(this.settings.tooltipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; - tooltipText = parseWithTranslation.parseTemplate(tooltipPattern, data, true); - if(isMainTooltip) { - this.mainTooltips.push(this.sanitizer.sanitize(SecurityContext.HTML, tooltipText)); - } + tooltips.push(this.sanitizer.sanitize(SecurityContext.HTML, this.calcTooltip(point))); } - this.cd.detectChanges(); - return tooltipText; + this.mainTooltips = tooltips; } - calcLabel(formattedDataArr: FormattedData[]) { - let labelToSet = ''; - for (let formattedData of formattedDataArr) { - const labelText: string = this.settings.useLabelFunction ? - safeExecute(this.settings.labelFunction, [formattedData, this.historicalData, formattedData.dsIndex]) : this.settings.label; - const label = (parseWithTranslation.parseTemplate(labelText, formattedData, true)); - labelToSet = labelToSet.length ? labelToSet + ',' + label : label; - } - this.label = labelToSet; + calcLabel() { + const data = this.activeTrip; + const labelText: string = this.settings.useLabelFunction ? + safeExecute(this.settings.labelFunction, [data, this.historicalData, data.dsIndex]) : this.settings.label; + this.label = (parseWithTranslation.parseTemplate(labelText, data, true)); } interpolateArray(originData: FormattedData[]) {