WIP: Filter team based on heatmap

Author: ptechofficial

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

@@ -74,3 +74,13 @@
   margin: 0;
   padding: 0 1em;
 }
+.team-filter {
+  /* padding: 1em; */
+  padding: 0;
+  /* margin: 0 2em; */
+  width: 60%;
+  /* position: absolute; */
+}
+.team-filter > .mat-form-field {
+  display: block;
+}

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

@@ -186,6 +186,20 @@ <h2>Nothing to show</h2>
         </ng-template>
       </div>
       <div id="chart" class="heatmapClass">
+        <div class="team-filter">
+          <mat-form-field class="team-chip-list">
+            <mat-label>TeamList Filter</mat-label>
+            <mat-chip-list #teams selectable multiple>
+              <mat-chip
+                #c="matChip"
+                *ngFor="let team of filterTeamList"
+                [value]="team"
+                selected>
+                {{ team }}
+              </mat-chip>
+            </mat-chip-list>
+          </mat-form-field>
+        </div>
         <mat-card class="example-card" *ngIf="showTaskCard">
           <mat-card-title-group>
             <mat-card-title>{{ cardHeader }}</mat-card-title>
@@ -220,6 +234,7 @@ <h2>Nothing to show</h2>
             </mat-expansion-panel>
           </mat-card-content>
         </mat-card>
+
         <button
           class="normal-button"
           mat-raised-button

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

@@ -35,7 +35,8 @@ export class CircularHeatmapComponent implements OnInit {
   ALL_CARD_DATA: cardSchema[] = [];
   radial_labels: string[] = [];
   YamlObject: any;
-  metaData: any;
+  teamList: any;
+  filterTeamList: any;
   segment_labels: string[] = [];
   taskDetails: any;
   showOverlay: boolean;
@@ -56,7 +57,14 @@ export class CircularHeatmapComponent implements OnInit {
         this.radial_labels.push('Level ' + y);
         this.maxLevelOfTasks = y;
       }
-      this.metaData = this.YamlObject;
+      this.teamList = this.YamlObject['strings']['en']['teams'];
+      this.filterTeamList = ['All'];
+      for (let i = 0; i < this.teamList.length; i += 1) {
+        this.filterTeamList.push(this.teamList[i]);
+      }
+
+      console.log(this.filterTeamList);
+      // this.filterTeamList = ["All,"...teamList]
     });
     this.yaml.setURI('./assets/YAML/generated/generated.yaml');
     // Function sets data
@@ -114,7 +122,7 @@ export class CircularHeatmapComponent implements OnInit {
                       allSubDimensionInThisDimension[j]
                     ][allTaskInThisSubDimension[k]]['isImplemented'];
                   // Create an object from an array from meta data
-                  const teams = this.metaData['strings']['en']['teams'];
+                  const teams = this.teamList;
 
                   var teamStatus: { [key: string]: boolean } = {};