Added grade distribution displaying to SectionSelect

[gannonprudhomme]

Description

This adds grade distribution displaying to the SectionSelect for each instructor group. It also adds the counting of the total amount of sections to GradesManager.instructor_performance, so we can display the From X total sections text when the GPA is hovered over (thanks for the idea www.aggiegrades.com)

How to test

Not sure if there are any edge cases that I can think of. I've just been testing it with CSCE 121- 202031, which is my go to typically.

Screenshots

1080p	1440p

Related tasks

Closes #163

[firejake308]

How are you deciding the width? I think it would look better if it ended at the same place as the meeting times

[gannonprudhomme]

How are you deciding the width?

Pretty weird way of doing it honestly, the parent div has 90% and the actual grade dist has 50% lol. Really just tried to make it look good on my screen and left it at that 😛 . Lmk what a more consistent way would be, as I imagine that 50% width is gonna have a bad result on your smaller devices

I think it would look better if it ended at the same place as the meeting times

Honestly how we have it set up currently I'm not sure we can do that right now, although lmk if you have any suggestions. We might have to wait until #238

[gannonprudhomme]

Also just pushed a temp commit that fixes the grade dists appearing on the next line. It's added by #251 I think, so I'll drop it once that gets merged & I rebase this

[firejake308]

Looks good to me. We can work on the alignment, but I think we'll probably have a big PR for all the course card alignment issues later

[firejake308]

Nice! I wouldn't have known to hover over the GPA unless it had been underlined

[rachelconn]

Looks good except for a tiny nitpick that bothers me way more than it should

[rachelconn]

This should check if there's only one section so that it can say "from 1 total section" instead

[gannonprudhomme]

As a reminder for me, here's what we decided from the meeting:

• Right align with show remaining seats?
• Have something to show if there aren’t any grades
  • Gray bar that’s like the grade distribution

[gannonprudhomme]

Updated & resolved the above comments, here's how it looks now:

Normally	When rebased with frontend/show-remaining-seats

Took the right screenshot before No grades available had a right margin, but it does so ignore that

[rachelconn]

Rebase this with master whenever you have time now that show remaining seats has been merged, then I'll review it

[gannonprudhomme]

Attempted to make the grade widths more "deterministic". Basically just makes it grow until it reaches 10rem. I chose 10rem since it was the width that makes it align with the No grades available text (at least on 1080p). Likewise, with this way on smaller screen's it'll take up the entire thing.

Unless y'all have some immediate suggestions for the width rn, I think we can address any further width-determining stuff in a later PR when we address the rest of the SectionSelect layout

1080p	1440p

[rachelconn]

Looks good
Since functionally I don't have any issues with this I'm going to approve it, like you said we can take care of any small css/layout tweaks in a separate PR