Aprende a crear un impresionante componente de mapa de calor SVG basado en ReactJS.

Creación de un gráfico de mapa de calor de calendario (contribuciones de Github como) en ReactJS

Un gráfico de mapa de calor representa algunos datos en un formato tabular con algunos rangos de color definidos como bajo, promedio y alto. Por lo general, es una variación del mapa de calor tradicional donde los datos están en el calendario (generalmente el mes en la columna y los días de la semana en la fila, cada punto de datos es una fecha) y la codificación de color se muestra utilizando una métrica de su propio interés que generalmente varía según día.

Si está dispuesto a implementar un gráfico de este tipo en su proyecto ReactJS, le mostraremos cómo puede lograrlo utilizando el componente React Calendar Heatmap.

1. Instale React Calendar Heatmap

React Calendar Heatmap te permite insertar un componente de mapa de calor de calendario svg, inspirado en el gráfico de contribución de github. El componente se expande al tamaño del contenedor y es súper configurable.

Para instalar este componente en su proyecto, abra una nueva terminal, cambie al directorio de su proyecto e instálelo ejecutando el siguiente comando:

npm install react-calendar-heatmap

Después de la instalación, podrá importar el componente en su código con  react-calendar-heatmap. Para obtener más información sobre este componente, no olvide visitar su repositorio oficial en Github aquí .

2. Agregar hoja de estilo predeterminada

Como segundo paso, debe cargar la estructura principal del CSS que proporcionará una estructura de mapa de calor al componente. Puede utilizar una CDN gratuita:

<!-- CSS principal del mapa de calor -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/patientslikeme/react-calendar-heatmap/d0a7d802/src/styles.css">

O descargue una copia del archivo styles.css del repositorio y agréguelo en su proyecto con JS (vía importación) o con una <link>etiqueta.

Cambiar los colores del mapa de calor

Para definir sus colores para el mapa de calor, es necesario agregar algo de CSS adicional, ya sea cargando un nuevo archivo CSS o simplemente creando un bloque de estilo en su plantilla HTML. Hay un total de 4 reglas que definen el color de cada escala:

.react-calendar-heatmap .color-scale-1 { 
    fill: #d6e685; 
}
.react-calendar-heatmap .color-scale-2 { 
    fill: #8cc665; 
}
.react-calendar-heatmap .color-scale-3 {
    fill: #44a340; 
}
.react-calendar-heatmap .color-scale-4 { 
    fill: #1e6823; 
}

3. Implementación de su primer mapa de calor

Finalmente, todo lo que necesita hacer para incluir el mapa de calor en su vista es importar el componente y proporcionar las propiedades necesarias para inicializarlo. Como punto básico, debe proporcionar los datos que se procesarán, estos datos deben almacenarse dentro de una matriz y cada vez es un objeto literal con una sola propiedad, a saber, la fecha. Esta fecha como cadena debe poder ser interpretada por la clase Date de JavaScript y una propiedad de recuento que indique la cantidad de elementos en la fecha. Además, debe proporcionar la cantidad de días que se mostrarán en el gráfico, en este caso mostraremos un año completo (365 días). Como se mencionó, el gráfico se expande para adaptarse al contenedor principal, por lo que lo envolveremos dentro de un div de 700px de ancho:

import React from 'react';

// Importar el mapa de calor del calendario
import CalendarHeatmap from 'react-calendar-heatmap';

export default class App extends React.Component {

    constructor(props, context) {
        super(props, context);
        
        this.state = {
            // Algunas fechas para renderizar en el mapa de calor
            values: [
                { date: '2016-01-01', count: 4 },
                { date: '2016-01-22', count: 1 },
                { date: '2016-01-30', count: 3 },
                { date: new Date(2016, 0, 4)}
            ],
            // Cuántos días deben mostrarse
            numDays: 365
        }

        this.onClick = this.onClick.bind(this);
    }
 
    onClick(value) {
        console.log(value);
    }

    render() {
        return (
            <div style={{width: 700}}>
                <CalendarHeatmap
                    endDate={new Date('2017-01-01')}
                    numDays={this.state.numDays}
                    values={this.state.values}
                    onClick={this.onClick}
                />
            </div>
        );
    }
}

Como resultado, con algunos datos ficticios, el componente generaría un gráfico simple. Si está dispuesto a realizar la prueba, puede crear un generador de fechas aleatorio para llenar el calendario, por lo que en lugar de proporcionar una matriz con fechas, puede proporcionar este método como valor que devuelve una matriz con datos ficticios:

function getDummyDates(from, to, numberDates) {
    numberDates = numberDates || 50;
    let result = [];

    for(let i = 0; i < numberDates;i++){
        result.push(
            {
                date: new Date(from.getTime() + Math.random() * (to.getTime() - from.getTime())),
                count: Math.floor(Math.random() * 6)
            }
        );
    }

    return result;
}

this.state = {
    // Algunas fechas para renderizar en el mapa de calor
    values: getDummyDates(new Date(2016, 0, 1), new Date(2017, 2, 1), 500),
    // Cuántos días deben mostrarse
    numDays: 365
};

El gráfico de resultados sería algo como:

Heatmap Github Like

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores