O ecossistema React tem uma comunidade muito rica e vasta com muitas bibliotecas de código aberto disponíveis para nos ajudar a resolver uma ampla gama de problemas-desde os problemas mais básicos e comuns, como gerenciamento de estado e formulários, para os desafios mais complexos, como a representação visual de dados. Para o último, pode ser difícil encontrar a biblioteca certa para o trabalho.
Bibliotecas React são freqüentemente criadas e tornam-se obsoletas em questão de meses, e a decisão de usar uma determinada biblioteca afeta todo o desenvolvimento equipe. É por isso que é importante escolher a biblioteca certa para qualquer tarefa ou recurso que você planeja construir em seu aplicativo. A visualização de dados não é exceção.
Neste tutorial, mostraremos como usar o Nivo, uma biblioteca de visualização de dados para React, construindo alguns gráficos e implementando-os em um aplicativo React. Vamos destacar alguns componentes principais e mostrar como eles funcionam juntos para tornar os dados mais visualmente atraentes para seus usuários.
Por que usar uma biblioteca de gráficos React?
O benefício mais importante de usar uma biblioteca para visualização de dados no React é a capacidade de implementar uma ampla variedade de tabelas e gráficos sem reinventar a roda. Você não deve precisar gastar horas de seu precioso tempo tentando implementar um caractere de barra simples. Uma biblioteca de gráficos poderosa, como o Nivo, pode ajudá-lo a economizar tempo, obter melhores resultados e criar uma experiência de usuário única para o seu aplicativo React.
Representar os dados de uma forma esteticamente agradável pode dar ao seu aplicativo uma vida mais atual, mais aparência moderna. Hoje em dia, a maioria das empresas usa algum tipo de recurso de visualização de dados para fornecer uma experiência de usuário agradável e perspicaz.
Construir sua própria visualização de dados ou biblioteca de gráficos é difícil e demorado. Muitos desenvolvedores que decidiram fazer isso descobriram que o suco não valia a pena ser espremido.
O que é Nivo?
Nivo é um rico conjunto de componentes de visualização de dados para aplicativos React. Inclui uma variedade de componentes que podem ser usados para mostrar gráficos e números de dados em aplicativos React modernos.
O Nivo é construído sobre D3.js e vem com recursos extras poderosos, como renderização do lado do servidor e gráficos declarativos. É uma biblioteca de visualização de dados altamente personalizável que fornece documentação bem escrita com muitos exemplos e componentes de visualização de dados responsivos. Ele também suporta movimento e transições prontos para uso.
Por que usar o Nivo em vez do D3?
Uma das ferramentas de visualização de dados mais populares para aplicativos JavaScript é o D3. biblioteca js. D3 é uma biblioteca de gráficos poderosa que permite que você dê vida aos dados usando HTML, SVG e CSS.
O único problema com o D3.js é que ele tem uma curva de aprendizado íngreme e seu código tende a se tornar bastante complexo. D3.js faz uso intenso de SVG, HTML e CSS. Para usar a biblioteca corretamente, você deve ter um bom entendimento de como os SVGs e o DOM funcionam.
Não me interpretem mal-o D3.js é uma biblioteca muito poderosa e útil para a construção de visualização de dados no moderno formulários. Mas na maioria das vezes, você não quer passar horas tentando criar um gráfico de barras simples. React tem tudo a ver com capacidade de reutilização, e o Nivo permite que você crie componentes reutilizáveis e, ao fazer isso, elimine horas de depuração.
O Nivo é a melhor escolha para visualização de dados no React porque remove a complexidade dos componentes de construção. com o Nivo, você pode trabalhar com mais eficiência, personalizar seus componentes e criar uma ampla variedade de visualizações de dados com facilidade.
Instalando o Nivo
A primeira etapa para usar o Nivo em seu aplicativo React é instalá-lo em seu projeto:
yarn add @ nivo/core
Quando instalamos o pacote principal, ele não vem com todos os componentes da biblioteca. Isso pode parecer uma desvantagem, mas na verdade é uma coisa boa.
Não queremos adicionar um pacote pesado que aumentaria o tamanho do nosso pacote apenas para usar um único componente. Em vez disso, podemos adicionar o pacote específico de que precisamos para usar um componente específico.
Vamos adicionar nosso primeiro pacote de componentes Nivo ao nosso aplicativo React.
Construindo um gráfico de barras
Para começar, adicionaremos o componente do gráfico de barras para usá-lo em nosso aplicativo React:
yarn add @ nivo/bar
O componente do gráfico de barras tem muitos recursos. Ele pode mostrar dados empilhados ou lado a lado. Ele suporta layouts verticais e horizontais e pode ser personalizado para renderizar qualquer elemento SVG válido.
Vamos importar o componente de barra em nosso arquivo para que possamos começar a criar nosso primeiro gráfico de barras usando o Nivo.
import {ResponsiveBar} from’@ nivo/bar’
Para começar com o componente bar, precisamos de um único prop: data. O data prop é um array de objetos que passamos para o componente ResponsiveBar. Cada objeto deve ter uma propriedade de chave para não indexar os dados e uma propriedade de chave para determinar cada série.
Usaremos o seguinte objeto:
const data=[{day:”Monday”, degress: 59}, {day:”Tuesday”, degress: 61}, {day:”Wednesday”, degress: 55}, {day:”Thursday”, degress: 78}, {day:”Friday”, degress: 71}, {day:”sábado”, degress: 56}, {day:”Sunday”, degress: 67}];
Passamos essa matriz de dados para nosso componente ResponsiveBar. O componente ResponsiveBar precisa de uma string indexBy para indexar os dados e uma propriedade keys, que é uma matriz de string a ser usada para determinar cada série.
Vamos passar nossa propriedade de graus como chaves e queremos para indexar nossos dados por dias. Nosso componente vai ficar assim depois de tudo isso:
const Bar=()=> {return (
Agora temos um componente de visualização de dados bonito e poderoso usando o Nivo! Como você pode ver, com apenas algumas linhas de código, podemos obter um resultado poderoso como este:
Construindo um gráfico de pizza
Um gráfico de pizza é exibido dados numéricos como fatias de um único círculo. Este tipo de visualização de dados é aplicável em praticamente todos os setores e para uma ampla variedade de casos de uso.
O Nivo tem um componente de gráfico de pizza , que você pode instalar com o seguinte comando:
yarn add @ nivo/pie
Semelhante ao componente de barra, o componente de pizza requer alguns adereços para funcionar: os dados matriz de objetos e a largura e altura para mostrar seu gráfico de pizza.
O objeto de dados que passamos para o componente de pizza pode ser um pouco diferente. Podemos usar muitas propriedades, como id, rótulo, valor e cor, para personalizar nosso gráfico de pizza.
Temos uma matriz de objetos, e cada objeto tem uma propriedade específica que será usada em nosso gráfico de pizza:
A propriedade id é um valor único para cada objeto de nosso array A propriedade value é o valor de nosso objeto que será renderizado em nosso gráfico O objeto de cor é uma string que vamos para passar como a cor do nosso objeto em nosso gráfico A propriedade label é o nome do rótulo do nosso objeto const data=[{id:”java”, label:”java”, value: 195, color:”hsl (90, 70 %, 50%)”}, {id:”erlang”, rótulo:”erlang”, valor: 419, cor:”hsl (56, 70%, 50%)”}, {id:”rubi”, rótulo:”rubi”, valor: 407, cor:”hsl (103, 70%, 50%)”}, {id:”haskell”, rótulo:”haskell”, valor: 474, cor:”hsl (186, 70% , 50%)”}, {id:”go”, rótulo:”go”, valor: 71, cor:”hsl (104, 70%, 50%)”}];
Também podemos personalizar nosso componente de pizza passando propriedades como padAngle e cornerRadius. O suporte padAngle determina o ângulo entre cada objeto em nosso gráfico. A prop cornerRadius é o valor que podemos passar como o raio da borda de cada objeto.
Nosso componente final termina assim:
const Pie=()=> {return (
O resultado final deve ser semelhante a este:
Conclusão
O Nivo fornece muitos componentes diferentes para a criação de visualização de dados em aplicativos React. Sua vasta lista de componentes inclui um componente de calendário , um Componente Choropleth (um componente de área geográfica dividida), um componente de mapa de árvore e muitos mais.
Você pode aplicar a maioria das técnicas que aprendemos neste tutorial para criar outros tipos de componentes de visualização de dados além do gráfico de barras e setores. A ideia aqui era dar uma ideia do que você pode conseguir usando o Nivo e quão poderosa é essa biblioteca de visualização de dados.
Não há biblioteca de gráficos certa ou errada para uma determinada tarefa; tudo depende dos resultados que você deseja alcançar e dos requisitos do seu projeto. Dito isso, as ferramentas e recursos disponíveis com o Nivo o tornam uma excelente biblioteca de gráficos para a criação de visualizações de dados impressionantes e impactantes no React.
O Nivo é de código aberto e a comunidade em torno dele é muito ativa e útil. A documentação é bem escrita e você pode aprender como usar alguns componentes em poucos minutos. No final do dia, a ampla seleção de componentes e a variedade de casos de uso que eles atendem tornam o Nivo uma das melhores bibliotecas de gráficos React.
