<file_sep>import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { OverviewComponent } from './overview/overview.component';
import { RepositoriesComponent } from './repositories/repositories.component';
import { ProjectsComponent } from './projects/projects.component';
import { PackagesComponent } from './packages/packages.component';
import { CardsComponent } from './cards/cards.component';
import { PlotlyViaCDNModule } from 'angular-plotly.js';
import { PipeModule } from '../pipe/pipe.module';

PlotlyViaCDNModule.setPlotlyVersion('latest');

@NgModule({
  declarations: [HeaderComponent, FooterComponent, UserProfileComponent, OverviewComponent, RepositoriesComponent, ProjectsComponent, PackagesComponent, CardsComponent],
  imports: [
    CommonModule,
    PlotlyViaCDNModule,
    PipeModule
  ],
  exports: [
    HeaderComponent,
    FooterComponent,
    UserProfileComponent,
    OverviewComponent,
    ProjectsComponent,
    RepositoriesComponent,
    UserProfileComponent,
    PackagesComponent,
    CardsComponent
  ],
  providers:[
    
  ]
})
export class ComponentsModule { }
<file_sep>import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map, catchError, tap } from 'rxjs/operators';
import { EMPTY, of, BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpClientCallService {

  user_details = new BehaviorSubject<any>([]);
  user_repos = new BehaviorSubject<any>([]);
  user_projects = new BehaviorSubject<any>([]);
  user_contributions = new BehaviorSubject<any>([]);

  //Sample Varriables
  token = '';
  httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': `bearer ${this.token}` }) };

  constructor(
    private httpClient: HttpClient,
  ) { }

  //https://api.github.com/users/srujar
  getUser(user_name): any {
    return this.httpClient.get<any>(`https://api.github.com/users/${user_name}`).pipe(
      tap(value => {
        if (value) {
          this.user_details.next(value);
        }
      }));
  }

  getUsersList(): any {
    return this.httpClient.get<any>(`https://api.github.com/users`);
  }

  getUsersRepos(user_name): any {
    return this.httpClient.get<any>(`https://api.github.com/users/${user_name}/repos`).pipe(
      tap(value => {
        if (value) {
          this.user_repos.next(value);
        }
      }));
  }

  getUsersProjects(user_name): any {
    let custom_httpOptions = { headers: new HttpHeaders({ Accept: ['application/vnd.github.spiderman-preview', "application/vnd.github.inertia-preview+json"] }) };
    return this.httpClient.get<any>(`https://api.github.com/users/${user_name}/projects`, custom_httpOptions).pipe(
      tap(value => {
        if (value) {
          this.user_projects.next(value);
        }
      }));
  }

  getUserContibutions(username, from_date, to_date): any {
    let body = {
      "query": `query {
          user(login: "${username}") {
            name
            email
            createdAt
            contributionsCollection(from: "${from_date}", to: "${to_date}" ) {
              contributionCalendar {
                colors
                totalContributions
                weeks {
                  contributionDays {
                    color
                    contributionCount
                    date
                    weekday
                  }
                  firstDay
                }
              }
            }
          }
        }`
    }
    return this.httpClient.post<any>('https://api.github.com/graphql', body, this.httpOptions)
      .pipe(
        map(value => {
          if (value) {
            this.user_contributions.next(value.data.user.contributionsCollection.contributionCalendar);
            return value.data.user.contributionsCollection.contributionCalendar
          }
        }),
        (catchError(error => {
          return of({ 'is_error': true, error })

        }))
      );
  }

}
<file_sep>import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({
  name: 'datePipe'
})
export class DatePipePipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    // console.log("value", value);
    // let todays_date = new Date();
    // console.log("todays_date", todays_date);
    // let diff: any = moment.duration(moment(value).diff(moment(todays_date)));
    // console.log("diff", diff);

    // var days = parseInt(diff.asDays()); //84

    // var hours = parseInt(diff.asHours()); //2039 hours, but it gives total hours in given miliseconds which is not expacted.

    // hours = hours - days * 24;  // 23 hours

    // var minutes = parseInt(diff.asMinutes()); //122360 minutes,but it gives total minutes in given miliseconds which is not expacted.

    // minutes = minutes - (days * 24 * 60 + hours * 60); //20 minutes.
    // console.log("days: ", days, " minutes: ", minutes);

    if (value) {

      return moment(value).format('DD/MM/YYYY');
    } else {
      return null;
    }
  }

}
<file_sep>import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClientCallService } from 'src/app/service/http-client-call.service';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent implements OnInit, OnDestroy {

  users_projects: any = [];
  users_name: any;
  projects_count: any = 0;

  $user_projects: any;
  $user_details: any;

  constructor(
    private httpClientCallService: HttpClientCallService
  ) { }

  ngOnInit(): void {
    this.$user_projects = this.httpClientCallService.user_projects.subscribe(data => {
      this.projects_count = data.length;
      this.users_projects = data;
    })

    this.$user_details = this.httpClientCallService.user_details.subscribe(data => {
      this.users_name = data.name;
    })
  }

  ngOnDestroy() {
    if (this.$user_projects) { this.$user_projects.unsubscribe() }
    if (this.$user_details) { this.$user_details.unsubscribe() }
  }

}
<file_sep>import { HttpClientCallService } from './http-client-call.service';
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
import { EMPTY, Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { Route } from '@angular/compiler/src/core';

@Injectable({
  providedIn: 'root'
})
export class UserResolverService implements Resolve<any> {

  constructor(
    private router: Router,
    private httpClientCallService: HttpClientCallService
  ) { }

  resolve(route: ActivatedRouteSnapshot):Observable<any> {
    let { user_name } = route.params;
    return this.httpClientCallService
      .getUser(user_name)
      .pipe(
        catchError(error => {
          console.log("error", error);
          this.router.navigateByUrl('user/not-found');
          return EMPTY;
        })
      )
  }

}
<file_sep>import { UserResolverService } from './../service/user-resolver.service';
import { UserNotFoundComponent } from './user-not-found/user-not-found.component';
import { UserComponent } from './user/user.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserDetailsComponent } from './user-details/user-details.component';
import { OverviewComponent } from '../components/overview/overview.component';
import { RepositoriesComponent } from '../components/repositories/repositories.component';
import { ProjectsComponent } from '../components/projects/projects.component';
import { PackagesComponent } from '../components/packages/packages.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard', component: DashboardComponent
  },
  {
    path: 'user',
    component: UserComponent,
    children: [
      {
        path: 'not-found',
        component: UserNotFoundComponent
      },
      {
        path: ':user_name',
        component: UserDetailsComponent,
        resolve: { user: UserResolverService },
        children: [
          { path: '', redirectTo: 'overview', pathMatch: 'full' },
          { path: 'overview', component: OverviewComponent },
          { path: 'repo', component: RepositoriesComponent },
          { path: 'projects', component: ProjectsComponent },
          { path: 'packages', component: PackagesComponent }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PagesRoutingModule { }
<file_sep>import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpClientCallService } from 'src/app/service/http-client-call.service';
import * as moment from 'moment';

@Component({
  selector: 'app-user-details',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss']
})
export class UserDetailsComponent implements OnInit {

  user_data: any;
  constructor(
    private activatedRoute: ActivatedRoute,
    private httpClientCallService: HttpClientCallService
  ) { }

  ngOnInit(): void {
    this.activatedRoute.data.subscribe(data => {
      this.user_data = data.user;
      let from_date = new Date(moment('02-01-2021').format('DD/MM/YYYY')).toISOString();
      let to_date = new Date(moment('01-12-2021').format('DD/MM/YYYY')).toISOString();

      this.getContributions(data.user.login, from_date, to_date);
      this.getProjects(data.user.login);
      this.getUserRepos(data.user.login);
    })
  }

  getContributions(user_name, from_date, to_date) {
    this.httpClientCallService.getUserContibutions(user_name, from_date, to_date).subscribe();
  }

  getUserRepos(user_name) {
    this.httpClientCallService.getUsersRepos(user_name).subscribe();
  }

  getProjects(user_name) {
    this.httpClientCallService.getUsersProjects(user_name).subscribe();
  }


}
<file_sep>import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClientCallService } from 'src/app/service/http-client-call.service';

@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.scss']
})
export class OverviewComponent implements OnInit, OnDestroy {

