From 25e9205beb2d63d93133aa0d88679502abd01002 Mon Sep 17 00:00:00 2001
From: Aryan <aryangiroud@gmail.com>
Date: Sat, 9 Jul 2022 11:27:21 +0530
Subject: [PATCH 1/2] Changed variable names for cleaner code

---
 .../circular-heatmap.component.html           | 18 ++---
 .../circular-heatmap.component.ts             | 70 +++++++++----------
 .../component/matrix/matrix.component.html    |  2 +-
 src/app/component/matrix/matrix.component.ts  | 22 +++---
 4 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.html b/src/app/component/circular-heatmap/circular-heatmap.component.html
index 426ef4069..d1b33012c 100644
--- a/src/app/component/circular-heatmap/circular-heatmap.component.html
+++ b/src/app/component/circular-heatmap/circular-heatmap.component.html
@@ -4,22 +4,22 @@
       </div>
       <div class="col-md-6">
         <div id="chart" class="abc">
-          <mat-card class="example-card" *ngIf="show">
+          <mat-card class="example-card" *ngIf="showTaskCard">
             <mat-card-title-group>
-              <mat-card-title>{{header}}</mat-card-title>
-              <mat-card-subtitle>{{subheader}}</mat-card-subtitle>
+              <mat-card-title>{{taskHeader}}</mat-card-title>
+              <mat-card-subtitle>{{taskSubheader}}</mat-card-subtitle>
             </mat-card-title-group>
-            <mat-card-content *ngFor="let task of tasks;index as i">
-              <div *ngIf="task.done; then trueBlock else falseBlock"></div>
+            <mat-card-content *ngFor="let task of tasksData;index as i">
+              <div *ngIf="task.ifTaskDone; then trueBlock else falseBlock"></div>
               <p>
                 <ng-template #trueBlock>
-                  <mat-checkbox (click)="this.checkboxToggle(i)" [checked]="true" color="primary">
-                    {{task["name"]}}
+                  <mat-checkbox (click)="this.toggleCheckbox(i)" [checked]="true" color="primary">
+                    {{task["taskName"]}}
                   </mat-checkbox>
                 </ng-template>
                 <ng-template #falseBlock>
-                  <mat-checkbox (click)="this.checkboxToggle(i)" [checked]="false" color="primary">
-                    {{task["name"]}}
+                  <mat-checkbox (click)="this.toggleCheckbox(i)" [checked]="false" color="primary">
+                    {{task["taskName"]}}
                   </mat-checkbox>
                 </ng-template>
               </p>
diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.ts b/src/app/component/circular-heatmap/circular-heatmap.component.ts
index 6181e84bf..be348cede 100644
--- a/src/app/component/circular-heatmap/circular-heatmap.component.ts
+++ b/src/app/component/circular-heatmap/circular-heatmap.component.ts
@@ -3,8 +3,8 @@ import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
 import * as d3 from 'd3';
 
 export interface taskSchema{
-  name:string
-  done:boolean
+  taskName:string
+  ifTaskDone:boolean
 }
 
 export interface cardSchema{
@@ -20,12 +20,12 @@ export interface cardSchema{
   styleUrls: ['./circular-heatmap.component.css']
 })
 export class CircularHeatmapComponent implements OnInit {
-  maxLevel:number=-1
-  show:boolean=false
-  header:string=''
-  subheader:string=''
-  tasks:any[]=[]
-  data:cardSchema[] =[];
+  maxLevelOfTasks:number=-1
+  showTaskCard:boolean=false
+  taskHeader:string=''
+  taskSubheader:string=''
+  tasksData:any[]=[]
+  ALL_CARD_DATA:cardSchema[] =[];
   radial_labels:string[]= [];
   YamlObject:any;
   segment_labels:string[] = [];
@@ -41,7 +41,7 @@ export class CircularHeatmapComponent implements OnInit {
       for(let x in this.YamlObject['strings']['en']['maturity_levels']){
         var y=parseInt(x)+1
         this.radial_labels.push('Level '+y)
-        this.maxLevel=y
+        this.maxLevelOfTasks=y
         }      
       
     });
