A visualização de dados sempre foi uma parte importante da engenharia de software e do desenvolvimento de front-end em particular. Sempre há a necessidade de visualizar dados para nossos usuários para ajudá-los a entender melhor o que está acontecendo em nosso aplicativo.
Chart.js é uma biblioteca JavaScript popular usada para criar gráficos flexíveis em sites, e neste tutorial , Mostrarei como usar Chart.js em um ambiente React.
Em vez de fazer algo simples, como exibir um gráfico com dados improvisados, vamos criar um aplicativo que extrai preços de criptomoedas de uma API e a exibe em um gráfico de barras.
API do CoinCap nos fornece preços de criptomoeda em tempo real, que nós alimentará nosso componente React.
Pré-requisitos
Para este tutorial, você precisará de um conhecimento básico da estrutura React. A documentação do React é um bom lugar para começar.
Criando o projeto
Usarei CodeSandbox para configurar um novo aplicativo React em vez de baixar os arquivos localmente usando CRA . Você pode brincar com a sandbox do tutorial aqui .
Para configurar rapidamente um modelo React no CodeSandbox , abra uma nova guia em seu navegador e digite react.new (agradeça-me mais tarde 
).
Em seguida, na seção de dependências, adicione estas duas bibliotecas:
chart.js react-chartjs-2
React-chartjs-2 é um wrapper do React para Chart.js 2.0 e 3.0, permitindo-nos usar elementos Chart.js como componentes React.
Buscando os dados
Na árvore de arquivos, abra App.js. Aqui, buscaremos os dados da API e passaremos o resultado para um componente separado para renderizar o gráfico.
Substitua o conteúdo de App.js pelo código abaixo:
import { useEffect} da função padrão de exportação”react”App () {useEffect (()=> {const fetchPrices=async ()=> {const res=await fetch (“https://api.coincap.io/v2/assets/? limit=5”) const data=await res.json () console.log (data)} fetchPrices ()}, []); return (
); }
Criamos uma função, fetchPrices, que faz uma solicitação à API CoinCap.
Por padrão, a API retorna um objeto com uma propriedade de dados que é uma matriz de 100 objetos de criptomoeda. Como não precisaremos de tantos resultados, anexei o parâmetro limit no final da URL, solicitando apenas os 5 primeiros objetos.
fetchPrices também foi chamado em um useEffect hook com uma matriz de dependência vazia, o que significa que a função é executada assim que o componente App é montado.
Vamos dar uma olhada no resultado dos dados que buscamos:
{data: Array (5), timestamp: 1625898595698} data: Array (5) 1. ▶ 0: Objeto id:”bitcoin”rank:”1″símbolo:”BTC”nome:”Bitcoin”priceUsd:”33692.0391437919079095″2. ▶ 1: Objeto//… mais dados
Precisamos apenas do nome e do preçoUsd propriedades dos dados para criar nosso gráfico.
Componentes do Chart.js React
Os componentes do React do react-chartjs-2 assumem dois props principais: dados e opções. Aqui está uma lista de adereços aceitáveis .
A proposta de dados leva em um objeto semelhante ao abaixo:
const data={labels: [‘Red’,’Orange’,’Blue’],//datasets é uma matriz de objetos onde cada objeto representa um conjunto de dados para display correspondente aos rótulos acima. para resumir, vamos mantê-lo em conjuntos de dados de um objeto: [{rótulo: dados de’popularidade das cores’: [55, 23, 96],//você pode definir cores individuais para cada barra backgroundColor: [‘rgba (255, 255, 255, 0,6)”rgba (255, 255, 255, 0,6)”rgba (255, 255, 255, 0,6)’], borderWidth: 1,}]}
backgroundColor e borderWidth são apenas alguns dos as propriedades que podem ser adicionadas à matriz de conjuntos de dados. Veja a lista completa de propriedades aceitáveis .
Agora para termos uma ideia de como o objeto na propriedade de dados é configurado, podemos replicar o objeto com os dados buscados na API do CoinCap. Vamos importar o gancho useState e usá-lo para criar uma variável chartData:
import {useState, useEffect} da função padrão de exportação”react”App () {useEffect (()=> {const fetchPrices=async ()=> {const res=await fetch (“https://api.coincap.io/v2/assets/?limit=5”) const data=await res.json () console.log (data)} fetchPrices ()} , []) const [chartData, setChartData]=useState ({}) return (
); }
Este pedaço de estado contém o objeto de dados, que seria passado para o componente Chart.js Bar.
Agora podemos preencher os rótulos e matrizes de dados com dados da API. Para conseguir isso, usaremos o método map para criar uma matriz dos valores obtidos da API:
useEffect (()=> {const fetchPrices=async ()=> {const res=await fetch (“https://api.coincap.io/v2/assets/?limit=5″) const data=await res.json () setChartData ({labels: data.data.map ((crypto)=> crypto.name), conjuntos de dados: [{rótulo:”Preço em USD”, dados: data.data.map ((crypto)=> crypto.priceUsd), backgroundColor: [“# ffbb11″,”# ecf0f1″,”# 50AF95″,”# f3ba2f”,”# 2a71d0″]}]});}; fetchPrices ()}, []);
Com isso concluído, prossiga para criar o componente Gráfico. Crie uma pasta de componentes na raiz do seu aplicativo e adicione um arquivo chamado Chart.js a ela. Importe este componente para App.js:
import {useState, useEffect} de”react”import {Chart} from”../components/Chart”; exportar função padrão App () {//… const [chartData, setChartData]=useState ({}) return (
)}
Criando o componente gráfico
O pacote react-chartjs-2 oferece uma variedade de tipos de gráfico para seleção. Isso inclui Line, Bar, Pie, Donut, etc.
Usaremos o componente Bar neste caso:
import {Bar} from”react-chartjs-2″; export const BarChart=({chartData})=> {return (
); };
No código acima, desestruturamos chartData das propriedades e o usamos como o valor da propriedade de dados. As opções prop, como data, aceita um objeto no qual podemos ajustar diferentes partes de nosso gráfico, como título, legenda e outros. Verifique todas as opções configuráveis .
E isso conclui nosso projeto ! As configurações acima resultarão agora no gráfico abaixo.
Conclusão
Você viu como exibir gráficos em sites usando Chart.js e React, mas vai muito mais longe do que este exemplo.
Recomendo que você visite a documentação do Chart.js para saber mais sobre a biblioteca e mergulhe nas opções para ver mais maneiras de configurar seus gráficos.
