react-d3-heatmap

A simple React heat map to visualize your data between two dates using d3.js

This heat map will display squares inside SVG. A square represent a day.

Now, it supports Typescript 🎉

Demo

Here is a preview Or View with the whole code

Installation

npm i react-d3-heatmap

or

yarn add react-d3-heatmap

Usage

react-d3-heatmap is very easy to use.

Here is a basic usage :

<HeatMapDate
    startDate={startDate}
    endDate={endDate}
    data={data}
    colors={colors}
    displayLegend
/>

Documentation

You can change these props :

Prop	Definition	Type	Is required ?	Default
data	Your data to visualize. It must be an array of objects that contain a date and a number	Array[{date: Date, count: Number}]	true
startDate	Your heat map will begin at this date	Date	true
endDate	Your heat map will end at this date	Date	true
colors	Let's colorize this heat map It must be an array of objects that a number and a color like "#232323"	Array[{count: Number, color: String, text: string (optional)}]	true
defaultColor	A string that contain a default color	String	false	"#cdcdcd"
textDefaultColor	A tooltip's text displayed in legend for default color	String	false	"0"
rectWidth	Set width and height for each square	Number	false	10
marginRight	Space between two squares on x axis	Number	false	4
marginBottom	Space between two squares on y axis	Number	false	4
displayLegend	Display or not a legend	Boolean	false	true
backgroundColor	Custom background color (ex: "#232323")	String	false	"#fff"
textColor	Custom text color (ex: "#00ff00")	String	false	"#000"
radius	Apply a radius on each square	Number	false	0
classnames	Apply your own CSS class	String	false	""
displayYear	Display on each month (ex: 17/Avr)	Boolean	false	false
onClick	Execute a callback function when clicking on a square. Params: (data, index)	Function	false	{}
onMouseEnter	Execute a callback function when mouse entering in a square. Params: (data, index)	Function	false	{}
onMouseLeave	Execute a callback function when mouse leaving a square. Params: (data, index)	Function	false	{}
shouldStartMonday	Usually heatmap starts on Sunday but you can start it on Monday	Boolean	false	false
monthSpace	Change space between month blocks	Number	false	0
rangeDisplayData	Display data between two dates. Tip: You can create an array of one or two dates Example: [new Date("2018-10-15T17:41:27"), new Date("2019-02-21T23:01:50")], [new Date("2019-02-21T23:01:50")], [null, new Date("2019-02-21T23:01:50")]	Array[Date]	false	[]
fadeAnimation	Control fade in animation	Object{animate: Boolean, duration: Number (in second)}	false	{ animate: true, duration: 0.4 }

Author

Tom Darneix

License

MIT