Added stats graph

clr-li · Apr 5, 2024 · 952013e · 952013e
1 parent 479371d
commit 952013e
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/public/components/Table.js b/public/components/Table.js
@@ -617,7 +617,7 @@ export class Table extends Component {
                 return;
             }
             const res = await PATCH(
-                `/businesses/${this.businessID}/${
+                `/businesses/${this.businessID}/events/${
                     this.event_to_alter.dataset.id
                 }/attendance?ids=${ids_to_alter.join(',')}&status=${this.status}`,
             );

diff --git a/public/stats.html b/public/stats.html
@@ -8,6 +8,9 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" type="image/png" href="/assets/logo.png" />
 
+        <!-- Charts -->
+        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
         <!-- import the webpage's stylesheet -->
         <link rel="stylesheet" href="/style.css" />
 
@@ -30,6 +33,11 @@ <h1>Stats</h1>
                 <button id="show-filter" class="button" type="button"><i class="fa-solid fa-filter"></i>&nbsp;Filter</button>
                 <div class="scroll">
                     <table id="user-stats-table" class="calendar"></table>
+                </div><br>
+                <div style="display: flex; flex-wrap: wrap">
+                    <div style="margin: auto; flex-grow: 1; max-width: var(--max-width); min-width: 30%; min-height: 100px;" class="load-wrapper">
+                        <canvas id="member-chart" style="background-color: white; border: 2px black solid; padding: 5px; border-radius: 5px;"></canvas>
+                    </div>
                 </div>
             </section>
         </navigation-manager>

diff --git a/public/stats.js b/public/stats.js
@@ -3,6 +3,7 @@ import { GET } from './util/Client.js';
 import { initBusinessSelector } from './util/selectors.js';
 import { calcSimilarity, sanitizeText } from '../util/util.js';
 import { Popup } from './components/Popup.js';
+const Chart = window.Chart;
 await requireLogin();
 
 const { get: getBusinessId } = await initBusinessSelector('business-selector', async () => {
@@ -67,6 +68,69 @@ async function runMemberStatsTable(memberAttArr, numPastEvents) {
     }
     const attendance = document.getElementById('user-stats-table');
     attendance.innerHTML = html;
+    runMemberStatsChart(uidToUserinfo);
+}
+
+function runMemberStatsChart(uidToUserInfo) {
+    let xValues = [];
+    // get all present values for each user
+    let yPresent = [];
+    let yAbsent = [];
+    let yLate = [];
+    let yExcused = [];
+    for (const user of uidToUserInfo.keys()) {
+        const userinfo = uidToUserInfo.get(user);
+        yPresent.push(userinfo.PRESENT);
+        yAbsent.push(userinfo.ABSENT);
+        yLate.push(userinfo.LATE);
+        yExcused.push(userinfo.EXCUSED);
+        xValues.push(userinfo.name);
+    }
+
+    new Chart(document.getElementById('member-chart'), {
+        type: 'bar',
+        data: {
+            labels: xValues,
+            datasets: [
+                {
+                    label: 'PRESENT',
+                    data: yPresent,
+                    borderWidth: 1,
+                },
+                {
+                    label: 'ABSENT',
+                    data: yAbsent,
+                    borderWidth: 1,
+                },
+                {
+                    label: 'LATE',
+                    data: yLate,
+                    borderWidth: 1,
+                },
+                {
+                    label: 'EXCUSED',
+                    data: yExcused,
+                    borderWidth: 1,
+                },
+            ],
+        },
+        options: {
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Member Attendance',
+                },
+            },
+            scales: {
+                x: {
+                    stacked: true,
+                },
+                y: {
+                    stacked: true,
+                },
+            },
+        },
+    });
 }
 
 function sortStudents(searchword) {