83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
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} />;
|
|
}
|