diff --git a/static/style.css b/static/style.css index 10849ac..3e65bfb 100644 --- a/static/style.css +++ b/static/style.css @@ -389,4 +389,9 @@ text-decoration: underline; grid-column: 1 / -1; min-height: 550px; +} +#balanceChart { + + width: 100% !important; + height: 450px !important; } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 3b08b44..a53f1ba 100644 --- a/templates/index.html +++ b/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 (€)" } } + } + } } );