smon/static/js/datapoint_values.js

80 lines
1.7 KiB
JavaScript
Raw Normal View History

2024-06-27 16:53:30 +02:00
function offsetTime(seconds) {
const el = document.getElementById('offset-time')
el.value = seconds
el.form.submit()
}
class Graph {
constructor(datapointID, initialData) {
this.dataset = new Dataset(datapointID, initialData)
this.createGraph()
}
async createGraph() {
this.graphValues = document.getElementById('graph-values');
const values = [{
x: this.dataset.xValues(),
y: this.dataset.yValues(),
2024-06-27 19:07:35 +02:00
mode: 'scatter',
2024-06-27 16:53:30 +02:00
}]
this.layout = {
margin: {
t: 24,
r: 0,
},
}
2024-06-27 19:07:35 +02:00
this.config = {
displayModeBar: true,
}
Plotly.react(this.graphValues, values, this.layout, this.config);
2024-06-27 16:53:30 +02:00
this.graphValues.on('plotly_relayout', attr => this.relayoutHandler(attr))
}
async relayoutHandler(attr) {
if (!attr.hasOwnProperty('xaxis.range[0]') || !attr.hasOwnProperty('xaxis.range[1]'))
return
this.dataset.extend(attr['xaxis.range[0]'], attr['xaxis.range[1]'])
.then(() => {
const values = [{
x: this.dataset.xValues(),
y: this.dataset.yValues(),
2024-06-27 19:07:35 +02:00
mode: 'scatter',
2024-06-27 16:53:30 +02:00
}]
Plotly.react(this.graphValues, values, this.layout)
})
}
}
class Dataset {
constructor(id, initialData) {
this.datapointID = id
this.values = {}
initialData.forEach(v=>this.values[v.ID] = v)
}
xValues() {
return Object.keys(this.values).map(dpID => this.values[dpID].Ts)
}
yValues() {
return Object.keys(this.values).map(dpID => this.values[dpID].ValueInt.Int64)
}
async extend(from, to) {
return fetch(`/datapoint/json/${this.datapointID}?f=${from}&t=${to}`)
.then(data => data.json())
.then(datapointValues => {
datapointValues.forEach(dp=>{
this.values[dp.ID] = dp
})
document.getElementById('num-values').innerText = Object.keys(this.values).length
})
}
}