maxamundsen/kjol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial port of the UI kit

Browse Source
This commit is contained in:
Max Amundsen
2026-07-13 01:58:29 -04:00
parent 261a7f2b4d
commit b02df48a66
51 changed files with 7507 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
go/cmd/examples/go-wasm-web/app/chart.go
View File

@@ -8,6 +8,7 @@ import (
chart "github.com/wcharczuk/go-chart/v2"
. "kjol/vdom"
ui "kjol/webui"
)
var chartLabels = []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}
@@ -64,17 +65,16 @@ func ChartPage(d Deps) func() *VNode {
data := NewSignal(fixedChartData())
return func() *VNode {
values := data.Get()
return Div(
H2(Attr("class", "h4 mb-3"), Text("Charts — go-chart (SSR + hydrate)")),
P(Attr("class", "text-secondary"),
Text("Rendered to SVG on the server, hydrated on the client; Shuffle re-renders client-side.")),
Button(Attr("class", "btn btn-primary mb-3"),
On(EVENT_CLICK, func() { data.Set(randomValues()) }), Text("Shuffle Data")),
Div(Attr("class", "row"),
Div(Attr("class", "col-12 col-lg-7 mb-3"),
Div(Attr("class", "border rounded p-2 bg-white overflow-auto"), Raw(barSVG(values)))),
Div(Attr("class", "col-12 col-lg-5 mb-3"),
Div(Attr("class", "border rounded p-2 bg-white overflow-auto"), Raw(pieSVG(values)))),
return Div(Attr("class", "space-y-6"),
Div(
H2(Attr("class", "text-2xl font-semibold tracking-tight text-text-heading"), Text("Charts — go-chart (SSR + hydrate)")),
P(Attr("class", "mt-1 text-neutral-500"),
Text("Rendered to SVG on the server, hydrated on the client; Shuffle re-renders client-side.")),
),
ui.Button(ui.ButtonProps{Color: ui.ButtonPrimary, Text: "Shuffle data", OnClick: func() { data.Set(randomValues()) }}),
Div(Attr("class", "grid gap-4 lg:grid-cols-12"),
Div(Attr("class", "lg:col-span-7 rounded-default border border-neutral-200 bg-white p-3 shadow-xs overflow-auto"), Raw(barSVG(values))),
Div(Attr("class", "lg:col-span-5 rounded-default border border-neutral-200 bg-white p-3 shadow-xs overflow-auto"), Raw(pieSVG(values))),
),
)
}