Clear timeout when destroying/navigating away from page

src/lib/components/Graph.svelte

@@ -94,17 +94,16 @@
 
   function renderChart() {
     const context: CanvasRenderingContext2D | null = chartCanvas.getContext('2d');
-    if (!context) return
+    if (!context) return;
 
     // create labels and singular dataset (data)
     const labels: string[] = dateLabelsFormatedBasedOnResolution(dataFrames);
     const data: ChartDataset = {
       data: dataFrames.map((frame) => frame.value),
-      borderWidth: 3,
+      borderWidth: 3
     };
     // based on name, add label and color options to dataset
-    setDataColorAndName(data)
-
+    setDataColorAndName(data);
 
     // create chart instance, most here is chart options
     chart = new Chart(context, {
@@ -114,9 +113,12 @@
         datasets: [data]
       },
       options: {
+        animation: {
+          duration: 0
+        },
         elements: {
           point: {
-            radius: 2
+            radius: 0
           },
           line: {
             tension: 0.5

src/routes/graphs/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import Graph from '../../lib/components/Graph.svelte';
   import type IChartFrame from '../../lib/interfaces/IChartFrame';
   import type { PageData } from './$types';
@@ -21,7 +21,14 @@
     return fetch(`/api/graph/${unit}`, options).then((resp) => resp.json());
   }
 
-  const buttonMinutes = [
+  interface IButtonMinute {
+    value: number;
+    name: string;
+  }
+
+  let timeout: ReturnType<typeof setTimeout>;
+  const buttonMinutes: Array<IButtonMinute> = [
+    { value: 2.4, name: 'Realtime' },
     { value: 15, name: 'Last 15 minutes' },
     { value: 60, name: 'Last hour' },
     { value: 360, name: 'Last 6 hours' },
@@ -33,8 +40,9 @@
     { value: 518400, name: 'Last year' }
   ];
 
-  function reload(mins: number) {
-    minutes = mins;
+  function reload(button: IButtonMinute) {
+    minutes = button.value;
+    clearTimeout(timeout);
     const to: Date = new Date();
     const from = new Date(to.getTime() - minutes * 60 * 1000);
     const size = 40;
@@ -42,6 +50,10 @@
     fetchData('temperature', from, to, size).then((resp) => (temperatureData = resp?.data));
     fetchData('humidity', from, to, size).then((resp) => (humidityData = resp?.data));
     fetchData('pressure', from, to, size).then((resp) => (pressureData = resp?.data));
+
+    if (button.name === 'Realtime') {
+      timeout = setTimeout(() => reload(button), 2000);
+    }
   }
 
   function scrollSelectedButtonIntoView() {
@@ -59,13 +71,13 @@
   }
 
   onMount(scrollSelectedButtonIntoView);
+  onDestroy(() => clearTimeout(timeout))
 </script>
 
 <div class="button-wrapper">
   {#each buttonMinutes as button}
-    <button
-      on:click="{() => reload(button.value)}"
-      class="{button.value === minutes ? 'selected' : ''}">{button.name}</button
+    <button on:click="{() => reload(button)}" class="{button.value === minutes ? 'selected' : ''}"
+      >{button.name}</button
     >
   {/each}
 </div>