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

    constructor() {
        this.posX = '50%';
        this.PosY = '50%';
        this.height = null;
        this.title = null;
        this.series = [];
        this.size = null;
        this.width = null;
        this.export = false;
        this.titleFontSize = '13px';
        this.mainFontSize = '0.6em';
        this.colorTitleFont = 'black';
        this.colorMainFont = 'black';
        this.tickMeta = 0;
        this.lineColor = 'rgb(0, 117, 141)';
        this.tickLength = '30';
        this.metrica = '%';
        this.tickLegendEnable = false;
        this.tickSize = '0.9em';
        this.tickMax = 100;
        this.tickY = 7;
        this.tickX = 3;
        this.labelsColor="";
        this.endOnTick = true;
        this.distance = 0;
    }


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

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

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

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

    setTickMeta(meta) {
        this.tickMeta = meta;
    };

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

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

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

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

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

    setMainFontSize(size){
        this.mainFontSize = size;
    }

    setLineColor(color){
        this.lineColor = color;
    }

    setTickLength(length){
        this.tickLength = length;
    }

    setMetrica(valor){
        this.metrica = valor;
    }

    setTickLegendEnable(valor){
        this.tickLegendEnable = valor;
    }
    setTickSize(valor){
        this.tickSize = valor;
    }

    setTickMax(valor){
        this.tickMax = valor;
    }

    setTickY(valor){
        this.tickY = valor;
    }
    setLabelsColor(labelsColor){
        this.labelsColor=labelsColor;
    }

    setTickX(valor){
        this.tickX=valor;
    }

    setTipoIndicador(valor){
        
        if (valor == 'Ton'){
            this.metrica = '<br>Ton';
        }

        else{ 
            this.metrica = '%';
        }
    }

     setColorMainFont(color){
         this.colorMainFont = color;
     }

     setDistance(distance){
         this.distance=distance;
     }

    Draw(){

        var  gaugeDefaultChart = {

            chart: {
                type: 'solidgauge',
                width: this.width,
                backgroundColor: 'transparent',
                borderWidth: 0,
                margin: [30,0,-40,0],
            },
            title: {
                text: this.title,
                floating: false,
                style: {"fontSize": this.titleFontSize}
            },
            exporting:{
                enabled: this.export
            },
            pane: {
                center: [this.posX, this.posY],
                size: this.size,
                startAngle: -100,
                endAngle: 100,
                rounded:true,
                background: {
                    backgroundColor: '#EEE',
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },
            yAxis: [{
                visible: this.tickLegendEnable,
                lineWidth:0,
                minorTickInterval: 0,
                min: 0,
                max: this.tickMax,
                endOnTick: this.endOnTick,
                tickPixelInterval: 100,
                tickAmount: 0,
                tickWidth: 0,
                tickPositioner: function() {
                    return [this.min, this.max];
                }, 
                labels: {
                    y: this.tickY,
                    x: this.tickX,
                    align:'center',
                    distance:this.distance,
                    formatter:function(){
                        var metric;
                        if(this.value >999){
                            metric = 'k';
                        }else{
                            metric = ''
                        }
                        if(this.value >999){ 
                            return (this.value/1000).toFixed(Globals.CANTDECIMALES) + metric;   
                        }else if(this.value == 0.0001){
                            return (0.00).toFixed(Globals.CANTDECIMALES);
                        }else{
                            return this.value.toFixed(Globals.CANTDECIMALES) + metric; 
                        }
                    },
                    style: {
                        color: 'black',
                        fontSize:  this.tickSize,
                        fontWeight: 'bold',
                    }
                },
                minPadding:1,
                zIndex: 6
            }, {
                zIndex: 5,
                linkedTo: 0,
                lineWidth: 2,
                minorTickLength: 0,
                tickPositions: [this.tickMeta],
                tickLength: this.tickLength,
                tickColor: '#EEE',
                lineColor: this.lineColor,
                labels: {
                    distance: 10,
                    style: {
                        color: 'black',
                        fontSize: '10px',
                        fontWeight: 'bold'
                    },
                    formatter:function(){
                        if(this.size>=300){
                            return "Meta: "+ this.value +  this.metrica;
                        }
                    }
                }
            }],
            plotOptions: {
                solidgauge: {
                    dataLabels: {
                        style: {
                            color: this.colorMainFont,
                            fontSize: this.mainFontSize,
                            fontWeight: 'bold',
                            textOutline: false
                        },
                        useHTML: true,
                        enabled: true,
                        borderWidth: 0,
                        verticalAlign: 'bottom',
                        formatter: function(){
                            var cumplimientoSemanal =  (Math.abs(this.series.data[1].y) > 999 ? (Math.sign(this.series.data[1].y)*((Math.abs(this.series.data[1].y)/1000).toFixed(Globals.CANTDECIMALES))).toFixed(Globals.CANTDECIMALES)  : (Math.sign(this.series.data[1].y)*Math.abs(this.series.data[1].y)).toFixed(Globals.CANTDECIMALES));
                            var metric = this.series.data[1].indicType;
                            if(metric=='Ton'){
                                if((Math.abs(this.series.data[1].y) > 999)){
                                    metric ='<br>kTon';
                                }else{
                                    metric='<br>Ton';
                                }          
                            }
                            var label = '<span style=""><center>' + cumplimientoSemanal + metric +'</center></span>'  ;
                            return label;
                        }
                    }
                }
            },
            credits: {
                enabled: false
            },
            tooltip: {
                useHTML: true,
                shared: true,
                hideDelay: 100,
                align: "center",
                followPointer: true,
                formatter: function(){
                    var cumplimientoSemanal = Math.abs(this.point.y) > 999 ? (Math.sign(this.point.y)*((Math.abs(this.point.y)/1000).toFixed(2))).toFixed(Globals.CANTDECIMALES) : (Math.sign(this.point.y)*Math.abs(this.point.y)).toFixed(Globals.CANTDECIMALES);
                    var metric = this.series.data[1].indicType;
                    if(metric == "Ton"){
                        if(Math.abs(this.point.y) > 999){
                            metric = "kTon";
                        }else{
                            metric= "Ton";
                        }
                    }
                    var label = '<b>'+this.point.name+'</b>: ' + cumplimientoSemanal + metric;
                    return label;
                },
                style: {
                    width: '90%'
                }
            },
            series: this.series
        };
        return gaugeDefaultChart;
    }

}