diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-21 11:54:11 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-21 11:54:11 +0300 |
commit | d7e60a3db8f09deef39e2f798eef121be414d40a (patch) | |
tree | da68b996896fdabc6c2dc7979f06fc694dc20439 /src/components | |
parent | 30cc11ada6d0cf92516aa67cea84d0ba17501c93 (diff) | |
download | webui-vue-d7e60a3db8f09deef39e2f798eef121be414d40a.tar.xz |
add raw data
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/_sila/Global/Chart.vue | 59 |
1 files changed, 46 insertions, 13 deletions
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> |