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

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();
  }
}