Introduce horizontal colorbars

[archmoj]

Resolves #1244 by adding orientation attribute to colorbar with the option 'h'.

@plotly/plotly_js

[nicolaskruchten]

Looks good to me! Automargins on the right and left side don't work the way I would expect, but other than that it looks great!

[alexcjohnson]

A couple of things I notice about how things are laid out:

Titles on the side: when the ticks & labels are on the inside it definitely seems like the title should be vertically centered. I think that also makes sense when the labels are outside (centered vertically wrt. the bar and labels together, not just the bar) but it's a little less clear to me in that case.

Outside labels on horizontal bars: first and last labels seem to intrude on the border padding. This is most evident with left/right ticklabelposition when the colorbar has a border and/or background color (as plenty of your excellent mocks do 🎉 ) but can also be seen with centered labels as in the second image above. I think without border & background the way it's drawn right now makes sense, as it would be unpleasant to have multiple colorbars that don't line up just because their tick labels have different lengths, but when you DO have a border or background color (different from paper_bgcolor) this situation should shrink the colorbar.

[alexcjohnson]

Also, isn't there too much space below the colorbar when the title is on the side and the labels are below, as in the second screenshot in the comment above?

[archmoj]

when you DO have a border or background color (different from paper_bgcolor) this situation should shrink the colorbar.

Is it only for horizontal colorbars or both orientations?

[archmoj]

Titles on the side: when the ticks & labels are on the inside it definitely seems like the title should be vertically centered. I think that also makes sense when the labels are outside (centered vertically wrt. the bar and labels together, not just the bar) but it's a little less clear to me in that case.

This part was addressed in 8a137e3.

[archmoj]

Outside labels on horizontal bars: first and last labels seem to intrude on the border padding. This is most evident with left/right ticklabelposition when the colorbar has a border and/or background color (as plenty of your excellent mocks do tada ) but can also be seen with centered labels as in the second image above. I think without border & background the way it's drawn right now makes sense, as it would be unpleasant to have multiple colorbars that don't line up just because their tick labels have different lengths, but when you DO have a border or background color (different from paper_bgcolor) this situation should shrink the colorbar.

This part is addressed in 2f09b6e by adjusting the position of first and last tick labels.

[alexcjohnson]

How about we just remove these extremal ticks, in the cases you determine you need to shift them? It's an edge case already since mostly people won't be putting their colorbars in boxes, and the shifted labels are too easy to break (and even some non-broken cases don't look that great, when the number intersects the tick)

Also, and this one I'm comfortable just making an issue for and deferring, outside left with many labels such that they auto-rotate does weird things:

This is an issue for regular cartesian axes too

and for all shifted tick labels on both colorbars and cartesian axes if you provide explicit tickangle

[archmoj]

How about we just remove these extremal ticks, in the cases you determine you need to shift them?

No I think it's better to keep them around and adjust their position.
Otherwise no labels would show up here:

[alexcjohnson]

OK, but it's way too easy to break and the breaking cases I noted above are just the tip of the iceberg - this would be a huge pain to fix. How about this then: as long as there will be at least 2 labels left, remove the ones that would need moving; if removing would result in 0 or 1 labels, we move them instead.

[alexcjohnson]

Titles on the side: when the ticks & labels are on the inside it definitely seems like the title should be vertically centered. I think that also makes sense when the labels are outside (centered vertically wrt. the bar and labels together, not just the bar) but it's a little less clear to me in that case.

This part was addressed in 8a137e3.

8a137e3 adjusted the horizontal alignment - I was talking about vertical

[archmoj]

OK, but it's way too easy to break and the breaking cases I noted above are just the tip of the iceberg - this would be a huge pain to fix. How about this then: as long as there will be at least 2 labels left, remove the ones that would need moving; if removing would result in 0 or 1 labels, we move them instead.

Applied in 07cd536

[archmoj]

Titles on the side: when the ticks & labels are on the inside it definitely seems like the title should be vertically centered. I think that also makes sense when the labels are outside (centered vertically wrt. the bar and labels together, not just the bar) but it's a little less clear to me in that case.

This part was addressed in 8a137e3.

8a137e3 adjusted the horizontal alignment - I was talking about vertical

The vertical alignment based on the height of colorbar title could be an option later on the road.
If one looks at the whole graph not only the colorbar, the current setup is pretty good IMHO.

[alexcjohnson]

Excellent - let's add one or two mocks that exactly match existing mocks but with no border or bg for the colorbar, showing that the labels are all visible and unmoved. Then I'd say this is ready to merge and release! 💃

[archmoj]

Excellent - let's add one or two mocks that exactly match existing mocks but with no border or bg for the colorbar, showing that the labels are all visible and unmoved. Then I'd say this is ready to merge and release! woman_dancing

Good call. Done in a0901bd.

[etpinard]

Great feature!

Well done @archmoj !!

[archmoj]

Great feature!

Well done @archmoj !!

Thanks for the review @etpinard :)