Untitled

import { CommonModule } from "@angular/common";
import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { ActivatedRoute } from "@angular/router";
import { ALL_YEAR_VALUE, CampaignFacade, CONST_ID, IGetCampaignStatsOverview } from "@campaign/data-access";
import { BaseComponent } from "@components/base";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import * as ApexCharts from "apexcharts";
import { NzSelectModule } from "ng-zorro-antd/select";
import { tap } from "rxjs";
import { NoAnswerComponent } from "../no-answer/no-answer.component";

@Component({
  standalone: true,
  selector: "app-report-overview-chart",
  templateUrl: "./report-overview-chart.component.html",
  styleUrls: ["./report-overview-chart.component.scss"],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [CommonModule, TranslateModule, NzSelectModule, FormsModule, NoAnswerComponent],
})

export class ReportOverviewChartComponent extends BaseComponent implements OnInit {

  campaignFacade = inject(CampaignFacade);
  route = inject(ActivatedRoute);
  private translate = inject(TranslateService);
  chart: any
  currentYear = new Date().getFullYear();
  overviewData: IGetCampaignStatsOverview = {
    campaignId: "",
    monthlyStats: [],
    availableYears: [this.currentYear],
  };
  isLoadedData: boolean = false;

  listOfOption: Array<{ value: number; label: number }> = [];
  selectedYear = this.currentYear;


  ngOnInit(): void {
    this.getData(this.currentYear);
  }

  private getIdParam(): string {
    return this?.route?.snapshot?.paramMap.get(CONST_ID) || "";
  }

  getData(year: number): void {
    let campaignId = this.getIdParam();

    this.campaignFacade
      .getCampaignStatsOverview(campaignId, year)
      .pipe(this.autoUnsubscribe(), tap((res: any) => {
        if (res?.data) {
          this.isLoadedData = true;
          this.overviewData = res.data;
          this.listOfOption = this.overviewData.availableYears.map(year => ({
            value: year,
            label: year
          }));
          this.listOfOption.unshift({
            value: ALL_YEAR_VALUE,
            label: this.translate.instant("ALL")
          });

          const seriesData = this.overviewData!.monthlyStats.map(stat => stat.numberOfResponses) || [];
          const xaxisCategories = this.overviewData!.monthlyStats.map(stat => stat.month) || [];

          if (this.chart) {
            // Update the existing chart with the new data
            this.chart.updateSeries([{
              name: this.translate.instant("OVERVIEW_CHART_TITLE"),
              data: seriesData
            }]);
            this.chart.updateOptions({
              xaxis: {
                categories: xaxisCategories
              }
            });
          } else {
            var options = {
              chart: {
                width: "100%",
                height: 400,
                type: 'bar',
                toolbar: {
                  show: false
                },
                dropShadow: {
                  enabled: true,
                  enabledOnSeries: false,
                  top: 0,
                  left: 0,
                  blur: 2,
                  color: '#3399DE',
                  opacity: 1
                }
              },
              states: {
                hover: {
                  filter: {
                    type: 'darken',
                    value: 0.9,
                  }
                }
              },
              series: [{
                name: this.translate.instant("OVERVIEW_CHART_TITLE"),
                data: seriesData
              }],
              xaxis: {
                categories: xaxisCategories
              },
              dataLabels: {
                enabled: false,
              },
              colors: ['#D7ECFB'],
              grid: {
                row: {
                  colors: ['transparent']
                },
                column: {
                  colors: ['transparent']
                },
                xaxis: {
                  lines: {
                    show: true
                  }
                }
              },
              legend: {
                show: true,
                showForSingleSeries: true,
                position: 'top',
                horizontalAlign: 'center',
                markers: {
                  width: 36,
                  height: 14,
                  strokeWidth: 3,
                  strokeColor: '#72BEF1',
                  fillColors: '#D7ECFB',
                },
                onItemClick: {
                  toggleDataSeries: false
                },
              }
            }
            console.log(options);
            this.chart = new ApexCharts(document.querySelector("#overviewChart"), options);
            this.chart.render();
          }
        }
      })).subscribe();
  }

  handleYearChange(selectedYear: number): void {
    this.selectedYear = selectedYear;
    this.getData(this.selectedYear);
  }

  override ngOnDestroy(): void {
    if (this.chart) {
      this.chart.destroy();
    }
  }
}