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

Gauge/Bullet Chart: Labels and ticks handling #2095

Closed
gvnmagni opened this issue Jul 10, 2023 · 2 comments · Fixed by #2156
Closed

Gauge/Bullet Chart: Labels and ticks handling #2095

gvnmagni opened this issue Jul 10, 2023 · 2 comments · Fixed by #2156
Assignees
Labels
:bullet Bullet chart related issues design enhancement New feature or request :styling Styling related issue

Comments

@gvnmagni
Copy link

The goal of this issue is to provide the team instructions on how to deal with labels of ticks for the bullet chart new design. We mainly have two cases, linear gauges (vertical and horizontal) and circular ones.

Linear

The label is positioned at the right of the tick, similar to what happens with time based axis. The last tick though, should behave as labels do when they reach the margin of the chart on the time-axis. They never trespass the limit, they stay fixed until the tick gets out of margin and only then they disappear as well. Hopefully the following images could help in understanding this concept.

Basically, our goal is that labels never get off the chart limit.

Screenshot 2023-07-10 at 16 42 54

Circular

For circular bullet/gauge charts, given the complexity of the case, we prefer to go with a simpler approach. Labels are always centered on the tick, so that we don't have to deal with crazy calculation, and there is no custom of positions according to how close we are to the end of the chart, they just follow the tick.

Screenshot 2023-07-10 at 16 46 38
@gvnmagni gvnmagni added the enhancement New feature or request label Jul 10, 2023
@markov00 markov00 added :styling Styling related issue :goal/gauge (old) Old Goal/Gauge chart related issues design labels Jul 10, 2023
@nickofthyme nickofthyme added :bullet Bullet chart related issues and removed :goal/gauge (old) Old Goal/Gauge chart related issues labels Nov 8, 2023
@nickofthyme
Copy link
Collaborator

nickofthyme commented Nov 8, 2023

Thanks for these example @gvnmagni. I believe we don't exactly follow these guidelines for linear specifically.

As it stands today, the last tick is set to the right/top of the tick when the space allows. If the space does not allow of the tick the value is pushed to the left/bottom of the tick.

Screen Recording 2023-11-08 at 03 08 38 PM

Until which point the tick value is no long within the domain and the tick and tick label are removed.


I'm not sure if there was discussion between you are Marco to address this change but this was the logic when I took over the code from Marco.

If you want the value to be fixed (aka stuck) to the end, we can do this pretty easily just need confirm this change. Would also be in a follow up PR.

@gvnmagni
Copy link
Author

gvnmagni commented Nov 9, 2023

I am totally fine with this approach (and playing with the storybook I liked it a lot), the most important thing to me is to be consistent with the rest of axis on other charts, rather than the actual style of it.

I'm totally fine in going with this technique and re-evaluate that in the future with you and Marco according to IF we want to update that everywhere in a different way. Thank you for taking care of such a detail!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:bullet Bullet chart related issues design enhancement New feature or request :styling Styling related issue
Projects
None yet
3 participants