Genesis

src/client/LevelChart.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend
+);
+
+export default function LevelChart({ data, isLight, isCO2, range }) {
+    if (!data || data.length === 0) return null;
+
+    const formatDateLabel = (timestamp) => {
+        const date = new Date(timestamp);
+        if (range === 'day') {
+            return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        } else {
+            return date.toLocaleDateString([], { month: 'numeric', day: 'numeric' }) + ' ' +
+                date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        }
+    };
+
+    // Determine label and color based on sensor type
+    const levelLabel = isCO2 ? 'CO2 (ppm)' : (isLight ? 'Brightness' : 'Fan Speed');
+    const levelColor = isCO2 ? '#4caf50' : (isLight ? '#ffcd56' : '#9966ff');
+
+    const chartData = {
+        labels: data.map(d => formatDateLabel(d.timestamp)),
+        datasets: [
+            {
+                label: levelLabel,
+                data: data.map(d => d.fan_speed),
+                borderColor: levelColor,
+                backgroundColor: levelColor,
+                stepped: !isCO2, // CO2 uses smooth lines
+                tension: isCO2 ? 0.4 : 0, // Smooth for CO2, stepped for others
+                borderWidth: 2,
+                pointRadius: 0
+            },
+        ],
+    };
+
+    // CO2 needs different Y-axis scale (ppm range)
+    const yScale = isCO2
+        ? { suggestedMin: 400, suggestedMax: 2000 }
+        : { suggestedMin: 0, suggestedMax: 10, ticks: { stepSize: 1 } };
+
+    const options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: {
+            mode: 'index',
+            intersect: false,
+        },
+        scales: {
+            x: {
+                ticks: {
+                    maxRotation: 0,
+                    autoSkip: true,
+                    maxTicksLimit: 8
+                }
+            },
+            y: yScale
+        },
+    };
+
+    return <Line data={chartData} options={options} />;
+}