ERROR type Error: ctx.list is undefined
Tags: angular
Published: 2022-06-20 09:59:00

Hi;
I have a problem that persists and I can not understand
I always get the following error :  ERROR type Error: ctx.list is undefined


chart-model.ts

export class ListCandidats {
    dataLabels: string[]
    labels: string[]
    dataSet1: number[]
    dataSet2: number[]

    constructor(
        dataLabels: string[] = ['A','AAA'],
        labels: string[] = Array.from({length:30}).map(x=>''),
        dataSet1: number[] = Array.from({length:30}).map(x=>0),
        dataSet2: number[] = Array.from({length:30}).map(x=>0)
    ) {
        this.dataLabels = dataLabels;
        this.labels = labels;
        this.dataSet1 = dataSet1;
        this.dataSet2 = dataSet2;
    }
}

charts.service.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { ListCandidats } from '../models/chart-model';


const API_URL = `${environment.apiUrl}`

@Injectable({
  providedIn: 'root'
})
export class ChartsService {

  constructor(
    private http : HttpClient
  ) { }


  private authLocalStorageToken = `${environment.appVersion}-${environment.USERDATA_KEY}`
  lsValue: string = localStorage.getItem(this.authLocalStorageToken) || ""
  authData = JSON.parse(this.lsValue)
  httpHeaders = new HttpHeaders({
      Authorization: `Bearer ${this.authData.accessToken}`,
  })  

  getListCandidats(): Observable<ListCandidats> {
    return this.http.get<ListCandidats>(`${API_URL}/admin/dashboard/listCandidats`, {headers: this.httpHeaders})
  }

}


chart.component.ts

import { Component, OnInit } from '@angular/core';
import { getCSSVariableValue } from 'src/app/_metronic/kt/_utils';
import { ChartsService } from '../services/charts.service';
import { ListCandidats } from '../models/chart-model';


@Component({
  selector: 'app-chart-inscription',
  templateUrl: './chart-inscription.component.html',
  styleUrls: ['./chart-inscription.component.scss']
})
export class ChartInscriptionComponent implements OnInit {

  list: ListCandidats

  chartOptions: any = {}

  constructor(
    public services: ChartsService
  ) {
    
  }

  ngOnInit() {
    
    this.services.getListCandidats().subscribe(data => 
      {
        this.list= data
        this.chartOptions = this.getChartOptions(350,  this.list)
      })
  }

getChartOptions(height: number, list: ListCandidats) {
		
  const labelColor = getCSSVariableValue('--bs-gray-500')
  const borderColor = getCSSVariableValue('--bs-gray-200')
  const baseColor = getCSSVariableValue('--bs-primary')
  const secondaryColor = getCSSVariableValue('--bs-gray-300')

    
  return {
    series: [
      {
        name: list.dataLabels[0],
        data: list.dataSet1
      },
      {
        name: list.dataLabels[1],
        data: list.dataSet2,
      },
    ],
    chart: {
      fontFamily: 'inherit',
      type: 'bar',
      height: height,
      toolbar: {
        show: false,
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '50%',
        borderRadius: 0,
      },
    },
    legend: {
      show: false,
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 2,
      colors: ['transparent'],
    },
    xaxis: {
      categories: list.labels,
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
      labels: {
        style: {
          colors: labelColor,
          fontSize: '12px',
        },
      },
    },
    yaxis: {
      labels: {
        style: {
          colors: labelColor,
          fontSize: '12px',
        },
      },
    },
    fill: {
      opacity: 1,
    },
    states: {
      normal: {
        filter: {
          type: 'none',
          value: 0,
        },
      },
      hover: {
        filter: {
          type: 'none',
          value: 0,
        },
      },
      active: {
        allowMultipleDataPointsSelection: false,
        filter: {
          type: 'none',
          value: 0,
        },
      },
    },
    tooltip: {
      style: {
        fontSize: '12px',
      },
      y: {
        formatter: function (val: number) {
          return '$' + val + ' thousands'
        },
      },
    },
    colors: [baseColor, secondaryColor],
    grid: {
      borderColor: borderColor,
      strokeDashArray: 4,
      yaxis: {
        lines: {
          show: true,
        },
      },
    },
  }

}

}