React component create calendar heatmap to visualize time series data, a la github contribution graph.
npm install @uiw/react-heat-mapHeatMap 日历热图
===






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

``bash`Not dependent on uiw.
npm install @uiw/react-heat-map --savenext-remove-imports
If using Next.js, you will need to use the package to avoid errors, see issue #69.
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 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 (
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 (
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 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 })),2016/02/${idx + 10}
...[...Array(17)].map((_, idx) => ({ date: , 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 (
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 (
width={600}
value={value}
legendCellSize={size}
startDate={new Date('2016/01/01')}
/>
)
};
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 | | - |
| legendRender | Single legend block re-render | (props: React.SVGProps | - |Development
developmentRuns 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
`
productionBuilds 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!
As always, thanks to our amazing contributors!
Made with github-action-contributors.
Licensed under the MIT License.