uiwjs/react-heat-mapPublic

NotificationsYou must be signed in to change notification settings
Fork27
Star249

A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.

License

MIT license

249 stars 27 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 187 Commits
.github		.github
.husky		.husky
core		core
www		www
.gitignore		.gitignore
.gitpod.yml		.gitpod.yml
.prettierignore		.prettierignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
lerna.json		lerna.json
package.json		package.json
renovate.json		renovate.json
tsconfig.json		tsconfig.json

Repository files navigation

^Using my app is also a way tosupport me:

HeatMap 日历热图

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

Install

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

If using Next.js, you will need to use thenext-remove-imports package to avoid errors, seeissue #69.

Basic Usage

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

⚠️ Example:~~2016-01-11~~ ->2016/01/11, SupportSafari

importReactfrom'react';importHeatMapfrom'@uiw/react-heat-map';constvalue=[{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},];constDemo=()=>{return(<div><HeatMapvalue={value}weekLabels={['','Mon','','Wed','','Fri','']}startDate={newDate('2016/01/01')}/></div>)};exportdefaultDemo

Set Color

Set the theme color style.

importReactfrom'react';importHeatMapfrom'@uiw/react-heat-map';constvalue=[{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},];constDemo=()=>{return(<HeatMapvalue={value}width={600}style={{color:'#ad001d','--rhm-rect-active':'red'}}startDate={newDate('2016/01/01')}panelColors={{0:'#f4decd',7:'#e4b293',14:'#d48462',21:'#c2533a',28:'#ad001d',35:'#6c0012'}}/>)};exportdefaultDemo

Dynamic color based on maximum value

importReactfrom'react';importHeatMapfrom'@uiw/react-heat-map';constvalue=[{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},];constDemo=()=>{return(<HeatMapvalue={value}width={600}style={{color:'#ad001d','--rhm-rect-active':'red'}}startDate={newDate('2016/01/01')}panelColors={['#f4decd','#e4b293','#d48462','#c2533a','#ad001d','#6c0012']}/>)};exportdefaultDemo

Set Rect Style

Set the radius of the rect.

importReact,{useState}from'react';importHeatMapfrom'@uiw/react-heat-map';constvalue=[{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},];constDemo=()=>{const[range,setRange]=useState(5)return(<div><inputtype="range"min="0"max="5"step="0.1"value={range}onChange={(e)=>setRange(e.target.value)}/>{range}<HeatMapvalue={value}width={600}style={{'--rhm-rect':'#b9b9b9'}}startDate={newDate('2016/01/01')}legendRender={(props)=><rect{...props}y={props.y+10}rx={range}/>}rectProps={{rx:range}}/></div>)};exportdefaultDemo

Tooltip

A simple text popup tip.

importReactfrom'react';importTooltipfrom'@uiw/react-tooltip';importHeatMapfrom'@uiw/react-heat-map';constvalue=[{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},];constDemo=()=>{return(<HeatMapvalue={value}width={600}startDate={newDate('2016/01/01')}rectRender={(props,data)=>{// if (!data.count) return <rect {...props} />;return(<Tooltipplacement="top"content={`count:${data.count||0}`}><rect{...props}/></Tooltip>);}}/>)};exportdefaultDemo

Show/Hide Legend

importReact,{useState}from'react';importHeatMapfrom'@uiw/react-heat-map';constvalue=[{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},];constDemo=()=>{const[size,setSize]=useState(0)return(<div><labelstyle={{userSelect:'none'}}><inputtype="checkbox"checked={size===0}onChange={(e)=>setSize(e.target.checked ?0 :12)}/>{size===0 ?' Hide' :' Show'} Legend</label><HeatMapwidth={600}value={value}legendCellSize={size}startDate={newDate('2016/01/01')}/></div>)};exportdefaultDemo

Selected Rect

importReact,{useState}from'react';importHeatMapfrom'@uiw/react-heat-map';constvalue=[{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},];constDemo=()=>{const[selected,setSelected]=useState('')return(<div><HeatMapwidth={600}value={value}startDate={newDate('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>)};exportdefaultDemo

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.

npm install

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

production

Builds the app for production to the build folder.