160 lines
3.4 KiB
Go
160 lines
3.4 KiB
Go
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.Options{
|
|
LogLvl: via.LogLevelDebug,
|
|
DevMode: true,
|
|
})
|
|
|
|
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")),
|
|
)
|
|
|
|
v.Page("/", func(c *via.Context) {
|
|
chartComp := c.Component(chartCompFn)
|
|
|
|
c.View(func() h.H {
|
|
return h.Div(h.Class("container"),
|
|
chartComp(),
|
|
)
|
|
})
|
|
})
|
|
|
|
v.Start()
|
|
}
|
|
|
|
func chartCompFn(c *via.Context) {
|
|
data := make([]float64, 1000)
|
|
labels := make([]string, 1000)
|
|
|
|
isLive := true
|
|
refreshRate := c.Signal(1)
|
|
tkr := time.NewTicker(1000 * time.Millisecond)
|
|
|
|
updateRefreshRate := c.Action(func() {
|
|
tkr.Reset(1000 / time.Duration(refreshRate.Int()) * time.Millisecond)
|
|
})
|
|
|
|
toggleIsLive := c.Action(func() {
|
|
isLive = !isLive
|
|
})
|
|
|
|
go func() {
|
|
defer tkr.Stop()
|
|
for range tkr.C {
|
|
labels = append(labels[1:], time.Now().Format("15:04:05.000"))
|
|
data = append(data[1:], rand.Float64()*10)
|
|
labelsTxt, _ := json.Marshal(labels)
|
|
dataTxt, _ := json.Marshal(data)
|
|
|
|
if isLive {
|
|
c.ExecScript(fmt.Sprintf(`
|
|
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(`
|
|
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: 0, // affects updates/redraws
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
position: function (pt) {
|
|
return [pt[0], '10%'];
|
|
}
|
|
},
|
|
title: {
|
|
left: 'center',
|
|
text: 'Large Area Chart'
|
|
},
|
|
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);
|
|
`)),
|
|
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"), toggleIsLive.OnChange()),
|
|
),
|
|
h.Label(h.ID("refresh-rate-input"), 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()),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
})
|
|
}
|