Fix getBackgroundColors() in dashboard

src/app/app.component.html

@@ -8,22 +8,22 @@
     </div>
       <ul class="nav">
         <li class="active ">
-          <a href="/dashboard">
+          <a [routerLink]="['dashboard']">
             <p>Dashboard</p>
           </a>
         </li>
         <li>
-          <a href="/sprints">
+          <a [routerLink]="['sprints']">
             <p>Sprints</p>
           </a>
         </li>
         <li>
-          <a href="/userstories">
+          <a [routerLink]="['userstories']">
             <p>Userstories</p>
           </a>
         </li>
         <li>
-          <a href="/tasks">
+          <a [routerLink]="['tasks']">
             <p>Tasks</p>
           </a>
         </li>

src/app/dashboard/dashboard.component.css

@@ -5,3 +5,11 @@
 .text-very-large {
   font-size: 2.4rem;
 }
+
+.content {
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 20px;
+  width: 80%;
+}

src/app/dashboard/dashboard.component.html

@@ -1,8 +1,9 @@
-<div class="mx-5 my-3">
+<div class="container-fluid">
+  <div class="content">
 
-  <div class="row px-3 py-2">
-    <h1>Dashboard</h1>
-  </div>
+    <h3>Dashboard</h3>
+
+    <div>
 
       <div class="row px-3 py-2">
 
@@ -92,6 +93,9 @@
             </div>
           </div>
         </div>
+
       </div>
 
+    </div>
+  </div>
 </div>

src/app/dashboard/dashboard.component.ts

@@ -108,9 +108,29 @@ export class DashboardComponent {
     }
   }
 
-//   public getNumberOfUserstoriesByStatus(status: ScrumStatus): number {
-//     return this.userstories.filter((us) => us.statusid === status.id).length;
-//   }
+  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.selectedSprintUserstories.filter(us => us.statusid === status.id).length;

src/app/userstory-table/userstory-table.component.html

@@ -1,4 +1,6 @@
-<div class="mx-5 my-3">
-  <h3 class="my-1">Userstories</h3>
+<div class="container-fluid">
+  <div class="content">
+    <h3>Userstories</h3>
     <app-userstory-inner-table [items]="items"></app-userstory-inner-table>
+  </div>
 </div>