Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luizppa/ng-github-contributions
A Github board component for Angular
https://github.com/luizppa/ng-github-contributions
angular contributions-calendar github-api javascript typescript
Last synced: 8 days ago
JSON representation
A Github board component for Angular
- Host: GitHub
- URL: https://github.com/luizppa/ng-github-contributions
- Owner: luizppa
- License: mit
- Created: 2021-08-15T18:20:31.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-13T20:47:02.000Z (over 2 years ago)
- Last Synced: 2024-08-10T10:55:09.541Z (3 months ago)
- Topics: angular, contributions-calendar, github-api, javascript, typescript
- Language: TypeScript
- Homepage: https://ghcontributions.luizp.ninja
- Size: 786 KB
- Stars: 6
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](#angular-github-contribuions)
- [Overview](#overview)
- [Installation](#installation)
- [Usage](#usage)
- [Options](#options)
- [GithubColorPalette Type](#githubcolorpalette-type)
- [GithubBoardLabelOptions Type](#githubboardlabeloptions-type)
## Overview
Default appearence
Custom colors
Custom time span
Hiding labels
## Installation
To install from npm:
```sh
npm i --save @luizppa/ng-github-contributions
```
Import `GithubContributionsModule` into your app module:
```javascript
import { GithubContributionsModule } from "@luizppa/ng-github-contributions";
//...
@NgModule({
//...
imports: [
//...
GithubContributionsModule,
],
//...
});
```
## Usage
Basic usage
```html
```
### 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.|