poprawki w panelu, kategorie na wykresach i inne

static/js/user_expenses.js

@@ -1,6 +1,7 @@
 document.addEventListener("DOMContentLoaded", function () {
     let expensesChart = null;
     let selectedCategoryId = "";
+    let categorySplit = false; // <-- nowy tryb
     const rangeLabel = document.getElementById("chartRangeLabel");
 
     function loadExpenses(range = "monthly", startDate = null, endDate = null) {
@@ -15,6 +16,9 @@ document.addEventListener("DOMContentLoaded", function () {
         if (selectedCategoryId) {
             url += `&category_id=${selectedCategoryId}`;
         }
+        if (categorySplit) {
+            url += '&by_category=true';
+        }
 
         fetch(url, { cache: "no-store" })
             .then(response => response.json())
@@ -25,24 +29,44 @@ document.addEventListener("DOMContentLoaded", function () {
                     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 (categorySplit) {
+                    // Tryb z podziałem na kategorie
+                    expensesChart = new Chart(ctx, {
+                        type: 'bar',
+                        data: {
+                            labels: data.labels,
+                            datasets: data.datasets // <-- gotowe z backendu
+                        },
+                        options: {
+                            responsive: true,
+                            plugins: {
+                                tooltip: { mode: 'index', intersect: false },
+                                legend: { position: 'top' }
+                            },
+                            scales: {
+                                x: { stacked: true },
+                                y: { stacked: true, beginAtZero: true }
                             }
                         }
-                    }
-                });
+                    });
+                } else {
+                    // Tryb zwykły
+                    expensesChart = new Chart(ctx, {
+                        type: 'bar',
+                        data: {
+                            labels: data.labels,
+                            datasets: [{
+                                label: 'Suma wydatków [PLN]',
+                                data: data.expenses,
+                                backgroundColor: '#0d6efd'
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            scales: { y: { beginAtZero: true } }
+                        }
+                    });
+                }
 
                 if (startDate && endDate) {
                     rangeLabel.textContent = `Widok: własny zakres (${startDate} → ${endDate})`;
@@ -54,13 +78,28 @@ document.addEventListener("DOMContentLoaded", function () {
                     else if (range === "yearly") labelText = "Widok: roczne";
                     rangeLabel.textContent = labelText;
                 }
-
             })
             .catch(error => {
                 console.error("Błąd pobierania danych:", error);
             });
     }
 
+    // Obsługa przycisku przełączania trybu
+    document.getElementById("toggleCategorySplit").addEventListener("click", function () {
+        categorySplit = !categorySplit;
+        if (categorySplit) {
+            this.textContent = "🔵 Pokaż całościowo";
+            this.classList.remove("btn-outline-warning");
+            this.classList.add("btn-outline-info");
+        } else {
+            this.textContent = "🎨 Pokaż podział na kategorie";
+            this.classList.remove("btn-outline-info");
+            this.classList.add("btn-outline-warning");
+        }
+        loadExpenses(); // przeładuj wykres
+    });
+
+    // Reszta Twojego kodu bez zmian...
     const startDateInput = document.getElementById("startDate");
     const endDateInput = document.getElementById("endDate");
     const today = new Date();
@@ -97,7 +136,7 @@ document.addEventListener("DOMContentLoaded", function () {
             document.querySelectorAll('.category-filter').forEach(b => b.classList.remove('active'));
             this.classList.add('active');
             selectedCategoryId = this.dataset.categoryId || "";
-            loadExpenses(); // odśwież wykres z nowym filtrem
+            loadExpenses();
         });
     });
 });