improved home view

.meteor/packages

@@ -22,3 +22,4 @@ insecure@1.0.7                # Allow all DB writes from clients (for prototypin
 static-html
 react-meteor-data
 underscore
+momentjs:moment

.meteor/versions

@@ -45,6 +45,7 @@ mobile-status-bar@1.1.0
 modern-browsers@0.1.5
 modules@0.15.0
 modules-runtime@0.12.0
+momentjs:moment@2.27.0
 mongo@1.10.0
 mongo-decimal@0.1.1
 mongo-dev-server@1.1.0

imports/ui/Home.jsx

@@ -5,6 +5,7 @@ import {SensorDataCollection, ActiveDeviceCollection} from "../../client/main";
 import {useTracker} from 'meteor/react-meteor-data';
 import { Col, Form, Row, Card, CardDeck } from "react-bootstrap";
 import { getAllEspNames } from "../api/espNames";
+import moment from 'moment'
 
 export default function Home() {
     const deviceName = useTracker(() => {
@@ -31,6 +32,9 @@ export default function Home() {
         }
     }
 
+    const getLabelFromStamp = (x) => {
+        return moment(x.timestamp).format("HH:mm");
+    }
 
     if ((sensorData.length <= 0)) {
         return (
@@ -75,10 +79,10 @@ export default function Home() {
                 <Row>
                     <Col>
                         <ResponsiveContainer width='100%' height={325}>
-                            <LineChart data={sensorData} 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"/>
                                 <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
-                                <XAxis dataKey="timeAsString"/>
+                                <XAxis dataKey={getLabelFromStamp}/>
                                 <YAxis/>
                                 <Tooltip/>
                                 <Legend/>
@@ -87,10 +91,10 @@ export default function Home() {
                     </Col>
                     <Col>
                         <ResponsiveContainer width='100%' height={325}>
-                            <LineChart data={sensorData} 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"/>
                                 <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
-                                <XAxis dataKey="timeAsString"/>
+                                <XAxis dataKey={getLabelFromStamp}/>
                                 <YAxis/>
                                 <Tooltip/>
                                 <Legend/>
@@ -101,10 +105,10 @@ export default function Home() {
                 <Row>
                     <Col>
                         <ResponsiveContainer width='100%' height={325}>
-                            <LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
+                            <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="timeAsString"/>
+                                <XAxis dataKey={getLabelFromStamp}/>
                                 <YAxis/>
                                 <Tooltip/>
                                 <Legend/>
@@ -113,10 +117,10 @@ export default function Home() {
                     </Col>
                     <Col>
                         <ResponsiveContainer width='100%' height={325}>
-                            <LineChart data={sensorData} 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"/>
                                 <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
-                                <XAxis dataKey="timeAsString"/>
+                                <XAxis dataKey={getLabelFromStamp}/>
                                 <YAxis/>
                                 <Tooltip/>
                                 <Legend/>

mongo-mqtt.js

@@ -6,7 +6,7 @@ const dbClient = new MongoClient("mongodb://garden:99009911@cloud.timovolkmann.d
 
 startMqttObserver()
 
-async function startMqttObserver() {
+export default async function startMqttObserver() {
   console.log("setup connections...")
   // setup mongodb
   dbClient.connect(err => {

package-lock.json

@@ -97,8 +97,7 @@
     "bson": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/bson/-/bson-1.1.4.tgz",
-      "integrity": "sha512-S/yKGU1syOMzO86+dGpg2qGoDL0zvzcb262G+gqEy6TgP6rt6z6qxSFX/8X6vLC91P7G7C3nLs0+bvDzmvBA3Q==",
+      "integrity": "sha512-S/yKGU1syOMzO86+dGpg2qGoDL0zvzcb262G+gqEy6TgP6rt6z6qxSFX/8X6vLC91P7G7C3nLs0+bvDzmvBA3Q=="
-      "dev": true
     },
     "buffer-from": {
       "version": "1.1.1",
@@ -259,8 +258,7 @@
     "denque": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
-      "integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ==",
+      "integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ=="
-      "dev": true
     },
     "dom-helpers": {
       "version": "3.4.0",
@@ -591,7 +589,6 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
       "integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==",
-      "dev": true,
       "optional": true
     },
     "meteor-node-stubs": {
@@ -1177,11 +1174,15 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
+    "moment": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
+    },
     "mongodb": {
       "version": "3.5.9",
       "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.5.9.tgz",
       "integrity": "sha512-vXHBY1CsGYcEPoVWhwgxIBeWqP3dSu9RuRDsoLRPTITrcrgm1f0Ubu1xqF9ozMwv53agmEiZm0YGo+7WL3Nbug==",
-      "dev": true,
       "requires": {
         "bl": "^2.2.0",
         "bson": "^1.1.4",
@@ -1195,7 +1196,6 @@
           "version": "2.2.0",
           "resolved": "https://registry.npmjs.org/bl/-/bl-2.2.0.tgz",
           "integrity": "sha512-wbgvOpqopSr7uq6fJrLH8EsvYMJf9gzfo2jCsL2eTy75qXPukA4pCgHamOQkZtY5vmfVtjB+P3LNlMHW5CEZXA==",
-          "dev": true,
           "requires": {
             "readable-stream": "^2.3.5",
             "safe-buffer": "^5.1.1"
@@ -1613,7 +1613,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz",
       "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==",
-      "dev": true,
       "requires": {
         "resolve-from": "^2.0.0",
         "semver": "^5.1.0"
@@ -1627,8 +1626,7 @@
     "resolve-from": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-2.0.0.tgz",
-      "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c=",
+      "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c="
-      "dev": true
     },
     "resolve-pathname": {
       "version": "3.0.0",
@@ -1644,7 +1642,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/saslprep/-/saslprep-1.0.3.tgz",
       "integrity": "sha512-/MY/PEMbk2SuY5sScONwhUDsV2p77Znkb/q3nSVstq/yQzYJOH/Azh29p9oJLsl3LnQwSvZDKagDGBsBwSooag==",
-      "dev": true,
       "optional": true,
       "requires": {
         "sparse-bitfield": "^3.0.3"
@@ -1662,14 +1659,12 @@
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-      "dev": true
     },
     "sparse-bitfield": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
       "integrity": "sha1-/0rm5oZWBWuks+eSqzM004JzyhE=",
-      "dev": true,
       "optional": true,
       "requires": {
         "memory-pager": "^1.0.2"

package.json

@@ -15,13 +15,15 @@
     "jquery": "^3.4.1",
     "lodash": "^4.17.19",
     "meteor-node-stubs": "^1.0.0",
+    "moment": "^2.27.0",
+    "mongodb": "^3.5.9",
+    "mqtt": "^4.1.0",
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "recharts": "^1.8.5",
-    "utf-8-validate": "^5.0.2",
+    "utf-8-validate": "^5.0.2"
-    "mqtt": "^4.1.0"
   },
   "meteor": {
     "mainModule": {
@@ -30,7 +32,5 @@
     },
     "testModule": "tests/main.js"
   },
-  "devDependencies": {
+  "devDependencies": {}
-    "mongodb": "^3.5.9"
-  }
 }

server/main.js

@@ -1,5 +1,6 @@
 import { Meteor } from 'meteor/meteor';
 import { publish } from '../imports/api/mqttApi.js'
+import startMqttObserver from '../mongo-mqtt.js'
 
 var PlantTypesCollection = new Meteor.Collection('plantTypes');
 var SensorDataCollection = new Meteor.Collection('sensorData');
@@ -24,6 +25,8 @@ Meteor.startup(() => {
             return ConfiguredDevicesCollection.find();
         })
 
+        //startMqttObserver()
+
         Meteor.methods({
             'mqttPublish'({ topic, payload }) {
                 publish(topic, payload)