// COLORES
export var m =    '#00758d'; // Azul Marino
export var c =    '#dc272d'; // Carmesi
export var y =    '#f6a800'; // Amarillo oro
export var t =    '#5ecbca'; // Turquesa
export var g =    '#8a8a8e'; // Gris
export var p =    '#7c26cb'; // Purpura electrico
export var lg =   '#CDCDCD'; // Gris claro
export var ghc =  '#333333'; // Gris default de Highcharts
export var r =    '#ff1010'; // Rojo para stacked

export var colors = { 'm':m, 'c':c, 'y':y, 't':t, 'g':g, 'lg':lg, 'ghc':ghc, 'r':r, 'p':p };
export var months = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov', 'Dic'];

export function sumData(data){
  return data.reduce(function(a,b){return a+b});
}

export function randomData(dataLength, ceil, subceil){ // Cantidad de datos, el valor mas alto deseado, a partir del valor...
  var data = [];
  for (var i = 0; i < dataLength; i++) {
    var n = Math.floor(Math.random() * (ceil - subceil + 1)) + subceil;
    data.push(n);
  }
  return data;
}

export function randomNumber(ceil, subceil){
  var n = Math.floor(Math.random() * ( ceil-subceil + 1 )) + subceil;
  return n;
}

// NUEVO
export function streetLightGauge(data){
  var color;
  if(data >=0 && data <90){
    color = c;
  }
  if(data >=90 && data <100){
    color = y;
  }
  if(data == 100){
    color = m;
  }
  return color;
}

export function streetLightMain(value, meta){
  var color; 
  var margen = meta * 0.90;
  if(value > 0 && value < margen){
    color = colors.m;
  }
  if(value > margen && value < meta){
    color = colors.y;
  }
  if(value >= meta){
    color = colors.c;
  }
  else if(value <= 0){
    color = colors.ghc;
  }
  return color;
}

// NUEVO
export function streetLightC1_0(data){
  var color;
  if(data >=0 && data <10){
    color = c;
  }
  if(data >=10 && data <100){
    color = y;
  }
  if(data == 100){
    color = m;
  }
  return color;
}   

export function streetLight(data){
  var color = null;
  var min_tier_1 = 0;
  var max_tier_1 = 7000;
  var min_tier_2 = max_tier_1+1;
  var max_tier_2 = 10000;
  var limit = max_tier_2+1;
  if(data >= min_tier_1 && data <= max_tier_1){
    color = c;
  }
  if(data >= min_tier_2 && data <= max_tier_2){
    color = y;
  }
  if(data >= limit){
    color = m;
  }
  return color;
}

export function streetLightGC(data){
  var color = null;
  var min_tier_1 = 0;
  var max_tier_1 = 7000;
  var min_tier_2 = max_tier_1+1;
  var max_tier_2 = 10000;
  var limit = max_tier_2+1;
  if(data >= min_tier_1 && data <= max_tier_1){
    color = c;
  }
  if(data >= min_tier_2 && data <= max_tier_2){
    color = y;
  }
  if(data >= limit){
    color = m;
  }
  return color;
}

export function get_values(kpis, key, isInt){ // Obtiene los valores de un objeto, mediante una key y una condicion que los transforma a int
  var arr = [];
  kpis.forEach(column => {
    if(isInt){
      arr.push(parseInt(column[key]));
    } else {
      arr.push(column[key]);
    }
  });
  return arr;
}

function addSeries(dataNames, pointOverlap){
  var valueMeta = [];
  var valueReal = [];
  var dataMeta = [];
  var dataReal = [];
  var meta = "<b>Ppto: </b> "; // Revisar si cambiar meta por ppto

  var series = [{
    name: 'Ppto.',
    data: [ /**/ ],
    pointPadding: 0,
    pointPlacement: pointOverlap,
    },{
    name: 'Real',
    data: [ /**/ ]
  }];

  for (var i = 0; i < dataNames.length; i++) {
    valueReal[i] = randomNumber(0,100);
    valueMeta[i] = randomNumber(0,100);
    dataMeta = {
      x:i, y:valueMeta[i], color: lg, name: meta+dataNames[i]
    };
    dataReal = {
      x:i, y:valueReal[i], color: streetLightC1_0(valueReal[i]), name: dataNames[i]
    };

    series[0].data[i] = dataMeta;
    series[1].data[i] = dataReal;
  }

  return series;
}

