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 = [] - } - 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(); - return tooltipText; + 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); } - 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; + private calcMainTooltip(points: FormattedData[]): void { + const tooltips = []; + for (let point of points) { + tooltips.push(this.sanitizer.sanitize(SecurityContext.HTML, this.calcTooltip(point))); } - this.label = labelToSet; + this.mainTooltips = tooltips; + } + + 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[]) {