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

fix(Metric): improve default font-sizing #2548

Merged
merged 24 commits into from
Oct 23, 2024
Merged

fix(Metric): improve default font-sizing #2548

merged 24 commits into from
Oct 23, 2024

Conversation

markov00
Copy link
Member

@markov00 markov00 commented Oct 14, 2024 •
edited
Loading

Summary

This feature adds the snapping option for metric value font size. This behaviour will apply the breaking point font size that is big enough to completely render the value without any truncation/overflow.

fix #2543

Screen.Recording.2024-10-14.at.16.42.10.mp4

Details

I've refactored a bit the metric text code, extracting the various functions and moving the processing/measurement logic in separate files.

Issues

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • 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 light and dark themes

@markov00 markov00 added enhancement New feature or request :metric Related to Metric chart labels Oct 14, 2024
@markov00 markov00 marked this pull request as ready for review October 18, 2024 08:29
@markov00 markov00 requested a review from nickofthyme October 18, 2024 14:41
nickofthyme
nickofthyme reviewed Oct 22, 2024
View reviewed changes
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.

Really nice code structure improvements!

Overall, I like the new behaviors but I had a few questions below. I think we could merge this with the Custom fixes and save the others for later improvements.

packages/charts/src/chart_types/metric/renderer/dom/text_measurements.tsx Outdated Show resolved Hide resolved
packages/charts/src/chart_types/metric/renderer/dom/text_measurements.tsx Show resolved Hide resolved
packages/charts/src/chart_types/metric/renderer/dom/text_measurements.tsx Show resolved Hide resolved
packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx Outdated Show resolved Hide resolved
@markov00 markov00 mentioned this pull request Oct 22, 2024
Open
nickofthyme
nickofthyme approved these changes Oct 22, 2024
View reviewed changes
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.

New changes LGTM. The failing images looks minor related to the appended value string.

@markov00
Copy link
Member Author

buildkite update screenshots

@markov00 markov00 changed the title feat(Metric): add snap to breakpoint fontsize mode fix(Metric): improve default font-sizing Oct 23, 2024
@markov00 markov00 merged commit 2e1178d into elastic:main Oct 23, 2024
14 checks passed
@markov00 markov00 deleted the 2024_10_10-fix_metric_text_resize branch October 23, 2024 09:07
nickofthyme pushed a commit that referenced this pull request Oct 23, 2024
@semantic-release-bot
chore(release): 68.0.1 [skip ci]
d878992 
## [68.0.1](v68.0.0...v68.0.1) (2024-10-23)

### Bug Fixes

* **deps:** update dependency @playwright/test to ^1.47.2 ([#2539](#2539)) ([10d5f40](10d5f40))
* **Metric:** improve default font-sizing ([#2548](#2548)) ([2e1178d](2e1178d))
This was referenced Oct 23, 2024
Merged
Merged
@nickofthyme nickofthyme mentioned this pull request Oct 23, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nickofthyme nickofthyme nickofthyme approved these changes

Assignees
No one assigned
Labels
enhancement New feature or request :metric Related to Metric chart
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Metric Chart] New font-sizes handling might cause existing Metric charts to look off
2 participants
@markov00 @nickofthyme