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

Merge branch 'develop' of https://git.it.hs-heilbronn.de/volkmann/smart_garden_server into develop

Browse Source
This commit is contained in:
Andrés Uribe Stengel 2020-07-27 13:21:40 +02:00
commit 19d73a37d5
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
imports/ui/Overview.jsx
View File

@ -5,6 +5,8 @@ import {SensorDataCollection, ActiveDeviceCollection, ConfiguredDevicesCollectio
import {useTracker} from 'meteor/react-meteor-data'; import {useTracker} from 'meteor/react-meteor-data';
import { Col, Form, Row, Card, CardDeck } from "react-bootstrap"; import { Col, Form, Row, Card, CardDeck } from "react-bootstrap";
import moment from 'moment' import moment from 'moment'
import { scaleLog } from 'd3-scale';
const scale = scaleLog().base(Math.E);
export default function Overview() { export default function Overview() {
const activeDevice = useTracker(() => { const activeDevice = useTracker(() => {
@ -37,7 +39,15 @@ export default function Overview() {
} }
const getLabelFromStamp = (x) => { const getLabelFromStamp = (x) => {
return moment(x.timestamp).format("HH:mm"); return moment(x.timestamp).format("LLLL");
// return moment(x.timestamp).format("HH:mm");
}
const brightnessMapper = (x) => {
if (x.brightness < 1) {
x.brightness = 0.1
}
return x;
} }
if ((sensorData.length <= 0)) { if ((sensorData.length <= 0)) {
@ -112,7 +122,7 @@ export default function Overview() {
<LineChart data={sensorData.filter(el => el.temperature !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}> <LineChart data={sensorData.filter(el => el.temperature !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<Line type="monotone" dataKey="temperature" stroke="#10b5de" dot={false}/> <Line type="monotone" dataKey="temperature" stroke="#10b5de" dot={false}/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey={getLabelFromStamp}/> <XAxis dataKey={getLabelFromStamp} tick={false} />
<YAxis/> <YAxis/>
<Tooltip/> <Tooltip/>
<Legend/> <Legend/>
@ -124,7 +134,7 @@ export default function Overview() {
<LineChart data={sensorData.filter(el => el.humidity !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}> <LineChart data={sensorData.filter(el => el.humidity !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<Line type="monotone" dataKey="humidity" stroke="#ff6f00" dot={false}/> <Line type="monotone" dataKey="humidity" stroke="#ff6f00" dot={false}/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey={getLabelFromStamp}/> <XAxis dataKey={getLabelFromStamp} tick={false}/>
<YAxis/> <YAxis/>
<Tooltip/> <Tooltip/>
<Legend/> <Legend/>
@ -135,12 +145,12 @@ export default function Overview() {
<Row> <Row>
<Col> <Col>
<ResponsiveContainer width='100%' height={325}> <ResponsiveContainer width='100%' height={325}>
<LineChart data={sensorData.filter(el => el.brightness !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}> <LineChart data={sensorData.filter(el => el.brightness !== null).map(brightnessMapper)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<Line type="monotone" dataKey="brightness" stroke="#ffd500" dot={false}/> <Line type="monotone" dataKey="brightness" stroke="#ffd500" dot={false}/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey={getLabelFromStamp}/> <XAxis dataKey={getLabelFromStamp} tick={false}/>
<YAxis/> <YAxis scale="log" domain={[0.1, 'dataMax']} tickFormatter={val => Math.round(val)} />
<Tooltip/> <Tooltip formatter={val => Math.round(val)}/>
<Legend/> <Legend/>
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
@ -150,7 +160,7 @@ export default function Overview() {
<LineChart data={sensorData.filter(el => el.moisture !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}> <LineChart data={sensorData.filter(el => el.moisture !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<Line type="monotone" dataKey="moisture" stroke="#1c4399" dot={false}/> <Line type="monotone" dataKey="moisture" stroke="#1c4399" dot={false}/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey={getLabelFromStamp}/> <XAxis dataKey={getLabelFromStamp} tick={false}/>
<YAxis/> <YAxis/>
<Tooltip/> <Tooltip/>
<Legend/> <Legend/>