58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
import { mockTemperatureLogs } from "../../mockdata/temperature-logs.mockdata.js"; // Import data
|
|
|
|
const xValues = mockTemperatureLogs.map(log => new Date(log.date).toLocaleString()); // Full Date labels
|
|
const yValues = mockTemperatureLogs.map(log => log.temperature); // Temperature values
|
|
buildTable(mockTemperatureLogs);
|
|
new Chart("myChart", {
|
|
type: "line",
|
|
data: {
|
|
labels: xValues,
|
|
datasets: [{
|
|
fill: false,
|
|
lineTension: 0.4,
|
|
backgroundColor: "rgba(0,0,255,1.0)",
|
|
borderColor: "rgba(0,0,255,0.1)",
|
|
data: yValues
|
|
}]
|
|
},
|
|
options: {
|
|
tooltips: {
|
|
callbacks: {
|
|
title: function(tooltipItem) {
|
|
return `Date: ${tooltipItem[0].label}`;
|
|
},
|
|
label: function(tooltipItem) {
|
|
return `Temperature: ${tooltipItem.value}°C`;
|
|
},
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
function buildTable(data){
|
|
var table = document.getElementById(`TemperatureTable`)
|
|
data.forEach(log => {
|
|
var averageTemp = (log.tempHigh + log.tempLow) / 2.0;
|
|
var color;
|
|
if (log.temperature > log.tempHigh) {
|
|
color = 'tempHigh';
|
|
} else if (log.temperature < log.tempHigh && log.temperature > averageTemp) {
|
|
color = 'tempMidHigh';
|
|
} else if (log.temperature < log.tempLow) {
|
|
color = 'tempLow';
|
|
} else if (log.temperature > log.tempLow && log.temperature < averageTemp) {
|
|
color = 'tempMidLow';
|
|
} else {
|
|
color = 'tempNormal';
|
|
}
|
|
var row =` <tr>
|
|
<td>Name</td>
|
|
<td class="${color}">${log.temperature}</td>
|
|
<td>${log.date}</td>
|
|
<td class="tempHigh">${log.tempHigh}</td>
|
|
<td class="tempLow">${log.tempLow}</td>
|
|
</tr>`
|
|
table.innerHTML += row
|
|
})
|
|
}
|