@@ -55,7 +55,7 @@ export class CircularHeatmapComponent implements OnInit {
       for(var x in this.YamlObject['dimension']){
         this.segment_labels.push(this.YamlObject['dimension'][x]['subdimension']['name'])
       }
-      for(var l=0 ; l<this.maxLevel; l++){
+      for(var l=0 ; l<this.maxLevelOfTasks; l++){
         for(var x in this.YamlObject['dimension']){
           var tempdata:cardSchema={
             "Name": "",
@@ -73,53 +73,53 @@ export class CircularHeatmapComponent implements OnInit {
               if(Status){
                 totalImplemented+=1
               }
-              tempdata["Task"].push({"name":nameOfTask,"done":Status})
+              tempdata["Task"].push({"taskName":nameOfTask,"ifTaskDone":Status})
             }
             tempdata["Done%"]=totalImplemented/this.YamlObject['dimension'][x]['subdimension']['level-'+(l+1)].length
           }
           catch{
             tempdata["Done%"]=-1
           }
-          this.data.push(tempdata)
+          this.ALL_CARD_DATA.push(tempdata)
         }
       }
-      console.log(this.data)
-      this.loadCircularHeatMap(this.data, "#chart", this.radial_labels, this.segment_labels);
+      console.log(this.ALL_CARD_DATA)
+      this.loadCircularHeatMap(this.ALL_CARD_DATA, "#chart", this.radial_labels, this.segment_labels);
       this.noTasktoGrey()
     })
   }
 
