update heatmap, add wasm charts
This commit is contained in:
@@ -1,119 +1,39 @@
|
||||
package app
|
||||
|
||||
import (
|
||||
"bytes"
|
||||
"io"
|
||||
"math/rand"
|
||||
|
||||
chart "github.com/wcharczuk/go-chart/v2"
|
||||
|
||||
. "kjol/vdom"
|
||||
"kjol/wasmruntime"
|
||||
ui "kjol/webui"
|
||||
)
|
||||
|
||||
var chartLabels = []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}
|
||||
var chartPageDays = []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
|
||||
// chartDemoData is a week of values; a non-zero seed reshuffles them deterministically, so
|
||||
// "Shuffle" changes the chart without a data source and without a random that would differ
|
||||
// between the server's render and the client's first one.
|
||||
func chartDemoData(seed int) []float64 {
|
||||
base := []float64{42, 17, 63, 28, 55, 9, 71}
|
||||
if seed == 0 {
|
||||
return base
|
||||
}
|
||||
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,
|
||||
})
|
||||
}
|
||||
|
||||
// chartSkeleton is what the SERVER puts where a chart is going to be: a box of the right
|
||||
// height, so nothing jumps when the real one arrives.
|
||||
func chartSkeleton(height string) *VNode {
|
||||
return Div(Attr("class", "flex animate-pulse items-center justify-center rounded-default bg-surface-muted "+height),
|
||||
Span(Attr("class", "text-xs text-ink-faint"), Text("drawing…")),
|
||||
)
|
||||
}
|
||||
|
||||
// newChartDrawing returns a signal that is FALSE on the server and on the client's first
|
||||
// render, and true from the moment the WebAssembly has committed that first render.
|
||||
//
|
||||
// It is what keeps the charts CLIENT-DRAWN. go-chart is ordinary Go and would run just as
|
||||
// happily on the server — it used to, and this page's markup carried two finished SVGs.
|
||||
// Two reasons not to:
|
||||
//
|
||||
// - It is work the server does on every single request for a picture that only matters
|
||||
// once the page is alive. Drawing it in the browser costs the server nothing and the
|
||||
// reader nothing they can see.
|
||||
// - It is the more honest demonstration. A Go charting library, compiled to WebAssembly,
|
||||
// drawing an SVG in the browser is the thing this layer claims it can do. Shipping a
|
||||
// server-rendered picture of one proves the opposite point.
|
||||
//
|
||||
// The false-on-first-render part is not optional: hydration walks the server's DOM
|
||||
// alongside the client's first tree, so that tree has to be the SAME tree. Draw the charts
|
||||
// on the client's first pass and the two disagree, and the reconciler has to rebuild what
|
||||
// it should have adopted.
|
||||
func newChartDrawing() *Signal[bool] {
|
||||
drawn := NewSignal(false)
|
||||
wasmruntime.AfterRender(func() {
|
||||
if !drawn.Get() {
|
||||
drawn.Set(true) // a write re-renders; the second pass draws for real
|
||||
out := make([]float64, len(base))
|
||||
for i, b := range base {
|
||||
m := (int(b)*7 + seed*13) % 80
|
||||
if m < 4 {
|
||||
m = 4
|
||||
}
|
||||
})
|
||||
return drawn
|
||||
}
|
||||
|
||||
// chartBox renders one chart, or the placeholder standing in for it. draw is a closure so
|
||||
// that on the server go-chart is never called at all — not called and discarded, but never
|
||||
// entered.
|
||||
func chartBox(class, height string, drawn bool, draw func() string) *VNode {
|
||||
if !drawn {
|
||||
return Div(Attr("class", class), chartSkeleton(height))
|
||||
out[i] = float64(m)
|
||||
}
|
||||
return Div(Attr("class", class), Raw(draw()))
|
||||
return out
|
||||
}
|
||||
|
||||
//gowasm:page /wasm/chart static layout=app
|
||||
func ChartPage(d Deps) func() *VNode {
|
||||
data := NewSignal(fixedChartData())
|
||||
drawn := newChartDrawing()
|
||||
seed := NewSignal(0)
|
||||
barChart := ui.NewChart()
|
||||
areaChart := ui.NewChart()
|
||||
|
||||
return func() *VNode {
|
||||
values := data.Get()
|
||||
values := chartDemoData(seed.Get())
|
||||
|
||||
return docPage("Rendering", "SSR & hydration",
|
||||
"A static route is rendered to HTML by the server, so the page is complete before any "+
|
||||
@@ -132,34 +52,27 @@ func ChartPage(d Deps) func() *VNode {
|
||||
"class onto the page forever."),
|
||||
),
|
||||
|
||||
docSection("charts", "A worked example: charts",
|
||||
prose("These charts are SVG produced by go-chart — a plain Go library that knows nothing "+
|
||||
"about the browser. They are drawn by the WEBASSEMBLY, in your browser, and never by the "+
|
||||
"server: what the server sends is the two placeholders you may have seen for a moment, "+
|
||||
"and the WebAssembly replaces them on its first commit."),
|
||||
prose("That is the demonstration. A Go charting library, compiled to wasm, drawing an SVG in "+
|
||||
"the browser is exactly what this layer claims it can do — and a server-rendered picture "+
|
||||
"of a chart would prove the opposite point while looking identical. Shuffle redraws them, "+
|
||||
"and no request is made."),
|
||||
prose("The rest of the page IS server-rendered — the headings, the prose, the code you are "+
|
||||
"reading. Static and client-drawn are not opposites: a route can be pre-rendered and still "+
|
||||
"leave the expensive, browser-only parts of itself for the client."),
|
||||
docSection("charts", "A worked example: a chart",
|
||||
prose("The two charts below are webui.Chart. Their SVG — axes, rounded columns, the smoothed "+
|
||||
"area — is drawn on the SERVER and shipped in the page's HTML: view source and the marks "+
|
||||
"are already there, complete before any WebAssembly runs. That is what static buys."),
|
||||
prose("What the server cannot send is the interaction. The hover tooltip and the resize-to-fit "+
|
||||
"come alive when the WebAssembly hydrates the page — it adopts the SVG already on screen and "+
|
||||
"wires the pointer handlers to it, redrawing nothing. Server-rendered picture, client-side "+
|
||||
"behaviour, one component. Shuffle re-renders it in the browser, and no request is made."),
|
||||
|
||||
Div(Attr("class", "mt-4"),
|
||||
ui.Button(ui.ButtonProps{Color: ui.ButtonPrimary, Icon: "chart-column", Text: "Shuffle data",
|
||||
OnClick: func() { data.Set(randomValues()) }}),
|
||||
OnClick: func() { seed.Set(seed.Get() + 1) }}),
|
||||
),
|
||||
Div(Attr("class", "mt-4 grid gap-4 lg:grid-cols-12"),
|
||||
chartBox("lg:col-span-7 rounded-default border border-line bg-surface p-3 shadow-xs overflow-auto",
|
||||
"h-[260px]", drawn.Get(), func() string { return barSVG(values) }),
|
||||
chartBox("lg:col-span-5 rounded-default border border-line bg-surface p-3 shadow-xs overflow-auto",
|
||||
"h-[320px]", drawn.Get(), func() string { return pieSVG(values) }),
|
||||
Div(Attr("class", "mt-4 grid gap-4 lg:grid-cols-2"),
|
||||
Div(Attr("class", "rounded-default border border-line bg-surface p-3 shadow-xs"),
|
||||
barChart.Render(ui.ChartProps{Kind: ui.ChartBar, Labels: chartPageDays,
|
||||
Series: []ui.ChartSeries{{Name: "Requests", Data: values}}, Height: 240})),
|
||||
Div(Attr("class", "rounded-default border border-line bg-surface p-3 shadow-xs"),
|
||||
areaChart.Render(ui.ChartProps{Kind: ui.ChartArea, Smooth: true, Labels: chartPageDays,
|
||||
Series: []ui.ChartSeries{{Name: "Requests", Data: values}}, Height: 240})),
|
||||
),
|
||||
|
||||
note("go-chart lives in the EXAMPLE, not in kjol",
|
||||
"The engine is standard-library-only. This example is its own Go module precisely so a "+
|
||||
"charting dependency it happens to want does not become a dependency of everyone who "+
|
||||
"uses the framework."),
|
||||
),
|
||||
|
||||
docSection("api", "Reference",
|
||||
@@ -167,7 +80,7 @@ func ChartPage(d Deps) func() *VNode {
|
||||
apiRow{"//gowasm:page /path static", "Pre-render this route on the server, then hydrate it."},
|
||||
apiRow{"vdom.RenderHTML", "Render a tree to an HTML string. This is what the server calls."},
|
||||
apiRow{"wasmruntime.Hydrate", "Adopt server-rendered DOM instead of building it. The client's entry point for a static route."},
|
||||
apiRow{"vdom.Raw", "Insert markup verbatim — how the SVG the WebAssembly drew gets in. The reconciler clears it correctly when the element is reused."},
|
||||
apiRow{"vdom.Raw", "Insert markup verbatim — how webui.Chart's SVG string enters the tree. The reconciler clears it correctly when the element is reused."},
|
||||
),
|
||||
),
|
||||
)
|
||||
@@ -176,42 +89,22 @@ func ChartPage(d Deps) func() *VNode {
|
||||
|
||||
const chartSnippet = `//gowasm:page /wasm/chart static layout=app
|
||||
func ChartPage(d Deps) func() *VNode {
|
||||
data := NewSignal(fixedChartData())
|
||||
drawn := NewSignal(false) // false on the server AND on the first client render
|
||||
|
||||
// AfterRender is the post-commit hook. It fires once the WebAssembly has put its
|
||||
// first tree on the page — the earliest moment at which drawing is a client act.
|
||||
wasmruntime.AfterRender(func() {
|
||||
if !drawn.Get() {
|
||||
drawn.Set(true) // a write re-renders; the second pass draws
|
||||
}
|
||||
})
|
||||
seed := NewSignal(0)
|
||||
chart := ui.NewChart() // a controller: holds hover + refs across renders
|
||||
|
||||
return func() *VNode {
|
||||
return Div(
|
||||
ui.Button(ui.ButtonProps{
|
||||
Text: "Shuffle data",
|
||||
OnClick: func() { data.Set(randomValues()) },
|
||||
return docPage("Rendering", "SSR & hydration",
|
||||
// The chart's SVG is rendered on the SERVER and shipped in the HTML.
|
||||
// On hydration the client adopts those nodes and wires the pointer
|
||||
// handlers — the hover tooltip comes alive without redrawing anything.
|
||||
chart.Render(ui.ChartProps{
|
||||
Kind: ui.ChartBar,
|
||||
Labels: []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"},
|
||||
Series: []ui.ChartSeries{{Name: "Requests", Data: chartDemoData(seed.Get())}},
|
||||
}),
|
||||
|
||||
// The server never enters barSVG: chartBox takes a CLOSURE, and calls it only
|
||||
// once drawn is true. It renders the placeholder instead, and the WebAssembly
|
||||
// swaps in the real chart on its first commit.
|
||||
//
|
||||
// drawn must be FALSE on the client's first render too. Hydration walks the
|
||||
// server's DOM alongside the client's first tree, so the two have to BE the
|
||||
// same tree; draw on that first pass and the reconciler rebuilds what it
|
||||
// should have adopted.
|
||||
chartBox("", "h-[260px]", drawn.Get(),
|
||||
func() string { return barSVG(data.Get()) }),
|
||||
ui.Button(ui.ButtonProps{Text: "Shuffle", OnClick: func() {
|
||||
seed.Set(seed.Get() + 1) // a signal write re-renders, in the browser
|
||||
}}),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// chartBox is the whole trick, and it is four lines.
|
||||
func chartBox(class, height string, drawn bool, draw func() string) *VNode {
|
||||
if !drawn {
|
||||
return Div(Attr("class", class), chartSkeleton(height))
|
||||
}
|
||||
return Div(Attr("class", class), Raw(draw()))
|
||||
}`
|
||||
|
||||
@@ -1157,43 +1157,99 @@ func searchSection() func() *VNode {
|
||||
|
||||
// ---- charts --------------------------------------------------------------
|
||||
|
||||
var chartDaysWasm = []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}
|
||||
var pieLabelsWasm = []string{"Direct", "Search", "Social", "Email", "Referral"}
|
||||
var regionsWasm = []string{"East", "Central", "Mountain", "Pacific"}
|
||||
|
||||
// A made-up per-state metric for the choropleth, and a few cities (lat/lng) — Anchorage
|
||||
// and Honolulu land on albersUsa's Alaska and Hawaii insets.
|
||||
var usSignups = map[string]float64{
|
||||
"CA": 4820, "TX": 3910, "NY": 3120, "FL": 2870, "IL": 1740, "PA": 1610, "OH": 1490, "GA": 1450,
|
||||
"NC": 1360, "MI": 1280, "WA": 1230, "AZ": 1180, "MA": 1120, "VA": 1090, "CO": 980, "TN": 940,
|
||||
"NJ": 910, "OR": 720, "MN": 690, "WI": 610, "MO": 560, "MD": 540, "IN": 520, "NV": 480,
|
||||
"UT": 430, "AL": 390, "SC": 360, "KY": 310, "LA": 300, "OK": 280, "CT": 260, "IA": 210,
|
||||
"KS": 180, "AK": 140, "HI": 160, "ME": 120, "MT": 90, "WY": 60, "ND": 70, "SD": 80,
|
||||
}
|
||||
var usCities = []ui.USHeatmapPoint{
|
||||
{Label: "Seattle", Lat: 47.6062, Lng: -122.3321, Value: 1230},
|
||||
{Label: "San Francisco", Lat: 37.7749, Lng: -122.4194, Value: 2110},
|
||||
{Label: "Denver", Lat: 39.7392, Lng: -104.9903, Value: 980},
|
||||
{Label: "Chicago", Lat: 41.8781, Lng: -87.6298, Value: 1740},
|
||||
{Label: "New York", Lat: 40.7128, Lng: -74.006, Value: 3120},
|
||||
{Label: "Miami", Lat: 25.7617, Lng: -80.1918, Value: 1460},
|
||||
{Label: "Anchorage", Lat: 61.2181, Lng: -149.9003, Value: 140},
|
||||
{Label: "Honolulu", Lat: 21.3069, Lng: -157.8583, Value: 160},
|
||||
}
|
||||
|
||||
func chartsSection() func() *VNode {
|
||||
values := NewSignal(fixedChartData())
|
||||
drawn := newChartDrawing()
|
||||
seed := NewSignal(0)
|
||||
threeD := NewSignal(false)
|
||||
barC, donutC, areaC, lineC := ui.NewChart(), ui.NewChart(), ui.NewChart(), ui.NewChart()
|
||||
horizC, stackC := ui.NewChart(), ui.NewChart()
|
||||
heat := ui.NewUSHeatmap()
|
||||
|
||||
return func() *VNode {
|
||||
v := values.Get()
|
||||
sh := seed.Get()
|
||||
shuffle := func(base []float64) []float64 {
|
||||
out := make([]float64, len(base))
|
||||
for i, b := range base {
|
||||
if sh == 0 {
|
||||
out[i] = b
|
||||
continue
|
||||
}
|
||||
m := (int(b)*7 + sh*13) % 80
|
||||
if m < 4 {
|
||||
m = 4
|
||||
}
|
||||
out[i] = float64(m)
|
||||
}
|
||||
return out
|
||||
}
|
||||
requests := ui.ChartSeries{Name: "Requests", Data: shuffle([]float64{42, 17, 63, 28, 55, 9, 71})}
|
||||
errs := ui.ChartSeries{Name: "Errors", Data: shuffle([]float64{8, 3, 12, 6, 9, 2, 14})}
|
||||
pie := ui.ChartSeries{Name: "Traffic", Data: shuffle([]float64{40, 25, 20, 15, 8})}
|
||||
threeDLabel := "3D"
|
||||
if threeD.Get() {
|
||||
threeDLabel = "Flat"
|
||||
}
|
||||
|
||||
return docSection("charts", "Charts",
|
||||
prose("These are SVG, produced by go-chart — a plain Go library that knows nothing about "+
|
||||
"browsers. They are drawn by the WEBASSEMBLY, in your browser. The server never enters "+
|
||||
"the drawing code at all; it renders a placeholder, and the wasm replaces it on its first "+
|
||||
"commit."),
|
||||
prose("A Go charting library, compiled to wasm, drawing an SVG in the browser is the thing "+
|
||||
"this layer claims it can do. Server-rendering a picture of a chart would look identical "+
|
||||
"and prove the opposite point."),
|
||||
prose("webui.Chart draws its own SVG — nice-scale axes, rounded columns, arc slices, a "+
|
||||
"pointer crosshair — with no charting library. The geometry is pure Go, so the same shapes "+
|
||||
"the Solid kit draws on /js run here in the WebAssembly, against the same theme tokens. Change "+
|
||||
"the data and only the marks that moved re-render."),
|
||||
|
||||
demo("Drawn in the browser, by Go",
|
||||
row("grid gap-4 lg:grid-cols-12",
|
||||
chartBox("lg:col-span-7 rounded-default border border-line bg-surface p-3 shadow-xs overflow-auto",
|
||||
"h-[260px]", drawn.Get(), func() string { return barSVG(v) }),
|
||||
chartBox("lg:col-span-5 rounded-default border border-line bg-surface p-3 shadow-xs overflow-auto",
|
||||
"h-[320px]", drawn.Get(), func() string { return pieSVG(v) }),
|
||||
demo("Bar, donut, smooth area, two lines — one data set, and a 3D toggle",
|
||||
row("grid gap-6 lg:grid-cols-12",
|
||||
Div(Attr("class", "lg:col-span-7"), barC.Render(ui.ChartProps{Kind: ui.ChartBar, Labels: chartDaysWasm, Series: []ui.ChartSeries{requests, errs}, Height: 260, ThreeD: threeD.Get()})),
|
||||
Div(Attr("class", "lg:col-span-5"), donutC.Render(ui.ChartProps{Kind: ui.ChartDonut, Labels: pieLabelsWasm, Series: []ui.ChartSeries{pie}, Height: 260, ThreeD: threeD.Get()})),
|
||||
Div(Attr("class", "lg:col-span-7"), areaC.Render(ui.ChartProps{Kind: ui.ChartArea, Smooth: true, Labels: chartDaysWasm, Series: []ui.ChartSeries{requests}, Height: 220})),
|
||||
Div(Attr("class", "lg:col-span-5"), lineC.Render(ui.ChartProps{Kind: ui.ChartLine, Labels: chartDaysWasm, Series: []ui.ChartSeries{requests, errs}, Height: 220})),
|
||||
),
|
||||
row("mt-4 flex items-center gap-2",
|
||||
ui.Button(ui.ButtonProps{Color: ui.ButtonPrimary, Small: true, Text: "New data",
|
||||
OnClick: func() { values.Set(randomValues()) }}),
|
||||
Span(Attr("class", "text-xs text-ink-muted"),
|
||||
Text("Re-drawn in Go, in the browser. No request is made.")),
|
||||
row("mt-4 flex items-center gap-3",
|
||||
ui.Button(ui.ButtonProps{Color: ui.ButtonPrimary, Small: true, Text: "New data", OnClick: func() { seed.Set(seed.Get() + 1) }}),
|
||||
ui.Button(ui.ButtonProps{Color: ui.ButtonNeutral, Small: true, Text: threeDLabel, OnClick: func() { threeD.Set(!threeD.Get()) }}),
|
||||
Span(Attr("class", "text-xs text-ink-muted"), Text("Hover any chart. 3D extrudes the bars and tilts the donut.")),
|
||||
),
|
||||
),
|
||||
|
||||
note("webui.Chart is a stub, and says so",
|
||||
"The Solid kit's Chart draws its own SVG — nice-scale axes, rounded columns, arc slices, "+
|
||||
"a pointer-driven crosshair — with no charting library at all. That geometry has not "+
|
||||
"been ported to the neutral Go runtime yet, so the Go port keeps the props shape for "+
|
||||
"parity and renders only its box. This example draws with go-chart "+
|
||||
"instead, as above. Pretending the port drew charts would be the one thing this site refuses to do."),
|
||||
demo("Horizontal bars, and stacked",
|
||||
row("grid gap-6 lg:grid-cols-2",
|
||||
horizC.Render(ui.ChartProps{Kind: ui.ChartBar, Horizontal: true, Labels: chartDaysWasm, Series: []ui.ChartSeries{requests, errs}, Height: 260}),
|
||||
stackC.Render(ui.ChartProps{Kind: ui.ChartBar, Stacked: true, Labels: regionsWasm, Series: []ui.ChartSeries{
|
||||
{Name: "Requests", Data: shuffle([]float64{42, 55, 28, 63})},
|
||||
{Name: "Errors", Data: shuffle([]float64{8, 9, 6, 12})},
|
||||
{Name: "Retries", Data: shuffle([]float64{5, 7, 3, 9})},
|
||||
}, Height: 260}),
|
||||
),
|
||||
),
|
||||
|
||||
demo("US heatmap — a value per state, with proportional lat/lng points on top",
|
||||
heat.Render(ui.USHeatmapProps{Data: usSignups, Points: usCities, Proportional: true}),
|
||||
Span(Attr("class", "mt-3 block text-xs text-ink-muted"),
|
||||
Text("webui.USHeatmap shades each state on the choropleth ramp and projects lat/lng points "+
|
||||
"with a Go albersUsa port — Anchorage and Honolulu land on the insets. Hover a state or a point.")),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1337,7 +1393,6 @@ func languageOptions() []ui.FormSelectOption {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const kitSnippet = `// A component is a function taking a props struct.
|
||||
ui.Button(ui.ButtonProps{
|
||||
Color: ui.ButtonPrimary,
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -102,6 +102,24 @@
|
||||
--color-text-on-dark: #f9fafb;
|
||||
--color-text-on-dark-muted: #9ca3af;
|
||||
|
||||
/* The categorical CHART palette (webui/chart.go) and the sequential choropleth ramp
|
||||
(webui/usheatmap.go) — the SAME tokens the Solid kit names in jsruntime/styles/
|
||||
theme.css, so a chart looks identical on both front-ends. Marks name these as raw
|
||||
CSS variables in the SVG they draw. Dark values in the .dark block below. */
|
||||
--color-chart-1: #2a78d6;
|
||||
--color-chart-2: #1baf7a;
|
||||
--color-chart-3: #eda100;
|
||||
--color-chart-4: #008300;
|
||||
--color-chart-5: #4a3aa7;
|
||||
--color-chart-6: #e34948;
|
||||
--color-chart-7: #e87ba4;
|
||||
--color-chart-8: #eb6834;
|
||||
--color-choropleth-1: #dbe9fb;
|
||||
--color-choropleth-2: #b3d0f6;
|
||||
--color-choropleth-3: #85b3ee;
|
||||
--color-choropleth-4: #5591e4;
|
||||
--color-choropleth-5: #2f6fca;
|
||||
--color-choropleth-6: #124f8f;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
@@ -162,6 +180,23 @@
|
||||
|
||||
/* The grid is drawn in ink, not in shadow, once the page is dark. */
|
||||
--grid-line: rgba(226, 232, 240, 0.05);
|
||||
|
||||
/* Chart palette re-stepped for the dark surface; choropleth inverts its lightness
|
||||
direction so a high value reads as brighter. Mirrors the Solid scaffold's .dark. */
|
||||
--color-chart-1: #3987e5;
|
||||
--color-chart-2: #199e70;
|
||||
--color-chart-3: #c98500;
|
||||
--color-chart-4: #008300;
|
||||
--color-chart-5: #9085e9;
|
||||
--color-chart-6: #e66767;
|
||||
--color-chart-7: #d55181;
|
||||
--color-chart-8: #d95926;
|
||||
--color-choropleth-1: #1b2a44;
|
||||
--color-choropleth-2: #21406c;
|
||||
--color-choropleth-3: #2c5f97;
|
||||
--color-choropleth-4: #3f80c8;
|
||||
--color-choropleth-5: #649de8;
|
||||
--color-choropleth-6: #93c2f7;
|
||||
}
|
||||
|
||||
/* The page's own background — painted before the app mounts, and behind it afterwards.
|
||||
|
||||
@@ -1,25 +1,20 @@
|
||||
// The example is its own module so its go-chart dependency (and freetype /
|
||||
// x/image) stays out of the kjol module — kjol's engine packages are
|
||||
// stdlib-only. kjol is resolved locally via the replace below (no publish step).
|
||||
// The example is its own module so its build/SSR toolchain (esbuild, goja, minify) stays
|
||||
// out of the kjol module — kjol's engine packages are stdlib-only. kjol is resolved
|
||||
// locally via the replace below (no publish step).
|
||||
module kjolwebsite
|
||||
|
||||
go 1.26.3
|
||||
|
||||
require (
|
||||
github.com/wcharczuk/go-chart/v2 v2.1.2
|
||||
kjol v0.0.0
|
||||
)
|
||||
require kjol v0.0.0
|
||||
|
||||
require (
|
||||
github.com/dlclark/regexp2/v2 v2.2.1 // indirect
|
||||
github.com/dop251/goja v0.0.0-20260618133527-c9b2ea77db59 // indirect
|
||||
github.com/evanw/esbuild v0.28.0 // indirect
|
||||
github.com/go-sourcemap/sourcemap v2.1.3+incompatible // indirect
|
||||
github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 // indirect
|
||||
github.com/google/pprof v0.0.0-20230207041349-798e818bf904 // indirect
|
||||
github.com/tdewolff/minify/v2 v2.24.13 // indirect
|
||||
github.com/tdewolff/parse/v2 v2.8.13 // indirect
|
||||
golang.org/x/image v0.18.0 // indirect
|
||||
golang.org/x/net v0.55.0 // indirect
|
||||
golang.org/x/sys v0.45.0 // indirect
|
||||
golang.org/x/text v0.37.0 // indirect
|
||||
|
||||
@@ -10,9 +10,6 @@ github.com/go-sourcemap/sourcemap v2.1.3+incompatible h1:W1iEw64niKVGogNgBN3ePyL
|
||||
github.com/go-sourcemap/sourcemap v2.1.3+incompatible/go.mod h1:F8jJfvm2KbVjc5NqelyYJmf/v5J0dwNLS2mL4sNA1Jg=
|
||||
github.com/goccy/go-yaml v1.19.2 h1:PmFC1S6h8ljIz6gMRBopkjP1TVT7xuwrButHID66PoM=
|
||||
github.com/goccy/go-yaml v1.19.2/go.mod h1:XBurs7gK8ATbW4ZPGKgcbrY1Br56PdM69F7LkFRi1kA=
|
||||
github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 h1:DACJavvAHhabrF08vX0COfcOBJRhZ8lUbR+ZWIs0Y5g=
|
||||
github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0/go.mod h1:E/TSTwGwJL78qG/PmXZO1EjYhfJinVAhrmmHX6Z8B9k=
|
||||
github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
|
||||
github.com/google/pprof v0.0.0-20230207041349-798e818bf904 h1:4/hN5RUoecvl+RmJRE2YxKWtnnQls6rQjjW5oV7qg2U=
|
||||
github.com/google/pprof v0.0.0-20230207041349-798e818bf904/go.mod h1:uglQLonpP8qtYCYyzA+8c/9qtqgA3qsXGYqCPKARAFg=
|
||||
github.com/tdewolff/minify/v2 v2.24.13 h1:xrcF7gKDnUszseEY9WX9mUlZII2v2Go/QAcAwRASw58=
|
||||
@@ -21,73 +18,10 @@ github.com/tdewolff/parse/v2 v2.8.13 h1:si/8rLw5BZZTWCCiMm9A3f6x+RmqYfrkEeXCgpX5
|
||||
github.com/tdewolff/parse/v2 v2.8.13/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
|
||||
github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
|
||||
github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
|
||||
github.com/wcharczuk/go-chart/v2 v2.1.2 h1:Y17/oYNuXwZg6TFag06qe8sBajwwsuvPiJJXcUcLL6E=
|
||||
github.com/wcharczuk/go-chart/v2 v2.1.2/go.mod h1:Zi4hbaqlWpYajnXB2K22IUYVXRXaLfSGNNR7P4ukyyQ=
|
||||
github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
|
||||
golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
|
||||
golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
|
||||
golang.org/x/crypto v0.13.0/go.mod h1:y6Z2r+Rw4iayiXXAIxJIDAJ1zMW4yaTpebo8fPOliYc=
|
||||
golang.org/x/crypto v0.19.0/go.mod h1:Iy9bg/ha4yyC70EfRS8jz+B6ybOBKMaSxLj6P6oBDfU=
|
||||
golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
|
||||
golang.org/x/image v0.18.0 h1:jGzIakQa/ZXI1I0Fxvaa9W7yP25TqT6cHIHn+6CqvSQ=
|
||||
golang.org/x/image v0.18.0/go.mod h1:4yyo5vMFQjVjUcVk4jEQcU9MGy/rulF5WvUILseCM2E=
|
||||
golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
|
||||
golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
|
||||
golang.org/x/mod v0.12.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
|
||||
golang.org/x/mod v0.15.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
|
||||
golang.org/x/mod v0.17.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
|
||||
golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
|
||||
golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
|
||||
golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
|
||||
golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
|
||||
golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
|
||||
golang.org/x/net v0.15.0/go.mod h1:idbUs1IY1+zTqbi8yxTbhexhEEk5ur9LInksu6HrEpk=
|
||||
golang.org/x/net v0.21.0/go.mod h1:bIjVDfnllIU7BJ2DNgfnXvpSvtn8VRwhlsaeUTyUS44=
|
||||
golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM=
|
||||
golang.org/x/net v0.55.0 h1:bcvxaJn3e1U6InsFWt1JUq1aSjnRxLzT2rtD2KfkDF8=
|
||||
golang.org/x/net v0.55.0/go.mod h1:L5U2KuzuOe1lY7Z+aWVIKK6qEeJXnXV9yzGA+WCHJww=
|
||||
golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
|
||||
golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
|
||||
golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
|
||||
golang.org/x/sync v0.3.0/go.mod h1:FU7BRWz2tNW+3quACPkgCx/L+uEAv1htQ0V83Z9Rj+Y=
|
||||
golang.org/x/sync v0.6.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
|
||||
golang.org/x/sync v0.7.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
|
||||
golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
|
||||
golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
|
||||
golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||
golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||
golang.org/x/sys v0.45.0 h1:dO4czNzziLiiXplLQgBCEpCvXQ3dnkn0SdaZSYdQ+FY=
|
||||
golang.org/x/sys v0.45.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
|
||||
golang.org/x/telemetry v0.0.0-20240228155512-f48c80bd79b2/go.mod h1:TeRTkGYfJXctD9OcfyVLyj2J3IxLnKwHJR8f4D8a3YE=
|
||||
golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
|
||||
golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
|
||||
golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
|
||||
golang.org/x/term v0.8.0/go.mod h1:xPskH00ivmX89bAKVGSKKtLOWNx2+17Eiy94tnKShWo=
|
||||
golang.org/x/term v0.12.0/go.mod h1:owVbMEjm3cBLCHdkQu9b1opXd4ETQWc3BhuQGKgXgvU=
|
||||
golang.org/x/term v0.17.0/go.mod h1:lLRBjIVuehSbZlaOtGMbcMncT+aqLLLmKrsjNrUguwk=
|
||||
golang.org/x/term v0.20.0/go.mod h1:8UkIAJTvZgivsXaD6/pH6U9ecQzZ45awqEOzuCvwpFY=
|
||||
golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
|
||||
golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
|
||||
golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
|
||||
golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
|
||||
golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
|
||||
golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
|
||||
golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
|
||||
golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
|
||||
golang.org/x/text v0.16.0/go.mod h1:GhwF1Be+LQoKShO3cGOHzqOgRrGaYc9AvblQOmPVHnI=
|
||||
golang.org/x/text v0.37.0 h1:Cqjiwd9eSg8e0QAkyCaQTNHFIIzWtidPahFWR83rTrc=
|
||||
golang.org/x/text v0.37.0/go.mod h1:a5sjxXGs9hsn/AJVwuElvCAo9v8QYLzvavO5z2PiM38=
|
||||
golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
|
||||
golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
|
||||
golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
|
||||
golang.org/x/tools v0.6.0/go.mod h1:Xwgl3UAJ/d3gWutnCtw505GrjyAbvKui8lOU390QaIU=
|
||||
golang.org/x/tools v0.13.0/go.mod h1:HvlwmtVNQAhOuCjW7xxvovg8wbNq7LwfXh/k7wXUl58=
|
||||
golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d/go.mod h1:aiJjzUbINMkxbQROHiO6hDPo2LHcIPhhQsa9DLh0yGk=
|
||||
golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
|
||||
|
||||
Reference in New Issue
Block a user