Adicionando Gráficos em sua Aplicação React 📈

Contra fatos não há argumentos: Gráficos são extremamente úteis. Você gosta de gráficos. Eu gosto de gráficos, e você com certeza já passou por negociações que poderiam ser resolvidas com gráficos.

Gráficos como o acima nos ajudam a visualizar dados complexos com mais facilidade. E um adicional: ele é interativo - experimente clicar na legenda.

Você quer saber como deixar seus projetos com uma representação de dados mais viva? Fique por aqui!

Chart.js, D3 e afins

A Chart.js é uma biblioteca Javascript que utiliza o Canvas do HTML 5 para gerar gráficos de forma rápida e eficiente. Hoje (novembro de 2022) está licenciada como MIT, então é possível também configura-lá para projetos corporativos, sem nenhum custo adicional.

Mas ei, Rapozo - e a D3? Ela não possui uma adesão maior? Sim! Mas, diferentemente da D3, que utiliza vetores (e possui uma barreira de configuração e aprendizado inicial alta), a Chart.js propõe uma solução estética, simples e rápida para gerar gráficos cotidianos. Ainda assim, a D3 é imbatível para gráficos mais complexos ⚔️.

Como a utilização no React de bibliotecas que necessitam de uma manipulação direta do DOM pode acabar resultando em uma complexidade enorme (pois a manipulação direta do DOM acaba fugindo do Virtual DOM - então temos que usar refs), precisamos utilizar bindings externas. No caso, usamos a react-chartjs-2.

Bora lá!

Supondo que você já tenha um projeto configurado, precisamos instalar ambas dependências. Manda bala no seguinte comando:

npm install --save chart.js react-chartjs-2 # ...se tu curte npm OU
pnpm add chart.js react-chartjs-2 # ...se o pnpm lhe atrai OU
yarn add chart.js react-chartjs-2 # ...se tu é fã de yarn

Com tudo instalado, já podemos começar a entender os conceitos básicos da Charts 🚀.

Estrutura de Dados e Datasets

Um dos alicerces da Chart.js (e de qualquer biblioteca de visualização de dados) são os datasets. Os datasets, em suma, contém os dados que você quer exibir na tela. No caso do primeiro gráfico que mostrei, o dataset apontava para os dados da inflação no Brasil entre 2020 e 2021.

O formato do dataset irá variar de gráfico para gráfico (por exemplo, um gráfico de linha irá exigir um formato de dados diferente do que um gráfico de dispersão), por isso, é necessário se atentar e sempre ler a documentação oficial para confirmar os formatos.

Exemplo: Imagine que você trabalha no Instagram e lhe pedem para você analisar a soma do número de likes nas fotos de um certo usuário. Após puxar os dados segmentados por semestre, você tem a brilhante ideia (após ler este post, claro) de fazer um gráfico no Chart.js com a informação para apresentar para a diretoria.

Bom, antes de organizarmos o dataset que representa os likes, vamos aos dados puros:

Fornecidas essas informações, o gráfico ficaria igual o apresentado abaixo, correto?

O dataset do gráfico acima é o seguinte:

{
  label: 'Primeiro semestre de 2022',
  data: [5,15,22,43,55,60]
}

Para exemplificar ainda melhor, experimente clicar no botão do lado direito, logo abaixo, e veja como o gráfico muda de acordo com o dataset definido:

{
  label: 'Primeiro semestre de 2022',
  data: [5,27,28,7,26,16]
}

Vamos supor que depois de demonstrar o gráfico de likes para a diretoria, lhe pedem para também puxar e comparar os dados do primeiro semestre de 2021. Assim como no gráfico da inflação, nós podemos ter mais de um dataset para trabalhar:

... E, como você vê no código abaixo, é só uma questão de adicionar os dados novos junto com os dados iniciais:

[
  {
    label: 'Primeiro semestre de 2022',
    data: [5, 15, 22, 43, 55, 60]
  },
  {
    label: 'Primeiro semestre de 2021',
    data: [12, 26, 33, 38, 37, 23]
  }
]

Em suma, um dataset é um vetor com vários dados - dados estes que serão mostrados no gráfico. Ou, em termos mais técnicos: um dataset é um array de objetos, onde cada objeto contém uma propriedade data e label. 👍

Como mencionei antes, o formato dos dados variará de gráfico para gráfico, mas você sempre terá um dataset envolvido, cada um com uma ou mais lista de dados.

... Tá, e como fazemos para a tela piscar?

Cada objeto dentro do dataset possui estilos próprios, porém, novamente, as opções variam de gráfico para gráfico. De regra geral, você consegue modificar a cor da borda e a cor de fundo, como demonstrado no gráfico de barra abaixo:

Como também demonstrado na documentação oficial, é simples de configurar opções adicionais:

const labels = ['1', '2', '3', '4', '5', '6', '7'];
data = {
    labels,
    datasets: [
        {
            label: 'Dataset vermelho',
            data: 
              labels.map((() => Math.floor(Math.random() * 100))),
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
            borderColor: 'red',
            borderWidth: 1
        },
        {
            label: 'Dataset azul',
            data: 
              labels.map((() => Math.floor(Math.random() * 100))),
            backgroundColor: 'rgba(53, 162, 235, 0.5)',
            borderColor: 'blue',
            borderWidth: 1
        },
    ],
};

Também temos um objeto de opções que podemos alterar:

const options = {
    responsive: true,
    plugins: {
        legend: {
            position: 'bottom',
        },
        title: {
            display: false,
            text: 'Dataset',
        },
    },
};

... E aí temos um gráfico com a legenda da seguinte maneira:

Juntando tudo

Antes de conseguir utilizar o gráfico em si, precisamos importar os dados (nesse caso, de um gráfico de barra, mas todo seguem o mesmo padrão):

import React from 'react';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend
);

Se quiser, leia mais sobre os plugins na documentação oficial.

Depois disso tudo, é só fornecer os dados para o componente:

<Bar options={options} data={data} />

Juntando tudo, finalmente:

import React from 'react';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend
);

const options = {
    responsive: true,
    plugins: {
        legend: {
            position: 'top',
        },
        title: {
            display: false,
            text: 'Dataset',
        },
    },
};

const labels = ['1', '2', '3', '4', '5', '6', '7'];
export const data = {
    labels,
    datasets: [
        {
            label: 'Dataset vermelho',
            data: labels.map((() => Math.floor(Math.random() * 100))),
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
            borderColor: 'red',
            borderWidth: 1
        },
        {
            label: 'Dataset azul',
            data: labels.map((() => Math.floor(Math.random() * 100))),
            backgroundColor: 'rgba(53, 162, 235, 0.5)',
            borderColor: 'blue',
            borderWidth: 1
        },
    ],
};

const BarChart = () => {
    return <Bar options={options} data={data} />;
}

export default BarChart;

Praticamente todos os gráficos seguirão um padrão similar ao acima. Temos outros tipos de Chart, como de dispersão:

Acaba ficando fora do contexto desse artigo passar por todos os tipos de gráficos, mas temos, via de regra:

• Gráficos de Barra
• Gráficos de Linha
• Gráficos de Pizza
• Gráficos de Rosca
• Gráfico Polar
• Gráficos de Radar
• Gráficos de Dispersão
• Gráficos de Bolha

E por hoje é só! Espero que esse artigo tenha lhe fornecido algumas ideias! 💡