diff --git a/18-expenses-chart/templates/index.templ b/18-expenses-chart/templates/index.templ index a29fb5a..841755d 100644 --- a/18-expenses-chart/templates/index.templ +++ b/18-expenses-chart/templates/index.templ @@ -1,26 +1,59 @@ 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() { -
+
My balance

$921.48

} -templ spendingSummaryComponent() { +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) + } + return spendingSummaryComponent(expenses, percentages) +} + +css expenseBarVars(percentage float32) { + --height-percentage: { fmt.Sprintf("%.2f", percentage) }; + transform: scaleY(var(--height-percentage)); +} + +templ dayExpenseColumn(expense, percentage float32, day string) { +
+
+

{ day }

+
+} + +// The 7 vertical bars of the per-day expenses +templ expensesChart(expenses, percentages []float32) { +
+ for i := 0; i < 7; i++ { + @dayExpenseColumn(expenses[i], percentages[i], days[i]) + } +
+} + +// Big container with chard and total expenses of the week +templ spendingSummaryComponent(expenses, percentages []float32) {
- Spending - Last 7 days -
- mon - tue - wed - thu - fri - sat - sun -
+ Spending - Last 7 days + @expensesChart(expenses, percentages)
-
+
Total this month

$478.33

@@ -37,6 +70,7 @@ templ IndexPage() { + @@ -51,7 +85,7 @@ templ IndexPage() {
@myBalanceComponent() - @spendingSummaryComponent() + @prepareSummaryComponent(costs)
Challenge by Frontend Mentor.