How do I calculate the average of the first 5 numbers in my list taken from the URL, grouped by 5-minute intervals? I have a delay of 1 minute to ensure there are 5 values within the initial 5 minutes. After that, I want to display the averages in 3 different templates.
<template>
<div id="app">
<form>
<label>Enter Currency: <input type="text" v-model="currency"></label>
<input id="clickMe" type="button" value="Submit" @click="getData(currency)" />
</form>
<pre></pre><p>Bitcoin Value is: {{ apiData?.data?.amount }}</p>
<template v-for="value in getShortList(5)">
<pre></pre><p>Average for last 5 minutes: {{ }} </p>
<li class="divider" role="presentation"></li>
</template>
<template v-for="item in getShortList(29)">
<pre></pre><p>Average for last 30 minutes: {{parseInt(getShortList(29))}}</p>
<li class="divider" role="presentation"></li>
</template>
<template v-for="item in getShortList(59)">
<pre></pre><p>Average for last 60 minutes: {{ parseInt(getShortList(59)) }}</p>
<li class="divider" role="presentation"></li>
</template>
<template>
<div>
<apexchart width="500" type="bar" :options="options" :series="amountList"></apexchart>
</div>
</template>
</div>
</template>
Script code:
import axios from 'axios'
export default {
data() {
return {
apiEndPoint: 'https://api.coinbase.com/v2/prices/spot?currency=',
apiData: [],
amountList: [],
}
},
created () {
this.getData(this.currency);
}
,
methods: {
getShortList(shortListSize) {
return this.amountList.slice(0, shortListSize);
},
getData(currency) {
axios.get(`${this.apiEndPoint}${currency}`).then((response) => {
this.timer = setInterval(() => {
this.apiData = response.data
this.amountList.push(response.data.data.amount)
console.log(this.amountList)
}, 5000)
})
}
}
}
</script>