Graph hinzugefügt

templates/index.html

@@ -114,10 +114,10 @@
         </p>
 
     </div>
-<div class="card">
+<div class="card chart-card">
 
     <h2>
-        Kontostand letzte 30 Tage
+        Kontostandvergleich
     </h2>
 
     <canvas id="balanceChart"></canvas>
@@ -257,8 +257,25 @@ Hintergasse © 2026
 
 const history = {{ balance_history|tojson }};
 
-const labels = history.map(item => item.date);
-const values = history.map(item => item.value);
+const labels = Array.from(
+    {length: 31},
+    (_, i) => i + 1
+);
+
+function getSeries(periodName) {
+
+    const values = new Array(31).fill(null);
+
+    if (!history[periodName]) {
+        return values;
+    }
+
+    history[periodName].forEach(item => {
+        values[item.day - 1] = item.value;
+    });
+
+    return values;
+}
 
 new Chart(
     document.getElementById("balanceChart"),
@@ -266,35 +283,79 @@ new Chart(
         type: "line",
 
         data: {
+
             labels: labels,
 
-            datasets: [{
-                label: "Kontostand (€)",
-                data: values,
-                tension: 0.3
-            }]
+            datasets: [
+
+                {
+                    label: "Aktuell",
+                    data: getSeries("current"),
+                    tension: 0.3,
+                    borderWidth: 4
+                },
+
+                {
+                    label: "-1 Monat",
+                    data: getSeries("period_1"),
+                    tension: 0.3
+                },
+
+                {
+                    label: "-2 Monate",
+                    data: getSeries("period_2"),
+                    tension: 0.3
+                },
+
+                {
+                    label: "-3 Monate",
+                    data: getSeries("period_3"),
+                    tension: 0.3
+                },
+
+                {
+                    label: "-4 Monate",
+                    data: getSeries("period_4"),
+                    tension: 0.3
+                }
+
+            ]
         },
 
         options: {
+
             responsive: true,
 
+            interaction: {
+                mode: "index",
+                intersect: false
+            },
+
             plugins: {
                 legend: {
-                    display: false
+                    display: true
                 }
             },
 
             scales: {
+
+                x: {
+                    title: {
+                        display: true,
+                        text: "Tag seit dem 15."
+                    }
+                },
+
                 y: {
-                    beginAtZero: false
+                    beginAtZero: false,
+                    title: {
+                        display: true,
+                        text: "Kontostand (€)"
+                    }
                 }
             }
         }
     }
 );
 
-</script>
-
-</body>
-
-</html>
+</script>