Use react-chartjs-2 for assignment grade distribution chart

app/assets/javascripts/Components/dashboard.jsx

@@ -42,6 +42,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}))
       }
     }
   }

app/controllers/assignments_controller.rb

@@ -309,6 +309,26 @@ 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).map { |i| (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 }
+    render json: data
+  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/controllers/assignments_controller_spec.rb

@@ -1056,4 +1056,32 @@
       end
     end
   end
+  describe '#grade_distribution_graph_data' do
+    before { get_as user, :grade_distribution_graph_data, params: params }
+    let(:assignment) { create :assignment }
+    let(:params) { { id: assignment.id } }
+    let(:user) { create :admin }
+    let(:assignment_with_results) { create :assignment_with_criteria_and_results, assignment: assignment }
+    let(:params) { { id: assignment_with_results.id } }
+    context 'data' do
+      it 'should contain the right keys' do
+        data = JSON.parse(response.body).keys
+        expect(data).to contain_exactly('labels', 'datasets')
+      end
+    end
+    context 'labels' do
+      it 'should contain the right values' do
+        labels = JSON.parse(response.body)['labels']
+        expected = (0..19).map { |i| (5 * i).to_s + '-' + (5 * i + 5).to_s }
+        expect(labels).to eq(expected)
+      end
+    end
+    context 'datasets' do
+      it 'should contain the right data' do
+        data = JSON.parse(response.body)['datasets'].first['data']
+        expected = assignment_with_results.grade_distribution_array
+        expect(data).to contain_exactly(*expected)
+      end
+    end
+  end
 end

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