Skip to content

fix(axis): truncate title longer then the available space#1905

Merged
markov00 merged 4 commits intoelastic:mainfrom
markov00:2022_12_15-truncate_long_titles
Dec 19, 2022
Merged

fix(axis): truncate title longer then the available space#1905
markov00 merged 4 commits intoelastic:mainfrom
markov00:2022_12_15-truncate_long_titles

Conversation

@markov00
Copy link
Copy Markdown
Collaborator

@markov00 markov00 commented Dec 15, 2022

Summary

Very small change to improve the titles on small multiples: the title are now truncated to the max size available.
The max size consider only the size of the projection of one dimension and doesn't expand further. This because we want the title to be always aligned to the axis center and not to the panel center.
Screenshot 2022-12-15 at 15 29 24

Details

I've applied a 1 line text truncation function on every title directly at the renderer level.

Issues

Partially fix this #1008 (comment)
This PR only addresses Axis titles truncation and not tick label truncation.

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • The proper feature labels have been added (e.g. :interactions, :axis)
  • The :theme label has been added and the @elastic/eui-design team has been pinged when there are Theme API changes
  • All related issues have been linked (i.e. closes #123, fixes #123)
  • New public API exports have been added to packages/charts/src/index.ts
  • Unit tests have been added or updated to match the most common scenarios
  • The proper documentation and/or storybook story has been added or updated
  • The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)
  • Visual changes have been tested with all available themes including dark, light, eui-dark & eui-light

@markov00
Copy link
Copy Markdown
Collaborator Author

@nickofthyme does that interfere with your work on small multiples?

@nickofthyme
Copy link
Copy Markdown
Collaborator

Not at all, this is great! I can adapt the heatmap rendering to implement this as well.

@markov00 markov00 marked this pull request as ready for review December 16, 2022 14:15
@markov00 markov00 requested review from a team and nickofthyme December 16, 2022 14:15
Copy link
Copy Markdown
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, tested on storybook.

@markov00 markov00 merged commit 3526a69 into elastic:main Dec 19, 2022
@markov00 markov00 deleted the 2022_12_15-truncate_long_titles branch December 19, 2022 16:26
nickofthyme pushed a commit that referenced this pull request Dec 19, 2022
# [51.2.0](v51.1.1...v51.2.0) (2022-12-19)

### Bug Fixes

* **axis:** truncate titles longer then the available space ([#1905](#1905)) ([3526a69](3526a69))
* **deps:** update dependency @elastic/eui to ^70.4.0 ([#1893](#1893)) ([6576041](6576041))
* **deps:** update dependency @elastic/eui to v71 ([#1898](#1898)) ([da596a5](da596a5))

### Features

* **legend:** add custom legend component ([#1889](#1889)) ([2e1648d](2e1648d))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants