HeatMap 日历热图

A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. Try it out on website example.

Install

1# Not dependent on uiw.
2npm install @uiw/react-heat-map --save

If using Next.js, you will need to use the next-remove-imports package to avoid errors, see issue #69.

Basic Usage

Basic usage example, Please pay warning to the time setting.

⚠️ Example: 2016-01-11 -> 2016/01/11, Support Safari

1import React from 'react';
2import HeatMap from '@uiw/react-heat-map';
3
4const value = [
5  { date: '2016/01/11', count: 2 },
6  { date: '2016/01/12', count: 20 },
7  { date: '2016/01/13', count: 10 },
8  ...[...Array(17)].map((_, idx) => ({
9    date: `2016/02/${idx + 10}`, count: idx, content: ''
10  })),
11  { date: '2016/04/11', count: 2 },
12  { date: '2016/05/01', count: 5 },
13  { date: '2016/05/02', count: 5 },
14  { date: '2016/05/04', count: 11 },
15];
16
17const Demo = () => {
18  return (
19    <div>
20      <HeatMap
21        value={value}
22        weekLabels={['', 'Mon', '', 'Wed', '', 'Fri', '']}
23        startDate={new Date('2016/01/01')}
24      />
25    </div>
26  )
27};
28
29export default Demo

Set Color

Set the theme color style.

1import React from 'react';
2import HeatMap from '@uiw/react-heat-map';
3
4const value = [
5  { date: '2016/01/11', count:2 },
6  { date: '2016/04/12', count:2 },
7  { date: '2016/05/01', count:17 },
8  { date: '2016/05/02', count:5 },
9  { date: '2016/05/03', count:27 },
10  { date: '2016/05/04', count:11 },
11  { date: '2016/05/08', count:32 },
12];
13
14const Demo = () => {
15  return (
16    <HeatMap
17      value={value}
18      width={600}
19      style={{ color: '#ad001d', '--rhm-rect-active': 'red' }}
20      startDate={new Date('2016/01/01')}
21      panelColors={{
22        0: '#f4decd',
23        7: '#e4b293',
24        14: '#d48462',
25        21: '#c2533a',
26        28: '#ad001d',
27        35: '#6c0012'
28      }}
29    />
30  )
31};
32export default Demo

Dynamic color based on maximum value

1import React from 'react';
2import HeatMap from '@uiw/react-heat-map';
3
4const value = [
5  { date: '2016/01/11', count:2 },
6  { date: '2016/04/12', count:2 },
7  { date: '2016/05/01', count:17 },
8  { date: '2016/05/02', count:5 },
9  { date: '2016/05/03', count:27 },
10  { date: '2016/05/04', count:11 },
11  { date: '2016/05/08', count:32 },
12];
13
14const Demo = () => {
15  return (
16    <HeatMap
17      value={value}
18      width={600}
19      style={{ color: '#ad001d', '--rhm-rect-active': 'red' }}
20      startDate={new Date('2016/01/01')}
21      panelColors={['#f4decd', '#e4b293', '#d48462', '#c2533a', '#ad001d', '#6c0012']}
22    />
23  )
24};
25export default Demo

Set Rect Style

Set the radius of the rect.

1import React, { useState } from 'react';
2import HeatMap from '@uiw/react-heat-map';
3
4const value = [
5  { date: '2016/01/11', count:2 },
6  ...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx })),
7  ...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx })),
8  { date: '2016/04/12', count:2 },
9  { date: '2016/05/01', count:5 },
10  { date: '2016/05/02', count:5 },
11  { date: '2016/05/03', count:1 },
12  { date: '2016/05/04', count:11 },
13  { date: '2016/05/08', count:32 },
14];
15
16const Demo = () => {
17  const [range, setRange] = useState(5)
18  return (
19    <div>
20      <input
21        type="range"
22        min="0"
23        max="5"
24        step="0.1"
25        value={range}
26        onChange={(e) => setRange(e.target.value)}
27      /> {range}
28      <HeatMap
29        value={value}
30        width={600}
31        style={{ '--rhm-rect': '#b9b9b9' }}
32        startDate={new Date('2016/01/01')}
33        legendRender={(props) => <rect {...props} y={props.y + 10} rx={range} />}
34        rectProps={{
35          rx: range
36        }}
37      />
38    </div>
39  )
40};
41export default Demo

Tooltip

A simple text popup tip.

1import React from 'react';
2import Tooltip from '@uiw/react-tooltip';
3import HeatMap from '@uiw/react-heat-map';
4
5const value = [
6  { date: '2016/01/11', count:2 },
7  ...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx, })),
8  ...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx, })),
9  { date: '2016/04/12', count:2 },
10  { date: '2016/05/01', count:5 },
11  { date: '2016/05/02', count:5 },
12  { date: '2016/05/03', count:1 },
13  { date: '2016/05/04', count:11 },
14  { date: '2016/05/08', count:32 },
15];
16
17const Demo = () => {
18  return (
19    <HeatMap
20      value={value}
21      width={600}
22      startDate={new Date('2016/01/01')}
23      rectRender={(props, data) => {
24        // if (!data.count) return <rect {...props} />;
25        return (
26          <Tooltip placement="top" content={`count: ${data.count || 0}`}>
27            <rect {...props} />
28          </Tooltip>
29        );
30      }}
31    />
32  )
33};
34export default Demo

Show/Hide Legend

1import React, { useState } from 'react';
2import HeatMap from '@uiw/react-heat-map';
3
4const value = [
5  { date: '2016/01/11', count:2 },
6  ...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx })),
7  ...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx })),
8  { date: '2016/04/12', count:2 },
9  { date: '2016/05/01', count:5 },
10  { date: '2016/05/02', count:5 },
11  { date: '2016/05/03', count:1 },
12  { date: '2016/05/04', count:11 },
13  { date: '2016/05/08', count:32 },
14];
15
16const Demo = () => {
17  const [size, setSize] = useState(0)
18  return (
19    <div>
20      <label style={{ userSelect: 'none' }}>
21        <input
22          type="checkbox"
23          checked={size === 0}
24          onChange={(e) => setSize(e.target.checked ? 0 : 12)}
25        />
26        {size === 0 ? ' Hide' : ' Show'} Legend
27      </label>
28      <HeatMap
29        width={600}
30        value={value}
31        legendCellSize={size}
32        startDate={new Date('2016/01/01')}
33      />
34    </div>
35  )
36};
37export default Demo

Selected Rect

1import React, { useState } from 'react';
2import HeatMap from '@uiw/react-heat-map';
3
4const value = [
5  { date: '2016/01/11', count:2 },
6  ...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx })),
7  ...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx })),
8  { date: '2016/04/12', count:2 },
9  { date: '2016/05/01', count:5 },
10  { date: '2016/05/02', count:5 },
11  { date: '2016/05/03', count:1 },
12  { date: '2016/05/04', count:11 },
13  { date: '2016/05/08', count:32 },
14];
15
16const Demo = () => {
17  const [selected, setSelected] = useState('')
18  return (
19    <div>
20      <HeatMap
21        width={600}
22        value={value}
23        startDate={new Date('2016/01/01')}
24        rectRender={(props, data) => {
25          if (selected !== '') {
26            props.opacity = data.date === selected ? 1 : 0.45
27          }
28          return (
29            <rect {...props} onClick={() => {
30              setSelected(data.date === selected ? '' : data.date);
31            }} />
32          );
33        }}
34      />
35    </div>
36  )
37};
38export 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'`
rectProps	Grid node attribute settings	React.SVGProps<SVGRectElement>	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<number, string> | string[]	['var(--rhm-rect, #EBEDF0)','#C6E48B','#7BC96F', '#239A3B', '#196127']
rectRender	Single day block re-render	<E = SVGRectElement>(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<SVGRectElement>) => React.ReactNode	-

Development

development

Runs the project in development mode.

1npm install

1# Step 1, run first, listen to the component compile and output the .js file
2# listen for compilation output type .d.ts file
3npm run watch
4# Step 2, development mode, listen to compile preview website instance
5npm run start

production

Builds the app for production to the build folder.

1npm run build
2npm 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.

License

Licensed under the MIT License.