From 1e1c27951b02d49daf19020b91996353af0b8931 Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Fri, 11 Apr 2025 17:01:50 -0400
Subject: [PATCH 01/15] report data visualization front-end

---
 app/static/js/minorAdminPage.js   | 16 ++++++++++++++--
 app/templates/admin/cceMinor.html | 20 +++++++++++++++++++-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index d3e02cb2f..6021fdb31 100644
--- a/app/static/js/minorAdminPage.js
+++ b/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,10 +56,23 @@ $(document).ready(function() {
   if (activeTab) {
       $('#studentTabs button[data-bs-target="#' + activeTab + '"]').tab('show');
   }
-
+  $("#cceMinor").on("click", ()=>{
+    $.ajax({
+      type: 'GET',
+      url: '/profile/' + username + '/cceMinor',
+      data: JSON,
+      success: function(response) {
+        location.reload()
+      },
+      error: function(error) {
+       console.log("error")
+      }
+  });
+  })
 })
 
 
+
 function emailMinorCandidates(studentEmails){
   // If there are any students interested or declared, open the mailto link
   if (studentEmails.length) {
diff --git a/app/templates/admin/cceMinor.html b/app/templates/admin/cceMinor.html
index b5dd65666..a741b5dc4 100644
--- a/app/templates/admin/cceMinor.html
+++ b/app/templates/admin/cceMinor.html
@@ -19,9 +19,28 @@ <h1 class="text-center mb-5">CCE Minor Management</h1>
       <h2>CCE Minor Progress</h2>
   </div>
   <div class="col-auto">
+    <button type="button" id="cceMinor" class="btn btn-primary"  data-bs-toggle="modal" data-bs-target="#cceChart">
+      View Chart
+    </button>
     <a class="btn btn-success" role="button" href="/admin/cceMinor/download">Download Report</a>
   </div>
 </div>
+<!-- #################  Modal  ################# -->
+<div class="modal fade" id="cceChart" tabindex="-1" aria-labelledby="CCEMinorChart" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">CCE Student Experience Chart</h5>
+      </div>
+      <div class="modal-body">
+      </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-primary">Download Chart</button>
+      </div>
+    </div>
+  </div>
+</div>
 <table class="display" id="engagedStudentsTable">
     <thead>
         <tr>
@@ -111,7 +130,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">

From 4bbf7ef90fcb0f086bcb271e2518c799806ec563 Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Tue, 15 Apr 2025 15:00:12 -0400
Subject: [PATCH 02/15] graph is working

---
 app/controllers/admin/minor.py    | 24 +++++++++++--
 app/static/js/minorAdminPage.js   | 58 ++++++++++++++++++++++++++++---
 app/templates/admin/cceMinor.html |  5 +--
 3 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/app/controllers/admin/minor.py b/app/controllers/admin/minor.py
index 291f303e9..8fb9f3ba4 100644
--- a/app/controllers/admin/minor.py
+++ b/app/controllers/admin/minor.py
@@ -1,11 +1,27 @@
-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):
+    print("****" * 19)
+    if not g.current_user.isAdmin:
+        abort(403)
+    else:
+        progress_list = getMinorProgress()
+        turnToChart = []
+        for progress in progress_list:
+            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,7 +42,8 @@ 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,
@@ -34,6 +51,7 @@ def manageMinor():
                             interestedStudentEmailString = interestedStudentEmailString,
                             declaredStudentEmailString = declaredStudentEmailString,
                             sustainedEngagement = sustainedEngagement,
+                            adminUsername = adminUsername,
                             )
 
 @admin_bp.route("/admin/cceMinor/download")
diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index 6021fdb31..83919c3dd 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -56,16 +56,64 @@ $(document).ready(function() {
   if (activeTab) {
       $('#studentTabs button[data-bs-target="#' + activeTab + '"]').tab('show');
   }
-  $("#cceMinor").on("click", ()=>{
+  $("#cceMinor").on("click", function(){
+    let username = $(this).data("username");
+    const xValues = [];
+    const yValues = [];
+    const barColors = [];
     $.ajax({
       type: 'GET',
-      url: '/profile/' + username + '/cceMinor',
+      url: '/profile/' + username + '/cceMinorChart',
       data: JSON,
-      success: function(response) {
-        location.reload()
+      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 == "green"?"green":"red",
+                data: xValues
+              }],
+              datasets: [{
+                label: "Summer Not Completed",
+                backgroundColor: barColors == "red"?"red":"green",
+                data: xValues
+              }]
+            },
+            options: {
+              y: {
+                beginAtZero: true,
+                max: maxValue
+              },
+              plugins: {
+                legend: {
+                  display: true,           // Show legend
+                  position: 'top',         // Position of the legend
+                  labels: {
+                    fontColor: "black",    // Text color of legend items
+                    fontSize: 15           // Font size of legend items
+                  }
+                },
+                title: {
+                  display: true,
+                  text: "Students' Engagement Chart"
+                }
+              }
+            }
+          });
+        }
       },
       error: function(error) {
-       console.log("error")
+        console.log("error")
       }
   });
   })
diff --git a/app/templates/admin/cceMinor.html b/app/templates/admin/cceMinor.html
index a741b5dc4..c97392022 100644
--- a/app/templates/admin/cceMinor.html
+++ b/app/templates/admin/cceMinor.html
@@ -5,7 +5,7 @@
   {{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>
   {% block styles %}
     {{super()}}
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
@@ -19,7 +19,7 @@ <h1 class="text-center mb-5">CCE Minor Management</h1>
       <h2>CCE Minor Progress</h2>
   </div>
   <div class="col-auto">
-    <button type="button" id="cceMinor" class="btn btn-primary"  data-bs-toggle="modal" data-bs-target="#cceChart">
+    <button type="button" id="cceMinor" data-username="{{ adminUsername }}" class="btn btn-primary"  data-bs-toggle="modal" data-bs-target="#cceChart">
       View Chart
     </button>
     <a class="btn btn-success" role="button" href="/admin/cceMinor/download">Download Report</a>
@@ -33,6 +33,7 @@ <h2>CCE Minor Progress</h2>
         <h5 class="modal-title">CCE Student Experience Chart</h5>
       </div>
       <div class="modal-body">
+        <canvas id="cceChartGen" width="400" height="400">hello</canvas>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary me-auto" data-bs-dismiss="modal">Close</button>

From 34395089fc3eda4f210e1f027c5719944ec60e51 Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Wed, 16 Apr 2025 22:15:21 -0400
Subject: [PATCH 03/15] the chart has been created and it can be downloaded

---
 app/static/js/minorAdminPage.js   | 42 +++++++++++++++++++------------
 app/templates/admin/cceMinor.html | 34 +++++++++++++++++--------
 2 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index 83919c3dd..2751f7e2e 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -66,11 +66,13 @@ $(document).ready(function() {
       url: '/profile/' + username + '/cceMinorChart',
       data: JSON,
       success: function(responses) {
+        responses[2].completeSummer = "Yes";
         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");
         }
+        console.table(barColors);
         const cceChart = document.getElementById('cceChartGen');
         const maxValue = Math.max(...xValues.map(Number))+2;
         if (cceChart) {
@@ -80,12 +82,7 @@ $(document).ready(function() {
               labels: yValues,
               datasets: [{
                 label: "Summer Completed",
-                backgroundColor: barColors == "green"?"green":"red",
-                data: xValues
-              }],
-              datasets: [{
-                label: "Summer Not Completed",
-                backgroundColor: barColors == "red"?"red":"green",
+                backgroundColor: barColors,
                 data: xValues
               }]
             },
@@ -96,16 +93,19 @@ $(document).ready(function() {
               },
               plugins: {
                 legend: {
-                  display: true,           // Show legend
-                  position: 'top',         // Position of the legend
-                  labels: {
-                    fontColor: "black",    // Text color of legend items
-                    fontSize: 15           // Font size of legend items
-                  }
+                  display: false,           // Show legend
                 },
-                title: {
-                  display: true,
-                  text: "Students' Engagement Chart"
+                tooltip: {
+                  callbacks: {
+                    label: function(context) { // context here from chart.js acts like "this"
+                      const value = context.formattedValue;
+                      const completed = barColors[context.dataIndex] === "green" ? "Yes" : "No";
+                      return [
+                        `Engagements: ${value}`,
+                        `Summer Completed: ${completed}`
+                       ];
+                    }
+                  }
                 }
               }
             }
@@ -115,8 +115,18 @@ $(document).ready(function() {
       error: function(error) {
         console.log("error")
       }
-  });
+    });
   })
+  $("#cceDownload").on("click", function(selected, fileName = "cceMinorChart.png"){
+    const element = document.querySelector(".ccePrint"); // do not use jquery when it comes to accessing DOM elements
+    html2canvas(element).then(canvas => {
+      const downloadLink = document.createElement('a'); // create a link
+      downloadLink.href = canvas.toDataURL(); // turn it inot a data url
+      downloadLink.download = fileName; //put the file name as download
+      downloadLink.click(); // stimulate the click
+    })
+  })
+
 })
 
 
diff --git a/app/templates/admin/cceMinor.html b/app/templates/admin/cceMinor.html
index c97392022..a9508c308 100644
--- a/app/templates/admin/cceMinor.html
+++ b/app/templates/admin/cceMinor.html
@@ -6,6 +6,8 @@
   <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">
@@ -25,20 +27,32 @@ <h2>CCE Minor Progress</h2>
     <a class="btn btn-success" role="button" href="/admin/cceMinor/download">Download Report</a>
   </div>
 </div>
-<!-- #################  Modal  ################# -->
+<!-- #################  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="modal-header">
-        <h5 class="modal-title">CCE Student Experience Chart</h5>
-      </div>
-      <div class="modal-body">
-        <canvas id="cceChartGen" width="400" height="400">hello</canvas>
-      </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-primary">Download Chart</button>
+      <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">
+              <span>Summer Complete: </span>
+              <div class="bg-success mt-2 mx-3" style="width:10px; height:10px;"></div>
+            </span>
+            <span class="d-flex flex-row">
+              <span>Summer Incomplete: </span>
+              <div class="bg-danger mt-2 mx-3" style="width:10px; height:10px;"></div>
+            </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-primary" id="cceDownload">Download Chart</button>
+        </div>
     </div>
   </div>
 </div>

From 77906ce9d568294629772f386b3ec7ac2c333d25 Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Wed, 16 Apr 2025 22:19:45 -0400
Subject: [PATCH 04/15] the chart has been created and it can be downloaded and
 console.log and unnecessary lines cleared up

---
 app/static/js/minorAdminPage.js   | 2 --
 app/templates/admin/cceMinor.html | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index 2751f7e2e..3b6cb5db1 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -66,13 +66,11 @@ $(document).ready(function() {
       url: '/profile/' + username + '/cceMinorChart',
       data: JSON,
       success: function(responses) {
-        responses[2].completeSummer = "Yes";
         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");
         }
-        console.table(barColors);
         const cceChart = document.getElementById('cceChartGen');
         const maxValue = Math.max(...xValues.map(Number))+2;
         if (cceChart) {
diff --git a/app/templates/admin/cceMinor.html b/app/templates/admin/cceMinor.html
index a9508c308..2bdf89e46 100644
--- a/app/templates/admin/cceMinor.html
+++ b/app/templates/admin/cceMinor.html
@@ -21,10 +21,10 @@ <h1 class="text-center mb-5">CCE Minor Management</h1>
       <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>
-    <a class="btn btn-success" role="button" href="/admin/cceMinor/download">Download Report</a>
   </div>
 </div>
 <!-- #################  Modal for CCE Minor Graph ################# -->
@@ -51,7 +51,7 @@ <h5 class="modal-title">CCE Student Experience Chart</h5>
       </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-primary" id="cceDownload">Download Chart</button>
+          <button type="button" class="btn btn-success" id="cceDownload">Download Chart</button>
         </div>
     </div>
   </div>

From e56fb8ea747115d22e0bb8eb2e08bbd5acbbd487 Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Thu, 17 Apr 2025 16:26:08 -0400
Subject: [PATCH 05/15]  add x and y labels

---
 app/controllers/admin/minor.py  |  1 -
 app/static/js/minorAdminPage.js | 20 ++++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/controllers/admin/minor.py b/app/controllers/admin/minor.py
index 8fb9f3ba4..ab904cb14 100644
--- a/app/controllers/admin/minor.py
+++ b/app/controllers/admin/minor.py
@@ -8,7 +8,6 @@
 
 @admin_bp.route('/profile/<username>/cceMinorChart', methods=['GET'])
 def cceMinorChart(username):
-    print("****" * 19)
     if not g.current_user.isAdmin:
         abort(403)
     else:
diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index 3b6cb5db1..ee3c28904 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -85,13 +85,25 @@ $(document).ready(function() {
               }]
             },
             options: {
-              y: {
-                beginAtZero: true,
-                max: maxValue
+              scales:{
+                y: {
+                  beginAtZero: true,
+                  max: maxValue,
+                  title:{
+                    display:true,
+                    text:'Hours of Engagements'
+                  }
+                },
+                x: {
+                  title:{
+                    display:true,
+                    text:'Names'
+                  }
+                }
               },
               plugins: {
                 legend: {
-                  display: false,           // Show legend
+                  display: false,
                 },
                 tooltip: {
                   callbacks: {

From 0bf17ad208d3f1f34ea3a411bb48b01530deff93 Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Mon, 21 Apr 2025 17:53:56 -0400
Subject: [PATCH 06/15] changes are met

---
 app/controllers/admin/minor.py | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/controllers/admin/minor.py b/app/controllers/admin/minor.py
index ab904cb14..975a08b10 100644
--- a/app/controllers/admin/minor.py
+++ b/app/controllers/admin/minor.py
@@ -11,16 +11,12 @@ def cceMinorChart(username):
     if not g.current_user.isAdmin:
         abort(403)
     else:
-        progress_list = getMinorProgress()
+        progressList = getMinorProgress()
         turnToChart = []
-        for progress in progress_list:
+        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:

From ced1d39a4a6b4218fd4570af87e71eb4caa23d62 Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Mon, 21 Apr 2025 17:58:05 -0400
Subject: [PATCH 07/15] changes are met again

---
 app/static/js/minorAdminPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index ee3c28904..5ea45c771 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -123,7 +123,7 @@ $(document).ready(function() {
         }
       },
       error: function(error) {
-        console.log("error")
+        console.log("error: " + error);
       }
     });
   })

From b579cfd4a40108c97c0344d5d08f23b482def305 Mon Sep 17 00:00:00 2001
From: Stevenson <michels@berea.edu>
Date: Wed, 23 Apr 2025 11:09:02 -0400
Subject: [PATCH 08/15] Change font and address feedback

---
 app/static/js/minorAdminPage.js   | 30 ++++++++++++++++++------------
 app/templates/admin/cceMinor.html | 21 ++++++++++++++-------
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index 5ea45c771..e2e1fc4e9 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -61,18 +61,20 @@ $(document).ready(function() {
     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++){
+        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",
@@ -91,13 +93,17 @@ $(document).ready(function() {
                   max: maxValue,
                   title:{
                     display:true,
-                    text:'Hours of Engagements'
+                    text:'Hours of Engagements',
+                    font: {
+                      family: 'Inter',
+                      size: 16,
+                      weight: 'bold'
+                    }
                   }
                 },
                 x: {
                   title:{
                     display:true,
-                    text:'Names'
                   }
                 }
               },
@@ -107,7 +113,7 @@ $(document).ready(function() {
                 },
                 tooltip: {
                   callbacks: {
-                    label: function(context) { // context here from chart.js acts like "this"
+                    label: function(context) { 
                       const value = context.formattedValue;
                       const completed = barColors[context.dataIndex] === "green" ? "Yes" : "No";
                       return [
@@ -127,20 +133,21 @@ $(document).ready(function() {
       }
     });
   })
+
+  // Download the chart as an image
   $("#cceDownload").on("click", function(selected, fileName = "cceMinorChart.png"){
-    const element = document.querySelector(".ccePrint"); // do not use jquery when it comes to accessing DOM elements
+    const element = $(".ccePrint")[0]; 
+
     html2canvas(element).then(canvas => {
-      const downloadLink = document.createElement('a'); // create a link
-      downloadLink.href = canvas.toDataURL(); // turn it inot a data url
-      downloadLink.download = fileName; //put the file name as download
-      downloadLink.click(); // stimulate the click
+      const downloadLink = document.createElement('a');
+      downloadLink.href = canvas.toDataURL(); 
+      downloadLink.download = fileName; 
+      downloadLink.click();
     })
   })
-
 })
 
 
-
 function emailMinorCandidates(studentEmails){
   // If there are any students interested or declared, open the mailto link
   if (studentEmails.length) {
@@ -164,7 +171,6 @@ function emailAll(){
   emailMinorCandidates(allMinorCandidateEmails);
 }
 
-
 function getInterestedStudents() {
   // get all the checkboxes and return a list of users who's
   // checkboxes are selected
diff --git a/app/templates/admin/cceMinor.html b/app/templates/admin/cceMinor.html
index 2bdf89e46..f186c894c 100644
--- a/app/templates/admin/cceMinor.html
+++ b/app/templates/admin/cceMinor.html
@@ -12,6 +12,7 @@
     {{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 %}
@@ -27,6 +28,8 @@ <h2>CCE Minor Progress</h2>
     </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">
@@ -37,13 +40,17 @@ <h5 class="modal-title">CCE Student Experience Chart</h5>
         </div>
         <div class="modal-body">
           <span>
-            <span class="d-flex flex-row">
-              <span>Summer Complete: </span>
-              <div class="bg-success mt-2 mx-3" style="width:10px; height:10px;"></div>
-            </span>
-            <span class="d-flex flex-row">
-              <span>Summer Incomplete: </span>
-              <div class="bg-danger mt-2 mx-3" style="width:10px; height:10px;"></div>
+            <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>

From 22cc9eb4550ec0e58c452103a0ca1715238f81ec Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Thu, 24 Apr 2025 18:33:17 -0400
Subject: [PATCH 09/15] change the x and y values and remove the decimals for
 the number of engagement.

---
 app/static/js/minorAdminPage.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index 5ea45c771..5bcfc4ac8 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -67,21 +67,21 @@ $(document).ready(function() {
       data: JSON,
       success: function(responses) {
         for (let i = 0; i <responses.length; i++){
-          xValues.push(responses[i].engagementCount);
-          yValues.push(responses[i].name);
+          yValues.push(responses[i].engagementCount);
+          xValues.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;
+        const maxValue = Math.max(...yValues.map(Number))+2;
         if (cceChart) {
           new Chart(cceChart, {
             type: "bar",
             data: {
-              labels: yValues,
+              labels: xValues,
               datasets: [{
                 label: "Summer Completed",
                 backgroundColor: barColors,
-                data: xValues
+                data: yValues
               }]
             },
             options: {
@@ -91,9 +91,12 @@ $(document).ready(function() {
                   max: maxValue,
                   title:{
                     display:true,
-                    text:'Hours of Engagements'
-                  }
-                },
+                    text:'Number of Engagements'
+                  },
+                  ticks: {
+                      stepSize: 1
+                    }
+                  },
                 x: {
                   title:{
                     display:true,

From d09f193936895df6c3b69586ff18f3bc2d3a565d Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Fri, 28 Nov 2025 13:36:12 -0500
Subject: [PATCH 10/15] just fixing

---
 app/controllers/admin/minor.py    |  3 +-
 app/logic/minor.py                | 21 ++++---
 app/static/js/minorAdminPage.js   | 96 +++++++++++++++++--------------
 app/templates/admin/cceMinor.html |  2 +
 4 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/app/controllers/admin/minor.py b/app/controllers/admin/minor.py
index 975a08b10..5a2bd958c 100644
--- a/app/controllers/admin/minor.py
+++ b/app/controllers/admin/minor.py
@@ -12,9 +12,10 @@ def cceMinorChart(username):
         abort(403)
     else:
         progressList = getMinorProgress()
+        print(progressList, "yeet")
         turnToChart = []
         for progress in progressList:
-            turnToChart.append({'name':progress["firstName"] + " " + progress["lastName"], "engagementCount" : progress['engagementCount'], "completeSummer": "Yes" if progress['hasSummer'] == "Complete" else "No"})
+            turnToChart.append({'name':progress["firstName"] + " " + progress["lastName"], "engagementCount" : progress['engagementCount'], "completeSummer": "Yes" if progress['hasSummer'] == "Complete" else "No", "termDescription": progress['engagementTerm']})
         return jsonify(turnToChart)
     
 @admin_bp.route('/admin/cceMinor', methods=['GET','POST'])
diff --git a/app/logic/minor.py b/app/logic/minor.py
index 955a124bc..10e0da7d5 100644
--- a/app/logic/minor.py
+++ b/app/logic/minor.py
@@ -91,14 +91,20 @@ def getMinorProgress():
     summerCase = Case(None, [(CCEMinorProposal.proposalType == "Summer Experience", 1)], 0)
 
     engagedStudentsWithCount = (
-        User.select(User, fn.COUNT(IndividualRequirement.id).alias('engagementCount'), 
-                                                                    fn.SUM(summerCase).alias('hasSummer'),
-                                                                    fn.IF(fn.COUNT(CCEMinorProposal.id) > 0, True, False).alias('hasCCEMinorProposal'))
-            .join(IndividualRequirement, on=(User.username == IndividualRequirement.username))
+        User.select(
+            User, 
+            IndividualRequirement, 
+            Term, 
+            IndividualRequirement.term_id, 
+            fn.COUNT(IndividualRequirement.id).alias('engagementCount'), 
+            fn.SUM(summerCase).alias('hasSummer'),
+            fn.IF(fn.COUNT(CCEMinorProposal.id) > 0, True, False).alias('hasCCEMinorProposal'))
+            .join(IndividualRequirement, on=(User.username == IndividualRequirement.username_id))
             .join(CertificationRequirement, on=(IndividualRequirement.requirement_id == CertificationRequirement.id))
-            .switch(User).join(CCEMinorProposal, JOIN.LEFT_OUTER, on= (User.username == CCEMinorProposal.student))
+            .join(Term, on=(IndividualRequirement.term_id == Term.id))
+            .switch(User).join(CCEMinorProposal, JOIN.LEFT_OUTER, on= (User.username == CCEMinorProposal.student_id))
             .where(CertificationRequirement.certification_id == Certification.CCE)
-            .group_by(User.firstName, User.lastName, User.username)
+            .group_by(User.username, IndividualRequirement.term_id, Term.id)
             .order_by(SQL("engagementCount").desc())
     )
     engagedStudentsList = [{'firstName': student.firstName,
@@ -108,7 +114,8 @@ def getMinorProgress():
                             'hasGraduated': student.hasGraduated, 
                             'engagementCount': student.engagementCount - student.hasSummer,
                             'hasCCEMinorProposal': student.hasCCEMinorProposal,
-                            'hasSummer': "Completed" if student.hasSummer else "Incomplete"} for student in engagedStudentsWithCount]
+                            'hasSummer': "Completed" if student.hasSummer else "Incomplete",
+                            'engagementTerm': student.individualrequirement.term.description} for student in engagedStudentsWithCount]
     return engagedStudentsList
 
 def getMinorSpreadsheet():
diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index 602256870..1f72a6cf5 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -79,52 +79,60 @@ $('.remove_minor_candidate').on('click', function() {
         const cceChart = document.getElementById('cceChartGen');
         const maxValue = Math.max(...yValues.map(Number))+2;
         if (cceChart) {
-          new Chart(cceChart, {
-            type: "bar",
+          // new Chart(cceChart, {
+          //   type: "bar",
+          //   data: {
+          //     labels: xValues,
+          //     datasets: [{
+          //       label: "Summer Completed",
+          //       backgroundColor: barColors,
+          //       data: yValues
+          //     }]
+          //   },
+          //   options: {
+          //     scales:{
+          //       y: {
+          //         beginAtZero: true,
+          //         max: maxValue,
+          //         title:{
+          //           display:true,
+          //           text:'Number of Engagements'
+          //         },
+          //         ticks: {
+          //             stepSize: 1
+          //           }
+          //         },
+          //       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}`
+          //              ];
+          //           }
+          //         }
+          //       }
+          //     }
+          //   }
+          // });
+          new Chart (cceChart,{
+            type: "line",
             data: {
               labels: xValues,
-              datasets: [{
-                label: "Summer Completed",
-                backgroundColor: barColors,
-                data: yValues
-              }]
-            },
-            options: {
-              scales:{
-                y: {
-                  beginAtZero: true,
-                  max: maxValue,
-                  title:{
-                    display:true,
-                    text:'Number of Engagements'
-                  },
-                  ticks: {
-                      stepSize: 1
-                    }
-                  },
-                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}`
-                       ];
-                    }
-                  }
-                }
-              }
+              data
+
             }
           });
         }
diff --git a/app/templates/admin/cceMinor.html b/app/templates/admin/cceMinor.html
index 47b5d9d95..0bcd8d5ea 100644
--- a/app/templates/admin/cceMinor.html
+++ b/app/templates/admin/cceMinor.html
@@ -35,6 +35,8 @@ <h2>CCE Minor Progress</h2>
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="ccePrint">
+        <button type="button" class="btn m-2" id="chartButton">Bar Chart</button>
+        <button type="button" class="btn m-2" id="dataButton">Line Chart</button>
         <div class="modal-header">
           <h5 class="modal-title">CCE Student Experience Chart</h5>
         </div>

From af05ff4d7ea255eea8e3d39aa03293019fd9d331 Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Mon, 1 Dec 2025 22:03:26 -0500
Subject: [PATCH 11/15] line chart implemented

---
 app/static/js/minorAdminPage.js   | 188 ++++++++++++++++++------------
 app/templates/admin/cceMinor.html |   7 +-
 2 files changed, 117 insertions(+), 78 deletions(-)

diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index 1f72a6cf5..f980fb898 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -60,88 +60,126 @@ $('.remove_minor_candidate').on('click', function() {
   if (activeTab) {
       $('#studentTabs button[data-bs-target="#' + activeTab + '"]').tab('show');
   }
+  let barChart = null;
+  let lineChart = null;
   $("#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++){
-          yValues.push(responses[i].engagementCount);
-          xValues.push(responses[i].name);
-          barColors.push(responses[i].completeSummer === "Yes" ? "green" : "red");
-        }
-        const cceChart = document.getElementById('cceChartGen');
-        const maxValue = Math.max(...yValues.map(Number))+2;
-        if (cceChart) {
-          // new Chart(cceChart, {
-          //   type: "bar",
-          //   data: {
-          //     labels: xValues,
-          //     datasets: [{
-          //       label: "Summer Completed",
-          //       backgroundColor: barColors,
-          //       data: yValues
-          //     }]
-          //   },
-          //   options: {
-          //     scales:{
-          //       y: {
-          //         beginAtZero: true,
-          //         max: maxValue,
-          //         title:{
-          //           display:true,
-          //           text:'Number of Engagements'
-          //         },
-          //         ticks: {
-          //             stepSize: 1
-          //           }
-          //         },
-          //       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}`
-          //              ];
-          //           }
-          //         }
-          //       }
-          //     }
-          //   }
-          // });
-          new Chart (cceChart,{
-            type: "line",
-            data: {
-              labels: xValues,
-              data
-
-            }
+      success: function (responses) {
+          const names = [];
+          const engagements = [];
+          const barColors = [];
+          responses.forEach(r => {
+              names.push(r.name);
+              engagements.push(r.engagementCount);
+              barColors.push(r.completeSummer === "Yes" ? "green" : "red");
+          });
+          const maxValue = Math.max(...engagements) + 2;
+          const cceBarChart = document.getElementById('cceChartByEngagement');
+          if (barChart) barChart.destroy();
+          barChart = new Chart(cceBarChart, {
+              type: "bar",
+              data: {
+                  labels: names,
+                  datasets: [{
+                      backgroundColor: barColors,
+                      data: engagements
+                  }]
+              },
+              options: {
+                  plugins: {
+                      legend: { display: false }
+                  },
+                  scales: {
+                      y: {
+                          beginAtZero: true,
+                          max: maxValue,
+                          ticks: { stepSize: 1 }
+                      }
+                  }
+              }
+          });
+          const termMap = {};
+          responses.forEach(r => {
+              if (!termMap[r.termDescription]) {
+                  termMap[r.termDescription] = {
+                      engagement: 0,
+                      students: []
+                  };
+              }
+              console.log(r.engagementCount);
+              termMap[r.termDescription].engagement += Number(r.engagementCount);
+              console.table(termMap);
+              termMap[r.termDescription].students.push(r.name);
+          });
+          const sortedTerms = Object.keys(termMap).sort();
+          const termEngagements = sortedTerms.map(t => termMap[t].engagement);
+          const termStudents = sortedTerms.map(t => termMap[t].students);
+          const maxEngagement = Math.max(...termEngagements) + 2;
+          const cceLineChart = document.getElementById("cceChartByTerm");
+          if (lineChart) lineChart.destroy();
+          lineChart = new Chart(cceLineChart, {
+              type: "line",
+              data: {
+                  labels: sortedTerms,
+                  datasets: [{
+                      label: "Engagement by Term",
+                      borderColor: "blue",
+                      fill: false,
+                      data: termEngagements
+                  }]
+              },
+              options: {
+                  responsive: true,
+                  scales:{
+                      y: {
+                          beginAtZero: true,
+                          max: maxEngagement,
+                          ticks: { stepSize: 1 },
+                          title:{
+                          display: true,
+                          text: 'Engagement Count'
+                          }
+                      },
+                      x: {
+                        title:{
+                        display: true,
+                        text: 'Terms'
+                        }
+                      },
+                  },
+                  plugins: {
+                      tooltip: {
+                          callbacks: {
+                              label: function (context) {
+                                  console.table(context);
+                                  const idx = context.dataIndex;
+                                  const value = context.raw;
+                                  const students = termStudents[idx].join(", ");
+                                  return [
+                                      `Engagements: ${value}`,
+                                      `Students: ${students}`
+                                  ];
+                              }
+                          }
+                      }
+                  }
+              }
+          });
+
+          $("#chartButton").off().on("click", function () {
+              $("#cceChartByEngagement").show();
+              $("#cceChartByTerm").hide();
+          });
+          $("#dataButton").off().on("click", function () {
+              $("#cceChartByEngagement").hide();
+              $("#cceChartByTerm").show();
           });
-        }
-      },
-      error: function(error) {
-        console.log("error: " + error);
       }
-    });
-  })
+  });
+  });
 
   // Download the chart as an image
   $("#cceDownload").on("click", function(selected, fileName = "cceMinorChart.png"){
diff --git a/app/templates/admin/cceMinor.html b/app/templates/admin/cceMinor.html
index 0bcd8d5ea..0c90e4c4e 100644
--- a/app/templates/admin/cceMinor.html
+++ b/app/templates/admin/cceMinor.html
@@ -35,8 +35,8 @@ <h2>CCE Minor Progress</h2>
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="ccePrint">
-        <button type="button" class="btn m-2" id="chartButton">Bar Chart</button>
-        <button type="button" class="btn m-2" id="dataButton">Line Chart</button>
+        <button type="button " class="btn m-2 btn-primary m-3" id="chartButton">Bar Chart</button>
+        <button type="button" class="btn m-2 btn-primary my-3" id="dataButton">Line Chart</button>
         <div class="modal-header">
           <h5 class="modal-title">CCE Student Experience Chart</h5>
         </div>
@@ -55,7 +55,8 @@ <h5 class="modal-title">CCE Student Experience Chart</h5>
               </br>
             </span>
           </span>
-          <canvas id="cceChartGen" width="400" height="400"></canvas>
+          <canvas id="cceChartByEngagement" width="400" height="400"></canvas>
+          <canvas id="cceChartByTerm" width="400" height="300" style="display:none;"></canvas>
         </div>
       </div>
         <div class="modal-footer">

From 2f8dee0308206e88330b330f02cb1c75f7161c3d Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Fri, 12 Dec 2025 17:25:34 -0500
Subject: [PATCH 12/15] not working but thinking of creating a fdunction to
 expand the terms

---
 app/static/js/minorAdminPage.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index f980fb898..9141ec512 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -115,6 +115,26 @@ $('.remove_minor_candidate').on('click', function() {
               termMap[r.termDescription].students.push(r.name);
           });
           const sortedTerms = Object.keys(termMap).sort();
+          const startTerm = Object.keys(sortedTerms)[0];
+          const [season, year] = startTerm.split(" ");
+          const endTerm = sortedTerms[sortedTerms.length -1];
+          console.log("end", endTerm);
+          console.log("nyeet", `${season} ${year}`);
+          
+          while (endTerm != `${season} ${year}`) {
+              if (season === "Spring") {
+                  sortedTerms.push(`Summer ${year}`);
+                  season = "Summer";
+              } else if (season === "Summer") {
+                  sortedTerms.push(`Fall ${year}`);
+                  season = "Fall";
+              } else if (season === "Fall") {
+                  sortedTerms.push(`Spring ${Number(year) + 1}`);
+                  season = "Spring";
+                  year = String(Number(year) + 1);
+              }
+          }
+          console.log(sortedTerms, `${season} ${year}`);
           const termEngagements = sortedTerms.map(t => termMap[t].engagement);
           const termStudents = sortedTerms.map(t => termMap[t].students);
           const maxEngagement = Math.max(...termEngagements) + 2;
@@ -168,7 +188,7 @@ $('.remove_minor_candidate').on('click', function() {
                   }
               }
           });
-
+          console.table(termMap);
           $("#chartButton").off().on("click", function () {
               $("#cceChartByEngagement").show();
               $("#cceChartByTerm").hide();

From fc1c831ef881a8241b6be491f95286e83a47ed7a Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Mon, 15 Dec 2025 13:57:07 -0500
Subject: [PATCH 13/15] terms population corrected, chart sizes correct and bar
 chart legend has been standardized

---
 app/controllers/admin/minor.py    |   1 -
 app/static/js/minorAdminPage.js   | 290 +++++++++++++++++-------------
 app/templates/admin/cceMinor.html |  16 +-
 3 files changed, 166 insertions(+), 141 deletions(-)

diff --git a/app/controllers/admin/minor.py b/app/controllers/admin/minor.py
index 5a2bd958c..b02ddff1f 100644
--- a/app/controllers/admin/minor.py
+++ b/app/controllers/admin/minor.py
@@ -12,7 +12,6 @@ def cceMinorChart(username):
         abort(403)
     else:
         progressList = getMinorProgress()
-        print(progressList, "yeet")
         turnToChart = []
         for progress in progressList:
             turnToChart.append({'name':progress["firstName"] + " " + progress["lastName"], "engagementCount" : progress['engagementCount'], "completeSummer": "Yes" if progress['hasSummer'] == "Complete" else "No", "termDescription": progress['engagementTerm']})
diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index 9141ec512..d9381fa1e 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -68,143 +68,183 @@ $('.remove_minor_candidate').on('click', function() {
       type: 'GET',
       url: '/profile/' + username + '/cceMinorChart',
       success: function (responses) {
-          const names = [];
-          const engagements = [];
-          const barColors = [];
-          responses.forEach(r => {
-              names.push(r.name);
-              engagements.push(r.engagementCount);
-              barColors.push(r.completeSummer === "Yes" ? "green" : "red");
-          });
-          const maxValue = Math.max(...engagements) + 2;
-          const cceBarChart = document.getElementById('cceChartByEngagement');
-          if (barChart) barChart.destroy();
-          barChart = new Chart(cceBarChart, {
-              type: "bar",
-              data: {
-                  labels: names,
-                  datasets: [{
-                      backgroundColor: barColors,
-                      data: engagements
-                  }]
-              },
-              options: {
-                  plugins: {
-                      legend: { display: false }
-                  },
-                  scales: {
-                      y: {
-                          beginAtZero: true,
-                          max: maxValue,
-                          ticks: { stepSize: 1 }
+        const names = [];
+        const engagements = [];
+        const barColors = [];
+        responses.forEach(r => {
+            names.push(r.name);
+            engagements.push(r.engagementCount);
+            barColors.push(r.completeSummer === "Yes" ? "green" : "red");
+        });
+        
+        // Bar Chart
+        const maxBarValue = Math.max(...engagements) + 2;
+        const cceBarChart = document.getElementById('cceChartByEngagement');
+        if (barChart) barChart.destroy();
+        barChart = new Chart(cceBarChart, {
+          type: "bar",
+          data: {
+            labels: names,
+            datasets: [
+              {
+                data: engagements,
+                backgroundColor: barColors 
+              }
+            ]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: true,
+            plugins: {
+              legend: {
+                display: true,
+                position: "top",
+                labels: {
+                  generateLabels: function () {
+                    return [
+                      {
+                        text: "Summer Incomplete",
+                        fillStyle: "red",
+                        strokeStyle: "red",
+                        lineWidth: 1
+                      },
+                      {
+                        text: "Summer Complete",
+                        fillStyle: "green",
+                        strokeStyle: "green",
+                        lineWidth: 1
                       }
+                    ];
                   }
+                }
               }
-          });
-          const termMap = {};
-          responses.forEach(r => {
-              if (!termMap[r.termDescription]) {
-                  termMap[r.termDescription] = {
-                      engagement: 0,
-                      students: []
-                  };
-              }
-              console.log(r.engagementCount);
-              termMap[r.termDescription].engagement += Number(r.engagementCount);
-              console.table(termMap);
-              termMap[r.termDescription].students.push(r.name);
-          });
-          const sortedTerms = Object.keys(termMap).sort();
-          const startTerm = Object.keys(sortedTerms)[0];
-          const [season, year] = startTerm.split(" ");
-          const endTerm = sortedTerms[sortedTerms.length -1];
-          console.log("end", endTerm);
-          console.log("nyeet", `${season} ${year}`);
-          
-          while (endTerm != `${season} ${year}`) {
-              if (season === "Spring") {
-                  sortedTerms.push(`Summer ${year}`);
-                  season = "Summer";
-              } else if (season === "Summer") {
-                  sortedTerms.push(`Fall ${year}`);
-                  season = "Fall";
-              } else if (season === "Fall") {
-                  sortedTerms.push(`Spring ${Number(year) + 1}`);
-                  season = "Spring";
-                  year = String(Number(year) + 1);
+            },
+            scales: {
+              y: {
+                beginAtZero: true,
+                max: maxBarValue,
+                ticks: { stepSize: 1 }
               }
+            }
+          }
+        });
+
+        // Line Chart
+        const SEASONS = ["Spring", "Summer", "Fall"];
+        function parseTerm(term) {
+          const [season, year] = term.split(" ");
+          return { season, year: Number(year) };
+        }
+        function termToIndex({ season, year }) {
+          /**
+           * converts a term like {season: "Fall", year: 2023} to an index for easier sorting
+           * e.g., Spring 2023 -> 2023*3 + 0 = 6069
+           *       Summer 2023 -> 2023*3 + 1 = 6070
+           *       Fall 2023   -> 2023*3 + 2 = 6071
+           */            
+          return year * 3 + SEASONS.indexOf(season); 
+        }
+        function indexToTerm(idx) {
+          /**
+           * converts an index back to a term string
+           * e.g., 6069 -> Spring 2023
+           */
+          const year = Math.floor(idx / 3);
+          const season = SEASONS[idx % 3];
+          return `${season} ${year}`;
+        }
+        const termMap = {};
+        responses.forEach(r => {
+          if (!termMap[r.termDescription]) {
+            termMap[r.termDescription] = {
+              engagement: 0,
+              students: []
+            };
           }
-          console.log(sortedTerms, `${season} ${year}`);
-          const termEngagements = sortedTerms.map(t => termMap[t].engagement);
-          const termStudents = sortedTerms.map(t => termMap[t].students);
-          const maxEngagement = Math.max(...termEngagements) + 2;
-          const cceLineChart = document.getElementById("cceChartByTerm");
-          if (lineChart) lineChart.destroy();
-          lineChart = new Chart(cceLineChart, {
-              type: "line",
-              data: {
-                  labels: sortedTerms,
-                  datasets: [{
-                      label: "Engagement by Term",
-                      borderColor: "blue",
-                      fill: false,
-                      data: termEngagements
-                  }]
+          termMap[r.termDescription].engagement += Number(r.engagementCount);
+          termMap[r.termDescription].students.push(r.name);
+        });
+        const terms = Object.keys(termMap);
+        const indices = terms.map(t => termToIndex(parseTerm(t)));
+        const minIdx = Math.min(...indices);
+        const maxIdx = Math.max(...indices);
+        const labels = [];
+        for (let i = minIdx; i <= maxIdx; i++) {
+          labels.push(indexToTerm(i));
+        }
+        labels.forEach(t => {
+          if (!termMap[t]) {
+            termMap[t] = { engagement: 0, students: [] };
+          }
+        });
+        const termEngagements = labels.map(t => termMap[t].engagement);
+        const termStudents = labels.map(t => termMap[t].students);
+        const maxEngagement = Math.max(...termEngagements) + 2;
+        const cceLineChart = document.getElementById("cceChartByTerm");
+        if (lineChart) lineChart.destroy();
+
+        lineChart = new Chart(cceLineChart, {
+          type: "line",
+          data: {
+            labels: labels,
+            datasets: [{
+              label: "Engagement by Term",
+              data: termEngagements,
+              fill: false
+            }]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: true,
+            scales: {
+              y: {
+                beginAtZero: true,
+                max: maxEngagement,
+                ticks: { stepSize: 1 },
+                title: {
+                  display: true,
+                  text: "Engagement Count"
+                }
               },
-              options: {
-                  responsive: true,
-                  scales:{
-                      y: {
-                          beginAtZero: true,
-                          max: maxEngagement,
-                          ticks: { stepSize: 1 },
-                          title:{
-                          display: true,
-                          text: 'Engagement Count'
-                          }
-                      },
-                      x: {
-                        title:{
-                        display: true,
-                        text: 'Terms'
-                        }
-                      },
-                  },
-                  plugins: {
-                      tooltip: {
-                          callbacks: {
-                              label: function (context) {
-                                  console.table(context);
-                                  const idx = context.dataIndex;
-                                  const value = context.raw;
-                                  const students = termStudents[idx].join(", ");
-                                  return [
-                                      `Engagements: ${value}`,
-                                      `Students: ${students}`
-                                  ];
-                              }
-                          }
-                      }
+              x: {
+                title: {
+                  display: true,
+                  text: "Terms"
+                }
+              }
+            },
+            plugins: {
+              tooltip: {
+                callbacks: {
+                  label: function (context) {
+                    const idx = context.dataIndex;
+                    return [
+                      `Engagements: ${context.raw}`,
+                      `Students: ${termStudents[idx].join(", ")}`
+                    ];
                   }
+                }
               }
-          });
-          console.table(termMap);
-          $("#chartButton").off().on("click", function () {
-              $("#cceChartByEngagement").show();
-              $("#cceChartByTerm").hide();
-          });
-          $("#dataButton").off().on("click", function () {
-              $("#cceChartByEngagement").hide();
-              $("#cceChartByTerm").show();
-          });
+            }
+          }
+        });
+        function showBarChart() {
+          $("#cceChartByEngagement").show();
+          $("#cceChartByTerm").hide();
+          setTimeout(() => barChart?.resize(), 0);
+        }
+        function showLineChart() {
+          $("#cceChartByEngagement").hide();
+          $("#cceChartByTerm").show();
+          setTimeout(() => lineChart?.resize(), 0);
+        }
+        $("#chartButton").off("click").on("click", showBarChart);
+        $("#lineButton").off("click").on("click", showLineChart);
       }
+    });
   });
-  });
-
-  // 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(); 
diff --git a/app/templates/admin/cceMinor.html b/app/templates/admin/cceMinor.html
index 0c90e4c4e..c16388677 100644
--- a/app/templates/admin/cceMinor.html
+++ b/app/templates/admin/cceMinor.html
@@ -36,25 +36,11 @@ <h2>CCE Minor Progress</h2>
     <div class="modal-content">
       <div class="ccePrint">
         <button type="button " class="btn m-2 btn-primary m-3" id="chartButton">Bar Chart</button>
-        <button type="button" class="btn m-2 btn-primary my-3" id="dataButton">Line Chart</button>
+        <button type="button" class="btn m-2 btn-primary my-3" id="lineButton">Line Chart</button>
         <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="cceChartByEngagement" width="400" height="400"></canvas>
           <canvas id="cceChartByTerm" width="400" height="300" style="display:none;"></canvas>
         </div>

From c7029d2e629a318e9553fe5531035a5765f68657 Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Wed, 17 Dec 2025 17:00:51 -0500
Subject: [PATCH 14/15] committing the new changes so when downloaded th button
 labels are correct

---
 app/controllers/admin/minor.py    |   2 +-
 app/static/js/minorAdminPage.js   | 145 +++++++++++++++++-------------
 app/templates/admin/cceMinor.html |  14 ++-
 3 files changed, 89 insertions(+), 72 deletions(-)

diff --git a/app/controllers/admin/minor.py b/app/controllers/admin/minor.py
index b02ddff1f..80cceccd1 100644
--- a/app/controllers/admin/minor.py
+++ b/app/controllers/admin/minor.py
@@ -14,7 +14,7 @@ def cceMinorChart(username):
         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", "termDescription": progress['engagementTerm']})
+            turnToChart.append({'name':progress["firstName"] + " " + progress["lastName"], "engagementCount" : progress['engagementCount'], "completeSummer": "Yes" if progress['hasSummer'] == "Completed" else "No", "termDescription": progress['engagementTerm']})
         return jsonify(turnToChart)
     
 @admin_bp.route('/admin/cceMinor', methods=['GET','POST'])
diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index d9381fa1e..3bd27af84 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -1,4 +1,4 @@
-import searchUser from './searchUser.js'
+import searchUser from './searchUser.js';
 
 $(document).ready(function() {
   // Load flash message from sessionStorage, if any
@@ -68,68 +68,9 @@ $('.remove_minor_candidate').on('click', function() {
       type: 'GET',
       url: '/profile/' + username + '/cceMinorChart',
       success: function (responses) {
-        const names = [];
-        const engagements = [];
-        const barColors = [];
-        responses.forEach(r => {
-            names.push(r.name);
-            engagements.push(r.engagementCount);
-            barColors.push(r.completeSummer === "Yes" ? "green" : "red");
-        });
-        
-        // Bar Chart
-        const maxBarValue = Math.max(...engagements) + 2;
+        console.table(responses);
         const cceBarChart = document.getElementById('cceChartByEngagement');
-        if (barChart) barChart.destroy();
-        barChart = new Chart(cceBarChart, {
-          type: "bar",
-          data: {
-            labels: names,
-            datasets: [
-              {
-                data: engagements,
-                backgroundColor: barColors 
-              }
-            ]
-          },
-          options: {
-            responsive: true,
-            maintainAspectRatio: true,
-            plugins: {
-              legend: {
-                display: true,
-                position: "top",
-                labels: {
-                  generateLabels: function () {
-                    return [
-                      {
-                        text: "Summer Incomplete",
-                        fillStyle: "red",
-                        strokeStyle: "red",
-                        lineWidth: 1
-                      },
-                      {
-                        text: "Summer Complete",
-                        fillStyle: "green",
-                        strokeStyle: "green",
-                        lineWidth: 1
-                      }
-                    ];
-                  }
-                }
-              }
-            },
-            scales: {
-              y: {
-                beginAtZero: true,
-                max: maxBarValue,
-                ticks: { stepSize: 1 }
-              }
-            }
-          }
-        });
 
-        // Line Chart
         const SEASONS = ["Spring", "Summer", "Fall"];
         function parseTerm(term) {
           const [season, year] = term.split(" ");
@@ -153,6 +94,7 @@ $('.remove_minor_candidate').on('click', function() {
           const season = SEASONS[idx % 3];
           return `${season} ${year}`;
         }
+
         const termMap = {};
         responses.forEach(r => {
           if (!termMap[r.termDescription]) {
@@ -164,6 +106,7 @@ $('.remove_minor_candidate').on('click', function() {
           termMap[r.termDescription].engagement += Number(r.engagementCount);
           termMap[r.termDescription].students.push(r.name);
         });
+
         const terms = Object.keys(termMap);
         const indices = terms.map(t => termToIndex(parseTerm(t)));
         const minIdx = Math.min(...indices);
@@ -177,12 +120,80 @@ $('.remove_minor_candidate').on('click', function() {
             termMap[t] = { engagement: 0, students: [] };
           }
         });
+
         const termEngagements = labels.map(t => termMap[t].engagement);
         const termStudents = labels.map(t => termMap[t].students);
         const maxEngagement = Math.max(...termEngagements) + 2;
         const cceLineChart = document.getElementById("cceChartByTerm");
-        if (lineChart) lineChart.destroy();
+        const completeByTerm = {};
+        const incompleteByTerm = {};
+        labels.forEach(t => {
+          completeByTerm[t] = 0;
+          incompleteByTerm[t] = 0;
+        });
 
+        responses.forEach(r => {
+          if (r.completeSummer === "Yes") {
+            completeByTerm[r.termDescription] += Number(r.engagementCount);
+          } else {
+            incompleteByTerm[r.termDescription] += Number(r.engagementCount);
+          }
+        });
+        const completeEngagements = labels.map(t => completeByTerm[t] || 0);
+        const incompleteEngagements = labels.map(t => incompleteByTerm[t] || 0);
+        
+        //Bar Chart
+        if (barChart) barChart.destroy();
+        barChart = new Chart(cceBarChart, {
+          type: "bar",
+          data: {
+            labels: labels,
+            datasets: [
+              {
+                label: "Summer Incomplete",
+                data: incompleteEngagements,
+                backgroundColor: "red",
+                stack: "summer"
+              },
+              {
+                label: "Summer Complete",
+                data: completeEngagements,
+                backgroundColor: "green",
+                stack: "summer"
+              }
+            ]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: true,
+            plugins: {
+              title: {
+                display: true,
+                text: "CCE Engagements by Term",
+                font: { size: 18 }
+              },
+              legend: {
+                display: true,
+                position: "top"
+              }
+            },
+            scales: {
+              x: {
+                stacked: true,
+                title: { display: true, text: "Terms" }
+              },
+              y: {
+                stacked: true,
+                beginAtZero: true,
+                max: maxEngagement,
+                ticks: { stepSize: 1 },
+                title: { display: true, text: "Engagement Count" }
+              }
+            }
+          }
+        });        
+        if (lineChart) lineChart.destroy();
+        //Line Chart
         lineChart = new Chart(cceLineChart, {
           type: "line",
           data: {
@@ -209,11 +220,18 @@ $('.remove_minor_candidate').on('click', function() {
               x: {
                 title: {
                   display: true,
-                  text: "Terms"
+                  text: "Terms",
                 }
               }
             },
             plugins: {
+              title:{
+                display: true,
+                text: "CCE Engagements Trends over the Terms",
+                font: {
+                  size: 18
+                }
+              },
               tooltip: {
                 callbacks: {
                   label: function (context) {
@@ -246,6 +264,7 @@ $('.remove_minor_candidate').on('click', function() {
   $("#cceDownload").on("click", function(selected, fileName = "cceMinorChart.png"){
     const element = $(".ccePrint")[0]; 
     html2canvas(element).then(canvas => {
+      console.log(canvas.getContext('2d'));
       const downloadLink = document.createElement('a');
       downloadLink.href = canvas.toDataURL(); 
       downloadLink.download = fileName; 
diff --git a/app/templates/admin/cceMinor.html b/app/templates/admin/cceMinor.html
index c16388677..7eac8345c 100644
--- a/app/templates/admin/cceMinor.html
+++ b/app/templates/admin/cceMinor.html
@@ -3,11 +3,10 @@
 
 {% block scripts %}
   {{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>
-
+  <script type="module" src="/static/js/minorAdminPage.js"></script>
   {% block styles %}
     {{super()}}
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
@@ -34,13 +33,12 @@ <h2>CCE Minor Progress</h2>
 <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">
-        <button type="button " class="btn m-2 btn-primary m-3" id="chartButton">Bar Chart</button>
-        <button type="button" class="btn m-2 btn-primary my-3" id="lineButton">Line Chart</button>
-        <div class="modal-header">
-          <h5 class="modal-title">CCE Student Experience Chart</h5>
+      <div>
+        <div class="d-flex justify-content-around">
+          <button type="button " class="btn m-3 btn-primary" id="chartButton">Engagement Bar Chart</button>
+          <button type="button" class="btn m-3 btn-primary" id="lineButton">Engagement Line Chart</button>
         </div>
-        <div class="modal-body">
+        <div class="modal-body ccePrint p-2">
           <canvas id="cceChartByEngagement" width="400" height="400"></canvas>
           <canvas id="cceChartByTerm" width="400" height="300" style="display:none;"></canvas>
         </div>

From d2c7b8716063a0771519acc17260e9fdc10de19d Mon Sep 17 00:00:00 2001
From: zawn <zawn@berea.edu>
Date: Thu, 18 Dec 2025 14:27:40 -0500
Subject: [PATCH 15/15] clean up code tweak data visualization

---
 app/static/js/minorAdminPage.js | 257 +++++++++++++++-----------------
 1 file changed, 121 insertions(+), 136 deletions(-)

diff --git a/app/static/js/minorAdminPage.js b/app/static/js/minorAdminPage.js
index 3bd27af84..c6db729f2 100644
--- a/app/static/js/minorAdminPage.js
+++ b/app/static/js/minorAdminPage.js
@@ -68,177 +68,160 @@ $('.remove_minor_candidate').on('click', function() {
       type: 'GET',
       url: '/profile/' + username + '/cceMinorChart',
       success: function (responses) {
-        console.table(responses);
-        const cceBarChart = document.getElementById('cceChartByEngagement');
-
+        const $barChart = $("#cceChartByEngagement");
+        const $lineChart = $("#cceChartByTerm");
+        const barCanvas = document.getElementById("cceChartByEngagement");
+        const lineCanvas = document.getElementById("cceChartByTerm");
         const SEASONS = ["Spring", "Summer", "Fall"];
-        function parseTerm(term) {
-          const [season, year] = term.split(" ");
-          return { season, year: Number(year) };
-        }
-        function termToIndex({ season, year }) {
-          /**
-           * converts a term like {season: "Fall", year: 2023} to an index for easier sorting
-           * e.g., Spring 2023 -> 2023*3 + 0 = 6069
-           *       Summer 2023 -> 2023*3 + 1 = 6070
-           *       Fall 2023   -> 2023*3 + 2 = 6071
-           */            
-          return year * 3 + SEASONS.indexOf(season); 
-        }
-        function indexToTerm(idx) {
-          /**
-           * converts an index back to a term string
-           * e.g., 6069 -> Spring 2023
-           */
+        const termToIndex = (term) => {
+          const [season, yearStr] = term.split(" ");
+          return Number(yearStr) * 3 + SEASONS.indexOf(season);
+        };
+        const indexToTerm = (idx) => {
           const year = Math.floor(idx / 3);
           const season = SEASONS[idx % 3];
           return `${season} ${year}`;
-        }
-
-        const termMap = {};
-        responses.forEach(r => {
-          if (!termMap[r.termDescription]) {
-            termMap[r.termDescription] = {
-              engagement: 0,
-              students: []
-            };
+        };
+      
+        // Build: term { engagement, students[], studentCounts{} }
+        const byTerm = {};
+      
+        for (const r of responses) {
+          const term = r.termDescription;
+          const name = r.name;
+          const count = Number(r.engagementCount) || 0;
+      
+          if (!byTerm[term]) {
+            byTerm[term] = { engagement: 0, students: [], studentCounts: {} };
           }
-          termMap[r.termDescription].engagement += Number(r.engagementCount);
-          termMap[r.termDescription].students.push(r.name);
-        });
-
-        const terms = Object.keys(termMap);
-        const indices = terms.map(t => termToIndex(parseTerm(t)));
+      
+          byTerm[term].engagement += count;
+          byTerm[term].students.push(name);
+          byTerm[term].studentCounts[name] = (byTerm[term].studentCounts[name] || 0) + count;
+        }
+        const existingTerms = Object.keys(byTerm);
+      
+        if (!existingTerms.length) {
+          if (barChart) barChart.destroy();
+          if (lineChart) lineChart.destroy();
+          $barChart.hide();
+          $lineChart.hide();
+          return;
+        }
+        const indices = existingTerms.map(termToIndex);
         const minIdx = Math.min(...indices);
-        const maxIdx = Math.max(...indices);
+        const maxIdx = Math.max(...indices); 
         const labels = [];
-        for (let i = minIdx; i <= maxIdx; i++) {
-          labels.push(indexToTerm(i));
+        for (let i = minIdx; i <= maxIdx; i++) labels.push(indexToTerm(i));
+      
+        for (const term of labels) {
+          if (!byTerm[term]) byTerm[term] = { engagement: 0, students: [], studentCounts: {} };
         }
-        labels.forEach(t => {
-          if (!termMap[t]) {
-            termMap[t] = { engagement: 0, students: [] };
-          }
-        });
-
-        const termEngagements = labels.map(t => termMap[t].engagement);
-        const termStudents = labels.map(t => termMap[t].students);
+        const termEngagements = labels.map((t) => byTerm[t].engagement);
         const maxEngagement = Math.max(...termEngagements) + 2;
-        const cceLineChart = document.getElementById("cceChartByTerm");
-        const completeByTerm = {};
-        const incompleteByTerm = {};
-        labels.forEach(t => {
-          completeByTerm[t] = 0;
-          incompleteByTerm[t] = 0;
-        });
-
-        responses.forEach(r => {
-          if (r.completeSummer === "Yes") {
-            completeByTerm[r.termDescription] += Number(r.engagementCount);
-          } else {
-            incompleteByTerm[r.termDescription] += Number(r.engagementCount);
-          }
-        });
-        const completeEngagements = labels.map(t => completeByTerm[t] || 0);
-        const incompleteEngagements = labels.map(t => incompleteByTerm[t] || 0);
-        
-        //Bar Chart
+      
+        const isSummer = (term) => term.startsWith("Summer ");
+        const barColorsByTerm = labels.map((t) => (isSummer(t) ? "blue" : "green"));
+      
+        const formatStudentCounts = (term) => {
+          const counts = byTerm[term]?.studentCounts || {};
+          const entries = Object.entries(counts);
+          if (!entries.length) return "None";
+          return entries.map(([name, cnt]) => `${name} (${cnt})`).join(", ");
+        };
+      
+        const baseScales = {
+          y: {
+            beginAtZero: true,
+            max: maxEngagement,
+            ticks: { stepSize: 1 },
+            title: { display: true, text: "Engagement Count" }
+          },
+          x: { title: { display: true, text: "Terms" } }
+        };
+      
+        // Bar chart
         if (barChart) barChart.destroy();
-        barChart = new Chart(cceBarChart, {
+      
+        barChart = new Chart(barCanvas, {
           type: "bar",
           data: {
-            labels: labels,
+            labels,
             datasets: [
               {
-                label: "Summer Incomplete",
-                data: incompleteEngagements,
-                backgroundColor: "red",
-                stack: "summer"
-              },
-              {
-                label: "Summer Complete",
-                data: completeEngagements,
-                backgroundColor: "green",
-                stack: "summer"
+                label: "Engagement by Term",
+                data: termEngagements,
+                backgroundColor: barColorsByTerm
               }
             ]
           },
           options: {
             responsive: true,
             maintainAspectRatio: true,
+            scales: baseScales,
             plugins: {
               title: {
                 display: true,
-                text: "CCE Engagements by Term",
+                text: "CCE Engagements of Each Term",
                 font: { size: 18 }
               },
               legend: {
                 display: true,
-                position: "top"
-              }
-            },
-            scales: {
-              x: {
-                stacked: true,
-                title: { display: true, text: "Terms" }
+                position: "top",
+                labels: {
+                  generateLabels: () => [
+                    { text: "Summer Term", fillStyle: "blue", strokeStyle: "blue", lineWidth: 1 },
+                    { text: "Non-Summer Term", fillStyle: "green", strokeStyle: "green", lineWidth: 1 }
+                  ]
+                }
               },
-              y: {
-                stacked: true,
-                beginAtZero: true,
-                max: maxEngagement,
-                ticks: { stepSize: 1 },
-                title: { display: true, text: "Engagement Count" }
+              tooltip: {
+                callbacks: {
+                  label: (context) => {
+                    const term = labels[context.dataIndex];
+                    return [
+                      `Engagements: ${context.raw}`,
+                      `Students: ${formatStudentCounts(term)}`
+                    ];
+                  }
+                }
               }
             }
           }
-        });        
+        });
+      
+        // Line chart
         if (lineChart) lineChart.destroy();
-        //Line Chart
-        lineChart = new Chart(cceLineChart, {
+      
+        lineChart = new Chart(lineCanvas, {
           type: "line",
           data: {
-            labels: labels,
-            datasets: [{
-              label: "Engagement by Term",
-              data: termEngagements,
-              fill: false
-            }]
+            labels,
+            datasets: [
+              {
+                label: "Engagement by Term",
+                data: termEngagements,
+                fill: false
+              }
+            ]
           },
           options: {
             responsive: true,
             maintainAspectRatio: true,
-            scales: {
-              y: {
-                beginAtZero: true,
-                max: maxEngagement,
-                ticks: { stepSize: 1 },
-                title: {
-                  display: true,
-                  text: "Engagement Count"
-                }
-              },
-              x: {
-                title: {
-                  display: true,
-                  text: "Terms",
-                }
-              }
-            },
+            scales: baseScales,
             plugins: {
-              title:{
+              title: {
                 display: true,
                 text: "CCE Engagements Trends over the Terms",
-                font: {
-                  size: 18
-                }
+                font: { size: 18 }
               },
               tooltip: {
                 callbacks: {
-                  label: function (context) {
-                    const idx = context.dataIndex;
+                  label: (context) => {
+                    const term = labels[context.dataIndex];
                     return [
                       `Engagements: ${context.raw}`,
-                      `Students: ${termStudents[idx].join(", ")}`
+                      `Students: ${formatStudentCounts(term)}`
                     ];
                   }
                 }
@@ -246,25 +229,28 @@ $('.remove_minor_candidate').on('click', function() {
             }
           }
         });
-        function showBarChart() {
-          $("#cceChartByEngagement").show();
-          $("#cceChartByTerm").hide();
+
+        // Toggle handlers
+        const showBarChart = () => {
+          $barChart.show();
+          $lineChart.hide();
           setTimeout(() => barChart?.resize(), 0);
-        }
-        function showLineChart() {
-          $("#cceChartByEngagement").hide();
-          $("#cceChartByTerm").show();
+        };
+        const showLineChart = () => {
+          $barChart.hide();
+          $lineChart.show();
           setTimeout(() => lineChart?.resize(), 0);
-        }
+        };
+      
         $("#chartButton").off("click").on("click", showBarChart);
         $("#lineButton").off("click").on("click", showLineChart);
-      }
+        showBarChart();
+      }      
     });
   });
   $("#cceDownload").on("click", function(selected, fileName = "cceMinorChart.png"){
     const element = $(".ccePrint")[0]; 
     html2canvas(element).then(canvas => {
-      console.log(canvas.getContext('2d'));
       const downloadLink = document.createElement('a');
       downloadLink.href = canvas.toDataURL(); 
       downloadLink.download = fileName; 
@@ -273,7 +259,6 @@ $('.remove_minor_candidate').on('click', function() {
   })
 })
 
-
 function emailMinorCandidates(studentEmails){
   // If there are any students interested or declared, open the mailto link
   if (studentEmails.length) {