add plan chart

package-lock.json

@@ -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",

package.json

@@ -28,6 +28,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",

src/app/projects/components/plan-weight-chart/plan-weight-chart.component.html

+<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

+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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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
   ]
 })