1

Cómo agregar gráficos a nuestra aplicación

¿Haz terminado el Curso de Introducción a React Native y estas dispuesto en seguir puliendo el proyecto o simplemente deseas adquirir más conocimiento?

Si es así, espero este tutorial te sirva ya que vamos a incluir una gráfica que representa las estadísticas en las redes sociales de nuestras criptomonedas favoritas, usando la biblioteca Victory-Native.

Como vimos en el proyecto se maneja una gran cantidad de datos, precios, porcentajes y cantidades, así que un componente escencial que no puede faltar en las aplicaciones que se enfocan en la representación visual de datos son lo gráficos, estos componentes se han convertido en un requisito para muchos proyectos de desarrollo en la actualidad.

¡Hagamos nuestro primer gráfico!


Lo primero que haremos será instalar la biblioteca usando el siguiente comando en la terminal dentro del proyecto

npm install victory-native

Victory-native depende de react-native-svg para que aparezcan los gráficos, asi que también procedemos a instalarlo.

npm install react-native-svg

Cuando ambos terminen de instalarse debemos de vincularlos con el siguiente comando:

react-native link react-native-svg

Ahora comencemos con el código, lo primero será crear una carpeta para guardar nuestros gráficos, la cual nombraré “charts”, la ubicaré dentro de la carpeta components para continuar con la estructura del proyecto. Dentro de esta carpeta crearé mi componente, el cual nombraré “BarChart.js”, el cual contendrá el siguiente código:

import React from"react";
import { VictoryBar, VictoryChart, VictoryGroup,  VictoryTheme } from"victory-native";

const BarChart = () => {
    return (

    );
}

exportdefault BarChart;

Utilizamos la etiqueta de VictoryBar para crear las barras de nuestro gráfico, las propiedades que agregamos es el color y grosor de la barras, como podrás ver hemos usado dos VictoryBar debido a que visualizaremos en una la cantidad de subscritores de twitter y en la segunda la información de reddit de nuestras monedas en favoritos con ayuda de un VictoryGroup, al que le agregamos la propiedad horizontal, para visualizar de esta manera nuestras barras.

Lo siguiente es llamar a nuestro componente donde lo queremos visualizar, así que nos ubicaremos en el archivo “FavoritesScreen.js”, por consiguiente importamos de react-native ScrollView para envolver el componente de la lista de favoritos y nuestro gráfico.

import { ..., ScrollView, ...} from'react-native';
import BarChart from'../charts/BarChart';

Abajo de donde llamamos nuestra lista de criptomendas favoritas, agregamos nuestro componente y de una vez le pasamos las propiedades de las criptomonedas favoritas, además podemos agregar el título correspondiente y los estilos deseados.

{
                    favorites.length > 0 ?
                    <View  style={styles.container}>
                        <FlatListdata={favorites}renderItem= {({item}) =><CoinsItemitem={item}onPress={()=> this.handlePress(item)}/>
                            }
                        />
                        <ScrollView ><Viewstyle={styles.chartContainer}><Textstyle={styles.chartTitle}>Social Media Stats</Text><Viewstyle={{ paddingLeft:24}}><Chartfavorites={this.state.favorites}/></View></View></ScrollView></View>
                    : null
                }
						...

const styles = StyleSheet.create({
    container: {
      backgroundColor: Colors.charade,
      flex:1,
    },
    chartContainer:{
      flex:1,
      justifyContent:"center",
      alignItems:"center",
      paddingBottom:16,
    },
    chartTitle:{
        color: Colors.white,
        fontWeight:'bold',
        fontSize:20,

      }
  });

¡Llegó el momento de lo interesante!


En este punto hemos podido visualizar nuestro gráfico de la siguiente manera:

No data chart

Pero aún le hace falta lo más importante. ¡Los datos! 😄

Para lograr que nuestro gráfico obtenga la información como es requerida, primero nos aseguramos que nuestro componente reciba la información de nuestras monedas favoritas.


const BarChart = ({favorites}) => {

...
}

Posteriormente designamos los datos necesarios en el estado del componente, para esto necesitamos importar useState y agregamos el siguiente código:

const [state, setState] = useState({ symbols:[], twitterData:[], redditData:[] });

