begin new custom chart implementation for js ui

go/webui/chart.go

@@ -2,42 +2,36 @@ package webui
 
 import "kjol/vdom"
 
-// Port of web/kit/Chart.tsx (default export ReactiveChart).
+// Placeholder port of jsruntime/uikit/Chart.tsx.
 //
-// NOTE: The TSX wraps chart.js — it imperatively creates a `new Chart(ctx, cfg)`
-// against a <canvas> 2D context inside onMount, and pushes new data/options via
-// createEffect. None of that (canvas 2D drawing, a JS charting lib, mount/cleanup
-// lifecycles) exists in the neutral gowasm runtime, so actual chart DRAWING is out
-// of scope here. This port renders the faithful container structure + Tailwind and
-// an empty <canvas>, keeping a props shape for API parity. The example app instead
-// draws charts server-side as go-chart SVG.
+// NOTE: The Solid Chart is dependency-free SVG. Its drawing is pure geometry —
+// nice-scale axes, rounded columns, arc slices, a pointer-driven crosshair — none of
+// which is implemented here yet. This container keeps a props shape for API parity and
+// renders nothing but its box; the example app draws real charts (`app/chart.go`) as
+// go-chart SVG in WebAssembly. Porting the SVG geometry to `vdom` is the obvious
+// follow-up.
 
-// Chart type identifiers (chart.js `type`), kept for API parity with the TSX
-// ChartType union. Unused by this SVG-less container.
+// Chart kinds, kept for API parity with the TSX ChartKind union. Unused by this
+// placeholder container.
 const (
-	ChartTypeLine      = "line"
-	ChartTypeBar       = "bar"
-	ChartTypeRadar     = "radar"
-	ChartTypeDoughnut  = "doughnut"
-	ChartTypePolarArea = "polarArea"
-	ChartTypeBubble    = "bubble"
-	ChartTypePie       = "pie"
-	ChartTypeScatter   = "scatter"
+	ChartKindLine  = "line"
+	ChartKindArea  = "area"
+	ChartKindBar   = "bar"
+	ChartKindPie   = "pie"
+	ChartKindDonut = "donut"
 )
 
-// ReactiveChartProps mirrors the TSX props. Data and Options are accepted for API
-// parity but are not rendered (no JS chart lib in the neutral runtime; see NOTE).
-type ReactiveChartProps struct {
-	Type    string
-	Data    any
-	Options any
-	Class   string
+// ChartProps mirrors the TSX props loosely. Series/Labels are accepted for API
+// parity but are not rendered here (no SVG geometry yet; see NOTE).
+type ChartProps struct {
+	Kind   string
+	Labels []string
+	Data   any
+	Class  string
 }
 
-// ReactiveChart renders the chart container (h-full + user class) wrapping an
-// empty <canvas>. Drawing is out of scope — see the file NOTE.
-func ReactiveChart(p ReactiveChartProps) *vdom.VNode {
-	return vdom.Div(vdom.Attr("class", cx("h-full", p.Class)),
-		vdom.Canvas(),
-	)
+// Chart renders the chart container (the user's box class). Drawing is not yet
+// ported — see the file NOTE.
+func Chart(p ChartProps) *vdom.VNode {
+	return vdom.Div(vdom.Attr("class", cx("relative w-full", p.Class)))
 }