import { Component, Input, OnInit } from '@angular/core';

import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'byte-stacked-column-chart',
  templateUrl: './stacked-column-chart.component.html',
  styleUrls: ['./stacked-column-chart.component.scss']
})
export class StackedColumnChartComponent implements OnInit {

  chart: Chart;

  @Input()
  data: any;

  constructor() { }

  ngOnInit() {
    if (!this.data) {
      return;
    }
    const categories = this.generateData(this.data, 'goal');
    const dataSeries = this.generateData(this.data, 'count');
    this.chart = new Chart({
      chart: {
        type: 'column'
      },
      exporting: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      title: {
        text: ''
      },
      xAxis: {
        categories
      },
      credits: {
        enabled: false
      },
      yAxis: {
        labels: {
          enabled: false
        },
        title: {
          text: ''
        }
      },
      tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{point.stackTotal}'
      },
      plotOptions: {
        column: {
          stacking: 'normal',
          dataLabels: {
            enabled: false
          }
        }
      },
      series: [{
        dataLabels: {
          inside: false,
          enabled: true,
          style: {
            color: 'white'
          }
        },
        name: 'John',
        data: dataSeries,
        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
        stops: [
            [0, '#1ab394'], // start
            [1, '#FFFFFF'] // end
        ]
      }] as Array<any>
    });
  }

  private generateData(data: Array<any>, field: string) {
    const dataGenerated = [];
    data.forEach(x => {
      dataGenerated.push(x[field]);
    });
    return dataGenerated;
  }

}
