From 6cd6568ee3185af429c98daac416c1dfe616f62b Mon Sep 17 00:00:00 2001 From: ponvalavan annamalai Date: Tue, 26 Jan 2021 17:24:31 +0000 Subject: [PATCH 1/5] Dynamic color for data points --- .../components/widget/lib/maps/leaflet-map.ts | 6 +++++- .../components/widget/lib/maps/map-models.ts | 2 ++ .../components/widget/lib/maps/map-widget2.ts | 1 + .../home/components/widget/lib/maps/schemes.ts | 16 +++++++++++++++- .../trip-animation/trip-animation.component.ts | 4 ++++ 5 files changed, 27 insertions(+), 2 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 57a0563a4e..ea3a24e0c5 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 @@ -628,8 +628,12 @@ export default abstract class LeafletMap { } for (const pointsList of pointsData) { pointsList.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { + let pointColor = this.options.pointColor; + if (this.options.useColorPointFunction) { + pointColor = safeExecute(this.options.colorPointFunction,[data, pointsData, data.dsIndex]); + } const point = L.circleMarker(this.convertPosition(data), { - color: this.options.pointColor, + color: pointColor, radius: this.options.pointSize }); if (!this.options.pointTooltipOnRightPanel) { 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 45830cbd55..664ba2ec6d 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 @@ -201,6 +201,8 @@ export type TripAnimationSettings = { pointAsAnchorFunction: GenericFunction; tooltipFunction: GenericFunction; labelFunction: GenericFunction; + useColorPointFunction: boolean; + colorPointFunction: GenericFunction; }; export type actionsHandler = ($event: Event, datasource: Datasource) => void; 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 e1cad7a8f7..c543593db5 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 @@ -301,6 +301,7 @@ export class MapWidgetController implements MapWidgetInterface { labelFunction: parseFunction(settings.labelFunction, functionParams), tooltipFunction: parseFunction(settings.tooltipFunction, functionParams), colorFunction: parseFunction(settings.colorFunction, functionParams), + colorPointFunction: parseFunction(settings.colorPointFunction, functionParams), polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams), polygonTooltipFunction: parseFunction(settings.polygonTooltipFunction, functionParams), markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts index 9e1ce715ff..3c8b7f031c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts @@ -1036,6 +1036,15 @@ export const tripAnimationSchema = { title: 'Custom marker image', type: 'string' }, + useColorPointFunction: { + title: 'Use color point function', + type: 'boolean', + default: false + }, + colorPointFunction: { + title: 'Color point function: f(data, dsData, dsIndex)', + type: 'string' + }, markerImageSize: { title: 'Custom marker image size (px)', type: 'number', @@ -1081,7 +1090,12 @@ export const tripAnimationSchema = { }, 'useTooltipFunction', { key: 'tooltipFunction', type: 'javascript' - }, 'autocloseTooltip', { + }, 'autocloseTooltip', 'useColorPointFunction', + { + key: 'colorPointFunction', + type: 'javascript' + }, + { key: 'markerImage', type: 'image' }, 'markerImageSize', 'rotationAngle', 'useMarkerImageFunction', 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 9372e44655..ab616a144c 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 @@ -112,6 +112,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy 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.colorPointFunction = parseFunction(this.settings.colorPointFunction, ['data', 'dsData', 'dsIndex']); this.normalizationStep = this.settings.normalizationStep; const subscription = this.ctx.defaultSubscription; subscription.callbacks.onDataUpdated = () => { @@ -180,6 +181,9 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy } if (this.settings.showPoints) { this.mapWidget.map.updatePoints(formattedInterpolatedTimeData.map(ds => _.union(ds)), this.calcTooltip); + } + if (this.settings.useColorPointFunction) { + this.mapWidget.map.updatePoints(_.values(_.union(this.interpolatedTimeData)[0]), this.calcTooltip); } this.mapWidget.map.updateMarkers(currentPosition, true, (trip) => { this.activeTrip = trip; From fc40047a5e1b20e1074b490276b7546cba161211 Mon Sep 17 00:00:00 2001 From: ponvalavan annamalai Date: Tue, 26 Jan 2021 18:01:55 +0000 Subject: [PATCH 2/5] Dynamic color for data points --- .../modules/home/components/widget/lib/maps/leaflet-map.ts | 4 ++-- .../modules/home/components/widget/lib/maps/map-models.ts | 2 +- .../modules/home/components/widget/lib/maps/map-widget2.ts | 2 +- .../widget/trip-animation/trip-animation.component.ts | 7 ++----- 4 files changed, 6 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 ea3a24e0c5..d9f8b055c8 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 @@ -626,10 +626,10 @@ export default abstract class LeafletMap { } this.points = new FeatureGroup(); } + let pointColor = this.options.pointColor; for (const pointsList of pointsData) { pointsList.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { - let pointColor = this.options.pointColor; - if (this.options.useColorPointFunction) { + if (this.options.useColorPointFunction) { pointColor = safeExecute(this.options.colorPointFunction,[data, pointsData, data.dsIndex]); } const point = L.circleMarker(this.convertPosition(data), { 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 664ba2ec6d..d5c7be4497 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 @@ -201,7 +201,7 @@ export type TripAnimationSettings = { pointAsAnchorFunction: GenericFunction; tooltipFunction: GenericFunction; labelFunction: GenericFunction; - useColorPointFunction: boolean; + useColorPointFunction: boolean; colorPointFunction: GenericFunction; }; 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 c543593db5..ed83323d6c 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 @@ -301,7 +301,7 @@ export class MapWidgetController implements MapWidgetInterface { labelFunction: parseFunction(settings.labelFunction, functionParams), tooltipFunction: parseFunction(settings.tooltipFunction, functionParams), colorFunction: parseFunction(settings.colorFunction, functionParams), - colorPointFunction: parseFunction(settings.colorPointFunction, functionParams), + colorPointFunction: parseFunction(settings.colorPointFunction, functionParams), polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams), polygonTooltipFunction: parseFunction(settings.polygonTooltipFunction, functionParams), markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), 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 ab616a144c..319a1139ed 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 @@ -112,7 +112,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy 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.colorPointFunction = parseFunction(this.settings.colorPointFunction, ['data', 'dsData', 'dsIndex']); + this.settings.colorPointFunction = parseFunction(this.settings.colorPointFunction, ['data', 'dsData', 'dsIndex']); this.normalizationStep = this.settings.normalizationStep; const subscription = this.ctx.defaultSubscription; subscription.callbacks.onDataUpdated = () => { @@ -179,11 +179,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy if (this.settings.showPolygon) { this.mapWidget.map.updatePolygons(this.interpolatedTimeData); } - if (this.settings.showPoints) { + if (this.settings.showPoints || this.settings.useColorPointFunction) { this.mapWidget.map.updatePoints(formattedInterpolatedTimeData.map(ds => _.union(ds)), this.calcTooltip); - } - if (this.settings.useColorPointFunction) { - this.mapWidget.map.updatePoints(_.values(_.union(this.interpolatedTimeData)[0]), this.calcTooltip); } this.mapWidget.map.updateMarkers(currentPosition, true, (trip) => { this.activeTrip = trip; From 0219b8a6fd70bff427ea446687d5327633bb51d6 Mon Sep 17 00:00:00 2001 From: ponvalavan annamalai Date: Tue, 26 Jan 2021 18:12:21 +0000 Subject: [PATCH 3/5] Dynamic color for data points --- .../app/modules/home/components/widget/lib/maps/leaflet-map.ts | 2 +- .../app/modules/home/components/widget/lib/maps/map-models.ts | 2 +- .../app/modules/home/components/widget/lib/maps/map-widget2.ts | 2 +- 3 files changed, 3 insertions(+), 3 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 d9f8b055c8..67f44cd941 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 @@ -626,7 +626,7 @@ export default abstract class LeafletMap { } this.points = new FeatureGroup(); } - let pointColor = this.options.pointColor; + let pointColor = this.options.pointColor; for (const pointsList of pointsData) { pointsList.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { if (this.options.useColorPointFunction) { 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 d5c7be4497..664ba2ec6d 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 @@ -201,7 +201,7 @@ export type TripAnimationSettings = { pointAsAnchorFunction: GenericFunction; tooltipFunction: GenericFunction; labelFunction: GenericFunction; - useColorPointFunction: boolean; + useColorPointFunction: boolean; colorPointFunction: GenericFunction; }; 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 ed83323d6c..393ea747a0 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 @@ -301,7 +301,7 @@ export class MapWidgetController implements MapWidgetInterface { labelFunction: parseFunction(settings.labelFunction, functionParams), tooltipFunction: parseFunction(settings.tooltipFunction, functionParams), colorFunction: parseFunction(settings.colorFunction, functionParams), - colorPointFunction: parseFunction(settings.colorPointFunction, functionParams), + colorPointFunction: parseFunction(settings.colorPointFunction, functionParams), polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams), polygonTooltipFunction: parseFunction(settings.polygonTooltipFunction, functionParams), markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), From 68eebaf04120b07397535a47ba21bdc728578fad Mon Sep 17 00:00:00 2001 From: ponvalavan annamalai Date: Tue, 26 Jan 2021 18:15:00 +0000 Subject: [PATCH 4/5] removed spaces -dynamic color for data points --- .../app/modules/home/components/widget/lib/maps/map-models.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 664ba2ec6d..cbf5883659 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 @@ -201,7 +201,7 @@ export type TripAnimationSettings = { pointAsAnchorFunction: GenericFunction; tooltipFunction: GenericFunction; labelFunction: GenericFunction; - useColorPointFunction: boolean; + useColorPointFunction: boolean; colorPointFunction: GenericFunction; }; From 034ea03f247b1c0354e7b708460c6086c5e87e4f Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 29 Jan 2021 14:02:48 +0200 Subject: [PATCH 5/5] Refactoring code to dynamic color point in trip-animation widget --- .../components/widget/lib/maps/leaflet-map.ts | 4 +-- .../components/widget/lib/maps/map-widget2.ts | 2 +- .../components/widget/lib/maps/schemes.ts | 30 +++++++++---------- .../trip-animation.component.ts | 4 +-- 4 files changed, 20 insertions(+), 20 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 67f44cd941..9da5e679f4 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 @@ -626,11 +626,11 @@ export default abstract class LeafletMap { } this.points = new FeatureGroup(); } - let pointColor = this.options.pointColor; + let pointColor = this.options.pointColor; for (const pointsList of pointsData) { pointsList.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { if (this.options.useColorPointFunction) { - pointColor = safeExecute(this.options.colorPointFunction,[data, pointsData, data.dsIndex]); + pointColor = safeExecute(this.options.colorPointFunction, [data, pointsData, data.dsIndex]); } const point = L.circleMarker(this.convertPosition(data), { color: pointColor, 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 393ea747a0..3a48e8e20f 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 @@ -301,7 +301,7 @@ export class MapWidgetController implements MapWidgetInterface { labelFunction: parseFunction(settings.labelFunction, functionParams), tooltipFunction: parseFunction(settings.tooltipFunction, functionParams), colorFunction: parseFunction(settings.colorFunction, functionParams), - colorPointFunction: parseFunction(settings.colorPointFunction, functionParams), + colorPointFunction: parseFunction(settings.colorPointFunction, functionParams), polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams), polygonTooltipFunction: parseFunction(settings.polygonTooltipFunction, functionParams), markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts index 3c8b7f031c..b00e01404a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts @@ -871,6 +871,15 @@ export const pointSchema = title: 'Point color', type: 'string' }, + useColorPointFunction: { + title: 'Use color point function', + type: 'boolean', + default: false + }, + colorPointFunction: { + title: 'Color point function: f(data, dsData, dsIndex)', + type: 'string' + }, pointSize: { title: 'Point size (px)', type: 'number', @@ -899,6 +908,11 @@ export const pointSchema = key: 'pointColor', type: 'color' }, + 'useColorPointFunction', + { + key: 'colorPointFunction', + type: 'javascript' + }, 'pointSize', 'usePointAsAnchor', { @@ -1036,15 +1050,6 @@ export const tripAnimationSchema = { title: 'Custom marker image', type: 'string' }, - useColorPointFunction: { - title: 'Use color point function', - type: 'boolean', - default: false - }, - colorPointFunction: { - title: 'Color point function: f(data, dsData, dsIndex)', - type: 'string' - }, markerImageSize: { title: 'Custom marker image size (px)', type: 'number', @@ -1090,12 +1095,7 @@ export const tripAnimationSchema = { }, 'useTooltipFunction', { key: 'tooltipFunction', type: 'javascript' - }, 'autocloseTooltip', 'useColorPointFunction', - { - key: 'colorPointFunction', - type: 'javascript' - }, - { + }, 'autocloseTooltip', { key: 'markerImage', type: 'image' }, 'markerImageSize', 'rotationAngle', 'useMarkerImageFunction', 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 319a1139ed..2581da88ad 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 @@ -112,7 +112,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy 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.colorPointFunction = parseFunction(this.settings.colorPointFunction, ['data', 'dsData', 'dsIndex']); + this.settings.colorPointFunction = parseFunction(this.settings.colorPointFunction, ['data', 'dsData', 'dsIndex']); this.normalizationStep = this.settings.normalizationStep; const subscription = this.ctx.defaultSubscription; subscription.callbacks.onDataUpdated = () => { @@ -179,7 +179,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy if (this.settings.showPolygon) { this.mapWidget.map.updatePolygons(this.interpolatedTimeData); } - if (this.settings.showPoints || this.settings.useColorPointFunction) { + if (this.settings.showPoints) { this.mapWidget.map.updatePoints(formattedInterpolatedTimeData.map(ds => _.union(ds)), this.calcTooltip); } this.mapWidget.map.updateMarkers(currentPosition, true, (trip) => {