import { Globals } from "../../app/app.globals";
export class Jacknife {

    constructor() {
        this.posX = '50%';
        this.PosY = '50%';
        this.height = null;
        this.title = null;
        this.titleFontSize = '13px';
        this.series = [];
        this.size = null;
        this.width = null;
        this.subtitle=null;
        this.export = false;
        this.plot1 = 0;
        this.plot2 = 0;
        this.equiposFormat = '';
    }


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

    setHeader() {

        this.equiposFormat = '<tr style=" font-size: 12px;"><td><b>Equipo</b></td><td>{point.nb}</td><td>';
    };

    setSize(size) {
        this.size = size;
    };

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

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

    setTitle(title) {
        this.title = title;
    };
    setTitleFontSize(size){
        this.titleFontSize = size;
    }

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

    setPosY(posY) {
        this.posY = posY;
    };

    setPosX(posX) {
        this.posX = posX;
    };

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

    setPlot1(plot) {
        this.plot1 = plot;
    };

    setPlot2(plot) {
        this.plot2 = plot;
    };

    Draw(){

        var  jacknifeDefaultChart = {
            chart: {
                type: 'scatter',
                plotBorderWidth: 1,
                zoomType: 'xy'
            },
            exporting: {
                enabled: this.export
            },
            credits:{
                enabled: false
            },
            colors: ['#285367',
            '#5ADED4',
            '#32758c',
            '#26596A',
            '#163342',
            '#6C98A1'],
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                distance:50
            },
            lang: {
                noData: "Datos Insuficientes."
            },
            title: {
                text: this.title
            },
            
            subtitle: {
                text: this.subtitle
            },
            
            xAxis: {
                gridLineWidth: 1,
                title: {
                    text: 'Ln(#Fallas)'
                },
                labels: {
                    format: '{value:.' + Globals.CANTDECIMALES +'f}'
                },
                plotLines: [{
                    color: 'red',
                    dashStyle: 'line',
                    width: 2,
                    value: this.plot1,
                    label: {
                        rotation: 0,
                        y: 15,
                        style: {
                            fontStyle: 'italic'
                        },
                        text: ''
                    },
                    zIndex: 3
                }]
            },
            
            yAxis: {
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: 'Ln(MTTR)',
                    align: 'high',
                    margin: 1,
                    offset: 20,
                    rotation: -360
                },
                labels: {
                    format: '{value:.' + Globals.CANTDECIMALES +'f}'
                },
                maxPadding: 0.2,
                plotLines: [{
                    color: 'red',
                    dashStyle: 'line',
                    width: 2,
                    value: this.plot2,
                    label: {
                        align: 'right',
                        style: {
                            fontStyle: 'italic'
                        },
                        text: '',
                        x: -10
                    },
                    zIndex: 3
                }]
            },
            
            tooltip: {
                useHTML: true,
                // pointFormat: '<span>MTTR: {point.yNormal} Hrs. </span> ( Y: {point.y} ) <br> <span> N: {point.xNormal} </span> ( X: {point.x} ) ',
                headerFormat: '<span  class=" uk-text-bold" style="color:{point.color};"> ■ </span><tr style="font-size: 9px;"><td>{series.name}</td></tr><table>',
                pointFormat: 
                    '<tr style=" font-size: 12px;"><td><b>N:</b></td><td>{point.xNormal}</td></tr>' +
                    '<tr style=" font-size: 12px;"><td><b>MTTR:</b></td><td>{point.yNormal}</td>></tr>'+
                    this.equiposFormat +
                    '<tr style=" font-size: 12px;"><td><b>Hrs Totales:</b></td><td>{point.horasTotales} Hr.</td></tr>',
                footerFormat: '</table>',
                followPointer: true
            },
            
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}'
                    },
                    cursor: 'pointer'
                      
                    
                }
            },
            // Se encarga de hacer responsive para las leyendas al mover por los lados las pantallas modo web
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 600,
                    },
                    chartOptions: {
                        legend: {
                            enabled:false
                            // align: 'center',
                            // verticalAlign: 'bottom',
                            // layout: 'horizontal'
                        }
                    }
                }]
            },
            series: this.series

        };
        this.equiposFormat = '';
    
        
    return jacknifeDefaultChart;


    }

}

