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

feat(axisPointer): add triggerEmphasis option to disable emphasis #18524

Merged
merged 2 commits into from
Apr 19, 2023

Conversation

juliepagano
Copy link
Contributor

@juliepagano juliepagano commented Apr 18, 2023

Brief Information

This pull request is in the type of:

  • bug fixing
  • new feature
  • others

What does this PR do?

This PR adds a triggerEmphasis option to the axisPointer that enables the user to disable the emphasis/highlight behavior associated with the axis pointer.

Fixed issues

Details

Before: What was the problem?

Prior to this PR, the axis pointer would always trigger highlight behavior. When you have a line chart with multiple series, the axis trigger tends to highlight all the series, which is often unhelpful and can be really confusing to users.

image

There is not a good way to work around this currently. You can see an example of some issues related to this in perses/perses#1112.

After: How does it behave after the fixing?

After this PR, the user has the option to disable this behavior on a given axis by setting axisPointer.triggerEmphasis to false. When set to false, the highlight/emphasis behavior will not trigger with the axis pointer. Other highlight/emphasis (e.g. on mouseover a specific line) is retained.

The default value for axisPointer.triggerEmphasis is true when not set, retaining the prior behavior.

Below is a screenshot of the axisPointer.triggerEmphasis: false visual test. You can see the diff is whether or not all the lines are highlighted. Note that it still retains highlight behavior on mousing over a particular line.
image

Document Info

One of the following should be checked.

I'm happy to take a stab at making a PR to the docs once we're sure about the naming of the new option. I may need some help with the zh-based language bits. Let me know if you'd prefer I help with this or leave it to the maintainers. One of my teammates helped me with the translation, but it could use a second set of eyes to make sure we got it right.

Misc

ZRender Changes

  • This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

I added two test cases to test/tooltip-axisPointer2.html. One for the false case and one for the true case. Let me know if you think I should break this out into a separate test case, and if so, what you think the best name is for it.

I added visual tests for each test case that take screenshots at the following points:

  • When mousing over a section of the chart without a line. This validates the axis pointer's configuration is behaving as expected.
  • When mousing over an individual line. This validates non-axis-pointer highlight behavior is not impacted.

Others

Merging options

  • Please squash the commits into a single one when merging.

Other information

I was unsure of the best name for this configuration option. This behavior is referred to as emphasis in the configuration of the styling, but is referred to as highlight when triggering the event. I started with triggerEmphasis because I thought users might be more familiar with the styling configuration, but I can see arguments for triggerHighlight. I used the trigger* naming to match the similar-ish triggerTooltip option. I'm happy to rename it to whatever the maintainers think is best.

@echarts-bot
Copy link

echarts-bot bot commented Apr 18, 2023

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.

Copy link
Contributor

@Ovilia Ovilia left a comment

Choose a reason for hiding this comment

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

The code looks good to me but it seems some of the tooltip-related test cases fail in the visual test.

image

@juliepagano Can you have a look?

@juliepagano
Copy link
Contributor Author

The code looks good to me but it seems some of the tooltip-related test cases fail in the visual test.

image

@juliepagano Can you have a look?

Sure thing! The diff from "tooltip-axisPointer2" is from the case where triggerEmphasis is false, so that's expected (screenshot below). I'll take a closer look at the other failing tests to see what's going on there.

image

@juliepagano
Copy link
Contributor Author

The visual tests look much better after the commit I made to remove triggerEmphasis from the conditional for involveSeries. The only failing tooltip test is now the expected one for triggerEmphasis: false.

Screenshot of the expected visual diff and showing all the other tooltip tests passing.
image

Scrolling down to screenshot the other tests.
image

@juliepagano
Copy link
Contributor Author

I'm working with one of my teammates to get help with the Chinese translation, so I can put up a docs PR to go with this. Hoping I'll have that up some time today.

@echarts-bot echarts-bot bot added PR: doc ready and removed PR: awaiting doc Document changes is required for this PR. labels Apr 18, 2023
@juliepagano juliepagano requested a review from Ovilia April 18, 2023 17:28
@Ovilia
Copy link
Contributor

Ovilia commented Apr 19, 2023

Thank you for this high-quality pull request!

@Ovilia Ovilia merged commit 6b4f895 into apache:master Apr 19, 2023
@echarts-bot
Copy link

echarts-bot bot commented Apr 19, 2023

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

@Ovilia Ovilia added this to the 5.5.0 milestone Apr 19, 2023
@Ovilia
Copy link
Contributor

Ovilia commented Apr 19, 2023

We ususally release a new version every two months. If you want to use this feature ASAP, you can use the nightly version (npm install echarts@npm:echarts-nightly) in your development environment. You need to make sure to use the nightly build that is released after this PR has been merged.

@juliepagano juliepagano deleted the fix-18495 branch April 19, 2023 15:02
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.

3 participants