export function Chart(){
  this.options = null;
  this.series = [];
  this.title = '';
};

export function getType() {
  return this.type;
}

export function setType(type) {
  this.type = type;
};

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

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

export function setOptions(options) {
  this.options = options;
};

export function setContainer(container) {
  this.container = '#'+container;
};

export function setDivitions(divitions) {
  this.divitions = divitions;
}

export function setTitleX(titleX) {
  this.titleX = titleX;
}

export function setTitleY(titleY) {
  this.titleY = titleY;
}

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

export function Draw() {

  var type        = this.type;
  var title       = this.title;
  var series      = this.series;
  var container   = this.container;
  var titleX      = this.titleX;
  var titleY      = this.titleY;
  var divitions   = this.divitions;
  var subtitle    = this.subtitle;

  // var options =  this.options;

  var chart = {

    chart: {
			type: type,
			borderWidth: 0,
			backgroundColor: 'transparent'
		},
    tooltip: {
      shared: true,
      enabled: true,
      borderColor: 'transparent'
    },
    legend: {
      enabled: true
    },
    title: {
      text: title
    },
    subtitle: {
      text: subtitle,
      align: 'center',
      y: 30
    },
    xAxis: {
      title: {
        text: titleX
      },
      categories: divitions

      // min: 0,
      // max: 100
    },
    yAxis: {
      title: {text: titleY},
      // min: 0,
      // max: 100
    },
		exporting: {enabled: false},
		credits: {enabled: false},
    series: series

  }

  if(this.options!==null){
		chart = $.extend(true, chart, this.options);
    $(container).highcharts(chart);
	}

  return chart;
}

export function Destroy() {
	if (this.chart !== null) {
		this.chart = null;
	}

  this.type = '';
	this.container = null;
	this.options = null;
	this.title = '';
	this.series = [];
  this.subtitle = '';
  this.divitions = [];
  this.titleX = '';
  this.titleY = '';
}

export function makeGaugePP(title, measure, dataLength, ceil, subceil, size){

  var rData = randomData(dataLength,ceil,subceil);
  var gap = -(size/5);
  var tick = size/5;

  var chart = {
    chart: {
      type: 'solidgauge',
      height: size,
      // marginBottom: -100 // Agranda un poco el gauge, eliminando el margin por defecto al menos
    },
    title: {
        text: title+' '+measure,
    },
    exporting:{
      enabled:false,
    },
    pane: {
      center: ['50%', '50%'],
      size: '100%',
      startAngle: -100,
      endAngle: 100,
      rounded:true,
      background: {
          backgroundColor: '#EEE',
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
      }
    },
    yAxis: [{
      lineWidth:0,
      minorTickInterval: null,
      min: 0,
      max: 100,
      tickPixelInterval: 400,
      tickWidth: 0,
      labels: {
         y: 16,
         style: {
           color: ghc,
           fontSize: '15px',
           fontWeight: 'bold'
         }
      },
      minPadding:1,
      zIndex: -1,
    }, {
      zIndex: 5,
      linkedTo: 0,
      lineWidth: 2,
      minorTickLength: 0,
      tickPositions: [rData[0]],
      tickLength: tick,
      tickColor: 'red',
      lineColor: streetLightGauge(rData[1]),
      labels: {
        distance: gap,
        style: {
          color: ghc,
          fontSize: '15px',
          fontWeight: 'bold'
        },
        formatter:function(){
          if(size>=300){
            return this.value + "%";
          }
        }
      }
    }],
    plotOptions: {
        solidgauge: {
            dataLabels: {
                style: {
                  color: ghc,
                  fontSize: '25px',
                  fontWeight: 'bold',
                },
                enabled: true,
                borderWidth: 0,
                verticalAlign: 'bottom',
                formatter: function(){
                  var cumplimientoSemanal = this.series.data[1].y;
                  var label = "<span>" + cumplimientoSemanal + '%' + '</span>';
                  return label;
                }
            }
        }
    },
    credits: {
        enabled: false
    },
    tooltip: {
        shared: true,
        hideDelay: 100,
        followPointer: true,
        pointFormat: '<b>{point.name}: {point.y:.2f}</b>%'
    },

    series: [{

      data: [{

        name: 'Meta',
        radius: 100,
        innerRadius: 55,
        y: rData[0],
        color: lg

      }, {

        name: 'Cumplimiento',
        radius: 100,
        innerRadius: 60,
        y: rData[1],
        color: streetLightGauge(rData[1]),

      }]
    }]
  }
  return chart;
}

