This commit is contained in:
Andrés Uribe Stengel 2020-07-27 13:21:40 +02:00
commit 19d73a37d5

View File

@ -5,6 +5,8 @@ import {SensorDataCollection, ActiveDeviceCollection, ConfiguredDevicesCollectio
import {useTracker} from 'meteor/react-meteor-data';
import { Col, Form, Row, Card, CardDeck } from "react-bootstrap";
import moment from 'moment'
import { scaleLog } from 'd3-scale';
const scale = scaleLog().base(Math.E);
export default function Overview() {
const activeDevice = useTracker(() => {
@ -37,7 +39,15 @@ export default function Overview() {
}
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)) {
@ -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}}>
<Line type="monotone" dataKey="temperature" stroke="#10b5de" dot={false}/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey={getLabelFromStamp}/>
<XAxis dataKey={getLabelFromStamp} tick={false} />
<YAxis/>
<Tooltip/>
<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}}>
<Line type="monotone" dataKey="humidity" stroke="#ff6f00" dot={false}/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey={getLabelFromStamp}/>
<XAxis dataKey={getLabelFromStamp} tick={false}/>
<YAxis/>
<Tooltip/>
<Legend/>
@ -135,12 +145,12 @@ export default function Overview() {
<Row>
<Col>
<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}/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey={getLabelFromStamp}/>
<YAxis/>
<Tooltip/>
<XAxis dataKey={getLabelFromStamp} tick={false}/>
<YAxis scale="log" domain={[0.1, 'dataMax']} tickFormatter={val => Math.round(val)} />
<Tooltip formatter={val => Math.round(val)}/>
<Legend/>
</LineChart>
</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}}>
<Line type="monotone" dataKey="moisture" stroke="#1c4399" dot={false}/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey={getLabelFromStamp}/>
<XAxis dataKey={getLabelFromStamp} tick={false}/>
<YAxis/>
<Tooltip/>
<Legend/>