-ระ บบ pie chart และคำนวณ สี

accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { GeneralService } from '../../services/generalservice';
-import { IDropAct, IStateDrop, IStateResultResponse, IActData } from '../../interfaces/dashboard.interface'
+import { IDropAct, IStateDrop, IStateResultResponse, IActData, IActSumData } from '../../interfaces/dashboard.interface'
 import { DashboardStateService } from '../../services/state/dashboard-state.service';
 
 @Component({
@@ -20,6 +20,21 @@ export class MainDashboardComponent implements OnInit {
   myActData: IActData[] = [];
   // myDropAct: IStateDrop[] = [];
   myDropAct: IStateDrop = { income: [], expense: [] };
+  myActSumData: IActSumData = {
+    summary: {
+      totalIncome: '',
+      totalExpense: '',
+      netProfit: '',
+      profitRate: '',
+      adjustedProfitRate: '',
+      period: ''
+    },
+    pie: {
+      income: [],
+      expense: []
+    }
+  };
+  ActSumDataGradient: any
 
 
   readonly ownerName = 'Nuttakit';
@@ -59,14 +74,14 @@ export class MainDashboardComponent implements OnInit {
     }
   ];
 
-  readonly revenueTrend = [
-    { label: 'ม.ค.', value: 52 },
-    { label: 'ก.พ.', value: 61 },
-    { label: 'มี.ค.', value: 73 },
-    { label: 'เม.ย.', value: 68 },
-    { label: 'พ.ค.', value: 82 },
-    { label: 'มิ.ย.', value: 77 }
-  ];
+  // readonly revenueTrend = [
+  //   { label: 'ม.ค.', value: 52 },
+  //   { label: 'ก.พ.', value: 61 },
+  //   { label: 'มี.ค.', value: 73 },
+  //   { label: 'เม.ย.', value: 68 },
+  //   { label: 'พ.ค.', value: 82 },
+  //   { label: 'มิ.ย.', value: 77 }
+  // ];
 
   readonly quickRatios = [
     { label: 'กระแสเงินสด', value: '+฿312K', status: 'positive' },
@@ -183,7 +198,6 @@ export class MainDashboardComponent implements OnInit {
     { label: 'อื่นๆ', value: 8, color: '#e11d48' }
   ];
 
-  readonly expenseGradient = this.buildExpenseGradient();
 
   ngOnInit(): void {
     this.setupFormControl();
@@ -192,14 +206,20 @@ export class MainDashboardComponent implements OnInit {
         this.myDropAct = data;
       }
     });
-
+    // ผลลับท์ ของ รายการ
     this.dashboardStateService.getStateAccountResult().subscribe(data => {
       if (data) {
         this.myActData = data;
       }
     });
+    // ผลลัพการ คำนวณ ของ ปัญชี ต่างๆ
+    this.dashboardStateService.getStateSumResult().subscribe(data => {
+      if (data) {
+        this.myActSumData = data;
+        this.ActSumDataGradient = this.buildExpenseGradient()
+      }
+    });
   }
-
   setupFormControl(){
     this.arrearsForm = new FormGroup({
       // email: new FormControl('',[Validators.required, Validators.email, Validators.maxLength(100)]),
@@ -226,15 +246,20 @@ export class MainDashboardComponent implements OnInit {
   }
 
   private buildExpenseGradient(): string {
+    if (!this.myActSumData?.pie?.expense?.length) return '';
+
     let current = 0;
-    const segments = this.expenseBreakdown
+    const segments = this.myActSumData.pie.expense
       .map(part => {
         const start = current;
-        const end = current + part.value;
+        const percent = parseFloat(part.percent); // แปลงจาก string → number
+        const end = current + percent;
         current = end;
         return `${part.color} ${start}% ${end}%`;
       })
       .join(', ');
+
     return `conic-gradient(${segments})`;
   }
+
 }