Initial commit for YAML download button in circular heatmap

Author: 0x41head

package-lock.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",

package.json

@@ -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%;
+}

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

@@ -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>

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

@@ -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)