add WASM blazor-like thing

go/cmd/examples/go-wasm-web/app/chart.go

@@ -0,0 +1,81 @@
+package app
+
+import (
+	"bytes"
+	"io"
+	"math/rand"
+
+	chart "github.com/wcharczuk/go-chart/v2"
+
+	. "kjol/vdom"
+)
+
+var chartLabels = []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}
+
+// fixed initial data so the server SSR and the client's first render match.
+func fixedChartData() []int { return []int{42, 17, 63, 28, 55, 9, 71} }
+
+func randomValues() []int {
+	v := make([]int, len(chartLabels))
+	for i := range v {
+		v[i] = rand.Intn(95) + 5
+	}
+	return v
+}
+
+func renderSVG(c interface {
+	Render(chart.RendererProvider, io.Writer) error
+}) string {
+	var buf bytes.Buffer
+	if c.Render(chart.SVG, &buf) != nil {
+		return "<p class=\"text-danger m-0\">chart error</p>"
+	}
+	return buf.String()
+}
+
+func barSVG(values []int) string {
+	bars := make([]chart.Value, len(values))
+	for i, v := range values {
+		bars[i] = chart.Value{Value: float64(v), Label: chartLabels[i%len(chartLabels)]}
+	}
+	return renderSVG(&chart.BarChart{
+		Title:      "Weekly values (bar)",
+		TitleStyle: chart.Style{FontSize: 15},
+		Background: chart.Style{Padding: chart.Box{Top: 48, Left: 16, Right: 16, Bottom: 16}},
+		Height:     320, BarWidth: 48, Bars: bars,
+	})
+}
+
+func pieSVG(values []int) string {
+	vs := make([]chart.Value, len(values))
+	for i, v := range values {
+		vs[i] = chart.Value{Value: float64(v), Label: chartLabels[i%len(chartLabels)]}
+	}
+	return renderSVG(&chart.PieChart{
+		Title:      "Share by day (pie)",
+		TitleStyle: chart.Style{FontSize: 15},
+		Background: chart.Style{Padding: chart.Box{Top: 48}},
+		Width:      320, Height: 320, Values: vs,
+	})
+}
+
+//gowasm:page /chart static layout=app
+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)))),
+			),
+		)
+	}
+}