-
Notifications
You must be signed in to change notification settings - Fork 122
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
feat(tooltip): stickTo vertical middle of the cursor #1163
Conversation
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
There was a problem hiding this 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/chart_types/xy_chart/state/selectors/get_annotation_tooltip_state.ts
Show resolved
Hide resolved
There was a problem hiding this 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
# [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
🎉 This PR is included in version 30.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
# [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
Summary
The
Settings.tooltip.stickTo
prop, used to fix the tooltip movement on the free axis cursor, is enhanced withMiddle
,Center
andMousePosition
values.MousePosition
is the default behavior that moves the tooltip along the free axis following the cursor position.Middle
andCenter
can be used to fix the tooltip position in the middle of the chart respective for horizontally laid charts and the vertical ones.Details
This should be used carefully with the correct tooltip placement:
Middle
with tooltip placementLeft
orRight
The above example shows a tooltip with
stickTo: Middle, placement: Left
Center
(used on vertically oriented charts) with tooltip placementTop
orBottom
The example shows a tooltip with
stickTo: Center, placement: Bottom
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
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.
src/index.ts
(and stories only import from../src
except for test data & storybook)