Add dashboard comments
This commit is contained in:
parent
8dcc3a1f45
commit
9a89f8f338
@ -7,6 +7,7 @@
|
|||||||
|
|
||||||
<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']">Lege einen Sprint an, um Userstories zu organisieren.</a>
|
<a [routerLink]="['sprints']">Lege einen Sprint an, um Userstories zu organisieren.</a>
|
||||||
@ -36,6 +37,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"
|
||||||
@ -53,6 +55,7 @@
|
|||||||
|
|
||||||
<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">
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
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 { BackendService, ScrumSprint, ScrumStatus, ScrumUserstory } from '../../services/backend.service';
|
import { BackendService, ScrumSprint, ScrumStatus, ScrumUserstory } from '../../services/backend.service';
|
||||||
@ -16,6 +16,9 @@ export class DashboardComponent {
|
|||||||
return this.status.filter(s => this.selectedSprintUserstories.find(us => us.statusid === s.id) !== undefined);
|
return this.status.filter(s => this.selectedSprintUserstories.find(us => us.statusid === s.id) !== undefined);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
@ -23,12 +26,20 @@ export class DashboardComponent {
|
|||||||
return this.userstories.filter(us => us.sprintid === this.selectedSprint.id);
|
return this.userstories.filter(us => us.sprintid === this.selectedSprint.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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(s => Date.parse(s.startDate) < now && Date.parse(s.endDate) > now);
|
return this.sprints.find(s => Date.parse(s.startDate) < now && Date.parse(s.endDate) > now);
|
||||||
}
|
}
|
||||||
|
|
||||||
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) {
|
||||||
@ -39,15 +50,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) {
|
||||||
@ -69,9 +91,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()}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -81,9 +105,7 @@ export class DashboardComponent {
|
|||||||
|
|
||||||
if (this.usedStatus.length === 0) {
|
if (this.usedStatus.length === 0) {
|
||||||
this.chart.destroy();
|
this.chart.destroy();
|
||||||
}
|
} else {
|
||||||
|
|
||||||
else {
|
|
||||||
this.chart = new Chart(context, {
|
this.chart = new Chart(context, {
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
data: {
|
data: {
|
||||||
@ -108,6 +130,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)',
|
||||||
@ -132,10 +157,16 @@ 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(us => us.statusid === status.id).length;
|
return this.selectedSprintUserstories.filter(us => us.statusid === status.id).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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user