removed navigation and added a basic overlay

Author: ptechofficial

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

@@ -33,3 +33,17 @@ button {
   bottom: 5%;
   right: 18%;
 }
+.overlay-details {
+  z-index: 2;
+  background-color: rgba(255, 255, 255, 0.21);
+  backdrop-filter: blur(3px);
+  position: fixed;
+  /* padding: 6em; */
+  /* margin-left: 20%; */
+  width: 55%;
+  height: 100%;
+}
+.overlay-details > div {
+  /* border: 1px solid black; */
+  margin: 8em;
+}

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

@@ -2,6 +2,38 @@
   <div class="row">
     <div class="col-md-3"></div>
     <div class="col-md-6">
+      <div class="overlay-details">
+        <div *ngIf="taskDetails; then trueBlock; else falseBlock"></div>
+        <ng-template #trueBlock>
+          <div>
+            <!-- <mat-accordion multi="true"> -->
+            <mat-expansion-panel [expanded]="false">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <b>Risk</b>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <ng-template matExpansionPanelContent>
+                <p [innerHTML]="taskDetails.risk"></p>
+              </ng-template>
+            </mat-expansion-panel>
+            <!-- </mat-accordion> -->
+          </div>
+        </ng-template>
+        <ng-template #falseBlock>
+          <div>
+            <!-- <mat-accordion multi="true"> -->
+            <mat-expansion-panel [expanded]="false" hideToggle disabled>
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <b>None Selected</b>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+            </mat-expansion-panel>
+            <!-- </mat-accordion> -->
+          </div>
+        </ng-template>
+      </div>
       <div id="chart" class="heatmapClass">
         <mat-card class="example-card" *ngIf="showTaskCard">
           <mat-card-title-group>

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

@@ -35,6 +35,8 @@ export class CircularHeatmapComponent implements OnInit {
   radial_labels: string[] = [];
   YamlObject: any;
   segment_labels: string[] = [];
+  taskDetails: any;
+
   constructor(private yaml: ymlService, private router: Router) {}
 
   ngOnInit(): void {
@@ -66,7 +68,7 @@ export class CircularHeatmapComponent implements OnInit {
           this.segment_labels.push(allSubDimensionInThisDimension[j]);
         }
       }
-      //console.log(this.segment_labels)
+      // console.log(this.segment_labels);
       for (var l = 0; l < this.maxLevelOfTasks; l++) {
         var allDimensionNames = Object.keys(this.YamlObject);
         for (var i = 0; i < allDimensionNames.length; i++) {
@@ -565,9 +567,13 @@ export class CircularHeatmapComponent implements OnInit {
         taskName: taskName,
       },
     };
-    //console.log(navigationExtras);
-    //console.log(this.ALL_CARD_DATA);
-    this.router.navigate([this.Routing], navigationExtras);
+    this.yaml.setURI('./assets/YAML/generated/generated.yaml');
+
+    // console.log(navigationExtras.queryParams.dimension);
+    this.taskDetails = this.YamlObject[dim][subdim][taskName];
+    // console.log(this.ALL_CARD_DATA);
+    console.log(this.taskDetails);
+    // this.router.navigate([this.Routing], navigationExtras);
   }
   SaveEditedYAMLfile() {
     //console.log(this.YamlObject);