tvolkmann/smart_garden_server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Separate Chart into four different ones.

Browse Source
This commit is contained in:
Andrés Uribe Stengel 2020-07-14 18:28:13 +02:00
parent 8590ff017f
commit 0450dff98f
1 changed files with 55 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
imports/ui/Home.jsx
View File

@ -1,32 +1,71 @@
import React, {useEffect, useState} from 'react' // useState to rerender the view each time something changed import React from 'react'
import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts'; import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
import SensorCardDeck from './SensorCardDeck' import SensorCardDeck from './SensorCardDeck'
import {SensorDataCollection} from "../../client/main"; import {SensorDataCollection} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data'; import {useTracker} from 'meteor/react-meteor-data';
import {Col, Row} from "react-bootstrap";
export default function Home() { export default function Home() {
const sensorData = useTracker(() => { const sensorData = useTracker(() => {
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 10 }).fetch(); return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 10 }).fetch().reverse();
}); });
return ( return (
<> <>
<SensorCardDeck/> <SensorCardDeck/>
<ResponsiveContainer width='100%' height={400}> <Row>
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}> <Col>
<Line type="monotone" dataKey="temperature" stroke="#10b5de" /> <ResponsiveContainer width='100%' height={375}>
<Line type="monotone" dataKey="humidity" stroke="#ff6f00" /> <LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
<Line type="monotone" dataKey="brightness" stroke="#ffd500" /> <Line type="monotone" dataKey="temperature" stroke="#10b5de" />
<Line type="monotone" dataKey="moisture" stroke="#1c4399" /> <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> <XAxis dataKey="timestamp" />
<XAxis dataKey="timestamp" /> <YAxis />
<YAxis /> <Tooltip />
<Tooltip /> <Legend />
<Legend /> </LineChart>
</LineChart> </ResponsiveContainer>
</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="timestamp" />
<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="timestamp" />
<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="timestamp" />
<YAxis />
<Tooltip />
<Legend />
</LineChart>
</ResponsiveContainer>
</Col>
</Row>
</> </>
) )
} }