Doplnenie grafov teploty, tlaku, vlhkosti

resources/js/app.js

@@ -29,7 +29,10 @@ Vue.component('example-component', require('./components/ExampleComponent.vue').
  */
 
 import VueThermometer from 'vuejs-thermometer'
-Vue.use(VueThermometer)
+Vue.use(VueThermometer);
+
+import VueDygraphs from 'vue-dygraphs';
+Vue.use(VueDygraphs);
 
 //(function () {
     var app = new Vue({
@@ -41,7 +44,32 @@ Vue.use(VueThermometer)
         humidity: null,
         pressure: null,
         voltage: null,
-        time: null
+        time: null,
+        temp_options: {
+          legend: 'always',
+          title: 'Teplotný graf',
+          xlabel: 'Dátum',
+          labels: ['Dátum','Teplota'],
+          ylabel: 'Stupeň',
+          fillGraph: true  
+        },
+        hum_options: {
+          legend: 'always',
+          title: 'Vlhkosť graf',
+          xlabel: 'Dátum',
+          labels: ['Dátum','Vlhkosť'],
+          ylabel: 'Percent',
+          fillGraph: true  
+        },
+        p_options: {
+          legend: 'always',
+          title: 'Tlak graf',
+          xlabel: 'Dátum',
+          labels: ['Dátum','Tlak'],
+          ylabel: 'Tlak',
+          fillGraph: true  
+        },
+        series: { "temperature" : [], "humidity" : [], "pressure": [] },
       },
       mounted: function () {
         console.log('MOUNTED');
@@ -74,6 +102,24 @@ Vue.use(VueThermometer)
             console.log(error);
         });
 
+      let vts = ["temperature","humidity","pressure"];
+      for (var t in vts) {
+        console.log("t=",vts[t]);
+        axios.get('/data/get', {
+          params: {
+            type: vts[t],
+          }
+        })
+        .then(function (response) {
+            console.log("GET DATA");
+            console.log(response.config.params.type);
+            let data = response.data.map( x => [moment(x[0]).toDate(),x[1]] );
+            app.series[response.config.params.type] = data;
+        })
+        .catch(function (error) {
+            console.log(error);
+        });
+      }
 
       },
     }

resources/sass/app.scss

@@ -6,3 +6,6 @@
 
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
+
+// dyGraphs
+@import '~dygraphs/dist/dygraph';

resources/views/welcome.blade.php

@@ -16,12 +16,10 @@
                 color: #636b6f;
                 font-family: 'Nunito', sans-serif;
                 font-weight: 200;
-                height: 100vh;
                 margin: 0;
             }
 
             .full-height {
-                height: 100vh;
             }
 
             .flex-center {
@@ -42,6 +40,7 @@
 
             .content {
                 text-align: center;
+                width: 90%;
             }
 
             .title {
@@ -99,9 +98,14 @@
                                 <li>Tlak: @{{pressure}} khPa</li>
                                 <li>Napätie: @{{voltage}} V</li>
                                 <li>Čas: @{{time}}</li>
+                           
                             </ul>
                         </div>
                     </div>
+                    <dygraphs ref="dgt" :graph-data="series['temperature']" :graph-options="temp_options"></dygraphs>
+                    <dygraphs ref="dgh" :graph-data="series['humidity']" :graph-options="hum_options"></dygraphs>
+                    <dygraphs ref="dgp" :graph-data="series['pressure']" :graph-options="p_options"></dygraphs>
+
                 </div> 
                 
             </div>