125 lines
5.1 KiB
JavaScript
125 lines
5.1 KiB
JavaScript
import React from 'react'
|
|
import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
|
|
import SensorCardDeck from './SensorCardDeck'
|
|
import {SensorDataCollection, ActiveDeviceCollection} from "../../client/main";
|
|
import {useTracker} from 'meteor/react-meteor-data';
|
|
|
|
import {Col, Form, Row} from "react-bootstrap";
|
|
|
|
export default function Home() {
|
|
|
|
const uniqueEspNames = _.uniq(SensorDataCollection.find({}, {
|
|
sort: {device_id: 1}, fields: {device_id: true}
|
|
}).fetch().map(function(x) {
|
|
return x.device_id;
|
|
}), true);
|
|
|
|
const deviceName = useTracker(() => {
|
|
return ActiveDeviceCollection.find().fetch()[0];
|
|
});
|
|
|
|
const sensorData = useTracker(() => {
|
|
return SensorDataCollection.find({ device_id: deviceName.deviceName }, { sort: { timestamp: -1 }, limit: 61 }).fetch().reverse();
|
|
});
|
|
|
|
const handleChange = (e) => {
|
|
if (e.target.value === "") {console.log("No device selected!");} else {
|
|
var doc = ActiveDeviceCollection.findOne({ deviceName: deviceName.deviceName });
|
|
ActiveDeviceCollection.update({ _id: doc._id }, {$set:{deviceName: e.target.value}});
|
|
}
|
|
}
|
|
|
|
|
|
/*if (sensorData.length <= 0) {
|
|
return (
|
|
<CardDeck>
|
|
<Card>
|
|
<Card.Body>
|
|
<Card.Title>Loading!</Card.Title>
|
|
<Card.Text>Please wait...</Card.Text>
|
|
</Card.Body>
|
|
</Card>
|
|
</CardDeck>
|
|
)
|
|
} else {}*/
|
|
return (
|
|
<>
|
|
<Row>
|
|
<Col xs lg="2">
|
|
<h4>Devices:</h4>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xs lg="2">
|
|
<Form>
|
|
<Form.Group>
|
|
<Form.Control as="select" type="text" onChange={handleChange}>
|
|
<option></option>
|
|
{uniqueEspNames.map((espName, index) =>{
|
|
return <option key={index} value={espName}>{espName}</option>
|
|
})}
|
|
</Form.Control>
|
|
</Form.Group>
|
|
</Form>
|
|
</Col>
|
|
<Col>
|
|
<h6>active device: {deviceName.deviceName}</h6>
|
|
</Col>
|
|
</Row>
|
|
|
|
<SensorCardDeck/>
|
|
<Row>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={350}>
|
|
<LineChart data={sensorData} margin={{ top: 50, right: 50, bottom: 25, left: 5 }}>
|
|
<Line type="monotone" dataKey="temperature" stroke="#10b5de" />
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey="timeAsString" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={350}>
|
|
<LineChart data={sensorData} margin={{ top: 50, right: 50, bottom: 25, left: 5 }}>
|
|
<Line type="monotone" dataKey="humidity" stroke="#ff6f00" />
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey="timeAsString" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={350}>
|
|
<LineChart data={sensorData} margin={{ top: 50, right: 50, bottom: 25, left: 5 }}>
|
|
<Line type="monotone" dataKey="brightness" stroke="#ffd500" />
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey="timeAsString" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={350}>
|
|
<LineChart data={sensorData} margin={{ top: 50, right: 50, bottom: 25, left: 5 }}>
|
|
<Line type="monotone" dataKey="moisture" stroke="#1c4399" />
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey="timeAsString" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
)
|
|
} |