111 lines
3.5 KiB
JavaScript
111 lines
3.5 KiB
JavaScript
(function () {
|
|
const dataEl = document.getElementById("chart-data");
|
|
const canvas = document.getElementById("temperatureChart");
|
|
if (!dataEl || !canvas) return;
|
|
|
|
const series = JSON.parse(dataEl.textContent || "[]");
|
|
const colors = ["#166b5b", "#cf5a24", "#355c9a", "#7a4e9f", "#9a6235"];
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
function resizeCanvas() {
|
|
const ratio = window.devicePixelRatio || 1;
|
|
const rect = canvas.getBoundingClientRect();
|
|
canvas.width = Math.max(320, Math.floor(rect.width * ratio));
|
|
canvas.height = Math.floor(360 * ratio);
|
|
ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
|
|
}
|
|
|
|
function draw() {
|
|
resizeCanvas();
|
|
const width = canvas.clientWidth;
|
|
const height = 360;
|
|
const pad = { top: 24, right: 24, bottom: 44, left: 54 };
|
|
const plotW = width - pad.left - pad.right;
|
|
const plotH = height - pad.top - pad.bottom;
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
const points = series.flatMap((item) =>
|
|
item.points.map((point) => ({
|
|
...point,
|
|
date: new Date(point.time),
|
|
}))
|
|
);
|
|
|
|
if (!points.length) {
|
|
ctx.fillStyle = "#64706b";
|
|
ctx.font = "16px system-ui, sans-serif";
|
|
ctx.fillText("Waiting for readings for today.", pad.left, pad.top + 40);
|
|
return;
|
|
}
|
|
|
|
const minTime = Math.min(...points.map((point) => point.date.getTime()));
|
|
const maxTime = Math.max(...points.map((point) => point.date.getTime()));
|
|
const temps = points.map((point) => Number(point.temperature));
|
|
const minTemp = Math.floor(Math.min(...temps) - 1);
|
|
const maxTemp = Math.ceil(Math.max(...temps) + 1);
|
|
const timeSpan = Math.max(1, maxTime - minTime);
|
|
const tempSpan = Math.max(1, maxTemp - minTemp);
|
|
|
|
function xFor(date) {
|
|
return pad.left + ((date.getTime() - minTime) / timeSpan) * plotW;
|
|
}
|
|
|
|
function yFor(temp) {
|
|
return pad.top + plotH - ((temp - minTemp) / tempSpan) * plotH;
|
|
}
|
|
|
|
ctx.strokeStyle = "#dfe5df";
|
|
ctx.lineWidth = 1;
|
|
ctx.fillStyle = "#64706b";
|
|
ctx.font = "12px system-ui, sans-serif";
|
|
|
|
for (let i = 0; i <= 4; i += 1) {
|
|
const y = pad.top + (plotH / 4) * i;
|
|
const temp = maxTemp - (tempSpan / 4) * i;
|
|
ctx.beginPath();
|
|
ctx.moveTo(pad.left, y);
|
|
ctx.lineTo(width - pad.right, y);
|
|
ctx.stroke();
|
|
ctx.fillText(`${temp.toFixed(1)}C`, 8, y + 4);
|
|
}
|
|
|
|
series.forEach((item, index) => {
|
|
const color = colors[index % colors.length];
|
|
const sorted = item.points
|
|
.map((point) => ({ ...point, date: new Date(point.time) }))
|
|
.sort((a, b) => a.date - b.date);
|
|
|
|
ctx.strokeStyle = color;
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
sorted.forEach((point, pointIndex) => {
|
|
const x = xFor(point.date);
|
|
const y = yFor(Number(point.temperature));
|
|
if (pointIndex === 0) ctx.moveTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
});
|
|
ctx.stroke();
|
|
|
|
sorted.forEach((point) => {
|
|
ctx.fillStyle = color;
|
|
ctx.beginPath();
|
|
ctx.arc(xFor(point.date), yFor(Number(point.temperature)), 3, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
});
|
|
});
|
|
|
|
const legendY = height - 18;
|
|
series.forEach((item, index) => {
|
|
const x = pad.left + index * 150;
|
|
ctx.fillStyle = colors[index % colors.length];
|
|
ctx.fillRect(x, legendY - 9, 10, 10);
|
|
ctx.fillStyle = "#1d2522";
|
|
ctx.font = "12px system-ui, sans-serif";
|
|
ctx.fillText(item.name, x + 16, legendY);
|
|
});
|
|
}
|
|
|
|
window.addEventListener("resize", draw);
|
|
draw();
|
|
})();
|