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

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