Построение графика axios+react, как лучше сделать?

Question

[vladislavprozorovskiy]

Доброе утро всем.Нужно построить график (например самый распространенный язык) по данным, которые приходят через axios.

componentDidMount(){
      axios.get('https://restcountries.eu/rest/v2/all')
      .then(response => {
          this.setState({
              countries:response.data 
          })
      })
      .catch((error) => {
          console.log("error", error)
      })
  }

Выше сам запрос.Как это лучше будет сделать?Возможно через какую-нибудь библиотеку?

Answer 1

[Максим]

Доброе утро.

1) из данных формируете новый "слепок" значений: язык + кол-во говорящих (например: { ru: 1000, en: 2000 } или [1000, 2000] + словарик ['ru', 'en'] )
2) наносите это на график, например, используя react-chartjs2

Comments

[vladislavprozorovskiy]

а как "слепок" сформировать новый?
Я пытался создать через

this.state((country,id))=>{

}

и внутри данной функции присвоить значения нужных мне полей переменным, но так не получается, все примеры которые прочитал в интернете нацелены на то, чтобы вернуть разметку через map, а мне получается нужно вернуть новый массив, а не разметку

[Максим]

vladislavprozorovskiy, придется учить основы. То что нужно вернуть новый массив данных - верно. Для этого сейчас не нужны никакие туториалы связанные с реактом. Нужны основы:
learn.javascript.ru/array-methods - массив
learn.javascript.ru/object - объект

Идите по всему массиву и вытаскивайте нужную вам информацию, ее записывайте в новый объект/массив, и этот объект/массив (или объектЫ/массивЫ) записывайте в state.

В компоненте, на основе данных из state отрисовывайте.

[vladislavprozorovskiy]

Максим,

const result = Object.assign({}, ...Object.keys(data).map(k => ({[data[k].alpha2Code]: data[k].area})));

Таким образом получил новые объекты и записал в state, теперь в state есть переменная result в которой данные хранятся вида

{AF: 652230, AX: 1580, AL: 28748, DZ: 2381741, AS: 199, …}

Но для использования chartjs нужно больше данных, насколько я понимаю, лейблы, сама дата.

[Максим]

vladislavprozorovskiy, ваши лейблы это AF, AX, AL ... , сама дата - это объект + циферки что вы получили.
Погуглив, нашел это видео (сам не смотрел, но, вроде, на перемотке ок)