Package Exports

react-calendar-heatmap

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-calendar-heatmap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Calendar Heatmap

A calendar heatmap component built on SVG, inspired by github's contribution graph. The SVG expands to size of container and colors are fully configurable. See a live demo.

Usage

Install the npm module:

npm install react-calendar-heatmap

Include the default styles into your CSS by copying src/styles.css into your repo.

Import the component:

import CalendarHeatmap from 'react-calendar-heatmap';

To show a heatmap of 100 days ending on April 1st:

<CalendarHeatmap
  endDate={new Date('2016-04-01')}
  numDays={100}
  values={[
    { date: '2016-01-01' },
    { date: '2016-01-22' },
    { date: '2016-01-30' },
    // ...and so on
  ]}
/>

Configuring colors and styles

If you want to map values to colors in a different way, override the classForValue prop, which determines which CSS class to apply to each value.

<CalendarHeatmap
  values={[
    { date: '2016-01-01', state: 'good' },
    { date: '2016-01-05', state: 'bad' }
  ]}
  classForValue={
    (value) => {
      switch(value.state) {
        case 'good':
          return 'green';
        case 'bad':
          return 'red';
        default:
          return 'gray';
      }
    }
  }
/>

Then you can use your own CSS classes to set box colors:

.react-calendar-heatmap .green {
  fill: #6f6;
}

See more configuration options on the live demo page.

Development

To develop locally:

npm install
npm start

Then go to localhost:8080, which renders demo/index.html.