Fix #345 Spaces in groupnames

.prettierrc.json

@@ -7,5 +7,6 @@
     "arrowParens": "avoid",
     "trailingComma": "es5",
     "bracketSameLine": true,
-    "printWidth": 80
+    "printWidth": 80,
+    "endOfLine": "auto"
   }

src/app/component/circular-heatmap/circular-heatmap.component.css

@@ -8,8 +8,8 @@
   shape-rendering: crispEdges;
 }
 
-.normal-button {
-  background-color: white;
+.title-button {
+  background-color: transparent;
   border: none;
   text-align: left;
   cursor: pointer;

src/app/component/circular-heatmap/circular-heatmap.component.html

@@ -230,7 +230,8 @@ <h2>Nothing to show</h2>
                 <mat-chip
                   #c="matChip"
                   *ngFor="let team of teamList"
-                  (click)="toggleTeamSelection(c)">
+                  (click)="toggleTeamSelection(c)"
+                  selected>
                   {{ team }}
                 </mat-chip>
               </mat-chip-list>
@@ -247,7 +248,7 @@ <h2>Nothing to show</h2>
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     <button
-                      class="normal-button"
+                      class="title-button"
                       (click)="
                         $event.preventDefault();
                         navigate(

src/app/component/circular-heatmap/circular-heatmap.component.ts

@@ -68,11 +68,16 @@ export class CircularHeatmapComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    console.log(`${this.perfNow()}s: ngOnInit`);
     // Ensure that Levels and Teams load before MaturityData
     // using promises, since ngOnInit does not support async/await
     this.LoadMaturityLevels()
       .then(() => this.LoadTeamsFromMetaYaml())
-      .then(() => this.LoadMaturityDataFromGeneratedYaml());
+      .then(() => this.LoadMaturityDataFromGeneratedYaml())
+      .then(() => {
+        console.log(`${this.perfNow()}s: set filters: ${this.chips?.length}`);
+        this.matChipsArray = this.chips.toArray();
+      });
   }
 
   @ViewChildren(MatChip) chips!: QueryList<MatChip>;
@@ -255,7 +260,6 @@ export class CircularHeatmapComponent implements OnInit {
         this.teamList = this.YamlObject['teams'];
         this.teamGroups = this.YamlObject['teamGroups'];
         this.teamVisible = [...this.teamList];
-        console.log(`${this.perfNow()}s: LoadTeamsFromMetaYaml End`);
         resolve();
       });
     });
@@ -276,15 +280,14 @@ export class CircularHeatmapComponent implements OnInit {
           this.radial_labels.push('Level ' + y);
           this.maxLevelOfActivities = y;
         }
-        console.log(`${this.perfNow()}s: LoadMaturityLevels End`);
         resolve();
       });
     });
   }
 
   toggleTeamGroupSelection(chip: MatChip) {
     chip.toggleSelected();
-    let currChipValue = chip.value.replace(/\s/g, '');
+    let currChipValue = chip.value.trim();
 
     if (chip.selected) {
       this.selectedTeamChips = [currChipValue];
@@ -317,7 +320,7 @@ export class CircularHeatmapComponent implements OnInit {
 
   toggleTeamSelection(chip: MatChip) {
     chip.toggleSelected();
-    let currChipValue = chip.value.replace(/\s/g, '');
+    let currChipValue = chip.value.trim();
     let prevSelectedChip = this.selectedTeamChips;
     if (chip.selected) {
       this.teamVisible.push(currChipValue);
@@ -334,21 +337,11 @@ export class CircularHeatmapComponent implements OnInit {
     this.updateChips(prevSelectedChip);
   }
 
-  ngAfterViewInit() {
-    // Putting all the chips inside an array
-
-    setTimeout(() => {
-      this.matChipsArray = this.chips.toArray();
-      this.updateChips(true);
-      this.reColorHeatmap();
-    }, 100);
-  }
-
   updateChips(fromTeamGroup: any) {
     console.log('updating chips', fromTeamGroup);
     // Re select chips
     this.matChipsArray.forEach(chip => {
-      let currChipValue = chip.value.replace(/\s/g, '');
+      let currChipValue = chip.value.trim();
 
       if (this.teamVisible.includes(currChipValue)) {
         console.log(currChipValue);