update show graph

src/roast.css

@@ -5,6 +5,7 @@ body {
     margin: 0;
     padding: 0;
 }
+
 #timer {
     font-size: 48px;
     text-align: center;
@@ -13,26 +14,31 @@ body {
     border: 2px solid #666;
     margin: 0;
 }
+
 #create-plan {
     padding: 20px;
     text-align: center;
 }
+
 #create-plan input {
     width: 80%;
     padding: 10px;
     font-size: 18px;
 }
+
 #create-plan button {
     margin-top: 10px;
     padding: 10px 20px;
     font-size: 18px;
 }
+
 #controls {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
 }
+
 .button-group {
     display: flex;
     flex-wrap: wrap;
@@ -40,6 +46,7 @@ body {
     gap: 10px;
     margin: 10px;
 }
+
 .button-group button:not(.nav-btn) {
     font-size: 20px;
     border: 2px solid #666;
@@ -48,6 +55,7 @@ body {
     border-radius: 10px;
     cursor: pointer;
 }
+
 .button-group .nav-btn {
     padding: 15px 25px;
     font-size: 20px;
@@ -57,9 +65,11 @@ body {
     border-radius: 10px;
     cursor: pointer;
 }
+
 .button-group button:active {
     background-color: #ddd;
 }
+
 #event-buttons {
     display: flex;
     flex-wrap: wrap;
@@ -67,6 +77,7 @@ body {
     gap: 10px;
     margin: 20px;
 }
+
 #event-buttons button {
     padding: 15px 25px;
     font-size: 20px;
@@ -76,30 +87,38 @@ body {
     border-radius: 10px;
     cursor: pointer;
 }
+
 #event-buttons button:active {
     background-color: #ddd;
 }
+
 #log-table {
     width: 100%;
     border-collapse: collapse;
 }
+
 #log-table table {
     table-layout: fixed;
     width: 90%;
-    margin: auto;        
+    margin: auto;
 }
-#log-table th, #log-table td {
+
+#log-table th,
+#log-table td {
     border: 1px solid #666;
     padding: 10px;
     text-align: center;
 }
+
 #log-table th {
     background-color: #f0e6ff;
 }
+
 #export-csv {
     margin: 20px;
     text-align: center;
 }
+
 #export-csv button {
     padding: 10px 20px;
     font-size: 18px;
@@ -109,32 +128,42 @@ body {
     border-radius: 10px;
     cursor: pointer;
 }
+
 #export-csv button:active {
     background-color: #ddd;
 }
+
 .hidden {
     display: none;
 }
+
 #temp-buttons {
     margin: 8px;
 }
+
 #temp-buttons button {
     text-align: center;
     width: 3.5em;
 }
-
+#graph-container {
-.graph-container {
+    position: fixed; /* Centered and float over the screen */
-    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); /* Aligns perfectly center */
     width: 100%;
     max-width: 800px;
     height: 400px;
-    display: flex;
     justify-content: center;
     align-items: center;
     background-color: #fff;
     border: 1px solid #ccc;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
+    z-index: 1000; /* Ensures it's above other elements */
+}
+
+.graph-display-flex {
+    display: flex;
 }
 
 canvas {

src/roast.html

@@ -40,7 +40,7 @@
             </tbody>
         </table>
     </div>
-    <div id="graph-container">
+    <div id="graph-container" class="hidden">
         <button id="close-btn">X</button>
         <canvas id="myChart"></canvas>
     </div>

src/roast.ts

@@ -1,3 +1,5 @@
+
+
 let timer = 0;
 let isRunning = false;
 let log: Array<{ time: string, event: string, temp?: number }> = [];
@@ -5,6 +7,7 @@ let targets: number[] = [];
 let currentTargetIndex = 0;
 let interval: NodeJS.Timeout | null = null;
 
+
 interface Window {
     startTimer?: Function; // function to start the timer
     stopTimer?: Function; // function to stop the timer
@@ -14,9 +17,10 @@ interface Window {
     navigateTemp?: Function; //function to navigate forward/back between events in the setPlan() temp plan
     logTemp?: Function; //function to log a temputure event
     exportCSV?: Function; //function to export the events to CSV
-    showGraph?: Function; //function to show the graph on screen
+    showGraph?: Function; // function to render or display graphs using libraries like Chart.js for visual representation of logged events
 }
 
+
 function startTimer(): void {
     if (isRunning) {
         alert("Timer is already running. Click again to reset.");
@@ -156,6 +160,14 @@ function exportCSV(): void {
     document.body.removeChild(link);
 }
 
+function showGraph(): void {
+    const graphContainer = document.getElementById("graph-container");
+    if (graphContainer) {
+        graphContainer.classList.remove("hidden");
+        graphContainer.classList.add("graph-display-flex");
+    }
+}
+
 // Expose functions to the global scope (allowing html direct access)
 if (typeof window !== 'undefined') {
     window.startTimer = startTimer;
@@ -166,4 +178,5 @@ if (typeof window !== 'undefined') {
     window.navigateTemp = navigateTemp;
     window.logTemp = logTemp;
     window.exportCSV = exportCSV;
+    window.showGraph = showGraph;
 }

src/tempgraph.ts

@@ -6,7 +6,6 @@ import {AnnotationOptions} from 'chartjs-plugin-annotation';
 Chart.register(...registerables);
 Chart.register(annotationPlugin);
 
-function updateData()
 const sampleData = `Time,Event,Temperature
 0:00,Charge,
 0:00,Temp,139