chart: Add react-chartjs-2 dep and scaffold to admin dashboard

app/assets/javascripts/Components/dashboard.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { Bar } from 'react-chartjs-2';
+
+
+class Dashboard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      assessment_id: null,
+      assessment_type: null,
+      display_course_summary: false,
+      data: { // Fake data, from react-chartjs-2/example/src/charts/GroupedBar.js
+        labels: ['1', '2', '3', '4', '5', '6'],
+        datasets: [
+          {
+            label: '# of Red Votes',
+            data: [12, 19, 3, 5, 2, 3],
+            backgroundColor: 'rgb(255, 99, 132)',
+          },
+          {
+            label: '# of Blue Votes',
+            data: [2, 3, 20, 5, 1, 4],
+            backgroundColor: 'rgb(54, 162, 235)',
+          },
+          {
+            label: '# of Green Votes',
+            data: [3, 10, 13, 15, 22, 30],
+            backgroundColor: 'rgb(75, 192, 192)',
+          },
+        ],
+      }
+    };
+  }
+
+  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
+      } else if (this.state.assessment_type === 'Assignment') {
+        // TODO
+      }
+    }
+  }
+
+  render() {
+    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} />;
+    } else if (this.state.assessment_type === 'GradeEntryForm') {
+      return (
+        <div>
+          <Bar data={this.state.data} />;
+          <Bar data={this.state.data} />;
+        </div>
+      );
+    } else {
+      return '';
+    }
+  }
+}
+
+
+export function makeDashboard(elem) {
+  return render(<Dashboard />, elem);
+}

app/javascript/packs/application.js

@@ -70,6 +70,8 @@ import { refreshOrLogout } from 'javascripts/refresh_or_logout';
 window.refreshOrLogout = refreshOrLogout;
 import { ModalMarkus } from 'javascripts/modals';
 window.ModalMarkus = ModalMarkus;
+import { makeDashboard } from 'javascripts/Components/dashboard';
+window.makeDashboard = makeDashboard;
 import { makeTATable } from 'javascripts/Components/ta_table';
 window.makeTATable = makeTATable;
 import { makeAdminTable } from 'javascripts/Components/admin_table';

app/views/assignments/view_summary.js.erb

@@ -15,3 +15,9 @@ $('#assignment_<%= @assignment.id %>_graph').html(
 $('a[data-id]').removeClass('inactive');
 
 $('a[data-id="<%= @assignment.short_identifier %>"]').addClass('inactive');
+
+window.dashboard.setState({
+  assessment_id: <%= @assignment.id %>,
+  assessment_type: 'Assignment',
+  display_course_summary: false
+});

app/views/course_summaries/view_summary.js.erb

@@ -7,3 +7,9 @@ $('#weighted_course_summary_graph').html(
                                 locals: { assessments: @assessments, marking_schemes: @marking_schemes }) %>");
 
 $('a[data-id]').removeClass('inactive');
+
+window.dashboard.setState({
+  assessment_id: null,
+  assessment_type: null,
+  display_course_summary: true
+});

app/views/grade_entry_forms/view_summary.js.erb

@@ -13,3 +13,9 @@ $('#grade_entry_form_<%= @grade_entry_form.id %>_grade_entry_items_graph').html(
 $('a[data-id]').removeClass('inactive');
 
 $('a[data-id="<%= @grade_entry_form.short_identifier %>"]').addClass('inactive');
+
+window.dashboard.setState({
+  assessment_id: <%= @grade_entry_form.id %>,
+  assessment_type: 'GradeEntryForm',
+  display_course_summary: false
+});

app/views/main/index.html.erb

@@ -1,4 +1,11 @@
 <% content_for :title, t('menu.dashboard') %>
+<% content_for :head do %>
+  <%= javascript_tag nonce: true do %>
+    document.addEventListener('DOMContentLoaded', () => {
+        window.dashboard = makeDashboard(document.getElementById('dashboard-react'));
+    })
+  <% end %>
+<% end %>
 
 <div class='pane-wrapper'>
   <div class='pane no-border assignment-list-wrapper'>
@@ -19,3 +26,5 @@
     <%= render partial: 'assignments/assignment_summary', locals: { assignment: @current_assignment, tas: @tas } %>
   </div>
 </div>
+
+<div id='dashboard-react'></div>

package.json

@@ -20,6 +20,7 @@
     "prop-types": "^15.7.2",
     "rails-erb-loader": "^5.5.2",
     "react": "^16.14.0",
+    "react-chartjs-2": "^3.0.3",
     "react-dom": "^16.14.0",
     "react-keyed-file-browser": "^1.10.0",
     "react-modal": "^3.13.1",

yarn.lock

@@ -4309,7 +4309,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5:
+lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6085,6 +6085,13 @@ react-app-polyfill@^1.0.4:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-chartjs-2@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-3.0.3.tgz#9cb1981396f9574afebd29aff4e6df71ed615596"
+  integrity sha512-jOFZKwZ8sMLkddewZ/tToxuu4pYimAvvY5I6uK+hCpSFT16Pvo2bdHhUoZ0X87zu9I+dx2I+JCqaLN6XhmrbDg==
+  dependencies:
+    lodash "^4.17.19"
+
 react-dnd-html5-backend@^8.0:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-8.0.3.tgz#8f030444c7b79fd022f4ebd23ab5d20ed6ad248e"