Added expansion of fields in implementation by clicking on it + Initial commit for dependency tree

Author: 0x41head

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { MappingComponent } from './component/mapping/mapping.component';
 import { ReadmeToHtmlComponent } from './component/readme-to-html/readme-to-html.component';
 import { UsageComponent } from './component/usage/usage.component';
 import { AboutUsComponent } from './component/about-us/about-us.component';
+import { TreeMapComponent } from './component/tree-map/tree-map.component';
 
 
 @NgModule({
@@ -36,6 +37,7 @@ import { AboutUsComponent } from './component/about-us/about-us.component';
     ReadmeToHtmlComponent,
     UsageComponent,
     AboutUsComponent,
+    TreeMapComponent,
 
   ],
   imports: [

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

@@ -234,7 +234,7 @@ export class CircularHeatmapComponent implements OnInit {
         //console.log(_self.tasksData)
       })
       .on('mouseover', function(d) {
-        console.log(d.toElement.__data__.Name)
+        //console.log(d.toElement.__data__.Name)
         try{
           curr=d.explicitOriginalTarget.__data__
         }

src/app/component/matrix/matrix.component.css

@@ -31,5 +31,6 @@ button{
     background-color: white;
     border: none;
     text-align: left;
+    cursor:pointer;
 }
 

src/app/component/matrix/matrix.component.html

@@ -51,7 +51,7 @@
                 <li *ngFor="let task of element[lvl]; index as j" >
                   <button (click)="navigate(element.Dimension,element.SubDimension,i+1,task)">
                     {{task}}
-                    </button>
+                  </button>
                 </li>
             </ul>
         </td>

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

@@ -63,7 +63,7 @@ <h1>{{currentTask.dimension}} -> {{currentTask.subDimension}}: {{currentTask.tas
                         </mat-expansion-panel-header>
                         <p>
                             <mat-accordion multi="true">
-                                <mat-expansion-panel>
+                                <mat-expansion-panel [expanded]="true">
                                     <mat-expansion-panel-header>
                                         <mat-panel-title>
                                             <b>Tags</b>
@@ -73,15 +73,15 @@ <h1>{{currentTask.dimension}} -> {{currentTask.subDimension}}: {{currentTask.tas
                                         <li [innerHTML]="tag"></li>
                                     </ul>
                                 </mat-expansion-panel>
-                                <mat-expansion-panel>
+                                <mat-expansion-panel [expanded]="true">
                                     <mat-expansion-panel-header>
                                         <mat-panel-title>
                                             <b>URL</b>
                                         </mat-panel-title>
                                     </mat-expansion-panel-header>
                                     <p [innerHTML]="implement['url']"></p>
                                 </mat-expansion-panel>
-                                <mat-expansion-panel>
+                                <mat-expansion-panel [expanded]="true">
                                     <mat-expansion-panel-header>
                                         <mat-panel-title>
                                             <b>Description</b>
@@ -134,6 +134,7 @@ <h1>{{currentTask.dimension}} -> {{currentTask.subDimension}}: {{currentTask.tas
             </mat-expansion-panel-header>
             <ul *ngFor="let dependency of this.currentTask.dependsOn">
                 <li>{{dependency}}</li>
+                <app-tree-map></app-tree-map>
             </ul>
         </mat-expansion-panel>
     </mat-accordion>

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

@@ -0,0 +1,18 @@
+body {
+    background-color: #eee;
+  }
+  
+.node circle {
+    fill: #fff;
+    stroke: steelblue;
+    stroke-width: 3px;
+  }
+  
+.node text { font: 16px sans-serif; }
+  
+.link {
+    
+    stroke: #ccc;
+    stroke-width: 2px;
+    fill: none;
+  }

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

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

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TreeMapComponent } from './tree-map.component';
+
+describe('TreeMapComponent', () => {
+  let component: TreeMapComponent;
+  let fixture: ComponentFixture<TreeMapComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TreeMapComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TreeMapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,122 @@
+import { Component, OnInit } from '@angular/core';
+import * as d3 from 'd3';
+
+@Component({
+  selector: 'app-tree-map',
+  templateUrl: './tree-map.component.html',
+  styleUrls: ['./tree-map.component.css']
+})
+export class TreeMapComponent implements OnInit {
+
+  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() { }
+
+  ngOnInit(): void {
+    this.generateTree()
+  }
+
+  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,
+    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);
+
+    // maps the node data to the tree layout
+    nodes = treemap(nodes);
+
+    // append the svg object to the body of the page
+    // appends a 'group' element to 'svg'
+    // moves the 'group' element to the top left margin
+    const svg = d3.select("#tree").append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom),
+    g = svg.append("g")
+    .attr("transform",
+        "translate(" + margin.left + "," + margin.top + ")");
+
+    // adds the links between the nodes
+    const link = g.selectAll(".link")
+    .data( nodes.descendants().slice(1))
+    .enter().append("path")
+    .attr("class", "link")
+    .style("stroke", "black")
+    .style("fill","none")
+    .attr("d", (d:any) => {
+    return "M" + d.y + "," + d.x
+    + "C" + (d.y + d.parent.y) / 2 + "," + d.x
+    + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
+    + " " + d.parent.y + "," + d.parent.x;
+    });
+
+    // adds each node as a group
+    const node = g.selectAll(".node")
+    .data(nodes.descendants())
+    .enter().append("g")
+    .attr("class", (d:any) => "node" + (d.children ? " 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");
+
+    // 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")
+    .text((d:any) => d.data.name);
+  }
+
+
+}