Source: directives/graficos/chartTreeMap.js

/**
 * @ngdoc directives
 * @name chartTreeMap
 * @module s4c.directives.graficos.chartTreeMap
 *
 * @description Componente para demonstração de gráficos no formato de quadrados
 *
 *
 */
(function () {
    'use strict';

    chartTreeMapController.$inject = [
        '$scope',
        '$timeout',
        'Preset',
        'DashboardService',
        '$http',
        '$q',
        'API_ENDPOINT',
        '$mdDialog'
    ];

    function chartTreeMapController(
        $scope,
        $timeout,
        Preset,
        DashboardService,
        $http,
        $q,
        API_ENDPOINT,
        $mdDialog) {

        $scope.res = $scope.$root.res;
        $scope.canvas = {};
        $scope.canvas.id = guidGenerator() + '_chart';

        $scope.externo = guidGenerator();
        $scope.menu_principal = guidGenerator();
        $scope.menu_back = guidGenerator();
        $scope.div_menu_back = guidGenerator();
        $scope.chart_container = guidGenerator();
        $scope.idChartTree = guidGenerator();
        $scope.div_tree_map = guidGenerator();
        $scope.div_tree_map_filtro = guidGenerator();
        $scope.div_chart_bar_1 = guidGenerator();
        $scope.div_chart_bar_2 = guidGenerator();
        
        function guidGenerator() {
            var S4 = function() {
               return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
            };
            return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
        }

        /**
         * Método responsável pela montagem do gráfico TreeMap
         * 
         * @method dadosTreeMap
         *
         * @param filter {Object} Dados para filtrar a consulta
         * 
         *
         * @returns {Promise} Promise que resolve com as informações sobre o
         * relatório
         */      
        function dadosTreeMap(filter) {
            var deferred = $q.defer();
            $http.post(API_ENDPOINT + 'relatorio/sp/filter', filter)
                .then(function (res) {
                    if (typeof res.data === 'object') {
                        deferred.resolve(res.data);
                    } else {
                        deferred.reject();
                    }
                }, function (err) {
                    deferred.reject(err);
                });
            return deferred.promise;
        }

        /**
         * Busca os Orgãos disponíveis para serem exibidos no gráfico
         *
         * @method orgaos
         * 
         * 
         * @returns {Promise} Promise que resolve com as informações sobre o
         * Orgãos
         */          
        function orgaos() {
            var deferred = $q.defer();
            $http.get(API_ENDPOINT + 'relatorio/orgaos')
                .then(function (res) {
                    if (typeof res.data === 'object') {
                        deferred.resolve(res.data);
                        $scope.orgaos=res.data;
                    } else {
                        deferred.reject();
                    }
                }, function (err) {
                    deferred.reject(err);
                });
            return deferred.promise;
        }
        
        orgaos();
        
        /**
         * Responsável pela montagem do gráfico TreeMap
         * 
         * @method treemapRender
         *
         * @param dados {String} Dados para ser usado no gráfico
         *
         */          
        function treemapRender(dados) {
        	 exibirTreeMap();
        	
        	 var divId = $scope.idChartTree;

            $('#'+$scope.externo).html('').append(`<div id='${divId}' class="chartTreemap"></div>`)

            var paletteColor = []

            for (let i = 0; i < dados.length; i++) {
                if (dados[i].color > 0.9) {
                    paletteColor.push((dados[i].color = "#008c48"));
                } else if (dados[i].color > 0.75) {
                    paletteColor.push((dados[i].color = "#FFdd00"));
                } else if (dados[i].color < 0.75) {
                    paletteColor.push((dados[i].color = "#FF1e00"));
                } else {
                    paletteColor.push((dados[i].color = "#FF1e00"));
                }
            }
            let myConfig = {
                "graphset": [{
                    "type": "treemap",
                    options: {
                        box: {
                            fontSize: 13,
                            padding: "5px",
                            'font-color': "black",
                            "shadow": 1,
                            borderWidth: 1
                        },
                        'thousands-separator': ".",
                        'decimals-separator': ",",
                        decimals: "2",
                        'aspect-type': "palette",
                        text: "%v widgets",
                        palette: paletteColor,
                        'tooltip-box': {
                            'font-color': "black",
                            'font-size': 13,
                            'font-style': "normal",
                            padding: "20%",
                            'border-radius': "5%",

                        },
                    },
                    "series": dados
                }
                ]
            };

            zingchart.render({
                id: divId,
                data: myConfig,
                height: "100%",
                width: "100%"
            });

            if($scope.orgao != null && $scope.orgao.length > 1){ 
	            zingchart.bind(divId, 'node_click', function(e) {
	               var subpref = _.find($scope.orgaos, function (orgao) {
	                   //return orgao.descricao.includes(e.text );
	                   return orgao.descricao.includes(e.path[0].text );
	               });
	               
	               var orgaos_ = [];
	               orgaos_.push(subpref.codigo);
	               
	               $scope.chartDataSubPref(orgaos_, e.path[0].text);
	               
	               $scope.tituloModulo = e.path[0].text;
	               
	            });
            }
            
            $('#'+divId).css('overflow','visible');
            
            Preset.salvar();
            setInterval( () => $('[title="JavaScript Charts by ZingChart"]').hide() , 3000);

        }
        
	    /**
	     * Controle de exibição ou ocultação de divs e botões dos gráficos
	     * 
	     * @method exibirTreeMap
	     *
	     *
	     */          
        function exibirTreeMap(){
	   		 $("#"+$scope.externo).show();
	   		 if($scope.orgao.length == 1){
	   			$("#"+$scope.menu_principal).hide();
                   $("#"+$scope.div_menu_back).show();
                   $('.titleValorTreeMap').show();
	   			$("#"+$scope.div_tree_map).show();
	   			$("#"+$scope.div_tree_map_filtro).show();
	   			
	   		 }else{
	   			$("#"+$scope.menu_principal).show();
                   $("#"+$scope.div_menu_back).hide();
                   $('.titleValorTreeMap').show();
	   			$("#"+$scope.div_tree_map).hide();
	   			$("#"+$scope.div_tree_map_filtro).hide();
	   			
	   		 }
	    	 $("#"+$scope.chart_container).hide();
        }
        
	    /**
	     * Controle de exibição ou ocultação de divs e botões dos gráficos
	     * 
	     * @method ocultarTreeMap
	     *
	     *
	     */           
        function ocultarTreeMap(){
	         //zingchart.exec($scope.idChartTree, 'destroy');
	         treeMapDestroy();
	       	 $("#"+$scope.externo).hide();
	    	 $("#"+$scope.chart_container).show();
	    	 $("#"+$scope.menu_principal).hide();
	    	 $("#"+$scope.div_menu_back).show();
             $("#"+$scope.div_chart_bar_1).show();
             $("#"+$scope.div_chart_bar_2).show();
             $('.titleValorTreeMap').hide();
	    	 $("#"+$scope.div_tree_map).hide();
	    	 $("#"+$scope.div_tree_map_filtro).hide();
	    	 
       	   $('[data-tab='+$scope.canvas.id+'mensal]').addClass('active');   		
    	   $('[data-tab='+$scope.canvas.id+'anual]').removeClass('active');

        }
        
        /**
         * Volta as informações do gráfico para o momento inicial
         * 
         * @method executeOnBack
         *
         * 
         *
         */          
        $scope.executeOnBack = function () {
        	$('[data-tab='+$scope.canvas.id+'orgao]').show();
            $('[data-tab='+$scope.canvas.id+'funcao]').removeClass('active');
            $('[data-tab='+$scope.canvas.id+'orgao]').addClass('active');
    		iniciarTreeMap();
        }
        
	    /**
	     * Faz a busca dos dados referente aos últimos 12 meses
	     * 
	     * @method chartDataSubPref
	     *
	     * @param orgaos {Array} Orgãos que serão exibidos no gráfico
	     * @param subpref {String} Nome do Orgão que será exibido no gráfico  
	     *
	     */           
        $scope.chartDataSubPref = function (orgaos, subpref) {
        	ocultarTreeMap()
        	 
        	 /*
        	 $('#'+$scope.menu_back).on('click', function () {
            	$('[data-tab='+$scope.canvas.id+'orgao]').show();
                $('[data-tab='+$scope.canvas.id+'funcao]').removeClass('active');
                $('[data-tab='+$scope.canvas.id+'orgao]').addClass('active');
        		 iniciarTreeMap();
              });*/
        	         	
        	 var orgaos_ = [];
             for(var index in orgaos){
                 if(typeof orgaos[index] == 'number'){
                         var orgaolocal = orgaos[index];
                         orgaos_.push(orgaolocal.toString());
                 }else{
                         var orgaolocal = orgaos[index];
                         orgaos_.push(orgaolocal);
                 }
             }

            $scope.orgao = orgaos_;
            
            let data = new Date();

            var time = new Date();
            var outraData = new Date();
            outraData.setDate(time.getDate() - 365); // diminui 365 dias

            $scope.dataInicio = (outraData.getMonth() + 1)+"/"+outraData.getFullYear()
            $scope.dataFim = ("0" + (data.getMonth() + 1)).slice(-2)+"/"+(data.getFullYear()).toString();

            $scope.anoInicio = outraData.getFullYear().toString()
            $scope.anoFim = data.getFullYear().toString()
            
            let relatorioAtual = {
                "relatorio": "mensal",
                "dataInicio": moment($scope.dataInicio, 'MM/YYYY').format('YYYYMM'),
                "dataFim": moment($scope.dataFim, 'MM/YYYY').format('YYYYMM'),
                "orgaos" : orgaos_
            };
            
            let parametrosDaConsulta = relatorioAtual
            
            $http.post(API_ENDPOINT + 'relatorio/sp/filter', parametrosDaConsulta)
                .then(function (res) {
                    if (typeof res.data === 'object') {
                        var dataAno = res.data;
                        
                        chartDataDestroy();
                        chartBar(dataAno, subpref);
                    } else {
                        console.log("Erro na consulta");
                    }
                }, function (err) {
                    console.log(err);
                });

        }
        
        /**
         * Método responsável pela montagem do gráfico
         * 
         * @method chartBar
         *
         * @param dados {Object}  Dados para montagem do gráfico
         * @param titulo {String} Título que será exibido no gráfico
         *
         */         
        function chartBar(dados, titulo) {

            var dataLabels = []
            var labelChart = []
            for (let i = 0; i < dados.length; i++) {
                switch (dados[i].text) {

                    case "JANUARY":
                        labelChart[i] = "Janeiro"
                        break;
                    case "FEBRUARY":
                        labelChart[i] = "Fevereiro"
                        break;
                    case "MARCH":
                        labelChart[i] = "Março"
                        break;
                    case "APRIL":
                        labelChart[i] = "Abril"
                        break;
                    case "MAY":
                        labelChart[i] = "Maio"
                        break;
                    case "JUNE":
                        labelChart[i] = "Junho"
                        break;
                    case "JULY":
                        labelChart[i] = "Julho"
                        break;
                    case "AUGUST":
                        labelChart[i] = "Agosto"
                        break;
                    case "SEPTEMBER":
                        labelChart[i] = "Setembro"
                        break;
                    case "OCTOBER":
                        labelChart[i] = "Outubro"
                        break;
                    case "NOVEMBER":
                        labelChart[i] = "Novembro"
                        break;
                    case "DECEMBER":
                        labelChart[i] = "Dezembro"
                        break;
                    default:
                        labelChart[i] = dados[i].text;
                        break;
                }
                dataLabels.push(labelChart[i])
            }

            var liquidado = []
            for (let i = 0; i < dados.length; i++) {
                liquidado.push(dados[i].valorLiquidado)
            }

            var empenhoLiquidado = []
            for (let i = 0; i < dados.length; i++) {
                empenhoLiquidado.push(dados[i].valorEmpenhadoLiquido)
            }

            var disponivel = []
            for (let i = 0; i < dados.length; i++) {
                disponivel.push(dados[i].valorDisponivel)
            }
            
            carregarCanvasOnclinck();
            
	        /**
	         * Faz o gerenciamento do click nas barras do gráfico
	         * 
	         * @method carregarCanvasOnclinck
	         *
	         *
	         */                
            function carregarCanvasOnclinck(){
            	var canvas = document.getElementById($scope.canvas.id);
            	if(canvas != null){
            		
                  $('[data-tab='+$scope.canvas.id+'anual]').on('click', function () {
                      if($("#"+$scope.chart_container).is(":visible")){
                    	  $('[data-tab='+$scope.canvas.id+'mensal]').removeClass('active');
                    	  $('[data-tab='+$scope.canvas.id+'anual]').addClass('active');
                   	   $("#"+$scope.menu_principal).hide();
                   	   //$scope.buscar('ano', $scope.orgao)
                   	    
                   	     $("#" + "div" + $scope.canvas.id+'anual').addClass('active');
                   	     $("#" + "div" + $scope.canvas.id+'mensal').removeClass('active');
                   	     
                      }
                  });
 	                     
                	$('[data-tab='+$scope.canvas.id+'mensal]').on('click', function () {
                       if($("#"+$scope.chart_container).is(":visible")){
                    	   $("#"+$scope.menu_principal).hide();
                    	   $('[data-tab='+$scope.canvas.id+'mensal]').addClass('active');   		
                    	   $('[data-tab='+$scope.canvas.id+'anual]').removeClass('active');
                    	   //$scope.buscar('periodo', $scope.orgao)
                    	   
                    	   $("#" + "div" + $scope.canvas.id+'anual').removeClass('active');
                   	       $("#" + "div" + $scope.canvas.id+'mensal').addClass('active');
                    	   
                       }
 	             });    
                	
            		canvas.onclick = function(evt) {
            		   
                       var activePoints =  $scope.chartData.getElementsAtEvent(evt);
                       if(activePoints.length > 0){
   	                    var chartData = activePoints[0]['_chart'].config.data;
   	                    $scope.periodo = activePoints[0]['_view'].label;
   	                    
   	                    var res = $scope.periodo.split("/");
   	                    $scope.periodo = res[0]+"/"+res[1];
   	                    
	   	                if($scope.orgao.length == 1){
	   	                	treemap("funcao", $scope.periodo)
	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').hide();
	   	                	$('[data-tab='+$scope.canvas.id+'funcao]').addClass('active');
	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').removeClass('active');
	   	                	$("#"+$scope.div_tree_map).show();
	   	                	$("#"+$scope.div_tree_map_filtro).show();
	   	                	
                            $("#"+$scope.div_chart_bar_1).hide();
                            $("#"+$scope.div_chart_bar_2).hide();
	   	                }else{
	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').show();
	   	                	$('[data-tab='+$scope.canvas.id+'funcao]').removeClass('active');
	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').addClass('active');
	   	                	treemap("orgao", $scope.periodo)
	   	                }
                       }
                     };
            	}else{
            		$timeout(function () { carregarCanvasOnclinck(); }, 3000);
            	}
            	
            }
            
        /**
         * Obtem a lista de orgãos que foram selecionados para serem exibidos no gráfico
         * 
         * @method getOrgaosFace
         *
         *
         */                
           function getOrgaosFace(){
        	
        	var modulos = _.filter(Preset.config.preset.PresetModulos, function (mod) {
                return mod.Face != null && mod.Face.id == $scope.faceId;
            });
        	
        	let orgaos = modulos[0].Face.extras[0].orgaos; 
        	
        	var orgaos_ = [];
            for(var index in orgaos){
                 if(typeof orgaos[index] == 'number'){
                         var orgaolocal = orgaos[index];
                         orgaos_.push(orgaolocal.toString());
                 }else{
                         var orgaolocal = orgaos[index];
                         orgaos_.push(orgaolocal);
                 }
            }
            
            return orgaos_;
        }
            
	        /**
	         * Faz a busca dos dados do relatório baseado nos dados passados
	         * 
	         * @method buscar
	         *
	         * @param tipo {String}  Tipo de relatorio
	         * @param orgaos {Array} Lista de orgãos que serão exibidos no gráfico
	         *
	         */             
            $scope.buscar = function (tipo, orgaos) {
            	
			var orgaos_;
        	
        	if(orgaos != null){
        		orgaos_ = orgaos;
        	}else {
        		orgaos_ =  $scope.orgao; //getOrgaosFace();
        	}	

                let relatorioPeriodo = {
                    "relatorio": "mensal",
                    "dataInicio": moment($scope.dataInicio, 'MM/YYYY').format('YYYYMM'),
                    "dataFim": moment($scope.dataFim, 'MM/YYYY').format('YYYYMM'),
                    "orgaos" : orgaos_
                };
                //console.log(relatorioPeriodo)

                let relatorioAnual = {
                    "relatorio": "anual",
                    "anoInicio": moment($scope.anoInicio, 'YYYY').format('YYYY'),
                    "anoFim": moment($scope.anoFim, 'YYYY').format('YYYY'),
                    "orgaos" : orgaos_
                }

                //console.log(relatorioAnual)

                let parametrosDaConsulta

                switch (tipo) {
                    case "periodo":
                        parametrosDaConsulta = relatorioPeriodo;
                        break;
                    case "ano":
                        parametrosDaConsulta = relatorioAnual;
                        break;
                    default:
                        let data = new Date()

                        var time = new Date();
                        var outraData = new Date();
                        outraData.setDate(time.getDate() - 365); // diminui 365 dias
                        //console.log("Ano =" + outraData.getFullYear() + "Mes =" + (outraData.getMonth() + 1))

                        //$scope.dataInicio = "01/"+(data.getFullYear()).toString();
                        $scope.dataInicio = (outraData.getMonth() + 1)+"/"+outraData.getFullYear()
                        $scope.dataFim = ("0" + (data.getMonth() + 1)).slice(-2)+"/"+(data.getFullYear()).toString();
            
                        $scope.anoInicio = outraData.getFullYear().toString()
                        $scope.anoFim = data.getFullYear().toString()
                        
                        let relatorioAtual = {
                            "relatorio": "mensal",
                            "dataInicio": moment($scope.dataInicio, 'MM/YYYY').format('YYYYMM'),
                            "dataFim": moment($scope.dataFim, 'MM/YYYY').format('YYYYMM'),
                            "orgaos" : orgaos_
                        };
                        //console.log(relatorioAtual)
                        parametrosDaConsulta = relatorioAtual
                        break;
                }

                $http.post(API_ENDPOINT + 'relatorio/sp/filter', parametrosDaConsulta)
                    .then(function (res) {
                        if (typeof res.data === 'object') {
                            var dataAno = res.data;
                            //console.log(JSON.stringify(dataAno));
                            chartDataDestroy()
                            chartBar(dataAno, $scope.tituloModulo);
                        } else {
                            //console.log("Erro na consulta");
                        }
                    }, function (err) {
                        //console.log(err);
                    });


            }
            
	        /**
	         * Inicializa o gráfico de barras
	         * 
	         * @constructs Chart
	         *
	         *
	         */   
            $scope.chartData = new Chart(document.getElementById($scope.canvas.id).getElementsByTagName("canvas"), {
                type: 'bar',
                data: {
                    labels: dataLabels,
                    datasets: [
                        {
                            label: "Valor Liquidado",
                            backgroundColor: ["#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd", "#3e95cd"],
                            data: liquidado
                        },
                        {
                            label: "Valor Empenhado",
                            backgroundColor: ["#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2", "#8e5ea2"],
                            data: empenhoLiquidado
                        },
                        {
                            label: "Valor Disponivel",
                            backgroundColor: ["#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f", "#3cba9f"],
                            data: disponivel
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    tooltips: {
                        fontSize: 16,
                        callbacks: {
                            label: function (tooltipItems, data) {
                                let value = tooltipItems.yLabel
                                return 'R$ ' + value.toLocaleString('pt-BR');
                            }
                        }
                    },
                    legend: {
                        display: true,
                        labels: {
                            fontColor: "white",
                            fontSize: 14
                        }
                    },
                    title: {
                        display: true,
                        fontColor: "white",
                        fontSize: 14,
                        text: titulo,
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                fontColor: "white",
                                beginAtZero: true,
                                fontSize: 14,
                                callback: function (value, index, values) {
                                    var suffixes = ["", " mil", " Mi", " Bi", " T"];
                                    var suffixNum = Math.floor(("" + value).length / 3);
                                    var shortValue = parseFloat((suffixNum != 0 ? (value / Math.pow(1000, suffixNum)) : value).toPrecision(2));
                                    if (shortValue % 1 != 0) {
                                        var shortNum = shortValue.toFixed(1);
                                    }
                                    return 'R$ ' + shortValue + suffixes[suffixNum];
                                }
                            }
                        }],
                        xAxes: [{
                            ticks: {
                                fontColor: "white",
                                fontSize: 16,
                            }
                        }]
                    }
                }
            });
        }
        
        /**
         * Destroy o gráfico de barras atual para que possa ser criado um novo
         * 
         * @method chartDataDestroy
         *
         *
         */         
        function chartDataDestroy(){
    		try{
    			if ($scope.chartData != null) {		
    				$scope.chartData.destroy();
    			}
    		}
    		catch(e){
    			console.log("");
    		}
        }
        
        /**
         * Destroy o gráfico de quadrados atual para que possa ser criado um novo
         * 
         * @method treeMapDestroy
         *
         *
         */          
        function treeMapDestroy(){
        	try{
        		zingchart.exec($scope.idChartTree, 'destroy');
        	}
        	catch(e){
        		console.log("");
        	}
        }

        /**
         * Responsável pela montagem dos dados do gráfico TreeMap
         * 
         * @method treemap
         *
         * @param tipo {String} Tipo de relatório
         * @param periodo {Date} Datas de início e fim para apuração dos dados
         *
         */  
        function treemap(tipo, periodo) {
        	chartDataDestroy();
        	
            var anoPeriodo = (moment(periodo, 'MM/YYYY').format('YYYY'))
            var mesPeriodo = (moment(periodo, 'MM/YYYY').format('MM'))
            
            var orgaos_ = [];
            for(var index in $scope.orgao){
            	if(typeof $scope.orgao[index] == 'number'){
            		var orgaolocal = $scope.orgao[index];
            		orgaos_.push(orgaolocal.toString());	
            	}else{
            		var orgaolocal = $scope.orgao[index];
            		orgaos_.push(orgaolocal);	
            	}
            }
            
            $scope.orgao = orgaos_;
            
            let filtro = {
                    "filtro": {
                        "anoDotacao": anoPeriodo,
                        "mesDotacao": mesPeriodo,
                        "orgaos": orgaos_
                    },
                    "agrupar": tipo.substr(0, 3)
                }

            dadosTreeMap(filtro).then(function (data) {
                var dataOrgao = data.map(
                    obj => {
                        return {
                            "text": obj.text,
                            "value": obj.valorDisponivel,
                            "color": ((obj.valorLiquidado * 12) / (obj.valorDisponivel * mesPeriodo))
                        }
                    }
                );
                
            let data_corrente = new Date();
            let mesCorrente = ("0" + (data_corrente.getMonth() + 1)).slice(-2);
            let anoCorrente = data_corrente.getFullYear();
                if(data.length == 0 && mesCorrente == mesPeriodo &&  anoCorrente == anoPeriodo){
                $mdDialog
	                    .show($mdDialog.alert()
	                        .title($scope.res('COMUM_AVISO'))
	                        .content($scope.res('SEM_DADOS_PARA_O_MES_CORRENTE'))
	                        .ok($scope.res('COMUM_OK')));
	                        
                	let novoMesConsulta = parseInt(mesPeriodo) - 1;
                	$scope.atual = ("0" + (novoMesConsulta)).slice(-2)+"/"+(anoCorrente);
                	$scope.periodo = $scope.atual;
                	treemap("orgao", $scope.atual);
                	 
                }else if(data.length == 0){
	                $mdDialog
	                    .show($mdDialog.alert()
	                        .title($scope.res('COMUM_AVISO'))
	                        .content($scope.res('SEM_DADOS'))
	                        .ok($scope.res('COMUM_OK')));
                }else{
                	treemapRender(dataOrgao);
                }
                
            });
        }

        /**
         * Inicializa o gráfico de quadrados
         * 
         * @method iniciarTreeMap
         *
         *
         */          
        function iniciarTreeMap(){
        	let data = new Date();
            let time = new Date();
            let outraData = new Date();
            outraData.setDate(time.getDate() - 365); // diminui 365 dias
            $scope.atual = ("0" + (data.getMonth() + 1)).slice(-2)+"/"+(data.getFullYear());
            for (var index in modulos) {
                if ((modulos[index].template == 'app/components/modulos/modulo-chartTreeMap.html' || (modulos[index].Face && modulos[index].Face.template == 'app/components/modulos/modulo-chartTreeMap.html'))) {
                	$scope.orgao = modulos[index].Face.extras[0].orgaos;
                	break;
                }
            }
            
             $("#"+$scope.div_menu_back).hide();
	    	 $("#"+$scope.menu_principal).show();
	    	 treeMapDestroy();
	    	 
            $scope.periodo = $scope.atual;
            treemap("orgao", $scope.atual);
        }
        
        var modulos = Preset.obter().PresetModulos;
        $scope.presetId = Preset.obter().id;

        $timeout(function () {
            for (var index in modulos) {
                if ((modulos[index].template == 'app/components/modulos/modulo-chartTreeMap.html' || (modulos[index].Face && modulos[index].Face.template == 'app/components/modulos/modulo-chartTreeMap.html'))) {

                    //modulos[index].usado = true;
                    modulos[index].index = 1;
                    $scope.modulo = modulos[index];
                    $scope.tituloModulo = modulos[index].Face.name;
                    $scope.orgao = modulos[index].Face.extras[0].orgaos;
                    $scope.faceId = modulos[index].Face.id;
                    
                    var filtro = modulos[index].Face.extras.filtro || {};
		        	 /**
			         * Faz o acesso ao backend que retornará com os dados da busca para serem exibidos no gráfico
			         * 
			         * @method getInformations
			         *
			         * @param filtro {Object}  Dados para filtrar a busca
			         *
			         */                         
                    DashboardService.getInformations(filtro).then(function (result) {

                    	iniciarTreeMap();

                         $('[data-tab='+$scope.canvas.id+'funcao]').on('click', function () {
                            $('[data-tab='+$scope.canvas.id+'funcao]').addClass('active');
	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').removeClass('active');    
                         });

                         $('[data-tab='+$scope.canvas.id+'orgao]').on('click', function () {
                            $('[data-tab='+$scope.canvas.id+'funcao]').removeClass('active');
	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').addClass('active');
                        });
                        
                        
                        //$('[data-tab=buscar]').on('click', function () {
                        $('[data-tab='+$scope.canvas.id+'buscar]').on('click', function () {
                            let hasOrgao = $('[data-tab='+$scope.canvas.id+'orgao]').hasClass( "active" );
                            if(hasOrgao){
                            	treemap("orgao",  $scope.periodo)	
                            }else{
                            	treemap("funcao", $scope.periodo)	
                            }
                        });

                        $('[data-tab=legenda]').on('click', function () {
                            $('#legendaContainer').toggleClass('show')
                            $('#legendaContainer').draggable({ containment: "#"+$scope.externo })
                        });
                        
                        $('[data-tab=legenda_menu_back]').on('click', function () {
                            $('#legendaContainer_menu_back').toggleClass('show')
                            $('#legendaContainer_menu_back').draggable({ containment: "#"+$scope.externo })
                        });
                    });
                    break;
                }
            }
        }, 300);

        angular.extend($scope, {});

    }

    function s4cChartTreeMap() {
        return {
            restrict: 'E',
            templateUrl: 'app/directives/graficos/chartTreeMap.html',
            scope: {},
            controller: chartTreeMapController
        };
    }

    angular.module('s4c.components.chartTreeMap', [])
        .directive('s4cCharttreemap', s4cChartTreeMap);
})();