efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(18): spending bars curDay color

This commit is contained in:
efim 2024-03-13 15:25:25 +00:00
parent ff7baa0a24
commit a541a2dac2
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
18-expenses-chart/templates/index.templ
View File

@ -21,7 +21,10 @@ func prepareSummaryComponent(expenses []float32) templ.Component {
for _, price := range expenses {
percentages = append(percentages, price/max)
}
return spendingSummaryComponent(expenses, percentages)
currentDayNum := 2
return spendingSummaryComponent(expenses, percentages, currentDayNum)
}
css expenseBarVars(percentage float32) {
@ -29,29 +32,32 @@ css expenseBarVars(percentage float32) {
transform: scaleY(var(--height-percentage));
}
templ dayExpenseColumn(expense, percentage float32, day string) {
templ dayExpenseColumn(expense, percentage float32, day string, isCurrentDay bool) {
<div class="flex flex-col place-items-center">
<div
class={ "bg-primary-soft-red rounded w-full h-32 origin-bottom ", expenseBarVars(percentage) }
class={ "rounded w-full h-24 origin-bottom ",
expenseBarVars(percentage),
templ.KV("bg-primary-soft-red", !isCurrentDay),
templ.KV("bg-primary-cyan", isCurrentDay) }
></div>
<p class="text-neutral-medium-brown text-xs py-2">{ day }</p>
</div>
}
// The 7 vertical bars of the per-day expenses
templ expensesChart(expenses, percentages []float32) {
templ expensesChart(expenses, percentages []float32, currentDayNum int) {
<div class="grid grid-cols-7 place-content-between gap-x-3 py-2">
for i := 0; i < 7; i++ {
@dayExpenseColumn(expenses[i], percentages[i], days[i])
@dayExpenseColumn(expenses[i], percentages[i], days[i], currentDayNum == i)
}
</div>
}
// Big container with chard and total expenses of the week
templ spendingSummaryComponent(expenses, percentages []float32) {
templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int) {
<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 flex flex-col">
<p2 class="text-neutral-dark-brown text-lg font-bold pb-4">Spending - Last 7 days</p2>
@expensesChart(expenses, percentages)
@expensesChart(expenses, percentages, currentDayNum)
<hr class="bg-neutral-cream border-t-0 h-0.5"/>
<div class="flex flex-row text-xs text-neutral-medium-brown">
<div>