Working on in-app live updates

This commit is contained in:
2023-10-25 21:20:42 +03:00
parent 0a4ff61935
commit b63f156eb7
2 changed files with 42 additions and 33 deletions

View File

@@ -4,11 +4,31 @@
import QuickInfobar from "./other/QuickInfobar.svelte"; import QuickInfobar from "./other/QuickInfobar.svelte";
import { getCookie } from "svelte-cookie"; import { getCookie } from "svelte-cookie";
import {onMount} from "svelte"; 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 ) { if (getCookie('access_token') === null ) {
window.location.href = '/auth/login'; 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')); console.log(getCookie('access_token'));
}) })
</script> </script>

View File

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