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: increase tooltip width to 500px and truncate items to 2 lines #2261

Merged
merged 2 commits into from
Nov 29, 2023

Conversation

mbondyra
Copy link
Contributor

@mbondyra mbondyra commented Nov 28, 2023

Summary

Fixes #2048 (I am not sure if we consider this issue fixed after merging this one)

Auto-expands the tooltip containter to 500px for wider content. The data items in the tooltip now truncate to 2 lines instead of just one.

Screenshot 2023-11-28 at 15 06 15 Screenshot 2023-11-28 at 15 05 32

@mbondyra mbondyra added the :tooltip Related to hover tooltip label Nov 28, 2023
@mbondyra mbondyra force-pushed the tooltip/long_names branch 2 times, most recently from 821cc38 to 4a140b7 Compare November 28, 2023 14:16
@mbondyra mbondyra changed the title [tooltip] increase tooltip width to 500px and truncate items to 2 lines feat: increase tooltip width to 500px and truncate items to 2 lines Nov 28, 2023
@mbondyra mbondyra marked this pull request as ready for review November 28, 2023 16:27
@mbondyra
Copy link
Contributor Author

Thank you @markov00 great tips! I addressed all your comments! 🙇🏼‍♀️

@markov00 markov00 added enhancement New feature or request :all Applies to all chart types labels Nov 29, 2023
@markov00 markov00 self-requested a review November 29, 2023 09:07
Copy link
Member

@markov00 markov00 left a comment

Choose a reason for hiding this comment

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

Changes looks good to me, tested on deployed storybook.
Just re-generate the changed screenshots from the CI rather than from the local machine to correctly match with what the CI is going to match.

@mbondyra
Copy link
Contributor Author

buildkite update vrt

@mbondyra mbondyra enabled auto-merge (squash) November 29, 2023 09:42
@mbondyra mbondyra merged commit afdef1c into elastic:main Nov 29, 2023
13 checks passed
@mbondyra mbondyra deleted the tooltip/long_names branch November 29, 2023 11:24
markov00 pushed a commit to markov00/elastic-charts that referenced this pull request Dec 6, 2023
…lastic#2261)

feat: truncate to 2 + width 500
# Conflicts:
#	e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-break-multiline-legends-with-long-url-characters-chrome-linux.png
markov00 added a commit to markov00/elastic-charts that referenced this pull request Dec 7, 2023
markov00 added a commit to markov00/elastic-charts that referenced this pull request Dec 7, 2023
nickofthyme pushed a commit that referenced this pull request Dec 19, 2023
# [61.2.0](v61.1.0...v61.2.0) (2023-12-19)

### Bug Fixes

* **deps:** update dependency @elastic/eui to ^91.1.0 ([#2267](#2267)) ([308e974](308e974))
* **deps:** update dependency @elastic/eui to ^91.2.0 ([#2268](#2268)) ([29cdcb3](29cdcb3))
* **metric:** background colors and sparkline rendering ([#2255](#2255)) ([5abddfc](5abddfc))
* **partition:** rendering with small radius ([#2273](#2273)) ([95a8537](95a8537))
* **partition:** zero value sectors cause max stack call ([#2260](#2260)) ([4b30db7](4b30db7))
* **theme:** legacy margins ([#2262](#2262)) ([299c869](299c869))

### Features

* increase tooltip width to 500px and truncate items to 2 lines ([#2261](#2261)) ([afdef1c](afdef1c))
markov00 added a commit to elastic/kibana that referenced this pull request Dec 21, 2023
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@elastic/charts](https://togithub.com/elastic/elastic-charts) |
[`61.0.3` ->
`61.2.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/61.0.3/61.2.0)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@elastic%2fcharts/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@elastic%2fcharts/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@elastic%2fcharts/61.0.3/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@elastic%2fcharts/61.0.3/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>elastic/elastic-charts (@&#8203;elastic/charts)</summary>

###
[61.2.0](elastic/elastic-charts@v61.1.0...v61.2.0)
(2023-12-19)


##### Bug Fixes

* **deps:** update dependency @elastic/eui to ^91.1.0
([#2267](elastic/elastic-charts#2267))
([308e974](elastic/elastic-charts@308e974))
* **deps:** update dependency @elastic/eui to ^91.2.0
([#2268](elastic/elastic-charts#2268))
([29cdcb3](elastic/elastic-charts@29cdcb3))
* **metric:** background colors and sparkline rendering
([#2255](elastic/elastic-charts#2255))
([5abddfc](elastic/elastic-charts@5abddfc))
* **partition:** rendering with small radius
([#2273](elastic/elastic-charts#2273))
([95a8537](elastic/elastic-charts@95a8537))
* **partition:** zero value sectors cause max stack call
([#2260](elastic/elastic-charts#2260))
([4b30db7](elastic/elastic-charts@4b30db7))
* **theme:** legacy margins
([#2262](elastic/elastic-charts#2262))
([299c869](elastic/elastic-charts@299c869))


##### Features

* increase tooltip width to 500px and truncate items to 2 lines
([#2261](elastic/elastic-charts#2261))
([afdef1c](elastic/elastic-charts@afdef1c))

###
[`v61.1.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6110-2023-11-20)

[Compare
Source](https://togithub.com/elastic/elastic-charts/compare/v61.0.3...v61.1.0)

##### Bug Fixes

- **deps:** update dependency
[@&#8203;elastic/eui](https://togithub.com/elastic/eui) to v91
([#&#8203;2233](https://togithub.com/elastic/elastic-charts/issues/2233))
([e89f623](https://togithub.com/elastic/elastic-charts/commit/e89f623792312c4f6b609ebb975de0800f3c297e))
- **metric:** add option to set empty cell background color
([#&#8203;2247](https://togithub.com/elastic/elastic-charts/issues/2247))
([6a9fb86](https://togithub.com/elastic/elastic-charts/commit/6a9fb86bee5212a47060c5070f260961097014b4))
- **metric:** background color for bar with interactions
([#&#8203;2248](https://togithub.com/elastic/elastic-charts/issues/2248))
([dcb56fa](https://togithub.com/elastic/elastic-charts/commit/dcb56fa08540631a9b3b0e588352ee6daf3d54a0))

##### Features

- **bullet:** improve header layout and positioning
([#&#8203;2243](https://togithub.com/elastic/elastic-charts/issues/2243))
([b3a95d2](https://togithub.com/elastic/elastic-charts/commit/b3a95d24fb02690ca6599622352c743c04624690))
- **bullet:** new design style and implementation
([#&#8203;2156](https://togithub.com/elastic/elastic-charts/issues/2156))
([fca6cdd](https://togithub.com/elastic/elastic-charts/commit/fca6cdd5bc34a65c0792dbab7d756404bf43501b))

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/elastic/kibana).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy44Ny4yIiwidXBkYXRlZEluVmVyIjoiMzcuMTAzLjEiLCJ0YXJnZXRCcmFuY2giOiJtYWluIn0=-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:all Applies to all chart types enhancement New feature or request :tooltip Related to hover tooltip
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[tooltip] Reconsider tooltip min-width and label truncations
2 participants