adding ~All~ value and single select functionality

Author: ptechofficial

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

@@ -16,7 +16,7 @@
   font-weight: 700;
 }
 
-.example-card {
+.right-panel {
   float: right;
   width: 25%;
   margin: 5%;
@@ -74,13 +74,10 @@
   margin: 0;
   padding: 0 1em;
 }
-.team-filter {
-  /* padding: 1em; */
+/* .team-filter {
   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,54 +186,62 @@ <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 class="right-panel">
+          <div class="team-filter">
+            <mat-form-field class="team-chip-list">
+              <mat-label>Team Filter</mat-label>
+              <mat-chip-list selectable>
+                <mat-chip
+                  #c="matChip"
+                  (click)="toggleTeamSelection(c)"
+                  selected>
+                  All
+                </mat-chip>
+                <mat-chip
+                  #c="matChip"
+                  *ngFor="let team of teamList"
+                  (click)="toggleTeamSelection(c)">
+                  {{ 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>
+              <mat-card-subtitle>{{ cardSubheader }}</mat-card-subtitle>
+            </mat-card-title-group>
+            <mat-card-content
+              *ngFor="let task of tasksData; index as taskIndex">
+              <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                  <mat-panel-title>
+                    <button
+                      class="normal-button"
+                      (click)="
+                        $event.preventDefault();
+                        navigate(currentDimension, cardHeader, task['taskName'])
+                      ">
+                      {{ task['taskName'] }}
+                    </button>
+                  </mat-panel-title>
+                </mat-expansion-panel-header>
+                <ng-template matExpansionPanelContent>
+                  <ul class="team-list">
+                    <li *ngFor="let item of task.teamsImplemented | keyvalue">
+                      <mat-checkbox
+                        [checked]="item.value === true"
+                        color="primary"
+                        (click)="this.teamCheckbox(taskIndex, item.key)">
+                        {{ item.key }}
+                      </mat-checkbox>
+                    </li>
+                  </ul>
+                </ng-template>
+              </mat-expansion-panel>
+            </mat-card-content>
+          </mat-card>
         </div>
-        <mat-card class="example-card" *ngIf="showTaskCard">
-          <mat-card-title-group>
-            <mat-card-title>{{ cardHeader }}</mat-card-title>
-            <mat-card-subtitle>{{ cardSubheader }}</mat-card-subtitle>
-          </mat-card-title-group>
-          <mat-card-content *ngFor="let task of tasksData; index as taskIndex">
-            <mat-expansion-panel>
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  <button
-                    class="normal-button"
-                    (click)="
-                      $event.preventDefault();
-                      navigate(currentDimension, cardHeader, task['taskName'])
-                    ">
-                    {{ task['taskName'] }}
-                  </button>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <ng-template matExpansionPanelContent>
-                <ul class="team-list">
-                  <li *ngFor="let item of task.teamsImplemented | keyvalue">
-                    <mat-checkbox
-                      [checked]="item.value === true"
-                      color="primary"
-                      (click)="this.teamCheckbox(taskIndex, item.key)">
-                      {{ item.key }}
-                    </mat-checkbox>
-                  </li>
-                </ul>
-              </ng-template>
-            </mat-expansion-panel>
-          </mat-card-content>
-        </mat-card>
 
         <button
           class="normal-button"

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

@@ -3,6 +3,7 @@ import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
 import * as d3 from 'd3';
 import * as yaml from 'js-yaml';
 import { Router, NavigationExtras } from '@angular/router';
+import { MatChip } from '@angular/material/chips';
 
 export interface taskSchema {
   taskName: string;
@@ -36,7 +37,7 @@ export class CircularHeatmapComponent implements OnInit {
   radial_labels: string[] = [];
   YamlObject: any;
   teamList: any;
-  filterTeamList: any;
+  filteredTeamView: string = 'All';
   segment_labels: string[] = [];
   taskDetails: any;
   showOverlay: boolean;
@@ -58,13 +59,6 @@ export class CircularHeatmapComponent implements OnInit {
         this.maxLevelOfTasks = y;
       }
       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
@@ -117,10 +111,7 @@ export class CircularHeatmapComponent implements OnInit {
                 if (lvlOfCurrentTask == l + 1) {
                   totalTaskTeams += 1;
                   var nameOfTask: string = allTaskInThisSubDimension[k];
-                  var Status: boolean =
-                    this.YamlObject[allDimensionNames[i]][
-                      allSubDimensionInThisDimension[j]
-                    ][allTaskInThisSubDimension[k]]['isImplemented'];
+
                   // Create an object from an array from meta data
                   const teams = this.teamList;
 
@@ -179,6 +170,19 @@ export class CircularHeatmapComponent implements OnInit {
     });
   }
 
+  // Team Filter BEGINS
+
+  toggleTeamSelection(chip: MatChip) {
+    chip.toggleSelected();
+    this.filteredTeamView = chip.value;
+    console.log(this.filteredTeamView);
+    console.log(this.teamList);
+
+    // Update heatmap based on selection
+    this.reColorHeatmap();
+  }
+  // Team Filter ENDS
+
   teamCheckbox(taskIndex: number, teamKey: any) {
     let _self = this;
     var index = 0;