Merged branch comments/dashbaord

This commit is contained in:
Nicolai Ort 2020-07-14 18:49:06 +02:00
commit b51bd226ea
2 changed files with 339 additions and 306 deletions

View File

@ -4,6 +4,8 @@
<div> <div>
<div class="row px-3 py-2"> <div class="row px-3 py-2">
<!-- Show a message if no sprints exist yet, with a link to the page where a new one can be created -->
<ng-container *ngIf="selectedSprint === undefined"> <ng-container *ngIf="selectedSprint === undefined">
<h3 class="mr-3 text-primary">Alle Userstories</h3> <h3 class="mr-3 text-primary">Alle Userstories</h3>
<a [routerLink]="['sprints']" <a [routerLink]="['sprints']"
@ -57,6 +59,7 @@
</select> </select>
</label> </label>
<!-- If the active sprint is selected: Show the number of remaining days + urgency -->
<span class="mr-5"></span> <span class="mr-5"></span>
<h3 <h3
*ngIf="selectedSprint === currentSprint" *ngIf="selectedSprint === currentSprint"
@ -71,6 +74,8 @@
</div> </div>
<div class="row"> <div class="row">
<!-- Info on the userstories in the selected sprint -->
<div class="p-3 col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12"> <div class="p-3 col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">

View File

@ -1,12 +1,7 @@
import { Component, OnChanges } from '@angular/core'; import { Component } from '@angular/core';
import { forkJoin } from 'rxjs'; import { forkJoin } from 'rxjs';
import Chart from 'chart.js'; import Chart from 'chart.js';
import { import { BackendService, ScrumSprint, ScrumStatus, ScrumUserstory } from '../../services/backend.service';
BackendService,
ScrumSprint,
ScrumStatus,
ScrumUserstory,
} from '../../services/backend.service';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
@ -25,6 +20,9 @@ export class DashboardComponent {
); );
} }
/**
* Returns all userstories in the selected sprint.
*/
public get selectedSprintUserstories(): ScrumUserstory[] { public get selectedSprintUserstories(): ScrumUserstory[] {
if (this.selectedSprint === undefined) { if (this.selectedSprint === undefined) {
return this.userstories; return this.userstories;
@ -34,6 +32,10 @@ export class DashboardComponent {
); );
} }
/**
* Returns the currently active sprint.
* If multiple sprints are active at the current time, any one of them may be returned.
*/
public get currentSprint(): ScrumSprint { public get currentSprint(): ScrumSprint {
const now = Date.now(); const now = Date.now();
return this.sprints.find( return this.sprints.find(
@ -42,6 +44,10 @@ export class DashboardComponent {
} }
private _selectedSprint: ScrumSprint; private _selectedSprint: ScrumSprint;
/**
* Returns the sprint selected by the user.
*/
public get selectedSprint(): ScrumSprint { public get selectedSprint(): ScrumSprint {
if (this._selectedSprint === undefined) { if (this._selectedSprint === undefined) {
if (this.currentSprint === undefined) { if (this.currentSprint === undefined) {
@ -52,15 +58,26 @@ export class DashboardComponent {
return this._selectedSprint; return this._selectedSprint;
} }
/**
* Sets the sprint selected by the user.
*/
public set selectedSprint(value) { public set selectedSprint(value) {
this._selectedSprint = value; this._selectedSprint = value;
this.createChart(); this.createChart();
} }
/** All status. */
public status: ScrumStatus[] = []; public status: ScrumStatus[] = [];
/** All userstories. */
public userstories: ScrumUserstory[] = []; public userstories: ScrumUserstory[] = [];
/** All sprints. */
public sprints: ScrumSprint[] = []; public sprints: ScrumSprint[] = [];
/**
* The pie chart showing the userstories in the selected sprint.
*/
public chart: Chart; public chart: Chart;
constructor(private backendService: BackendService) { constructor(private backendService: BackendService) {
@ -89,9 +106,11 @@ export class DashboardComponent {
/** /**
* Returns the date in the following format: 1.7.2020 * Returns the date in the following format: 1.7.2020
* @param dateValue an integer representing the number of milliseconds since the
* ECMAScript epoch -or- a string in a format recognized by the Date.parse() method.
*/ */
public toDateString(isoFormatString) { public toDateString(dateValue) {
const date = new Date(isoFormatString); const date = new Date(dateValue);
return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`; return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
} }
@ -130,6 +149,9 @@ export class DashboardComponent {
} }
} }
/**
* Returns a sufficiently large array of background colors to be used in the chart.
*/
private getBackgroundColors(): string[] { private getBackgroundColors(): string[] {
const baseColors = [ const baseColors = [
'rgb(255, 153, 102)', 'rgb(255, 153, 102)',
@ -154,12 +176,18 @@ export class DashboardComponent {
return colors; return colors;
} }
/**
* Returns the number of userstories in the selected sprint that have the given status.
*/
public getNumberOfUserstoriesByStatus(status: ScrumStatus): number { public getNumberOfUserstoriesByStatus(status: ScrumStatus): number {
return this.selectedSprintUserstories.filter( return this.selectedSprintUserstories.filter(
(us) => us.statusid === status.id (us) => us.statusid === status.id
).length; ).length;
} }
/**
* Returns the days remaining until the end date of the selected sprint.
*/
public getRemainingDaysInSprint(): number { public getRemainingDaysInSprint(): number {
if (this.selectedSprint === undefined) { if (this.selectedSprint === undefined) {
return undefined; return undefined;