Commit 34aab3287be4d7fa405471d895624879f6ab6abb
Committed by
GitHub
Merge pull request #4002 from ponv/master
Dynamic color for data points
Showing
5 changed files
with
23 additions
and
1 deletions
... | ... | @@ -626,10 +626,14 @@ export default abstract class LeafletMap { |
626 | 626 | } |
627 | 627 | this.points = new FeatureGroup(); |
628 | 628 | } |
629 | + let pointColor = this.options.pointColor; | |
629 | 630 | for (const pointsList of pointsData) { |
630 | 631 | pointsList.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { |
632 | + if (this.options.useColorPointFunction) { | |
633 | + pointColor = safeExecute(this.options.colorPointFunction, [data, pointsData, data.dsIndex]); | |
634 | + } | |
631 | 635 | const point = L.circleMarker(this.convertPosition(data), { |
632 | - color: this.options.pointColor, | |
636 | + color: pointColor, | |
633 | 637 | radius: this.options.pointSize |
634 | 638 | }); |
635 | 639 | if (!this.options.pointTooltipOnRightPanel) { | ... | ... |
... | ... | @@ -201,6 +201,8 @@ export type TripAnimationSettings = { |
201 | 201 | pointAsAnchorFunction: GenericFunction; |
202 | 202 | tooltipFunction: GenericFunction; |
203 | 203 | labelFunction: GenericFunction; |
204 | + useColorPointFunction: boolean; | |
205 | + colorPointFunction: GenericFunction; | |
204 | 206 | }; |
205 | 207 | |
206 | 208 | export type actionsHandler = ($event: Event, datasource: Datasource) => void; | ... | ... |
... | ... | @@ -301,6 +301,7 @@ export class MapWidgetController implements MapWidgetInterface { |
301 | 301 | labelFunction: parseFunction(settings.labelFunction, functionParams), |
302 | 302 | tooltipFunction: parseFunction(settings.tooltipFunction, functionParams), |
303 | 303 | colorFunction: parseFunction(settings.colorFunction, functionParams), |
304 | + colorPointFunction: parseFunction(settings.colorPointFunction, functionParams), | |
304 | 305 | polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams), |
305 | 306 | polygonTooltipFunction: parseFunction(settings.polygonTooltipFunction, functionParams), |
306 | 307 | markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), | ... | ... |
... | ... | @@ -871,6 +871,15 @@ export const pointSchema = |
871 | 871 | title: 'Point color', |
872 | 872 | type: 'string' |
873 | 873 | }, |
874 | + useColorPointFunction: { | |
875 | + title: 'Use color point function', | |
876 | + type: 'boolean', | |
877 | + default: false | |
878 | + }, | |
879 | + colorPointFunction: { | |
880 | + title: 'Color point function: f(data, dsData, dsIndex)', | |
881 | + type: 'string' | |
882 | + }, | |
874 | 883 | pointSize: { |
875 | 884 | title: 'Point size (px)', |
876 | 885 | type: 'number', |
... | ... | @@ -899,6 +908,11 @@ export const pointSchema = |
899 | 908 | key: 'pointColor', |
900 | 909 | type: 'color' |
901 | 910 | }, |
911 | + 'useColorPointFunction', | |
912 | + { | |
913 | + key: 'colorPointFunction', | |
914 | + type: 'javascript' | |
915 | + }, | |
902 | 916 | 'pointSize', |
903 | 917 | 'usePointAsAnchor', |
904 | 918 | { | ... | ... |
... | ... | @@ -112,6 +112,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy |
112 | 112 | this.settings.pointAsAnchorFunction = parseFunction(this.settings.pointAsAnchorFunction, ['data', 'dsData', 'dsIndex']); |
113 | 113 | this.settings.tooltipFunction = parseFunction(this.settings.tooltipFunction, ['data', 'dsData', 'dsIndex']); |
114 | 114 | this.settings.labelFunction = parseFunction(this.settings.labelFunction, ['data', 'dsData', 'dsIndex']); |
115 | + this.settings.colorPointFunction = parseFunction(this.settings.colorPointFunction, ['data', 'dsData', 'dsIndex']); | |
115 | 116 | this.normalizationStep = this.settings.normalizationStep; |
116 | 117 | const subscription = this.ctx.defaultSubscription; |
117 | 118 | subscription.callbacks.onDataUpdated = () => { | ... | ... |