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.

Sign up for GitHub

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 3 commits into
base: main
Choose a base branch
from
Open

Tooltip and chart styling fixes #535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5217d83
Tooltip and chart styling fixes
ellisl10 Dec 7, 2024
b7063b4
Merge branch 'main' into Grade-Dist-Styling-Fixes
ellisl10 Dec 7, 2024
6d9add2
Merge branch 'main' into Grade-Dist-Styling-Fixes
ellisl10 Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions api/.env.example
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

This is an example file for the format of environment variables, not env variables themselves. It should not be deleted

This file was deleted.

22 changes: 4 additions & 18 deletions site/src/component/GradeDist/Chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { ResponsiveBar, BarTooltipProps, BarDatum } from '@nivo/bar';
import ThemeContext from '../../style/theme-context';
import { type Theme } from '@nivo/core';
import { GradesRaw } from '@peterportal/types';

const colors = ['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#EBEBEB', '#EBEBEB'];
import { Colors } from './Colors.tsx';
import { TooltipStyle } from './TooltipStyle.tsx';

interface ChartProps {
gradeData: GradesRaw;
Expand Down Expand Up @@ -111,20 +111,6 @@ export default class Chart extends React.Component<ChartProps> {
];
};

tooltipStyle: Theme = {
tooltip: {
container: {
background: 'rgba(0,0,0,.87)',
color: '#ffffff',
fontSize: '1.2rem',
outline: 'none',
margin: 0,
padding: '0.25em 0.5em',
borderRadius: '2px',
},
},
};

/*
* Indicate how the tooltip should look like when users hover over the bar
* Code is slightly modified from: https://codesandbox.io/s/nivo-scatterplot-
Expand All @@ -134,7 +120,7 @@ export default class Chart extends React.Component<ChartProps> {
*/
styleTooltip = (props: BarTooltipProps<BarDatum>) => {
return (
<div style={this.tooltipStyle.tooltip?.container}>
<div style={TooltipStyle.tooltip?.container}>
<strong>
{props.label}: {props.data[props.label]}
</strong>
Expand Down Expand Up @@ -184,7 +170,7 @@ export default class Chart extends React.Component<ChartProps> {
legendOffset: 36,
}}
enableLabel={false}
colors={colors}
colors={Colors}
theme={this.getTheme(darkMode)}
tooltipLabel={(datum) => String(datum.id)}
tooltip={this.styleTooltip}
Expand Down
1 change: 1 addition & 0 deletions site/src/component/GradeDist/Colors.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

Generally, files without components should start with lowercase and would end in .ts instead of .tsx, i.e. chartColors.ts

Since Colors is not a component, I suggest renaming this file to colors.ts with an export const colors = [...]

Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const Colors = ['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#EBEBEB', '#EBEBEB'];
33 changes: 16 additions & 17 deletions site/src/component/GradeDist/Pie.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React from 'react';
import { ResponsivePie, PieTooltipProps } from '@nivo/pie';

import { GradesRaw } from '@peterportal/types';
import { Colors } from './Colors.tsx';
import { TooltipStyle } from './TooltipStyle.tsx';

const gradeScale = ['A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-'];
const gpaScale = [4.0, 3.7, 3.3, 3.0, 2.7, 2.3, 2.0, 1.7, 1.3, 1.0, 0, 7];
Expand All @@ -27,7 +29,7 @@ export default class Pie extends React.Component<PieProps> {
averageGrade = '';
averagePNP = '';

getClassData = () => {
getClassData = (): Slice[] => {
let gradeACount = 0,
gradeBCount = 0,
gradeCCount = 0,
Expand Down Expand Up @@ -102,7 +104,7 @@ export default class Pie extends React.Component<PieProps> {
id: 'A',
label: 'A',
value: gradeACount,
color: '#60A3D1',
color: '#54B058',
Copy link
Member

Choose a reason for hiding this comment

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

consider using something like colors[0] for this so we can make these use the same source for colors

},
{
id: 'B',
Expand Down Expand Up @@ -150,6 +152,16 @@ export default class Pie extends React.Component<PieProps> {
this.averageGrade = gradeScale[i];
}

styleTooltip = (props: PieTooltipProps<Slice>) => {
return (
<div style={TooltipStyle.tooltip?.container}>
<strong>
{props.datum.id}: {((props.datum.value / this.total) * 100).toFixed(2)}%
</strong>
</div>
);
};

render() {
return (
<div style={{ width: '100%', position: 'relative' }}>
Expand All @@ -165,24 +177,11 @@ export default class Pie extends React.Component<PieProps> {
enableArcLinkLabels={false}
innerRadius={0.8}
padAngle={2}
colors={['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#4AB486', '#E36436']}
Copy link
Member

Choose a reason for hiding this comment

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

It looks like the last two removed colors here are actually different from the other list. I think we should use the green and red for pass + no pass instead of making them gray

colors={Colors}
cornerRadius={3}
borderWidth={1}
borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
tooltip={(props: PieTooltipProps<Slice>) => (
<div
style={{
color: '#FFFFFF',
background: 'rgba(0,0,0,.87)',
paddingLeft: '0.5em',
paddingRight: '0.5em',
}}
>
<strong>
{props.datum.id}: {((props.datum.value / this.total) * 100).toFixed(2)}%
</strong>
</div>
)}
tooltip={this.styleTooltip}
/>
<div
style={{
Expand Down
17 changes: 17 additions & 0 deletions site/src/component/GradeDist/TooltipStyle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { type Theme } from '@nivo/core';

export const TooltipStyle: Theme = {
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 Colors

tooltip: {
container: {
background: 'rgba(0,0,0,.87)',
color: '#ffffff',
fontSize: '1.2rem',
outline: 'none',
margin: 0,
padding: '0.25em 0.5em',
borderRadius: '2px',
paddingLeft: '0.5em',
paddingRight: '0.5em',
},
},
};
Loading