Quando se trata de construir um aplicativo, ter uma visualização de dados eficaz envolve o usuário, tornando os dados fáceis de ler e entender.
Neste post, vamos abordar como para implementar a visualização de dados no React Native usando Victory .
O que é Victory?
Victory é uma biblioteca de visualização de dados para React. Ele contém várias ferramentas de visualização de dados baseadas em componentes que são interativas, opinativas e também totalmente substituíveis. É robusto e relativamente simples de implementar com os aplicativos React e React Native.
Esta postagem pressupõe que você tenha um conhecimento prático do React Native. Caso contrário, veja como começar.
Criando um gráfico de vitória no React Native
Agora, vamos criar seu primeiro gráfico! Primeiro, inicialize um projeto React Native.
npx react-native init VictoryRN
Em seguida, podemos instalar o Nativo-vitória .
npm install Nativo-vitória
Você também deve instalar react-native-svg para vincular as dependências nativas do React Native SVG aos projetos iOS e Android:
react-native install react-native-svg
Agora que você inicializou seu aplicativo React Native e instalou suas dependências, vamos começar a adicionar alguns gráficos. Primeiro, vamos importar alguns módulos nativos de vitória que usaremos com o seguinte código:
import {VictoryBar, VictoryChart, VictoryTheme} de”nativos de vitória”;
Precisamos de alguns dados fictícios para alimentar nosso gráfico. Esses dados são representados por uma matriz de objetos.
const data=[{ano:’2011′, ganhos: 13000}, {ano:’2012′, ganhos: 16500}, {ano:’2013′, ganhos: 14250}, {ano:’2014′, ganhos: 19000}];
Finalmente, vamos adicionar nosso primeiro componente do gráfico Victory, assim:
No site, diz que VictoryChart é um componente de invólucro que renderiza um determinado conjunto de filhos em um conjunto de eixos cartesianos ou polares. VictoryBar é um componente de gráfico de barras fornecido pelo Victory. Depois de adicionar o código acima, nosso aplicativo deve ficar assim:
Viola, seu primeiro gráfico de vitória! Agora que temos a implementação básica do gráfico, vamos experimentar os gráficos dinâmicos. Queremos que nosso gráfico possa ser atualizado em tempo real à medida que os dados são atualizados. Também podemos adicionar botões de opção para alterar o tipo de gráfico que está sendo usado.
Tornando os gráficos do Victory dinâmicos no React Native
Uma das melhores coisas sobre os gráficos do Victory é como eles podem trabalhar dinamicamente com valores de estado atualizados. “Eles podem responder às mudanças de estado e se animar para mostrar quaisquer novos dados. Ao contrário de outras bibliotecas, como D3.js, ele não precisa de controle direto do DOM ”, diz Matt Crouch .
Isso é importante porque, com o React, interagir diretamente com o DOM é um antipadrão. Decidir se o React ou sua biblioteca de terceiros deve atualizar os gráficos pode ficar um pouco confuso.
Agora, vamos ver esse dinamismo em ação! Primeiro, vamos mover nossos dados para o estado do nosso componente usando React Hooks e armazená-los como chartData.
const [chartData, setData]=useState (data)
A seguir, vamos adicionar um botão que, quando clicado, adiciona outro objeto de dados para nosso chartData.
const addData=()=> {var d=[… chartData] var obj={year: `$ {maxYear}`, ganhos: Math.random () * (20000-10000) + 10000} d.push (obj) setData (d) maxYear ++}
Nesta função, estamos criando um novo objeto a ser adicionado a chartData, o ano é maxYear, uma variável global que é o ano após o usado mais recentemente. Para ganhos, estou gerando um número aleatório entre 10.000 e 20.000 utilizando Math.random ().
Assim que tivermos nosso objeto construído, podemos adicioná-lo a d (a variável usada para que não t mutate chartData diretamente) e, em seguida, defina-o como nosso novo chartData. A última coisa que precisamos fazer é incrementar maxYear em um. Agora podemos aplicar nossa nova função a um componente React Native Button. Veja abaixo.
Para arrumar, podemos incluir outro botão que restaura nosso gráfico ao seu estado original. onPress chamará nossa função de redefinição, que simplesmente redefine chartData para data e maxYear de volta para 2015.
Agora que nosso aplicativo adiciona dados dinamicamente ao gráfico, vamos dar um passo adiante e permitir que o usuário altere o tipo de gráfico que é usado para visualizar os dados disponíveis. Para isso, podemos armazenar o valor do nosso tipo de gráfico em nosso estado de componente.
const [chart, setChart]=useState (0)
Agora podemos instalar react-native-simple-radio-button e, em seguida, adicione o componente fornecido dessa biblioteca, RadioForm.
Nosso radio_props é um array de objetos. Cada objeto tem um rótulo e um valor que corresponderá aos botões de opção em nosso componente RadioForm.
const radio_props=[{label:’Bar’, value: 0}, {label:’Line’, value: 1 }, {label:’Area’, value: 2}]
Agora que podemos alterar nosso tipo de gráfico, podemos escolher entre os diferentes tipos de gráfico importados, dependendo do que for selecionado.
Vamos ver como fica nosso aplicativo agora que adicionamos algumas novas funcionalidades.
Perfeito! Agora temos um aplicativo dinâmico com várias opções de visualização. Isso funciona bem, mas a renderização condicional é um pouco repetitiva. Vamos tentar refinar isso.
Renderização condicional SECA
A renderização condicional acima não é muito SECA (não se repita). Descobri que a melhor solução é inicializar uma variável e, em seguida, decidir condicionalmente qual gráfico é aplicado à nossa variável antes da declaração de retorno.
var MyChart=
Assim que tivermos nossa lógica de alteração do gráfico, vamos ver como fica com nosso wrapper de gráfico, VictoryChart.
Perfeito. Um suporte a ser observado para o VictoryChart é o domainPadding. É simples, mas achei importante porque sem configurá-lo igual a 10, as barras não foram colocadas corretamente. Observe que o primeiro exemplo abaixo não tem domainPadding e o segundo exemplo tem um domainPadding de 10.
Agora, vamos examinar a propriedade de dados. Em nosso exemplo, nossos objetos de dados são bastante simples, mas se quiser tirar mais proveito deles, você pode adicionar mais pares chave/valor aos objetos de dados.
{x: 1, y: 1, rótulo:”primeiro”, símbolo:”estrela”, opacidade: 0.5, fill:”blue”}
Aqui temos nossas propriedades xey apontando para um número em vez de uma string. Os gráficos podem renderizar os valores xey literalmente (como é o caso acima) ou podem encontrar valores com base em chaves especificadas (como em nosso exemplo, que usa ganhos e ano).
Isso é bom para dados personalizados, porque não precisamos transformar pares de valores-chave para aderir à interpretação literal xey. Tudo o que temos a fazer é especificar quais chaves correspondem aos eixos xey, que podem ser declarados no componente gráfico renderizado condicionalmente.
Você também pode incluir estilos e símbolos para os objetos de dados. No entanto, na versão mais recente do Victory, esses estilos não são aplicados automaticamente, então você precisa adicionar um estilo de suporte ao seu gráfico, que é um objeto que renderiza o estilo de forma funcional.
Veja abaixo.
style={{data: {fill: ({datum})=> datum.fill, opacity: ({datum})=> datum.opacity}}}
É importante observar que com gráficos que renderizam os dados como um conjunto de dados (como VictoryArea e VictoryLine), o datum não é um prop válido. Em vez disso, você escreveria os estilos assim.
style={{data: {fill:”# c43a31″}}}
Se você deseja personalizar melhor as cores e usar um gradiente para o VictoryArea em vez de para uma cor, você pode usar alguns componentes fornecidos por react-native-svg.
import {Defs, LinearGradient, Stop} de”react-native-svg”;
Defs será nosso rapper. Este componente é “usado para incorporar definições que podem ser reutilizadas dentro de uma imagem SVG”. LinearGradient está aninhado dentro de um componente Defs e é usado para gerar o LinearGradient real renderizado no aplicativo. Dentro de LinearGradient, teremos vários componentes de parada. Um elemento
Abaixo está nosso código para incorporar o gradiente linear para nosso gráfico VictoryArea. Ele será colocado logo acima de {MyChart} dentro do VictoryChart.
Agora, para que isso funcione com nosso gráfico de área, precisaremos adicionar algo à nossa proposta de estilo para o componente VictoryArea.
style={{ data: {fill:’url (#gradientStroke)’,…}}}
url (#gradientStroke) é o que conecta o estilo de preenchimento de nosso gráfico de área às várias paradas de cor definidas em nosso componente LinearGradient (com o Gradiente de ID). Aqui está a aparência de nosso gráfico VictoryArea quando implementarmos a IU gradiente linear atual.
No momento, o gradiente não corresponde às nossas categorias específicas. Ele simplesmente renderizará as cores como partes de todo o gráfico em incrementos de 25%. Se você quiser que ele escolha uma cor e responda ao tamanho de cada categoria (como se você adicionar mais dados dinamicamente), você pode usar o código abaixo, junto com uma lista predefinida de cores.
const genStops=()=> {var percent=100/chartData.length//inicializar em 0% var stops=[
Então, dentro de seu componente LinearGradient, em vez de incluir os componentes Stop individuais, você pode apenas incluir {stops}. Agora, as cores de seu gráfico de gradiente correspondem às categorias e não são codificadas e aplicadas ao gráfico como um todo.
O último recurso que gostaria de cobrir é a animação. Este é o adereço que você pode passar para seus gráficos para controlar o estilo de animação no qual eles serão renderizados (em vez de apenas fazer com que sejam renderizados imediatamente).
Para adicionar animação ao seu gráfico, o
A duração refere-se a quanto tempo (ms) a animação leva, easing é o estilo de animação, e onLoad é um objeto que também pode especificar propriedades animadas. Esses adereços são aplicados aos dados que são carregados ou atualizados.
animate={{onLoad: {duration: 1000}, duration: 1000, easing:”bounce”}}
Você pode aplicar o ad animate a qualquer um VictoryChart ou os gráficos filho. Pessoalmente, descobri que havia problemas durante a transição entre os tipos de gráfico quando apliquei as animações ao VictoryChart, ao passo que, se eu as adicionasse diretamente aos gráficos filho, não teria problemas. Veja o gráfico abaixo com as propriedades animadas.
Para obter mais informações sobre animações, verifique o guia de animações para gráficos do Victory.
Conclusão
O Victory é uma biblioteca de visualização de dados robusta e eficaz que não é muito rígida em sua composição. É opinativo, mas também oferece flexibilidade suficiente para que os desenvolvedores tirem mais proveito dos gráficos além da funcionalidade integrada.
O Victory também é vantajoso porque não interage diretamente com o DOM como algumas outras bibliotecas. Isso permite melhor tempo de execução, menos conflito de IU e é ideal para React Native.
Todo o código-fonte deste projeto pode ser encontrado em GitHub .
