SPA-приложение на Vue.JS #4

Привет, сегодня мы научимся получать данные с помощью axios и отрисовывать графики с помощью ChartJS.

AXIOS

Начнём с подключения axios и простого get-запроса для получения данных. Подключить axios можно в файлике main.js:

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Теперь перейдём в файлик Total.vue и попробуем получить данные, для начала давайте просто выведем их на экран, чтобы точно понимать, что данные получены и всё хорошо (создайте в data () переменную continents и выведите её в самом верху страницы, но внутри тега main). Теперь мы можем использовать axios (не забудьте про this!) внутри mounted ().

mounted () {
    this.axios
      .get('https://corona.lmao.ninja/v2/continents?sort')
      .then(response => { this.continents = response; this.updateStats() })
      .catch(error => { console.error('An API error: ', error) })
}

Методы на сегодня (мы используем NovelCovidAPI):

Первый метод: https://corona.lmao.ninja/v2/continents?sort

Второй метод: https://corona.lmao.ninja/v2/historical?all

Все открытые API можно взять здесь: https://covid-19-apis.postman.com/

Внутри methods создаём функцию:

updateStats () {
      let data = this.continents.data
      let cases = 0
      let deaths = 0
      let recoveries = 0
      
      for (let elem of data) {
        cases += elem.cases
        deaths += elem.deaths
        recoveries += elem.recovered
      }
      
      this.cards[0].amount += cases
      this.cards[1].amount += deaths
      this.cards[2].amount += recoveries
}

Reactive props

Меняем lineChart.js:

import Vue from 'vue'
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default Vue.component('line-chart', {
  extends: Line,
  props: {
    options: Object
  },
  mixins: [reactiveProp],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
})

Теперь мы можем налету менять данные в графике (кроме этого, здесь мы можем добавить данные за последние 24 часа к нашим карточкам):

    updateVisuals () {
      let data = this.allData.data
      let cases = data.cases
      let deaths = data.deaths
      let recoveries = data.recovered
      
      let labels = []
      let casesPerDay = []
      let deathsPerDay = []
      let recoveriesPerDay = []
      
      for (let key in cases) {
        labels.push(key)
        casesPerDay.push(cases[key])
        deathsPerDay.push(deaths[key])
        recoveriesPerDay.push(recoveries[key])
      }
      
      console.log(labels)
      console.log(casesPerDay)
      
     this.visuals[0].chartData = {
        labels: labels,
        datasets: [{
          label: 'Total cases',
          backgroundColor: '#6aaaff',
          data: casesPerDay
        }]
      }
      
      this.visuals.push({
        id: 2,
        chartData: {
          labels: labels,
          datasets: [{
            label: 'Deaths',
            backgroundColor: '#ff5252',
            data: deathsPerDay
          }]
        },
        options: { responsive: true, maintainAspectRatio: false }
      })
      
      this.visuals.push({
        id: 3,
        chartData: {
          labels: labels,
          datasets: [{
            label: 'recoveries',
            backgroundColor: '#26a69a',
            data: recoveriesPerDay
          }]
        },
        options: { responsive: true, maintainAspectRatio: false }
      })
      
      let lastDayCases = casesPerDay[casesPerDay.length - 1] - casesPerDay[casesPerDay.length - 2]
      let lastDayDeaths = deathsPerDay[deathsPerDay.length - 1] - deathsPerDay[deathsPerDay.length - 2]
      let lastDayRecoveries = recoveriesPerDay[recoveriesPerDay.length - 1] - recoveriesPerDay[recoveriesPerDay.length - 2]
      
      this.cards[0].amountNew += lastDayCases
      this.cards[1].amountNew += lastDayDeaths
      this.cards[2].amountNew += lastDayRecoveries
    }

Vuex разберём в следующий раз.