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

feat(18): initial spending columns component

Browse Source 
tailwind doesn't seem to allow scale-y-[var(--the-var)]
maybe that's just the scale thing

overall, still setting style variables, this time with css blocks,
i suppose that's ok
This commit is contained in:
efim 2024-03-13 15:03:30 +00:00
parent 623d05da91
commit ff7baa0a24
1 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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() {
<div class="rounded-xl text-neutral-very-pale-orange text-sm 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
<p class="text-xl font-bold">$921.48</p>
</div>
}
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) {
<div class="flex flex-col place-items-center">
<div
class={ "bg-primary-soft-red rounded w-full h-32 origin-bottom ", expenseBarVars(percentage) }
></div>
<p class="text-neutral-medium-brown text-xs py-2">{ day }</p>
</div>
}
// The 7 vertical bars of the per-day expenses
templ expensesChart(expenses, percentages []float32) {
<div class="grid grid-cols-7 place-content-between gap-x-3 py-2">
for i := 0; i < 7; i++ {
@dayExpenseColumn(expenses[i], percentages[i], days[i])
}
</div>
}
// Big container with chard and total expenses of the week
templ spendingSummaryComponent(expenses, percentages []float32) {
<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 flex flex-col">
<p2>Spending - Last 7 days</p2>
<div class="flex flex-row">
mon
tue
wed
thu
fri
sat
sun
</div>
<p2 class="text-neutral-dark-brown text-lg font-bold pb-4">Spending - Last 7 days</p2>
@expensesChart(expenses, percentages)
<hr class="bg-neutral-cream border-t-0 h-0.5"/>
<div class="flex flex-row text-sm text-neutral-medium-brown">
<div class="flex flex-row text-xs text-neutral-medium-brown">
<div>
Total this month
<p class="text-neutral-dark-brown text-xl font-bold">$478.33</p>
@ -37,6 +70,7 @@ templ IndexPage() {
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@400,700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="/styles/templ.css"/>
<link href="/static/output.css" rel="stylesheet"/>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- displays site properly based on user's device -->
@ -51,7 +85,7 @@ templ IndexPage() {
<body class="bg-neutral-cream text-bold p-4 h-full grid items-center">
<div class="flex flex-col gap-4">
@myBalanceComponent()
@spendingSummaryComponent()
@prepareSummaryComponent(costs)
</div>
<div class="attribution fixed bottom-0 inset-x-0">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.