131 lines
5.4 KiB
JavaScript
131 lines
5.4 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) || (deviceName.length <= 0) || (uniqueEspNames.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>
|
|
</>
|
|
)
|
|
}
|
|
} |