fix: donut center minimum font size #1053
Conversation
Codecov Report
@@ Coverage Diff @@
## main #1053 +/- ##
=======================================
Coverage 85.07% 85.08%
=======================================
Files 822 822
Lines 16923 16924 +1
Branches 2045 2045
=======================================
+ Hits 14398 14399 +1
Misses 2494 2494
Partials 31 31
Continue to review full report at Codecov.
|
This comment has been minimized.
This comment has been minimized.
alok-traceable
requested review from
anandtiwary,
itssharmasandeep and
jake-bassett
| .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`) | ||
| .attr( | ||
| 'font-size', | ||
| Math.min(Math.floor(dimensions.donutInnerRadius / 8), DonutBuilderService.MAX_FONT_SIZE_FOR_TITLE) |
There was a problem hiding this comment.
Code wise looks fine to me.
It is just we have to see what could be the min size for donut and for that case does this title text overflow?
cc: @jake-bassett @anandtiwary
There was a problem hiding this comment.
fair point. Is there a min size for the donut too? If yes, then deciding a min font size would be easier.
There was a problem hiding this comment.
We don't necessarily have a known minimum size for the donut itself, but for our screen sizes we try to test down to 1366-by-768.
As a matter of what to optimize for, I would be more concerned about the text spilling out than it getting too small. I think the overflow would look more broken than the text being illegible.
There was a problem hiding this comment.
So, there would be 2 aspects of this,
- Donut size, with smaller donut size than this, ideally we shouldn't put anything in between. If it is required then we can just put "value with a tooltip" and the font size of the value is still calculated so this PR doesn't affect that logic.
- Font size of the title, the most important thing here should be whether the feature we are putting is usable or not, with a smaller (calculated) font size, even though it looks good but it can't be read without a lens. The title is always static if it is overflowing we should be changing the donut size to make it useable and not reduce the font size to make it look good. IMO usability is always prefered over visuals.
There was a problem hiding this comment.
Agreed on both points. Pick a reasonable cutoff size to hide the center value all together. Maybe if the font gets smaller than 16px or so. You could play with it and see if keeping some indicator there is a value there makes sense. It could be just an ellipsis with a tooltip or the like. Use your best judgement and we can iterate on it a bit if needed.
There was a problem hiding this comment.
I won't recommend hiding the center content dynamically, this would be adding a factor to unpredictability also this would take away the freedom of putting only value at the center without a title.
Anyway, it is a static title and while developing we can always make sure it is not overflowing in any of the supported screen widths and given static title length.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Unit Test Results 4 files 263 suites 15m 17s ⏱️ Results for commit f8d8b7c. |
Description
Change to have a minimum font size of the title text at the donut center, else it can go to unreadable font sizes.
Testing
Tested locally not breaking anything.
Checklist: