Use react-chartjs-2 for assignment grade distribution chart

app/assets/javascripts/Components/dashboard.jsx

@@ -30,7 +30,8 @@ class Dashboard extends React.Component {
             backgroundColor: 'rgb(75, 192, 192)',
           },
         ],
-      }
+      },
+      options: {}
     };
   }
 
@@ -42,6 +43,10 @@ class Dashboard extends React.Component {
         // TODO
       } else if (this.state.assessment_type === 'Assignment') {
         // TODO
+        $.ajax({
+          url: Routes.grade_distribution_graph_data_assignment_path(this.state.assessment_id),
+          dataType: 'json',
+        }).then(res => this.setState({data: res.data, options: res.options}))
       }
     }
   }
@@ -50,7 +55,7 @@ class Dashboard extends React.Component {
     if (this.state.display_course_summary) {
       return <Bar data={this.state.data} />;
     } else if (this.state.assessment_type === 'Assignment') {
-      return <Bar data={this.state.data} />;
+      return <Bar data={this.state.data} options={this.state.options} />;
     } else if (this.state.assessment_type === 'GradeEntryForm') {
       return (
         <div>

app/controllers/assignments_controller.rb

@@ -309,6 +309,38 @@ def batch_runs
     end
   end
 
+  # Return the chart data of assignment grade distributions
+  def grade_distribution_graph_data
+    assignment = Assignment.find(params[:id])
+    labels = []
+    (0..19).each { |i| labels.push((5 * i).to_s + '-' + (5 * i + 5).to_s) }
+    datasets = [
+      {
+        data: assignment.grade_distribution_array,
+        backgroundColor: [
+          'rgba(36, 81, 133, 1)'
+        ],
+        borderColor: [
+          'rgba(36, 81, 133, 1)'
+        ],
+        borderWidth: 1
+      }
+    ]
+    data = { labels: labels, datasets: datasets }
+    options = {
+      scales: {
+        xAxes: [{
+                  ticks: {
+                    min: 0,
+                    max: 100,
+                    stepSize: 10
+                  }
+                }]
+      }
+    }
+    render json: { data: data, options: options }
+  end
+
   # Refreshes the grade distribution graph
   def refresh_graph
     @assignment = Assignment.find(params[:id])

config/routes.rb

@@ -87,6 +87,7 @@
       put 'start_timed_assignment'
       get 'starter_file'
       put 'update_starter_file'
+      get 'grade_distribution_graph_data'
     end
 
     resources :starter_file_groups do

spec/routing/routes_spec.rb

@@ -126,6 +126,13 @@
                      action: 'start_timed_assignment',
                      id: assignment.id.to_s)
     end
+
+    it 'routes GET grade_distribution_graph_data properly' do
+      expect(get: path + '/' + assignment.id.to_s + '/grade_distribution_graph_data')
+        .to route_to(controller: ctrl,
+                     action: 'grade_distribution_graph_data',
+                     id: assignment.id.to_s)
+    end
   end
   # end Assignment member route tests