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 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();
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 10 }).fetch().reverse();
});
return (
<>
<SensorCardDeck/>
<ResponsiveContainer width='100%' height={400}>
<LineChart data={sensorData} 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="brightness" stroke="#ffd500" />
<Line type="monotone" dataKey="moisture" stroke="#1c4399" />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey="timestamp" />
<YAxis />
<Tooltip />
<Legend />
</LineChart>
</ResponsiveContainer>
<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="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="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>
</>
)
}