react-light-heatmap

A React component for heatmap in grid layout using div.

Demo

Installation

yarn add react-light-heatmap  

or

npm install react-light-heatmap --save  

Usage

Mandatory fields

|Name |Type|Sample| |---|---|---| |xLabels|Array of string|['1am', '2am', '3am']| |yLabels|Array of string|['Sun', 'Mon']| |data|2D Array of numbers having yLabels.length rows and xLabels.length rows|[[2,3,5][5,6,9]]|

const xLabels = new Array(24).fill(0).map((_, i) => `${i}`);  
const yLabels = ['Sun', 'Mon', 'Tue'];  
const data = new Array(yLabels.length)  
  .fill(0)  
  .map(() => new Array(xLabels.length).fill(0).map(() => Math.floor(Math.random() * 100)));  
  
ReactDOM.render(  
  <HeatMap  
    xLabels={xLabels}  
    yLabels={yLabels}  
    data={data}  
  />,  
  document.getElementById('app')  
);  

Configuration

|Name |Type|Description|Default Value|
|---|---|---|---|
|components|object|Replace default component|default components |background|string|The base color for the heatmap|"#239a3b"|
|height|number|Height of each cell of the heatmap in px|30|
|onClick|function|Adds an handler to cell click|undefined|
|squares|boolean|If set to true will render cells as square|false|
|xLabelWidth|number|Width of the x label area in pixel|60|
|xLabelsLocation|string|Location of y labels. It can be top or bottom|"top"|
|unit|string|Unit to display next to the value on hover||
|cellStyle|function|To set custom cell style. It is useful for using own colour scheme||
|getValue|function|To get value from provided data|value => value|

Example

  
const xLabels = new Array(24).fill(0).map((_, i) => `${i}`);  
  
const yLabels = ["Sun", "Mon", "Tue"];  
const data = new Array(yLabels.length)  
  .fill(0)  
  .map(() =>  
    new Array(xLabels.length).fill(0).map(() => Math.floor(Math.random() * 100))  
  );  
  
ReactDOM.render(  
  <HeatMap  
    xLabels={xLabels}  
    yLabels={yLabels}  
    xLabelWidth={50}  
    data={data}  
    squares  
    onClick={(x, y) => alert(`Clicked ${x}, ${y}`)}  
    cellStyle={(background, value, min, max, data, x, y) => ({  
      background: `rgb(66, 86, 244, ${1 - (max - value) / (max - min)})`,  
      fontSize: "11px",  
    })}  
    cellRender={value => value && `${value}%`}  
  />,  
  document.getElementById("app")  
);  

Replacing components

Cell Component responsible for displaing a cell in grid. Props:

type = {
    value: number,
    x: number,
    y: number,
    height: number
}

All other props will be passed to the div component

CellContent Component responsible for displaing a content inside cell component. Props:

type = {
    value: number
}

By default display nothing

XLabel Component responsible for displaing X label Props:

type = {
    value: string|number,
    squares: boolean,
    index: number,
    height: number
}

Default render

<div  
  style={{  
	  flex: squares ? 'none' : 1,  
	  textAlign: 'center',  
	  width: squares ? `${height + 1}px` : 'undefined',  
	  ...style  
  }}  
>  
 {value}  
</div>

YLabel Component responsible for displaing Y label Props:

type = {
    value: string|number,
    squares: boolean,
    index: number,
    height: number
}

Default render

<div  
  style={{  
	  textAlign: 'center',  
	  paddingRight: '5px',  
	  paddingTop: `${height / 3.7}px`,  
	  ...style  
  }} 
>  
 {value}  
</div>

For developers

New build

yarn build  

Run dev server

yarn start

Run test

npm run test