Comprehensive Heatmap

Author: ptechofficial

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

@@ -1,36 +1,35 @@
 .margin30 {
-    margin-bottom: 30px;
-  }
+  margin-bottom: 30px;
+}
 .axis path,
 .axis line {
-    fill: none;
-    stroke: #000;
-    shape-rendering: crispEdges;
-  }
-
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
 
-button{
+button {
   background-color: white;
   border: none;
   text-align: left;
-  cursor:pointer;
+  cursor: pointer;
 }
 
 .example-card {
   float: right;
-  width:25%;
-  margin:5%;
+  width: 25%;
+  margin: 5%;
   padding: 20px;
 }
-.downloadButtonClass{
+.downloadButtonClass {
   position: absolute;
   padding: 10px;
   bottom: 5%;
   right: 5%;
 }
-.resetButtonClass{
+.resetButtonClass {
   position: absolute;
   padding: 10px;
   bottom: 5%;
   right: 18%;
-}
+}

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

@@ -11,6 +11,7 @@
           <mat-card-content *ngFor="let task of tasksData; index as i">
             <div *ngIf="task.ifTaskDone; then trueBlock; else falseBlock"></div>
             <p>
+              <!-- Comprehensive Heat Map -->
               <ng-template #trueBlock>
                 <mat-checkbox
                   (click)="this.toggleCheckbox(i)"