Component | Axis: Add tick label rotation

[lee00678]

Following this PR. Moved rotate out of FitMode.

• Adding a new variable called tickTextAngle to allow user to pass in a number for label rotation. This feature should be used along with tickTextAlign to get the desired result (we want to provide more control to the user).
• New dev example
• Add related documentation

[reb-dev]

@lee00678 , looks good!

I noticed an edge case- when a label is very long at the end, the label gets cut off on initial render. On resize, it updates correctly but if we refresh the page we see it again.

Screen.Recording.2024-05-31.at.9.52.42.AM.mov

[lee00678]

@lee00678 , looks good!

I noticed an edge case- when a label is very long at the end, the label gets cut off on initial render. On resize, it updates correctly but if we refresh the page we see it again.

I think this may be an existing issue. Perhaps we should address this in a separate PR?
(Screenshot taken frommain)

Screen.Recording.2024-05-31.at.1.14.30.PM.mov

[reb-dev]

@lee00678

I think this may be an existing issue. Perhaps we should address this in a separate PR? (Screenshot taken frommain)

You're totally right. Let's move to a separate issue.

[rokotyan]

@reb-dev @lee00678 Confirming that the issue has been there before. It's a bit tricky to calculate the required margins automatically and apparently the current logic has some flaws. Let me know if you decide to take a look into it, I can give you a quick walk through explaining how it works.

[lee00678]

@reb-dev @lee00678 Confirming that the issue has been there before. It's a bit tricky to calculate the required margins automatically and apparently the current logic has some flaws. Let me know if you decide to take a look into it, I can give you a quick walk through explaining how it works.

Yea margin calculation could be tricky. I took a brief look at it while implementing this feature. I will add an item to our issue list so we don't forget about it.