Doplnenie grafov teploty, tlaku, vlhkosti

app/Http/Controllers/MeasurementController.php

@@ -5,8 +5,26 @@ namespace App\Http\Controllers;
 use Illuminate\Http\Request;
 use Carbon\Carbon;
 
+
 class MeasurementController extends Controller
 {
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function get(Request $request)
+    {
+        $type = $request->input('type', 'temperature');
+        $q = sprintf("select time,value from bme280_value where host='balkon' and type='%s' and time > now()-1d",$type);
+        $result = \InfluxDB::query($q);
+        $points = $result->getPoints();
+        $a = [];
+        foreach ($points as $p) {
+            $a[] = [ Carbon::createFromFormat("Y-m-d\TH:i:s.u+",$p["time"],'UTC'), $p["value"]];
+        }
+        return response()->json($a);
+    }
     /**
      * Display a listing of the resource.
      *

package.json

@@ -25,6 +25,7 @@
     },
     "dependencies": {
         "moment": "^2.29.1",
+        "vue-dygraphs": "^0.1.2",
         "vuejs-thermometer": "^0.1.3"
     }
 }

public/css/app.css

@@ -10903,3 +10903,121 @@ a.text-dark:focus {
   }
 }
 
+/**
+ * Default styles for the dygraphs charting library.
+ */
+
+.dygraph-legend {
+  position: absolute;
+  font-size: 14px;
+  z-index: 10;
+  width: 250px;
+  /* labelsDivWidth */
+  /*
+  dygraphs determines these based on the presence of chart labels.
+  It might make more sense to create a wrapper div around the chart proper.
+  top: 0px;
+  right: 2px;
+  */
+  background: white;
+  line-height: normal;
+  text-align: left;
+  overflow: hidden;
+}
+
+/* styles for a solid line in the legend */
+
+.dygraph-legend-line {
+  display: inline-block;
+  position: relative;
+  bottom: 0.5ex;
+  padding-left: 1em;
+  height: 1px;
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  /* border-bottom-color is set based on the series color */
+}
+
+/* styles for a dashed line in the legend, e.g. when strokePattern is set */
+
+.dygraph-legend-dash {
+  display: inline-block;
+  position: relative;
+  bottom: 0.5ex;
+  height: 1px;
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  /* border-bottom-color is set based on the series color */
+  /* margin-right is set based on the stroke pattern */
+  /* padding-left is set based on the stroke pattern */
+}
+
+.dygraph-roller {
+  position: absolute;
+  z-index: 10;
+}
+
+/* This class is shared by all annotations, including those with icons */
+
+.dygraph-annotation {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+}
+
+/* This class only applies to annotations without icons */
+
+/* Old class name: .dygraphDefaultAnnotation */
+
+.dygraph-default-annotation {
+  border: 1px solid black;
+  background-color: white;
+  text-align: center;
+}
+
+.dygraph-axis-label {
+  /* position: absolute; */
+  /* font-size: 14px; */
+  z-index: 10;
+  line-height: normal;
+  overflow: hidden;
+  color: black;
+  /* replaces old axisLabelColor option */
+}
+
+.dygraph-title {
+  font-weight: bold;
+  z-index: 10;
+  text-align: center;
+  /* font-size: based on titleHeight option */
+}
+
+.dygraph-xlabel {
+  text-align: center;
+  /* font-size: based on xLabelHeight option */
+}
+
+/* For y-axis label */
+
+.dygraph-label-rotate-left {
+  text-align: center;
+  /* See http://caniuse.com/#feat=transforms2d */
+  transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+}
+
+/* For y2-axis label */
+
+.dygraph-label-rotate-right {
+  text-align: center;
+  /* See http://caniuse.com/#feat=transforms2d */
+  transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+}
+

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>

routes/web.php

@@ -16,4 +16,5 @@ Route::get('/', function () {
 });
 
 Route::get('/data',"MeasurementController@index");
+Route::get('/data/get',"MeasurementController@get");
 

yarn.lock

@@ -2544,6 +2544,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+dygraphs@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/dygraphs/-/dygraphs-2.1.0.tgz#2fbfd2c803ead02307df3faf8d4dd3ef55cb2075"
+  integrity sha1-L7/SyAPq0CMH3z+vjU3T71XLIHU=
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -6733,6 +6738,13 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-dygraphs@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/vue-dygraphs/-/vue-dygraphs-0.1.2.tgz#a812bd4156242bfc5539ce84e74b836176a30f67"
+  integrity sha512-kC+3amRRf9GIMN1wpM0eIsmq2v7zzLYwaVjqKUgs3HDJQR9MCQkhqW64KDy1eXf4YhuGczL6YVKtHKDciX4UQw==
+  dependencies:
+    dygraphs "^2.1.0"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"