import { Component, OnInit, ElementRef, Input } from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'app-chart',
  template: ``,
  styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements OnInit {
  _counter = 0;
  _title = '';
  @Input() set title(value) {
    this._title = value;
    if (this.chart) {
      this.chart.setOption({ title: { text: this._title } });
    }
  }
  get title() {
    return this._title;
  }

  _animate = true;
  @Input() set animate(value: boolean) {
    this._animate = value;
    if (this.chart) {
      this.chart.setOption({ animation: this._animate });
    }
  }

  @Input() set data(value: number[]) {
    if (!this.chart) { return; }

    const newData = Array.from(value).map(v => [this._counter++, v]);
    const data = this._data.concat(newData);
    const len = data.length;
    const slice = len > 100 ? len - 100 : 0;
    this._data = data.slice(slice);

    this.chart.setOption({ animation: this._animate, series: [{ data: this._data }] });
  }

  private chart;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.chart = echarts.init(this.el.nativeElement);
    window['chart'] = this.chart;
    this.option.title.text = this.title;
    this.chart.setOption(this.option);
  }

  // tslint:disable-next-line:member-ordering
  _data = [];

  option: echarts.EChartOption = {
    animation: true,
    // animation: false,
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
    },
    yAxis: {
      min: 'dataMin',
      max: 'dataMax',
    },
    series: [{
      smooth: true,
      showSymbol: false,
      type: 'line',
      data: this._data,
    }]
  };


}