..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117 | /* eslint-disable @typescript-eslint/restrict-template-expressions */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { Component, OnInit } from '@angular/core';
import { Octokit } from '@octokit/core';
import Chart from 'chart.js';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
githubToken: string = localStorage.getItem('githubOAuthToken');
user: any;
avatarURL: string;
octokit = new Octokit({ auth: this.githubToken });
constructor() { }
ngOnInit(): void {
this.getUser();
}
displayContributionGraph(contributionData) {
console.log(contributionData);
const canvas = <HTMLCanvasElement>document.getElementById('contributionsChart');
const ctx = canvas.getContext('2d');
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const contributionChart = new Chart(ctx, {
type: 'line',
data: {
labels: new Array(53).fill(''),
datasets: [{
label: '# of Contributions',
data: contributionData,
borderColor: 'transparent',
backgroundColor: '#9381FF',
pointBackgroundColor: 'transparent',
}],
},
options: {
tooltips: {
enabled: false
},
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}]
}
}
});
}
async getUser() {
this.user = await this.octokit.request('GET /user');
this.avatarURL = `url("${this.user.data.avatar_url}")`;
const contribututions = await this.getContributions(this.githubToken, this.user?.data.login);
const contributionData = [];
contribututions.data.user.contributionsCollection.contributionCalendar.weeks.forEach((week: any) => {
let weeklyContributionCount = 0;
week.contributionDays.forEach((day: any) => {
weeklyContributionCount += day.contributionCount;
});
contributionData.push(weeklyContributionCount);
});
this.displayContributionGraph(contributionData);
}
async getContributions(token: string, username: any) {
const headers = {
'Authorization': `bearer ${token}`,
};
const body = {
"query": `query {
user(login: "${username}") {
name
contributionsCollection {
contributionCalendar {
colors
totalContributions
weeks {
contributionDays {
color
contributionCount
date
weekday
}
firstDay
}
}
}
}
}`
};
const response = await fetch('https://api.github.com/graphql', { method: 'POST', body: JSON.stringify(body), headers: headers });
const data = await response.json();
return data;
}
}
|
|
