kelvin
/
shrooms-server
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Implement updatable charts

This commit is contained in:
Kelvin Ly 2023-05-15 11:05:41 -04:00
parent 00868284bd
commit ce21b6fa85
1 changed files with 108 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
dev/dev.htm
View File

@ -14,9 +14,9 @@ function initCharts() {
chart = c3.generate({
bindto: '#humidity-temp',
data: {
x: 'x',
x: 'time',
columns: [
['x', 1, 2, 3, 4],
['time', 1, 2, 3, 4],
['temp', 24, 24.5, 24.3, 24.6],
['humidity', 83.1, 99.5, 74.3, 84.6],
],
@ -37,9 +37,9 @@ function initCharts() {
chart2 = c3.generate({
bindto: '#volts',
data: {
x: 'x',
x: 'time',
columns: [
['x', 1, 2, 3, 4],
['time', 1, 2, 3, 4],
['voltage', 24, 24.5, 24.3, 24.6],
],
axes: {
@ -51,15 +51,117 @@ function initCharts() {
}
})
}
var cur_time_millis = 0
var max_interval_millis = 5*60*1000
var time = []
var temp = []
var humd = []
var volts = []
function status(msg) {
document.getElementById('status').textContent = msg
}
async function updateCharts() {
status("loading data...")
const latest = await fetch("/api/latest")
const last_time_millis = await latest.json()
if (last_time_millis > cur_time_millis) {
// we need to collect more data to catch up
// time is in milliseconds so we divide by 1000
var diff = (last_time_millis - cur_time_millis) / 1000
// worst case load only the last two weeks of data
diff = Math.min(diff, max_interval_millis/1000)
var path = "/api/last/weeks/"
var offset = diff
if (diff < 60*60) {
path = "/api/last/minutes/"
offset = Math.ceil(diff/60)
} else if (diff < 24*60*60) {
path = "/api/last/hours/"
offset = Math.ceil(diff/(60*60))
} else if (diff < 7*24*60*60) {
path = "/api/last/days/"
offset = Math.ceil(diff/(24*60*60))
} else {
path = "/api/last/weeks/"
offset = Math.ceil(diff/(7*24*60*60))
}
const new_data = await fetch(path + offset)
const new_data_json = await new_data.json()
// copy the data into the arrays
new_data_json.sort((a, b) => a.t - b.t)
new_data_json.forEach((v) => {
var last_time = time[time.length-1]
if (time.length == 0) {
last_time = 0
}
if (v.t > last_time) {
time.push(v.t)
temp.push(v.temp)
humd.push(v.hum)
volts.push(v.hv)
}
})
// truncate all the lists as necessary
// using the time array to determine the splicing points
cur_time_millis = time[time.length - 1]
const min_time = cur_time_millis - max_interval_millis
var slice_idx = 0
for (var i = 0; i < time.length; i++) {
if (time[i] >= min_time) {
slice_idx = i
break
}
}
console.log("slice idx ", slice_idx)
temp = temp.slice(slice_idx)
humd = humd.slice(slice_idx)
volts = volts.slice(slice_idx)
time = time.slice(slice_idx)
console.log(time)
console.log(temp)
console.log(humd)
console.log(volts)
chart.load({
columns: [
["time"].concat(time),
["temp"].concat(temp),
["humidity"].concat(humd),
]
})
chart2.load({
columns: [
["time"].concat(time),
["voltage"].concat(volts),
]
})
status("charts updated")
}
}
window.onload = () => {
initCharts()
const xhr = new XmlHttpRequest()
updateCharts()
document.getElementById('update').addEventListener('click', (e) => {
updateCharts()
})
}
</script>
</head>
<body>
<div id="humidity-temp"></div>
<div id="volts"></div>
<p>Test!</p>
<div>
<input type=button id=update value="Update"></input>
<span id=status></span>
</div>
<div id=device_status></div>
</body>
</html>