Merge pull request #5383 from devan-srinivasan/react-chart-4

Refactored column distribution chart for grade entry forms to use rea…

app/assets/javascripts/Components/dashboard.jsx

@@ -30,16 +30,52 @@ class Dashboard extends React.Component {
             backgroundColor: 'rgb(75, 192, 192)',
           },
         ],
-      }
+      },
+      options: {},
     };
   }
 
+  getGradeEntryFormColumnBreakdown = () => {
+    // Helper function to make the AJAX request, then use its response to set the chart state
+    $.ajax({
+      url: Routes.column_breakdown_grade_entry_form_path(
+        this.state.assessment_id
+      ),
+      method: 'GET',
+      success: (data) => {
+        // Load in background colours
+        for (const [index, element] of data["datasets"].entries()){
+          element["backgroundColor"] = colours[index]
+        }
+        this.setState({
+          data: data,
+          options: {
+            plugins: {
+              tooltip: {
+                callbacks: {
+                  title: function (tooltipItems) {
+                    let baseNum = parseInt(tooltipItems[0].label);
+                    if (baseNum === 0) {
+                      return '0-5';
+                    } else {
+                      return (baseNum + 1) + '-' + (baseNum + 5);
+                    }
+                  }
+                }
+              },
+            }
+          },
+        })
+      },
+    })
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if (prevState.assessment_id !== this.state.assessment_id) {
       if (this.state.display_course_summary) {
         // TODO
       } else if (this.state.assessment_type === 'GradeEntryForm') {
-        // TODO
+        this.getGradeEntryFormColumnBreakdown();
       } else if (this.state.assessment_type === 'Assignment') {
         // TODO
       }
@@ -54,8 +90,10 @@ class Dashboard extends React.Component {
     } else if (this.state.assessment_type === 'GradeEntryForm') {
       return (
         <div>
-          <Bar data={this.state.data} />;
-          <Bar data={this.state.data} />;
+          <Bar data={this.state.data} />
+          <Bar data={this.state.data}
+               options={this.state.options}/>
+
         </div>
       );
     } else {

app/controllers/grade_entry_forms_controller.rb

@@ -47,6 +47,21 @@ def view_summary
     @date = params[:date]
   end
 
+  # returns the column distribution/breakdown for each grade_entry_item in a grade_entry_form
+  #   (see the second chart in the summary of a marks spreadsheet, accessed from the dashboard)
+  def column_breakdown
+    grade_entry_form = GradeEntryForm.find(params[:id])
+    return_data = { labels: [], datasets: [] }
+    axis_labels = (0..100).step(5).to_a
+    dict_data = grade_entry_form.grade_entry_items.map do |item|
+      { label: item.name, data: item.grade_distribution_array(20), backgroundColor: '' }
+    end
+    return_data[:labels], return_data[:datasets] = axis_labels, dict_data
+    respond_to do |format|
+      format.json { render json: return_data }
+    end
+  end
+
   # Update a grade in the table
   def update_grade
     grade_entry_form = GradeEntryForm.find(params[:id])

config/routes.rb

@@ -322,6 +322,7 @@
       get 'populate_grades_table'
       get 'get_mark_columns'
       get 'view_summary'
+      get 'column_breakdown'
       get 'grades'
       get 'download'
       post 'upload'

spec/controllers/grade_entry_forms_controller_spec.rb

@@ -7,6 +7,7 @@
   let(:grade_entry_form) { create(:grade_entry_form) }
   let(:grade_entry_form_with_data) { create(:grade_entry_form_with_data) }
   let(:grade_entry_form_with_data_and_total) { create(:grade_entry_form_with_data_and_total) }
+  let(:grade_entry_form_with_lots_of_data) { create(:grade_entry_form_with_lots_of_data) }
 
   describe '#upload' do
     before :each do
@@ -440,5 +441,20 @@
       before { get_as user, :student_interface, params: { id: grade_entry_form.id } }
       it('should respond with 403') { expect(response.status).to eq 403 }
     end
+    context 'GET column_breakdown' do
+      let(:user) { create(:admin) }
+      before { get_as user, :column_breakdown, params: { id: grade_entry_form_with_lots_of_data.id } }
+      it('should respond with 200 (ok)') { expect(response.status).to eq 200 }
+      it 'should retrieve the correct data' do
+        response_data = JSON.parse(response.body)
+        expect(response_data['labels']).to eq (0..100).step(5).to_a
+        expect(response_data['datasets'].size).to eq 2
+        data1, data2 = Array.new(20) { 0.0 }, Array.new(20) { 0.0 }
+        data1[19], data2[1] = 1.0, 1.0
+        expected_dataset = [{ 'label' => 'Q1', 'data' => data1, 'backgroundColor' => '' },
+                            { 'label' => 'Q2', 'data' => data2, 'backgroundColor' => '' }]
+        expect(response_data['datasets']).to eq expected_dataset
+      end
+    end
   end
 end

spec/factories/grade_entry_forms.rb

@@ -36,4 +36,24 @@
       create(:grade_entry_item, grade_entry_form: grade_entry_form_with_data)
     end
   end
+
+  factory :grade_entry_form_with_lots_of_data, class: GradeEntryForm do
+    sequence(:short_identifier) { |i| "Spreadsheet_#{i}_with_lots_of_data" }
+    description { Faker::Lorem.sentence }
+    message { Faker::Lorem.sentence }
+    due_date { Time.current }
+    is_hidden { false }
+    show_total { false }
+    after(:create) do |grade_entry_form_with_lots_of_data|
+      grades = [97.8, 9.13]
+      (1..2).each do |ind|
+        item = create(:grade_entry_item, name: 'Q' + ind.to_s, grade_entry_form: grade_entry_form_with_lots_of_data)
+        Student.find_each do |student|
+          ges = grade_entry_form_with_lots_of_data.grade_entry_students.find_or_create_by(user: student)
+          ges.grades.create(grade: grades[ind - 1], grade_entry_item: item)
+          ges.save
+        end
+      end
+    end
+  end
 end

spec/routing/routes_spec.rb

@@ -985,6 +985,14 @@
   # end grade_entry_forms collection route tests
 
   context 'member' do
+    it 'routes GET column_breakdown properly' do
+      expect(get: path + '/' + grade_entry_form.id.to_s + '/column_breakdown').to route_to(
+        controller: ctrl,
+        action: 'column_breakdown',
+        id: grade_entry_form.id.to_s
+      )
+    end
+
     it 'routes GET grades properly' do
       expect(get: path + '/' + grade_entry_form.id.to_s + '/grades')
         .to route_to(