https://github.com/arunghosh/react-heatmap-grid
A react component for heatmap visualisation in grid layout
https://github.com/arunghosh/react-heatmap-grid
component heatmap react reactjs
Last synced: 6 months ago
JSON representation
A react component for heatmap visualisation in grid layout
- Host: GitHub
- URL: https://github.com/arunghosh/react-heatmap-grid
- Owner: arunghosh
- License: mit
- Created: 2017-12-08T15:14:48.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-09-09T12:45:47.000Z (about 1 year ago)
- Last Synced: 2025-03-27T17:14:20.174Z (6 months ago)
- Topics: component, heatmap, react, reactjs
- Language: JavaScript
- Homepage: https://codesandbox.io/s/r4rvwkl3yn
- Size: 1.66 MB
- Stars: 79
- Watchers: 4
- Forks: 42
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-heatmap-grid
Created a [new version](https://github.com/arunghosh/react-grid-heatmap) of this having smaller size and a better interface. Check it out.
A React component for heatmap in grid layout using `div`.
**Live example [here](https://codesandbox.io/s/r4rvwkl3yn)**.
## Installation
```
yarn add react-heatmap-grid
```
or
```
npm install react-heatmap-grid --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]]` |
```javascript
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(
,
document.getElementById("app")
);
```
**Configuration**
| Name | Type | Description | Default Value |
| ----------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| background | string | The base color for the heatmap | `"#329fff"` |
| 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` |
| yLabelWidth | number | Width of the y label area in pixel | `40` |
| yLabelTextAlign | string | Text alignment of the yLabels | `"right"` |
| xLabelsLocation | string | Location of y labels. It can be top or bottom | `"top"` |
| xLabelsVisibility | `[boolean]` | Array of bool conveying which x labels to display. For ex: `[true, false, true, false]` means the 1st and the 3rd labels will be displayed and the 2nd and 4th will be hidden | |
| unit | string | Unit to display next to the value on hover | |
| cellRender | function | Render custom content in cell | `() => null` |
| cellStyle | function | To set custom cell style. It is useful for using own colour scheme | |
| title | function | To render custom title in each cell | `${value} ${unit}` |
Example
```javascript
const xLabels = new Array(24).fill(0).map((_, i) => `${i}`);
// Display only even labels
const xLabelsVisibility = new Array(24)
.fill(0)
.map((_, i) => (i % 2 === 0 ? true : false));
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(
alert(`Clicked ${x}, ${y}`)}
cellStyle={(background, value, min, max, data, x, y) => ({
background: `rgba(66, 86, 244, ${1 - (max - value) / (max - min)})`,
fontSize: "11px",
})}
cellRender={(value) => value && `${value}%`}
title={(value, unit) => `${value}`}
/>,
document.getElementById("app")
);
```
### For developers
**New build**
```
npm run build
```
**Run dev server**
```
npm run dev
```
**Run test**
```
npm run test
```
