https://github.com/piyalidas10/angular-6-organization-chart

Dynamic Organization Chart using Angular 6
https://github.com/piyalidas10/angular-6-organization-chart

angular angular6 chart organization-chart

Last synced: about 1 month ago
JSON representation

Dynamic Organization Chart using Angular 6

• Host: GitHub
• URL: https://github.com/piyalidas10/angular-6-organization-chart
• Owner: piyalidas10
• Created: 2019-12-07T16:30:35.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-01T14:10:56.000Z (over 3 years ago)
• Last Synced: 2025-01-21T18:23:06.603Z (over 1 year ago)
• Topics: angular, angular6, chart, organization-chart
• Language: TypeScript
• Size: 1.25 MB
• Stars: 0
• Watchers: 2
• Forks: 3
• Open Issues: 30
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Live URL : https://piyalidas10.github.io/organizationalchart/

Run Application

ng serve

There have two JSON files which are kept in assets folder ( oranganization_structure.json, employee.json ). I have implemented two components : 1. addchart - to enter data in chart 2. viewchart - to show the organization chart using directive i.e orgachart.directive.

Using this orgachart.directive, organization chart is implemented dynamically in DOM.

orgachart.directive

      import { Directive, OnInit, DoCheck, AfterViewInit, Input, Renderer2, ElementRef, KeyValueDiffers } from '@angular/core';

      @Directive({

        selector: '[appOrgachart]'

      })

      export class OrgachartDirective implements OnInit, AfterViewInit, DoCheck {

        @Input() empArr;

        @Input() orgaArr;

        @Input() isEmpArrChange;

        oldval = [];

        constructor(private renderer: Renderer2, private elementRef: ElementRef, private _differ: KeyValueDiffers) { }

        ngOnInit() {

          console.log('renderer => ', this.renderer);

          console.log('elementRef => ', this.elementRef);

          console.log('empArr => ', this.empArr);

          this.createOrgaChart();

          this.oldval = this.empArr;

        }

        ngDoCheck() {

          if (this.oldval !== this.empArr) {

            console.log('empArr updated => ', this.empArr);

            this.createOrgaChart();

          }

          console.log('this._differ => ', this._differ);

        }

        createOrgaChart() {

          console.log('this.empArr => ', this.empArr);

          const supervisorList = this.empArr.map(ele => ele.supervisorid);

          console.log('supervisorList => ', supervisorList);

          const uniqueSuoervisorList = supervisorList.filter((ele, index) => supervisorList.indexOf(ele) === index);

          const ulcount = uniqueSuoervisorList.length;

          console.log('ulcount => ', ulcount);

          const isUlEle = this.elementRef.nativeElement.querySelectorAll('ul');

          console.log('isUlEle => ', isUlEle);

          if (isUlEle.length > 0) {

            Array.prototype.forEach.call(isUlEle, (node) =>  {

              node.parentNode.removeChild( node );

            });

          }

          for (let i = 0; i < ulcount; i++) {

            const liLists = this.empArr.filter(ele => ele.supervisorid === i);

            this.createUlElem(i, liLists);

          }

        }

        createUlElem(parentid, liLists) {

          console.log('liLists ------------------------------------- ', liLists);

          const ulelem = this.renderer.createElement('ul');

          if (parentid === 0) {

            this.renderer.appendChild(this.elementRef.nativeElement, ulelem);

            const lielem = this.renderer.createElement('li');

            this.renderer.appendChild(ulelem, lielem);

            this.insertLiText(parentid, liLists, lielem);

          } else {

            // const parentul = this.elementRef.nativeElement.querySelectorAll('ul:nth-child(' + parentid + ')');

            for (let z = 0; z < liLists.length; z++) {

              console.log('supdervisor => ', liLists[z]['supervisorid']);

              const supvisorDiv = this.elementRef.nativeElement.querySelector('#emp' + liLists[z]['supervisorid']);

              console.log('supvisorDiv => ', supvisorDiv);

              const supvisorLi = supvisorDiv.parentElement;

              console.log('PIYALI => ', '#emp' + liLists[z]['supervisorid']);

              console.log('supvisorLi => ', supvisorLi);

              console.log('ulelem => ', ulelem);

              this.renderer.appendChild(supvisorLi, ulelem);

              const lielem = this.renderer.createElement('li');

              this.renderer.appendChild(ulelem, lielem);

              this.insertLiText(z, liLists, lielem);

            }

          }

        }

        insertLiText(item, liLists, lielem) {

          console.log('lielem => ', lielem);

          const div = this.renderer.createElement('div');

          this.renderer.setAttribute(div, 'class', 'user');

          this.renderer.setAttribute(div, 'id', 'emp' + liLists[item].empid);

          this.renderer.appendChild(lielem, div);

          const imgpath = this.renderer.createElement('img');

          this.renderer.setAttribute(imgpath, 'src', 'https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg');

          this.renderer.setAttribute(imgpath, 'class', 'img-responsive');

          this.renderer.appendChild(div, imgpath);

          const divname = this.renderer.createElement('div');

          const divname_text = this.renderer.createText(liLists[item].empname);

          this.renderer.setAttribute(divname, 'class', 'name');

          this.renderer.appendChild(divname, divname_text);

          this.renderer.appendChild(div, divname);

          const divroll = this.renderer.createElement('div');

          const divroll_text = this.renderer.createText(liLists[item].empdesgname);

          this.renderer.setAttribute(divroll, 'class', 'roll');

          this.renderer.appendChild(divroll, divroll_text);

          this.renderer.appendChild(div, divroll);

        }

        ngAfterViewInit() {}

      }