Untitled

import { Component, Input, OnInit } from '@angular/core';
import Chart, { ChartData, ChartTypeRegistry } from 'chart.js/auto';
import { ChartFactoryService } from '../../../../../common/utils/chart-factory.service';
import { ConfigChartType } from './models/config-chart-type.model';
import { isNullOrUndef } from 'chart.js/dist/helpers/helpers.core';
import 'chartjs-gauge'

@Component({
  selector: 'app-chartjs-chart',
  standalone: true,
  imports: [],
  templateUrl: './chartjs-chart.component.html',
  styleUrl: './chartjs-chart.component.scss',
  providers: [ChartFactoryService]
})
export class ChartjsChartComponent implements OnInit{
  public static defaultChartType: ConfigChartType = ConfigChartType.Bar;

  chart: any;
  @Input() chartType: string = ChartjsChartComponent.defaultChartType.toString();

  constructor(private _chartFactoryService: ChartFactoryService){}

  ngOnInit(){
    Chart.defaults.font.size = 14;
    Chart.defaults.color = "#9b9ca7";
    this.chart = this.createChart();
  }

  ngOnChanges(){
    if (this.chart){
      this.chart.destroy();
      this.chart = this.createChart();
    }
  }	

  createChart(){
    let [xAxisData, yAxisData] = this._chartFactoryService.generateChartData();
    return new Chart(
      "chart-element",{
        type: 'gauge' as keyof ChartTypeRegistry,
        data: {
          datasets: [{
            value: 0.5,
            minValue: 0,
            data: [1, 2, 3, 4],
            backgroundColor: ['green', 'yellow', 'orange', 'red'],
          }]
        },
        options: {
          needle: {
            radiusPercentage: 2,
            widthPercentage: 3.2,
            lengthPercentage: 80,
            color: 'rgba(0, 0, 0, 1)'
          },
          valueLabel: {
            display: true,
            formatter: (value: number) => {
              return '$' + Math.round(value);
            },
            color: 'rgba(255, 255, 255, 1)',
            backgroundColor: 'rgba(0, 0, 0, 1)',
            borderRadius: 5,
            padding: {
              top: 10,
              bottom: 10
            }
          }
        }
      });
  }
}