begin new custom chart implementation for js ui

go/webui/README.md

@@ -37,7 +37,7 @@ See the runnable **`/wasm/kit`** demo page in `cmd/kjol-web` (Layers → Kjol Wa
   `Menu`*, `Submenu`, `EnvBadge`, `RemoteUpdateFlash`.
 - **Overlays/floating:** `Modal`/`ConfirmModal`/`WizardModal`, `Toast*`, `Tooltip`/
   `HoverTooltip`, `Popover`/`HoverPopover`, `Floating*`.
-- **Data:** `PrettyTable`, `AutoTable`, `CellGrid`, `ReactiveChart`, `Calendar`,
+- **Data:** `PrettyTable`, `AutoTable`, `CellGrid`, `Chart`, `Calendar`,
   `DatePicker`, `FuzzyMatch*` (+ pure matchers), `Tutorial`.
 - **Pure logic (no vdom):** `formatters.go` (`FormatPhoneNumber`, `FormatDate`, …) and
   `validation.go` (`IsEmailValid`, `CreateValidation`, …).
@@ -52,6 +52,7 @@ with a `// NOTE:` in the component's file. Concretely: dropdown/menu/tooltip/mod
 positioning is static (not computed); outside-click / Escape / hover-delay dismissal,
 auto-dismiss timers, and enter/exit animations are dropped (caller-driven); `AutoTable`
 omits virtual scrolling, column resize/reorder, inline editing, and the formula engine;
-`ReactiveChart` renders only its container (the example draws charts server-side with
-go-chart); a few `Form*` controls that needed canvas/async (`FormSignaturePad`,
+`Chart` renders only its container — the Solid kit's dependency-free SVG geometry is not
+yet ported (the example draws charts server-side with go-chart); a few `Form*` controls
+that needed canvas/async (`FormSignaturePad`,
 `FormAsyncCombobox`) are omitted. Everything compiles on native (SSR) and js/wasm.

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)))
 }