-  checkboxToggle(taskIndex:number){
+  toggleCheckbox(taskIndex:number){
     //console.log('fo')
     let _self=this
     var index=0;
     var cnt=0;
-    for(var i=0;i<this.data.length;i++){
-      if(this.data[i]["Name"]===this.header&&this.data[i]["Level"]===this.subheader){
+    for(var i=0;i<this.ALL_CARD_DATA.length;i++){
+      if(this.ALL_CARD_DATA[i]["Name"]===this.taskHeader&&this.ALL_CARD_DATA[i]["Level"]===this.taskSubheader){
         index=i
         break;
       }
     }
-    if(this.data[index]["Task"][taskIndex]["done"]){
-      this.data[index]["Task"][taskIndex]["done"]=false
+    if(this.ALL_CARD_DATA[index]["Task"][taskIndex]["ifTaskDone"]){
+      this.ALL_CARD_DATA[index]["Task"][taskIndex]["ifTaskDone"]=false
     }
     else{
-      this.data[index]["Task"][taskIndex]["done"]=true
+      this.ALL_CARD_DATA[index]["Task"][taskIndex]["ifTaskDone"]=true
     }
     //console.log(this.data[i]["Task"][taskIndex]["done"])
-    for(var i=0;i< this.data[index]["Task"].length;i++){
-      console.log(this.data[index]["Task"][i]["done"])
-      if(this.data[index]["Task"][i]["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
       } 
     }
-    this.data[index]['Done%']=cnt/this.data[index]["Task"].length
+    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]).range(["white", "green"]);
     
-    this.loadCircularHeatMap(this.data, "#chart", this.radial_labels, this.segment_labels);
-    d3.selectAll("#segment-" + this.data[index]["Name"]+'-'+this.data[index]["Level"].replace(' ','-')).attr("fill", function(p) {
-      return color(_self.data[index]["Done%"])
+    this.loadCircularHeatMap(this.ALL_CARD_DATA, "#chart", this.radial_labels, this.segment_labels);
+    d3.selectAll("#segment-" + this.ALL_CARD_DATA[index]["Name"]+'-'+this.ALL_CARD_DATA[index]["Level"].replace(' ','-')).attr("fill", function(p) {
+      return color(_self.ALL_CARD_DATA[index]["Done%"])
     });
     
   }
@@ -177,11 +177,11 @@ export class CircularHeatmapComponent implements OnInit {
       
     svg.selectAll("path")
       .on('click', function(d) {
-        _self.subheader=d.explicitOriginalTarget.__data__.Level
-        _self.tasks=d.explicitOriginalTarget.__data__.Task;
-        _self.header=d.explicitOriginalTarget.__data__.Name
-        _self.show=true
-        console.log(_self.tasks)
+        _self.taskSubheader=d.explicitOriginalTarget.__data__.Level
+        _self.tasksData=d.explicitOriginalTarget.__data__.Task;
+        _self.taskHeader=d.explicitOriginalTarget.__data__.Name
+        _self.showTaskCard=true
+        console.log(_self.tasksData)
       })
       .on('mouseover', function(d) {
         
@@ -384,9 +384,9 @@ export class CircularHeatmapComponent implements OnInit {
   }
 
   noTasktoGrey():void{
-    for (var x in this.data){ 
-      if (this.data[x]["Done%"]==-1){
-        d3.selectAll("#segment-" + this.data[x]["Name"]+'-'+this.data[x]["Level"].replace(' ','-')).attr("fill","#DCDCDC");
+    for (var x in this.ALL_CARD_DATA){ 
+      if (this.ALL_CARD_DATA[x]["Done%"]==-1){
+        d3.selectAll("#segment-" + this.ALL_CARD_DATA[x]["Name"]+'-'+this.ALL_CARD_DATA[x]["Level"].replace(' ','-')).attr("fill","#DCDCDC");
       }
     }
   }
diff --git a/src/app/component/matrix/matrix.component.html b/src/app/component/matrix/matrix.component.html
index 47cb38e88..6083a7e40 100644
--- a/src/app/component/matrix/matrix.component.html
+++ b/src/app/component/matrix/matrix.component.html
@@ -5,7 +5,7 @@
     <mat-chip-list #chipList aria-label="Filter" color="primary">
       <mat-chip
         color="primary"
-        *ngFor="let row of rows"
+        *ngFor="let row of rowsCurrentlyBeingShown"
         (removed)="remove(row)"
         [selected]=true>
         {{row}}
diff --git a/src/app/component/matrix/matrix.component.ts b/src/app/component/matrix/matrix.component.ts
index 152283d99..d89d24021 100644
--- a/src/app/component/matrix/matrix.component.ts
+++ b/src/app/component/matrix/matrix.component.ts
@@ -36,12 +36,12 @@ export class MatrixComponent implements OnInit {
   lvlColumn: string[]=[];
   allRows:string[]=[];
   dataSource:any= new MatTableDataSource<MatrixElement>(this.MATRIX_DATA);
-  rows: string[] = [];
+  rowsCurrentlyBeingShown: string[] = [];
   
   constructor(private yaml:ymlService,private router: Router) {
     this.filteredRows = this.rowCtrl.valueChanges.pipe(
       startWith(null),
-      map((row: string | null) => (row ? this._filter(row) : this.autoCompeteRows.slice())),
+      map((row: string | null) => (row ? this._filter(row) : this.autoCompeteResults.slice())),
     );
    }
 
@@ -112,7 +112,7 @@ export class MatrixComponent implements OnInit {
     while(i<this.MATRIX_DATA.length){
       if(!this.allRows.includes(this.MATRIX_DATA[i].SubDimension)){
         this.allRows.push(this.MATRIX_DATA[i].SubDimension);
-        this.rows.push(this.MATRIX_DATA[i].SubDimension);
+        this.rowsCurrentlyBeingShown.push(this.MATRIX_DATA[i].SubDimension);
       }
       i++;
     }
@@ -123,27 +123,27 @@ export class MatrixComponent implements OnInit {
   rowCtrl = new FormControl('');
   filteredRows: Observable<string[]>;
   
-  autoCompeteRows: string[] = [];
+  autoCompeteResults: string[] = [];
 
   @ViewChild('rowInput') rowInput!: ElementRef<HTMLInputElement>;
    
   //Remove chips 
   remove(row: string): void {
-    let index = this.rows.indexOf(row);
+    let index = this.rowsCurrentlyBeingShown.indexOf(row);
     //console.log(this.allRows);
     if (index >= 0) {
-      this.rows.splice(index, 1);
+      this.rowsCurrentlyBeingShown.splice(index, 1);
     }
-    this.autoCompeteRows.push(row);
+    this.autoCompeteResults.push(row);
     this.dataSource.data.splice(index,1);
     this.dataSource._data.next(this.dataSource.data)
   }
 
   //Add chips
   selected(event: MatAutocompleteSelectedEvent): void {
-    let autoIndex = this.autoCompeteRows.indexOf(event.option.viewValue);
-    this.autoCompeteRows.splice(autoIndex,1);
-    this.rows.push(event.option.viewValue);
+    let autoIndex = this.autoCompeteResults.indexOf(event.option.viewValue);
+    this.autoCompeteResults.splice(autoIndex,1);
+    this.rowsCurrentlyBeingShown.push(event.option.viewValue);
     this.rowInput.nativeElement.value = '';
     this.rowCtrl.setValue(null);
     //console.log(this.allRows,event.option.viewValue);
@@ -158,7 +158,7 @@ export class MatrixComponent implements OnInit {
   private _filter(value: string): string[] {
     const filterValue = value.toLowerCase();
 
-    return this.autoCompeteRows.filter(row => row.toLowerCase().includes(filterValue));
+    return this.autoCompeteResults.filter(row => row.toLowerCase().includes(filterValue));
   }
 
   // task description routing + providing parameters

From bb6d75c97855ccfbeebc42f38d81838131619089 Mon Sep 17 00:00:00 2001
From: Aryan <aryangiroud@gmail.com>
Date: Mon, 11 Jul 2022 19:57:11 +0530
Subject: [PATCH 2/2] Initial commit for YAML  download button in circular
 heatmap

---
 package-lock.json                             | 71 +++++++++++++++----
 package.json                                  |  2 +
 .../circular-heatmap.component.css            |  6 +-
 .../circular-heatmap.component.html           |  6 +-
 .../circular-heatmap.component.ts             | 11 +++
 5 files changed, 80 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cd9bb7551..09d8af648 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@angular/platform-browser-dynamic": "~13.3.0",
         "@angular/router": "~13.3.0",
         "d3": "^7.5.0",
+        "js-yaml": "^4.1.0",
         "markdown-it": "^13.0.1",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
@@ -31,6 +32,7 @@
         "@angular/compiler-cli": "~13.3.0",
         "@types/d3": "^7.4.0",
         "@types/jasmine": "~3.10.0",
+        "@types/js-yaml": "^4.0.5",
         "@types/markdown-it": "^12.2.3",
         "@types/node": "^12.11.1",
         "@types/yamljs": "^0.2.31",
@@ -2483,6 +2485,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/@istanbuljs/schema": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
@@ -3091,6 +3106,12 @@
       "integrity": "sha512-twY9adK/vz72oWxCWxzXaxoDtF9TpfEEsxvbc1ibjF3gMD/RThSuSud/GKUTR3aJnfbivAbC/vLqhY+gdWCHfA==",
       "dev": true
     },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
+      "integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==",
+      "dev": true
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -7759,18 +7780,21 @@
       "dev": true
     },
     "node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "argparse": "^2.0.1"
       },
       "bin": {
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/js-yaml/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -14283,6 +14307,18 @@
         "get-package-type": "^0.1.0",
         "js-yaml": "^3.13.1",
         "resolve-from": "^5.0.0"
+      },
+      "dependencies": {
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        }
       }
     },
     "@istanbuljs/schema": {
@@ -14842,6 +14878,12 @@
       "integrity": "sha512-twY9adK/vz72oWxCWxzXaxoDtF9TpfEEsxvbc1ibjF3gMD/RThSuSud/GKUTR3aJnfbivAbC/vLqhY+gdWCHfA==",
       "dev": true
     },
+    "@types/js-yaml": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
+      "integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==",
+      "dev": true
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -18296,13 +18338,18 @@
       "dev": true
     },
     "js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "requires": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "argparse": "^2.0.1"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        }
       }
     },
     "jsesc": {
diff --git a/package.json b/package.json
index 292a0dc6d..9daf2f904 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
     "d3": "^7.5.0",
+    "js-yaml": "^4.1.0",
     "markdown-it": "^13.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
@@ -33,6 +34,7 @@
     "@angular/compiler-cli": "~13.3.0",
     "@types/d3": "^7.4.0",
     "@types/jasmine": "~3.10.0",
+    "@types/js-yaml": "^4.0.5",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^12.11.1",
     "@types/yamljs": "^0.2.31",
diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.css b/src/app/component/circular-heatmap/circular-heatmap.component.css
index 5ec7cd9cc..c90d1113f 100644
--- a/src/app/component/circular-heatmap/circular-heatmap.component.css
+++ b/src/app/component/circular-heatmap/circular-heatmap.component.css
@@ -7,7 +7,7 @@
     stroke: #000;
     shape-rendering: crispEdges;
   }
-.abc{
+.heatmapClass{
   background-color: aquamarine;
 }
 .example-card {
@@ -16,3 +16,7 @@
   margin:5%;
   padding: 20px;
 }
+.buttonClass{
+  float: right;
+  margin: 5%;
+}
diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.html b/src/app/component/circular-heatmap/circular-heatmap.component.html
index d1b33012c..4fea364ec 100644
--- a/src/app/component/circular-heatmap/circular-heatmap.component.html
+++ b/src/app/component/circular-heatmap/circular-heatmap.component.html
@@ -3,7 +3,7 @@
       <div class="col-md-3">
       </div>
       <div class="col-md-6">
-        <div id="chart" class="abc">
+        <div id="chart" class="heatmapClass">
           <mat-card class="example-card" *ngIf="showTaskCard">
             <mat-card-title-group>
               <mat-card-title>{{taskHeader}}</mat-card-title>
@@ -25,8 +25,8 @@
               </p>
             </mat-card-content>
           </mat-card>
-        </div>
-        
+          <button class="buttonClass" (click)="SaveDemo()">Save As</button>
+        </div>  
       </div>
       <div class="col-md-3">
       </div>
diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.ts b/src/app/component/circular-heatmap/circular-heatmap.component.ts
index be348cede..97862f531 100644
--- a/src/app/component/circular-heatmap/circular-heatmap.component.ts
+++ b/src/app/component/circular-heatmap/circular-heatmap.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
 import * as d3 from 'd3';
+import * as yaml from "js-yaml"
 
 export interface taskSchema{
   taskName:string
@@ -124,6 +125,16 @@ export class CircularHeatmapComponent implements OnInit {
     
   }
 
+  SaveDemo() {
+      let yamlStr = yaml.dump(this.YamlObject);
+      let file = new Blob([yamlStr], { type: 'text/csv;charset=utf-8' });
+      var link = document.createElement('a');
+      link.href = window.URL.createObjectURL(file);
+      link.download = './hlll.txt'
+      link.click(); 
+      link.remove();
+  }
+
   loadCircularHeatMap(dataset:any, dom_element_to_append_to:string, radial_labels:string[], segment_labels:string[]) {
     //d3.select(dom_element_to_append_to).selectAll('svg').exit()
     //console.log(dataset)