Make data in chart and cardDeck responsive (live from DB).

.meteor/packages

@@ -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

.meteor/versions

@@ -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

client/main.jsx

@@ -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);
 });

imports/api/sensorData.js

@@ -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;
-}

imports/ui/App.jsx

@@ -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>

imports/ui/Home.jsx

@@ -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 />

imports/ui/SensorCardDeck.jsx

@@ -1,31 +1,37 @@
 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.Title>Brightness</Card.Title>
-                    <Card.Text>{sensorCardValues[2]} %</Card.Text>
+                    <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>

mongo-mqtt.js

@@ -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 {
 
     }