[Maps] custom color ramp #41603

nreese · 2019-07-19T19:37:25Z

This PR adds the ability to specify custom color ramp with stop values for data-driven styling.

The color stop UI is temporary. @snide is working on a new color stop UI that will replace the one currently used in this PR.

elasticmachine · 2019-07-19T19:37:28Z

Pinging @elastic/kibana-gis

nreese · 2019-07-19T19:38:32Z

@alexfrancoeur Does the color ramp work as expected? Stops are numbers in strictly ascending order. The range is from the given stop number (inclusive) to the next stop number (exclusive).

elasticmachine · 2019-07-19T20:38:59Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

alexfrancoeur · 2019-07-22T15:16:59Z

@nreese If we can, I feel like we should be consistent with other ranges defined in Kibana visualizations.

Visualize:

TSVB:

Lens, Canvas and others: ?

That being said, I don't think we're consistent defining ranges anywhere. If we're getting a common color stop UI from design, I think we have some freedom here.

In the current implementation, as a new user, I'm not sure how obvious it is that you're defining a range or matching a for a single metric. For example, in your screenshot above it could easily be argued that that UI is only showing colors for when a value is 0, or 6, or 12, etc. Also, what operators are being used - >, >=, >, >= or = ? And should we consider those being customizable by the user? I personally know how it works because of your last comment but maybe we can provide some additional context / text or UX hints as to how we're defining the range. @cchaos any thoughts on how best to approach this?

I happen to like how TSVB defines this logic (screenshot above), but I'm not sure if it's more or less confusing for a new user. I think I prefer this method because you can define exactly what each range is.

alexfrancoeur · 2019-07-22T19:03:24Z

fwiw, I just saw what the design team was working on. I think the scale configuration is much more self explanatory with that top color bar

snide · 2019-07-22T22:39:29Z

fwiw, I just saw what the design team was working on. I think the scale configuration is much more self explanatory with that top color bar

Yep. The lower part won't even be in there when we're done, and will hopefully happen all through popovers. As mentioned, the component @nreese has in now will be temporary till we get the new one in. It's gonna be a lot more technically challenging to build so we didn't want to hold up this PR.

Hopefully be able to just swap this in when we're done.

…ramp

nreese · 2019-08-13T14:15:39Z

Talked with @snide and color stop UI with the color bar will not make 7.4 FF. So this PR will need to move ahead with the color stop UI as is.

I feel like we should be consistent with other ranges defined in Kibana visualizations.

@alexfrancoeur The other range definitions are defining a range. This UI is not defining ranges. The UI is defining color stops and color stops do not need to be provided in pairs.

elasticmachine · 2019-08-13T15:08:28Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-13T17:03:39Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

alexfrancoeur · 2019-08-13T17:47:15Z

Talked with @snide and color stop UI with the color bar will not make 7.4 FF. So this PR will need to move ahead with the color stop UI as is.

Ah well, it'll be nice to have it when it's ready though. Do we think 7.5?

@alexfrancoeur The other range definitions are defining a range. This UI is not defining ranges. The UI is defining color stops and color stops do not need to be provided in pairs.

Makes sense to me. Honestly, any way we can introduce this type of functionality to our users will be fine for the first iteration. I still think the color stopping is a bit more obvious with the EUI component and we'll get there eventually

thomasneirynck

I dig it!

Some initial comments. Biggest change imo would be not using interpolation, although that may be worth a larger discussion.

x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/color_stops.js

x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js

x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js

x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/color_stops_utils.js

thomasneirynck · 2019-08-14T15:05:40Z

x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js

