Durchschnitt zum Graph hinzugefügt

static/style.css

@@ -389,4 +389,9 @@ text-decoration: underline;
     grid-column: 1 / -1;
 
     min-height: 550px;
+}
+#balanceChart {
+
+    width: 100% !important;
+    height: 450px !important;
 }

templates/index.html

@@ -258,7 +258,7 @@ Hintergasse © 2026
 const history = {{ balance_history|tojson }};
 
 const labels = Array.from(
-    {length: 31},
+    { length: 31 },
     (_, i) => i + 1
 );
 
@@ -271,12 +271,63 @@ function getSeries(periodName) {
     }
 
     history[periodName].forEach(item => {
+
         values[item.day - 1] = item.value;
+
     });
 
     return values;
 }
 
+function getAverageSeries() {
+
+    const result = [];
+
+    for (let day = 0; day < 31; day++) {
+
+        const values = [];
+
+        [
+            "period_1",
+            "period_2",
+            "period_3",
+            "period_4"
+        ].forEach(period => {
+
+            const series = getSeries(period);
+
+            if (
+                series[day] !== null &&
+                series[day] !== undefined
+            ) {
+                values.push(series[day]);
+            }
+
+        });
+
+        if (values.length > 0) {
+
+            const avg =
+                values.reduce(
+                    (a, b) => a + b,
+                    0
+                ) / values.length;
+
+            result.push(
+                Math.round(avg * 100) / 100
+            );
+
+        } else {
+
+            result.push(null);
+
+        }
+
+    }
+
+    return result;
+}
+
 new Chart(
     document.getElementById("balanceChart"),
     {
@@ -290,33 +341,76 @@ new Chart(
 
                 {
                     label: "Aktuell",
+
                     data: getSeries("current"),
+
                     tension: 0.3,
-                    borderWidth: 4
+
+                    borderWidth: 5,
+
+                    pointRadius: 3,
+
+                    pointHoverRadius: 8
+                },
+
+                {
+                    label: "Durchschnitt",
+
+                    data: getAverageSeries(),
+
+                    tension: 0.3,
+
+                    borderWidth: 3,
+
+                    pointRadius: 0
                 },
 
                 {
                     label: "-1 Monat",
+
                     data: getSeries("period_1"),
-                    tension: 0.3
+
+                    tension: 0.3,
+
+                    borderWidth: 1,
+
+                    pointRadius: 0
                 },
 
                 {
                     label: "-2 Monate",
+
                     data: getSeries("period_2"),
-                    tension: 0.3
+
+                    tension: 0.3,
+
+                    borderWidth: 1,
+
+                    pointRadius: 0
                 },
 
                 {
                     label: "-3 Monate",
+
                     data: getSeries("period_3"),
-                    tension: 0.3
+
+                    tension: 0.3,
+
+                    borderWidth: 1,
+
+                    pointRadius: 0
                 },
 
                 {
                     label: "-4 Monate",
+
                     data: getSeries("period_4"),
-                    tension: 0.3
+
+                    tension: 0.3,
+
+                    borderWidth: 1,
+
+                    pointRadius: 0
                 }
 
             ]
@@ -332,9 +426,11 @@ new Chart(
             },
 
             plugins: {
+
                 legend: {
                     display: true
                 }
+
             },
 
             scales: {
@@ -353,7 +449,9 @@ new Chart(
                         text: "Kontostand (€)"
                     }
                 }
+
             }
+
         }
     }
 );