react-grid-heatmap

A React component to visualize heatmap in a grid layout without using any 3rd party libraries.

Demo - Try in Sandbox

!Screenshot

  

Install

``bash
npm install --save react-grid-heatmap
`

Usage

Mandatory fields

| Name | Type | Sample |
| ---- | ------------ | ----------------------------- |
| data | number[][] | [[1,2,3], [4,5,6], [7,8,9]] |

`tsx
import React from 'react'
import { HeatMapGrid } from 'react-grid-heatmap'

const xLabels = new Array(24).fill(0).map((_, i) => ${i})
const yLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']
const data = new Array(yLabels.length)
.fill(0)
.map(() =>
new Array(xLabels.length).fill(0).map(() => Math.floor(Math.random() * 50 + 50))
)

const App = () => {
return (
data={data}
xLabels={xLabels}
yLabels={yLabels}
/>
)
}

export default App
`

Optional Parameters

| Name | Type | Description/Example | Default Value |
| :----------- | :------- | :------------------------------------------------------ | :------------ |
| xLabels | string[] | ['1am', '2am', '3am'] | null |
| yLabels | string[] | ['Sun', 'Mon'] | null |
| cellHeight | string | Height of each cell of the heatmap | "2rem" |
| onClick | function | Adds an handler to cell click
(x, y) => void | null |
| square | boolean | If set to true will render cells as square | false |
| xLabelsPos | string | Location of y labels. It can be top or bottom | "top" |
| yLabelsPos | string | Location of y labels. It can be left or right | "left" |
| cellRender | function | Render custom content in cell.
(x, y, value) => () | null |
| cellStyle | function | To set custom cell style
(x, y, ratio) => {} | null |
| xLabelsStyle | function | To set custom cell style
(index) => {} | null |
| yLabelsStyle | function | To set custom cell style
(index) => {} | null |


A sample code with all parameters
`js
import React from 'react'
import { HeatMapGrid } from 'react-grid-heatmap'

const xLabels = new Array(24).fill(0).map((_, i) => ${i})
const yLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']
const data = new Array(yLabels.length)
.fill(0)
.map(() =>
new Array(xLabels.length)
.fill(0)
.map(() => Math.floor(Math.random() * 50 + 50))
)

const App = () => {
return (
style={{
width: '100%'
}}
>
data={data}
xLabels={xLabels}
yLabels={yLabels}
// Render cell with tooltip
cellRender={(x, y, value) => (