Add chart to repository details
Signed-off-by: trivernis <trivernis@protonmail.com>pull/17/head
parent
bf8e70f846
commit
39978ff34c
GPG Key ID:
DFFFCC2C7A02DB45
@ -1,6 +1,4 @@
|
||||
<div *ngIf="!this.selectedRepository">
|
||||
<app-repository-overview></app-repository-overview>
|
||||
</div>
|
||||
<div *ngIf="this.selectedRepository" class="repo-details">
|
||||
<app-repository-details-view [repository]="this.selectedRepository"></app-repository-details-view>
|
||||
</div>
|
||||
<app-repository-overview *ngIf="!this.selectedRepository"></app-repository-overview>
|
||||
<app-repository-details-view *ngIf="this.selectedRepository"
|
||||
[repository]="this.selectedRepository"></app-repository-details-view>
|
||||
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
<h2 *ngIf="this.title" class="title">{{this.title}}</h2>
|
||||
<p-chart [data]="data" [options]="this.options" [type]="this.chartType ?? ''"></p-chart>
|
||||
@ -0,0 +1,15 @@
|
||||
:host {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import {ComponentFixture, TestBed} from "@angular/core/testing";
|
||||
|
||||
import {ChartComponent} from "./chart.component";
|
||||
|
||||
describe("ChartComponent", () => {
|
||||
let component: ChartComponent;
|
||||
let fixture: ComponentFixture<ChartComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ChartComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ChartComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it("should create", () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,86 @@
|
||||
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges} from "@angular/core";
|
||||
import {ChartOptions} from "chart.js";
|
||||
|
||||
export type ChartType = "doughnut";
|
||||
export type Dataset = {
|
||||
label?: string,
|
||||
data: number[],
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: "app-chart",
|
||||
templateUrl: "./chart.component.html",
|
||||
styleUrls: ["./chart.component.scss"],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ChartComponent implements OnChanges {
|
||||
|
||||
@Input() chartType?: ChartType;
|
||||
@Input() title?: string;
|
||||
@Input() labels: string[] = [];
|
||||
@Input() datasets: Dataset[] = [];
|
||||
|
||||
public data: any = {};
|
||||
public options: ChartOptions = {
|
||||
responsive: true,
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: "#FFF",
|
||||
boxHeight: 20,
|
||||
font: {
|
||||
size: 16,
|
||||
}
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
titleFont: {
|
||||
size: 16
|
||||
},
|
||||
bodyFont: {
|
||||
size: 14
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
private readonly colors = [
|
||||
"#771e86",
|
||||
"#4650b5",
|
||||
"#0073d0",
|
||||
"#0091d6",
|
||||
"#00aacb",
|
||||
"#00c0b7"
|
||||
];
|
||||
|
||||
constructor(private changeDetector: ChangeDetectorRef) {
|
||||
}
|
||||
|
||||
public ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes["labels"] || changes["dataset"]) {
|
||||
this.generateData();
|
||||
this.changeDetector.markForCheck();
|
||||
}
|
||||
if (changes["chartType"]) {
|
||||
this.changeDetector.markForCheck();
|
||||
}
|
||||
}
|
||||
|
||||
private generateData() {
|
||||
this.data = {
|
||||
labels: this.labels,
|
||||
datasets: this.datasets.map(set => {
|
||||
return {
|
||||
label: set.label,
|
||||
data: set.data,
|
||||
backgroundColor: this.colors,
|
||||
hoverBackgroundColor: this.colors,
|
||||
};
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue