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

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

@@ -200,18 +200,19 @@
         <button class="btn btn--ghost btn--compact">จัดการหมวดหมู่</button>
       </div>
       <div class="pie-panel__content">
-        <div class="pie-chart" [style.background]="expenseGradient">
+        <div class="pie-chart" [style.background]="ActSumDataGradient">
           <div class="pie-chart__center">
             <p>รวมเดือนนี้</p>
             <strong>฿732K</strong>
           </div>
         </div>
         <ul class="pie-legend">
-          <li class="pie-legend__item" *ngFor="let part of expenseBreakdown">
+          <li class="pie-legend__item" *ngFor="let idx of myActSumData.pie.expense">
-            <span class="swatch" [style.background]="part.color"></span>
+            <span class="swatch" [style.background]="idx.color"></span>
             <div>
-              <p class="pie-legend__label">{{ part.label }}</p>
+              <p class="pie-legend__label">{{ idx.label }}</p>
-              <p class="pie-legend__value">{{ part.value }}%</p>
+              <p class="pie-legend__value">{{ idx.percent }}%</p>
+              <p class="pie-legend__value">{{ idx.value }} บาท</p>
             </div>
           </li>
         </ul>

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 = [
+  // readonly revenueTrend = [
-    { label: 'ม.ค.', value: 52 },
+  //   { label: 'ม.ค.', value: 52 },
-    { label: 'ก.พ.', value: 61 },
+  //   { label: 'ก.พ.', value: 61 },
-    { label: 'มี.ค.', value: 73 },
+  //   { label: 'มี.ค.', value: 73 },
-    { label: 'เม.ย.', value: 68 },
+  //   { label: 'เม.ย.', value: 68 },
-    { label: 'พ.ค.', value: 82 },
+  //   { label: 'พ.ค.', value: 82 },
-    { label: 'มิ.ย.', value: 77 }
+  //   { 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})`;
   }
+
 }

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

@@ -3,7 +3,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ChartConfiguration, ChartOptions } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 import { GeneralService } from '../../services/generalservice';
-import { IDropAct, IStateDrop, IActData } from '../../interfaces/dashboard.interface';
+import { IDropAct, IStateDrop, IActData, IActSumData } from '../../interfaces/dashboard.interface';
 
 
 @Component({
@@ -16,6 +16,20 @@ export class MainDashboardContentComponent implements OnInit {
   @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
   myDropAct!: IStateDrop;
   myActData: IActData[] = [];
+  myActSumData: IActSumData = {
+    summary: {
+      totalIncome: '',
+      totalExpense: '',
+      netProfit: '',
+      profitRate: '',
+      adjustedProfitRate: '',
+      period: ''
+    },
+    pie: {
+      income: [],
+      expense: []
+    }
+  };
 
   constructor(
     private generalService: GeneralService,
@@ -84,8 +98,8 @@ export class MainDashboardContentComponent implements OnInit {
       next: (result: any) => {
         if (result.code === '200') {
           this.generalService.trowApi(result);
-          this.myDropAct = result.data
+          this.myActSumData = result.data
-          this.dashboardStateService.setStateResult(this.myDropAct)
+          this.dashboardStateService.setStateSumResult(this.myActSumData);
         }
       },
       error: (error: any) => {

accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts

@@ -18,11 +18,41 @@ export interface IActData {
   actcmt?: string,
   actacpdtm?: string
 }
+export interface IStateResultResponse {
+  data: IStateDrop;
+}
 
 export interface IStateResultResponse {
   data: IStateDrop;
 }
 
+
+export interface IActSumData {
+  summary: IActSummary;
+  pie: IActPie;
+}
+
+export interface IActSummary {
+  totalIncome: string;
+  totalExpense: string;
+  netProfit: string;
+  profitRate: string;
+  adjustedProfitRate: string;
+  period: string;
+}
+
+export interface IActPie {
+  expense: IActCategory[];
+  income: IActCategory[];
+}
+
+export interface IActCategory {
+  label: string;
+  value: number;
+  percent: string;
+  color: string;
+}
+
 // ข้อมูลสินค้าหลัก
 // export interface IProduct {
 //   id: string;

accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { IDropAct, IStateDrop, IActData } from '../../interfaces/dashboard.interface';
+import { IDropAct, IStateDrop, IActData, IActSumData } from '../../interfaces/dashboard.interface';
 
 @Injectable({
   providedIn: 'root'
@@ -8,7 +8,8 @@ import { IDropAct, IStateDrop, IActData } from '../../interfaces/dashboard.inter
 export class DashboardStateService {
   // ประกาศ BehaviorSubject ด้วย Interface
   private dashboardState = new BehaviorSubject<IStateDrop | null>(null);
-  private accountting = new BehaviorSubject<IActData[] | null>(null);
+  private accounttingState = new BehaviorSubject<IActData[] | null>(null);
+  private actsumState = new BehaviorSubject<IActSumData | null>(null);
 
   // ส่ง Observable ไปให้ components subscribe
   getStateResult(): Observable<IStateDrop | null> {
@@ -22,7 +23,12 @@ export class DashboardStateService {
 
 
   setStateAccountResult(dashboard: IActData[]): void {
-    this.accountting.next(dashboard);
+    this.accounttingState.next(dashboard);
+  }
+
+
+  setStateSumResult(sumResult: IActSumData): void {
+    this.actsumState.next(sumResult);
   }
 
   // เคลียร์ state
@@ -31,9 +37,15 @@ export class DashboardStateService {
   }
 
   getStateAccountResult(): Observable<IActData[] | null> {
-    return this.accountting.asObservable();
+    return this.accounttingState.asObservable();
   }
 
+
+
+
+  getStateSumResult(): Observable<IActSumData | null> {
+    return this.actsumState.asObservable();
+  }
   // ดึงค่า current state (ไม่ใช่ observable)
   // getCurrentState(): IDropAct | null {
   //   return this.dashboardState.value;