Report Data Visualization

[MImran2002]

CCE Minor Data Visualization

Fixes #

• Visualize Reports data Visualize Reports data #1303
• Creates graphical representations for the data given to the downloadable reports. Represent the information on both the reports tab and on the downloadable spreadsheets.

Changes

• Add a new button that opens up to a modal to look at the graph
• The graph represents the student engagements for CCE Minors
• A new route was created with Ajax to retrieve data from the back-end
• Using Chart.js to produce a chart image and use html2canvas to take a snap of the chart so that it can be downloaded

Testing

• Set up

• Checkout the branch git checkout visualizeReportData

• Pull the code when you are in the branch git pull

• In app>logic>minor.py in the getMinorProgress() function, add the follow code lines after line 118 (be mindful of indentations):
  for a in range (0, len(engagedStudentsList)-1, 2):
  engagedStudentsList[a]['hasSummer'] = "Completed"

• Reset the database database/reset_database.sh test

• Run the test suite to make sure all the tests are working tests/run_tests.sh

• Run the application flask run

View Chart and Download it.

• Make sure you are admin:ramsayb2
• Navigate to Minor Management on the navigation bar
• Under CCE Minor Progress there is a blue button "View Chart"
• Click the button to observe the chart
• Click the green "Download Chart" button to download an image of the chart
• Click the Engagement Bar Chart or Engagement Line Chart to see different chart

[bakobagassas]

This looks so cool! I loved the improvement.
I think it would be even better to have the chart as pdf rather than png

[bakobagassas]

Here we can see the bar char option as well as the line chart option but we are not able to change it, same for the engagement per term hover. I think it would be better to have it in a document where we can visualize both charts. Or perhaps making it in a way that when we download the bar chart, it only says Bar chart in the downloaded version and not bar chart AND line chart.

[bakobagassas]

also the bar chat is a little bit confusing. It is unclear what the dependent variable is on the y-axis. Furthermore, I think it is confusing how the line graph seems to be about the number of engagements and the bar graph seems to be about the completed summer experience. We should either keep it constant by having a line graph for both engagement and summer experience OR having a bar graph and a line graph for either engagement or summer experience.

[MImran2002]

This looks so cool! I loved the improvement. I think it would be even better to have the chart as pdf rather than png

1. I think about it too but I decided not to implement pdf because the chart isn't a stand-alone document but it is exported as png so that CELTS can used it in their presentation so a photo png will be more suitable.
2. I have removed the buttons from the images that will be downloaded.
3. I realize the image needs a title so I added them in.
4. I have also edited the button to better represent what the data want to visualize it.

[bakobagassas]

The graph purpose has been standardized, that's nice! I think now we should not have "summer complete" and "summer incomplete" anymore on the bar graph since the graph is not dealing with summer completion anymore. Furthermore, I think the color of the bar graph should hence be something like green since we are only talking about engagement and not completion anymore.

[github-actions]

View Code Coverage

[MImran2002]

The graph purpose has been standardized, that's nice! I think now we should not have "summer complete" and "summer incomplete" anymore on the bar graph since the graph is not dealing with summer completion anymore. Furthermore, I think the color of the bar graph should hence be something like green since we are only talking about engagement and not completion anymore.

Hello we talked about it I agreed we should change colors so I did and I decided to make it distinct based on summer and non summer term

[bakobagassas]

Looks good to me now!