import { Globals } from "../../app/app.globals";

export class Oee {

    constructor() {

        this.height = null;
        this.title = null;
        this.series = [];
        this.size = null;
        this.width = null;
        this.subtitle = null;
        this.categories = null;
        this.yLabelFormat = '{value}%';
        this.yTitle = 'Tiempo %';
        this.yMin = 0;
        this.yMax = 3600;
        this.inverted = false;
        this.legend = false;
        this.dataLabels = true;
        this.dataLabelsFormat = '{y} %';
        this.export = false;

    }


    setSeries(series) {
        this.series = series;
    };

    setInverted(inverted) {
        this.inverted = inverted;
    };

    setHeight(height) {
        this.height = height;
    };

    setWidth(width) {
        this.width = width;
    };

    setTitle(title) {
        this.title = title;
    };

    setSubtitle(subtitle) {
        this.subtitle = subtitle;
    };

    setYMin(yMin) {
        this.yMin = yMin;
    };

    setYmax(yMax) {
        this.yMax = yMax;
    };

    setCategories(categories) {
        this.categories = categories;
    };

    setYLabelFormat(yLabelFormat){
        this.yLabelFormat = yLabelFormat;
    };

    setYTitle(yTitle){
        this.yTitle = yTitle;
    };

    setLegend(legend){
        this.legend = legend;
    };

    setDataLabels(dataLabels){
        this.dataLabels = dataLabels;
    };

    setDataLabelsFormat(dataLabelsFormat){
        this.dataLabelsFormat = dataLabelsFormat;
    };

    setExport(exporting) {
        this.export = exporting;
    };


    
    
    Draw(){
        var  oeeDefaultChart = {

            chart: {
                type: 'columnrange',
                inverted: this.inverted,
                height: this.height,
                width: this.width
            },
            exporting: {
                enabled: this.export
            },
            credits:{
                enabled: false
            },
            lang: {
                noData: "Datos Insuficientes."
            },
            title: {
                text: this.title
            },
        
            subtitle: {
                text: this.subtitle
            },
        
            xAxis: {
                categories: this.categories
            },
        
            yAxis: {
                labels: {
                    enabled: false,
                    // format: this.yLabelFormat,
                    formatter: 
                        function() {
                            return (this.value*100/this.axis.max).toFixed(Globals.CANTDECIMALES);
                        }
                    
                },			
                title: {
                    text: this.yTitle
                },
                min: this.yMin,
                max: this.yMax,
                endOnTick: true
            },
        
            tooltip: {
                formatter: function () {
                    var s = '<span>' + this.point.nb + '</span>:<span>' + ((this.point.high - this.point.low)* 100 / this.series.dataMax).toFixed(Globals.CANTDECIMALES) + '%</span> (' + (this.point.high - this.point.low).toFixed(Globals.CANTDECIMALES) + ' hrs)';
                 
    
                    return(s);
                }
            },
        
            plotOptions: {
                columnrange: {
                    dataLabels: {
                        color: 'black',
                        style: {
                            textOutline: 0,
                            fontWeight: 'normal'
                          },
                        enabled: this.dataLabels,
                        formatter: function () {
                            var s = '<b style="color:#333333; fill:#333333">' + ((this.point.high - this.point.low)* 100 / this.series.dataMax).toFixed(Globals.CANTDECIMALES) + '</b> ';

                            if (this.y === this.point.high && (this.point.high - this.point.low) != 0){
                                return(s);
                            }
                            else{
                                return '';
                            }
                            
                        }
                    }
                },
                series: {
                    // pointWidth: 40,
                    borderRadius: 0,
                    tooltip:{
                        followPointer: true,
                    },

                }
            },
        
            legend: {
                enabled: this.legend
            },
        
            series: this.series
        };

        return oeeDefaultChart;
    }

}
