Initial Commit

app/static/chart.js

@@ -0,0 +1,110 @@
+(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();
+})();