diff --git a/src/app/projects/project-card/project-card.component.ts b/src/app/projects/project-card/project-card.component.ts
index eb7f79d..9f32f85 100644
--- a/src/app/projects/project-card/project-card.component.ts
+++ b/src/app/projects/project-card/project-card.component.ts
@@ -1,18 +1,42 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
import { faCodeFork, faEye, faStar } from '@fortawesome/free-solid-svg-icons';
-import {Project} from "../../shared/model/project/project.model";
+import {Language, Project} from "../../shared/model/project/project.model";
import {faScaleBalanced} from "@fortawesome/free-solid-svg-icons/faScaleBalanced";
+import {
+ ApexAnnotations,
+ ApexChart, ApexDataLabels,
+ ApexNonAxisChartSeries,
+ ApexPlotOptions,
+ ApexResponsive,
+ ChartComponent
+} from "ng-apexcharts";
+
+
+export type ChartOptions = {
+ series: ApexNonAxisChartSeries;
+ colors: string[];
+ chart: ApexChart;
+ responsive: ApexResponsive[];
+ labels: string[];
+ plotOptions: ApexPlotOptions;
+ dataLabels: ApexDataLabels;
+};
@Component({
selector: 'app-project-card',
templateUrl: './project-card.component.html',
styleUrls: ['./project-card.component.css']
})
-export class ProjectCardComponent {
+export class ProjectCardComponent implements OnInit {
@Input() inverted: boolean = false;
@Input() project!: Project;
+ @ViewChild('language-chart')
+ languageChart: ChartComponent | undefined;
+
+ chartOptions: ChartOptions | undefined;
+
// Stats Icons Definitions
faLicense = faScaleBalanced;
@@ -22,6 +46,13 @@ export class ProjectCardComponent {
faEye = faEye;
+ ngOnInit() {
+ if (!!this.project.languages) {
+ this.chartOptions = this.generateChart(this.project.languages);
+ }
+
+ }
+
get hasLicense(): boolean {
return this.project.license !== undefined;
}
@@ -30,4 +61,37 @@ export class ProjectCardComponent {
return this.project.languages !== undefined &&
this.project.languages?.length > 0;
}
+
+ private generateChart(languages: Language[]): ChartOptions {
+ return {
+ series: languages.map(value => value.percentage),
+ colors: languages.map(value => value.color),
+ chart: {
+ width: 380,
+ type: "pie"
+ },
+ labels: languages.map(value => value.name),
+ responsive: [
+ {
+ breakpoint: 480,
+ options: {
+ chart: {
+ width: 300
+ },
+ legend: {
+ position: "bottom"
+ }
+ }
+ }
+ ],
+ plotOptions: {
+ pie: {
+ expandOnClick: true,
+ }
+ },
+ dataLabels: {
+ enabled: false
+ }
+ };
+ }
}
diff --git a/src/app/projects/projects.module.ts b/src/app/projects/projects.module.ts
index 665f97d..25c2b8f 100644
--- a/src/app/projects/projects.module.ts
+++ b/src/app/projects/projects.module.ts
@@ -4,6 +4,7 @@ import {CommonModule, NgOptimizedImage} from "@angular/common";
import { ProjectCardComponent } from './project-card/project-card.component';
import {MatIconModule} from "@angular/material/icon";
import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
+import {NgApexchartsModule} from "ng-apexcharts";
@NgModule({
declarations: [
@@ -14,7 +15,8 @@ import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
CommonModule,
NgOptimizedImage,
MatIconModule,
- FontAwesomeModule
+ FontAwesomeModule,
+ NgApexchartsModule
],
exports: []
})
diff --git a/src/app/shared/github-service/github.service.ts b/src/app/shared/github-service/github.service.ts
index 5905cea..568cffa 100644
--- a/src/app/shared/github-service/github.service.ts
+++ b/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
;
+
+ constructor(private http: HttpClient) {
+ this.getLanguageColor().subscribe((colors: Map) => {
+ this.colors = colors;
+ });
+ }
getProjects(): Observable {
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> {
+ return this.http.get(this.GITHUB_API_COLORS).pipe(
+ map((colors: any) => {
+ const colorMap = new Map();
+ 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`;
}
diff --git a/src/app/shared/model/project/project.model.ts b/src/app/shared/model/project/project.model.ts
index 8fd9c7b..af47098 100644
--- a/src/app/shared/model/project/project.model.ts
+++ b/src/app/shared/model/project/project.model.ts
@@ -1,5 +1,6 @@
export type Language = {
name: string;
+ color: string;
percentage: number;
}
diff --git a/src/assets/env.sample.js b/src/assets/env.sample.js
index ac046df..151211c 100644
--- a/src/assets/env.sample.js
+++ b/src/assets/env.sample.js
@@ -4,4 +4,5 @@
// Environment variables
window["env"]["BACKEND_URL"] = "${BACKEND_URL}";
window["env"]["BACKEND_OAUTH_URL"] = "${BACKEND_OAUTH_URL}";
+ window["env"]["GITHUB_USER"] = "${GITHUB_USER}";
})(this);