Dynamic tree graphs added

Author: 0x41head

src/app/component/task-description/task-description.component.html

@@ -126,16 +126,13 @@ <h1>{{currentTask.dimension}} -> {{currentTask.subDimension}}: {{currentTask.tas
                 </mat-accordion>
             </p>
         </mat-expansion-panel>
-        <mat-expansion-panel *ngIf="this.currentTask.dependsOn">
+        <mat-expansion-panel>
             <mat-expansion-panel-header>
                 <mat-panel-title>
                     <b>Depends on</b>
                 </mat-panel-title>
             </mat-expansion-panel-header>
-            <ul *ngFor="let dependency of this.currentTask.dependsOn">
-                <li>{{dependency}}</li>
-                <app-tree-map></app-tree-map>
-            </ul>
+               <app-tree-map dimension={{currentTask.dimension}} subDimension={{currentTask.subDimension}} taskName={{currentTask.taskName}}></app-tree-map>
         </mat-expansion-panel>
     </mat-accordion>
 </div>

src/app/component/tree-map/tree-map.component.html

@@ -1,3 +1,2 @@
 <div id="tree">
-    
 </div>

src/app/component/tree-map/tree-map.component.ts

@@ -1,73 +1,77 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
 import * as d3 from 'd3';
 
+export interface TreeNode {
+  name: string;
+  dependsOn:TreeNode[]
+}
+
+
 @Component({
   selector: 'app-tree-map',
   templateUrl: './tree-map.component.html',
   styleUrls: ['./tree-map.component.css']
 })
+
 export class TreeMapComponent implements OnInit {
+  SIZE_OF_NODE:number=10
+  COLOR_OF_LINK:string="black"
+  COLOR_OF_NODE:string="#55bc55"
+  BORDER_COLOR_OF_NODE:string="black"
+  TREE_DATA:TreeNode={name:"",dependsOn:[]};
+  YamlObject:any;
+  @Input() dimension: string= "";
+  @Input() subDimension: string= "";
+  @Input() taskName: string= "";
 
-  treeData = {
-    "name": "Eve",
-    "value": 15,
-    "children": [
-      {
-        "name": "Cain",
-        "value": 10,
-      },
-      {
-        "name": "Seth",
-        "value": 10,
-        "children": [
-          {
-            "name": "Enos",
-            "value": 7.5,
-          },
-          {
-            "name": "Noam",
-            "value": 7.5,
-          }
-        ]
-      },
-      {
-        "name": "Abel",
-        "value": 10,
-      },
-      {
-        "name": "Awan",
-        "value": 10,
-        "children": [
-          {
-            "name": "Enoch",
-            "value": 7.5,
-          }
-        ]
-      },
-      {
-        "name": "Azura",
-        "value": 10,
-      }
-    ]
-  };  
-  
-  constructor() { }
+  constructor(private yaml:ymlService) { }
 
   ngOnInit(): void {
-    this.generateTree()
+    this.setTreeData()
+  }
+
+  setTreeData():void{
+    this.yaml.setURI('./assets/YAML/generated/generated.yaml');
+    // Function sets data 
+    this.yaml.getJson().subscribe((data) => {
+      
+      this.YamlObject = data[this.dimension][this.subDimension];
+      //console.log(JSON.parse(JSON.stringify(this.TREE_DATA)));
+      this.TREE_DATA=this.generateTreeNodes(this.taskName)
+      //console.log(this.TREE_DATA)
+      this.generateTree()
+    })
+    
+  }
+
+  generateTreeNodes(currentTask:string):TreeNode{
+    var tempTreeNode:TreeNode={name:'',dependsOn:[]}
+    tempTreeNode['name']=currentTask
+    try{
+      for(var i=0;i<this.YamlObject[currentTask]["dependsOn"].length;i++){
+        tempTreeNode['dependsOn'].push(this.generateTreeNodes(this.YamlObject[currentTask]["dependsOn"][i]))
+      }
+    }
+    catch{
+      return tempTreeNode
+    }
+    //console.log(tempTreeNode)
+    return tempTreeNode
   }
 
   generateTree():void{
     // set the dimensions and margins of the diagram
-    const margin = {top: 20, right: 90, bottom: 30, left: 90},
-    width  = 660 - margin.left - margin.right,
+    const margin = {top: 20, right: 1250, bottom: 30, left: 90},
+    width  = 2000 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
 
     // declares a tree layout and assigns the size
     const treemap = d3.tree().size([height, width]);
 
     //  assigns the data to a hierarchy using parent-child relationships
-    var nodes:any = d3.hierarchy(this.treeData, (d:any) => d.children);
+    var nodes:any = d3.hierarchy(this.TREE_DATA, (d:any) => d.dependsOn);
+    console.log(JSON.parse(JSON.stringify(this.TREE_DATA)));
 
     // maps the node data to the tree layout
     nodes = treemap(nodes);
@@ -87,7 +91,7 @@ export class TreeMapComponent implements OnInit {
     .data( nodes.descendants().slice(1))
     .enter().append("path")
     .attr("class", "link")
-    .style("stroke", "black")
+    .style("stroke", this.COLOR_OF_LINK)
     .style("fill","none")
     .attr("d", (d:any) => {
     return "M" + d.y + "," + d.x
@@ -100,22 +104,23 @@ export class TreeMapComponent implements OnInit {
     const node = g.selectAll(".node")
     .data(nodes.descendants())
     .enter().append("g")
-    .attr("class", (d:any) => "node" + (d.children ? " node--internal" : " node--leaf"))
+    .attr("class", (d:any) => "node" + (d.dependsOn ? " node--internal" : " node--leaf"))
     .attr("transform", (d:any) => "translate(" + d.y + "," + d.x + ")");
 
     // adds the circle to the node
     node.append("circle")
-    .attr("r", (d:any) => d.data.value)
-    .style("stroke", "black")
-    .style("fill", "green");
+    .attr("r", this.SIZE_OF_NODE)
+    .style("stroke", this.BORDER_COLOR_OF_NODE)
+    .style("fill", this.COLOR_OF_NODE);
 
     // adds the text to the node
     node.append("text")
-    .attr("dy", ".35em")
-    .attr("x", (d:any) => d.children ? (d.data.value + 5) * -1 : d.data.value + 5)
-    .attr("y", (d:any) => d.children && d.depth !== 0 ? -(d.data.value + 5) : d)
-    .style("text-anchor", (d:any) => d.children ? "end" : "start")
+    .attr("dy", ".25em")
+    .attr("x", "-20")
+    .attr("y", "-20")
+    .style("text-anchor", (d:any) => d.dependsOn ? "end" : "start")
     .text((d:any) => d.data.name);
+    console.log()
   }