fix version of parcel

src/roast.css

@@ -121,4 +121,40 @@ body {
 #temp-buttons button {
     text-align: center;
     width: 3.5em;
+}
+
+.graph-container {
+    position: relative;
+    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;
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+}
+
+#close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 5px 10px;
+    font-size: 16px;
+    cursor: pointer;
+    z-index: 10;
+    border-radius: 4px;
+}
+
+#close-btn:hover {
+    background-color: #f8f8f8;
 }

src/roast.html

@@ -22,6 +22,7 @@
         </div>
         <div id="export-csv">
             <button onclick="exportCSV()">Export CSV</button>
+            <button onclick="showGraph()">Show Graph</button>
             <button onclick="resetSystem()">Reset</button>
         </div>
     </div>
@@ -39,6 +40,10 @@
             </tbody>
         </table>
     </div>
-    <script src="./roast.ts"></script>
-</body>
+    <div id="graph-container">
+        <button id="close-btn">X</button>
+        <canvas id="myChart"></canvas>
+    </div>
+    <!--script type="module" src="./tempgraph.ts"></script-->
+    <script type="module" src="./roast.ts"></script></body>
 </html>

src/roast.ts

@@ -5,12 +5,25 @@ 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
+    logEvent?: Function; // function to log a new event
+    resetSystem?: Function; // function to reset all actions in the system
+    setPlan?: Function; // function to update the temp event plan
+    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
+}
 
 function startTimer(): void {
     if (isRunning) {
         alert("Timer is already running. Click again to reset.");
         return;
     }
+    timer = 0;
+    updateTimerDisplay();
     isRunning = true;
     interval = setInterval(() => {
         timer++;
@@ -19,7 +32,9 @@ function startTimer(): void {
 }
 
 function stopTimer(): void {
-    clearInterval(interval!);
+    if(interval !== null){
+        clearInterval(interval);
+    }
     isRunning = false;
 }
 
@@ -31,10 +46,12 @@ function updateTimerDisplay(): void {
 
 function logEvent(eventName: string): void {
     if (eventName === "Charge") {
-        if (log.length > 0) {
+        if (log.length > 0 || isRunning) {
+            if(isRunning){
+                stopTimer();
+            }
             log = [];
             timer = 0;
-            isRunning = false;
         }
         startTimer();
         log.push({ time: formatTime(timer), event: eventName });
@@ -139,14 +156,14 @@ function exportCSV(): void {
     document.body.removeChild(link);
 }
 
-// Expose functions to the global scope
+// Expose functions to the global scope (allowing html direct access)
 if (typeof window !== 'undefined') {
-  window.startTimer = startTimer;
-  window.stopTimer = stopTimer;
-  window.logEvent = logEvent;
-  window.resetSystem = resetSystem;
-  window.setPlan = setPlan;
-  window.navigateTemp = navigateTemp;
-  window.logTemp = logTemp;
-  window.exportCSV = exportCSV;
+    window.startTimer = startTimer;
+    window.stopTimer = stopTimer;
+    window.logEvent = logEvent;
+    window.resetSystem = resetSystem;
+    window.setPlan = setPlan;
+    window.navigateTemp = navigateTemp;
+    window.logTemp = logTemp;
+    window.exportCSV = exportCSV;
 }

src/tempgraph.ts

@@ -0,0 +1,115 @@
+import { Chart, registerables } from 'chart.js';
+import annotationPlugin from 'chartjs-plugin-annotation';
+import {AnnotationOptions} from 'chartjs-plugin-annotation';
+
+// Register all Chart.js components
+Chart.register(...registerables);
+Chart.register(annotationPlugin);
+
+function updateData()
+const sampleData = `Time,Event,Temperature
+0:00,Charge,
+0:00,Temp,139
+0:03,Temp,90
+0:10,Temp,129
+0:13,Temp,161
+0:19,Temp,191
+0:22,Yellow,
+0:24,Temp,207
+0:24,First Crack,
+0:30,Temp,208
+0:31,Drop,`;
+
+const lines = sampleData.split('\n');
+const data = lines.slice(1).map(line => {
+  const [time, event, temp] = line.split(',');
+  return { time, event, temp };
+});
+
+function parseTime(time: string): number {
+  const [mins, secs] = time.split(':').map(Number);
+  return mins * 60 + secs;
+}
+
+const tempData = data
+  .filter(entry => entry.event === 'Temp')
+  .map(entry => {
+    const timeInSeconds = parseTime(entry.time);
+    const temp = parseFloat(entry.temp);
+    return { x: timeInSeconds, y: temp };
+  });
+
+const ctx = document.getElementById('myChart') as HTMLCanvasElement;
+ctx.width = 800;
+ctx.height = 400;
+
+const annotationsArray: AnnotationOptions<'line'>[] = data
+  .filter(entry => entry.event !== 'Temp')
+  .map(entry => {
+    const timeInSeconds = parseTime(entry.time);
+    return {
+      type: 'line',
+      mode: 'vertical',
+      scaleID: 'x',
+      value: timeInSeconds,
+      borderColor: 'red',
+      borderWidth: 2,
+      label: {
+        content: entry.event,
+        enabled: true,
+        position: 'center', // Use a valid predefined position
+        yAdjust: -10
+      }
+    };
+  });
+
+// Your Chart.js configuration remains the same:
+new Chart(ctx, {
+  type: 'line',
+  data: {
+    datasets: [{
+      label: 'Temperature (°C)',
+      data: tempData,
+      borderColor: 'blue',
+      fill: false,
+      pointRadius: 5,
+      pointBackgroundColor: 'blue'
+    }]
+  },
+  options: {
+    responsive: true,
+    scales: {
+      x: {
+        type: 'linear',
+        position: 'bottom',
+        ticks: {
+          callback: function(value) {
+            const mins = Math.floor(Number(value) / 60);
+            const secs = Number(value) % 60;
+            return `${mins}:${secs.toString().padStart(2, '0')}`;
+          }
+        },
+        min: 0,
+        max: 31
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Temperature (°C)'
+        }
+      }
+    },
+    plugins: { // Correctly nested as per the previous answer
+      annotation: {
+        annotations: annotationsArray
+      }
+    }
+  }
+});
+
+document.getElementById('close-btn')?.addEventListener('click', () => {
+  const container = document.getElementById('graph-container');
+  if (container) {
+    container.style.display = container.style.display === 'none' ? 'flex' : 'none';
+  }
+});