Pridana statistika v js

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>