144 lines
No EOL
3.4 KiB
JavaScript
144 lines
No EOL
3.4 KiB
JavaScript
/* Visualization Logic for Kiesel Atmung Experiment */
|
|
|
|
/**
|
|
* @file visualization.js
|
|
* @description Visualization of temperature and audio intensity data using Chart.js.
|
|
* Provides two main render functions: renderTemperatureChart() and renderAudioChart().
|
|
*/
|
|
|
|
let temperatureChart = null;
|
|
let audioChart = null;
|
|
|
|
/**
|
|
* Helper to format time labels for Chart.js.
|
|
* @param {string|number|Date} timestamp
|
|
* @returns {string}
|
|
*/
|
|
const formatTime = (timestamp) => {
|
|
const date = new Date(timestamp);
|
|
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
};
|
|
|
|
/**
|
|
* @function renderTemperatureChart
|
|
* @description Creates or updates the temperature time series chart.
|
|
* @param {Array<{time: string|number|Date, value: number}>} data
|
|
* @returns {void}
|
|
*/
|
|
export function renderTemperatureChart(data = []) {
|
|
const ctx = document.getElementById('temperature-chart');
|
|
if (!ctx) return;
|
|
|
|
const labels = data.map(d => formatTime(d.time));
|
|
const values = data.map(d => d.value);
|
|
|
|
const config = {
|
|
type: 'line',
|
|
data: {
|
|
labels,
|
|
datasets: [{
|
|
label: 'Temperatur (°C)',
|
|
data: values,
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
tension: 0.25,
|
|
pointRadius: 2,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
title: { display: true, text: 'Zeit' },
|
|
ticks: { autoSkip: true, maxTicksLimit: 8 }
|
|
},
|
|
y: {
|
|
title: { display: true, text: '°C' }
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
callbacks: {
|
|
label: ctx => `${ctx.parsed.y.toFixed(2)} °C`
|
|
}
|
|
},
|
|
legend: { display: true }
|
|
},
|
|
interaction: {
|
|
mode: 'nearest',
|
|
axis: 'x',
|
|
intersect: false
|
|
}
|
|
}
|
|
};
|
|
|
|
if (temperatureChart) {
|
|
temperatureChart.data = config.data;
|
|
temperatureChart.update();
|
|
} else {
|
|
temperatureChart = new Chart(ctx, config);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @function renderAudioChart
|
|
* @description Displays audio intensity over time as a bar chart.
|
|
* @param {Array<{time: string|number|Date, amplitude: number}>} data
|
|
* @returns {void}
|
|
*/
|
|
export function renderAudioChart(data = []) {
|
|
const ctx = document.getElementById('audio-chart');
|
|
if (!ctx) return;
|
|
|
|
const labels = data.map(d => formatTime(d.time));
|
|
const values = data.map(d => d.amplitude);
|
|
|
|
const config = {
|
|
type: 'bar',
|
|
data: {
|
|
labels,
|
|
datasets: [{
|
|
label: 'Audiointensität',
|
|
data: values,
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
title: { display: true, text: 'Zeit' },
|
|
ticks: { autoSkip: true, maxTicksLimit: 8 }
|
|
},
|
|
y: {
|
|
title: { display: true, text: 'Amplitude' },
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: ctx => `${ctx.parsed.y.toFixed(2)}`
|
|
}
|
|
},
|
|
legend: { display: true }
|
|
}
|
|
}
|
|
};
|
|
|
|
if (audioChart) {
|
|
audioChart.data = config.data;
|
|
audioChart.update();
|
|
} else {
|
|
audioChart = new Chart(ctx, config);
|
|
}
|
|
}
|
|
|
|
// End of visualization logic
|