Merge branch 'master' into mobileCourseOverflow

site/src/component/GradeDist/Chart.tsx

@@ -46,7 +46,7 @@ export default class Chart extends React.Component<ChartProps> {
  * 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<ChartProps> {
  * @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 <>
  <ResponsiveBar
- data={this.getClassData()}
+ data={data}
  keys={['A', 'B', 'C', 'D', 'F', 'P', 'NP']}
  indexBy='label'
  margin={{
  top: 50,
- right: 30,
+ right: marginX,
  bottom: 50,
- left: 30
+ left: marginX,
  }}
  layout='vertical'
  axisBottom={{