diff --git a/site/src/component/GradeDist/Chart.tsx b/site/src/component/GradeDist/Chart.tsx index 2bbe6f87..b762b57f 100644 --- a/site/src/component/GradeDist/Chart.tsx +++ b/site/src/component/GradeDist/Chart.tsx @@ -46,7 +46,7 @@ export default class Chart extends React.Component { * Create an array of objects to feed into the chart. * @return an array of JSON objects detailing the grades for each class */ - getClassData = () => { + getClassData = (): Bar[] => { let gradeACount = 0, gradeBCount = 0, gradeCCount = 0, gradeDCount = 0, gradeFCount = 0, gradePCount = 0, gradeNPCount = 0; @@ -131,16 +131,30 @@ export default class Chart extends React.Component { * @return a JSX block rendering the chart */ render() { + const data = this.getClassData() + + // greatestCount calculates the upper bound of the graph (i.e. the greatest number of students in a single grade) + const greatestCount = data.reduce((max, grade) => ( + grade[grade.id] as number > max + ? grade[grade.id] as number + : max + ), 0); + + // The base marginX is 30, with increments of 5 added on for every order of magnitude greater than 100 to accomadate for larger axis labels (1,000, 10,000, etc) + // For example, if greatestCount is 5173 it is (when rounding down (i.e. floor)), one magnitude (calculated with log_10) greater than 100, therefore we add one increment of 5px to our base marginX of 30px + // Math.max() ensures that we're not finding the log of a non-positive number + const marginX = 30 + (5 * Math.floor(Math.log10(Math.max(100, greatestCount) / 100))) + return <>