NgGitCalendar
ng-git-calendar is an angular interface component that implements a committing calendar similar to that of github, which can be used for various uses, such as fault logging and other records like any other calendar.
This component is a Ui component containing css, html, js / ts files. There is no functionality linked to the github website here.
Getting Started
To start with ng-git-calendar, you can download it with the command :
npm install ng-git-calendar
Or clone git repository:
git clone https://github.com/SergioNoivak/ng-git-calendar
Or download *.zip file in git repo 🐙
https://github.com/SergioNoivak/ng-git-calendar
Usage
To use ng-git-calendar you need to import the NgGitCalendarModule
into your application:
// app.module.ts ;;
After that, just use the tag lib-ng-git-calendar
to render the ng-git-calendar graph :
Oww cool!
The data
attribute represents the days that will be marked with some color / level. This data
attribute consists of a two-dimensional vector in which each line contains a vector with two elements, the first element being the date to be marked in the format mm / dd / yyyy
followed by the level to be marked (can be 1,2 or 3) .
;
In this last example, relatively small data was entered, resulting in the following git-calendar:
The section below builds a more complex example of a random git-calendar.
More complex example: Github random commits
In this example, the data attribute will be generated randomly and will produce a graph of commits
<!-- app.component.html --> Git random colors
To define attribute data
, just click on any component, in matrix format, each data row is a vector of specified data once selected level
;
Graph attributes
To render the chart ng-git-calendar
, you need: the year
attribute that represents the year that the calendar will represent, and the colorLevel1
, colorLevel2
, colorLevel3
attributes represents the three possible levels for each day of the calendar. It is only possible to have three levels and colors, if the variables colorLevel1
, colorLevel2
, colorLevel3
, the chart is assumed to be gray with level 0.
The data
attribute represents the days that will be marked with some color / level. This data
attribute consists of a two-dimensional vector in which each line contains a vector with two elements, the first element being the date to be marked in the format mm / dd / yyyy
followed by the level to be marked (can be 1,2 or 3) .