diff --git a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html index fb417ab..b3f6dff 100644 --- a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html +++ b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html @@ -200,18 +200,19 @@
-
+

รวมเดือนนี้

฿732K
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;