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.

• Angular Github Contribuions
  • Overview
  • Installation
  • Usage
    • Options
      • GithubColorPalette Type
      • GithubBoardLabelOptions Type

Overview

Default appearence

Custom colors

Custom time span

Hiding labels

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.