Pridana statistika v js

public/js/app.js

@@ -1932,6 +1932,58 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/StatisticsComponent.vue?vue&type=script&lang=js&":
+/*!******************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/StatisticsComponent.vue?vue&type=script&lang=js& ***!
+  \******************************************************************************************************************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+//
+//
+//
+//
+//
+//
+/* harmony default export */ __webpack_exports__["default"] = ({
+  props: ['data'],
+  name: 'Stats',
+  data: function data() {
+    return {
+      params: {
+        data: [['', 'Min', 'Max', 'Avg', 'Current']],
+        header: 'row',
+        border: true,
+        stripe: true
+      }
+    };
+  },
+  mounted: function mounted() {
+    console.log("Mounted");
+    console.log(this.data);
+    var min = null;
+    var max = null;
+    var avg = 0;
+    var current = null;
+
+    for (var index = 0; index < this.data.length; ++index) {
+      var row = this.data[index];
+      var val = row[1];
+      if (min == null) min = val;else if (min > val) min = val;
+      if (max == null) max = val;else if (max < val) max = val;
+      avg = avg + val;
+      current = val;
+    }
+
+    avg = avg / this.data.length;
+    this.params.data.push(['Hodnota', min, max, avg.toFixed(2), current]);
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/bootstrap/dist/js/bootstrap.js":
 /*!*****************************************************!*\
   !*** ./node_modules/bootstrap/dist/js/bootstrap.js ***!
@@ -68421,6 +68473,34 @@ render._withStripped = true
 
 
 
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/StatisticsComponent.vue?vue&type=template&id=3ec93802&":
+/*!**********************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/StatisticsComponent.vue?vue&type=template&id=3ec93802& ***!
+  \**********************************************************************************************************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "div",
+    [_c("vue-table-dynamic", { attrs: { params: _vm.params } })],
+    1
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+
 /***/ }),
 
 /***/ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js":
@@ -84539,7 +84619,8 @@ Vue.use(vue_dygraphs__WEBPACK_IMPORTED_MODULE_1__["default"]);
 
 Vue.use(vue_table_dynamic__WEBPACK_IMPORTED_MODULE_2___default.a);
 
-Vue.use(vue_datetime__WEBPACK_IMPORTED_MODULE_3___default.a); //(function () {
+Vue.use(vue_datetime__WEBPACK_IMPORTED_MODULE_3___default.a);
+Vue.component('stats-table', __webpack_require__(/*! ./components/StatisticsComponent.vue */ "./resources/js/components/StatisticsComponent.vue")["default"]); //(function () {
 
 var app = new Vue({
   el: '#app',
@@ -84550,6 +84631,7 @@ var app = new Vue({
     time: null,
     startdate: null,
     enddate: null,
+    componentKey: 0,
     params: {
       data: [],
       border: true,
@@ -84636,6 +84718,7 @@ var app = new Vue({
             return [moment(x[0]).toDate(), x[1]];
           });
           app.series[response.config.params.type] = data;
+          app.componentKey += 1;
         })["catch"](function (error) {
           console.log(error);
         });
@@ -84758,6 +84841,75 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./resources/js/components/StatisticsComponent.vue":
+/*!*********************************************************!*\
+  !*** ./resources/js/components/StatisticsComponent.vue ***!
+  \*********************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _StatisticsComponent_vue_vue_type_template_id_3ec93802___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./StatisticsComponent.vue?vue&type=template&id=3ec93802& */ "./resources/js/components/StatisticsComponent.vue?vue&type=template&id=3ec93802&");
+/* harmony import */ var _StatisticsComponent_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./StatisticsComponent.vue?vue&type=script&lang=js& */ "./resources/js/components/StatisticsComponent.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+
+
+
+
+/* normalize component */
+
+var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+  _StatisticsComponent_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _StatisticsComponent_vue_vue_type_template_id_3ec93802___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _StatisticsComponent_vue_vue_type_template_id_3ec93802___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/StatisticsComponent.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/StatisticsComponent.vue?vue&type=script&lang=js&":
+/*!**********************************************************************************!*\
+  !*** ./resources/js/components/StatisticsComponent.vue?vue&type=script&lang=js& ***!
+  \**********************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_StatisticsComponent_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./StatisticsComponent.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/StatisticsComponent.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_StatisticsComponent_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/StatisticsComponent.vue?vue&type=template&id=3ec93802&":
+/*!****************************************************************************************!*\
+  !*** ./resources/js/components/StatisticsComponent.vue?vue&type=template&id=3ec93802& ***!
+  \****************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_StatisticsComponent_vue_vue_type_template_id_3ec93802___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./StatisticsComponent.vue?vue&type=template&id=3ec93802& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/StatisticsComponent.vue?vue&type=template&id=3ec93802&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_StatisticsComponent_vue_vue_type_template_id_3ec93802___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_StatisticsComponent_vue_vue_type_template_id_3ec93802___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
 /***/ }),
 
 /***/ "./resources/sass/app.scss":

resources/js/app.js

@@ -40,6 +40,7 @@ Vue.use(VueTableDynamic);
 import Datetime from 'vue-datetime'
 Vue.use(Datetime);
 
+Vue.component('stats-table', require('./components/StatisticsComponent.vue').default);
 
 //(function () {
     var app = new Vue({
@@ -51,6 +52,7 @@ Vue.use(Datetime);
         time: null,
         startdate: null,
         enddate: null,
+        componentKey: 0,
         params: {
           data: [],     
           border: true,
@@ -138,6 +140,7 @@ Vue.use(Datetime);
             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;
+            app.componentKey += 1;
         })
         .catch(function (error) {
             console.log(error);

resources/js/components/StatisticsComponent.vue

@@ -0,0 +1,48 @@
+<template>
+   <div>
+     <vue-table-dynamic :params="params"></vue-table-dynamic>
+   </div>
+</template>
+
+<script>
+export default {
+  props: ['data'],
+  name: 'Stats',
+  data() {
+    return {
+      params: {
+        data: [
+          ['', 'Min', 'Max', 'Avg', 'Current'],
+        ],
+        header: 'row',
+        border: true,
+        stripe: true
+      }
+    }
+  },
+  mounted: function () {
+      console.log("Mounted");
+      console.log(this.data);
+      let min = null;
+      let max = null;
+      let avg = 0;
+      let current = null;
+      for (var index = 0; index < this.data.length; ++index) {
+        let row = this.data[index];
+        let val = row[1];
+        
+        if (min == null) min = val;
+        else if (min > val) min = val;
+
+        if (max == null) max = val;
+        else if (max < val) max = val;
+
+        avg = avg + val;
+        current = val;
+      }
+      avg = avg / this.data.length;
+
+      this.params.data.push(['Hodnota',min,max,avg.toFixed(2),current]);
+  }
+}
+</script>

resources/views/welcome.blade.php

@@ -122,9 +122,12 @@
                     </div>
                     
                     <dygraphs ref="dgt" :graph-data="series['temperature']" :graph-options="options['temperature']"></dygraphs>
+                    <stats-table :data="series['temperature']" :key="componentKey"></stats-table>
                     <dygraphs ref="dgh" :graph-data="series['humidity']" :graph-options="options['humidity']"></dygraphs>
+                    <stats-table :data="series['humidity']" :key="componentKey"></stats-table>
                     <dygraphs ref="dgp" :graph-data="series['pressure']" :graph-options="options['pressure']"></dygraphs>
-
+                    <stats-table :data="series['pressure']" :key="componentKey"></stats-table>
+                
                 </div> 
                 
             </div>