I have implemented an organization chart by PrimeNG as per my requirement. My data from the TreeNode type array is getting rendered in UI properly but the design is not.
Below is my code:
app.module.ts
import {OrganizationChartModule} from 'primeng/organizationchart';
imports: [ OrganizationChartModule ]
thankyou.component.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ApplicationService } from '../service-application/application.service';
import {TreeNode} from 'primeng/api';
@Component({
selector: 'app-thankyou',
templateUrl: './thankyou.component.html',
styleUrls: ['./thankyou.component.css'],
encapsulation: ViewEncapsulation.None
})
export class ThankyouComponent implements OnInit {
totObtainedMarks: number = 0;
totTotalMarks: number = 0;
marks: TreeNode[];
constructor(public appService: ApplicationService) {}
ngOnInit() {
let result = [];
for(let i of this.appService.result) {
let mark: any;
this.totObtainedMarks += i.obtainedMarks;
this.totTotalMarks += i.totalMarks;
mark = {
label: i.questionCategory + ': ' + i.obtainedMarks.toString() + '/' + this.totTotalMarks.toString()
};
result.push(mark);
}
this.marks = [{
label: 'Total: ' + this.totObtainedMarks.toString() + '/' + this.totTotalMarks.toString(),
children: result
}];
}
}
thankyou.component.html
<p-organizationChart [value]="marks"></p-organizationChart>
The view I am getting:
I followed the official documentation for creating this but still not able to understand what's the problem. Please help me out.
You can clearly see, that something is not right, and it looks quite the same as your problem.
