Browse Source

Refactoring code to dynamic color point in trip-animation widget

pull/4002/head
Vladyslav_Prykhodko 6 years ago
parent
commit
034ea03f24
  1. 4
      ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
  2. 2
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
  3. 30
      ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
  4. 4
      ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts

4
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,

2
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']),

30
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',

4
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) => {

Loading…
Cancel
Save