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

fix(interactions): line cursor above the chart, band cursor below #1453

Merged
merged 4 commits into from
Nov 2, 2021

Conversation

markov00
Copy link
Member

@markov00 markov00 commented Nov 2, 2021

Summary

The effort to fix the visibility of mouse cursors above or below the chart, started in #1447, is now completed thanks to this PR.
I've splitter the crosshair component into two components: one for the mouse cursor line (that needs to be shown above every element on the chart), and the cursor band, which needs to be shown below the chart geometries.
The crossline (the horizontal line) is also extracted and rendered separately above the chart.

related to elastic/kibana#116754

Details

The current implementation uses the calculated zIndex to position the Crosshair component above the chart if we are rendering a line, or below if we are rendering a band.
Due to some changes in the Kibana instance and a possible bug in the calculation of the chart zIndex the Crosshair component is always rendered in Kibana with a zIndex of 0, causing it to be rendered always below the chart.
A first fix went in thanks to #1447, which removes the background color applied to the canvas element making the cursor visible, but the problem is that the visibility is obfuscated by the gridlines.
This PR fixes it removing the need of using a zIndex to position the cursor above or below the chart

Issues

fix #1283

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • The proper feature labels have been added (e.g. :interactions, :axis)
  • Unit tests have been added or updated to match the most common scenarios
  • Visual changes have been tested with all available themes including dark, light, eui-dark & eui-light

@markov00 markov00 added bug Something isn't working kibana cross issue Has a Kibana issue counterpart :interactions Interactions related issue :xy Bar/Line/Area chart related labels Nov 2, 2021
@markov00 markov00 changed the title fix(interactions): move the line cursor on the top, the band on the background fix(interactions): line cursor above the chart, band cursor below Nov 2, 2021
Copy link
Contributor

@rshen91 rshen91 left a comment

Choose a reason for hiding this comment

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

Tested locally (using storybook theme light EUI/dark EUI looks good!) LGTM! Such a smart solution breaking the line cursor and line apart! 👍🏻

@nickofthyme nickofthyme merged commit d8d7ee0 into elastic:master Nov 2, 2021
nickofthyme pushed a commit to nickofthyme/elastic-charts that referenced this pull request Nov 2, 2021
nickofthyme pushed a commit that referenced this pull request Nov 2, 2021
## [38.0.2](v38.0.1...v38.0.2) (2021-11-02)

### Bug Fixes

* **interactions:** line cursor above the chart, band cursor below ([#1453](#1453)) ([#1457](#1457)) ([ca004a6](ca004a6))
* **theme:** merge partial with empty initial partial ([#1452](#1452)) ([#1454](#1454)) ([2eadc71](2eadc71))
* **xy:** show mouse cursors on charts with opaque background ([#1447](#1447)) ([#1455](#1455)) ([b416ed5](b416ed5))
nickofthyme pushed a commit that referenced this pull request Nov 3, 2021
## [38.1.4](v38.1.3...v38.1.4) (2021-11-03)

### Bug Fixes

* **interactions:** line cursor above the chart, band cursor below ([#1453](#1453)) ([d8d7ee0](d8d7ee0))
* **theme:** merge partial with empty initial partial ([#1452](#1452)) ([d1e690a](d1e690a))
@nickofthyme
Copy link
Collaborator

🎉 This PR is included in version 38.1.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working :interactions Interactions related issue kibana cross issue Has a Kibana issue counterpart released Issue released publicly :xy Bar/Line/Area chart related
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Axis line covers cursor line
3 participants