Skip to content

Latest commit

 

History

History
94 lines (68 loc) · 3.83 KB

README.md

File metadata and controls

94 lines (68 loc) · 3.83 KB
Raw

Angular Github Contribuions

An angular component to reproduce the appearence and behaviour of the Github contributions board. So far, the component supports custom color themes and time span, but more options will be added in the future.

Overview

Default appearence Example image

Custom colors Example image

Custom time span Example image

Hiding labels Example image

Installation

To install from npm:

npm i --save @luizppa/ng-github-contributions

Import GithubContributionsModule into your app module:

import { GithubContributionsModule } from "@luizppa/ng-github-contributions";

//...

@NgModule({
  //...
  imports: [
    //...
    GithubContributionsModule,
  ],
  //...
});

Usage

Basic usage

<github-board
    [profile]="'luizppa'"
    [onCellClick]="onCellClickHandler"
    [options]="boardOptions">
</github-board>

Options

Optionally, you can specify an options object to configure the appearence fo the board. The available options are shown on the table bellow:

Option Type Default value Description
cellSize number 10 Defines the size of each individual board cell in pixels.
weeksNumber number 53 Defines the time span shwon on the board in number of weeks.
colorPalette GithubBoardColorPalette Defines the color palette for the board cells.
labels GithubBoardLabelOptions Defines the properties of the labels indicating day and month around the board.

GithubColorPalette Type

Object that defines the color scheme to use on the board. The colors must be specified as strings in any HTML suported format (HEX, rgb, rgba...).

Option Type Default value Description
none string #EBEDF0 Defines the color for cells with no contributions.
low string #9BE9A8 Defines the color for cells with 1 - 3 contributions.
medium string #40C463 Defines the color for cells with 4 - 8 contributions.
high string #30A14E Defines the color for cells with 9 - 10 contributions.
higher string #216E39 Defines the color for cells with more than 10 contributions.

GithubBoardLabelOptions Type

Option Type Default value Description
showMonth boolean true Defines whether or not to show month labels.
showDay boolean true Defines whether or not to show day labels.
size number 9 Defines the font size of the labels in pixels.