128 lines
3.9 KiB
TypeScript
128 lines
3.9 KiB
TypeScript
import {Component, OnInit} from '@angular/core';
|
|
import Chart from 'chart.js';
|
|
import {BackendService, ScrumStatus, ScrumUser, ScrumUserstory, ScrumSprint} from '../services/backend.service';
|
|
|
|
@Component({
|
|
selector: 'app-dashboard',
|
|
templateUrl: 'dashboard.component.html',
|
|
styleUrls: ['./dashboard.component.css']
|
|
})
|
|
export class DashboardComponent implements OnInit {
|
|
/**
|
|
* Returns the status that are used by at least one userstory.
|
|
*/
|
|
public get usedStatus(): ScrumStatus[] {
|
|
return this.status.filter(s => this.userstories.find(us => us.statusid === s.id) !== undefined);
|
|
}
|
|
|
|
private status: ScrumStatus[];
|
|
private userstories: ScrumUserstory[];
|
|
private sprints: ScrumSprint[];
|
|
|
|
constructor(private backendService: BackendService) {
|
|
// backendService.getUserstories().subscribe(response => {
|
|
// if (response.status > 399) {
|
|
// alert('Fehler');
|
|
// } else {
|
|
// this.userstories.push(...response.body);
|
|
// }
|
|
// });
|
|
// backendService.getAllStatus().subscribe(response => {
|
|
// if (response.status > 399) {
|
|
// alert('Fehler');
|
|
// } else {
|
|
// this.status.push(...response.body);
|
|
// }
|
|
// });
|
|
// backendService.getSprints().subscribe(response => {
|
|
// if (response.status > 399) {
|
|
// alert('Fehler');
|
|
// } else {
|
|
// this.sprints.push(...response.body);
|
|
// }
|
|
// });
|
|
|
|
this.status = [
|
|
{id: 0, title: "In progress", description:""},
|
|
{id: 1, title: "Done", description:""},
|
|
];
|
|
this.userstories = [
|
|
{statusid: 0, title:""},
|
|
{statusid: 0, title:""},
|
|
{statusid: 0, title:""},
|
|
{statusid: 1, title:""},
|
|
{statusid: 1, title:""},
|
|
];
|
|
this.sprints = [
|
|
{description:"", title:"", project: 0, startDate: new Date(2020, 5, 22), endDate: new Date(2020, 5, 28)},
|
|
{description:"", title:"", project: 0, startDate: new Date(2020, 5, 29), endDate: new Date(2020, 6, 5)},
|
|
]
|
|
}
|
|
|
|
|
|
ngOnInit(): void {
|
|
// @ts-ignore
|
|
const context = document.getElementById('done-stories-chart').getContext('2d');
|
|
const chart = new Chart(context, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: this.usedStatus.map(s => s.title),
|
|
datasets: [{
|
|
label: 'Done stories',
|
|
data: this.usedStatus.map(s => this.getNumberOfUserstoriesByStatus(s)),
|
|
backgroundColor: this.getBackgroundColors(),
|
|
}]
|
|
}
|
|
});
|
|
}
|
|
|
|
private getBackgroundColors(): string[] {
|
|
const baseColors = [
|
|
'rgb(255, 153, 102)',
|
|
'rgb(255, 102, 102)',
|
|
'rgb(153, 204, 255)',
|
|
'rgb(102, 153, 102)',
|
|
'rgb(204, 204, 153)',
|
|
'rgb(153, 102, 204)',
|
|
'rgb(204, 102, 102)',
|
|
'rgb(255, 204, 153)',
|
|
'rgb(153, 102, 255)',
|
|
'rgb(204, 204, 204)',
|
|
'rgb(102, 255, 204)',
|
|
'rgb(102, 153, 255)',
|
|
'rgb(153, 102, 153)',
|
|
'rgb(204, 204, 255)',
|
|
];
|
|
const colors = [];
|
|
while (colors.length < this.usedStatus.length) {
|
|
colors.push(...baseColors);
|
|
}
|
|
return colors;
|
|
}
|
|
|
|
public getNumberOfUserstoriesByStatus(status: ScrumStatus): number {
|
|
return this.userstories.filter(us => us.statusid === status.id).length;
|
|
}
|
|
|
|
public getRemainingDaysInSprint(): number {
|
|
const now = new Date();
|
|
const currentSprint = this.sprints.find(s => s.endDate > now && s.startDate < now);
|
|
if (currentSprint === undefined) {
|
|
return undefined;
|
|
}
|
|
const daysDelta = Math.floor((currentSprint.endDate.getTime() - now.getTime()) / 86400000);
|
|
return daysDelta;
|
|
}
|
|
|
|
public getSprintUrgency(): number {
|
|
const now = new Date();
|
|
const currentSprint = this.sprints.find(s => s.endDate > now && s.startDate < now);
|
|
if (currentSprint === undefined) {
|
|
return undefined;
|
|
}
|
|
const deltaFromNow = currentSprint.endDate.getTime() - now.getTime();
|
|
const deltaFromStart = currentSprint.endDate.getTime() - currentSprint.startDate.getTime();
|
|
return Math.floor(3 * deltaFromNow / deltaFromStart);
|
|
}
|
|
}
|