Working on in-app live updates

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte

@@ -4,11 +4,31 @@
 	import QuickInfobar from "./other/QuickInfobar.svelte";
     import { getCookie } from "svelte-cookie";
     import {onMount} from "svelte";
+    import {writable} from "svelte/store";
+    import axios from "axios";
 
-    onMount(() => {
+    const incomeData = writable([]);
+    const expenseData = writable([]);
+
+    onMount(async () => {
             if (getCookie('access_token') === null ) {
                     window.location.href = '/auth/login';
             }
+
+            try {
+                    const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
+                    incomeData.set(response.data);
+            } catch (error) {
+                    console.error('Error fetching income data:', error);
+            }
+
+            try {
+                    const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
+                    expenseData.set(response.data);
+            } catch (error) {
+                    console.error('Error fetching expense data:', error);
+            }
+
             console.log(getCookie('access_token'));
     })
 </script>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte

@@ -1,25 +1,10 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import axios from 'axios';
-	import { getCookie } from "svelte-cookie";
-
+	import { incomeData } from '../Dashboard.svelte';
 	let ctx;
 	let chartCanvas;
 
-	async function updateGraph() {
-		const token = getCookie('access_token');
-
-		const config = {
-			headers: {
-				'Authorization': `Bearer ${token}`
-			}
-		};
-
-		try {
-			const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
-			const incomeData = response.data;
-
 	function groupAndSumByCategory(incomes) {
 		const groupedData = new Map();
 		incomes.forEach(income => {
@@ -33,12 +18,18 @@
 		return groupedData;
 	}
 
-			const groupedIncomeData = groupAndSumByCategory(incomeData);
+	function updateGraph() {
+		const incomeDataArray = $incomeData;
+		const groupedIncomeData = groupAndSumByCategory(incomeDataArray);
 
 		const chartLabels = Array.from(groupedIncomeData.keys());
 		const chartValues = Array.from(groupedIncomeData.values());
 
+		if (chartCanvas) {
 			ctx = chartCanvas.getContext('2d');
+			if (ctx.chart) {
+				ctx.chart.destroy(); 
+			}
 			new Chart(ctx, {
 				type: 'bar',
 				data: {
@@ -54,8 +45,6 @@
 					maintainAspectRatio: false
 				}
 			});
-		} catch (error) {
-			console.error('Error:', error);
 		}
 	}