  array = [1, 2, 3, 4, 5];
  users_repos: any = [];
  user_contributions: any;
  z_array: any = [];
  x_array: any = [];
  public graph = {
    data: [
      {
        x: [],
        y: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
        z: [],
        type: 'heatmap',
        colorscale: [
          [0, '#ebedf0'],
          [10, '#9be9a8'],
          [20, '#40c463'],
          [30, '#30a14e'],
          [100, '#216e39'],
        ],
        showscale: false
      },
    ],
    // layout: { width: 320, height: 240, title: 'A Fancy Plot' },
    // config : {responsive: true}
  };

  $user_repos: any;
  $user_contributions: any;

  constructor(
    private httpClientCallService: HttpClientCallService
  ) { }

  ngOnInit(): void {
    this.$user_repos = this.httpClientCallService.user_repos.subscribe(data => {
      this.users_repos = data.slice(0, 6);
    })

    this.$user_contributions = this.httpClientCallService.user_contributions.subscribe(data => {
      this.user_contributions = data.totalContributions;
      if (data.totalContributions) {
        this.plotGraphData(data.weeks)
      }

    })
  }

  plotGraphData(data) {
    let z_array = [];
    let x_array = [];
    for (let i = 0; i < 7; i++) {
      z_array.push([]);
      data.forEach((element, index) => {
        if (!(element.contributionDays[i] == undefined || element.contributionDays[i] == null)) {
          z_array[i].push(element.contributionDays[i].contributionCount)
        } else {
          z_array[i].push('NaN')
        }
        if (i == 0) {
          x_array.push(index);
        }
      });
    }
    let sixth_ele = z_array[6][z_array[6].length - 1];
    z_array[6][z_array[6].length - 1] = z_array[0][z_array[0].length - 1];
    z_array[0][z_array[0].length - 1] = sixth_ele;

    let fifth_ele = z_array[5][z_array[5].length - 1];
    z_array[5][z_array[5].length - 1] = z_array[1][z_array[1].length - 1];
    z_array[1][z_array[1].length - 1] = fifth_ele;

    let fourth_ele = z_array[4][z_array[4].length - 1];
    z_array[4][z_array[4].length - 1] = z_array[2][z_array[2].length - 1];
    z_array[2][z_array[2].length - 1] = fourth_ele;
    // z_array[z_array.length - 1] = z_array[z_array.length - 1].reverse();

    // console.log("z_array.......", z_array);
    // console.log("x_array.......", x_array);
    this.x_array = x_array
    this.z_array = z_array

    this.graph.data[0].x = x_array;
    this.graph.data[0].z = z_array;
  }

