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 { for _, price := range expenses {
percentages = append(percentages, price/max) percentages = append(percentages, price/max)
} }
return spendingSummaryComponent(expenses, percentages)
currentDayNum := 2
return spendingSummaryComponent(expenses, percentages, currentDayNum)
} }
css expenseBarVars(percentage float32) { css expenseBarVars(percentage float32) {
@ -29,29 +32,32 @@ css expenseBarVars(percentage float32) {
transform: scaleY(var(--height-percentage)); 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="flex flex-col place-items-center">
<div <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> ></div>
<p class="text-neutral-medium-brown text-xs py-2">{ day }</p> <p class="text-neutral-medium-brown text-xs py-2">{ day }</p>
</div> </div>
} }
// The 7 vertical bars of the per-day expenses // 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"> <div class="grid grid-cols-7 place-content-between gap-x-3 py-2">
for i := 0; i < 7; i++ { for i := 0; i < 7; i++ {
@dayExpenseColumn(expenses[i], percentages[i], days[i]) @dayExpenseColumn(expenses[i], percentages[i], days[i], currentDayNum == i)
} }
</div> </div>
} }
// Big container with chard and total expenses of the week // 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"> <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> <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"/> <hr class="bg-neutral-cream border-t-0 h-0.5"/>
<div class="flex flex-row text-xs text-neutral-medium-brown"> <div class="flex flex-row text-xs text-neutral-medium-brown">
<div> <div>