+
- -
-
+
-
+
-
{{ part.label }}
-
{{ part.value }}%
+
{{ idx.label }}
+
{{ idx.percent }}%
+
{{ idx.value }} บาท
diff --git a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts
index 0bd0910..6fa28af 100644
--- a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts
+++ b/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})`;
}
+
}
diff --git a/accounting-ng-nuttakit/src/app/content/main-dashboard-content/main-dashboard-content.component.ts b/accounting-ng-nuttakit/src/app/content/main-dashboard-content/main-dashboard-content.component.ts
index b4445e6..3a049ed 100644
--- a/accounting-ng-nuttakit/src/app/content/main-dashboard-content/main-dashboard-content.component.ts
+++ b/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.dashboardStateService.setStateResult(this.myDropAct)
+ this.myActSumData = result.data
+ this.dashboardStateService.setStateSumResult(this.myActSumData);
}
},
error: (error: any) => {
diff --git a/accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts b/accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts
index cb0c16b..3d44aca 100644
--- a/accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts
+++ b/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;
diff --git a/accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts b/accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts
index 15bfdd5..3cb25b6 100644
--- a/accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts
+++ b/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
(null);
- private accountting = new BehaviorSubject(null);
+ private accounttingState = new BehaviorSubject(null);
+ private actsumState = new BehaviorSubject(null);
// ส่ง Observable ไปให้ components subscribe
getStateResult(): Observable {
@@ -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 {
- return this.accountting.asObservable();
+ return this.accounttingState.asObservable();
}
+
+
+
+ getStateSumResult(): Observable {
+ return this.actsumState.asObservable();
+ }
// ดึงค่า current state (ไม่ใช่ observable)
// getCurrentState(): IDropAct | null {
// return this.dashboardState.value;