angular.module('gccIndicatorsModel', ['ngSanitize'])
  .controller('gccCountryBasedIndicator', ['$global', '$timeout', '$filter', '$scope', '$http', '$q', '$interval', '$uibModal', function ($global, $timeout, $filter, $scope, $http, $q, $interval, $uibModal) {
    let indicatorData = {};
    let indicatorInfo = [];
    let parentId = undefined;
    $scope.gbTitle = undefined;
    $scope.init = ((countryId, parentId) => {
      parentId = parseInt(parentId);
      blockUI('economicIndDiv');
      $http({
        url: siteRoot +'gcc/countrybasedeconomicindicator',
        method: 'POST',
        data: { countryId: countryId, parentId: parentId}
      })
        .then((res) => {
          indicatorData = res.data.detail;
          indicatorInfo = res.data.info.map((el) => { if (el.ParentID === parseInt(parentId)) return el; }).clean()

          indicatorInfo.map((el) => { if (el.ChartType === 'pie') return el; }).clean().map((val) => {
            processPieChart(val, indicatorData);
          });
          indicatorInfo.map((el) => { if (el.ChartType === 'stacked') return el; }).clean().map((val) => {
            processStackedChart(val, indicatorData);
          });         
          indicatorInfo.map((el) => { if (el.ChartType === 'column') return el; }).clean().map((val) => {
            processSpecialColumnChart(val, indicatorData);
          });
                        
          if (res.data.detail && res.data.detail.length > 0)
            $scope.gbTitle = `${indicatorData.firstOrDefault().Title} <i class="fa fa-angle-double-${lang === '1' ? 'right' : 'left'}"></i> <small class="text-capilatize blueColor">${indicatorData.firstOrDefault().SubTitle}</small>`;

          createChartsDivs();
          processCharts(indicatorData);
            //if (res.data.detail && res.data.detail.firstOrDefault().ChartType.toLocaleLowerCase().indexOf('line')>-1) {
            //  processLineCharts('line',indicatorData);
            //} else if (res.data.detail && res.data.detail.firstOrDefault().ChartType.toLocaleLowerCase() === 'column') {
            //  processColumnCharts('column', indicatorData);            
          //}
        }).catch(() => {
          unblockUI('economicIndDiv');
        }).finally(() => { unblockUI('economicIndDiv'); });
    });


    function processPieChart(indicatorInfRow, detailData) {
      let factDates = detailData.map((el) => { return parseInt(el.AsOfDate.slice(6,-2)); }).sortUnique();
      let maxYear = factDates.max();
      let facts = detailData.map((el) => { return el.ESDFactID; }).sortUnique();
      if (indicatorInfRow.Top === true)
        facts = detailData.sort((a, b) => { if (parseFloat(a.CValue) > parseFloat(b.CValue)) { return -1; } else { return 1; } }).map((el) => { return el.ESDFactID; }).uniqueArray();

      
      let pieData = [];
      let pieDiv = `pie${Math.floor(Math.random() * 10000)}`;
      let othersValue = 0;
      facts.forEach((factId, index) => {  
        
        let tempFact = detailData.map((el) => { if (el.ESDFactID === factId && parseInt(el.AsOfDate.slice(6, -2)) === maxYear) return el; }).clean().firstOrDefault();
        if (indicatorInfRow.Top === true) {
          if (index < 10) {
            pieData.push({
              name: tempFact.ESDFact,
              y: tempFact.CValue,
              factId: factId
            });
          } else {
            othersValue += parseFloat(tempFact.CValue);
            if ((facts.length-1) === index) {
              pieData.push({
                name: 'All Others',
                y: othersValue,
                factId: -1
              });
            }
          }
        } else {
          pieData.push({
            name: tempFact.ESDFact,
            y: tempFact.CValue,
            factId: factId
          });
        }
      });
      if (indicatorInfRow.Include === false) {
        let excludeIds = indicatorInfRow.FactIDs.split(',').map((el) => { return parseInt(el); });
        pieData = pieData.map((el) => {
          return excludeIds.indexOf(el.factId) > -1 ? undefined : el;
        }).clean();
      } else {
        let excludeIds = indicatorInfRow.FactIDs.split(',').map((el) => { return parseInt(el); });
        pieData = pieData.map((el) => {
          return excludeIds.indexOf(el.factId) > -1 ? el : undefined;
        }).clean();
      }
     
      $('.chart-holder').append(`
        <div class="col-md-6 margin-bottom-30">
           <div class="comany-analytics-chart const-ltr" id="${pieDiv}"></div>                        
        </div>
      `);
      let title = $filter('getLabel')(`${indicatorInfRow.ChartTitle}`);
      title = title.replace('{0}', maxYear);
      createPieChart(title, pieDiv, pieData, '%');     
    }

    function processStackedChart(indicatorInfRow, detailData) {
      let factDates = detailData.map((el) => { return parseInt(el.AsOfDate.slice(6, -2)); }).sortUnique();
      let maxYear = factDates.max();
      let facts = detailData.map((el) => { return el.ESDFactID; }).sortUnique();
      let stackedSeries = [];
      let stackedId = `stack${Math.floor(Math.random() * 10000)}`;

      facts.forEach((factId) => {
            let tempFact = detailData.map((el) => { if (el.ESDFactID === factId && parseInt(el.AsOfDate.slice(6, -2)) === maxYear) return el; }).clean().firstOrDefault();
            stackedSeries.push({
              name: tempFact.ESDFact,
              data: detailData.map((el) => { if (el.ESDFactID === factId) return el.CValue; }).clean(),
              factId:factId
            });
      });
      if (indicatorInfRow.Include === false) {
        let excludeIds = indicatorInfRow.FactIDs.split(',').map((el) => { return parseInt(el); });
        stackedSeries = stackedSeries.map((el) => {
          return excludeIds.indexOf(el.factId) > -1 ? undefined : el;
        }).clean();
      } else if (indicatorInfRow.Include === true) {
        let excludeIds = indicatorInfRow.FactIDs.split(',').map((el) => { return parseInt(el); });
        stackedSeries = stackedSeries.map((el) => {
          return excludeIds.indexOf(el.factId) > -1 ? el : undefined;
        }).clean();
      }
           
      $('.chart-holder').append(`
        <div class="col-md-6 margin-bottom-30">
           <div class="indicator-by-country-chart const-ltr" id="${stackedId}"></div>                        
        </div>
      `);

      let title = $filter('getLabel')(`${indicatorInfRow.ChartTitle}`);
      let measurementUnit = detailData.map((el) => { if (parseInt(el.AsOfDate.slice(6, -2)) === maxYear) return el; }).clean().firstOrDefault().unit.capitalize(); 
      createStackedChart(title, stackedId, factDates, stackedSeries, measurementUnit)
    }

    function processSpecialColumnChart(indicatorInfRow, detailData) {        
      let facts = detailData.map((el) => { if (el.CValue !== 0) return el.ESDFactID; }).clean().sortUnique();
      let dateCats = detailData.map((el) => { if (el.CValue !== 0) return parseInt(el.AsOfDate.slice(6, -2)); }).clean().uniqueArray().sortAsc();
      let chartSeries = [];
      let columnChartId = `spcolumn${Math.floor(Math.random() * 10000)}`;

      facts.forEach((factId) => {
        let specialColumnData = [];
        let tempObj = detailData.map((el) => { if (el.ESDFactID === factId) return el; }).clean().firstOrDefault();
        dateCats.map((dateCat) => {
          specialColumnData.push(detailData.map((el) => { if (parseFloat(el.CValue) !== 0 && parseInt(el.AsOfDate.slice(6, -2)) === dateCat && el.ESDFactID === factId) return el.CValue; }).clean().firstOrDefault());       
        });        
        chartSeries.push({
          name: tempObj.ESDFact,
          type: 'column',
          factId:factId,
          data:specialColumnData
        });
      });
      if (indicatorInfRow.Include === false) {
        let excludeIds = indicatorInfRow.FactIDs.split(',').map((el) => { return parseInt(el); });
        chartSeries = chartSeries.map((el) => {
          return excludeIds.indexOf(el.factId) > -1 ? undefined : el;
        }).clean();
      } else if (indicatorInfRow.Include === true) {
        let excludeIds = indicatorInfRow.FactIDs.split(',').map((el) => { return parseInt(el); });
        chartSeries = chartSeries.map((el) => {
          return excludeIds.indexOf(el.factId) > -1 ? el : undefined;
        }).clean();
      }
      
      $('.chart-holder').append(`
        <div class="col-md-6 margin-bottom-30">
           <div class="indicator-by-country-chart const-ltr" id="${columnChartId}"></div>                        
        </div>
      `);

      let title = $filter('getLabel')(`${indicatorInfRow.ChartTitle}`);
      let firstObj = detailData.map((el) => { if (el.ESDFactID === chartSeries.firstOrDefault().factId) return el; }).clean().firstOrDefault(); 
      
      createColumnChart(document.getElementById(columnChartId), `<p class="text-center"><b> ${$filter('getLabel')(indicatorInfRow.ChartTitle)}</b></p>`, dateCats, chartSeries, firstObj.unit.capitalize(), firstObj.ReportType);      
    }

    function createStackedChart(chartTitle, chartDiv, categories, chartSeries, measurementUnit) {
      let minVal = 0;
      chartSeries.map((el) => {
        el.data.map((d) => {
          minVal = minVal === 0 ? d : minVal;
          if (d < minVal)
            minVal = d;
        });
      });
      Highcharts.chart(chartDiv, {
        chart: {
          backgroundColor: '#000',
          borderColor: '#3a3a3a',
          borderRadius: 4,
          borderWidth: 1,
          type: 'column'
        },
        watermark: {
          yAxis: 290,
          xAxis:10
        },
        title: {
          text: `<p class="defualt-color">${chartTitle}<button style="position:relative;${lang === '1' ? 'left' : 'right'}:2em;" class="btn btn-xs" id="btn${chartDiv}">${$filter('getLabel')('lblHideLegend')}</button></p>`,
            useHTML: true,
            style: {
                color: '#ADADAD'
            }
        },
        xAxis: {
            type: 'datetime',
            gridLineColor: '#3a3a3a',
            lineColor: '#3a3a3a',
          labels: {
            formatter: function () {
              return Highcharts.dateFormat('%m/%Y', this.value);
            },

            style: {
              color: '#ADADAD'
            }
          },
          categories: categories
        },
        yAxis: {
            min: minVal,
            gridLineColor: '#3a3a3a',
            lineColor: '#3a3a3a',
          lineWidth: 1,
          title: {
            text: measurementUnit
          },
          labels: {
            formatter: function () {
              return $filter('AbbrOrWNOrDec')(this.value, 2);
            },
            style: {
              color: '#ADADAD',
            }
          },
          showFirstLabel: true,
          stackLabels: {
            enabled: false,
            style: {
              fontWeight: 'bold',
              color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
          }
        },
        legend: {
          align: 'center',
          x: +33,
          verticalAlign: 'right',
          y: 25,
          floating: true,
          backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
          borderColor: '#CCC',
          borderWidth: 1,
          shadow: false
        },
        tooltip: {
          formatter: function () {
            return `
                  <p class="defualt-color"><strong> ${this.series.name}</strong ></p>
									<p class="defualt-color"><strong> ${$filter('getLabel')('lblYear')}</strong >: <span class="span-label">${Highcharts.dateFormat('%e %b %Y', this.x)}</span> </p>
									<p class="defualt-color"><strong> ${$filter('getLabel')('lblValue')}</strong >: <span class="span-label">${$filter('AbbrOrWNOrDec')(this.y, 2)} ${measurementUnit}</span> </p>
									`;
            },
            style: {
                color: '#ADADAD'
            },
          useHTML: true
        },
        plotOptions: {
          column: {
            stacking: 'normal',
            dataLabels: {
              enabled: false,
              color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
          }
        },
        series: chartSeries
      }, function (chart) {
        $(`#btn${chartDiv}`).on('click',function (e) {
          var legend = chart.legend;
          let that = $(this);
          if (legend.display) {
            legend.group.hide();
            legend.box.hide();
            legend.display = false;
            that.text($filter('getLabel')('lblShowLegend'));
          } else {

            legend.group.show();
            legend.box.show();
            legend.display = true;
            that.text($filter('getLabel')('lblHideLegend'));           
          }
        });

        });
    }

    function createPieChart(chartTitle, chartDiv, seriesData, measurementUnit) {

      Highcharts.chart(chartDiv, {
        chart: {
          backgroundColor: '#000',
          borderColor: "#3a3a3a",
          borderRadius: 1,
          borderWidth: 1,
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        watermark: {
          yAxis: 290
        },
        title: {
            text: chartTitle,
            style: {
                color: '#ADADAD'
            }
        },
        tooltip: {
          formatter: function () {
                return `<span class="text-normal defualt-color">${this.key}</span>:<span class="span-label bold defualt-color"> ${$filter('number')(this.percentage, 2)}%</span>`;
          },
          style: {
              width: '100px',
              color: '#ADADAD'
          },
          useHTML: true
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
              enabled: true,
              formatter: function () {
                return `<span class="text-normal">${this.key}</span>: <span class="span-label bold"> ${$filter('number')(this.percentage, 2)}%</span>`;
              },
              style: {
                width:'100px'
              },
              useHTML: true
            },

          }
        },
        series: [{
          type: 'pie',
          name: 'Pie Chart',
          data: seriesData
        }]
      });
    }

    function createChartsDivs() {
      let uniqueFacts = indicatorData.map((f) => { return f.ESDFact; }).uniqueArray();
      uniqueFacts.map((fact) => {
        let tempFact = indicatorData.map((el) => { if (el.ESDFact === fact) return el; }).clean().firstOrDefault();
        $('.chart-holder').append(`
        <div class="col-md-6 margin-bottom-30">   
           <div id="IndicatoryChart${tempFact.ESDFactID}" data-fact-id="${tempFact.ESDFactID}" class="indicator-by-country-chart const-ltr"></div>              
          </div>
        </div>
      `);
      });
    }
    function processCharts(detailData) {
      
      angular.forEach(document.getElementsByClassName('indicator-by-country-chart'), function (el) {
        if (el.attributes['data-fact-id'] === undefined) return;
        let factId = parseInt(el.attributes['data-fact-id'].value);
        let currentFact = detailData.map((el) => { if (el.ESDFactID === factId) return el; }).clean().firstOrDefault();


        if (currentFact.ChartType.toLocaleLowerCase().indexOf('line') > -1) {
        let cats = detailData.map((el) => { if (el.ESDFactID === factId && el.CValue !== 0) return parseInt(el.AsOfDate.slice(6, -2)); }).clean().uniqueArray().sortAsc();
        let chartData = [];
        cats.map((y) => {
          chartData.push(detailData.map((el) => { if (parseFloat(el.CValue) !== 0 && parseInt(el.AsOfDate.slice(6, -2)) === y && el.ESDFactID === factId) return { x: parseInt(el.AsOfDate.slice(6, -2)), y: el.CValue, title: el.ESDFact } }).clean().firstOrDefault());
        });   

        createLineChart(el, `<p class="text-center"><b> ${currentFact.ESDFact}</b></p>`, cats, chartData, 'line', currentFact.unit.capitalize(), currentFact.ReportType);
        }

        if (currentFact.ChartType.toLocaleLowerCase().indexOf('column') > -1) {
          let chartSeries = [];
          let cats = detailData.map((el) => { if (el.ESDFactID === factId && el.CValue !== 0) return parseInt(el.AsOfDate.slice(6, -2)); }).clean().uniqueArray().sortAsc();
          let chartData = [];
          cats.map((y) => {
            chartData.push(detailData.map((el) => { if (parseFloat(el.CValue) !== 0 && parseInt(el.AsOfDate.slice(6, -2)) === y && el.ESDFactID === factId) return { x: parseInt(el.AsOfDate.slice(6, -2)), y: el.CValue, title: el.ESDFact } }).clean().firstOrDefault());
          });
          let firstObj = detailData.map((el) => { if (el.ESDFactID === factId) return el; }).clean().firstOrDefault();
          chartSeries.push({
            name: currentFact.ESDFact,
            type: 'column',
            data: chartData.map((d) => { return d.y; })
          });
          createColumnChart(el, `<p class="text-center"><b> ${currentFact.ESDFact}</b></p>`, cats, chartSeries, firstObj.unit.capitalize(), firstObj.ReportType);
        }

      });
    }



    function processLineCharts(chartType, detailData) {
      angular.forEach(document.getElementsByClassName('indicator-by-country-chart'), function (el) {
        if (el.attributes['data-fact-id'] === undefined) return;
        let factId = parseInt(el.attributes['data-fact-id'].value);
        let currentFact = detailData.map((el) => { if (el.ESDFactID === factId) return el; }).clean().firstOrDefault();



        let cats = detailData.map((el) => { if (el.ESDFactID === factId && el.CValue !== 0) return parseInt(el.AsOfDate.slice(6, -2)); }).clean().uniqueArray().sortAsc();
        let chartData = [];
        cats.map((y) => {
          chartData.push(detailData.map((el) => { if (parseFloat(el.CValue)!== 0 && parseInt(el.AsOfDate.slice(6, -2)) === y && el.ESDFactID === factId) return { x: parseInt(el.AsOfDate.slice(6, -2)), y: el.CValue, title: el.ESDFact } }).clean().firstOrDefault());
        });
        let firstObj = detailData.map((el) => { if (el.ESDFactID === factId) return el; }).clean().firstOrDefault(); 
        createLineChart(el, `<p class="text-center"><b> ${currentFact.ESDFact}</b></p>`, cats, chartData, chartType, firstObj.unit.capitalize(),firstObj.ReportType);
      });
    }

    function createLineChart(element, title, chartCats, chartData, chartType, unit,reportType) {
      let minVal = chartData.map((el) => { return el.y; }).sortAsc().firstOrDefault();
      let minLength = chartData.map((el) => { if (el.y === minVal) return el.y; }).clean().length;
      let interval = 30 * 24 * 3600 * 1000;
      switch (reportType) {
        case 'Quarterly': {
          interval = 90 * 24 * 3600 * 1000;
          break;
        }
        case 'Monthly': {
          interval = 30 * 24 * 3600 * 1000;
          break;
        }
        case 'Yearly': {
          interval = 360 * 24 * 3600 * 1000;
        }
      }

      Highcharts.chart(element, {
        chart: {
          type: chartType,
          borderColor: "#3a3a3a",
          borderRadius: 1,
          borderWidth: 1,
          backgroundColor: '#000',
          panning: false,
          marginBottom: 60
        },
        title: {
          align: 'center',
          floating: false,
          margin: 15,
          style: {color: '#ADADAD'},
          text: '',
          useHTML: true
        },
        watermark: {
          yAxis: 290,
          xAxis: 10
        },
        subtitle: {
          align: 'center',
          floating: false,
          style: { "color": "#666666" },
          text: title,
          useHTML: true,
        },
        yAxis: [{
          gridLineColor: '#3a3a3a',
          min: minLength > 1 ? undefined : minVal,
          lineColor: '#3a3a3a',
          lineWidth: 1,
          title: unit,
          className: 'ltr',
          labels: {
            formatter: function () {
              let factor = parseInt(this.value) === parseFloat(this.value) ? 0 : 2;
              return $filter('AbbrOrWNOrDec')(this.value, factor);
            },
            style: {
              color: '#ADADAD',
            }
          },
          showFirstLabel: true
        }],
        legend: {
          enabled: false
        },
        xAxis: {
          //ordinal: true,  
          minTickInterval: interval,
          type: 'datetime',
          labels: {
            formatter: function () {              
              return Highcharts.dateFormat('%m/%Y', this.value);
            },
              gridLineColor: '#3a3a3a',
              lineColor: '#3a3a3a',
            style: {
              color: '#ADADAD'
            }
          },
          categories: chartCats
        },
        credits: {
          enabled: false
        },
        tooltip: {
          style: {
            opacity: '1.0'
          },
          formatter: function () {        
            let factor = parseInt(this.y) === parseFloat(this.y) ? 0 : 2;
              return `<strong class="defualt-color">${$filter('getLabel')('lblDate')}</strong> : <span class="span-label defualt-color">${Highcharts.dateFormat('%e %b %Y', this.x)} </span><br/>
                    <strong class="defualt-color">${$filter('getLabel')('lblValue')}</strong> : <span class="span-label defualt-color">${$filter('AbbrOrWNOrDec')(this.y, factor)} ${unit}</span>`;
            },
            gridLineColor: '#3a3a3a',
            lineColor: '#3a3a3a',
        },
        series: [{
          name: 'cap indices',
          data: chartData,
          dataLabels: {
            enabled: true,
            formatter: function () {
              let factor = parseInt(this.y) === parseFloat(this.y) ? 0 : 2;
              return $filter('number')(this.y, factor);
            },
            useHTML: true
          }
        }]
      });
    }

    function processColumnCharts(chartType, detailData) {
      
      angular.forEach(document.getElementsByClassName('indicator-by-country-chart'), function (el) {
        let chartSeries = [];
        if (el.attributes['data-fact-id'] === undefined) return;
        let factId = parseInt(el.attributes['data-fact-id'].value);
        let currentFact = detailData.map((el) => { if (el.ESDFactID === factId) return el; }).clean().firstOrDefault();
        let cats = detailData.map((el) => { if (el.ESDFactID === factId && el.CValue !== 0) return parseInt(el.AsOfDate.slice(6, -2)); }).clean().uniqueArray().sortAsc();
        let chartData = [];
        cats.map((y) => {
          chartData.push(detailData.map((el) => { if (parseFloat(el.CValue) !== 0 && parseInt(el.AsOfDate.slice(6, -2)) === y && el.ESDFactID === factId) return { x: parseInt(el.AsOfDate.slice(6, -2)), y: el.CValue, title: el.ESDFact } }).clean().firstOrDefault());
        });
        let firstObj = detailData.map((el) => { if (el.ESDFactID === factId) return el; }).clean().firstOrDefault();
        chartSeries.push({
          name: currentFact.ESDFact,
          type: 'column',
          data: chartData.map((d) => { return d.y; })
        });
        createColumnChart(el, `<p class="text-center"><b> ${currentFact.ESDFact}</b></p>`, cats, chartSeries, firstObj.unit.capitalize(), firstObj.ReportType);
      });
    }

    function createColumnChart(element, title, chartCats, chartSeries, unit, reportType) { 
      let minVal = 0;
      chartSeries.map((el) => {
        el.data.map((d) => {
          minVal = minVal === 0 ? d : minVal;
          if (d < minVal)
            minVal = d;
        });
      });

      Highcharts.chart(element, {
        chart: {
          borderColor: "#3a3a3a",
          borderRadius: 1,
          borderWidth: 1,
          backgroundColor: "#000",
          panning: false,
          marginBottom: 60
        },
        title: {
          align: 'center',
          floating: false,
          margin: 15,
          style: {color: "#ADADAD"},
          text: '',
          useHTML: true
        },
        watermark: {
          yAxis: 290,
          xAxis: 10
        },
        subtitle: {
          align: 'center',
          floating: false,
          style: { "color": "#666666" },
          text: title,
          useHTML: true,
        },
        yAxis: [{
          gridLineColor: '#3a3a3a', 
          min:minVal,
          lineColor: '#3a3a3a',
          lineWidth: 1,
          title: {
            text: unit
          },
          labels: {
            formatter: function () {
              return $filter('AbbrOrWNOrDec')(this.value, 2);
            },
            style: {
              color: '#ADADAD',
            }
          },
          showFirstLabel: true
        }],
        legend: {
          enabled: false
        },
        xAxis: {
          //ordinal: true,  
          //minTickInterval: interval,
            type: 'datetime',
            gridLineColor: '#3a3a3a',
            lineColor: '#3a3a3a',
          labels: {
            formatter: function () {             
              return Highcharts.dateFormat('%m/%Y', this.value);
            },
            style: {
              color: '#ADADAD'
            }
          },
          categories: chartCats
        },
        credits: {
          enabled: false
        },
        tooltip: {
          style: {
            opacity: '1.0'
          },
          formatter: function () {           
              return `<p class="defualt-color"><strong>${this.point.series.name}</strong></p>
                    <p class="defualt-color"><strong>${$filter('getLabel')('lblDate')}</strong> : <span class="span-label">${Highcharts.dateFormat('%e %b %Y', this.x)} </span></p>
                    <p class="defualt-color"><strong>${$filter('getLabel')('lblValue')}</strong> : <span class="span-label">${$filter('AbbrOrWNOrDec')(this.y, 2)} ${unit}</span></p>`;
            },
            style: {
                color: '#ADADAD'
            }
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0,
            dataLabels: {
              enabled: true,
              formatter: function () {               
                return $filter('AbbrOrWNOrDec')(this.y, 2);
              },
              useHTML: true
            }
          }
        },
        series: chartSeries      
      });
    }

  }])
  ;