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

feat(18): adding dynamic data

This commit is contained in:
efim 2024-03-13 17:08:03 +00:00
parent 269cb2967c
commit e81a22dd10
2 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
18-expenses-chart/main.go
View File

@ -4,13 +4,18 @@ import (
"fmt" "fmt"
"net/http" "net/http"
"sunshine.industries/temp-exercise/templates"
"github.com/a-h/templ" "github.com/a-h/templ"
"sunshine.industries/temp-exercise/templates"
) )
func main() { 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)) http.Handle("/", templ.Handler(component))
staticFs := http.FileServer(http.Dir("./static")) staticFs := http.FileServer(http.Dir("./static"))

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

@ -3,12 +3,17 @@ package templates
import "fmt" import "fmt"
import "slices" 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) {
<div class="rounded-xl text-neutral-very-pale-orange text-xs bg-primary-soft-red p-4 shadow"> <div class="rounded-xl text-neutral-very-pale-orange text-xs bg-primary-soft-red p-4 shadow">
My balance My balance
<p class="text-xl font-bold">$921.48</p> <p class="text-xl font-bold">${ fmt.Sprintf("%.2f", balance) }</p>
</div> </div>
} }
@ -18,7 +23,7 @@ var days []string = []string{"mon", "tue", "wed", "thu", "fri", "sat", "sun"}
// with all attributes computed from the expenses slice // with all attributes computed from the expenses slice
// the percentages of the columns, current day number, etc // the percentages of the columns, current day number, etc
// NOTE: this seems to be the way to mix go calculations and templates // 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) fmt.Println("hello, preparing expenses: ", expenses)
max := slices.Max(expenses) max := slices.Max(expenses)
percentages := make([]float32, 0, len(expenses)) percentages := make([]float32, 0, len(expenses))
@ -28,7 +33,7 @@ func prepareSummaryComponent(expenses []float32) templ.Component {
currentDayNum := 2 currentDayNum := 2
return spendingSummaryComponent(expenses, percentages, currentDayNum) return spendingSummaryComponent(expenses, percentages, currentDayNum, percentComparedToLastMonth, totalThisMonth)
} }
css expenseBarVars(percentage float32) { 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 // 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) {
<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 py-6 flex flex-col gap-y-4"> <div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 py-6 flex flex-col gap-y-4">
<p2 class="text-neutral-dark-brown text-xl font-bold pb-6">Spending - Last 7 days</p2> <p2 class="text-neutral-dark-brown text-xl font-bold pb-6">Spending - Last 7 days</p2>
@expensesChart(expenses, percentages, currentDayNum) @expensesChart(expenses, percentages, currentDayNum)
@ -66,17 +71,17 @@ templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum in
<div class="grid grid-cols-2 text-sm text-neutral-medium-brown"> <div class="grid grid-cols-2 text-sm text-neutral-medium-brown">
<p class="col-span-full">Total this month</p> <p class="col-span-full">Total this month</p>
<div class="grow"> <div class="grow">
<p class="grid items-center text-neutral-dark-brown text-2xl font-bold h-full">$478.33</p> <p class="grid items-center text-neutral-dark-brown text-2xl font-bold h-full">$ { fmt.Sprintf("%.2f", totalThisMonth) }</p>
</div> </div>
<div class="text-right"> <div class="text-right">
<p class="text-neutral-dark-brown font-bold">+2.4%</p> <p class="text-neutral-dark-brown font-bold">{ fmt.Sprintf("%.2f", percentComparedToLastMonth) }%</p>
from last month from last month
</div> </div>
</div> </div>
</div> </div>
} }
templ IndexPage() { templ IndexPage(pageData PageData) {
<html lang="en"> <html lang="en">
<head> <head>
<link rel="preconnect" href="https://fonts.googleapis.com"/> <link rel="preconnect" href="https://fonts.googleapis.com"/>
@ -96,8 +101,8 @@ templ IndexPage() {
</head> </head>
<body class="bg-neutral-cream text-bold p-4 h-full grid items-center"> <body class="bg-neutral-cream text-bold p-4 h-full grid items-center">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
@myBalanceComponent() @myBalanceComponent(pageData.Balance)
@prepareSummaryComponent(costs) @prepareSummaryComponent(pageData.Expenses, pageData.PercentComparedToLastMonth, pageData.TotalThisMonth)
</div> </div>
<div class="attribution fixed bottom-0 inset-x-0"> <div class="attribution fixed bottom-0 inset-x-0">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.