From d7e60a3db8f09deef39e2f798eef121be414d40a Mon Sep 17 00:00:00 2001
From: Vitalii Lysak <v.lysak@dunice.net>
Date: Thu, 21 Jul 2022 11:54:11 +0300
Subject: add raw data

---
 src/components/_sila/Global/Chart.vue | 59 +++++++++++++++++++++++++++--------
 1 file changed, 46 insertions(+), 13 deletions(-)

(limited to 'src/components/_sila/Global')

diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue
index bc7d8bd8..73c5a6f2 100644
--- a/src/components/_sila/Global/Chart.vue
+++ b/src/components/_sila/Global/Chart.vue
@@ -1,14 +1,9 @@
 <template>
-  <div>
-    <highcharts :options="chartOptions" />
-    <div v-for="(item, index) in data" :key="index">
-      {{ item.MetricProperty }}
-    </div>
-  </div>
+  <highcharts :options="chartOptions" />
 </template>
 
 <script>
-import { setTime, Series, setCategories } from './helpers';
+import { setTime, setCategories } from './helpers';
 import { Chart } from 'highcharts-vue';
 
 export default {
@@ -39,10 +34,48 @@ export default {
   },
   computed: {
     groupData() {
-      return this.data.reduce(function (rv, x) {
+      let tr = this.data.map((metric) => {
+        let date = new Date(metric.Timestamp);
+        let time =
+          date.getHours() + ':' + String(date.getMinutes()).padStart(2, '0');
+        return {
+          ...metric,
+          Timestamp: time,
+          MetricValue: Math.round(metric.MetricValue),
+        };
+      });
+
+      let group = tr.reduce(function (rv, x) {
         (rv[x['MetricProperty']] = rv[x['MetricProperty']] || []).push(x);
         return rv;
       }, {});
+
+      let arr = Object.keys(group).map((key) => {
+        let groupTime = group[key].reduce(function (rv, x) {
+          (rv[x['Timestamp']] = rv[x['Timestamp']] || []).push(x);
+          return rv;
+        }, {});
+
+        this.timeData = Object.keys(groupTime).slice(-60);
+        console.log('timeData!!!!!!', this.timeData);
+
+        let arr = Object.keys(groupTime).map((key) => {
+          const findAverage = (arr) => {
+            const { length } = arr;
+            return arr.reduce((acc, val) => {
+              return Math.round(acc + val.MetricValue / length);
+            }, 0);
+          };
+          return findAverage(groupTime[key]);
+        });
+
+        return {
+          name: key,
+          data: arr.slice(-60),
+        };
+      });
+
+      return arr;
     },
 
     chartOptions() {
@@ -57,7 +90,7 @@ export default {
           categories: setTime(60, 'hour'),
           title: null,
           labels: {
-            step: 6,
+            step: 10,
           },
           minorGridLineColor: '#1A3E5B1A',
         },
@@ -104,7 +137,7 @@ export default {
             },
           ],
         },
-        series: Series['temperature'].map((item) => ({
+        series: this.groupData.map((item) => ({
           ...item,
           marker: {
             enabled: false,
@@ -126,11 +159,11 @@ export default {
     },
   },
 
-  watch: {
+  /*  watch: {
     groupData() {
       console.log('group data!!!', this.groupData);
     },
-  },
+  },*/
 };
 </script>
 <style lang="scss">
@@ -139,6 +172,6 @@ export default {
 }
 
 .highcharts-plot-line-label {
-  transform: translate(-15px, 0) !important;
+  transform: translate(-8px, 0) !important;
 }
 </style>
-- 
cgit v1.2.3