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

Add support for hiding axis when a dataset visibility is toggled #5885

Merged
merged 7 commits into from Dec 18, 2018
Merged

Add support for hiding axis when a dataset visibility is toggled #5885

merged 7 commits into from Dec 18, 2018

Conversation

davesalomon
Copy link
Contributor

I'd like to have an option to hide an axis on a line graph when a dataset visibility is toggled off/on (by clicking the legend).

I've attempted to add support for this for my exact use case; I'm happy to build it out further if needed.

JS Fiddle example: https://jsfiddle.net/y0whvnvk/99/
Note that the 'Foo' dataset is hidden by default. Toggling it on will display the axis. Toggling it back off will re-hide the axis.

@kurkle
Copy link
Member

kurkle commented Dec 6, 2018

To me, it would appear logical for an axis with no referencing visible datasets to be hidden (by default in next major?) . Maybe display could be set to 'auto'? I dislike another configuration option for this.
Just my 5 cents.

@davesalomon
Copy link
Contributor Author

I agree entirely. Showing an axis for hidden data is confusing, and just adds clutter.

I just didn't want to change any default behaviour as part of this PR 😄

Copy link
Member

@simonbrunel simonbrunel left a comment

Choose a reason for hiding this comment

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

I also prefer display: 'auto' instead of introducing a new option which is redundant with display:

  • display: true (default): always display the axis
  • display: false: never display the axis
  • display: 'auto': display the axis only if there is at least one visible associated dataset

The scale should also not participate to the layout when hidden so everywhere we check scale.options.display, we also need to apply this new logic (thus the _isVisible() refactor).

We also need to consider situations where all datasets are hidden: how the chart behaves in that case?

src/plugins/plugin.legend.js Outdated Show resolved Hide resolved
src/core/core.scale.js Outdated Show resolved Hide resolved
src/core/core.scale.js Outdated Show resolved Hide resolved
src/core/core.scale.js Outdated Show resolved Hide resolved
src/core/core.scale.js Outdated Show resolved Hide resolved
@simonbrunel
Copy link
Member

@etimberg @nagix what do you think about that feature and the suggested API?

@davesalomon
Copy link
Contributor Author

Thanks for the review; much tidier. Recommended changes made, new Fiddle at https://jsfiddle.net/jyontsh6/. If this seems like a good thing to do, I'll start working on some tests 👍

src/core/core.scale.js Outdated Show resolved Hide resolved
@simonbrunel
Copy link
Member

display is also used in fit(), which I guess is why the hidden scale still consumes layout space:

5885

@davesalomon
Copy link
Contributor Author

davesalomon commented Dec 8, 2018

Reverted, and change made to handle .fit() 👍
chartjsaxis

Conflicts resolved

docs/axes/README.md Outdated Show resolved Hide resolved
@simonbrunel
Copy link
Member

Thanks @davesalomon, it looks good to me! I would go ahead and write unit tests for this new feature.

etimberg
etimberg previously approved these changes Dec 8, 2018
@etimberg
Copy link
Member

etimberg commented Dec 8, 2018

I like it. Just needs tests

src/core/core.scale.js Outdated Show resolved Hide resolved
@nagix
Copy link
Contributor

nagix commented Dec 9, 2018

This looks good unless it changes the current default behavior.

@davesalomon
Copy link
Contributor Author

Tests added; checking that scale.ctx._calls is empty seemed one of the easiest ways of validating that the axes hadn't been drawn (though I'm not sure this is right...). I was originally checking that the _isVisible() call returned the expected value, but that wasn't really then doing the check whether the axes has been drawn or not.

Review comments worked in as well.

To confirm, this PR doesn't change any default behaviour; axes.display default is still true, this adds a new option of auto.

test/specs/core.scale.tests.js Outdated Show resolved Hide resolved
test/specs/core.scale.tests.js Show resolved Hide resolved
test/specs/core.scale.tests.js Outdated Show resolved Hide resolved
test/specs/core.scale.tests.js Show resolved Hide resolved
@simonbrunel
Copy link
Member

... checking that scale.ctx._calls is empty seemed one of the easiest ...

I agree, later we should find a way to prevent the call of scale.draw() if the scale is not visible, but for now I think that's enough and better than just checking _isVisible(). I also agree with @nagix suggestions to also test the scale geometry.

@davesalomon
Copy link
Contributor Author

Tests checking the geometry added, and ....length > 0).toBe(true) tweaked also. Many thanks for the feedback 👍

@simonbrunel simonbrunel merged commit 4fb259e into chartjs:master Dec 18, 2018
@simonbrunel
Copy link
Member

Thanks @davesalomon

@davesalomon
Copy link
Contributor Author

👍, my pleasure, and thank you again for all your work going in to this excellent library!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants