first

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

@@ -0,0 +1,95 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ChartConfiguration, ChartOptions } from 'chart.js';
+import { BaseChartDirective } from 'ng2-charts';
+import { GeneralService } from '../../services/generalservice';
+
+@Component({
+  selector: 'app-main-dashboard-content',
+  standalone: false,
+  templateUrl: './main-dashboard-content.component.html',
+  styleUrls: ['./main-dashboard-content.component.css']
+})
+export class MainDashboardContentComponent implements OnInit {
+  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+
+  public lineChartData: ChartConfiguration<'line'>['data'] = {
+    labels: [],
+    datasets: [
+      {
+        data: [],
+        label: 'Revenue',
+        fill: true,
+        tension: 0.5,
+        borderColor: 'rgba(75,192,192,1)',
+        backgroundColor: 'rgba(75,192,192,0.2)'
+      }
+    ]
+  };
+
+  public lineChartOptions: ChartOptions<'line'> = {
+    responsive: true,
+    scales: {
+      y: {
+        beginAtZero: true
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+      },
+      title: {
+        display: true,
+        text: 'Revenue Summary - Last 6 Months'
+      }
+    }
+  };
+
+  constructor(private generalService: GeneralService) {}
+
+  ngOnInit(): void {
+    this.fetchChartData();
+  }
+
+  fetchChartData(): void {
+    // NOTE: Using a placeholder endpoint as the actual one was not provided.
+    const uri = '/api/dashboard/summary-last-6-months';
+
+    this.generalService.getRequest(uri).subscribe({
+      next: (result: any) => {
+        if (result.code === '200' && result.data) {
+          this.processChartData(result.data);
+        } else {
+          console.warn('Could not fetch chart data:', result.message_th);
+          // Optionally, display placeholder data or an error message
+          this.setupPlaceholderData();
+        }
+      },
+      error: (error: any) => {
+        console.error('Error fetching chart data:', error);
+        // Display placeholder data on error to show the graph structure
+        this.setupPlaceholderData();
+      }
+    });
+  }
+
+  processChartData(data: any[]): void {
+    const labels = data.map(item => item.month);
+    const revenues = data.map(item => item.revenue);
+
+    this.lineChartData.labels = labels;
+    this.lineChartData.datasets[0].data = revenues;
+
+    this.chart?.update();
+  }
+
+  setupPlaceholderData(): void {
+    // This function is called if the API fails, to show a sample graph.
+    const labels = ['January', 'February', 'March', 'April', 'May', 'June'];
+    const revenues = [1200, 1900, 3000, 5000, 2300, 3200]; // Sample data
+
+    this.lineChartData.labels = labels;
+    this.lineChartData.datasets[0].data = revenues;
+
+    this.chart?.update();
+  }
+}