import {Component, OnInit} from '@angular/core';
import {ICSGroupedColumnChart} from '@varmasagi/highcharts-defaults';

import { FilterInfo, FilterChangeNotifyService,  FiltersDataService } from '@varmasagi/filters';

declare var require: any;
const Highcharts = require('highcharts');

export class AppChart extends ICSGroupedColumnChart {
  constructor() {
    super();
  }

}


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public options: AppChart = new AppChart();
  public filterInfo: FilterInfo;
  constructor(
    private change: FilterChangeNotifyService
  ) {
    this.change.filterChanged$.subscribe(x => this.onFilterChange(x));
  }
  ngOnInit() {
    // this.hcOptions();
  }
  onFilterChange(x) {
    this.filterInfo = JSON.parse(JSON.stringify(x));
    console.log(x.name);
  }

  private hcOptions() {
    const data = {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
      John: [5, 3, 4, 7, 2]
    };
    this.options.loadDataBarOrColumnOrLine(data, 'categories', 'John');

    const options = this.options.toPlainObject();
    console.log(options);
    Highcharts.chart('container', options);

  }
}