Added Description in overlay and code cleanup

Author: ptechofficial

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

@@ -19,8 +19,8 @@
                     <button class="overlay-close" (click)="closeOverlay()">
                       <mat-icon class="white-icon">close</mat-icon>
                     </button>
-                    <h2>{{ taskDetails.navigationExtras.dimension }} ></h2>
-                    <h3>{{ taskDetails.navigationExtras.subDimension }} ></h3>
+                    <h2>{{ taskDetails.navigationExtras.dimension }}</h2>
+                    <h3>{{ taskDetails.navigationExtras.subDimension }}</h3>
                     <h4>
                       {{ taskDetails.navigationExtras.taskName }}
                     </h4>
@@ -35,6 +35,16 @@ <h2>Nothing to show</h2>
                   </div>
                 </ng-template>
               </div>
+              <mat-expansion-panel [expanded]="true">
+                <mat-expansion-panel-header>
+                  <mat-panel-title>
+                    <b>Description</b>
+                  </mat-panel-title>
+                </mat-expansion-panel-header>
+                <ng-template matExpansionPanelContent>
+                  <p [innerHTML]="taskDetails.description"></p>
+                </ng-template>
+              </mat-expansion-panel>
               <mat-expansion-panel [expanded]="true">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
@@ -139,10 +149,10 @@ <h2>Nothing to show</h2>
             <button class="overlay-close" (click)="closeOverlay()">
               <mat-icon class="white-icon">close</mat-icon>
             </button>
-            <mat-expansion-panel [expanded]="true" hideToggle disabled>
+            <mat-expansion-panel [expanded]="false" hideToggle disabled>
               <mat-expansion-panel-header>
                 <mat-panel-title>
-                  <b>Nothing to show :P</b>
+                  <b>Nothing to show</b>
                 </mat-panel-title>
               </mat-expansion-panel-header>
             </mat-expansion-panel>

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

