From 69f41be5768098ea0ba035cd0e4327dba94569e3 Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Wed, 20 May 2020 13:22:08 +0300 Subject: [PATCH 1/8] interpolation fix --- .../components/widget/lib/maps/leaflet-map.ts | 3 +++ .../trip-animation/trip-animation.component.ts | 15 ++++++--------- 2 files changed, 9 insertions(+), 9 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 91576ec22b..9e7934529d 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 @@ -389,6 +389,9 @@ export default abstract class LeafletMap { const poly = this.polylines.get(name); if (poly) { this.map.removeLayer(poly.leafletPoly); + if (poly.polylineDecorator) { + this.map.removeLayer(poly.polylineDecorator); + } this.polylines.delete(name); } } 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 bc22326593..1987889271 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 @@ -56,7 +56,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { historicalData: FormattedData[][]; normalizationStep: number; interpolatedTimeData = []; - intervals = []; widgetConfig: WidgetConfig; settings; mainTooltip = ''; @@ -104,9 +103,10 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { if (subscription) subscription.callbacks.onDataUpdated = () => { this.historicalData = parseArray(this.ctx.data).filter(arr => arr.length); if (this.historicalData.length) { - this.activeTrip = this.historicalData[0][0]; + if (!this.activeTrip) + this.activeTrip = this.historicalData[0][0]; this.calculateIntervals(); - this.timeUpdated(this.minTime); + this.timeUpdated(this.currentTime ? this.currentTime : this.minTime); } this.mapWidget.map.map?.invalidateSize(); this.cd.detectChanges(); @@ -122,12 +122,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { this.currentTime = time; const currentPosition = this.interpolatedTimeData .map(dataSource => dataSource[time]) - .filter(ds => ds) - .map(ds => { - ds.minTime = this.minTimeFormat; - ds.maxTime = this.maxTimeFormat; - return ds; - }); + .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++) { @@ -138,6 +133,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { currentPosition[0] = { ...beforePosition, time, + minTime: this.minTimeFormat, + maxTime: this.maxTimeFormat, ...interpolateOnLineSegment(beforePosition, afterPosition, this.settings.latKeyName, this.settings.lngKeyName, ratio) } break; From 20f316cec002fadb2912a908f7af6bf015f17aab Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Thu, 21 May 2020 14:23:23 +0300 Subject: [PATCH 2/8] fix map type caching --- .../components/widget/lib/maps/map-widget2.ts | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) 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 9e978b39a1..f27a094979 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 @@ -17,12 +17,12 @@ import { defaultSettings, hereProviders, MapProviders, providerSets, UnitedMapSettings } from './map-models'; import LeafletMap from './leaflet-map'; import { - commonMapSettingsSchema, - mapPolygonSchema, - mapProviderSchema, - markerClusteringSettingsSchema, - markerClusteringSettingsSchemaLeaflet, - routeMapSettingsSchema + commonMapSettingsSchema, + mapPolygonSchema, + mapProviderSchema, + markerClusteringSettingsSchema, + markerClusteringSettingsSchemaLeaflet, + routeMapSettingsSchema } from './schemes'; import { MapWidgetInterface, MapWidgetStaticInterface } from './map-widget.interface'; import { addCondition, addGroupInfo, addToSchema, initSchema, mergeSchemes } from '@core/schema-utils'; @@ -30,17 +30,18 @@ import { of, Subject } from 'rxjs'; import { WidgetContext } from '@app/modules/home/models/widget-component.models'; import { getDefCenterPosition, parseArray, parseData, parseFunction, parseWithTranslation } from './maps-utils'; import { - Datasource, - DatasourceType, - JsonSettingsSchema, - WidgetActionDescriptor, - widgetType + Datasource, + DatasourceType, + JsonSettingsSchema, + WidgetActionDescriptor, + widgetType } from '@shared/models/widget.models'; import { EntityId } from '@shared/models/id/entity-id'; import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models'; import { AttributeService } from '@core/http/attribute.service'; import { TranslateService } from '@ngx-translate/core'; import { UtilsService } from '@core/services/utils.service'; +import _ from 'lodash'; // @dynamic export class MapWidgetController implements MapWidgetInterface { @@ -90,9 +91,9 @@ export class MapWidgetController implements MapWidgetInterface { } public static getProvidersSchema(mapProvider: MapProviders, ignoreImageMap = false) { + const providerSchema = _.cloneDeep(mapProviderSchema); if (mapProvider) - mapProviderSchema.schema.properties.provider.default = mapProvider; - const providerSchema = mapProviderSchema; + providerSchema.schema.properties.provider.default = mapProvider; if (ignoreImageMap) { providerSchema.form[0].items = providerSchema.form[0]?.items.filter(item => item.value !== 'image-map'); } From 59d2fdc79eb6ecc557f8bcd97f92fe1be3224ae4 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 21 May 2020 15:02:58 +0300 Subject: [PATCH 3/8] Improvements calculate data --- .../trip-animation.component.ts | 24 +++++++------------ 1 file changed, 8 insertions(+), 16 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 1987889271..24f2541caf 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 @@ -133,8 +133,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { currentPosition[0] = { ...beforePosition, time, - minTime: this.minTimeFormat, - maxTime: this.maxTimeFormat, ...interpolateOnLineSegment(beforePosition, afterPosition, this.settings.latKeyName, this.settings.lngKeyName, ratio) } break; @@ -164,10 +162,10 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { calculateIntervals() { this.historicalData.forEach((dataSource, index) => { this.minTime = dataSource[0]?.time || Infinity; - this.minTimeFormat = this.minTime !== Infinity ? moment(this.minTime).format('YYYY-MM-DD HH:mm:ss') : ''; + const minTimeFormat = this.minTime !== Infinity ? moment(this.minTime).format('YYYY-MM-DD HH:mm:ss') : ''; this.maxTime = dataSource[dataSource.length - 1]?.time || -Infinity; - this.maxTimeFormat = this.maxTime !== -Infinity ? moment(this.maxTime).format('YYYY-MM-DD HH:mm:ss') : ''; - this.interpolatedTimeData[index] = this.interpolateArray(dataSource); + const maxTimeFormat = this.maxTime !== -Infinity ? moment(this.maxTime).format('YYYY-MM-DD HH:mm:ss') : ''; + this.interpolatedTimeData[index] = this.interpolateArray(dataSource, minTimeFormat, maxTimeFormat); }); if (this.useAnchors) { const anchorDate = Object.entries(_.union(this.interpolatedTimeData)[0]); @@ -181,11 +179,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { if (!point) { point = this.activeTrip; } - const data = { - ...this.activeTrip, - maxTime: this.maxTimeFormat, - minTime: this.minTimeFormat - } + const data = this.activeTrip; const tooltipPattern: string = this.settings.useTooltipFunction ? safeExecute(this.settings.tooolTipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; const tooltipText = parseWithTranslation.parseTemplate(tooltipPattern, data, true); @@ -199,17 +193,13 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { } calcLabel() { - const data = { - ...this.activeTrip, - maxTime: this.maxTimeFormat, - minTime: this.minTimeFormat - } + 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[]) { + interpolateArray(originData: FormattedData[], minTimeFormat?: string, maxTimeFormat?: string) { const result = {}; const latKeyName = this.settings.latKeyName; const lngKeyName = this.settings.lngKeyName; @@ -218,6 +208,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { const normalizeTime = this.minTime + Math.ceil((currentTime - this.minTime) / this.normalizationStep) * this.normalizationStep; result[normalizeTime] = { ...data, + minTime: minTimeFormat, + maxTime: maxTimeFormat, rotationAngle: this.settings.rotationAngle }; } From f0be7b8b979316a3a573b527dfb9adbce0271fe8 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 21 May 2020 16:46:25 +0300 Subject: [PATCH 4/8] Fix calculate tooltip --- .../widget/trip-animation/trip-animation.component.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 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 24f2541caf..cabbf47def 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 @@ -63,9 +63,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { activeTrip: FormattedData; label; minTime: number; - minTimeFormat: string; maxTime: number; - maxTimeFormat: string; anchors: number[] = []; useAnchors: boolean; currentTime: number; @@ -97,14 +95,14 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { this.settings = { ...settings, ...this.ctx.settings }; this.useAnchors = this.settings.showPoints && this.settings.usePointAsAnchor; this.settings.pointAsAnchorFunction = parseFunction(this.settings.pointAsAnchorFunction, ['data', 'dsData', 'dsIndex']); + this.settings.tooltipFunction = parseFunction(this.settings.tooltipFunction, ['data', 'dsData', 'dsIndex']); + this.settings.labelFunction = parseFunction(this.settings.labelFunction, ['data', 'dsData', 'dsIndex']); this.settings.fitMapBounds = true; this.normalizationStep = this.settings.normalizationStep; const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]]; if (subscription) subscription.callbacks.onDataUpdated = () => { this.historicalData = parseArray(this.ctx.data).filter(arr => arr.length); if (this.historicalData.length) { - if (!this.activeTrip) - this.activeTrip = this.historicalData[0][0]; this.calculateIntervals(); this.timeUpdated(this.currentTime ? this.currentTime : this.minTime); } @@ -167,6 +165,9 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { const maxTimeFormat = this.maxTime !== -Infinity ? moment(this.maxTime).format('YYYY-MM-DD HH:mm:ss') : ''; this.interpolatedTimeData[index] = this.interpolateArray(dataSource, minTimeFormat, maxTimeFormat); }); + if(!this.activeTrip){ + this.activeTrip = this.interpolatedTimeData.map(dataSource => dataSource[this.minTime]).filter(ds => ds)[0]; + } if (this.useAnchors) { const anchorDate = Object.entries(_.union(this.interpolatedTimeData)[0]); this.anchors = anchorDate @@ -181,7 +182,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { } const data = this.activeTrip; const tooltipPattern: string = this.settings.useTooltipFunction ? - safeExecute(this.settings.tooolTipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; + safeExecute(this.settings.tooltipFunction, [point, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; const tooltipText = parseWithTranslation.parseTemplate(tooltipPattern, data, true); if (setTooltip) { this.mainTooltip = this.sanitizer.sanitize( From 0408dd16d3d8d624366d03794b895e442f028eab Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 21 May 2020 17:28:57 +0300 Subject: [PATCH 5/8] Clear code --- .../widget/trip-animation/trip-animation.component.ts | 5 +---- 1 file changed, 1 insertion(+), 4 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 cabbf47def..e2678a5147 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 @@ -97,7 +97,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { this.settings.pointAsAnchorFunction = parseFunction(this.settings.pointAsAnchorFunction, ['data', 'dsData', 'dsIndex']); this.settings.tooltipFunction = parseFunction(this.settings.tooltipFunction, ['data', 'dsData', 'dsIndex']); this.settings.labelFunction = parseFunction(this.settings.labelFunction, ['data', 'dsData', 'dsIndex']); - this.settings.fitMapBounds = true; this.normalizationStep = this.settings.normalizationStep; const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]]; if (subscription) subscription.callbacks.onDataUpdated = () => { @@ -180,16 +179,14 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { if (!point) { point = this.activeTrip; } - const data = this.activeTrip; const tooltipPattern: string = this.settings.useTooltipFunction ? safeExecute(this.settings.tooltipFunction, [point, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; - const tooltipText = parseWithTranslation.parseTemplate(tooltipPattern, data, true); + const tooltipText = parseWithTranslation.parseTemplate(tooltipPattern, point, true); if (setTooltip) { this.mainTooltip = this.sanitizer.sanitize( SecurityContext.HTML, tooltipText); this.cd.detectChanges(); } - this.activeTrip = point; return tooltipText; } From 690784c0e6422586e2ce566fff228b1051b75ea0 Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Thu, 21 May 2020 18:43:25 +0300 Subject: [PATCH 6/8] trip animation update fix --- .../trip-animation/trip-animation.component.ts | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 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 24f2541caf..6b127e7725 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 @@ -140,7 +140,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { } } this.calcLabel(); - this.calcTooltip(); + this.calcTooltip(currentPosition.find(position => position.entityName === this.activeTrip.entityName)); if (this.mapWidget) { this.mapWidget.map.updatePolylines(this.interpolatedTimeData.map(ds => _.values(ds)), this.activeTrip); if (this.settings.showPolygon) { @@ -175,19 +175,14 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { } } - calcTooltip = (point?: FormattedData, setTooltip = true) => { - if (!point) { - point = this.activeTrip; - } - const data = this.activeTrip; + calcTooltip = (point?: FormattedData) => { + const data = point ? point : this.activeTrip; const tooltipPattern: string = this.settings.useTooltipFunction ? safeExecute(this.settings.tooolTipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; const tooltipText = parseWithTranslation.parseTemplate(tooltipPattern, data, true); - if (setTooltip) { - this.mainTooltip = this.sanitizer.sanitize( - SecurityContext.HTML, tooltipText); - this.cd.detectChanges(); - } + this.mainTooltip = this.sanitizer.sanitize( + SecurityContext.HTML, tooltipText); + this.cd.detectChanges(); this.activeTrip = point; return tooltipText; } From 448fb2fd4fdd3374ab04e01dc3d2231af7422a45 Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Thu, 21 May 2020 18:56:03 +0300 Subject: [PATCH 7/8] add some types --- .../components/widget/lib/maps/map-models.ts | 16 +++++++++++++++- .../trip-animation/trip-animation.component.ts | 6 +++--- 2 files changed, 18 insertions(+), 4 deletions(-) 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 1c198825df..b730f1df20 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 @@ -26,7 +26,7 @@ import { export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; -export type GetTooltip= (point: FormattedData, setTooltip?: boolean) => string; +export type GetTooltip = (point: FormattedData, setTooltip?: boolean) => string; export type MapSettings = { draggableMarker: boolean; @@ -164,9 +164,23 @@ export interface HistorySelectSettings { } export type TripAnimationSettings = { + showPoints: boolean; pointColor: string; pointSize: number; pointTooltipOnRightPanel: boolean; + usePointAsAnchor: boolean; + normalizationStep: number; + showPolygon: boolean; + latKeyName: string; + lngKeyName: string; + rotationAngle: number; + label: string; + tooltipPattern: string; + useTooltipFunction :boolean; + useLabelFunction:boolean; + pointAsAnchorFunction: GenericFunction; + tooltipFunction: GenericFunction; + labelFunction: GenericFunction; } export type actionsHandler = ($event: Event, datasource: Datasource) => void; 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 7725ded57e..c8afaee548 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 @@ -19,7 +19,7 @@ import tinycolor from 'tinycolor2'; import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, SecurityContext, ViewChild } from '@angular/core'; import { MapWidgetController, TbMapWidgetV2 } from '../lib/maps/map-widget2'; -import { FormattedData, MapProviders } from '../lib/maps/map-models'; +import { FormattedData, MapProviders, TripAnimationSettings } from '../lib/maps/map-models'; import { addCondition, addGroupInfo, addToSchema, initSchema } from '@app/core/schema-utils'; import { mapPolygonSchema, pathSchema, pointSchema, tripAnimationSchema } from '../lib/maps/schemes'; import { DomSanitizer } from '@angular/platform-browser'; @@ -57,7 +57,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { normalizationStep: number; interpolatedTimeData = []; widgetConfig: WidgetConfig; - settings; + settings: TripAnimationSettings; mainTooltip = ''; visibleTooltip = false; activeTrip: FormattedData; @@ -178,7 +178,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { calcTooltip = (point?: FormattedData) => { const data = point ? point : this.activeTrip; const tooltipPattern: string = this.settings.useTooltipFunction ? - safeExecute(this.settings.tooolTipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; + 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); From c9c0f4650ddcbfe49ae4f9e999195b31513f9920 Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Thu, 21 May 2020 19:12:22 +0300 Subject: [PATCH 8/8] update position on change min time --- .../widget/trip-animation/trip-animation.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 c8afaee548..8690119e87 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 @@ -103,7 +103,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { 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.timeUpdated(this.currentTime && this.currentTime > this.minTime ? this.currentTime : this.minTime); } this.mapWidget.map.map?.invalidateSize(); this.cd.detectChanges();