Using my app is also a way to support me:
Scap: Screenshot & Markup Edit Screen Test Deskmark Keyzer Vidwall Hub Deskmark Keyzer Vidwall Hub VidCrop Vidwall Mousio Hint Mousio Musicer Audioer FileSentinel FocusCursor Videoer KeyClicker DayBar Iconed Mousio Quick RSS Quick RSS Web Serve Copybook Generator DevTutor for SwiftUI RegexMate Time Passage Iconize Folder Textsound Saver Create Custom Symbols DevHub Resume Revise Palette Genius Symbol Scribe
Scap: Screenshot & Markup Edit Screen Test Deskmark Keyzer Vidwall Hub Deskmark Keyzer Vidwall Hub VidCrop Vidwall Mousio Hint Mousio Musicer Audioer FileSentinel FocusCursor Videoer KeyClicker DayBar Iconed Mousio Quick RSS Quick RSS Web Serve Copybook Generator DevTutor for SwiftUI RegexMate Time Passage Iconize Folder Textsound Saver Create Custom Symbols DevHub Resume Revise Palette Genius Symbol Scribe
Buy me a coffee Build & Deploy Coverage Status npm version npm bundle size Open in Gitpod
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 --saveIf using Next.js, you will need to use the next-remove-imports package to avoid errors, see issue #69.
Basic usage example, Please pay warning to the time setting.
(削除) -> 2016年01月11日 (削除ここまで)2016年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 Demo
Set 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 Demo
Dynamic 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 Demo
Set 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 Demo
A 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 Demo
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 ( <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 Demo
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 ( <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 start
production
Builds the app for production to the build folder.
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.