71 lines
3.2 KiB
JavaScript
71 lines
3.2 KiB
JavaScript
import React from 'react'
|
|
import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
|
|
import SensorCardDeck from './SensorCardDeck'
|
|
import {SensorDataCollection} from "../../client/main";
|
|
import {useTracker} from 'meteor/react-meteor-data';
|
|
import {Col, Row} from "react-bootstrap";
|
|
|
|
export default function Home() {
|
|
const sensorData = useTracker(() => {
|
|
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 10 }).fetch().reverse();
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<SensorCardDeck/>
|
|
|
|
<Row>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={375}>
|
|
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
|
|
<Line type="monotone" dataKey="temperature" stroke="#10b5de" />
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey="timestampToString" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={375}>
|
|
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
|
|
<Line type="monotone" dataKey="humidity" stroke="#ff6f00" />
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey="timestampToString" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={375}>
|
|
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
|
|
<Line type="monotone" dataKey="brightness" stroke="#ffd500" />
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey="timestampToString" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={375}>
|
|
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
|
|
<Line type="monotone" dataKey="moisture" stroke="#1c4399" />
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey="timestampToString" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
)
|
|
} |