@@ -59,10 +59,9 @@ export class CircularHeatmapComponent implements OnInit {
     this.yaml.setURI('./assets/YAML/generated/generated.yaml');
     // Function sets data
     this.yaml.getJson().subscribe(data => {
-      //console.log(this.radial_labels)
       this.YamlObject = data;
+
       var allDimensionNames = Object.keys(this.YamlObject);
-      //console.log(allDimensionNames)
       for (var i = 0; i < allDimensionNames.length; i++) {
         var allSubDimensionInThisDimension = Object.keys(
           this.YamlObject[allDimensionNames[i]]
@@ -71,7 +70,6 @@ export class CircularHeatmapComponent implements OnInit {
           this.segment_labels.push(allSubDimensionInThisDimension[j]);
         }
       }
-      // 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++) {
@@ -128,7 +126,6 @@ export class CircularHeatmapComponent implements OnInit {
           }
         }
       }
-      //console.log(this.ALL_CARD_DATA);
       this.loadState();
       this.loadCircularHeatMap(
         this.ALL_CARD_DATA,
@@ -141,7 +138,6 @@ export class CircularHeatmapComponent implements OnInit {
   }
 
   toggleCheckbox(taskIndex: number) {
-    //console.log('fo')
     let _self = this;
     var index = 0;
     var cnt = 0;
@@ -159,9 +155,7 @@ export class CircularHeatmapComponent implements OnInit {
     } else {
       this.ALL_CARD_DATA[index]['Task'][taskIndex]['ifTaskDone'] = true;
     }
-    //console.log(this.data[i]["Task"][taskIndex]["done"])
     for (var i = 0; i < this.ALL_CARD_DATA[index]['Task'].length; i++) {
-      console.log(this.ALL_CARD_DATA[index]['Task'][i]['ifTaskDone']);
       if (this.ALL_CARD_DATA[index]['Task'][i]['ifTaskDone']) {
         cnt += 1;
       }
@@ -175,7 +169,6 @@ export class CircularHeatmapComponent implements OnInit {
         if (allSubDimensionInThisDimension[j] == this.cardHeader) {
           var taskName =
             this.ALL_CARD_DATA[index]['Task'][taskIndex]['taskName'];
-          //console.log(taskName)
           this.YamlObject[allDimensionNames[i]][
             allSubDimensionInThisDimension[j]
           ][taskName]['isImplemented'] =
@@ -186,7 +179,6 @@ export class CircularHeatmapComponent implements OnInit {
     }
     this.ALL_CARD_DATA[index]['Done%'] =
       cnt / this.ALL_CARD_DATA[index]['Task'].length;
-    //console.log(this.data[index]['Done%'],cnt)
     var color = d3
       .scaleLinear<string, string>()
       .domain([0, 1])
@@ -209,9 +201,6 @@ export class CircularHeatmapComponent implements OnInit {
     radial_labels: string[],
     segment_labels: string[]
   ) {
-    //console.log(segment_labels)
-    //d3.select(dom_element_to_append_to).selectAll('svg').exit()
-    //console.log(dataset)
     let _self = this;
     var margin = {
       top: 50,
@@ -271,31 +260,25 @@ export class CircularHeatmapComponent implements OnInit {
     svg
       .selectAll('path')
       .on('click', function (d) {
-        console.log(d);
         try {
           curr = d.explicitOriginalTarget.__data__;
         } catch {
           curr = d.srcElement.__data__;
         }
-        //console.log(curr);
         _self.currentDimension = curr.Dimension;
         _self.cardSubheader = curr.Level;
         _self.tasksData = curr.Task;
         _self.cardHeader = curr.SubDimension;
         _self.showTaskCard = true;
-        //console.log(_self.tasksData)
       })
       .on('mouseover', function (d) {
-        //console.log(d.toElement.__data__.Name)
         try {
           curr = d.explicitOriginalTarget.__data__;
         } catch {
           curr = d.toElement.__data__;
         }
-        //console.log(curr)
         // increase the segment height of the one being hovered as well as all others of the same date
         // while decreasing the height of all others accordingly
-        //console.log(d)
         if (curr['Done%'] != -1) {
           d3.selectAll(
             '#segment-' +
@@ -307,13 +290,6 @@ export class CircularHeatmapComponent implements OnInit {
       })
 
       .on('mouseout', function (d) {
-        //console.log(d.explicitOriginalTarget.__data__.Day)
-
-        //  var time = d.Time;
-        //  var timeCleaned = time.split(":").join("-");
-        //  var segment = d3.select("#segment-"+d.Day +"-"+timeCleaned); //designate selector variable for brevity
-        //  var fillcolor = segment.select("desc").text();  //access original color from desc
-        //  segment.style("fill", fillcolor);
         if (curr['Done%'] != -1) {
           d3.selectAll(
             '#segment-' +
@@ -326,7 +302,6 @@ export class CircularHeatmapComponent implements OnInit {
               .domain([0, 1])
               .range(['white', 'green']);
             // how to access a function within reusable charts
-            //console.log(color(d.Done));
             return color(curr['Done%']);
           });
         } else {
@@ -358,8 +333,6 @@ export class CircularHeatmapComponent implements OnInit {
     var radialLabels = [];
     var segmentLabels: any[] = [];
 
-    //console.log(segmentLabels)
-
     function chart(selection: any) {
       selection.each(function (this: any, data: any) {
         var svg = d3.select(this);
@@ -393,7 +366,6 @@ export class CircularHeatmapComponent implements OnInit {
           .data(data)
           .enter()
           .append('path')
-          // .attr("class","segment")
           .attr('class', function (d: any) {
             return 'segment-' + d.SubDimension.replace(/ /g, '-');
           })
@@ -422,7 +394,6 @@ export class CircularHeatmapComponent implements OnInit {
           });
 
         // Unique id so that the text path defs are unique - is there a better way to do this?
-        // console.log(d3.selectAll(".circular-heat")["_groups"][0].length)
         var id = 1;
 
         //Segment labels
@@ -546,11 +517,8 @@ export class CircularHeatmapComponent implements OnInit {
   }
 
   noTasktoGrey(): void {
-    console.log(this.ALL_CARD_DATA);
     for (var x = 0; x < this.ALL_CARD_DATA.length; x++) {
       if (this.ALL_CARD_DATA[x]['Done%'] == -1) {
-        console.log(this.ALL_CARD_DATA[x]['SubDimension']);
-        console.log(this.ALL_CARD_DATA[x]['Level']);
         d3.selectAll(
           '#segment-' +
             this.ALL_CARD_DATA[x]['SubDimension'].replace(/ /g, '-') +
@@ -573,15 +541,12 @@ export class CircularHeatmapComponent implements OnInit {
     if (this.taskDetails) {
       this.taskDetails.navigationExtras = navigationExtras;
     }
-    console.log(this.taskDetails);
     this.showOverlay = true;
   }
   closeOverlay() {
-    console.log('hey');
     this.showOverlay = false;
   }
   SaveEditedYAMLfile() {
-    //console.log(this.YamlObject);
     let yamlStr = yaml.dump(this.YamlObject);
     let file = new Blob([yamlStr], { type: 'text/csv;charset=utf-8' });
     var link = document.createElement('a');