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

[Heatmap] the tooltip callout box is centered at the mouse pointer #1108

Closed
2 tasks
monfera opened this issue Apr 6, 2021 · 25 comments · Fixed by #1163
Closed
2 tasks

[Heatmap] the tooltip callout box is centered at the mouse pointer #1108

monfera opened this issue Apr 6, 2021 · 25 comments · Fixed by #1163
Labels
bug Something isn't working :heatmap Heatmap/Swimlane chart related issue released on @32.x released on @38.1.x released Issue released publicly :tooltip Related to hover tooltip

Comments

@monfera
Copy link
Contributor

monfera commented Apr 6, 2021

Describe the bug
It looks like it's partly a bug (vertical centering) and partly, a less than optimal user experience, or issue, depending on circumstances (horizontal snap with some offset, which causes the occlusion of the very hovered thing):

image
The cursor is not visible on the screenshot; it's over Deborah / 1965.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://elastic.github.io/elastic-charts/?path=/story/heatmap-alpha--categorical
  2. Hover over cells, at various window widths

Expected behaviour
I think that ensuring that the tooltip box is always to the right and below (or maybe above) of the mouse pointer, or even the cell (in this case, with a callout arrow pointing to the cell) would be better

Checklist

Delete any items that are not applicable to this issue.

  • every related Kibana issue is listed under Kibana Cross Issues list
  • kibana cross issue tag is associated to the issue if any kibana cross issue is present
@monfera monfera added bug Something isn't working :tooltip Related to hover tooltip :heatmap Heatmap/Swimlane chart related issue labels Apr 6, 2021
@markov00
Copy link
Member

markov00 commented Apr 7, 2021

hei @darnautov are aware of this issue?

@darnautov
Copy link
Contributor

thanks for creating an issue, it is not the case with another story tho. I'll work on a fix 👍

@markov00 markov00 mentioned this issue May 26, 2021
Merged
3 tasks
@markov00
Copy link
Member

This will be fixed in #1163 @darnautov you can see the fix here: https://github.com/elastic/elastic-charts/pull/1163/files#diff-d3b5933a97ba501883dea0379024b3a27b0afbe64480e581cf915c1fd0ef5660
instead of using the center of the cell as anchor point for the tooltip:

x1: firstShape.x + chartDimensions.left + firstShape.width / 2,

I've changed that to anchor the tooltip around the cell shape:

x: firstShape.x + chartDimensions.left,
width: firstShape.width,
y: firstShape.y - chartDimensions.top,
height: firstShape.height,

markov00 added a commit that referenced this issue Jun 3, 2021
@markov00 @nickofthyme
feat(tooltip): stickTo vertical middle of the cursor (#1163)
380363b 
The `Settings.tooltip.stickTo` prop, used to fix the tooltip movement on the free axis cursor, is enhanced with `Middle`, `Center` and `MousePosition` values. `MousePosition` is the default behavior that moves the tooltip along the free axis following the cursor position. `Middle` and `Center` can be used to fix the tooltip position in the middle of the chart respective for horizontally laid charts and the vertical ones.

fix #1108

Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>
nickofthyme pushed a commit that referenced this issue Jun 4, 2021
@semantic-release-bot
chore(release): 30.0.0 [skip ci]
7b80f7e 
# [30.0.0](v29.2.0...v30.0.0) (2021-06-04)

### Bug Fixes

* **domain:** custom domain should not filter data ([#1181](#1181)) ([76e8dca](76e8dca)), closes [#1129](#1129)
* **value_labels:** zero as a valid value for textBorder and borderWidth ([#1182](#1182)) ([a64f333](a64f333))
* annotation tooltip display when remounting specs ([#1167](#1167)) ([8408600](8408600))
* render nodeLabel formatted text into the nodes ([#1173](#1173)) ([b44bdff](b44bdff))

### Features

* **axis:** allow pixel domain padding for y axes  ([#1145](#1145)) ([7c1fa8e](7c1fa8e))
* apply value formatter to the default legend item label ([#1190](#1190)) ([71474a5](71474a5))
* **tooltip:** stickTo vertical middle of the cursor ([#1163](#1163)) ([380363b](380363b)), closes [#1108](#1108)
* **wordcloud:** click and over events on text ([#1180](#1180)) ([196fb6a](196fb6a)), closes [#1156](#1156)

### BREAKING CHANGES

* **value_labels:** the `textBorder` of `ValueFillDefinition` is now optional or a number only
@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 30.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme nickofthyme added the released Issue released publicly label Jun 4, 2021
@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 31.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 32.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 33.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 33.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 32.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 33.0.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 33.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 33.2.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 34.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 34.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 34.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 34.2.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 35.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 37.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 38.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 38.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 38.1.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 38.1.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 38.1.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 mentioned this issue Nov 3, 2021
Closed
@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 39.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 mentioned this issue Nov 9, 2021
Merged
@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 38.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this issue Feb 10, 2022
@semantic-release-bot
chore(release): 30.0.0 [skip ci]
6f3b392 
# [30.0.0](elastic/elastic-charts@v29.2.0...v30.0.0) (2021-06-04)

### Bug Fixes

* **domain:** custom domain should not filter data ([opensearch-project#1181](elastic/elastic-charts#1181)) ([92ba84c](elastic/elastic-charts@92ba84c)), closes [opensearch-project#1129](elastic/elastic-charts#1129)
* **value_labels:** zero as a valid value for textBorder and borderWidth ([#1182](elastic/elastic-charts#1182)) ([880fbf1](elastic/elastic-charts@880fbf1))
* annotation tooltip display when remounting specs ([opensearch-project#1167](elastic/elastic-charts#1167)) ([7163951](elastic/elastic-charts@7163951))
* render nodeLabel formatted text into the nodes ([opensearch-project#1173](elastic/elastic-charts#1173)) ([0de9688](elastic/elastic-charts@0de9688))

### Features

* **axis:** allow pixel domain padding for y axes  ([#1145](elastic/elastic-charts#1145)) ([6787728](elastic/elastic-charts@6787728))
* apply value formatter to the default legend item label ([opensearch-project#1190](elastic/elastic-charts#1190)) ([20108bb](elastic/elastic-charts@20108bb))
* **tooltip:** stickTo vertical middle of the cursor ([#1163](elastic/elastic-charts#1163)) ([b858fb3](elastic/elastic-charts@b858fb3)), closes [opensearch-project#1108](elastic/elastic-charts#1108)
* **wordcloud:** click and over events on text ([opensearch-project#1180](elastic/elastic-charts#1180)) ([adbf341](elastic/elastic-charts@adbf341)), closes [opensearch-project#1156](elastic/elastic-charts#1156)

### BREAKING CHANGES

* **value_labels:** the `textBorder` of `ValueFillDefinition` is now optional or a number only
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working :heatmap Heatmap/Swimlane chart related issue released on @32.x released on @38.1.x released Issue released publicly :tooltip Related to hover tooltip
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(tooltip): stickTo vertical middle of the cursor markov00/elastic-charts
4 participants
@markov00 @monfera @darnautov @nickofthyme