-    return null;
+    if (styleDescriptor.options.useCustomColorRamp &&
+      (!styleDescriptor.options.customColorRamp ||
+      !styleDescriptor.options.customColorRamp.length)) {


Can this (!styleDescriptor.options.customColorRamp || !styleDescriptor.options.customColorRamp.length) ever arise? I think the UX already prevents creating dysfunctional color ramps. And if it doesn't, shouldn't it?

Can this (!styleDescriptor.options.customColorRamp || !styleDescriptor.options.customColorRamp.length) ever arise

Yes. The default vector style does not set customColorRamp so when useCustomColorRamp is first set to true, customColorRamp is undefined until a color has been added with ColorStops

x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js

.../legacy/plugins/maps/public/layers/styles/components/vector/color/dynamic_color_selection.js

…ramp

elasticmachine · 2019-08-14T18:38:46Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

nreese · 2019-08-14T18:42:57Z

I'd use the step function. https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step I think this would give us the behavior closest to what we have in the UX (ie. select the lowest color, when the value falls in between).

@thomasneirynck I have updated the PR to use step instead of interpolate. I like step a lot better. Thanks for suggesting. I updated the description screen shot to show an image with step instead of the interpolate example

elasticmachine · 2019-08-14T19:38:05Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…ramp

elasticmachine · 2019-08-15T13:41:47Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

… color expressions

elasticmachine · 2019-08-15T15:17:44Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…r select

thomasneirynck

very sweet, thank you! This is going to be super useful ..

elasticmachine · 2019-08-15T17:23:37Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

* [Maps] custom color ramp * round value down to find center color * do not update redux state with invalide color stops * rename EuiColorStop to ColorStop * remove untracked file * fix jest tests * review feedback * use steps instead of interpolate * add percy functional test to verify rendering of interpolate and step color expressions * add padding to color stop row so add/remove icons do not overlap color select

kfosburg · 2019-08-17T12:11:12Z

Talked with @snide and color stop UI with the color bar will not make 7.4 FF. So this PR will need to move ahead with the color stop UI as is.

Ah well, it'll be nice to have it when it's ready though. Do we think 7.5?

@alexfrancoeur The other range definitions are defining a range. This UI is not defining ranges. The UI is defining color stops and color stops do not need to be provided in pairs.

Makes sense to me. Honestly, any way we can introduce this type of functionality to our users will be fine for the first iteration. I still think the color stopping is a bit more obvious with the EUI component and we'll get there eventually

Thanks for this... considering we end users had to hack CSS in previous versions to get custom color ranges anything will be great! Is there an estimate for 7.4 release?

nreese · 2019-08-17T18:08:49Z

Is there an estimate for 7.4 release?

Yes, the feature is merged into 7.x branch so should be included in the next release

mbarretta · 2020-02-10T21:19:00Z

@maihde this meet your needs or need algorithmic ramp like #5058 (comment)

nreese added 3 commits July 19, 2019 10:58

[Maps] custom color ramp

fafb15a

round value down to find center color

141de65

do not update redux state with invalide color stops

a82d7bc

nreese added release_note:enhancement WIP Work in progress [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation v8.0.0 v7.4.0 labels Jul 19, 2019

nreese requested a review from a team as a code owner July 19, 2019 19:37

alexfrancoeur mentioned this pull request Jul 30, 2019

[Maps] Add timestamp support for dynamic color / size ramps #42250

Closed

nreese added 3 commits August 13, 2019 08:01

Merge branch 'master' of github.com:elastic/kibana into custom_color_…

601965a

…ramp

rename EuiColorStop to ColorStop

38e24fc

remove untracked file

86ef265

nreese requested a review from thomasneirynck August 13, 2019 14:16

nreese removed the WIP Work in progress label Aug 13, 2019

fix jest tests

af278e5

thomasneirynck reviewed Aug 14, 2019

View reviewed changes

nreese added 2 commits August 14, 2019 10:49

Merge branch 'master' of github.com:elastic/kibana into custom_color_…

7255456

…ramp

review feedback

1581eca

use steps instead of interpolate

c0e81f6

nreese requested a review from thomasneirynck August 14, 2019 18:41

Merge branch 'master' of github.com:elastic/kibana into custom_color_…

1aaa16d

…ramp

add percy functional test to verify rendering of interpolate and step…

7a88b4e

… color expressions

add padding to color stop row so add/remove icons do not overlap colo…

dc01a78

…r select

thomasneirynck approved these changes Aug 15, 2019

View reviewed changes

nreese merged commit c633565 into elastic:master Aug 15, 2019

This was referenced Aug 15, 2019

[7.x] [Maps] custom color ramp (#41603) #43391

Merged

Configurable color buckets for the map #5058

Closed

nreese mentioned this pull request Feb 24, 2020

Add an option to set the range on a tile map #7538

Closed

nickpeihl mentioned this pull request Jan 12, 2023

[Maps] Support for more color palette options #34366

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Maps] custom color ramp #41603

[Maps] custom color ramp #41603

nreese commented Jul 19, 2019 •

edited

Loading

elasticmachine commented Jul 19, 2019

nreese commented Jul 19, 2019

elasticmachine commented Jul 19, 2019

alexfrancoeur commented Jul 22, 2019

alexfrancoeur commented Jul 22, 2019

snide commented Jul 22, 2019

nreese commented Aug 13, 2019

elasticmachine commented Aug 13, 2019

elasticmachine commented Aug 13, 2019

alexfrancoeur commented Aug 13, 2019

thomasneirynck left a comment

thomasneirynck Aug 14, 2019

nreese Aug 14, 2019

elasticmachine commented Aug 14, 2019

nreese commented Aug 14, 2019 •

edited

Loading

elasticmachine commented Aug 14, 2019

elasticmachine commented Aug 15, 2019

elasticmachine commented Aug 15, 2019

thomasneirynck left a comment

elasticmachine commented Aug 15, 2019

kfosburg commented Aug 17, 2019

nreese commented Aug 17, 2019

mbarretta commented Feb 10, 2020

[Maps] custom color ramp #41603

[Maps] custom color ramp #41603

Conversation

nreese commented Jul 19, 2019 • edited Loading

elasticmachine commented Jul 19, 2019

nreese commented Jul 19, 2019

elasticmachine commented Jul 19, 2019

💔 Build Failed

alexfrancoeur commented Jul 22, 2019

alexfrancoeur commented Jul 22, 2019

snide commented Jul 22, 2019

nreese commented Aug 13, 2019

elasticmachine commented Aug 13, 2019

💔 Build Failed

elasticmachine commented Aug 13, 2019

💚 Build Succeeded

alexfrancoeur commented Aug 13, 2019

thomasneirynck left a comment

Choose a reason for hiding this comment

thomasneirynck Aug 14, 2019

Choose a reason for hiding this comment

nreese Aug 14, 2019

Choose a reason for hiding this comment

elasticmachine commented Aug 14, 2019

💚 Build Succeeded

nreese commented Aug 14, 2019 • edited Loading

elasticmachine commented Aug 14, 2019

💚 Build Succeeded

elasticmachine commented Aug 15, 2019

💚 Build Succeeded

elasticmachine commented Aug 15, 2019

💚 Build Succeeded

thomasneirynck left a comment

Choose a reason for hiding this comment

elasticmachine commented Aug 15, 2019

💚 Build Succeeded

kfosburg commented Aug 17, 2019

nreese commented Aug 17, 2019

mbarretta commented Feb 10, 2020

nreese commented Jul 19, 2019 •

edited

Loading

nreese commented Aug 14, 2019 •

edited

Loading