|
| 1 | +import { Component, OnInit, Input } from '@angular/core'; |
| 2 | +import { ymlService } from '../../service/yaml-parser/yaml-parser.service'; |
| 3 | +import * as d3 from 'd3'; |
| 4 | + |
| 5 | +export interface TreeNode { |
| 6 | + name: string; |
| 7 | + dependsOn:TreeNode[] |
| 8 | +} |
| 9 | + |
| 10 | + |
| 11 | +@Component({ |
| 12 | + selector: 'app-tree-map', |
| 13 | + templateUrl: './tree-map.component.html', |
| 14 | + styleUrls: ['./tree-map.component.css'] |
| 15 | +}) |
| 16 | + |
| 17 | +export class TreeMapComponent implements OnInit { |
| 18 | + SIZE_OF_NODE:number=10 |
| 19 | + COLOR_OF_LINK:string="black" |
| 20 | + COLOR_OF_NODE:string="#55bc55" |
| 21 | + BORDER_COLOR_OF_NODE:string="black" |
| 22 | + TREE_DATA:TreeNode={name:"",dependsOn:[]}; |
| 23 | + YamlObject:any; |
| 24 | + @Input() dimension: string= ""; |
| 25 | + @Input() subDimension: string= ""; |
| 26 | + @Input() taskName: string= ""; |
| 27 | + |
| 28 | + constructor(private yaml:ymlService) { } |
| 29 | + |
| 30 | + ngOnInit(): void { |
| 31 | + this.setTreeData() |
| 32 | + } |
| 33 | + |
| 34 | + setTreeData():void{ |
| 35 | + this.yaml.setURI('./assets/YAML/generated/generated.yaml'); |
| 36 | + // Function sets data |
| 37 | + this.yaml.getJson().subscribe((data) => { |
| 38 | + |
| 39 | + this.YamlObject = data[this.dimension][this.subDimension]; |
| 40 | + //console.log(JSON.parse(JSON.stringify(this.TREE_DATA))); |
| 41 | + this.TREE_DATA=this.generateTreeNodes(this.taskName) |
| 42 | + //console.log(this.TREE_DATA) |
| 43 | + this.generateTree() |
| 44 | + }) |
| 45 | + |
| 46 | + } |
| 47 | + |
| 48 | + generateTreeNodes(currentTask:string):TreeNode{ |
| 49 | + var tempTreeNode:TreeNode={name:'',dependsOn:[]} |
| 50 | + tempTreeNode['name']=currentTask |
| 51 | + try{ |
| 52 | + for(var i=0;i<this.YamlObject[currentTask]["dependsOn"].length;i++){ |
| 53 | + tempTreeNode['dependsOn'].push(this.generateTreeNodes(this.YamlObject[currentTask]["dependsOn"][i])) |
| 54 | + } |
| 55 | + } |
| 56 | + catch{ |
| 57 | + return tempTreeNode |
| 58 | + } |
| 59 | + //console.log(tempTreeNode) |
| 60 | + return tempTreeNode |
| 61 | + } |
| 62 | + |
| 63 | + generateTree():void{ |
| 64 | + // set the dimensions and margins of the diagram |
| 65 | + const margin = {top: 20, right: 1250, bottom: 30, left: 90}, |
| 66 | + width = 2000 - margin.left - margin.right, |
| 67 | + height = 500 - margin.top - margin.bottom; |
| 68 | + |
| 69 | + // declares a tree layout and assigns the size |
| 70 | + const treemap = d3.tree().size([height, width]); |
| 71 | + |
| 72 | + // assigns the data to a hierarchy using parent-child relationships |
| 73 | + var nodes:any = d3.hierarchy(this.TREE_DATA, (d:any) => d.dependsOn); |
| 74 | + console.log(JSON.parse(JSON.stringify(this.TREE_DATA))); |
| 75 | + |
| 76 | + // maps the node data to the tree layout |
| 77 | + nodes = treemap(nodes); |
| 78 | + |
| 79 | + // append the svg object to the body of the page |
| 80 | + // appends a 'group' element to 'svg' |
| 81 | + // moves the 'group' element to the top left margin |
| 82 | + const svg = d3.select("#tree").append("svg") |
| 83 | + .attr("width", width + margin.left + margin.right) |
| 84 | + .attr("height", height + margin.top + margin.bottom), |
| 85 | + g = svg.append("g") |
| 86 | + .attr("transform", |
| 87 | + "translate(" + margin.left + "," + margin.top + ")"); |
| 88 | + |
| 89 | + // adds the links between the nodes |
| 90 | + const link = g.selectAll(".link") |
| 91 | + .data( nodes.descendants().slice(1)) |
| 92 | + .enter().append("path") |
| 93 | + .attr("class", "link") |
| 94 | + .style("stroke", this.COLOR_OF_LINK) |
| 95 | + .style("fill","none") |
| 96 | + .attr("d", (d:any) => { |
| 97 | + return "M" + d.y + "," + d.x |
| 98 | + + "C" + (d.y + d.parent.y) / 2 + "," + d.x |
| 99 | + + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x |
| 100 | + + " " + d.parent.y + "," + d.parent.x; |
| 101 | + }); |
| 102 | + |
| 103 | + // adds each node as a group |
| 104 | + const node = g.selectAll(".node") |
| 105 | + .data(nodes.descendants()) |
| 106 | + .enter().append("g") |
| 107 | + .attr("class", (d:any) => "node" + (d.dependsOn ? " node--internal" : " node--leaf")) |
| 108 | + .attr("transform", (d:any) => "translate(" + d.y + "," + d.x + ")"); |
| 109 | + |
| 110 | + // adds the circle to the node |
| 111 | + node.append("circle") |
| 112 | + .attr("r", this.SIZE_OF_NODE) |
| 113 | + .style("stroke", this.BORDER_COLOR_OF_NODE) |
| 114 | + .style("fill", this.COLOR_OF_NODE); |
| 115 | + |
| 116 | + // adds the text to the node |
| 117 | + node.append("text") |
| 118 | + .attr("dy", ".25em") |
| 119 | + .attr("x", "-20") |
| 120 | + .attr("y", "-20") |
| 121 | + .style("text-anchor", (d:any) => d.dependsOn ? "end" : "start") |
| 122 | + .text((d:any) => d.data.name); |
| 123 | + console.log() |
| 124 | + } |
| 125 | + |
| 126 | + |
| 127 | +} |
0 commit comments