react-simple-heatmap

A simple React component to create responsive heatmap. To be rendered, this heatmap only need a dataset (2D Array) and a parent element which have a width and height. There is more customization available.

Install

yarn add react-simple-heatmap

or

npm install react-simple-heatmap

Demo

Here is a preview.

Obligatory Fields

| Name | Type | description | example | default | |--|--|--|--|--| | data | 2D Array of numbers | 2D Matrix of numbres | [[10,12,33], [2,45,31], [16, 32, 29]] | undefined |

Basic Example:

import React, { Component } from "react"
import Heatmap from "react-simple-heatmap"

export default class App extends Component {

  render() {
    // 2D array of numbers
    const data = [[10, 12, 33],
                  [21, 45, 31],
                  [16, 32, 29]];
    return (
      <div
        style={{ height: "500px", width: "500px" }}>
        <Heatmap
          data={ data }
        />
      </div>
    );
  }
}

Customization fields

| Name | Type | description | example | default | |--|--|---|--|--| | bgColors | Array of 2 colors | Main color using RGB format | ["rgb(255, 11, 11)", "rgb(255, 255, 0)"] | ["rgb(24, 144, 255)", "rgb(255, 255, 255)"] | | xLabels | Array | Display the X-axis labels | ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"] | undefined | | yLabels | Array | Display the Y-axis labels | [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] | undefined | | showLegend | Bollean | Display the heatmap legend. | true | false | | onClick | Function | Adding an handler to cell click | (data, x, y) => alert(`Data: ${ data }, X: ${ x }, Y: ${ y }\`) | undefined | | showData | Bollean | Display data inside each cells. | true | false | | bordered | Bollean | Display a border on the heatmap. | false | true | | xStepLabel | Number | Show the label if his index in the xLabels array modulo xStepLabel equals 0 | 2 | undefined | | yStepLabel | Number | Show the label if his index in the yLabels array modulo yStepLabel equals 0 | 2 | undefined | | showTicks | Boolean or String | Show the ticks lines of the label. Use true to show X-axis and Y-axis ticks, "y" to show only Y-axis ticks and "x" to show only X-axis ticks. | "y" | false | | xLabelsStyle | Object | Style your X-axis labels. | { fontWeight: "bold" } | {} | | yLabelsStyle | Object | Style your Y-axis labels. | { fontWeight: "bold" } | {} | | legendStyle | Object | Style your Legeng labels. | { fontWeight: "bold" } | {} | | borderRadius | String | Add border radius to the heatmap and legend | "4px" | 0 |

Customization example

import React, { Component } from 'react'
import Heatmap from 'react-simple-heatmap'

// Creating a 2D array (7 x 24)
const size = 7;
const data = [];
for(let i = 0; i < size; i++){
    const temp = [];
    for(let i = 0; i < 24; i++){
        temp.push(Math.round(Math.random() * 100));
    }
    data.push(temp);
}

export default class App extends Component {

  render() {
        // Create an array of for the Y labels
        const yLabels = [];
        for(let i = 0; i < 24; i++){
            yLabels.push(i+1 + " h");
        }

    return (
      <div className="App">
                <div
                    style={{ height: "500px", width: "800px", margin: "4rem auto" }}
                >
                    {
                        data.length > 0 && (
                            <Heatmap
                              data={ data }
                                bgColors={ ["rgb(255, 11, 11)", "rgb(255, 255, 0)"] }
                                xLabels={ ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"] }
                                yLabels={ yLabels }
                                showLegend={ true }
                                xStepLabel={ 2 }
                                yStepLabel={ 2 }
                                showTicks={ "x" }
                                xLabelsStyle={{ fontWeight: "bold", fontSize: "11px" }}
                                yLabelsStyle={{ fontWeight: "bold" }}
                                legendStyle={{ fontWeight: "bold" }}
                                bordered={ false }
                                borderRadius={ "4px" }
                                onClick={ (data, x, y) => alert(`Data: ${ data }, X: ${ x }, Y: ${ y }`) }
                            />
                        )
                    }
                </div>
      </div>
    );
  }
}

License

MIT © Julien Rioux