feat: add real-time chart example

internal/examples/picocss/main.go

@@ -0,0 +1,35 @@
+package main
+
+import (
+	"github.com/go-via/via"
+	"github.com/go-via/via/h"
+)
+
+func main() {
+	v := via.New()
+
+	v.Config(via.Configuration{
+		DocumentTitle: "Via",
+		DocumentHeadIncludes: []h.H{
+			h.Link(h.Rel("stylesheet"), h.Href("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css")),
+		},
+	})
+
+	v.Page("/", func(c *via.Context) {
+		c.View(func() h.H {
+			return h.Div(
+				h.H1(h.Text("Hello PicoCSS!")),
+				h.H2(h.Text("Hello PicoCSS!")),
+				h.H3(h.Text("Hello PicoCSS!")),
+				h.H4(h.Text("Hello PicoCSS!")),
+				h.H5(h.Text("Hello PicoCSS!")),
+				h.H6(h.Text("Hello PicoCSS!")),
+				h.Div(h.Class("grid"),
+					h.Button(h.Text("Primary")),
+					h.Button(h.Class("secondary"), h.Text("Secondary")),
+				),
+			)
+		})
+	})
+	v.Start(":3000")
+}

internal/examples/realtimechart/main.go

@@ -0,0 +1,136 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"math/rand"
+	"time"
+
+	"github.com/go-via/via"
+	"github.com/go-via/via/h"
+)
+
+func main() {
+	v := via.New()
+
+	v.Config(via.Configuration{
+		DocumentTitle: "Via",
+		DocumentHeadIncludes: []h.H{
+			h.Link(h.Rel("stylesheet"), h.Href("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css")),
+			h.Script(h.Src("https://unpkg.com/echarts@6.0.0/dist/echarts.min.js")),
+		},
+	})
+
+	v.Page("/", func(c *via.Context) {
+		chartComp := c.Component(chartCompFn)
+
+		c.View(func() h.H {
+			return h.Div(h.Class("container"),
+				chartComp(),
+			)
+		})
+	})
+
+	v.Start(":3000")
+}
+
+func chartCompFn(c *via.Context) {
+	data := make([]float64, 1000)
+	labels := make([]string, 1000)
+
+	go func() {
+		tkr := time.NewTicker(60 * time.Millisecond)
+		defer tkr.Stop()
+		for range tkr.C {
+			labels = append(labels[1:], time.Now().Format("15:04:05.000"))
+			data = append(data[1:], rand.Float64()*1000)
+			labelsTxt, _ := json.Marshal(labels)
+			dataTxt, _ := json.Marshal(data)
+
+			c.ExecScript(fmt.Sprintf(`
+			if (myChart)
+				myChart.setOption({
+					xAxis: [{data: %s}],
+					series:[{data: %s}]
+				});
+			`, labelsTxt, dataTxt))
+		}
+	}()
+
+	c.View(func() h.H {
+		return h.Div(h.ID("chart"), h.Style("width:100%;height:400px;"),
+			h.Script(h.Raw(`
+				const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+				var myChart = echarts.init(document.getElementById('chart'), prefersDark.matches ? 'dark' : 'light');
+				var option = {
+					backgroundColor: prefersDark.matches ? 'transparent' : '#ffffff',
+					animationDurationUpdate: 60,  //  affects updates/redraws
+					tooltip: {
+						trigger: 'axis',
+						position: function (pt) {
+							return [pt[0], '10%'];
+						}
+					},
+					title: {
+						left: 'center',
+						text: 'Large Area Chart'
+					},
+					toolbox: {
+						feature: {
+							dataZoom: {
+								yAxisIndex: 'none'
+							},
+							restore: {},
+							saveAsImage: {}
+						}
+					},
+					xAxis: {
+						type: 'category',
+						boundaryGap: false,
+						data: [] 
+					},
+					yAxis: {
+						type: 'value',
+						boundaryGap: [0, '100%']
+					},
+					dataZoom: [
+						{
+							type: 'inside',
+							start: 80,
+							end: 100
+						},
+						{
+							start: 0,
+							end: 100
+						}
+					],
+					series: [
+						{
+							name: 'Fake Data',
+							type: 'line',
+							symbol: 'none',
+							sampling: 'lttb',
+							itemStyle: {
+								color: '#1488CC'
+							},
+							areaStyle: {
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+									{
+										offset: 0,
+										color: '#1488CC'
+									},
+									{
+										offset: 1,
+										color: '#2B32B2'
+									}
+								])
+							},
+							data: []
+						}
+					]
+				};
+				option && myChart.setOption(option);
+			`)),
+		)
+	})
+}