Report Data Visualization

app/controllers/admin/minor.py

@@ -1,11 +1,22 @@
-from flask import render_template, g, abort, request, redirect, url_for, send_file
-
+from flask import render_template, g, abort, request, redirect, url_for, send_file, jsonify
+from app.logic.minor import getMinorProgress
 from app.models.user import User
 
 from app.controllers.admin import admin_bp
 
 from app.logic.minor import getMinorInterest, getMinorProgress, toggleMinorInterest, getMinorSpreadsheet, getDeclaredMinorStudents
 
+@admin_bp.route('/profile/<username>/cceMinorChart', methods=['GET'])
+def cceMinorChart(username):
+    if not g.current_user.isAdmin:
+        abort(403)
+    else:
+        progressList = getMinorProgress()
+        turnToChart = []
+        for progress in progressList:
+            turnToChart.append({'name':progress["firstName"] + " " + progress["lastName"], "engagementCount" : progress['engagementCount'], "completeSummer": "Yes" if progress['hasSummer'] == "Complete" else "No"})
+        return jsonify(turnToChart)
+
 @admin_bp.route('/admin/cceMinor', methods=['GET','POST'])
 def manageMinor():
     if not g.current_user.isAdmin:
@@ -26,14 +37,16 @@ def manageMinor():
     interestedStudentEmailString = ';'.join([student['email'] for student in interestedStudentsList])
     sustainedEngagement = getMinorProgress()
     declaredStudentsList = getDeclaredMinorStudents()
-    declaredStudentEmailString = ';'.join([student['email'] for student in declaredStudentsList])    
+    declaredStudentEmailString = ';'.join([student['email'] for student in declaredStudentsList])   
+    adminUsername = g.current_user.username 
 
     return render_template('/admin/cceMinor.html',
                             interestedStudentsList = interestedStudentsList,
                             declaredStudentsList = declaredStudentsList,
                             interestedStudentEmailString = interestedStudentEmailString,
                             declaredStudentEmailString = declaredStudentEmailString,
                             sustainedEngagement = sustainedEngagement,
+                            adminUsername = adminUsername,
                             )
 
 @admin_bp.route("/admin/cceMinor/download")

app/static/js/minorAdminPage.js

@@ -1,6 +1,5 @@
 import searchUser from './searchUser.js'
 
-
 $(document).ready(function() {
   $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
     let activeTab = $(e.target).attr('id').replace('-tab', '');
@@ -57,7 +56,95 @@ $(document).ready(function() {
   if (activeTab) {
       $('#studentTabs button[data-bs-target="#' + activeTab + '"]').tab('show');
   }
+  $("#cceMinor").on("click", function(){
+    let username = $(this).data("username");
+    const xValues = [];
+    const yValues = [];
+    const barColors = [];
+
+    $.ajax({
+      type: 'GET',
+      url: '/profile/' + username + '/cceMinorChart',
+      data: JSON,
+      success: function(responses) {
+        for (let i = 0; i < responses.length; i++){
+          xValues.push(responses[i].engagementCount);
+          yValues.push(responses[i].name);
+          barColors.push(responses[i].completeSummer === "Yes" ? "green" : "red");
+        }
+        const cceChart = document.getElementById('cceChartGen');
+        const maxValue = Math.max(...xValues.map(Number))+2;
+
+        if (cceChart) {
+          new Chart(cceChart, {
+            type: "bar",
+            data: {
+              labels: yValues,
+              datasets: [{
+                label: "Summer Completed",
+                backgroundColor: barColors,
+                data: xValues
+              }]
+            },
+            options: {
+              scales:{
+                y: {
+                  beginAtZero: true,
+                  max: maxValue,
+                  title:{
+                    display:true,
+                    text:'Hours of Engagements',
+                    font: {
+                      family: 'Inter',
+                      size: 16,
+                      weight: 'bold'
+                    }
+                  }
+                },
+                x: {
+                  title:{
+                    display:true,
+                  }
+                }
+              },
+              plugins: {
+                legend: {
+                  display: false,
+                },
+                tooltip: {
+                  callbacks: {
+                    label: function(context) { 
+                      const value = context.formattedValue;
+                      const completed = barColors[context.dataIndex] === "green" ? "Yes" : "No";
+                      return [
+                        `Engagements: ${value}`,
+                        `Summer Completed: ${completed}`
+                       ];
+                    }
+                  }
+                }
+              }
+            }
+          });
+        }
+      },
+      error: function(error) {
+        console.log("error: " + error);
+      }
+    });
+  })
 
+  // Download the chart as an image
+  $("#cceDownload").on("click", function(selected, fileName = "cceMinorChart.png"){
+    const element = $(".ccePrint")[0]; 
+
+    html2canvas(element).then(canvas => {
+      const downloadLink = document.createElement('a');
+      downloadLink.href = canvas.toDataURL(); 
+      downloadLink.download = fileName; 
+      downloadLink.click();
+    })
+  })
 })
 
 
@@ -84,7 +171,6 @@ function emailAll(){
   emailMinorCandidates(allMinorCandidateEmails);
 }
 
-
 function getInterestedStudents() {
   // get all the checkboxes and return a list of users who's
   // checkboxes are selected

app/templates/admin/cceMinor.html

@@ -5,11 +5,14 @@
   {{super()}}
   <script type="module" src="/static/js/minorAdminPage.js"></script>
   <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
 
   {% block styles %}
     {{super()}}
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
   {% endblock %}
 {% endblock %}
 {% block app_content %}
@@ -20,6 +23,44 @@ <h2>CCE Minor Progress</h2>
   </div>
   <div class="col-auto">
     <a class="btn btn-success" role="button" href="/admin/cceMinor/download">Download Report</a>
+    <button type="button" id="cceMinor" data-username="{{ adminUsername }}" class="btn btn-primary"  data-bs-toggle="modal" data-bs-target="#cceChart">
+      View Chart
+    </button>
+  </div>
+</div>
+
+
+<!-- #################  Modal for CCE Minor Graph ################# -->
+<div class="modal fade" id="cceChart" tabindex="-1" aria-labelledby="CCEMinorChart" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="ccePrint">
+        <div class="modal-header">
+          <h5 class="modal-title">CCE Student Experience Chart</h5>
+        </div>
+        <div class="modal-body">
+          <span>
+            <span class="d-flex flex-row justify-content-between w-100">
+              <div class="col-auto d-flex align-items-center">
+                <span>Summer Incomplete:</span>
+                <div class="bg-danger ms-2" style="width:10px; height:10px;"></div>
+              </div>
+             <div class="col-auto d-flex align-items-center">
+                <span>Summer Complete:</span>
+                <div class="bg-success ms-2" style="width:10px; height:10px;"></div>
+              </div>
+              <br>
+              </br>
+            </span>
+          </span>
+          <canvas id="cceChartGen" width="400" height="400"></canvas>
+        </div>
+      </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary me-auto" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-success" id="cceDownload">Download Chart</button>
+        </div>
+    </div>
   </div>
 </div>
 <table class="display" id="engagedStudentsTable">
@@ -111,7 +152,6 @@ <h2>CCE Minor Candidates</h2>
 </div>
 
 <!-- #################  Modal  ################# -->
-
 <div class="modal fade" id="addInterestedStudentsModal" tabindex="-1" aria-labelledby="addInterestedStudentsLbl" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">