HeatMap 日历热图
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://x.com/jaywcjlove)
[](https://github.com/uiwjs/react-heat-map/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/@uiw/react-heat-map)
[](https://www.npmjs.com/package/@uiw/react-heat-map)
[](https://gitpod.io/#https://github.com/uiwjs/react-codemirror)
A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. Try it out on [website example](https://uiwjs.github.io/react-heat-map/).
[](https://uiwjs.github.io/react-heat-map)
## Install
```bash
# Not dependent on uiw.
npm install @uiw/react-heat-map --save
```
If using Next.js, you will need to use the [`next-remove-imports`](https://www.npmjs.com/package/next-remove-imports) package to avoid errors, see [issue #69](https://github.com/uiwjs/react-heat-map/issues/69).
## Basic Usage
Basic usage example, Please pay warning to the time setting.
⚠️ Example: ~~`2016-01-11`~~ -> `2016/01/11`, Support `Safari`
```jsx mdx:preview
import React from 'react';
import HeatMap from '@uiw/react-heat-map';
const value = [
{ date: '2016/01/11', count: 2 },
{ date: '2016/01/12', count: 20 },
{ date: '2016/01/13', count: 10 },
...[...Array(17)].map((_, idx) => ({
date: `2016/02/${idx + 10}`, count: idx, content: ''
})),
{ date: '2016/04/11', count: 2 },
{ date: '2016/05/01', count: 5 },
{ date: '2016/05/02', count: 5 },
{ date: '2016/05/04', count: 11 },
];
const Demo = () => {
return (
)
};
export default Demo
```
## Set Color
Set the theme color style.
```jsx mdx:preview
import React from 'react';
import HeatMap from '@uiw/react-heat-map';
const value = [
{ date: '2016/01/11', count:2 },
{ date: '2016/04/12', count:2 },
{ date: '2016/05/01', count:17 },
{ date: '2016/05/02', count:5 },
{ date: '2016/05/03', count:27 },
{ date: '2016/05/04', count:11 },
{ date: '2016/05/08', count:32 },
];
const Demo = () => {
return (
)
};
export default Demo
```
Dynamic color based on maximum value
```jsx mdx:preview
import React from 'react';
import HeatMap from '@uiw/react-heat-map';
const value = [
{ date: '2016/01/11', count:2 },
{ date: '2016/04/12', count:2 },
{ date: '2016/05/01', count:17 },
{ date: '2016/05/02', count:5 },
{ date: '2016/05/03', count:27 },
{ date: '2016/05/04', count:11 },
{ date: '2016/05/08', count:32 },
];
const Demo = () => {
return (
)
};
export default Demo
```
## Set Rect Style
Set the radius of the rect.
```jsx mdx:preview
import React, { useState } from 'react';
import HeatMap from '@uiw/react-heat-map';
const value = [
{ date: '2016/01/11', count:2 },
...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx })),
...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx })),
{ date: '2016/04/12', count:2 },
{ date: '2016/05/01', count:5 },
{ date: '2016/05/02', count:5 },
{ date: '2016/05/03', count:1 },
{ date: '2016/05/04', count:11 },
{ date: '2016/05/08', count:32 },
];
const Demo = () => {
const [range, setRange] = useState(5)
return (
setRange(e.target.value)}
/> {range}
}
rectProps={{
rx: range
}}
/>
)
};
export default Demo
```
## Tooltip
A simple text popup tip.
```jsx mdx:preview
import React from 'react';
import Tooltip from '@uiw/react-tooltip';
import HeatMap from '@uiw/react-heat-map';
const value = [
{ date: '2016/01/11', count:2 },
...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx, })),
...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx, })),
{ date: '2016/04/12', count:2 },
{ date: '2016/05/01', count:5 },
{ date: '2016/05/02', count:5 },
{ date: '2016/05/03', count:1 },
{ date: '2016/05/04', count:11 },
{ date: '2016/05/08', count:32 },
];
const Demo = () => {
return (
{
// if (!data.count) return ;
return (
);
}}
/>
)
};
export default Demo
```
## Show/Hide Legend
```jsx mdx:preview
import React, { useState } from 'react';
import HeatMap from '@uiw/react-heat-map';
const value = [
{ date: '2016/01/11', count:2 },
...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx })),
...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx })),
{ date: '2016/04/12', count:2 },
{ date: '2016/05/01', count:5 },
{ date: '2016/05/02', count:5 },
{ date: '2016/05/03', count:1 },
{ date: '2016/05/04', count:11 },
{ date: '2016/05/08', count:32 },
];
const Demo = () => {
const [size, setSize] = useState(0)
return (
)
};
export default Demo
```
## Selected Rect
```jsx mdx:preview
import React, { useState } from 'react';
import HeatMap from '@uiw/react-heat-map';
const value = [
{ date: '2016/01/11', count:2 },
...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx })),
...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx })),
{ date: '2016/04/12', count:2 },
{ date: '2016/05/01', count:5 },
{ date: '2016/05/02', count:5 },
{ date: '2016/05/03', count:1 },
{ date: '2016/05/04', count:11 },
{ date: '2016/05/08', count:32 },
];
const Demo = () => {
const [selected, setSelected] = useState('')
return (
{
if (selected !== '') {
props.opacity = data.date === selected ? 1 : 0.45
}
return (
{
setSelected(data.date === selected ? '' : data.date);
}} />
);
}}
/>
)
};
export default Demo
```
## Props
| Property | Description | Type | Default |
| ---- | ---- | ---- | ---- |
| `value` | Data to be displayed, **required** | Array | `[]` |
| `rectSize` | Grid size | number | `11` |
| `legendCellSize` | Size of the legend cells, in pixel. Value equal to `0` hide legend. | number | `11` |
| `startDate` | Start date | Date | `new Date()` |
| `endDate` | End date | Date | - |
| `space` | Interval between grid sizes | number | `2` |
| `monthPlacement` | position of month labels | `'top' | 'bottom'` | `top` |
| `rectProps` | Grid node attribute settings | `React.SVGProps` | `2` |
| `weekLabels` | Week display | string[] | `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']` |
| `monthLabels` | Month display | string[] | `['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']` |
| `panelColors` | Backgroud color of active colors | `Record` \| `string[]` | `['var(--rhm-rect, #EBEDF0)','#C6E48B','#7BC96F', '#239A3B', '#196127']` |
| `rectRender` | Single `day` block re-render | `(data: E & { key: number }, valueItem: HeatMapValue & { date: string, column: number, row: number, index: number }) => React.ReactElement` | - |
| `legendRender` | Single `legend` block re-render | `(props: React.SVGProps) => React.ReactNode` | - |
## Development
**`development`**
Runs the project in development mode.
```bash
npm install
```
```bash
# Step 1, run first, listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run start
```
**`production`**
Builds the app for production to the build folder.
```bash
npm run build
npm run doc
```
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
## Contributors
As always, thanks to our amazing contributors!
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
