116 lines
3.0 KiB
JavaScript
116 lines
3.0 KiB
JavaScript
var chart;
|
|
var channel_colors = {
|
|
"0": {"color": "#a6cee3", "name": "Kanal 1"},
|
|
"1": {"color": "#1f78b4", "name": "Kanal 2"},
|
|
"2": {"color": "#b2df8a", "name": "Kanal 3"},
|
|
"3": {"color": "#33a02c", "name": "Kontrolle (4)"},
|
|
"4": {"color": "#fb9a99", "name": "Kanal 5"},
|
|
"5": {"color": "#e31a1c", "name": "Kanal 6"},
|
|
"6": {"color": "#fdbf6f", "name": "Kanal 7"}
|
|
};
|
|
|
|
var channel_time_data = {
|
|
"0": new Map(),
|
|
"1": new Map(),
|
|
"2": new Map(),
|
|
"3": new Map(),
|
|
"4": new Map(),
|
|
"5": new Map(),
|
|
"6": new Map()
|
|
};
|
|
|
|
var labels = [];
|
|
var datasets = {};
|
|
for (const [channel, time_values] of Object.entries(channel_time_data)) {
|
|
datasets[channel] = {
|
|
label: channel_colors[channel].name,
|
|
borderColor: channel_colors[channel].color,
|
|
fill: false,
|
|
cubicInterpolationMode: 'monotone',
|
|
tension: 0.4,
|
|
channel: channel,
|
|
data: []
|
|
}
|
|
//TODO: gaps?
|
|
for (const [time, value] of time_values.entries()) {
|
|
if (! labels.includes(time)) labels.push(time);
|
|
datasets[channel].data.push(value);
|
|
}
|
|
}
|
|
|
|
var config = {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: Object.values(datasets)
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
aspectRatio: 2,
|
|
interaction: {
|
|
intersect: false,
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
boxWidth: 10
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: true,
|
|
title: {
|
|
display: true,
|
|
text: "Zeit [min:sec]"
|
|
}
|
|
},
|
|
y: {
|
|
display: true,
|
|
//suggestedMin: -10,
|
|
//suggestedMax: 200
|
|
}
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 2,
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
function update_chart(obj){
|
|
for (const [channel, data] of Object.entries(obj)) {
|
|
for (var [time, value] of Object.entries(data)) {
|
|
time = Number(time); // js json keys are always strings...
|
|
channel_time_data[channel].set(time, value);
|
|
|
|
if (! chart.data.labels.includes(time)) {
|
|
chart.data.labels.push(time);
|
|
var progress_html = document.getElementById('status').getElementsByTagName('progress')[0];
|
|
|
|
time_remaining = 35*60 - time;
|
|
minutes_remaining = (time_remaining/60).toFixed(0);
|
|
seconds_remaining = (time_remaining%60);
|
|
human_readable_remaining = `${minutes_remaining}:${seconds_remaining} min`;
|
|
|
|
progress_html.innerHTML = human_readable_remaining;
|
|
progress_html.value = time;
|
|
document.getElementById('timeremaining').innerHTML = `${human_readable_remaining} remaining`;
|
|
}
|
|
|
|
chart.data.datasets.forEach((dataset) => {
|
|
if (dataset.channel == channel)
|
|
dataset.data.push(value);
|
|
});
|
|
}
|
|
}
|
|
if (obj) chart.update();
|
|
}
|
|
|
|
(function() {
|
|
chart = new Chart(document.getElementById('data'), config);
|
|
})();
|
|
|