import { Directive, AfterViewInit, ElementRef, Input, OnChanges, HostListener, } from '@angular/core';
import * as Echarts from 'echarts';


@Directive({
  selector: '[appEcharts]'
})
export class EchartsDirective implements AfterViewInit, OnChanges {

  @Input()
  chartOptions: Echarts.EChartOption;

  private myChart: Echarts.ECharts;

  constructor(private el: ElementRef) { }

  ngAfterViewInit() {
    this.myChart = Echarts.init(this.el.nativeElement);

    if (!this.chartOptions) { return; }

    try {
      this.myChart.setOption(this.chartOptions);
    } catch (e) {
      console.error('==================================');
      console.error('Setting options for ECharts failed');
      console.error('options:', this.chartOptions);
      console.error('error:', e);
      console.error('==================================');
    }
  }

  ngOnChanges(changes) {
    if (this.chartOptions && this.myChart) {
      this.myChart.setOption(this.chartOptions);
    }
  }

  @HostListener('window:resize')
  onResize() {
    if (this.myChart) {
      this.myChart.resize();
    }
  }
}