export function makeChartPP(title){

  // var currentMonth = new Date().getMonth();
  var currentMonth = '12';
  var sections = ['Ene-18','Feb-18','Mar-18','Abr-18','May-18','Jun-18','Jul-18','Ago-18','Sep-18','Oct-18','Nov-18', 'Dic-18','Acumulado'];
  var dataLine = randomData(currentMonth,600,1000);
  var dataGoals = randomData(sections.length-1,700,800);
  var sumDataReal = sumData(dataLine);
  var sumDataMeta = sumData(dataGoals);

  var chart = {
    chart:{
      height: 350
    },
    title: {
      text: title
    },
    credits: {
      enabled: false
    },
    legend: {
      borderWidth: 2,
      borderRadius: 3
    },
    tooltip: {
      shared: true,
      enabled: true,
      // crosshairs: true
    },
    xAxis: {
      categories: sections
    },
    yAxis: [{
      title: { text: 'k[m3]' },
      min:0,
      max:2000
    }, {
      title: { text: '' },
      min:0,
      max:10000,
      opposite: true
    }],
    series: [{
            color: t,
            type: 'spline',
            name: 'Real',
            data: dataLine,
            yAxis: 0
       }, {
            color: g,
            type: 'spline',
            name: 'Ppto',
            data: dataGoals,
            yAxis: 0
       }, {
              yAxis: 1,
              type: 'column',
              pointStart: 12,
              color: t,
              name: 'Real acumulado',
              dataLabels : {
                enabled: false
              },
              data: [
                  sumDataReal
              ]
            },{
              yAxis: 1,
              type: 'column',
              pointStart: 12,
              color: g,
              name: 'Ppto. acumulado',
              dataLabels : {
                enabled: false
              },
              data: [
                  sumDataMeta
              ]}
          ]
    }
    return chart;
}

export function makeMeterPP(title, size, subtitle){

  var dataIndicator = randomNumber(50,100);

  var chart = {
    chart: {
       type: 'gauge',
       plotShadow: false,
       height: size
    },
    tooltip: {
      shared: true,
      hideDelay: 100,
      followPointer: false,
      pointFormat: '<b>{point.y:.2f} kg/m²hr</b>',
      // valueSuffix: ' kg/m²hr'
    },
    title: {
       text: title
    },
    subtitle: {
       text: subtitle
    },
    pane: {
       startAngle: -150,
       endAngle: 150,
       background: [{
           backgroundColor: {
               linearGradient: { x1: 1, y1:1, x2: 1, y2: 1 },
               stops: [
                   [0, '#FFF'],
                   [1, '#333']
               ]
           },
           borderWidth: 0,
           outerRadius: '109%'
       }, {
           backgroundColor: {
               linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
               stops: [
                   [0, '#333'],
                   [1, '#FFF']
               ]
           },
           borderWidth: 0,
           outerRadius: '100%'
       }, {
           // default background
       }, {
           backgroundColor: '#DDD',
           borderWidth: 0,
           outerRadius: '105%',
           innerRadius: '103%'
       }]
    },
    credits: false,
    // the value axis
    yAxis: {
       min: 0,
       max: 2000,

       minorTickInterval: 'auto',
       minorTickWidth: 0,
       minorTickLength: 10,
       minorTickPosition: 'inside',
       minorTickColor: '#666',

       tickPixelInterval: 30,
       tickWidth: 0,
       tickPosition: 'inside',
       tickLength: 10,
       tickColor: '#666',
       labels: {
           step: 2,
           rotation: 'auto'
       },
       title: {
           text: null,
           y: 20
       },
       plotBands: [{
           from: 0,
           to: 1000,
           color: c
           /*color:  '#DF5353'// green*/
       }, {
           from: 1000,
           to: 1500,
           color: y
          /* color: '#DDDF0D' // yellow*/
       }, {
           from: 1500,
           to: 2000,
           color: m
           /*color: '#55BF3B' // red*/
       }]
    },
    series: [{
        name: subtitle,
        data: [1500]
    }]
  }
  return chart;
}

