Skip to content
This repository has been archived by the owner on Jun 8, 2024. It is now read-only.

Thebarda/react-d3-heatmap

Repository files navigation

react-d3-heatmap

Build

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