  ngOnDestroy() {
    if (this.$user_repos) { this.$user_repos.unsubscribe() }
    if (this.$user_contributions) { this.$user_contributions.unsubscribe() }
  }

}
<file_sep>import { Router } from '@angular/router';
import { HttpClientCallService } from './../../service/http-client-call.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  users_list: any;
  constructor(
    private httpClientCallService: HttpClientCallService,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.httpClientCallService.getUsersList().subscribe(data => {
      this.users_list = data;
    })
  }

  selectUser(user_data) {
    this.router.navigateByUrl(`/user/${user_data.login}`);
  }


}
<file_sep>import { UserResolverService } from './../service/user-resolver.service';
import { HttpClientCallService } from './../service/http-client-call.service';

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PagesRoutingModule } from './pages-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ComponentsModule } from './../components/components.module';
import { UserComponent } from './user/user.component';
import { UserDetailsComponent } from './user-details/user-details.component';
import { UserNotFoundComponent } from './user-not-found/user-not-found.component';
import { HttpClientModule } from '@angular/common/http';
import { PlotlyViaCDNModule } from 'angular-plotly.js';

PlotlyViaCDNModule.setPlotlyVersion('latest');
// PlotlyViaCDNModule.plotlyBundle = null;

@NgModule({
  declarations: [DashboardComponent, UserComponent, UserDetailsComponent, UserNotFoundComponent,
    // DatePipePipe
  ],
  imports: [
    CommonModule,
    PagesRoutingModule,
    ComponentsModule,
    PlotlyViaCDNModule

  ],
  providers: [
    UserResolverService
  ]
})
export class PagesModule { }<file_sep>import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-cards',
  templateUrl: './cards.component.html',
  styleUrls: ['./cards.component.scss']
})
export class CardsComponent implements OnInit {

  @Input('repo_data') repo_data: any;
  @Input('slector') slector: any;
  @Input('users_name') users_name: any;
  @Input('each_project') each_project: any;
  @Input('index') index: any;
  @Input('projects_count') projects_count: any;
  constructor() { }

  ngOnInit(): void {
  }

}
<file_sep>import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClientCallService } from 'src/app/service/http-client-call.service';

@Component({
  selector: 'app-repositories',
  templateUrl: './repositories.component.html',
  styleUrls: ['./repositories.component.scss']
})
export class RepositoriesComponent implements OnInit, OnDestroy {
  users_repos: any = []

  $user_repos: any;

  constructor(
    private httpClientCallService: HttpClientCallService
  ) { }

  ngOnInit(): void {
    this.$user_repos = this.httpClientCallService.user_repos.subscribe(data => {
      this.users_repos = data;
    })
  }

  ngOnDestroy() {
    if (this.$user_repos) { this.$user_repos.unsubscribe() }
  }

}
