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.

Sign up for GitHub

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

Jump to bottom

Interactive elements render when chart is not interactive #1074

Closed
spalger opened this issue Mar 11, 2021 · 3 comments · Fixed by #1131
Closed

Interactive elements render when chart is not interactive #1074

spalger opened this issue Mar 11, 2021 · 3 comments · Fixed by #1131
Assignees
@markov00
Labels
bug Something isn't working :interactions Interactions related issue released Issue released publicly

Comments

@spalger
Copy link
Contributor

spalger commented Mar 11, 2021 •
edited by markov00
Loading

Describe the bug
I'm rendering charts at https://ci-stats.kibana.dev which are not interactive, but the .echCrosshair__crossLine and .echCrosshair__cursor elements are still rendered, and don't seem to be positioned correctly, causing them to be rendered off to the right of the chart (probably based on the rules of the container or something) requiring that I use display: none; to hide these elements.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://ci-stats.kibana.dev/
  2. Inspect one of the sparkline charts
  3. Look for the .echCrosshair__crossLine element and disable the display: none; CSS rule in the inspector

Expected behaviour
These element probably shouldn't be rendered if the chart isn't interactive, or they should at least be rendered within the container of the chart.

Screenshots
image

Version (please complete the following information):

  • OS: any
  • Browser: Chrome
  • Elastic Charts: 25.1.1
@spalger spalger added the bug Something isn't working label Mar 11, 2021
@markov00
Copy link
Member

The solution should fix these two issues:

  • completely remove the SVG elements for crosshair if the interaction is disabled
  • we should add the top and left properties to the echCrosshair class because the described behavior is caused by the text-align:right style coming from the parent container via euiStat--rightAligned class. Our SVGs have a position:absolute but no position applied and they are pushed to the right of the subsequent existing element see https://codesandbox.io/s/misty-forest-7m92u?file=/index.html:304-321.

@markov00 markov00 added the :interactions Interactions related issue label Mar 16, 2021
@markov00
Copy link
Member

adding a third issue to handle: the tooltip portal echTooltipPortalMainTooltip__ should be removed if not tooltip is None

@markov00 markov00 self-assigned this Apr 22, 2021
markov00 added a commit to markov00/elastic-charts that referenced this issue Apr 22, 2021
@markov00
fix(interaction): remove unnecessary elements
1f3473c 
Remove DOM element when not needed.

fix elastic#1074
@markov00 markov00 mentioned this issue Apr 22, 2021
Merged
markov00 added a commit that referenced this issue Apr 23, 2021
@markov00
fix(interaction): remove unnecessary elements (#1131)
411042f 
Remove DOM element when not needed.

fix #1074
nickofthyme pushed a commit that referenced this issue Apr 23, 2021
@semantic-release-bot
chore(release): 29.1.0 [skip ci]
21ecc5f 
# [29.1.0](v29.0.0...v29.1.0) (2021-04-23)

### Bug Fixes

* **interaction:** remove unnecessary elements ([#1131](#1131)) ([411042f](411042f)), closes [#1074](#1074)
* **partition:**  fix safari highlight bug on single slice ([#1132](#1132)) ([4a04063](4a04063)), closes [#1085](#1085)

### Features

* **tooltip:** add stickTo option ([#1122](#1122)) ([12417e2](12417e2)), closes [#921](#921)
@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 29.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme nickofthyme added the released Issue released publicly label Apr 23, 2021
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this issue Feb 10, 2022
@semantic-release-bot
chore(release): 29.1.0 [skip ci]
cd3f768 
# [29.1.0](elastic/elastic-charts@v29.0.0...v29.1.0) (2021-04-23)

### Bug Fixes

* **interaction:** remove unnecessary elements ([opensearch-project#1131](elastic/elastic-charts#1131)) ([dde7bdb](elastic/elastic-charts@dde7bdb)), closes [opensearch-project#1074](elastic/elastic-charts#1074)
* **partition:**  fix safari highlight bug on single slice ([opensearch-project#1132](elastic/elastic-charts#1132)) ([729c179](elastic/elastic-charts@729c179)), closes [opensearch-project#1085](elastic/elastic-charts#1085)

### Features

* **tooltip:** add stickTo option ([opensearch-project#1122](elastic/elastic-charts#1122)) ([534f2a3](elastic/elastic-charts@534f2a3)), closes [opensearch-project#921](elastic/elastic-charts#921)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@markov00 markov00

Labels
bug Something isn't working :interactions Interactions related issue released Issue released publicly
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(interaction): remove unnecessary elements markov00/elastic-charts
3 participants
@spalger @markov00 @nickofthyme