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 *ngIf="!this.selectedRepository"></app-repository-overview>
|
||||||
<app-repository-overview></app-repository-overview>
|
<app-repository-details-view *ngIf="this.selectedRepository"
|
||||||
</div>
|
[repository]="this.selectedRepository"></app-repository-details-view>
|
||||||
<div *ngIf="this.selectedRepository" class="repo-details">
|
|
||||||
<app-repository-details-view [repository]="this.selectedRepository"></app-repository-details-view>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@ -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