https://github.com/xingoxu/canvas-contribution

generate github contribution or other activities in canvas
https://github.com/xingoxu/canvas-contribution

canvas contribution-graph

Last synced: 4 months ago
JSON representation

generate github contribution or other activities in canvas

• Host: GitHub
• URL: https://github.com/xingoxu/canvas-contribution
• Owner: xingoxu
• License: mit
• Created: 2017-03-05T13:01:55.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-03-07T09:44:06.000Z (over 9 years ago)
• Last Synced: 2025-03-30T14:01:44.254Z (about 1 year ago)
• Topics: canvas, contribution-graph
• Language: JavaScript
• Size: 9.34 MB
• Stars: 20
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Canvas Contribution

Generate github contribution or other activities in canvas.

## Preview

- Default

![default](preview/default.gif)

- Custom

![custom](preview/custom.gif)

## Usage

```javascript

//if you use UMD, CanvasContributionTool is a global var

import CanvasContributionTool from 'canvas-contribution';

let canvas = document.getElementById('test');

CanvasContributionTool(canvas, { //data

  max: max,

  data: [

    {

      count: 123,

      date: '2017-03-05', //Start from Sunday

    },{

      count: 123,

      date: '2017-03-06',

    },

    //...etc

    {

      count: 123,

      date: '2017-03-05',

    }

  ],

},{ //config

  padding_top: (44 - 13) * 2, //*2 for Retina Display and the tool will automatically set the width and height

  padding_left_right: 100 * 2,

  footer_margin_top: 14 * 2,

  padding_bottom: (44 - 13 + 2) * 2,

  color: {

    0: '#eee', //less

    1: '#FFAFB7',

    2: '#FE8A95',

    3: '#E26470',

    4: '#BB4956', //more

  },

  text: 'activities',

});

```

## Develop

```bash

npm run dev //start live demo

npm run build //build UMD

```

#### License [MIT](LICENSE)