Analytics Page Frontend

package.json

@@ -29,6 +29,7 @@
     "@types/intro.js": "^3.0.0",
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.22.0",
+    "chart.js": "^4.4.7",
     "core-js": "^3.6.5",
     "cypress-axe": "^0.14.0",
     "cypress-firebase": "^2.2.2",
@@ -42,6 +43,7 @@
     "node-fetch": "^2.6.7",
     "pdfjs-dist": "^3.5.141",
     "vue": "^3.2.19",
+    "vue-chartjs": "^5.3.2",
     "vue-gtag-next": "^1.14.0",
     "vue-router": "^4.0.6",
     "vuedraggable": "^4.0.0",

src/containers/Analytics.vue

@@ -4,6 +4,14 @@
       <top-bar />
       <div class="timestamp" v-if="hasData()">Data last retrieved at: {{ analyticsTimestamp }}</div>
       <pre class="analytics" v-if="hasData()">{{ analyticsData }}</pre>
+      <div v-if="hasData() && Object.keys(gradYearFrequencies).length > 0" class="hash-map-display">
+        <h3>Graduation Year Frequencies</h3>
+        <ul>
+          <li v-for="(value, key) in gradYearFrequencies" :key="key">{{ key }}: {{ value }}</li>
+        </ul>
+        <!-- Pie Chart Component -->
+        <PieChart :chartData="gradYearFrequencies" />
+      </div>
       <div class="back_to_home">
         <a class="back_to_home_link" href="/login">Back to home</a>
       </div>
@@ -16,28 +24,52 @@
 import { defineComponent } from 'vue';
 import CustomFooter from '@/components/Footer.vue';
 import TopBar from '@/components/TopBar.vue';
+import PieChart from '@/containers/PieChart.vue'; // Import PieChart Component
 import { retrieveAnalytics } from '@/global-firestore-data';
 
 export default defineComponent({
-  components: { CustomFooter, TopBar },
+  components: { CustomFooter, TopBar, PieChart },
   mounted() {
     this.retrieveData();
   },
   data() {
     return {
       analyticsData: '',
       analyticsTimestamp: '',
+      gradYearFrequencies: {} as Record<string, number>, // Add property for hash map
     };
   },
   methods: {
     async retrieveData() {
       const analyticsObject = await retrieveAnalytics();
       this.analyticsData = analyticsObject.data;
       this.analyticsTimestamp = analyticsObject.timestamp;
+
+      // Extract gradYearFrequencies once data is retrieved
+      this.gradYearFrequencies = this.extractGradYearFrequencies();
     },
     hasData() {
       return this.analyticsData.length > 2;
     },
+    extractGradYearFrequencies() {
+      const startKey = '"gradYearFrequencies": {';
+      const endKey = '}';
+
+      // Find the part of the string containing gradYearFrequencies
+      const startIndex = this.analyticsData.indexOf(startKey) + startKey.length;
+      const endIndex = this.analyticsData.indexOf(endKey, startIndex);
+      const gradYearFrequenciesString = this.analyticsData.substring(startIndex, endIndex).trim();
+
+      // Convert the extracted string to a hash map
+      const hashMap: Record<string, number> = {}; // Explicit typing for hash map
+      const pairs = gradYearFrequenciesString.split(',').map(pair => pair.trim());
+      for (const pair of pairs) {
+        const [key, value] = pair.split(':').map(item => item.trim().replace(/["']/g, '')); // Remove quotes
+        hashMap[key] = parseInt(value, 10); // Convert value to an integer
+      }
+
+      return hashMap;
+    },
   },
 });
 </script>
@@ -91,4 +123,15 @@ a.back_to_home_link {
     padding: 0 0 0 3.125rem;
   }
 }
+.hash-map-display {
+  margin-top: 2rem;
+  padding: 1rem;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.hash-map-display h3 {
+  margin-bottom: 1rem;
+}
 </style>

src/containers/PieChart.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <canvas ref="chartCanvas" style="max-width: 300px; max-height: 300px"></canvas>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import { Chart, registerables } from 'chart.js';
+
+// Register Chart.js components
+Chart.register(...registerables);
+
+export default defineComponent({
+  props: {
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const chartCanvas = ref<HTMLCanvasElement | null>(null);
+
+    onMounted(() => {
+      if (chartCanvas.value) {
+        // eslint-disable-next-line no-new
+        new Chart(chartCanvas.value, {
+          type: 'pie',
+          data: {
+            labels: Object.keys(props.chartData),
+            datasets: [
+              {
+                data: Object.values(props.chartData),
+                backgroundColor: [
+                  '#003f5c',
+                  '#2f4b7c',
+                  '#665191',
+                  '#a05195',
+                  '#d45087',
+                  '#f95d6a',
+                  '#ff7c43',
+                  '#ffa600',
+                ],
+              },
+            ],
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: true, // Maintain a smaller size
+            plugins: {
+              legend: {
+                position: 'bottom',
+              },
+            },
+          },
+        });
+      }
+    });
+
+    return {
+      chartCanvas,
+    };
+  },
+});
+</script>