Skip to content

PSManagementUI
PSManagementUI
Commit 683d8ccf authored by hasan khaddour's avatar hasan khaddour
Browse files
Options

add plan chart

parent 0cb692ee
Hide whitespace changes
Inline Side-by-side
Showing with 186 additions and 10 deletions
package-lock.json
View file @ 683d8ccf
......@@ -25,6 +25,7 @@
"@popperjs/core": "^2.11.8",
"angular-jwt": "^0.1.11",
"bootstrap": "^5.3.3",
"chart.js": "^4.4.4",
"dhtmlx-gantt": "^8.0.10",
"dom-to-image": "^2.6.0",
"feather-icons": "^4.29.2",
......@@ -3341,6 +3342,11 @@
"tslib": "2"
}
},
"node_modules/@kurkle/color": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
},
"node_modules/@leichtgewicht/ip-codec": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
......@@ -5598,6 +5604,17 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
"node_modules/chart.js": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
"integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
"dependencies": {
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": ">=8"
}
},
"node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
......
src/app/projects/components/plan-weight-chart/plan-weight-chart.component.html 0 → 100644
View file @ 683d8ccf
<div class="row align-items-center mb-4">
<div class=" mb-4 text-center">
<strong>مخططات توضيحية</strong>
</div>
</div>
<div class="card p-4 col-8 offset-2" >
<div class=" card-header mb-4 text-center">
<strong> توزع نسب أوزان المراحل</strong>
</div>
<p-chart type="pie" [data]="pieChartData" [options]="pieChartOptions"
/>
</div>
<div class="card p-4 col-8 offset-2" >
<div class=" card-header mb-4 text-center">
<strong> نسب إنجاز المراحل</strong>
</div>
<p-chart type="bar" [data]="barChartData" [options]="barChartOptions"
/>
</div>
\ No newline at end of file
src/app/projects/components/plan-weight-chart/plan-weight-chart.component.ts 0 → 100644
View file @ 683d8ccf
import { Component, Input, OnInit } from '@angular/core';
import { Step } from '../../models/responses/Step';
import { ChartOptions, ChartType } from 'chart.js';
@Component({
selector: 'plan-weight-chart',
templateUrl: './plan-weight-chart.component.html',
styleUrl: './plan-weight-chart.component.css'
})
export class PlanWeightChartComponent implements OnInit{
@Input() steps : Step[]
pieChartData: any;
barChartData: any;
pieChartOptions: ChartOptions;
barChartOptions: ChartOptions;
ngOnInit(): void {
this.preparePieChartData();
}
preparePieChartData(): void {
// Prepare data for the pie chart
this.barChartData = {
labels: this.steps.map(step => step.stepInfo.stepName),
datasets: [
{
label: 'نسب إنجاز المراحل',
data: this.steps.map(step => step.currentCompletionRatio),
backgroundColor:this.steps.map(e =>this.getRandomColor()),
hoverBackgroundColor: this.steps.map(e=> this.getRandomColor())
}
]
};
this.pieChartData = {
labels: this.steps.map(step => step.stepInfo.stepName),
datasets: [
{
label:'أوزان المراحل',
data: this.steps.map(step => step.weight),
backgroundColor:this.steps.map(e =>this.getRandomColor()),
hoverBackgroundColor: this.steps.map(e=> this.getRandomColor())
}
]
};
// Set up chart options
this.pieChartOptions = {
responsive: true,
plugins: {
legend: {
position: 'top'
},
tooltip: {
callbacks: {
label: (tooltipItem) => `ثقل ${tooltipItem.label}: ${tooltipItem.raw}%`
}
}
}
};
this.barChartOptions = {
responsive: true,
plugins: {
legend: {
position: 'top'
},
tooltip: {
callbacks: {
label: (tooltipItem ) => `نسبة إنجاز ${tooltipItem.label}: ${tooltipItem.raw}%`
}
}
}
};
}
getRandomColor(): string {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
}
src/app/projects/components/project-controll/plan-controll/plan-controll.component.html
View file @ 683d8ccf
......@@ -6,7 +6,7 @@
<div class="row">
<div class="col-md-6 col-lg-4" [routerLink]="['/projects/',project.id,'spending']">
<div class="col-md-6 col-lg-4" *ngIf="canSee()" [routerLink]="['/projects/',project.id,'spending']">
<div class="card shadow mb-4">
<div class="card-body file-list">
<div class="d-flex align-items-center">
......@@ -23,7 +23,7 @@
</div> <!-- .col -->
<div class="col-md-6 col-lg-4" [routerLink]="['/projects/',project.id,'participants']">
<div class="col-md-6 col-lg-4" *ngIf="canSee()" [routerLink]="['/projects/',project.id,'participants']">
<div class="card shadow mb-4">
<div class="card-body file-list">
<div class="d-flex align-items-center">
......@@ -41,7 +41,7 @@
</div> <!-- .col -->
<div class="col-md-6 col-lg-4" [routerLink]="['/projects/',project.id,'steps']">
<div class="col-md-6 col-lg-4" *ngIf="canSee()" [routerLink]="['/projects/',project.id,'steps']">
<div class="card shadow mb-4">
<div class="card-body file-list">
<div class="d-flex align-items-center">
......@@ -57,7 +57,7 @@
</div> <!-- .row -->
<div class="col-md-6 col-lg-4" *ngIf="canSee()" (click)="onMoveToProgress()">
<div class="col-md-6 col-lg-4" *ngIf="canEdit()" (click)="onMoveToProgress()">
<div class="card shadow mb-4">
<div class="card-body file-list">
<div class="d-flex align-items-center">
......
src/app/projects/components/project-controll/plan-controll/plan-controll.component.ts
View file @ 683d8ccf
......@@ -21,9 +21,15 @@ export class PlanControllComponent {
this.toProgress.emit();
}
canSee(): boolean {
canEdit(): boolean {
return this.userService.hasRole(ROLES.SCIENTIFIC_DEPUTY)
}
canSee(): boolean {
return this.project.projectManagerId== this.userService.getEmployeeId()
||
this.project.teamLeaderId== this.userService.getEmployeeId();
}
}
src/app/projects/components/project-controll/track-controll/track-controll.component.html
View file @ 683d8ccf
......@@ -3,7 +3,7 @@
<strong>متابعة المشروع</strong>
</div>
<div class="row">
<div class="col-md-6 col-lg-4" [routerLink]="['/tracks/project/',project.id]">
<div class="col-md-6 col-lg-4" *ngIf="canSee()" [routerLink]="['/tracks/project/',project.id]">
<div class="card shadow mb-4">
<div class="card-body file-list">
<div class="d-flex align-items-center">
......@@ -18,7 +18,7 @@
</div> <!-- .card-body -->
</div> <!-- .card -->
</div>
<div class="col-md-6 col-lg-4" *ngIf="project.currentState.toLowerCase()=='inprogress'" (click)="onComplete()" >
<div class="col-md-6 col-lg-4" *ngIf="project.currentState.toLowerCase()=='inprogress' && canSee()" (click)="onComplete()" >
<div class="card shadow mb-4">
<div class="card-body file-list">
<div class="d-flex align-items-center">
......@@ -32,7 +32,7 @@
</div> <!-- .card-body -->
</div> <!-- .card -->
</div>
<div class="col-md-6 col-lg-4" *ngIf="canSee()" (click)="onReplan()">
<div class="col-md-6 col-lg-4" *ngIf="canEdit()" (click)="onReplan()">
<div class="card shadow mb-4">
<div class="card-body file-list">
<div class="d-flex align-items-center">
......
src/app/projects/components/project-controll/track-controll/track-controll.component.ts
View file @ 683d8ccf
......@@ -29,9 +29,17 @@ export class TrackControllComponent {
}
canSee(): boolean {
canEdit(): boolean {
return this.userService.hasRole(ROLES.SCIENTIFIC_DEPUTY)
}
canSee(): boolean {
return this.project.projectManagerId== this.userService.getEmployeeId()
||
this.project.teamLeaderId== this.userService.getEmployeeId();
}
}
src/app/projects/pages/project-details/project-details.component.html
View file @ 683d8ccf
......@@ -107,6 +107,13 @@
</report-controll>
<hr>
<plan-weight-chart
[steps]="project.steps"
>
</plan-weight-chart>
<hr>
<div class="row ">
<div *ngFor="let i of [1,2,3,4,5,6]" class="col-2 text-center">
<img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
......
src/app/projects/projects.module.ts
View file @ 683d8ccf
......@@ -57,8 +57,10 @@ import { CardModule } from 'primeng/card';
import { ButtonModule } from 'primeng/button';
import { BadgeModule } from 'primeng/badge';
import { ChartModule } from 'primeng/chart';
import { ProgressBarModule } from 'primeng/progressbar';
import { PlanWeightChartComponent } from './components/plan-weight-chart/plan-weight-chart.component';
@NgModule({
declarations: [
ProjectItemComponent,
......@@ -98,7 +100,8 @@ import { ProgressBarModule } from 'primeng/progressbar';
FilterModalComponent,
CancelProjectComponent,
EditFinancialModalComponent,
RemoveFinancialModalComponent
RemoveFinancialModalComponent,
PlanWeightChartComponent
],
providers: [
ProjectService,
......@@ -128,6 +131,7 @@ import { ProgressBarModule } from 'primeng/progressbar';
SkeletonModule,
FileUploadModule,
BadgeModule,
ChartModule,
NgbTypeaheadModule
]
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab