HeatMap 日历热图
===


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


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 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

`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 (
value={value}
width={600}
style={{ color: '#ad001d', '--rhm-rect-active': 'red' }}
startDate={new Date('2016/01/01')}
panelColors={{
0: '#f4decd',
7: '#e4b293',
14: '#d48462',
21: '#c2533a',
28: '#ad001d',
35: '#6c0012'
}}
/>
)
};
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 (
value={value}
width={600}
style={{ color: '#ad001d', '--rhm-rect-active': 'red' }}
startDate={new Date('2016/01/01')}
panelColors={['#f4decd', '#e4b293', '#d48462', '#c2533a', '#ad001d', '#6c0012']}
/>
)
};
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 (



)
};
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 (
value={value}
width={600}
startDate={new Date('2016/01/01')}
rectRender={(props, data) => {
// if (!data.count) return ;
return (
count: ${data.count || 0}}>


);
}}
/>
)
};
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 (



width={600}
value={value}
startDate={new Date('2016/01/01')}
rectRender={(props, data) => {
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.

License

Licensed under the MIT License.