82 lines
1.8 KiB
JavaScript
82 lines
1.8 KiB
JavaScript
function selectDisplay(display) {
|
|
const inputDisplay = document.getElementById('input-display')
|
|
inputDisplay.value = display
|
|
inputDisplay.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(),
|
|
mode: 'scatter',
|
|
}]
|
|
|
|
this.layout = {
|
|
margin: {
|
|
t: 24,
|
|
r: 0,
|
|
},
|
|
}
|
|
|
|
this.config = {
|
|
displayModeBar: true,
|
|
}
|
|
|
|
Plotly.react(this.graphValues, values, this.layout, this.config);
|
|
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(),
|
|
mode: 'scatter',
|
|
}]
|
|
Plotly.react(this.graphValues, values, this.layout)
|
|
})
|
|
}
|
|
}
|
|
|
|
class Dataset {
|
|
constructor(id, initialData) {
|
|
this.datapointID = id
|
|
this.values = {}
|
|
if (initialData === null)
|
|
return
|
|
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
|
|
})
|
|
}
|
|
}
|