65 lines
1.8 KiB
HTML
65 lines
1.8 KiB
HTML
{{define "content"}}
|
|
{{$d := .}}
|
|
<h1 style="margin-bottom: 24px;">Projections</h1>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h2>Projected Annual Spend</h2>
|
|
<div class="value negative">€{{cents $d.AnnualTotal}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card animate-on-scroll">
|
|
<h2>Monthly Average Spend (Last 6 Months)</h2>
|
|
<canvas id="projChart" height="250"></canvas>
|
|
</div>
|
|
|
|
<div class="card table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Category</th>
|
|
<th class="text-right">Monthly Avg</th>
|
|
<th class="text-right">Projected Annual</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range $cat, $avg := $d.MonthlyAvg}}
|
|
<tr>
|
|
<td>{{$cat}}</td>
|
|
<td class="cents">€{{printf "%.2f" $avg}}</td>
|
|
<td class="cents">€{{printf "%.2f" (mul $avg 12)}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
new Chart(document.getElementById('projChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [{{range $cat, $_ := $d.MonthlyAvg}}"{{$cat}}",{{end}}],
|
|
datasets: [{
|
|
label: 'Monthly Avg (€)',
|
|
data: [{{range $cat, $avg := $d.MonthlyAvg}}{{$avg}},{{end}}],
|
|
backgroundColor: ['#FF6384','#36A2EB','#FFCE56','#4BC0C0','#9966FF','#FF9F40','#C9CBCF','#00E676','#651FFF','#FF6F00','#E91E63','#607D8B','#3F51B5','#9E9E9E'],
|
|
borderColor: ['#FF6384','#36A2EB','#FFCE56','#4BC0C0','#9966FF','#FF9F40','#C9CBCF','#00E676','#651FFF','#FF6F00','#E91E63','#607D8B','#3F51B5','#9E9E9E'],
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
borderSkipped: false,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
animation: { duration: 1200, easing: 'easeOutQuart' },
|
|
plugins: { legend: { display: false } },
|
|
scales: {
|
|
y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' }, ticks: { callback: v => '€' + v } },
|
|
x: { grid: { display: false } }
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{{end}}
|