update heatmap, add wasm charts

go/cmd/kjol-website/app/server_counter.go

@@ -3,12 +3,9 @@
 package app
 
 import (
-	"bytes"
 	"strconv"
 	"time"
 
-	chart "github.com/wcharczuk/go-chart/v2"
-
 	. "kjol/vdom"
 	ui "kjol/webui"
 )
@@ -17,7 +14,7 @@ import (
 // component (same builders, signals, On handlers). The //gowasm:server directive
 // makes the build generate a client stub so calling ServerCounter() on the
 // frontend is identical to calling any component; the state and this render run
-// on the server (its chart is computed there with go-chart), and clicks
+// on the server (its chart SVG is drawn there by webui.ChartSVG), and clicks
 // round-trip over /rsc.
 //
 // The chart plots the counter value against the wall-clock time of each click
@@ -60,61 +57,24 @@ type clickPoint struct {
 	V int   // counter value after the click
 }
 
-// clickChartSVG plots counter value vs. time-of-click (ms since the first
-// click) as a line graph. Explicit axis ranges keep it valid for the tricky
-// cases (a single click, or several clicks within the same millisecond).
+// clickChartSVG plots the counter value at each click as a line, drawn on the server by
+// webui.ChartSVG — the same chart geometry the client kit uses, rendered to a static SVG
+// string (no controller, no hover) because a server component's output is HTML.
 func clickChartSVG(points []clickPoint) string {
 	if len(points) == 0 {
-		return `<span class="text-muted">Click + / − to plot the counter over time (ms since the first click).</span>`
+		return `<span class="text-ink-muted">Click + / − to plot the counter over each click.</span>`
 	}
-	t0 := points[0].T
-	xs := make([]float64, len(points))
-	ys := make([]float64, len(points))
-	minY, maxY := 0.0, 0.0 // keep the zero baseline in view for context
+	vals := make([]float64, len(points))
+	labels := make([]string, len(points))
 	for i, p := range points {
-		xs[i] = float64(p.T - t0)
-		ys[i] = float64(p.V)
-		if ys[i] < minY {
-			minY = ys[i]
-		}
-		if ys[i] > maxY {
-			maxY = ys[i]
-		}
+		vals[i] = float64(p.V)
+		labels[i] = strconv.Itoa(i + 1)
 	}
-	maxX := xs[len(xs)-1]
-	if maxX <= 0 {
-		maxX = 1 // rapid or single clicks: avoid a zero-width x-range
-	}
-	if minY == maxY {
-		maxY++ // avoid a zero-height y-range
-	}
-	graph := chart.Chart{
-		Title:      "Counter over time (computed on the server)",
-		TitleStyle: chart.Style{FontSize: 14},
-		Background: chart.Style{Padding: chart.Box{Top: 48, Left: 20, Right: 20, Bottom: 40}},
-		Height:     260,
-		XAxis: chart.XAxis{
-			Name:  "ms since first click",
-			Range: &chart.ContinuousRange{Min: 0, Max: maxX},
-		},
-		YAxis: chart.YAxis{
-			Name:  "counter",
-			Range: &chart.ContinuousRange{Min: minY, Max: maxY},
-		},
-		Series: []chart.Series{
-			chart.ContinuousSeries{
-				XValues: xs,
-				YValues: ys,
-				Style: chart.Style{
-					StrokeColor: chart.ColorGreen, StrokeWidth: 2,
-					DotColor: chart.ColorGreen, DotWidth: 4, // a dot at each click
-				},
-			},
-		},
-	}
-	var buf bytes.Buffer
-	if graph.Render(chart.SVG, &buf) != nil {
-		return `<span class="text-danger">chart error</span>`
-	}
-	return buf.String()
+	return ui.ChartSVG(ui.ChartProps{
+		Kind:      ui.ChartLine,
+		Labels:    labels,
+		Series:    []ui.ChartSeries{{Name: "Counter", Data: vals, Color: "var(--color-chart-4)"}},
+		Height:    240,
+		NoTooltip: true,
+	})
 }