Los datos los obtendremos haciendo una peticion por cada uno de nuestras monedas favoritas, asi que creamos la siguiente función haciendo uso de Http que creamos en el curso, así que no te olvides de importarlo en el archivo.

const getSocialMediaStats = async ( { id, symbol } )=> {
    consturl = `https://api.coinlore.net/api/coin/social_stats/?id=${id}`const { twitter, reddit } = await Http.instance.get(url);

    return {
      symbol,
      twitter: {x: symbol, y: twitter.followers_count},
      reddit: {x: symbol, y: reddit.subscribers},
    };
  };

Promise.all(favorites.map(getSocialMediaStats))
      .then((data) =>{
        console.log(data)
      })

El resultado obtenido, por cada una de nuestras monedas en favoritos,es de la siguiente manera:

{
			"symbol": "DOGE",
        "reddit": {
            "x": "DOGE",
            "y": 2114467
        },
        "twitter": {
            "x": "DOGE",
            "y": 1957437
        }
 },
{
				"symbol": "ETH",
        "reddit": {
            "x": "ETH",
            "y": 1039767
        },
        "twitter": {
            "x": "ETH",
            "y": 1430052
        }
    }, ... 

Por lo tanto necesitamos que nuestra función transforme la respuesta en los puntos correspondientes, para actualizar el estado del componente y así usarlos para el gráfico de twitter y reddit. Haremos uso de useEffect, ahí colocaremos nuestras promesas, cambiaremos la respuesta para finalmente actualizar nuestro estado.

useEffect(()=> {
    if (state.symbols.length > 0) return;

    Promise.all(favorites.map(getSocialMediaStats))
      .then((data) =>{
        const symbols = data.map( ({ symbol }) => symbol );
        const twitterData = data.map(({ twitter })=> twitter);
        const redditData = data.map(({ reddit })=> reddit);
        setState({symbols, twitterData, redditData} ) 
      })
  })

El resultado será de la siguiente manera:

{
    "symbols": [
                "LTC",
                "DOGE",
                "EOS",
                "TRX",
                "DOT",
                "ETH",
                "XLM"
    ],

    "redditData": [
        { "x": "LTC",   "y": 338775 },
        { "x": "DOGE",  "y": 2114467},
        { "x": "EOS",   "y": 91425  },
        { "x": "TRX",   "y": 113981 },
        { "x": "DOT",   "y": 27364  },
        { "x": "ETH",   "y": 1039767},
        { "x": "XLM",   "y": 195942 }
    ],

    "twitterData": [
        { "x": "LTC", "y": 725103 },
        { "x": "DOGE","y": 1957437},
        { "x": "EOS", "y": 225834 },
        { "x": "TRX", "y": 1070946},
        { "x": "DOT", "y": 499576 },
        { "x": "ETH", "y": 1430052},
        { "x": "XLM", "y": 601680 }
    ]
}

Para finalizar de una vez por todas, necesitamos agregar a cada VictoryBar la propiedad data con la información del estado correspondiente, asimismo agregamos VictoryAxis para cambiar los nombres de los simbolos de nuestras etiquetas del eje.

{{ data: { fill:'lightblue', strokeWidth:5 } }}
            data={state.twitterData}
          />
          {{ data: { fill:"tomato", strokeWidth:5 } }}
            data={state.redditData}
          />
          false}  
            tickValues={state.symbols}
          />

¡Finalmente lo hemos creado! 😉


Así luce nuestra gráfica representado los datos de popularidad en dichas redes sociales:

data chart

Recuerda que puedes agregar o remover las criptomendas de favoritos y estas se visualizaran en el gráfico.

Puedes encontrar el repositorio de este proyecto en GitHub:

¡Ahora es tu turno!💪


Te invito a seguir enriqueciendo tu aplicación con algún otro gráfico, uno de los más usados en el trading para represar las criptodivisas es el gráfico de velas japonesas, la librería que usamos cuenta con este tipo llamado en inglés Candlestick.

Si te gustaría aprender más sobre este mundo de las criptomonedas recuerda que esta la Escuela de Blockchain y Criptomonedas.

#NuncaParesDeAprender 💚

Escribe tu comentario
+ 2