patientslikeme/react-calendar-heatmap

Name: react-calendar-heatmap

Owner: PatientsLikeMe

Description: an svg calendar heatmap component, inspired by github's contribution graph

Created: 2016-04-22 21:29:32.0

Updated: 2018-01-12 18:20:56.0

Pushed: 2017-12-28 16:32:10.0

Homepage: http://patientslikeme.github.io/react-calendar-heatmap/

Size: 617

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

React Calendar Heatmap

A calendar heatmap component built on SVG, inspired by github's commit calendar graph. The component expands to size of container and is super configurable. See a live demo.

Installation

Install the npm module:

install react-calendar-heatmap

Include the default styles into your CSS by copying src/styles.css into your repo, and customize away!

Usage

Import the component:

rt CalendarHeatmap from 'react-calendar-heatmap';

To show a basic heatmap from January 1st to April 1st:

endarHeatmap
artDate={new Date('2016-01-01')}
dDate={new Date('2016-04-01')}
lues={[
{ date: '2016-01-01' },
{ date: '2016-01-22' },
{ date: '2016-01-30' },
// ...and so on

Configuring colors

To use the color scale shown in the live demo based on the github contribution graph, you can set the classForValue prop, a function that determines which CSS class to apply to each value:

endarHeatmap
lues={[
{ date: '2016-01-01', count: 1 },
{ date: '2016-01-03', count: 4 },
{ date: '2016-01-06', count: 2 },
// ...and so on

assForValue={(value) => {
if (!value) {
  return 'color-empty';
}
return `color-scale-${value.count}`;

Then you use CSS to set colors for each class:

ct-calendar-heatmap .color-scale-1 { fill: #d6e685; }
ct-calendar-heatmap .color-scale-2 { fill: #8cc665; }
ct-calendar-heatmap .color-scale-3 { fill: #44a340; }
ct-calendar-heatmap .color-scale-4 { fill: #1e6823; }

Other configuration

See full configuration options on the live demo page.

Development

To run demo locally on localhost:8080:

install
start

Keep CI tests passing by running npm test and npm run lint often.

Deploy updates to the demo page with npm run deploy:demo.

License

react-calendar-heatmap is Copyright © 2016 PatientsLikeMe, Inc. and is released under an MIT License. See COPYING for details.