diff --git a/18-expenses-chart/main.go b/18-expenses-chart/main.go index e006c91..dbac75c 100644 --- a/18-expenses-chart/main.go +++ b/18-expenses-chart/main.go @@ -4,13 +4,18 @@ import ( "fmt" "net/http" - "sunshine.industries/temp-exercise/templates" "github.com/a-h/templ" + "sunshine.industries/temp-exercise/templates" ) func main() { - component := templates.IndexPage() - + component := templates.IndexPage(templates.PageData{ + Balance: 1021.12, + Expenses: []float32{37.45, 34.91, 37.36, 31.07, 7.39, 43.28, 25.48}, + TotalThisMonth: 612.41, + PercentComparedToLastMonth: 3.1, + }) + http.Handle("/", templ.Handler(component)) staticFs := http.FileServer(http.Dir("./static")) diff --git a/18-expenses-chart/templates/index.templ b/18-expenses-chart/templates/index.templ index 96c432a..c76043e 100644 --- a/18-expenses-chart/templates/index.templ +++ b/18-expenses-chart/templates/index.templ @@ -3,12 +3,17 @@ package templates import "fmt" import "slices" -var costs []float32 = []float32{17.45, 34.91, 52.36, 31.07, 23.39, 43.28, 25.48} +type PageData struct { + Balance float32 + Expenses []float32 + TotalThisMonth float32 + PercentComparedToLastMonth float32 +} -templ myBalanceComponent() { +templ myBalanceComponent(balance float32) {
My balance -

$921.48

+

${ fmt.Sprintf("%.2f", balance) }

} @@ -18,7 +23,7 @@ var days []string = []string{"mon", "tue", "wed", "thu", "fri", "sat", "sun"} // with all attributes computed from the expenses slice // the percentages of the columns, current day number, etc // NOTE: this seems to be the way to mix go calculations and templates -func prepareSummaryComponent(expenses []float32) templ.Component { +func prepareSummaryComponent(expenses []float32, totalThisMonth, percentComparedToLastMonth float32) templ.Component { fmt.Println("hello, preparing expenses: ", expenses) max := slices.Max(expenses) percentages := make([]float32, 0, len(expenses)) @@ -28,7 +33,7 @@ func prepareSummaryComponent(expenses []float32) templ.Component { currentDayNum := 2 - return spendingSummaryComponent(expenses, percentages, currentDayNum) + return spendingSummaryComponent(expenses, percentages, currentDayNum, percentComparedToLastMonth, totalThisMonth) } css expenseBarVars(percentage float32) { @@ -58,7 +63,7 @@ templ expensesChart(expenses, percentages []float32, currentDayNum int) { } // Big container with chard and total expenses of the week -templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int) { +templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int, totalThisMonth, percentComparedToLastMonth float32) {
Spending - Last 7 days @expensesChart(expenses, percentages, currentDayNum) @@ -66,17 +71,17 @@ templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum in

Total this month

-

$478.33

+

$ { fmt.Sprintf("%.2f", totalThisMonth) }

-

+2.4%

+

{ fmt.Sprintf("%.2f", percentComparedToLastMonth) }%

from last month
} -templ IndexPage() { +templ IndexPage(pageData PageData) { @@ -96,8 +101,8 @@ templ IndexPage() {
- @myBalanceComponent() - @prepareSummaryComponent(costs) + @myBalanceComponent(pageData.Balance) + @prepareSummaryComponent(pageData.Expenses, pageData.PercentComparedToLastMonth, pageData.TotalThisMonth)
Challenge by Frontend Mentor.