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

@@ -2,10 +2,8 @@ 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);
-
+/* Test data if nothing is provided */
+function getTestData(): string[] {
   const sampleData = `Time,Event,Temperature
 0:00,Charge,
 0:00,Temp,139
@@ -18,18 +16,28 @@ 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;
 }
 
+export function loadGraph(dataArray?: string[]): void {
+  const lines = dataArray || getTestData();
+
+  // Further code using `lines`...
+  const data = lines.slice(1).map(line => {
+    const [time, event, temp] = line.split(',');
+    return { time, event, temp };
+  });
+
   const tempData = data
     .filter(entry => entry.event === 'Temp')
     .map(entry => {
@@ -62,7 +70,11 @@ const annotationsArray: AnnotationOptions<'line'>[] = data
       };
     });
 
-// Your Chart.js configuration remains the same:
+  // Clear previous chart instance if exists
+  const oldChart = (ctx as any).chart;
+  if (oldChart) {
+    oldChart.destroy();
+  }
   new Chart(ctx, {
     type: 'line',
     data: {
@@ -98,10 +110,11 @@ new Chart(ctx, {
           }
         }
       },
-    plugins: { // Correctly nested as per the previous answer
+      plugins: {
         annotation: {
           annotations: annotationsArray
         }
       }
     }
   });
+}