Make data in chart and cardDeck responsive (live from DB).
This commit is contained in:
Andrés Uribe Stengel
parent
8f88ebe4a4
commit
8590ff017f
@ -20,3 +20,4 @@ shell-server@0.5.0 # Server-side component of the `meteor shell` comm
|
||||
|
||||
insecure@1.0.7 # Allow all DB writes from clients (for prototyping)
|
||||
static-html
|
||||
react-meteor-data
|
||||
|
||||
@ -53,6 +53,7 @@ npm-mongo@3.7.1
|
||||
ordered-dict@1.1.0
|
||||
promise@0.11.2
|
||||
random@1.2.0
|
||||
react-meteor-data@2.1.1
|
||||
reactive-var@1.0.11
|
||||
reload@1.3.0
|
||||
retry@1.1.0
|
||||
|
||||
@ -23,11 +23,7 @@ Meteor.startup(() => {
|
||||
Meteor.subscribe('sensorDataCollection');
|
||||
}
|
||||
|
||||
Meteor.setTimeout(function() {
|
||||
console.log(SensorDataCollection.find().fetch());
|
||||
}, 500);
|
||||
|
||||
Meteor.setTimeout(function() {
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
}, 500);
|
||||
}, 1000);
|
||||
});
|
||||
@ -1,14 +0,0 @@
|
||||
import {SensorDataCollection} from '../../client/main'
|
||||
|
||||
export function getAllSensorData() {
|
||||
const sensorDataDocuments = SensorDataCollection.find();
|
||||
|
||||
var sensorDatas = [];
|
||||
|
||||
sensorDataDocuments.forEach((sensorData) => {
|
||||
var brightnessInPercent = (sensorData.brightness/54000*100).toFixed(0);
|
||||
sensorDatas.push({ name: sensorData.timestamp, temperature: sensorData.temperature, humidity: sensorData.humidity, light: brightnessInPercent, moisture: sensorData.moisture });
|
||||
});
|
||||
|
||||
return sensorDatas;
|
||||
}
|
||||
@ -4,12 +4,9 @@ import Home from './Home'
|
||||
import About from './About'
|
||||
import Settings from './Settings'
|
||||
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
|
||||
import {getAllSensorData} from "../api/sensorData";
|
||||
|
||||
function App() {
|
||||
|
||||
const exampleData = getAllSensorData();
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavBar/>
|
||||
@ -17,7 +14,7 @@ function App() {
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<Switch>
|
||||
<Route path="/" exact>
|
||||
<Home dummyData={exampleData}></Home>
|
||||
<Home></Home>
|
||||
</Route>
|
||||
<Route path="/settings">
|
||||
<Settings></Settings>
|
||||
|
||||
@ -1,46 +1,26 @@
|
||||
import React, {useEffect, useState} from 'react' // useState to rerender the view each time something changed
|
||||
import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
||||
import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
|
||||
import SensorCardDeck from './SensorCardDeck'
|
||||
import {SensorDataCollection} from "../../client/main";
|
||||
import {useTracker} from 'meteor/react-meteor-data';
|
||||
|
||||
export default function Home(props) {
|
||||
export default function Home() {
|
||||
const sensorData = useTracker(() => {
|
||||
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 10 }).fetch();
|
||||
});
|
||||
|
||||
var updateCardValues = () => {
|
||||
var updatedValues = [
|
||||
props.dummyData[props.dummyData.length - 1].temperature,
|
||||
props.dummyData[props.dummyData.length - 1].humidity,
|
||||
props.dummyData[props.dummyData.length - 1].light,
|
||||
props.dummyData[props.dummyData.length - 1].moisture
|
||||
];
|
||||
return updatedValues;
|
||||
}
|
||||
|
||||
// this data represents the sensor values, they should be initialized empty.. this is just for the simulation when it first renders
|
||||
const [sensorCardValues, setSensorCardValues] = useState(updateCardValues);
|
||||
const [dataHistory, setDataHistory] = useState(props.dummyData); // for init data
|
||||
|
||||
// runs when the app mounts, similiar to componentDidMount and componentDidUpdate
|
||||
// if you give a prop to useEffect, it also runs each time this prop changes..
|
||||
useEffect(() => {
|
||||
// const data = await fetch('api-address') // fetch data from db here and destructure it
|
||||
console.log("data is changing, start rerender..")
|
||||
setDataHistory(props.dummyData);
|
||||
setSensorCardValues(updateCardValues);
|
||||
}, [])
|
||||
|
||||
// render the data
|
||||
// make sensorCarddeck responsive
|
||||
return (
|
||||
<>
|
||||
<SensorCardDeck sensorCardValues={sensorCardValues}/>
|
||||
<SensorCardDeck/>
|
||||
|
||||
<ResponsiveContainer width='100%' height={400}>
|
||||
<LineChart data={dataHistory} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
|
||||
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
|
||||
<Line type="monotone" dataKey="temperature" stroke="#10b5de" />
|
||||
<Line type="monotone" dataKey="humidity" stroke="#ff6f00" />
|
||||
<Line type="monotone" dataKey="light" stroke="#ffd500" />
|
||||
<Line type="monotone" dataKey="brightness" stroke="#ffd500" />
|
||||
<Line type="monotone" dataKey="moisture" stroke="#1c4399" />
|
||||
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
||||
<XAxis dataKey="name" />
|
||||
<XAxis dataKey="timestamp" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
@ -49,4 +29,4 @@ export default function Home(props) {
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,33 +1,39 @@
|
||||
import React from 'react'
|
||||
import { Card, CardDeck } from 'react-bootstrap';
|
||||
import {SensorDataCollection} from "../../client/main";
|
||||
import {useTracker} from 'meteor/react-meteor-data';
|
||||
|
||||
export default function SensorCardDeck() {
|
||||
const sensorData = useTracker(() => {
|
||||
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 1 }).fetch();
|
||||
});
|
||||
|
||||
export default function SensorCardDeck( {sensorCardValues} ) {
|
||||
return (
|
||||
<CardDeck>
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<Card.Title>Temperature</Card.Title>
|
||||
<Card.Text>{sensorCardValues[0]} °C</Card.Text>
|
||||
<Card.Text>{sensorData[0].temperature} °C</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<Card.Title>Humidity</Card.Title>
|
||||
<Card.Text>{sensorCardValues[1]} %</Card.Text>
|
||||
<Card.Text>{sensorData[0].humidity} %</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<Card.Title>Light</Card.Title>
|
||||
<Card.Text>{sensorCardValues[2]} %</Card.Text>
|
||||
<Card.Title>Brightness</Card.Title>
|
||||
<Card.Text>{sensorData[0].brightness} lux</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<Card.Title>Moisture</Card.Title>
|
||||
<Card.Text>{sensorCardValues[3]} %</Card.Text>
|
||||
<Card.Text>{sensorData[0].moisture} %</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</CardDeck>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -23,19 +23,29 @@ async function startMqttObserver() {
|
||||
|
||||
function messageCallback(collection) {
|
||||
return function (topic, message) {
|
||||
// console.log('topic:', topic.toString(), 'message:', message.toString())
|
||||
let topicElements = topic.split('/');
|
||||
const type = topicElements.pop();
|
||||
const id = topicElements.pop();
|
||||
//console.log(id, type);
|
||||
|
||||
var date = new Date;
|
||||
var time;
|
||||
|
||||
if (date.getHours() <= 9) {time = "0" + date.getHours();} else {
|
||||
time = date.getHours();
|
||||
}
|
||||
if (date.getMinutes() <= 9) {time = time + ":0" + date.getMinutes();} else {
|
||||
time = time + ":" + date.getMinutes();
|
||||
}
|
||||
if (date.getSeconds() <= 9) {time = time + ":0" + date.getSeconds();} else {
|
||||
time = time + ":" + date.getSeconds();
|
||||
}
|
||||
|
||||
let doc = {
|
||||
device_id: id,
|
||||
timestamp: new Date,
|
||||
timestamp: time,
|
||||
}
|
||||
try {
|
||||
doc = _.merge(doc, JSON.parse(message));
|
||||
//doc.sensordata = JSON.parse(message);
|
||||
} catch {
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user