import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { Chart, ChartType, ChartData, ChartOptions } from 'chart.js';

@Directive({
  selector: '[appChart]',
  standalone: true
})
export class ChartDirective implements OnInit {
  @Input() type: ChartType = 'bar';
  @Input() data: ChartData;
  @Input() options: ChartOptions;
  
  private chart: Chart;
  
  constructor(private el: ElementRef) {}
  
  ngOnInit(): void {
    this.createChart();
  }
  
  private createChart(): void {
    this.chart = new Chart(this.el.nativeElement, {
      type: this.type,
      data: this.data,
      options: this.options
    });
  }
  
  ngOnDestroy(): void {
    if (this.chart) {
      this.chart.destroy();
    }
  }
}