Chart will display by date.

phamduylong · Oct 21, 2022 · 8bbf542 · 8bbf542
1 parent cc70343
commit 8bbf542
Show file tree

Hide file tree

Showing 538 changed files with 92,059 additions and 23 deletions.
diff --git a/.idea/abb-ventilation-controller.iml b/.idea/abb-ventilation-controller.iml
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/js/server.js b/js/server.js
@@ -9,6 +9,7 @@ const mqtt = require('mqtt');
 const {SerialPort} = require('serialport');
 const {ReadlineParser} = require("@serialport/parser-readline");
 const {hashPassword, verifyPassword} = require("./pbkdf2");
+const moment = require('moment');
 
 const MongoClient = require('mongodb').MongoClient;
 const url = "mongodb://localhost:27017";
@@ -47,7 +48,7 @@ app.post('/signup', (req, res) => {
     const username = req.body.username;
     const password = req.body.password;
     hashPassword(password).then(hashedPassword => {
-        const newUser = {username, hashedPassword, logins: [], logouts: []};
+        const newUser = {username, hashedPassword, logins: [],logouts: []};
         addUser(newUser).then(msg => res.redirect('/')).catch(err_msg => res.send(err_msg));
     }).catch(err => res.send(err));
 });
@@ -134,8 +135,8 @@ app.get('/user_data', async (req, res) => {
                 const size = user.logins.length;
                 const logins = arr[0].logins.slice(0, size - 1);
                 console.log(logins.length);
-                console.log(user.logouts.length);
-                const data1 = {x: logins, y: user.logouts.map((v, i) => v - logins[i]), t: 0, z: 0};
+                console.log(user.logouts);
+                const data1 = {x: logins, y: user.logouts.map((v, i) => v - logins[i]), logout_time: user.logouts, z: 0};
                 console.log(data1);
                 res.json(data1);
             }

diff --git a/js/views/user_stats.ejs b/js/views/user_stats.ejs
@@ -3,21 +3,26 @@
     <meta charset="UTF-8">
     <title>Temperature Statistics</title>
     <!--Load the AJAX API-->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
-    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+
+
 
 </head>
 
 <body onload="fetching()">
 <div style="width: 50%; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);"><canvas id="chart"></canvas></div>
 <h2 id = "averageTime"></h2>
 <script>
+
+
     function fetching() {
         fetch('/user_data').then(tmp => tmp.json()).then(arr => {
             const x = arr.x;
+            const logout_time = arr.logout_time;
             const y = arr.y;
             const diff = arr.y;
-            /*const time_converted = [];
+            const time_converted = [];
             diff.forEach(ms => {
                 const days = Math.floor(ms / (24*60*60*1000));
                 const daysms = ms % (24*60*60*1000);
@@ -28,33 +33,57 @@
                 const sec = Math.floor(minutesms / 1000);
                 time_converted.push(days + ":" + hours + ":" + minutes + ":" + sec);
             });
-            console.log(time_converted);*/
-            for (let i = 0; i < x.length; ++i) {
+            console.log(arr.y);
+
+
+
+            //TEST DATA
+            // let x2 =  [ 1666343483631,1666347483631, 1666349483631,1666553494355,1667553494355 ] //login time
+            // let x3 =  [ 1666350870717,1666357483631,1666350483631, 1666560945605,1668553494355 ] //logout time
+            // let y2 =  [ 10048,323232 ,443100,123323,1223332 ]
+
+
+            for (let i = 0; i < logout_time.length; ++i) {
                 const d1 = new Date(x[i]);
+                const d3 = new Date(y[i]);
                 const d2 = new Date(x[i+1]);
                 if (d1.getFullYear() === d2.getFullYear()
-                && d1.getMonth() === d2.getMonth()
-                && d1.getDate() === d2.getDate()) {
-                    diff[i] += diff[i+1];
+                    && d1.getMonth() === d2.getMonth()
+                    && d1.getDate() === d2.getDate() ) {
+
+                    y[i] = y[i] + y[i+1];
+                    y.splice(i+1, 1);
                     x.splice(i+1, 1);
-                    diff.splice(i+1 ,1);
+                    console.log(x)
                     i--;
                 }
-                x[i] = new Date(x[i]).toString().substring(4, 21);
 
+
+
+
+
+
+
+
+
+
+            }
+            for(let i=0; i<x.length;i++){
+                x[i] = new Date(x[i]).toString().substring(4,16);
             }
 
-            console.log(diff);
-            console.log(x);
+
+            // console.log(datas);
+
 
             new Chart("chart", {
                 type: "bar",
                 data: {
-                    labels: arr.x,
+                    labels: x,
                     datasets: [
                         {
-                            label: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-                            data: arr.y,
+                            label: x,
+                            data: y,
                             backgroundColor: [
                                 'rgb(255, 99, 132)',
                                 'rgb(255, 159, 64)',
@@ -68,10 +97,39 @@
                         }
                     ]
 
+                },
+                options: {
+                    scales: {
+                        xAxes: {
+                            type: 'time',
+                            time: {
+                                unit: 'day',
+                                tooltipFormat: 'MMM DD'
+                            }
+                        },
+
+                        yAxes: [{
+                            ticks: {
+                                userCallback: function(v) { return epoch_to_hh_mm_ss(v) },
+                                stepSize: 30 * 60,
+                                beginAtZero: true
+                            }
+                        }]
+                    }
+                },
+                tooltips: {
+                    callbacks: {
+                        label: function(tooltipItem, data) {
+                            return data.datasets[tooltipItem.datasetIndex].label + ': ' + epoch_to_hh_mm_ss(tooltipItem.yLabel)
+                        }
+                    }
                 }
             });
 
         })
+        function epoch_to_hh_mm_ss(epoch) {
+            return new Date(epoch).toISOString().substr(12, 7)
+        }
     }
 
 

diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json