trigger drawing screen

src/roast.ts

@@ -1,4 +1,4 @@
-
+import { loadGraph } from './tempgraph.ts';
 
 let timer = 0;
 let isRunning = false;
@@ -164,6 +164,7 @@ function exportCSV(): void {
 function showGraph(): void {
     const graphContainer = document.getElementById("graph-container");
     if (graphContainer) {
+        loadGraph(null);
         graphContainer.classList.remove("hidden");
         graphContainer.classList.add("graph-display-flex");
     }

src/tempgraph.ts

@@ -1,12 +1,10 @@
 import { Chart, registerables } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import {AnnotationOptions} from 'chartjs-plugin-annotation';
+import { AnnotationOptions } from 'chartjs-plugin-annotation';
 
-// Register all Chart.js components
+/* Test data if nothing is provided */
-Chart.register(...registerables);
+function getTestData(): string[] {
-Chart.register(annotationPlugin);
+  const sampleData = `Time,Event,Temperature
-
-const sampleData = `Time,Event,Temperature
 0:00,Charge,
 0:00,Temp,139
 0:03,Temp,90
@@ -18,90 +16,105 @@ const sampleData = `Time,Event,Temperature
 0:24,First Crack,
 0:30,Temp,208
 0:31,Drop,`;
+  return sampleData.split('\n');
+}
+
+// Register all Chart.js components
+Chart.register(...registerables);
+Chart.register(annotationPlugin);
 
-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
+export function loadGraph(dataArray?: string[]): void {
-  .filter(entry => entry.event === 'Temp')
+  const lines = dataArray || getTestData();
-  .map(entry => {
+
-    const timeInSeconds = parseTime(entry.time);
+  // Further code using `lines`...
-    const temp = parseFloat(entry.temp);
+  const data = lines.slice(1).map(line => {
-    return { x: timeInSeconds, y: temp };
+    const [time, event, temp] = line.split(',');
+    return { time, event, temp };
   });
 
-const ctx = document.getElementById('myChart') as HTMLCanvasElement;
+  const tempData = data
-ctx.width = 800;
+    .filter(entry => entry.event === 'Temp')
-ctx.height = 400;
+    .map(entry => {
+      const timeInSeconds = parseTime(entry.time);
+      const temp = parseFloat(entry.temp);
+      return { x: timeInSeconds, y: temp };
+    });
 
-const annotationsArray: AnnotationOptions<'line'>[] = data
+  const ctx = document.getElementById('myChart') as HTMLCanvasElement;
-  .filter(entry => entry.event !== 'Temp')
+  ctx.width = 800;
-  .map(entry => {
+  ctx.height = 400;
-    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:
+  const annotationsArray: AnnotationOptions<'line'>[] = data
-new Chart(ctx, {
+    .filter(entry => entry.event !== 'Temp')
-  type: 'line',
+    .map(entry => {
-  data: {
+      const timeInSeconds = parseTime(entry.time);
-    datasets: [{
+      return {
-      label: 'Temperature (°C)',
+        type: 'line',
-      data: tempData,
+        mode: 'vertical',
-      borderColor: 'blue',
+        scaleID: 'x',
-      fill: false,
+        value: timeInSeconds,
-      pointRadius: 5,
+        borderColor: 'red',
-      pointBackgroundColor: 'blue'
+        borderWidth: 2,
-    }]
+        label: {
-  },
+          content: entry.event,
-  options: {
+          enabled: true,
-    responsive: true,
+          position: 'center', // Use a valid predefined position
-    scales: {
+          yAdjust: -10
-      x: {
+        }
-        type: 'linear',
+      };
-        position: 'bottom',
+    });
-        ticks: {
+
-          callback: function(value) {
+  // Clear previous chart instance if exists
-            const mins = Math.floor(Number(value) / 60);
+  const oldChart = (ctx as any).chart;
-            const secs = Number(value) % 60;
+  if (oldChart) {
-            return `${mins}:${secs.toString().padStart(2, '0')}`;
+    oldChart.destroy();
-          }
+  }
+  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
         },
-        min: 0,
+        y: {
-        max: 31
+          title: {
+            display: true,
+            text: 'Temperature (°C)'
+          }
+        }
       },
-      y: {
+      plugins: {
-        title: {
+        annotation: {
-          display: true,
+          annotations: annotationsArray
-          text: 'Temperature (°C)'
         }
       }
-    },
-    plugins: { // Correctly nested as per the previous answer
-      annotation: {
-        annotations: annotationsArray
-      }
     }
-  }
+  });
-});
+}