fix hide/show graph window

src/roast.html

@@ -41,7 +41,7 @@
         </table>
     </div>
     <div id="graph-container" class="hidden">
-        <button id="close-btn">X</button>
+        <button onclick="hideGraph()" id="close-btn">X</button>
         <canvas id="myChart"></canvas>
     </div>
     <!--script type="module" src="./tempgraph.ts"></script-->

src/roast.ts

@@ -18,6 +18,7 @@ interface Window {
     logTemp?: Function; //function to log a temputure event
     exportCSV?: Function; //function to export the events to CSV
     showGraph?: Function; // function to render or display graphs using libraries like Chart.js for visual representation of logged events
+    hideGraph?: Function; //function to hind the graph popup
 }
 
 
@@ -168,6 +169,14 @@ function showGraph(): void {
     }
 }
 
+function hideGraph(): void {
+    const graphContainer = document.getElementById("graph-container");
+    if (graphContainer) {
+        graphContainer.classList.add("hidden");
+        graphContainer.classList.remove("graph-display-flex");
+    }
+}
+
 // Expose functions to the global scope (allowing html direct access)
 if (typeof window !== 'undefined') {
     window.startTimer = startTimer;
@@ -179,4 +188,5 @@ if (typeof window !== 'undefined') {
     window.logTemp = logTemp;
     window.exportCSV = exportCSV;
     window.showGraph = showGraph;
+    window.hideGraph = hideGraph;
 }

src/tempgraph.ts

@@ -105,10 +105,3 @@ new Chart(ctx, {
     }
   }
 });
-
-document.getElementById('close-btn')?.addEventListener('click', () => {
-  const container = document.getElementById('graph-container');
-  if (container) {
-    container.style.display = container.style.display === 'none' ? 'flex' : 'none';
-  }
-});