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
-Chart.register(...registerables);
-Chart.register(annotationPlugin);
-
-const sampleData = `Time,Event,Temperature
+/* Test data if nothing is provided */
+function getTestData(): string[] {
+  const sampleData = `Time,Event,Temperature
 0:00,Charge,
 0:00,Temp,139
 0:03,Temp,90
@@ -18,19 +16,29 @@ 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 {
+  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 => {
       const timeInSeconds = parseTime(entry.time);
@@ -38,11 +46,11 @@ const tempData = data
       return { x: timeInSeconds, y: temp };
     });
 
-const ctx = document.getElementById('myChart') as HTMLCanvasElement;
-ctx.width = 800;
-ctx.height = 400;
+  const ctx = document.getElementById('myChart') as HTMLCanvasElement;
+  ctx.width = 800;
+  ctx.height = 400;
 
-const annotationsArray: AnnotationOptions<'line'>[] = data
+  const annotationsArray: AnnotationOptions<'line'>[] = data
     .filter(entry => entry.event !== 'Temp')
     .map(entry => {
       const timeInSeconds = parseTime(entry.time);
@@ -62,8 +70,12 @@ const annotationsArray: AnnotationOptions<'line'>[] = data
       };
     });
 
-// Your Chart.js configuration remains the same:
-new Chart(ctx, {
+  // Clear previous chart instance if exists
+  const oldChart = (ctx as any).chart;
+  if (oldChart) {
+    oldChart.destroy();
+  }
+  new Chart(ctx, {
     type: 'line',
     data: {
       datasets: [{
@@ -82,7 +94,7 @@ new Chart(ctx, {
           type: 'linear',
           position: 'bottom',
           ticks: {
-          callback: function(value) {
+            callback: function (value) {
               const mins = Math.floor(Number(value) / 60);
               const secs = Number(value) % 60;
               return `${mins}:${secs.toString().padStart(2, '0')}`;
@@ -98,10 +110,11 @@ new Chart(ctx, {
           }
         }
       },
-    plugins: { // Correctly nested as per the previous answer
+      plugins: {
         annotation: {
           annotations: annotationsArray
         }
       }
     }
-});
+  });
+}