Gráficos com React Google Charts

Utilizar um gráfico é a melhor e mais profissional forma de se organizar, expressar e acompanhar resultados. Quando bem estruturados, eles proporcionam uma fácil compreensão e se tornam essenciais para o dia a dia corporativo e, consequentemente, para aplicações que envolvam qualquer tipo de acompanhamento e demonstração de dados.

Tendo em vista a sua importância, trazemos para você por meio deste artigo um passo a passo de como utilizar o React Google Charts, uma biblioteca que auxilia de uma maneira incrível a criação e manipulação de gráficos utilizando o React. Vamos lá!

Primeiramente, o que é o React?

O React é uma biblioteca JavaScript de código aberto utilizado por diversas empresas notórias como o Facebook, a Netflix, o Instagram, etc. Focado em criar interfaces para o usuário de maneira muito mais prática do que utilizando o JavaScript puro, o React foi ganhando mais e mais espaço por ser de fácil assimilação, compreensão e adaptação.

Primeiros passos com o React Google Charts

O React Google Charts é uma biblioteca para o React focada no desenvolvimento de gráficos com a praticidade de cair o queixo. Para demonstrar o quão chocantemente fácil pode ser a implementação de gráficos com esta ferramenta, iremos criar juntos um gráfico do tipo pizza (Pie Chart) com o auxílio dela.

O primeiro passo é criar um projeto React e instalar o React Google Charts logo após. Se tudo der certo, ao reproduzir o código a seguir em seu terminal, será aberto no browser uma página com o símbolo do React em movimento:

npx create-react-app react-graphics
cd react-graphics
npm install
npm install --save react-google-charts
npm start

Criando um gráfico do tipo Pizza com React

Se a gente parar para pensar, todos os gráficos possuem algo em comum: eles dependem de dados. Dito isto, começaremos então criando uma lista com os dados que serão consumidos pelo que estamos prestes a criar.

A estrutura que o React Google Charts utiliza para receber dados deve ser criada de forma que estes estejam armazenados em um array de arrays. O array principal (o que armazena uma lista de arrays) sempre terá na sua primeira posição um array contendo um título que descreva o gráfico e uma breve e curta descrição para ele, cada um em uma posição.

As demais posições do array devem conter arrays com os dados que serão exibidos no gráfico, sendo a primeira posição seu nome e a segunda o seu valor. Se pareceu um pouco confuso, podemos simplificar a explicação demonstrando como deve ser feito:

Agora, importaremos o componente responsável por criar o gráfico em tela baseado nas propriedades que ele receberá. O seu nome é Chart e o importaremos de ‘react-google-charts’.

Até aqui nada foi exibido em tela, uma vez que não criamos nenhuma propriedade para o componente principal responsável por esta funcionalidade (Charts). Vamos descrever algumas das que utilizaremos:

• chartType - É nesta propriedade que informaremos o tipo de gráfico; como queremos um gráfico do tipo pizza, utilizaremos a string PieChart (todos os nomes dos gráficos são disponibilizados na biblioteca do React Google Charts);
• data - Propriedade responsável pelos dados que serão utilizados para o gráfico; no nosso caso, receberá a constante data;
• options - Recebe um objeto que pode ter uma série de orientações; no nosso caso utilizaremos apenas title (para definir um título a ser exibido em tela para o gráfico) e is3D (para definir se ele será 3D ou não);
• width - Define a largura do componente que estamos criando;
• height - Define a sua altura.
  

Manipulando dados de forma Dinâmica

Até este ponto, criamos de uma maneira rápida, prática e fácil (como foi prometido) um gráfico que utiliza dados estáticos. Mas e se dependêssemos de dados dinâmicos enviados pelo usuário?

Para corresponder a esta demanda, iremos transferir a nossa constante data para um estado. Desta forma, sempre que ele for atualizado, o gráfico será também:

Agora, criaremos os inputs que receberão o nome de cada dado e o seu respectivo valor. É por meio deles que iremos inserir valores ao gráfico e, para isso, criaremos dois estados para nome e valor do dado preenchido:

Note que apagamos todos os dados contidos no array do estado data, exceto a primeira posição que contém título e descrição. Uma vez que iremos inserir os dados dinamicamente, apenas a primeira posição (essencial para que nossa implementação não quebre) é necessária agora.

Além disso, se você está se perguntando o porquê de serem criados estados para os inputs, é muito simples: queremos adicionar estes dados ao gráfico somente após clicarmos em um botão, que irá coletar os valores dos estados name e value e adicioná-los ao estado dos dados do gráfico. Desta forma, faz-se necessária a criação deste botão citado:

Tudo pronto para que nossa aplicação inclua dados no nosso gráfico pizza com nomes e valores. Se você fez tudo certo, você terá uma aplicação com uma funcionalidade mais ou menos assim:

Considerações finais

O React Google Charts oferece tantos tipos de gráficos quanto se pode imaginar. Visando conceder componentes de fácil compreensão e sem grandes complexidades para a manipulação e edição, ele atinge o objetivo com eficiência e eficácia. Se você chegou até aqui neste artigo, é dispensável dizer que as funcionalidades desta biblioteca se resumem a este gráfico pizza que apresentamos aqui.

Todavia, se você entendeu a estrutura de como se implementa um gráfico utilizando esta biblioteca, sem a menor sombra de dúvidas você não terá nenhum problema em utilizar nenhum outro.

Na sua jornada neste mundo vasto da programação, você já conheceu alguma biblioteca que fornece ferramentas de uma maneira tão eficaz quanto o React Google Charts?

Saudações!