137 lines
6.0 KiB
JavaScript
137 lines
6.0 KiB
JavaScript
import React from 'react'
|
|
import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
|
|
import SensorCardDeck from './SensorCardDeck'
|
|
import {SensorDataCollection, ActiveDeviceCollection, ConfiguredDevicesCollection} from "../../client/main";
|
|
import {useTracker} from 'meteor/react-meteor-data';
|
|
import { Col, Form, Row, Card, CardDeck } from "react-bootstrap";
|
|
import moment from 'moment'
|
|
|
|
export default function Overview() {
|
|
const activeDevice = useTracker(() => {
|
|
return ActiveDeviceCollection.find().fetch()[0];
|
|
});
|
|
|
|
const configuredDevices = useTracker(() => {
|
|
return ConfiguredDevicesCollection.find().fetch();
|
|
});
|
|
|
|
const sensorData = useTracker(() => {
|
|
if (activeDevice === null || activeDevice === undefined) {
|
|
return [];
|
|
} else {
|
|
return SensorDataCollection.find({device_id: activeDevice.deviceId}, {
|
|
sort: {timestamp: -1},
|
|
limit: 1441
|
|
}).fetch().reverse();
|
|
}
|
|
});
|
|
|
|
const handleChange = (e) => {
|
|
if (e.target.value === "") {
|
|
console.log("No device selected!");
|
|
} else {
|
|
var doc = ActiveDeviceCollection.findOne({deviceId: activeDevice.deviceId});
|
|
ActiveDeviceCollection.update({_id: doc._id}, {$set: {deviceId: e.target.value}});
|
|
}
|
|
}
|
|
|
|
const getLabelFromStamp = (x) => {
|
|
return moment(x.timestamp).format("HH:mm");
|
|
}
|
|
|
|
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 (
|
|
<>
|
|
<br></br>
|
|
<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>
|
|
{configuredDevices.map((devices, index) => {
|
|
return <option key={index} value={devices.deviceId}>{devices.alias}</option>
|
|
})}
|
|
</Form.Control>
|
|
</Form.Group>
|
|
</Form>
|
|
</Col>
|
|
<Col>
|
|
<h6>active device: {ConfiguredDevicesCollection.findOne({deviceId: activeDevice.deviceId}) === undefined ? "No device selected" : ConfiguredDevicesCollection.findOne({deviceId: activeDevice.deviceId}).alias}</h6>
|
|
</Col>
|
|
</Row>
|
|
|
|
<SensorCardDeck/>
|
|
|
|
<Row>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={325}>
|
|
<LineChart data={sensorData.filter(el => el.temperature !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
|
|
<Line type="monotone" dataKey="temperature" stroke="#10b5de"/>
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey={getLabelFromStamp}/>
|
|
<YAxis/>
|
|
<Tooltip/>
|
|
<Legend/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={325}>
|
|
<LineChart data={sensorData.filter(el => el.humidity !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
|
|
<Line type="monotone" dataKey="humidity" stroke="#ff6f00"/>
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey={getLabelFromStamp}/>
|
|
<YAxis/>
|
|
<Tooltip/>
|
|
<Legend/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={325}>
|
|
<LineChart data={sensorData.filter(el => el.brightness !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
|
|
<Line type="monotone" dataKey="brightness" stroke="#ffd500"/>
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey={getLabelFromStamp}/>
|
|
<YAxis/>
|
|
<Tooltip/>
|
|
<Legend/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
<Col>
|
|
<ResponsiveContainer width='100%' height={325}>
|
|
<LineChart data={sensorData.filter(el => el.moisture !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
|
|
<Line type="monotone" dataKey="moisture" stroke="#1c4399"/>
|
|
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
|
<XAxis dataKey={getLabelFromStamp}/>
|
|
<YAxis/>
|
|
<Tooltip/>
|
|
<Legend/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
)
|
|
}
|
|
} |