Use react-chartjs-2 for assignment grade distribution chart

[JunruL]

Motivation and Context

Use react-chartjs-2 to render chart data on the dashboard page using React.

Your Changes

Description:

• created method in assignment controller
• added routes and corresponding tests
• created options parameter in the component's state (the four types of charts should have different options)
• added ajax request to get assignment grade distribution data
• will add tests for the new method created in assignment controller (but now I'm not sure whether I will change the method in the future. I will add tests when the method won't be changed any more).

Type of change (select all that apply):

• New feature (non-breaking change which adds functionality)
• Test update (change that modifies or updates tests only)

Testing

The new graph is the same as the old one except:

• The background area color (I find that react-charts-2 does not support this)
• The labels on the x-axis (also, probably react-charts-2 does not support this)

Questions and Comments (if applicable)

Checklist

• I have performed a self-review of my own code.
• I have fixed any Hound bot comments.
• I have verified that the TravisCI tests have passed.
• I have reviewed the test coverage changes reported on Coveralls.
• I have added tests for my changes.

Required documentation changes (if applicable)

[david-yz-liu]

@JunruL good work, this is excellent progress. I left a few inline comments, but also you should be adding tests for your new route in the assignments_controller_spec.rb file. You'll need to generate some real grade data to test the returned JSON of the new route, and I recommend looking in the model test file and the assignments.rb factory file to see what you can use.

[david-yz-liu]

Thanks, @JunruL!