Initial Language Graph Implementation

src/app/shared/github-service/github.service.ts

@@ -15,9 +15,17 @@ export class GithubService {
 
     GITHUB_API_URL = 'https://api.github.com';
 
+    GITHUB_API_COLORS = 'https://raw.githubusercontent.com/ozh/github-colors/master/colors.json';
+
     GITHUB_USER = environment.githubUser;
 
-    constructor(private http: HttpClient) { }
+    colors!: Map<string, string>;
+
+    constructor(private http: HttpClient) {
+        this.getLanguageColor().subscribe((colors: Map<string, string>) => {
+            this.colors = colors;
+        });
+    }
 
     getProjects(): Observable<Project> {
         return this.http.get(this.apiReposString()).pipe(
@@ -61,6 +69,7 @@ export class GithubService {
                 return Object.keys(languages).map((language: string) => {
                     return {
                         name: language,
+                        color: this.colors.get(language) || this.getRandColor(),
                         percentage: (languages[language]/totalBytes)*100
                     } as Language;
                 });
@@ -68,6 +77,22 @@ export class GithubService {
         );
     }
 
+    private getLanguageColor(): Observable<Map<string, string>> {
+        return this.http.get(this.GITHUB_API_COLORS).pipe(
+            map((colors: any) => {
+                const colorMap = new Map<string, string>();
+                Object.keys(colors).forEach((language: string) => {
+                    colorMap.set(language, colors[language].color);
+                });
+                return colorMap;
+            })
+        );
+    }
+
+    private getRandColor(): string {
+        return `#${Math.floor(Math.random()*16777215).toString(16)}`;
+    }
+
     private apiReposString() {
         return `${this.GITHUB_API_URL}/users/${this.GITHUB_USER}/repos`;
     }

src/app/shared/model/project/project.model.ts

@@ -1,5 +1,6 @@
 export type Language = {
     name: string;
+    color: string;
     percentage: number;
 }