UI and UX issues with (very) large leaderboards

jeroenheijmans / advent-of-code-charts

Inject charts in your private leaderboard page for Advent of Code

MIT License

118 stars 21 forks source link

UI and UX issues with (very) large leaderboards #70

Closed Kroppeb closed 1 year ago

Kroppeb commented 1 year ago

I'm in one of the official kotlin leaderboards, and it's filled with 200 people, which results in some ui issues.

Kroppeb commented 1 year ago

The graph is really small and the title of the graph overlaps with the users

jeroenheijmans commented 1 year ago

I see your point :D

I'm also on such a leaderboard, equally unusable. A half-baked workaround currently is to switch this toggle:

"responsive" button

But it would be good to get a proper fix in for this. Not sure what that'd be, if ChartJS offers anything for this situation. Would need to investigate.

PS. I'm extremely busy this December, so no promises if/when I'd get to this, sorry!

jeroenheijmans commented 1 year ago

Going to look into this now as the final thing to do before I let it sit till fall (and know if there's gonna be a 2023 AoC at all).

Have done a bunch of things in #79 already including #81 upgrade of Chart.js, which changed this behavior already a lot. Right now the legend just clips its content:

Still not great so I want to improve it. Current thinking is for leaderboards with more than N (=40?) people on it, to

Make everyone except the "currently logged in user" (if known) less opaque.
Hide legend items for all except (1) the "currently logged in user" (if known) and (2) the top N players

jeroenheijmans commented 1 year ago

Various different improvements are incoming in a second:

(if logged in user is known) z-index of the logged in user on top of things
(if logged in user is known) extra thick line and points for logged in user
for large leaderboards all lines get muted (transparent) a bit
legend will only show logged in user (if known) + 40 (or 25 on small viewports) entries (lines for others are still shown though)
"responsive" mode has been removed for now as it was buggy
much less padding on legend items
smaller colored boxes for legend items

Screenshot sneak peek: