Fix Graph Resizing!

- This is actually huge because I've always had an issue with these graphs resizing back down. But I found a way to do it! Fixes to my other apps incoming!

Author: programmingKyle

src/graphAnnual.js

@@ -63,10 +63,3 @@ function createAnnualHoursGraph() {
 
 // Initial setup
 annualHoursGraph = createAnnualHoursGraph();
-
-// Resize event listener
-window.addEventListener('resize', () => {
-    annualHoursGraph.destroy();
-
-    annualHoursGraph = createAnnualHoursGraph();
-});

src/graphMonth.js

@@ -70,11 +70,20 @@ function createChart() {
 // Initial setup
 monthHours = createChart();
 
-// Resize event listener
 window.addEventListener('resize', () => {
-  // Destroy the existing chart instance
-  monthHours.destroy();
+  // Destroy the existing chart instances for all canvases
+  if (topicHoursGraph) {
+    topicHoursGraph.destroy();
+  }
+  if (annualHoursGraph) {
+    annualHoursGraph.destroy();
+  }
+  if (monthHours) {
+    monthHours.destroy();
+  }
 
-  // Recreate the chart with updated dimensions
+  // Recreate the chart instances for all canvases with updated dimensions
+  topicHoursGraph = createTopicHoursGraph();
+  annualHoursGraph = createAnnualHoursGraph();
   monthHours = createChart();
-});
+});

src/graphTopics.js

@@ -43,7 +43,7 @@ function createTopicHoursGraph() {
         }
       },
       maintainAspectRatio: false,
-      responsive: false,
+      responsive: true,
       scales: {
         y: {
           display: true, // Display y-axis
@@ -64,12 +64,3 @@ function createTopicHoursGraph() {
 
 // Initial setup
 topicHoursGraph = createTopicHoursGraph();
-
-// Resize event listener
-window.addEventListener('resize', () => {
-  // Destroy the existing chart instance
-  topicHoursGraph.destroy();
-
-  // Recreate the chart with updated dimensions
-  topicHoursGraph = createTopicHoursGraph();
-});

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: 100%; height: auto;"></canvas>
+              <canvas id="topicHoursGraph"></canvas>
             </div>
             <div class="container">
               <canvas id="annualHoursGraph"></canvas>