A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. Try it out on website example.
# Not dependent on uiw.
npm install @uiw/react-heat-map --saveBasic usage example, Please pay warning to the time setting.
2016-01-112016/01/11, Support Safari
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 (
<div>
<HeatMap
value={value}
weekLabels={['', 'Mon', '', 'Wed', '', 'Fri', '']}
startDate={new Date('2016/01/01')}
/>
</div>
)
};
export default DemoSet the theme color style.
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 (
<HeatMap
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 DemoDynamic color based on maximum value
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 (
<HeatMap
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 DemoSet the radius of the rect.
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 (
<div>
<input
type="range"
min="0"
max="5"
step="0.1"
value={range}
onChange={(e) => setRange(e.target.value)}
/> {range}
<HeatMap
value={value}
width={600}
style={{ '--rhm-rect': '#b9b9b9' }}
startDate={new Date('2016/01/01')}
legendRender={(props) => <rect {...props} y={props.y + 10} rx={range} />}
rectProps={{
rx: range
}}
/>
</div>
)
};
export default DemoA simple text popup tip.
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 (
<HeatMap
value={value}
width={600}
startDate={new Date('2016/01/01')}
rectRender={(props, data) => {
// if (!data.count) return <rect {...props} />;
return (
<Tooltip placement="top" content={`count: ${data.count || 0}`}>
<rect {...props} />
</Tooltip>
);
}}
/>
)
};
export default Demoimport 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 (
<div>
<label style={{ userSelect: 'none' }}>
<input
type="checkbox"
checked={size === 0}
onChange={(e) => setSize(e.target.checked ? 0 : 12)}
/>
{size === 0 ? ' Hide' : ' Show'} Legend
</label>
<HeatMap
width={600}
value={value}
legendCellSize={size}
startDate={new Date('2016/01/01')}
/>
</div>
)
};
export default Demoimport 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 (
<div>
<HeatMap
width={600}
value={value}
startDate={new Date('2016/01/01')}
rectRender={(props, data) => {
if (selected !== '') {
props.opacity = data.date === selected ? 1 : 0.45
}
return (
<rect {...props} onClick={() => {
setSelected(data.date === selected ? '' : data.date);
}} />
);
}}
/>
</div>
)
};
export default Demo| 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
Runs the project in development mode.
npm install# 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 startproduction
Builds the app for production to the build folder.
npm run build
npm run docThe 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.
