52 lines
2.2 KiB
JavaScript
52 lines
2.2 KiB
JavaScript
import React, {useEffect, useState} from 'react' // useState to rerender the view each time something changed
|
|
import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
|
import SensorCardDeck from './SensorCardDeck'
|
|
|
|
export default function Home(props) {
|
|
|
|
var updateCardValues = () => {
|
|
var updatedValues = [
|
|
props.dummyData[props.dummyData.length - 1].temperature,
|
|
props.dummyData[props.dummyData.length - 1].humidity,
|
|
props.dummyData[props.dummyData.length - 1].light,
|
|
props.dummyData[props.dummyData.length - 1].moisture
|
|
];
|
|
return updatedValues;
|
|
}
|
|
|
|
// this data represents the sensor values, they should be initialized empty.. this is just for the simulation when it first renders
|
|
const [sensorCardValues, setSensorCardValues] = useState(updateCardValues);
|
|
const [dataHistory, setDataHistory] = useState(props.dummyData); // for init data
|
|
|
|
// runs when the app mounts
|
|
// if you give a prop to useEffect, it also runs each time this prop changes..
|
|
useEffect(() => {
|
|
console.log("data is changing, start rerender..")
|
|
setDataHistory(props.dummyData);
|
|
setSensorCardValues(updateCardValues);
|
|
}, [props.dummyData])
|
|
|
|
// render the data
|
|
// make sensorCarddeck responsive
|
|
return (
|
|
<>
|
|
<SensorCardDeck sensorCardValues={sensorCardValues}/>
|
|
|
|
<ResponsiveContainer width='100%' height={400}>
|
|
<LineChart data={dataHistory} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
|
|
<Line type="monotone" dataKey="temperature" stroke="#10b5de" />
|
|
<Line type="monotone" dataKey="humidity" stroke="#ff6f00" />
|
|
<Line type="monotone" dataKey="light" stroke="#ffd500" />
|
|
<Line type="monotone" dataKey="moisture" stroke="#1c4399" />
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
|
|
</>
|
|
)
|
|
}
|