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

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

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

@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');

    am4core.useTheme(am4themes_animated);
    am4core.addLicense("ch-custom-attribution");
    var colorset = new am4core.ColorSet();
    colorset.startIndex=2;
    colorset.step=3;
    let chart = am4core.create("chartdiv-columns", am4charts.PieChart3D);
    chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

    chart.data = this.data;

    chart.innerRadius = am4core.percent(40);
    // chart.depth = 120;

    chart.legend = new am4charts.Legend();

    let series = chart.series.push(new am4charts.PieSeries3D());
    series.dataFields.value = "count";
    // series.dataFields.depthValue = "count";
    series.dataFields.category = "goal";
    // series.slices.template.cornerRadius = 5;
    // series.colors.step = 3;
    series.colors = colorset;
  }

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

}
