initial port of the UI kit

go/webui/chart.go

@@ -0,0 +1,44 @@
+package webui
+
+import "kjol/vdom"
+
+// Port of web/kit/Chart.tsx (default export ReactiveChart).
+//
+// 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.
+
+// Chart type identifiers (chart.js `type`), kept for API parity with the TSX
+// ChartType union. Unused by this SVG-less container.
+const (
+	ChartTypeLine      = "line"
+	ChartTypeBar       = "bar"
+	ChartTypeRadar     = "radar"
+	ChartTypeDoughnut  = "doughnut"
+	ChartTypePolarArea = "polarArea"
+	ChartTypeBubble    = "bubble"
+	ChartTypePie       = "pie"
+	ChartTypeScatter   = "scatter"
+)
+
+// 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
+}
+
+// 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.El("div",
+		vdom.Attr("class", cx("h-full", p.Class)),
+		vdom.El("canvas"),
+	)
+}