export function makeStackedPP(title){

  var chart = {
    chart: {
        type: 'column',
        height: 250
    },
    title: {
        text: title
    },
    credits: false,
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','Acumulado']
    },
    yAxis: {
        min: 0,
        title: {
            text: '%'
        }
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.2f}</b> ({point.percentage:.2f}%)<br/>',
        shared: true
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }
    },
    series: [{
      color: r,
        name: 'Mant. Preventivo',
        data: [5, 3, 4, 7, 2, 0, 0 , 0, 0, 0, 0, 0, 9]
    }, {
      color: g,
        name: 'Mant. Correctivo',
        data: [2, 2, 3, 2, 1,0, 0 , 0, 0, 0, 0, 0, 3]
    }, {
      color: m,
        name: 'Det. causas Exógenas',
        data: [3, 4, 4, 2, 5,0, 0 , 0, 0, 0, 0, 0, 6]
    },
    {
      color: y,
        name: 'Det. de Línea',
        data: [8, 7, 5, 3, 2,0, 0 , 0, 0, 0, 0, 0, 11]
    }]

  }
  return chart;

}

export function makePiePP(title){

  var dataPie = randomData(6,1,100);

  var chart = {
      chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie',
          height: 300
      },
      colors: ['#00758d','#00C1E5', '#3E5987', '#8DA5D8', '#004E5D', '#AEE3ED'],
      title: {
          text: '',
          floating: true,
      },
      legend: {
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        // maxHeight: 100
      },
      credits: {
        enabled: false
      },
      tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
      },
      plotOptions: {
          pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                  enabled: false
              },
              showInLegend: true
          },
          series: {
              dataLabels: {
                  enabled: true,
                  formatter: function() {
                      return Math.round(this.percentage*100)/100 + ' %';
                  },
                  distance: 30,
                  color:'black'
              }
          }
      },
      series: [{
          name: 'Brands',
          colorByPoint: true,
          data: [{
            
              name: 'Bomba N°3',
              y: dataPie[0],
              sliced: true,
              selected: true
          }, {
           
              name: 'Bomba N°1',
              y: dataPie[1]
          }, {
            
              name: 'Bomba N°26',
              y: dataPie[2]
          }, {
          
              name: 'Bomba N°6',
              y: dataPie[3]
          }, {
            
              name: 'Bomba N°4',
              y: dataPie[4]
          }, {
            
              name: 'Bomba N°7',
              y: dataPie[5]
          }]
      }]
    }
    return chart
}

export function makePiePPDinamico(title, data, seri){

  //var dataPie = randomData(6,1,100); Ej: [100, 200, 300, 200]
  var dataPie = data;

  var chart = {
      chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie',
          height: 300
      },
      title: {
          text: title
      },
      legend: {
        maxHeight: 100
      },
      credits: {
        enabled: false
      },
      tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
      },
      plotOptions: {
          pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                  enabled: false
              },
              showInLegend: true
          },
          series: {
              dataLabels: {
                  enabled: true,
                  formatter: function() {
                      return Math.round(this.percentage*100)/100 + ' %';
                  },
                  distance: 30,
                  color:'black'
              }
          }
      },
      series: seri
    }
    return chart
}

