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(tooltip): stickTo vertical middle of the cursor #1163

Merged

Conversation

markov00
Copy link
Member

@markov00 markov00 commented May 18, 2021

Summary

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.

May-25-2021 15-37-10

Details

This should be used carefully with the correct tooltip placement:

  • Middle with tooltip placement Left or Right
    The above example shows a tooltip with stickTo: Middle, placement: Left

  • Center (used on vertically oriented charts) with tooltip placement Top or Bottom
    The example shows a tooltip with stickTo: Center, placement: Bottom
    May-25-2021 15-38-56

  • when using Top, Bottom you can use the placement you prefer but usually a good set is: Bottom, Top
    The example shows a tooltip with stickTo: Bottom, placement: Top
    May-25-2021 15-37-45

Connected issues

This complete a missing feature asked by APM regarding the tooltip positioning #921
fix #1108

Checklist

Delete any items that are not applicable to this PR.

  • Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
  • Proper documentation or storybook story was added for features that require explanation or tutorials
  • Unit tests were updated or added to match the most common scenarios

This commit moves the main tooltip anchor within the echContainer,
that keeps track itself of the legend when positioned on top or left of the chart.
This allows us to remove the need to add the legend positional values
 to the chart dimension object
@markov00 markov00 added :tooltip Related to hover tooltip enhancement New feature or request labels May 18, 2021
@markov00 markov00 marked this pull request as ready for review May 25, 2021 14:00
@markov00 markov00 requested review from nickofthyme and rshen91 May 25, 2021 14:00
Copy link
Collaborator

@nickofthyme nickofthyme left a comment

Choose a reason for hiding this comment

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

LGTM, I still need to test more locally but will leave a review in the meantime.

src/components/tooltip/types.ts Outdated Show resolved Hide resolved
src/specs/constants.ts Outdated Show resolved Hide resolved
src/chart_types/xy_chart/utils/dimensions.ts Show resolved Hide resolved
Copy link
Collaborator

@nickofthyme nickofthyme 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 with a multitude of option combinations. LGTM

@markov00 markov00 enabled auto-merge (squash) June 3, 2021 16:44
@markov00 markov00 disabled auto-merge June 3, 2021 18:05
@markov00 markov00 merged commit 380363b into elastic:master Jun 3, 2021
@markov00 markov00 deleted the 2021_05_18-middle_vertical_alignment_tooltip branch June 3, 2021 18:05
nickofthyme pushed a commit that referenced this pull request Jun 4, 2021
# [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 PR is included 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
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
# [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
Labels
enhancement New feature or request released Issue released publicly :tooltip Related to hover tooltip
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Heatmap] the tooltip callout box is centered at the mouse pointer
2 participants