Weekly Hours Comparison Graph

- Removed topic hours pie chart (redundant information and also had a lot of problems with making it responsive)
- Added the weekly comparison graph template. I like the graph idea way more.

Author: programmingKyle

src/graphTopics.js

@@ -7,41 +7,58 @@ function getRandomNumber(min, max) {
 }
 
 function createTopicHoursGraph() {
-  const topics = ['Topic 1', 'Topic 2', 'Topic 3', 'Topic 4', 'Topic 5'];
-  const data = topics.map(() => getRandomNumber(10, 50));
+  const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+  const previousWeekHours = days.map(() => getRandomNumber(0.5, 8));
+  const currentWeekHours = days.map(() => getRandomNumber(0.5, 8));
 
   return new Chart(ctxTopicHours, {
-    type: 'doughnut',
+    type: 'line',
     data: {
-      labels: topics,
+      labels: days,
       datasets: [{
-        data: data,
-        backgroundColor: [
-          'rgba(255, 99, 132, 0.5)',
-          'rgba(54, 162, 235, 0.5)',
-          'rgba(255, 206, 86, 0.5)',
-          'rgba(75, 192, 192, 0.5)',
-          'rgba(153, 102, 255, 0.5)',
-        ],
-        borderColor: [
-          'rgba(255, 99, 132, 1)',
-          'rgba(54, 162, 235, 1)',
-          'rgba(255, 206, 86, 1)',
-          'rgba(75, 192, 192, 1)',
-          'rgba(153, 102, 255, 1)',
-        ],
-        borderWidth: 1
+        label: 'Previous Week',
+        data: previousWeekHours,
+        borderColor: 'rgba(169, 169, 169, 0.1)',
+        backgroundColor: 'rgba(255, 99, 132, 0)',
+        borderWidth: 2,
+        fill: false // No fill under the line
+      },
+      {
+        label: 'Current Week',
+        data: currentWeekHours,
+        borderColor: 'rgba(54, 162, 235, 1)',
+        backgroundColor: 'rgba(54, 162, 235, 0)',
+        borderWidth: 2,
+        fill: false // No fill under the line
       }]
     },
     options: {
       plugins: {
-        legend: {
-          display: false,
+        title: {
+          display: true,
+          text: 'Weekly Hours Comparison',
         },
+        legend: {
+          display: false // Hide legend
+        }
       },
       maintainAspectRatio: false,
-      responsive: false,
-    },
+      responsive: true,
+      scales: {
+        y: {
+          display: true, // Display y-axis
+          ticks: {
+            stepSize: 1, // Step size for y-axis ticks
+            font: {
+              size: 12 // Adjust font size for y-axis ticks
+            }
+          }
+        },
+        x: {
+          display: false // Hide x-axis
+        }
+      }
+    }
   });
 }
 

src/index.css

@@ -217,7 +217,7 @@ h1,h2,h3,h4,h5,h6 {
 
 .bottom-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr auto;
+  grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 5px;
   overflow: hidden;
 }

src/index.html

@@ -87,7 +87,7 @@ <h3>10.5</h3>
           </div>
           <div class="bottom-right-graphs">
             <div class="container">
-              <canvas id="topicHoursGraph" style="width: auto; height: 100%; align-self: center;"></canvas>
+              <canvas id="topicHoursGraph"></canvas>
             </div>
             <div class="container">
               <canvas id="annualHoursGraph"></canvas>