export function makeLineCol(title, measure, series){

  // var currentMonth = new Date().getMonth();
  var currentMonth = '12';
  var sections = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov', 'Dic','MTD'];
  var dataReal = randomData(currentMonth,600,1000);
  var dataPpto = randomData(sections.length-1,700,800);
  var sumDataReal = sumData(dataReal);
  var sumDataPpto = sumData(dataPpto);
  var sumPptoAnual = sumDataReal + sumDataPpto;

  var chart = {
    chart:{
      height: 350
    },
    title: {
      text: title
    },
    credits: {
      enabled: false
    },
    legend: {
      borderWidth: 2,
      borderRadius: 3
    },
    tooltip: {
      // shared: true,
      enabled: true,
      // crosshairs: true
    },
    xAxis: {
      categories: sections
    },
    yAxis: [{
      title: { text: measure },
      min:0,
      max:2000
    }, {
      title: { text: measure },
      min:0,
      max:10000,
      opposite: true
    }],
    series: [{
                  color: t,
                  type: 'spline',
                  name: 'Real',
                  data: dataReal,
                  yAxis: 0
             }, {
                  color: g,
                  type: 'spline',
                  name: 'Ppto',
                  data: dataPpto,
                  yAxis: 0
             }, {
                    yAxis: 1,
                    type: 'column',
                    pointStart: 12,
                    color: t,
                    name: 'Real acumulado',
                    dataLabels : {
                      enabled: false
                    },
                    data: [
                        sumDataReal
                    ]
                  },{
                    yAxis: 1,
                    type: 'column',
                    pointStart: 12,
                    color: g,
                    name: 'Ppto. acumulado',
                    dataLabels : {
                      enabled: false
                    },
                    data: [
                        sumDataPpto
                    ]}, {
                      yAxis: 1,
                      type: 'column',
                      pointStart: 12,
                      color: streetLightGC(sumPptoAnual),
                      name: 'Ppto. anual',
                      dataLabels : {
                        enabled: false
                      },
                      data: [
                          sumPptoAnual
                      ]}
                ]
    }
    return chart;
}


export function makeLineColDinamico(title, measure, data1, data2, section, serie){

  // var currentMonth = new Date().getMonth();
  var currentMonth = '12';
  var sections = section;
  var dataReal = data1;
  var dataPpto = data2;
  var sumDataReal = sumData(dataReal);
  var sumDataPpto = sumData(dataPpto);
  var sumPptoAnual = sumDataReal + sumDataPpto;

  var chart = {
    chart:{
      height: 350
    },
    title: {
      text: title
    },
    credits: {
      enabled: false
    },
    legend: {
      borderWidth: 2,
      borderRadius: 3
    },
    tooltip: {
      // shared: true,
      enabled: true,
      // crosshairs: true
    },
    xAxis: {
      categories: sections
    },
    yAxis: [{
      title: { text: measure },
      min:0,
      max:2000
    }, {
      title: { text: measure },
      min:0,
      max:10000,
      opposite: true
    }],
    series: serie
    }
    return chart;

    /**/
}

export function makeChartWaterfall(title, measure, data){
  // var data = randomData(9,1000,1);
  var chart = {
    title: {
        text: title
    },
    chart: {
        type: 'waterfall',
        height: 350
    },
    xAxis: {
        type: 'category'
    },
    credits: false,
    yAxis: [{
        title: {
            text: measure
        }
    }, {
        title: {
          text: measure
        },
        opposite: true
    }],
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: '<b>${point.y:,.2f}</b> USD'
    },
    series: [{
        upColor: c,
        color: m,
        borderWidth: 0,
        data: data,
        dataLabels: {
            enabled: false, // SIN QUE MUESTRE DATOS
            style: {
                fontWeight: 'bold'
            }
        },
        pointPadding: 0
      }]
  }
  return chart;
}

export function makeChartWaterfallDinamico(title, measure, dat, serie){
  var data = dat;
  var chart = {
    colors: ['#00758d','#dc272d','#f6a800','#5ecbca','#8a8a8e'],
    title: {
        text: title
    },
    chart: {
        type: 'waterfall',
        height: 250
    },
    xAxis: {
        type: 'category'
    },
    credits: false,
    yAxis: [{
        title: {
            text: measure
        }
    }, {
        title: {
          text: measure
        },
        opposite: true
    }],
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: '<b>${point.y:,.2f}</b> KUSD'
    },
    series: serie
  }
  return chart;
}

