Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip and chart styling fixes #535

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Conversation

ellisl10
Copy link

@ellisl10 ellisl10 commented Dec 7, 2024

Tooltip and chart styling fixes

Description

Moved color constants and tooltip dimensions/styling to separate files and made dimensions the same.

Screenshots

Before
Screenshot 2024-12-09 at 8 04 34 PM

After
Screenshot 2025-01-01 at 6 17 56 PM

Steps to verify/test this change:

  • Verify changes work as expected on staging instance

Final Checks:

  • Verify successful deployment

(optional)

  • Write tests
  • Write documentation

Issues

Closes #

@ellisl10 ellisl10 marked this pull request as ready for review December 10, 2024 04:05
@Awesome-E Awesome-E linked an issue Dec 11, 2024 that may be closed by this pull request
api/.env.example Outdated Show resolved Hide resolved
site/src/component/GradeDist/Pie.tsx Show resolved Hide resolved
site/src/component/GradeDist/Pie.tsx Outdated Show resolved Hide resolved
site/src/component/GradeDist/Colors.tsx Outdated Show resolved Hide resolved
site/src/component/GradeDist/TooltipStyle.tsx Show resolved Hide resolved
@@ -70,61 +70,46 @@ export default class Chart extends React.Component<ChartProps> {
id: 'A',
label: 'A',
A: gradeACount,
color: '#2484C6',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing colors[0]

Although ideally, we use a typescript enum to name the colors instead of just putting them in a list.

export enum GradeColors {
  A = '#2484C6',
  B = '#54B058',
  // ...
}
// or Blue = '#2484C6', Green = '#54B058', ...
color: GradeColors.A // or color: GradeColors.Blue

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same comment as previous about considering an enum instead of a hard-coded list

@@ -72,7 +72,7 @@ const PrereqTreeNode: FC<TreeProps> = (props) => {
}
content={
props.prerequisiteNames[
prereq.prereqType === 'course' ? prereq.courseId.replace(/ /g, '') : (prereq.examName ?? '')
prereq.prereqType === 'course' ? prereq.courseId.replace(/ /g, '') : prereq.examName ?? ''
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

while this is correct, the precedence of ? : over ?? is not obvious to everyone, so I think this is a change that should be reverted

(unless that was a prettier auto-format)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as previous comment

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like there's still a diff here since the newline at the end was deleted. We should add it back

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Chart / Pie Grade Distributions Styling Fixes
2 participants