diff --git a/internal/examples/realtimechart/main.go b/internal/examples/realtimechart/main.go index 2e9145a..7e0b2e5 100644 --- a/internal/examples/realtimechart/main.go +++ b/internal/examples/realtimechart/main.go @@ -7,6 +7,7 @@ import ( "time" "github.com/go-via/via" + "github.com/go-via/via-plugin-picocss/picocss" "github.com/go-via/via/h" ) @@ -16,10 +17,12 @@ func main() { v.Config(via.Options{ LogLvl: via.LogLevelDebug, DevMode: true, + Plugins: []via.Plugin{ + picocss.Default, + }, }) v.AppendToHead( - 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")), ) @@ -28,6 +31,16 @@ func main() { c.View(func() h.H { return h.Div(h.Class("container"), + h.Section( + h.Nav( + h.Ul(h.Li(h.H3(h.Text("⚡Via")))), + h.Ul( + h.Li(h.A(h.H5(h.Text("About")), h.Href("https://github.com/go-via/via"))), + h.Li(h.A(h.H5(h.Text("Resources")), h.Href("https://github.com/orgs/go-via/repositories"))), + h.Li(h.A(h.H5(h.Text("Say hi!")), h.Href("http://github.com/go-via/via/discussions"))), + ), + ), + ), chartComp(), ) }) @@ -42,8 +55,8 @@ func chartCompFn(c *via.Context) { isLive := true isLiveSig := c.Signal("on") - refreshRate := c.Signal(1) - tkr := time.NewTicker(1000 * time.Millisecond) + refreshRate := c.Signal(24) + tkr := time.NewTicker(1000 / time.Duration(refreshRate.Int()) * time.Millisecond) updateRefreshRate := c.Action(func() { tkr.Reset(1000 / time.Duration(refreshRate.Int()) * time.Millisecond) @@ -63,20 +76,22 @@ func chartCompFn(c *via.Context) { if isLive { c.ExecScript(fmt.Sprintf(` - if (myChart) - myChart.setOption({ - xAxis: [{data: %s}], - series:[{data: %s}] - },{notMerge:false,lazyUpdate:true}); - `, labelsTxt, dataTxt)) + if (myChart) + myChart.setOption({ + xAxis: [{data: %s}], + series:[{data: %s}] + },{ + notMerge:false, + lazyUpdate:true + }); + `, labelsTxt, dataTxt)) } } }() c.View(func() h.H { return h.Div( - h.Div(h.ID("chart"), h.Style("width:100%;height:400px;"), - h.Script(h.Raw(` + h.Div(h.ID("chart"), h.Style("width:100%;height:400px;"), h.Script(h.Raw(` var prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); var myChart = echarts.init(document.getElementById('chart'), prefersDark.matches ? 'dark' : 'light'); var option = { @@ -90,7 +105,7 @@ func chartCompFn(c *via.Context) { }, title: { left: 'center', - text: 'Large Area Chart' + text: '📈 Real-Time Chart Example' }, xAxis: { type: 'category', @@ -104,7 +119,7 @@ func chartCompFn(c *via.Context) { dataZoom: [ { type: 'inside', - start: 80, + start: 90, end: 100 }, { @@ -119,17 +134,18 @@ func chartCompFn(c *via.Context) { symbol: 'none', sampling: 'lttb', itemStyle: { - color: '#1488CC' + color: '#e8ae01' }, + lineStyle: { color: '#e8ae01'}, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: '#1488CC' + color: '#fecc63' }, { offset: 1, - color: '#2B32B2' + color: '#c79400' } ]) }, @@ -138,19 +154,18 @@ func chartCompFn(c *via.Context) { ] }; option && myChart.setOption(option); - `)), - h.Section( - h.Article( - h.H5(h.Text("Controls")), - h.Hr(), - h.Div(h.Class("grid"), - h.FieldSet( - h.Legend(h.Text("Live Data")), - h.Input(h.Type("checkbox"), h.Role("switch"), isLiveSig.Bind(), toggleIsLive.OnChange()), - ), - h.Label(h.Span(h.Text("Refresh Rate (")), h.Span(refreshRate.Text()), h.Span(h.Text(" Hz)")), - h.Input(h.Type("range"), h.Attr("min", "1"), h.Attr("max", "200"), refreshRate.Bind(), updateRefreshRate.OnChange()), - ), + `))), + h.Section( + h.Article( + h.H5(h.Text("Controls")), + h.Hr(), + h.Div(h.Class("grid"), + h.FieldSet( + h.Legend(h.Text("Live Data")), + h.Input(h.Type("checkbox"), h.Role("switch"), isLiveSig.Bind(), toggleIsLive.OnChange()), + ), + h.Label(h.Text("Refresh Rate (Hz) ― "), refreshRate.Text(), + h.Input(h.Type("range"), h.Attr("min", "1"), h.Attr("max", "200"), refreshRate.Bind(), updateRefreshRate.OnChange()), ), ), ), diff --git a/via.go b/via.go index 294f905..6826c44 100644 --- a/via.go +++ b/via.go @@ -398,8 +398,8 @@ func New() *V { return case patch, ok := <-c.patchChan: if !ok { - v.logDebug(c, "patchChan closed, exiting handler loop") - return + time.Sleep(100 * time.Millisecond) + continue } switch patch.typ { case patchTypeElements: