nowe funkcja statystyk i poprawki

2025-07-16 23:07:58 +02:00
parent 6431393baf
commit 133b91073d
5 changed files with 278 additions and 11 deletions
--- a/static/js/user_expenses.js
+++ b/static/js/user_expenses.js
@@ -0,0 +1,90 @@
+document.addEventListener("DOMContentLoaded", function () {
+    let expensesChart = null;
+    const rangeLabel = document.getElementById("chartRangeLabel");
+
+    function loadExpenses(range = "monthly", startDate = null, endDate = null) {
+        let url = '/user/expenses_data?range=' + range;
+        if (startDate && endDate) {
+            url += `&start_date=${startDate}&end_date=${endDate}`;
+        }
+
+        fetch(url, { cache: "no-store" })
+            .then(response => response.json())
+            .then(data => {
+                const ctx = document.getElementById('expensesChart').getContext('2d');
+
+                if (expensesChart) {
+                    expensesChart.destroy();
+                }
+
+                expensesChart = new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: data.labels,
+                        datasets: [{
+                            label: 'Suma wydatków [PLN]',
+                            data: data.expenses,
+                            backgroundColor: '#0d6efd'
+                        }]
+                    },
+                    options: {
+                        scales: {
+                            y: {
+                                beginAtZero: true
+                            }
+                        }
+                    }
+                });
+
+                if (startDate && endDate) {
+                    rangeLabel.textContent = `Widok: własny zakres (${startDate} → ${endDate})`;
+                } else {
+                    let labelText = "";
+                    if (range === "monthly") labelText = "Widok: miesięczne";
+                    else if (range === "quarterly") labelText = "Widok: kwartalne";
+                    else if (range === "halfyearly") labelText = "Widok: półroczne";
+                    else if (range === "yearly") labelText = "Widok: roczne";
+                    rangeLabel.textContent = labelText;
+                }
+
+            })
+            .catch(error => {
+                console.error("Błąd pobierania danych:", error);
+            });
+    }
+
+    // Inicjalizacja zakresu dat
+    const startDateInput = document.getElementById("startDate");
+    const endDateInput = document.getElementById("endDate");
+    const today = new Date();
+    const lastWeek = new Date(today);
+    lastWeek.setDate(today.getDate() - 7);
+    const formatDate = (d) => d.toISOString().split('T')[0];
+    startDateInput.value = formatDate(lastWeek);
+    endDateInput.value = formatDate(today);
+
+    // Załaduj początkowy widok
+    loadExpenses();
+
+    // Przycisk własnego zakresu
+    document.getElementById('customRangeBtn').addEventListener('click', function () {
+        const startDate = startDateInput.value;
+        const endDate = endDateInput.value;
+        if (startDate && endDate) {
+            document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
+            loadExpenses('custom', startDate, endDate);
+        } else {
+            alert("Proszę wybrać obie daty!");
+        }
+    });
+
+    // Zakresy predefiniowane
+    document.querySelectorAll('.range-btn').forEach(btn => {
+        btn.addEventListener('click', function () {
+            document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
+            this.classList.add('active');
+            const range = this.getAttribute('data-range');
+            loadExpenses(range);
+        });
+    });
+});