package templates
import "fmt"
import "slices"
var costs []float32 = []float32{17.45, 34.91, 52.36, 31.07, 23.39, 43.28, 25.48}
templ myBalanceComponent() {
}
var days []string = []string{"mon", "tue", "wed", "thu", "fri", "sat", "sun"}
func prepareSummaryComponent(expenses []float32) templ.Component {
fmt.Println("hello, preparing expenses: ", expenses)
max := slices.Max(expenses)
percentages := make([]float32, 0, len(expenses))
for _, price := range expenses {
percentages = append(percentages, price/max)
}
currentDayNum := 2
return spendingSummaryComponent(expenses, percentages, currentDayNum)
}
css expenseBarVars(percentage float32) {
--height-percentage: { fmt.Sprintf("%.2f", percentage) };
transform: scaleY(var(--height-percentage));
}
templ dayExpenseColumn(expense, percentage float32, day string, isCurrentDay bool) {
}
// The 7 vertical bars of the per-day expenses
templ expensesChart(expenses, percentages []float32, currentDayNum int) {
for i := 0; i < 7; i++ {
@dayExpenseColumn(expenses[i], percentages[i], days[i], currentDayNum == i)
}
}
// Big container with chard and total expenses of the week
templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int) {
Spending - Last 7 days
@expensesChart(expenses, percentages, currentDayNum)
}
templ IndexPage() {
Frontend Mentor | Expenses chart component
@myBalanceComponent()
@prepareSummaryComponent(costs)
}