export function drawMain_C1(titleText, type, dataNames, pointOverlap, measure,serie){

  var chart = {
    chart: {
        type: type,
        height: null
    },
    colors: ['#CDCDCD','#00758d'],
    title: {
        text: titleText
    },
    xAxis: {
      categories: dataNames,
        labels: {
            style: {
                fontSize: '1 vmax',
                fontFamily: 'Verdana, sans-serif'
            },
            autoRotation:false
        }
    },
    yAxis: {
      labels: {
          formatter: function() {
              return this.value+measure;
          }
        },
      // min: 30,
      max: 100,
      title: {
          text: measure
      }
    },
    plotOptions: {
      column: {

          grouping: false,
          shadow: false,
          borderWidth: 1
      }
    },
    legend: {
        enabled: false
    },
    tooltip: {
      headerFormat: '<span style="font-size:15px">{point.key}</span><br>',
      pointFormat: '<span class= "uk-center" style="font-size:13px"><span style="color:{point.color};"> ■ </span><span>{series.name}: </span>{point.y:.2f}'+'%'+'</span><br>',
        footerFormat: '',
        shared: true,
        useHTML: true
    },
    credits: {
        enabled: false
    },
    series: serie
  }
  return chart;
}

export function drawMain_C3(titleText, type, dataNames, pointOverlap, measure){

  var chart = {
    chart: {
        type: type,
       // height: (9 / 16 * 100) + '%'
        height: 250
    },
    title: {
        text: titleText
    },
    xAxis: {
        type: 'category',
        labels: {
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
      labels: {
          formatter: function() {
              return this.value+measure;
          }
        },
      // min: 30,
      max: 100,
      title: {
          text: measure
      }
    },
    plotOptions: {
      column: {

          grouping: false,
          shadow: false,
          borderWidth: 1
      }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: '<b>{point.y:.2f}%</b>'
    },
    credits: {
        enabled: false
    },
    series:
        addSeries(dataNames, pointOverlap)
  }
  return chart;
}

export function drawMain_C4(title, measure, dataLength, ceil, subceil, size){

  var rData = randomData(dataLength,ceil,subceil);
  var gap = -(size/5);
  var tick = size/5;

  var chart = {
    chart: {
      type: 'solidgauge',
      height: size,
      // marginBottom: -100 // Agranda un poco el gauge, eliminando el margin por defecto al menos
    },
    title: {
        text: title+' '+measure,
    },
    exporting:{
      enabled:false,
    },
    pane: {
      center: ['50%', '50%'],
      size: '100%',
      startAngle: -100,
      endAngle: 100,
      rounded:true,
      background: {
          backgroundColor: '#EEE',
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
      }
    },
    yAxis: [{
      lineWidth:0,
      minorTickInterval: null,
      min: 0,
      max: 100,
      tickPixelInterval: 400,
      tickWidth: 0,
      labels: {
         y: 16,
         style: {
           color: ghc,
           fontSize: '15px',
           fontWeight: 'bold'
         }
      },
      minPadding:1,
      zIndex: -1,
    }, {
      zIndex: 5,
      linkedTo: 0,
      lineWidth: 2,
      minorTickLength: 0,
      tickPositions: [rData[0]],
      tickLength: tick,
      tickColor: 'red',
      lineColor: streetLightGauge(rData[1]),
      labels: {
        distance: gap,
        style: {
          color: ghc,
          fontSize: '15px',
          fontWeight: 'bold'
        },
        formatter:function(){
          if(size>=300){
            return this.value + "%";
          }
        }
      }
    }],
    plotOptions: {
        solidgauge: {
            dataLabels: {
                style: {
                  color: ghc,
                  fontSize: '25px',
                  fontWeight: 'bold',
                },
                enabled: true,
                borderWidth: 0,
                verticalAlign: 'bottom',
                formatter: function(){
                  var cumplimientoSemanal = this.series.data[1].y;
                  var label = "<span>" + cumplimientoSemanal + '%' + '</span>';
                  return label;
                }
            }
        }
    },
    credits: {
        enabled: false
    },
    tooltip: {
        shared: true,
        hideDelay: 100,
        followPointer: true,
        pointFormat: '<b>{point.name}: {point.y:.2f}</b>%'
    },

    series: [{

      data: [{
        name: 'Meta',
        radius: 100,
        innerRadius: 55,
        y: rData[0],
        color: lg
      }, {
        name: 'Cumplimiento',
        radius: 100,
        innerRadius: 60,
        y: rData[1],
        color: streetLightGauge(rData[1]),
      }]
    }]
  }
  return chart;
}
