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

[Metric] Enhance typography positioning and proportions #2306

Closed
Tracked by #174147
gvnmagni opened this issue Jan 18, 2024 · 1 comment · Fixed by #2437
Closed
Tracked by #174147

[Metric] Enhance typography positioning and proportions #2306

gvnmagni opened this issue Jan 18, 2024 · 1 comment · Fixed by #2437
Assignees
Labels
design enhancement New feature or request :metric Related to Metric chart

Comments

@gvnmagni
Copy link

Due to a relevant amount of feedback, I would propose to improve the positioning and alignment of the primary and secondary value within Metric charts.

The current status of this component force these block of text to be aligned to the right side in order to facilitate vertical comparison of numbers:

Metric Chartaaaa

I would propose to:

  1. include the possibility for the user to decide where to align these elements (left or right)
  2. re-evaluate the current handling of font-size to see if here is room enough to make improvements or to adjust our current breakpoints
  3. once implemented the new alignment, having it by default to the left and having the right one as an alternative

So that we could get this:

Metric Chartbbb

@gvnmagni
Copy link
Author

gvnmagni commented Apr 5, 2024

Hi all, I wanted to share a proposal for a Metric Chart update that takes in consideration the list of feedback received in these last month. I will list here the main concepts and then we will have the chance to discuss in detail...

1. Font sizes: breakpoints
Breakpoints would be defined by panel height instead of width and vertical responsiveness of elements would then be required only in the smallest breakpoints (hide and show elements according to heights). Font sizes have also been enlarged.

Frame 1metric

2. Font sizes: new functionalities
It would be great to introduce two new options that would NOT be activated by default but that would be available to users.
Full-width text that automatically resize it to make it as large as possible, and Custom font size that would allow users to specify the desired font size. This second possibility would be really helpful in case of monitoring dashboards in control rooms where customers might have a better understanding of the context that we can't have on our side.

Frame 2metric

3. Alignments and positioning of elements
Possibility to choose the desired alignment, while having as a default an overall alignment to the left.

Frame 4metric

4. Padding
A little aesthetic detail, a bigger inner padding to make the whole component a little more elegant and clean.

Frame 3metric

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design enhancement New feature or request :metric Related to Metric chart
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants