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(bullet): improve header layout and positioning #2243

Merged
merged 5 commits into from
Nov 13, 2023

Conversation

nickofthyme
Copy link
Collaborator

@nickofthyme nickofthyme commented Nov 12, 2023

Summary

Improves positioning of title. subtitle, value and target

Details

Positioning changes

Previously we used a font size and line height approach that left the baselines of the subtitle/title misaligned with the value/target. This was fixed by using a common baseline for the value/target and the subtitle (or title if no subtitle) along with ctx.textBaseline = 'alphabetic'.

In addition to using a common bottom baseline, we consider the height of the text using an approximation of the ascent, see diagram below, along with a defined line spacing for elements allowed to render multiple lines, for now this is just the title.

image

With this approach we can better space the text without having overly padded gaps or line heights, with better control over the overall sizing and spacing. With this change the baselines always matchup nicely...

Screen Recording 2023-11-12 at 10 35 37 AM

This way no matter if there is a title or subtitle or multiline title, it always aligns the bottom-most left side text with the bottom-most right side text. This also accounts for cases where the value font size is greater than a single title line.

Break points for stacking value/target below title/subtitle when...

  • available width (95%) < 50% of total header width
    • AND
      • title width > available width (95%) - CASE 1
      • OR
      • subtitle width > available width (95%) - CASE 2

      This case is more typical with longer target/value widths

  • OR
  • title text is fully wrapped (just about to truncate) in available width (95%) - CASE 3
  • OR
  • subtitle text is fully wrapped (just about to truncate) in available width (95%) - CASE 4

This means no more allowing title to extend over the top of the value/target label.

I am happy to tweak or add to this but this is what I came up from discussing with @gvnmagni and made some assumptions on my own. This way we are not too eager to stack the target value when it's not needed and tends to fill the space the best.

This change look something like this...

Case Demo
CASE 1 Screen Recording 2023-11-12 at 11 04 46 AM
CASE 2 Screen Recording 2023-11-12 at 11 02 30 AM
CASE 3 Screen Recording 2023-11-12 at 11 07 24 AM
CASE 4 Screen Recording 2023-11-12 at 10 58 31 AM

Issues

closes #2235

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • The proper feature labels have been added (e.g. :interactions, :axis)
  • 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

@nickofthyme nickofthyme added :styling Styling related issue :bullet Bullet chart related issues labels Nov 12, 2023
@gvnmagni
Copy link

This is one of the most satisfying thing to watch ever, it is brilliant and seem to work perfectly! Approved with compliments to the chef 👍

@nickofthyme
Copy link
Collaborator Author

buildkite update screenshots

@nickofthyme nickofthyme marked this pull request as ready for review November 13, 2023 17:43
@nickofthyme nickofthyme merged commit b3a95d2 into elastic:main Nov 13, 2023
13 checks passed
@nickofthyme nickofthyme deleted the fix-bullet-header-layout branch November 13, 2023 21:51
nickofthyme pushed a commit that referenced this pull request Nov 20, 2023
# [61.1.0](v61.0.0...v61.1.0) (2023-11-20)

### Bug Fixes

* **deps:** update dependency @elastic/eui to v91 ([#2233](#2233)) ([e89f623](e89f623))
* **metric:** add option to set empty cell background color ([#2247](#2247)) ([6a9fb86](6a9fb86))
* **metric:** background color for bar with interactions ([#2248](#2248)) ([dcb56fa](dcb56fa))

### Features

* **bullet:** improve header layout and positioning ([#2243](#2243)) ([b3a95d2](b3a95d2))
* **bullet:** new design style and implementation ([#2156](#2156)) ([fca6cdd](fca6cdd))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:bullet Bullet chart related issues :styling Styling related issue
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bullet label positioning improvements
2 participants