import { Component, Input, OnInit } from '@angular/core';
import { StackedAreaChartService } from './stacked-area-chart.service';

declare var uv: any;
@Component({
    selector: 'stacked-area-chart',
    providers: [StackedAreaChartService],
    styleUrls: ['./stacked-area-chart.css'],
    template: `<div id="stacked-area-div"></div>`,
})

export class StackedAreaChartComponent implements OnInit {

    private uv: any;
    private metaData: {};

    @Input() compress: boolean;

    constructor(private stackedAreaChartService: StackedAreaChartService) {
        let windowObj: any = window;
        this.uv = windowObj.uv;
    }

    ngOnInit(): void {
        let thizz = this;

        this.metaData = {
            meta: {
                position: '#stacked-area-div'
            },
            dimension: {
                height: 200,
                width: 400
            }
        };

        if (this.compress) {
            this.metaData = {
                margin: {
                    left: 10,
                    right: 10,
                    bottom: 10
                },
                dimension: {
                    height: 200,
                    width: 200
                },
                meta: {
                    position: '#stacked-area-div',
                },
                axis: {
                    showtext: false
                }
            };
        }
        this.stackedAreaChartService.getElephantData().then(function(data) {
            let chart = thizz.uv.chart('StackedArea', data, thizz.metaData);
        });
    }
}