Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve labels on axes with rangebreaks #5187

Merged
merged 10 commits into from Oct 9, 2020
Merged

Conversation

archmoj
Copy link
Contributor

@archmoj archmoj commented Oct 1, 2020

Fixes #5129 and fixes #5176.
Set dtick in respect to tickformat for period labels and fixup label positioning on axes with rangebreaks
demo1: Before vs After
demo2: Before vs After
demo3: Before vs After
demo4: Before vs After

@plotly/plotly_js

@alexcjohnson
Copy link
Contributor

I'm still seeing some funny behavior. If I take your codepen https://codepen.io/MojtabaSamimi/pen/jOqjzga and comment out tickformat and dtick, the ticks look good as autoranged, we get dtick of 2 months but it looks like 4 months because half of them have been dropped because they overlap:
Screen Shot 2020-10-02 at 4 27 49 PM
But then as I zoom out a bit some funny things happen. dtick increases to 3 months, but this has the paradoxical effect of looking like an increase since it looked like 4 months immediately before this. That's funny but fine. The problem is the labels are positioned at the center of the period, rather than 1/6 where they should be:
Screen Shot 2020-10-02 at 4 28 34 PM
Then as I zoom out more we start losing ticks, while still keeping the label at the center of the original 3-month period, rather than 1/6 where they belong:
Screen Shot 2020-10-02 at 4 33 17 PM
Screen Shot 2020-10-02 at 4 33 37 PM
Until eventually we have what looks like 6-month dtick with labels at 1/4 (but it's still actually 3-month dtick just half of them have been discarded):
Screen Shot 2020-10-02 at 4 34 39 PM
Zoom out a little bit more and we switch to a real 6-month dtick, with the labels where they belong at 1/12 of the period:
Screen Shot 2020-10-02 at 4 37 59 PM
A little farther zoomed out and we start dropping ticks again, but this time some of the labels move to the wrong locations:
Screen Shot 2020-10-02 at 4 41 58 PM
And a tiny bit further still half the ticks have been dropped, so it looks like yearly ticks but it's really still 6 months (and we still label the months). And again some of the ticks are in weird places:
Screen Shot 2020-10-02 at 4 40 34 PM
Screen Shot 2020-10-02 at 4 45 27 PM
Finally we get to actual year ticks and things look good again:
Screen Shot 2020-10-02 at 4 46 13 PM
Thereafter everything looks fine - I never seem to see year labels in the wrong locations.

I'm not worried about the random tick dropping, that's a compromise we need to make when there are range breaks and can't always tell if the labels will overlap. But it's important that we position the labels correctly in all of these situations. All of these situations I got to just by slowly dragging the right side of the x axis. I didn't investigate zooming in, only zooming out, so there may be other funny cases when you zoom in.

Please make sure that the labels are positioned correctly with automatic ticks and tick labels at all zoom levels.

@archmoj archmoj changed the title improve period labels improve labels on axes with rangebreaks Oct 7, 2020
@archmoj archmoj added this to the v1.57.0 milestone Oct 9, 2020
…ould reduce ticks

 - revert changes of date_axes baseline
 - update date_axes2 baseline
 - fixup jasmine tests
Copy link
Contributor

@alexcjohnson alexcjohnson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 Whew, nice job, that took persistence!

@archmoj archmoj merged commit 4d821e3 into master Oct 9, 2020
@archmoj archmoj deleted the improve-period-labels branch October 9, 2020 20:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants