From 5217d839258adff9e87f5820252e961c7b8821a2 Mon Sep 17 00:00:00 2001 From: Ellis Liang Date: Fri, 6 Dec 2024 19:19:17 -0800 Subject: [PATCH 1/3] Tooltip and chart styling fixes --- api/.env.example | 13 -------- site/src/component/GradeDist/Chart.tsx | 22 +++---------- site/src/component/GradeDist/Colors.tsx | 1 + site/src/component/GradeDist/Pie.tsx | 33 +++++++++---------- site/src/component/GradeDist/TooltipStyle.tsx | 17 ++++++++++ 5 files changed, 38 insertions(+), 48 deletions(-) delete mode 100644 api/.env.example create mode 100644 site/src/component/GradeDist/Colors.tsx create mode 100644 site/src/component/GradeDist/TooltipStyle.tsx diff --git a/api/.env.example b/api/.env.example deleted file mode 100644 index 211e6f00..00000000 --- a/api/.env.example +++ /dev/null @@ -1,13 +0,0 @@ -# these are the minimum variables required to run the backend -PUBLIC_API_URL=https://anteaterapi.com/v2/rest/ -PORT=8080 # should match the port on the frontend proxy under site/vite.config.ts - -# below are stubs of variables/secrets for the PostgreSQL database, google oauth, and recaptcha -# these are necessary for features that require logging in -# DATABASE_URL= -# SESSION_SECRET= -# GOOGLE_CLIENT= -# GOOGLE_SECRET= -# GRECAPTCHA_SECRET= -# ADMIN_EMAILS=[""] -# ANTEATER_API_KEY= diff --git a/site/src/component/GradeDist/Chart.tsx b/site/src/component/GradeDist/Chart.tsx index be3fa5a4..bd679a05 100644 --- a/site/src/component/GradeDist/Chart.tsx +++ b/site/src/component/GradeDist/Chart.tsx @@ -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; @@ -111,20 +111,6 @@ export default class Chart extends React.Component { ]; }; - 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- @@ -134,7 +120,7 @@ export default class Chart extends React.Component { */ styleTooltip = (props: BarTooltipProps) => { return ( -
+
{props.label}: {props.data[props.label]} @@ -184,7 +170,7 @@ export default class Chart extends React.Component { legendOffset: 36, }} enableLabel={false} - colors={colors} + colors={Colors} theme={this.getTheme(darkMode)} tooltipLabel={(datum) => String(datum.id)} tooltip={this.styleTooltip} diff --git a/site/src/component/GradeDist/Colors.tsx b/site/src/component/GradeDist/Colors.tsx new file mode 100644 index 00000000..5f2aa2a6 --- /dev/null +++ b/site/src/component/GradeDist/Colors.tsx @@ -0,0 +1 @@ +export const Colors = ['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#EBEBEB', '#EBEBEB']; diff --git a/site/src/component/GradeDist/Pie.tsx b/site/src/component/GradeDist/Pie.tsx index 2d41bfb3..f8b98e7a 100644 --- a/site/src/component/GradeDist/Pie.tsx +++ b/site/src/component/GradeDist/Pie.tsx @@ -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]; @@ -27,7 +29,7 @@ export default class Pie extends React.Component { averageGrade = ''; averagePNP = ''; - getClassData = () => { + getClassData = (): Slice[] => { let gradeACount = 0, gradeBCount = 0, gradeCCount = 0, @@ -102,7 +104,7 @@ export default class Pie extends React.Component { id: 'A', label: 'A', value: gradeACount, - color: '#60A3D1', + color: '#54B058', }, { id: 'B', @@ -150,6 +152,16 @@ export default class Pie extends React.Component { this.averageGrade = gradeScale[i]; } + styleTooltip = (props: PieTooltipProps) => { + return ( +
+ + {props.datum.id}: {((props.datum.value / this.total) * 100).toFixed(2)}% + +
+ ); + }; + render() { return (
@@ -165,24 +177,11 @@ export default class Pie extends React.Component { enableArcLinkLabels={false} innerRadius={0.8} padAngle={2} - colors={['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#4AB486', '#E36436']} + colors={Colors} cornerRadius={3} borderWidth={1} borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }} - tooltip={(props: PieTooltipProps) => ( -
- - {props.datum.id}: {((props.datum.value / this.total) * 100).toFixed(2)}% - -
- )} + tooltip={this.styleTooltip} />
Date: Wed, 1 Jan 2025 17:42:23 -0800 Subject: [PATCH 2/3] Tooltip and chart styling fixes --- site/src/component/GradeDist/Chart.tsx | 33 ++++--------- site/src/component/GradeDist/Pie.tsx | 49 ++++++++++---------- site/src/component/GradeDist/colors.ts | 1 + site/src/component/GradeDist/tooltipStyle.ts | 17 +++++++ 4 files changed, 51 insertions(+), 49 deletions(-) create mode 100644 site/src/component/GradeDist/colors.ts create mode 100644 site/src/component/GradeDist/tooltipStyle.ts diff --git a/site/src/component/GradeDist/Chart.tsx b/site/src/component/GradeDist/Chart.tsx index be3fa5a4..23abdc6b 100644 --- a/site/src/component/GradeDist/Chart.tsx +++ b/site/src/component/GradeDist/Chart.tsx @@ -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.ts'; +import { tooltipStyle } from './tooltipStyle.ts'; interface ChartProps { gradeData: GradesRaw; @@ -70,61 +70,46 @@ export default class Chart extends React.Component { id: 'A', label: 'A', A: gradeACount, - color: '#2484C6', }, { id: 'B', label: 'B', B: gradeBCount, - color: '#54B058', + color: colors[1], }, { id: 'C', label: 'C', C: gradeCCount, - color: '#F9CE50', + color: colors[2], }, { id: 'D', label: 'D', D: gradeDCount, - color: '#ED9237', + color: colors[3], }, { id: 'F', label: 'F', F: gradeFCount, - color: '#E67237', + color: colors[4], }, { id: 'P', label: 'P', P: gradePCount, - color: '#4AB486', + color: colors[5], }, { id: 'NP', label: 'NP', NP: gradeNPCount, - color: '#E36436', + color: colors[6], }, ]; }; - 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- @@ -134,7 +119,7 @@ export default class Chart extends React.Component { */ styleTooltip = (props: BarTooltipProps) => { return ( -
+
{props.label}: {props.data[props.label]} diff --git a/site/src/component/GradeDist/Pie.tsx b/site/src/component/GradeDist/Pie.tsx index 2d41bfb3..fa9f144a 100644 --- a/site/src/component/GradeDist/Pie.tsx +++ b/site/src/component/GradeDist/Pie.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { ResponsivePie, PieTooltipProps } from '@nivo/pie'; import { GradesRaw } from '@peterportal/types'; +import { colors } from './colors.ts'; +import { tooltipStyle } from './tooltipStyle.ts'; 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]; @@ -27,7 +29,7 @@ export default class Pie extends React.Component { averageGrade = ''; averagePNP = ''; - getClassData = () => { + getClassData = (): Slice[] => { let gradeACount = 0, gradeBCount = 0, gradeCCount = 0, @@ -85,13 +87,13 @@ export default class Pie extends React.Component { id: 'P', label: 'P', value: gradePCount, - color: '#4AB486', + color: colors[5], }, { id: 'NP', label: 'NP', value: gradeNPCount, - color: '#E36436', + color: colors[6], }, ]; return data; @@ -102,43 +104,43 @@ export default class Pie extends React.Component { id: 'A', label: 'A', value: gradeACount, - color: '#60A3D1', + color: colors[0], }, { id: 'B', label: 'B', value: gradeBCount, - color: '#81C284', + color: colors[1], }, { id: 'C', label: 'C', value: gradeCCount, - color: '#F5D77F', + color: colors[2], }, { id: 'D', label: 'D', value: gradeDCount, - color: '#ECAD6D', + color: colors[3], }, { id: 'F', label: 'F', value: gradeFCount, - color: '#E8966D', + color: colors[4], }, { id: 'P', label: 'P', value: gradePCount, - color: '#4AB486', + color: colors[5], }, { id: 'NP', label: 'NP', value: gradeNPCount, - color: '#E36436', + color: colors[6], }, ]; return data; @@ -150,6 +152,16 @@ export default class Pie extends React.Component { this.averageGrade = gradeScale[i]; } + styleTooltip = (props: PieTooltipProps) => { + return ( +
+ + {props.datum.id}: {((props.datum.value / this.total) * 100).toFixed(2)}% + +
+ ); + }; + render() { return (
@@ -165,24 +177,11 @@ export default class Pie extends React.Component { enableArcLinkLabels={false} innerRadius={0.8} padAngle={2} - colors={['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#4AB486', '#E36436']} + colors={colors} cornerRadius={3} borderWidth={1} borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }} - tooltip={(props: PieTooltipProps) => ( -
- - {props.datum.id}: {((props.datum.value / this.total) * 100).toFixed(2)}% - -
- )} + tooltip={this.styleTooltip} />
Date: Wed, 1 Jan 2025 18:15:02 -0800 Subject: [PATCH 3/3] Un-deleted .env.example --- api/.env.example | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 api/.env.example diff --git a/api/.env.example b/api/.env.example new file mode 100644 index 00000000..8961c24a --- /dev/null +++ b/api/.env.example @@ -0,0 +1,13 @@ +# these are the minimum variables required to run the backend +PUBLIC_API_URL=https://anteaterapi.com/v2/rest/ +PORT=8080 # should match the port on the frontend proxy under site/vite.config.ts + +# below are stubs of variables/secrets for the PostgreSQL database, google oauth, and recaptcha +# these are necessary for features that require logging in +# DATABASE_URL= +# SESSION_SECRET= +# GOOGLE_CLIENT= +# GOOGLE_SECRET= +# GRECAPTCHA_SECRET= +# ADMIN_EMAILS=[""] +# ANTEATER_API_KEY= \ No newline at end of file