import {AfterViewInit, Component, Input} from '@angular/core';
import * as CanvasJS from './canvasjs.min';
import {v4 as uuidv4} from 'uuid';
import {ChartDataSeriesOptions} from 'canvasjs';

@Component({
  selector: 'app-graph',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.scss']
})
export class GraphComponent implements AfterViewInit {

  @Input()
  monthlyDatas: number[][] = [];
  @Input()
  labels: string[] = [];
  @Input()
  colors: string[] = [];
  @Input()
  formatSting: string;
  @Input()
  graphType = 'line';

  readonly randomId = uuidv4();

  constructor() {
  }

  ngAfterViewInit() {
    const data: ChartDataSeriesOptions[] = [];
    for (const monthlyData of this.monthlyDatas) {
      data.push({
        type: this.graphType,
        color: 'black',
        showInLegend: this.labels.length > 0,
        yValueFormatString: this.formatSting,
        dataPoints: [
          {y: monthlyData[0], x: 1, label: 'January'},
          {y: monthlyData[1], x: 2, label: 'February'},
          {y: monthlyData[2], x: 3, label: 'March'},
          {y: monthlyData[3], x: 4, label: 'April'},
          {y: monthlyData[4], x: 5, label: 'May'},
          {y: monthlyData[5], x: 6, label: 'June'},
          {y: monthlyData[6], x: 7, label: 'July'},
          {y: monthlyData[7], x: 8, label: 'August'},
          {y: monthlyData[8], x: 9, label: 'September'},
          {y: monthlyData[9], x: 10, label: 'October'},
          {y: monthlyData[10], x: 11, label: 'November'},
          {y: monthlyData[11], x: 12, label: 'December'}
        ]
      });
    }

    for (let i = 0; i < this.labels.length; i++) {
      data[i].name = this.labels[i];
    }


    for (let i = 0; i < this.colors.length; i++) {
      data[i].color = this.colors[i];
    }


    const chart = new CanvasJS.Chart(this.randomId, {
      animationEnabled: true,
      exportEnabled: false,
      backgroundColor: 'transparent',
      legend: {
        verticalAlign: 'bottom',
        horizontalAlign: 'left',
        dockInsidePlotArea: true
      },
      data
    });

    chart.render();
  }

}