search

Synthetixio / kwenta

DEPRECATED. Please use: https://github.com/Kwenta/kwenta
MIT License
11 stars 20 forks source link

fix/reduce x-axis label congestion in single view charts #461

Closed kmeraz closed 2 years ago

kmeraz commented 2 years ago

image image

vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/synthetixio/kwenta/5JsHEprDYVsw9SvQCbLs6iSVMrCk
✅ Preview: https://kwenta-git-hotfix-single-charts-mobile-synthetixio.vercel.app

jcmonte commented 2 years ago

image Did you change this to month under every date to account for multiple months?

kmeraz commented 2 years ago

@JChiaramonte7 hey, yeah i could use another aesthetics opinion here. the unique months looked great, but they weren't aligning correctly. If you look at this screenshot, June should've been at the far left edge but instead the unique months are being centered along the x-axis.

image

So I pushed a commit with another approach where I'm stacking the date/month values instead, within the same XAxis component (so, only ever 1 XAxis component). We can set how often to render them (via the interval prop on the X-Axis). The ideal setup would be to use a media query to change the interval value based on the width of the screen. For example, when the screen is big, make interval={0} so no date/months are skipped. When the screen is tiny, maybe make it interval={10} so we can have 10 date/months skipped, so they don't overlap and collide with each other. The next step I was taking is to look at the best way to do media queries in javascript on our codebase, given that we use styled-components. Happy to hear another opinion from an aesthetics perspective if you have one.

jcmonte commented 2 years ago

@JChiaramonte7 hey, yeah i could use another aesthetics opinion here. the unique months looked great, but they weren't aligning correctly. If you look at this screenshot, June should've been at the far left edge but instead the unique months are being centered along the x-axis.

image

So I pushed a commit with another approach where I'm stacking the date/month values instead, within the same XAxis component (so, only ever 1 XAxis component). We can set how often to render them (via the interval prop on the X-Axis). The ideal setup would be to use a media query to change the interval value based on the width of the screen. For example, when the screen is big, make interval={0} so no date/months are skipped. When the screen is tiny, maybe make it interval={10} so we can have 10 date/months skipped, so they don't overlap and collide with each other. The next step I was taking is to look at the best way to do media queries in javascript on our codebase, given that we use styled-components. Happy to hear another opinion from an aesthetics perspective if you have one.

I think what you did looks better than unevenly spaced dates, but I would get an approval from Andrew because I know he didn't really want to stack the months vertically.

jcmonte commented 2 years ago

https://recharts.org/en-US/api/XAxis#angle

Did you try adjusting the angle of the x-axis?

image