Source: directives/graficos/chartBar.js

  1. /**
  2.  * @ngdoc directives
  3.  * @name Chartbar
  4.  * @module s4c.directives.graficos.chartBar
  5.  *
  6.  * @description Componente para demonstração de gráficos no formato de barras
  7.  *
  8.  *
  9.  */
  10. (function () {
  11.     'use strict';
  13.     chartBarController.$inject = [
  14.         '$scope',
  15.         '$timeout',
  16.         'Preset',
  17.         'DashboardService',
  18.         '$http',
  19.         '$q',
  20.         'API_ENDPOINT'
  21.     ];
  23.     function chartBarController(
  24.         $scope,
  25.         $timeout,
  26.         Preset,
  27.         DashboardService,
  28.         $http,
  29.         $q,
  30.         API_ENDPOINT) {
  32.     	
  33.         $scope.res = $scope.$root.res;
  34.         $scope.canvas = {};
  35.         $scope.canvas.id = guidGenerator() + '_chart';
  36.         
  37.         $scope.externo = guidGenerator();
  38.         $scope.menu_back = guidGenerator();
  39.         $scope.div_menu_back = guidGenerator();
  40.         $scope.menu_back_1 = guidGenerator();
  41.         $scope.div_menu_back_1 = guidGenerator();
  42.         $scope.chart_container = guidGenerator();
  43.         $scope.menu_principal = guidGenerator();
  44.         $scope.idChartTree = guidGenerator();
  45.         
  46.         /**
  47.          * Gera Ids dinamicamente que são usados no html
  48.          * 
  49.          * @method guidGenerator
  50.          *
  51.          *
  52.          */        
  53.         function guidGenerator() {
  54.             var S4 = function() {
  55.                return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
  56.             };
  57.             return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
  58.         }
  60.         /**
  61.          * Destroy o gráfico atual para que possa ser criado um novo
  62.          * 
  63.          * @method limpar
  64.          *
  65.          *
  66.          */        
  67.         $scope.limpar = function () {
  68.         	chartDataDestroy()
  69.         }
  70.         
  71.         /**
  72.          * Obtem a lista de orgãos que foram selecionados para serem exibidos no gráfico
  73.          * 
  74.          * @method getOrgaosFace
  75.          *
  76.          *
  77.          */        
  78.         function getOrgaosFace(){
  79.         	
  80.         	var modulos = _.filter(Preset.config.preset.PresetModulos, function (mod) {
  81.                 return mod.Face != null && mod.Face.id == $scope.faceId;
  82.             });
  83.         	
  84.         	let orgaos = modulos[0].Face.extras[0].orgaos; 
  85.         	
  86.         	var orgaos_ = [];
  87.             for(var index in orgaos){
  88.                  if(typeof orgaos[index] == 'number'){
  89.                          var orgaolocal = orgaos[index];
  90.                          orgaos_.push(orgaolocal.toString());
  91.                  }else{
  92.                          var orgaolocal = orgaos[index];
  93.                          orgaos_.push(orgaolocal);
  94.                  }
  95.             }
  96.             
  97.             return orgaos_;
  98.         }
  100.         /**
  101.          * Faz a busca dos dados do relatório baseado nos dados passados
  102.          * 
  103.          * @method buscar
  104.          *
  105.          * @param tipo {String}  Tipo de relatorio
  106.          * @param orgaos {Array} Lista de orgãos que serão exibidos no gráfico
  107.          *
  108.          */ 
  109.         $scope.buscar = function (tipo, orgaos) {
  110.         	
  111.         	var orgaos_;
  112.         	
  113.         	if(orgaos != null){
  114.         		orgaos_ = orgaos;
  115.         	}else if($scope.orgao.length == 1){
  116.         		orgaos_ = $scope.orgao;
  117.         	}else {
  118.         		orgaos_ = getOrgaosFace();
  119.         	}
  120.        		
  122.             let relatorioPeriodo = {
  123.                 "relatorio": "mensal",
  124.                 "dataInicio": moment($scope.dataInicio, 'MM/YYYY').format('YYYYMM'),
  125.                 "dataFim": moment($scope.dataFim, 'MM/YYYY').format('YYYYMM'),
  126.                 "orgaos" : orgaos_
  127.             };
  128.             //console.log(relatorioPeriodo)
  130.             let relatorioAnual = {
  131.                 "relatorio": "anual",
  132.                 "anoInicio": moment($scope.anoInicio, 'YYYY').format('YYYY'),
  133.                 "anoFim": moment($scope.anoFim, 'YYYY').format('YYYY'),
  134.                 "orgaos" : orgaos_
  135.             }
  137.             //console.log(relatorioAnual)
  139.             let parametrosDaConsulta
  141.             switch (tipo) {
  142.                 case "periodo":
  143.                     parametrosDaConsulta = relatorioPeriodo;
  144.                     break;
  145.                 case "ano":
  146.                     parametrosDaConsulta = relatorioAnual;
  147.                     break;
  148.                 default:
  149.                     let data = new Date()
  151.                     var time = new Date();
  152.                     var outraData = new Date();
  153.                     outraData.setDate(time.getDate() - 365); // diminui 365 dias
  154.                     //console.log("Ano =" + outraData.getFullYear() + "Mes =" + (outraData.getMonth() + 1))
  156.                     //$scope.dataInicio = "01/"+(data.getFullYear()).toString();
  157.                     $scope.dataInicio = (outraData.getMonth() + 1)+"/"+outraData.getFullYear()
  158.                     $scope.dataFim = ("0" + (data.getMonth() + 1)).slice(-2)+"/"+(data.getFullYear()).toString();
  159.         
  160.                     $scope.anoInicio = outraData.getFullYear().toString()
  161.                     $scope.anoFim = data.getFullYear().toString()
  162.                     
  163.                     let relatorioAtual = {
  164.                         "relatorio": "mensal",
  165.                         "dataInicio": moment($scope.dataInicio, 'MM/YYYY').format('YYYYMM'),
  166.                         "dataFim": moment($scope.dataFim, 'MM/YYYY').format('YYYYMM'),
  167.                         "orgaos" : orgaos_
  168.                     };
  169.                     //console.log(relatorioAtual)
  170.                     parametrosDaConsulta = relatorioAtual
  171.                     break;
  172.             }
  174. 			filterData(parametrosDaConsulta).then(function (response) {
  175. 			 			if (response != null) {
  176. 	                        var dataAno = response;
  177. 	                        chartDataDestroy();
  178. 	                        chartBar(dataAno, $scope.tituloModulo);
  179. 	                        if(orgaos_.length > 1){
  180. 					         	$('#'+$scope.div_menu_back_1).hide();
  181. 	                        }
  182. 	                    } else {
  183. 	                        console.log("Objeto nulo");
  184. 	                    }
  185. 			}, function (err) {
  186.                     console.log("Erro na consulta");
  187.             });
  189.             
  192.         }
  193.         
  194.         /*
  195.         function filterData(parametrosDaConsulta){
  196.        		var deferred = $q.defer();
  197. 	        $http.post(API_ENDPOINT + 'relatorio/sp/filter', parametrosDaConsulta)
  198. 	                .then(function (response) {
  199. 	                    if (typeof response.data === 'object') {
  200. 	                    	 deferred.resolve();
  201. 	                    } else {
  202. 	                        return deferred.reject(response.data);
  203. 	                    }
  204. 	                }, function (err) {
  205. 	                    deferred.reject("Error! filterData");
  206. 	          });
  207. 	           return deferred.promise;
  208.         }*/
  209.         
  210.         /**
  211.          * Faz o acesso ao backend que retornará com os dados da busca
  212.          * 
  213.          * @method filterData
  214.          *
  215.          * @param filter {Object}  Dados para filtrar a busca
  216.          *
  217.          * @returns {Promise} Promise que resolve com as informações sobre o
  218.          * relatório
  219.          */         
  220.         function filterData(filter) {
  221.             var deferred = $q.defer();
  222.             $http.post(API_ENDPOINT + 'relatorio/sp/filter', filter)
  223.                 .then(function (res) {
  224.                     if (typeof res.data === 'object') {
  225.                         deferred.resolve(res.data);
  226.                     } else {
  227.                         deferred.reject();
  228.                     }
  229.                 }, function (err) {
  230.                     deferred.reject(err);
  231.                 });
  232.             return deferred.promise;
  233.         }
  234.         
  235.         /**
  236.          * Método responsável pela montagem do gráfico
  237.          * 
  238.          * @method chartBar
  239.          *
  240.          * @param dados {Object}  Dados para montagem do gráfico
  241.          * @param titulo {String} Título que será exibido no gráfico
  242.          *
  243.          */ 
  244.         function chartBar(dados, titulo) {
  246.             var dataLabels = []
  247.             var labelChart = []
  248.             for (let i = 0; i < dados.length; i++) {
  249.                 switch (dados[i].text) {
  251.                     case "JANUARY":
  252.                         labelChart[i] = "Janeiro"
  253.                         break;
  254.                     case "FEBRUARY":
  255.                         labelChart[i] = "Fevereiro"
  256.                         break;
  257.                     case "MARCH":
  258.                         labelChart[i] = "Março"
  259.                         break;
  260.                     case "APRIL":
  261.                         labelChart[i] = "Abril"
  262.                         break;
  263.                     case "MAY":
  264.                         labelChart[i] = "Maio"
  265.                         break;
  266.                     case "JUNE":
  267.                         labelChart[i] = "Junho"
  268.                         break;
  269.                     case "JULY":
  270.                         labelChart[i] = "Julho"
  271.                         break;
  272.                     case "AUGUST":
  273.                         labelChart[i] = "Agosto"
  274.                         break;
  275.                     case "SEPTEMBER":
  276.                         labelChart[i] = "Setembro"
  277.                         break;
  278.                     case "OCTOBER":
  279.                         labelChart[i] = "Outubro"
  280.                         break;
  281.                     case "NOVEMBER":
  282.                         labelChart[i] = "Novembro"
  283.                         break;
  284.                     case "DECEMBER":
  285.                         labelChart[i] = "Dezembro"
  286.                         break;
  287.                     default:
  288.                         labelChart[i] = dados[i].text;
  289.                         break;
  290.                 }
  291.                 dataLabels.push(labelChart[i])
  292.             }
  294.             var liquidado = []
  295.             for (let i = 0; i < dados.length; i++) {
  296.                 liquidado.push(dados[i].valorLiquidado)
  297.             }
  299.             var empenhoLiquidado = []
  300.             for (let i = 0; i < dados.length; i++) {
  301.                 empenhoLiquidado.push(dados[i].valorEmpenhadoLiquido)
  302.             }
  304.             var disponivel = []
  305.             for (let i = 0; i < dados.length; i++) {
  306.                 disponivel.push(dados[i].valorDisponivel)
  307.             }
  309.             carregarCanvasOnclinck();
  310.             
  311. 	        /**
  312. 	         * Faz o gerenciamento do click nas barras do gráfico
  313. 	         * 
  314. 	         * @method carregarCanvasOnclinck
  315. 	         *
  316. 	         *
  317. 	         */             
  318.             function carregarCanvasOnclinck(){
  319.             	var canvas = document.getElementById($scope.canvas.id);
  320.             	if(canvas != null){
  321.             		canvas.onclick = function(evt) {
  322.             		   
  323.                        var activePoints =  $scope.chartData.getElementsAtEvent(evt);
  324.                        if(activePoints.length > 0){
  325.                         var chartData = activePoints[0]['_chart'].config.data;
  326.    	                    $scope.periodo = activePoints[0]['_view'].label;
  327.    	                    
  328.    	                    var res = $scope.periodo.split("/");
  329.    	                    $scope.periodo = res[0]+"/"+res[1];
  330.    	                    
  331. 	   	                if($scope.orgao.length == 1){
  332. 	   	                	treemap("funcao", $scope.periodo)
  333. 	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').hide();
  334. 	   	                	$('[data-tab='+$scope.canvas.id+'funcao]').addClass('active');
  335. 	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').removeClass('active');
  336. 	   	                }else{
  337. 	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').show();
  338. 	   	                	$('[data-tab='+$scope.canvas.id+'funcao]').removeClass('active');
  339. 	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').addClass('active');
  340. 	   	                	treemap("orgao", $scope.periodo)
  341. 	   	                }
  342.    	
  343.    	                    $("#tab"+$scope.canvas.id+"anual").click(function () {
  344.    	                    	$("#tab"+$scope.canvas.id+"anual").addClass('active');
  345.    	                    	$("#tab"+$scope.canvas.id+"mensal").removeClass('active');
  346.    	                    });
  347.    	                    
  348.    	                    $("#tab"+$scope.canvas.id+"mensal").click(function () {
  349.    	                    	$("#tab"+$scope.canvas.id+"mensal").addClass('active');
  350.    	                    	$("#tab"+$scope.canvas.id+"anual").removeClass('active');
  351.    	                    });
  352.    	                    
  353.    	                     $('[data-tab='+$scope.canvas.id+'buscar]').on('click', function () {
  354.                             let hasOrgao = $('[data-tab='+$scope.canvas.id+'orgao]').hasClass( "active" );
  355.                             if(hasOrgao){
  356.                             	treemap("orgao",  $scope.periodo)	
  357.                             }else{
  358.                             	treemap("funcao", $scope.periodo)	
  359.                             }
  360.                         });
  361.    	                    
  362.    	                     $('[data-tab='+$scope.canvas.id+'funcao]').on('click', function () {
  363.    	                    	 $("#"+$scope.menu_principal).hide();
  364.    	                        //treemap("funcao", $scope.periodo)
  365.  	   	                	$('[data-tab='+$scope.canvas.id+'funcao]').addClass('active');
  366. 	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').removeClass('active');     
  367.    	                     });
  368.    	                     
  369.                     	$('[data-tab='+$scope.canvas.id+'orgao]').on('click', function () {
  370.    	                    	$("#"+$scope.menu_principal).hide();
  371.    	                       // treemap("orgao",  $scope.periodo)
  372. 	   	                	$('[data-tab='+$scope.canvas.id+'funcao]').removeClass('active');
  373. 	   	                	$('[data-tab='+$scope.canvas.id+'orgao]').addClass('active');
  375.    	                    });
  376.                        }
  377.                     
  378.                      };
  379.             	}else{
  380.             		$timeout(function () { carregarCanvasOnclinck(); }, 3000);
  381.             	}
  382.             	
  383.             }
  384.                 
  385.             
  386. 	        /**
  387. 	         * Inicializa o gráfico de barras
  388. 	         * 
  389. 	         * @constructs Chart
  390. 	         *
  391. 	         *
  392. 	         */   
  393.             $scope.chartData = new Chart(document.getElementById($scope.canvas.id).getElementsByTagName("canvas"), {
  394.                 type: 'bar',
  395.                 data: {
  396.                     labels: dataLabels,
  397.                     datasets: [
  398.                         {
  399.                             label: "Valor Liquidado",
  400.                             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"],
  401.                             data: liquidado
  402.                         },
  403.                         {
  404.                             label: "Valor Empenhado",
  405.                             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"],
  406.                             data: empenhoLiquidado
  407.                         },
  408.                         {
  409.                             label: "Valor Disponivel",
  410.                             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"],
  411.                             data: disponivel
  412.                         }
  413.                     ]
  414.                 },
  415.                 options: {
  416.                     responsive: true,
  417.                     maintainAspectRatio: false,
  418.                     tooltips: {
  419.                         fontSize: 16,
  420.                         callbacks: {
  421.                             label: function (tooltipItems, data) {
  422.                                 let value = tooltipItems.yLabel
  423.                                 return 'R$ ' + value.toLocaleString('pt-BR');
  424.                             }
  425.                         }
  426.                     },
  427.                     legend: {
  428.                         display: true,
  429.                         labels: {
  430.                             fontColor: "white",
  431.                             fontSize: 14
  432.                         }
  433.                     },
  434.                     title: {
  435.                         display: true,
  436.                         fontColor: "white",
  437.                         fontSize: 14,
  438.                         text: titulo,
  439.                     },
  440.                     scales: {
  441.                         yAxes: [{
  442.                             ticks: {
  443.                                 fontColor: "white",
  444.                                 beginAtZero: true,
  445.                                 fontSize: 14,
  446.                                 callback: function (value, index, values) {
  447.                                     var suffixes = ["", " mil", " Mi", " Bi", " T"];
  448.                                     var suffixNum = Math.floor(("" + value).length / 3);
  449.                                     var shortValue = parseFloat((suffixNum != 0 ? (value / Math.pow(1000, suffixNum)) : value).toPrecision(2));
  450.                                     if (shortValue % 1 != 0) {
  451.                                         var shortNum = shortValue.toFixed(1);
  452.                                     }
  453.                                     return 'R$ ' + shortValue + suffixes[suffixNum];
  454.                                 }
  455.                             }
  456.                         }],
  457.                         xAxes: [{
  458.                             ticks: {
  459.                                 fontColor: "white",
  460.                                 fontSize: 16,
  461.                             }
  462.                         }]
  463.                     }
  464.                 }
  465.             });
  466.         }
  467.         
  468.         /**
  469.          * Método responsável pela montagem do gráfico TreeMap
  470.          * 
  471.          * @method dadosTreeMap
  472.          *
  473.          * @param filter {Object} Dados para filtrar a consulta
  474.          * 
  475.          *
  476.          * @returns {Promise} Promise que resolve com as informações sobre o
  477.          * relatório
  478.          */         
  479.         function dadosTreeMap(filter) {
  480.             var deferred = $q.defer();
  481.             $http.post(API_ENDPOINT + 'relatorio/sp/filter', filter)
  482.                 .then(function (res) {
  483.                     if (typeof res.data === 'object') {
  484.                         deferred.resolve(res.data);
  485.                     } else {
  486.                         deferred.reject();
  487.                     }
  488.                 }, function (err) {
  489.                     deferred.reject(err);
  490.                 });
  491.             return deferred.promise;
  492.         }
  493.         
  494.         /**
  495.          * Destroy o gráfico de barras atual para que possa ser criado um novo
  496.          * 
  497.          * @method chartDataDestroy
  498.          *
  499.          *
  500.          */        
  501.         function chartDataDestroy(){
  502.         	if ($scope.chartData != null) {
  503.         		try{
  504.         			$scope.chartData.destroy();
  505.         		}
  506.         		catch(e){
  507.         			console.log("");
  508.         		}
  509.             }
  510.         }
  511.         
  512.         /**
  513.          * Responsável pela montagem dos dados do gráfico TreeMap
  514.          * 
  515.          * @method treemap
  516.          *
  517.          * @param tipo {String} Tipo de relatório
  518.          * @param periodo {Date} Datas de início e fim para apuração dos dados
  519.          *
  520.          */             
  521.         function treemap(tipo, periodo) {
  522.         	chartDataDestroy()
  524.             var anoPeriodo = (moment(periodo, 'MM/YYYY').format('YYYY'))
  525.             var mesPeriodo = (moment(periodo, 'MM/YYYY').format('MM'))
  526.             
  527.             var orgaos_ = [];
  528. 	            for(var index in $scope.orgao){
  529. 	            	if(typeof $scope.orgao[index] == 'number'){
  530. 	            		var orgaolocal = $scope.orgao[index];
  531. 	            		orgaos_.push(orgaolocal.toString());	
  532. 	            	}else{
  533. 	            		var orgaolocal = $scope.orgao[index];
  534. 	            		orgaos_.push(orgaolocal);	
  535. 	            	}
  536. 	            }
  537. 	            
  538. 	         $scope.orgao = orgaos_;
  539. 	         
  540. 	         if(orgaos_.length == 1){
  541. 	         	$('#'+$scope.div_menu_back_1).hide();
  542. 	         }
  543. 	            
  544.             let filtro = {
  545.                     "filtro": {
  546.                         "anoDotacao": anoPeriodo,
  547.                         "mesDotacao": mesPeriodo,
  548.                         "orgaos": orgaos_
  549.                     },
  550.                     "agrupar": tipo.substr(0, 3)
  551.                 }
  553.             dadosTreeMap(filtro).then(function (data) {
  554.                 var dataOrgao = data.map(
  555.                     obj => {
  556.                         return {
  557.                             "text": obj.text,
  558.                             "value": obj.valorDisponivel,
  559.                             "color": ((obj.valorLiquidado * 12) / (obj.valorDisponivel * mesPeriodo))
  560.                         }
  561.                     }
  562.                 );
  563.                 treemapRender(dataOrgao);
  564.             });
  565.         }
  566.         
  567.         /**
  568.          * Responsável pela montagem do gráfico TreeMap
  569.          * 
  570.          * @method treemapRender
  571.          *
  572.          * @param dados {String} Dados para ser usado no gráfico
  573.          *
  574.          */          
  575.         function treemapRender(dados) {
  576.         	
  577.           exibirTreeMap();
  578.         
  579.           var divId = $scope.idChartTree;
  581.            $('#'+$scope.externo).html('').append(`<div id='${divId}' class="chartTreemap" style="height:100%" ></div>`)
  583.            var paletteColor = []
  584.            for (let i = 0; i < dados.length; i++) {
  585.             if (dados[i].color > 0.9) {
  586.                 paletteColor.push((dados[i].color = "#008c48"));
  587.             } else if (dados[i].color > 0.75) {
  588.                 paletteColor.push((dados[i].color = "#FFdd00"));
  589.             } else if (dados[i].color < 0.75) {
  590.                 paletteColor.push((dados[i].color = "#FF1e00"));
  591.             } else {
  592.                 paletteColor.push((dados[i].color = "#FF1e00"));
  593.             }
  594.         }
  595.            let myConfig = {
  596.                "graphset": [{
  597.                    "type": "treemap",
  598.                    options: {
  599.                        box: {
  600.                            fontSize: 13,
  601.                            padding: "5px",
  602.                            'font-color': "black",
  603.                            "shadow": 1,
  604.                            borderWidth: 1
  605.                        },
  606.                        'thousands-separator': ".",
  607.                        'decimals-separator': ",",
  608.                        decimals: "2",
  609.                        'aspect-type': "palette",
  610.                        text: "%v widgets",
  611.                        palette: paletteColor,
  612.                        'tooltip-box': {
  613.                            'font-color': "black",
  614.                            'font-size': 13,
  615.                            'font-style': "normal",
  616.                            padding: "20%",
  617.                            'border-radius': "5%",
  619.                        },
  620.                    },
  621.                    "series":dados
  622.                }
  623.                ]
  624.            };
  626.            zingchart.render({
  627.                id: divId,
  628.                data: myConfig,
  629.                height: "100%",
  630.                width: "100%"
  631.            });
  633.            if($scope.orgao != null && $scope.orgao.length > 1){           
  634. 	           zingchart.bind(divId, 'node_click', function(e) {
  635. 	              var subpref = _.find($scope.orgaos, function (orgao) {
  636. 	                  return orgao.descricao.includes(e.path[0].text );
  637. 	              });
  638. 	              
  639. 	              var orgaos_ = [];
  640. 	              orgaos_.push(subpref.codigo);
  641. 	              
  642. 	              $scope.chartDataSubPref(orgaos_, e.path[0].text);
  643. 	              
  644. 	              $scope.tituloModulo = e.path[0].text;
  645. 	           });
  646.            }
  647.            
  648.            $('#'+divId).css('overflow','visible');
  649.            
  650.            Preset.salvar();
  651.            setInterval( () => $('[title="JavaScript Charts by ZingChart"]').hide() , 3000);
  652.            
  653.       	 
  654.       	 /*
  655.        	 $('#'+$scope.menu_back).on('click', function () {
  656.        				executeOnBack();
  657.          });*/
  659.        }
  662.         /**
  663.          * Volta as informações do gráfico para o momento inicial
  664.          * 
  665.          * @method executeOnBack
  666.          *
  667.          * 
  668.          *
  669.          */  
  670.        $scope.executeOnBack = function (){
  671.        		 chartDataDestroy();
  672.        	 	 ocultarTreeMap();
  673. 	       		for (var index in modulos) {
  674. 	                if ((modulos[index].template == 'app/components/modulos/modulo-chartBar.html' || (modulos[index].Face && modulos[index].Face.template == 'app/components/modulos/modulo-chartBar.html'))) {
  675. 	                    let orgaos = modulos[index].Face.extras[0].orgaos;
  676. 	                    var orgaos_ = [];
  677. 	    	            for(var index_ in orgaos){
  678. 	    	            	if(typeof orgaos[index_] == 'number'){
  679. 	    	            		var orgaolocal = orgaos[index_];
  680. 	    	            		orgaos_.push(orgaolocal.toString());	
  681. 	    	            	}else{
  682. 	    	            		var orgaolocal = orgaos[index_];
  683. 	    	            		orgaos_.push(orgaolocal);	
  684. 	    	            	}
  685. 	    	            }
  686. 	    	            $scope.orgao = orgaos_;
  687. 	    	            $scope.tituloModulo = modulos[index].Face.name;
  688. 	    	            $scope.buscar('mensal', orgaos_);       
  689. 	    	            break;
  690. 	                }
  691. 	            }
  692.        	 }
  693.         
  694.         /**
  695.          * Busca os Orgãos disponíveis para serem exibidos no gráfico
  696.          *
  697.          * @method orgaos
  698.          * 
  699.          * 
  700.          * @returns {Promise} Promise que resolve com as informações sobre o
  701.          * Orgãos
  702.          */        
  703.         function orgaos() {
  704.             var deferred = $q.defer();
  705.             $http.get(API_ENDPOINT + 'relatorio/orgaos')
  706.                 .then(function (res) {
  707.                     if (typeof res.data === 'object') {
  708.                         deferred.resolve(res.data);
  709.                         $scope.orgaos=res.data;
  710.                     } else {
  711.                         deferred.reject();
  712.                     }
  713.                 }, function (err) {
  714.                     deferred.reject(err);
  715.                 });
  716.             return deferred.promise;
  717.         }
  718.         
  719.         orgaos();
  720.         
  721.     /**
  722.      * Controle de exibição ou ocultação de divs e botões dos gráficos
  723.      * 
  724.      * @method exibirTreeMap
  725.      *
  726.      *
  727.      */        
  728.        function exibirTreeMap(){
  729.              $("#"+$scope.div_menu_back).show();
  730.              $('.titleValorBar').show()
  731. 	   		 $("#"+$scope.externo).show();
  732. 	   		 $("#"+$scope.idChartTree).show();
  733. 	    	 $("#"+$scope.menu_principal).hide();
  734. 	    	 $("#"+$scope.chart_container).hide();
  735.        }
  736.         
  737. 	    /**
  738. 	     * Controle de exibição ou ocultação de divs e botões dos gráficos
  739. 	     * 
  740. 	     * @method ocultarTreeMap
  741. 	     *
  742. 	     *
  743. 	     */          
  744.        function ocultarTreeMap(){
  745. 	         zingchart.exec($scope.idChartTree, 'destroy');
  746.              $("#"+$scope.div_menu_back).hide();
  747.              $('.titleValorBar').hide()
  748. 	   		 $("#"+$scope.externo).hide();
  749. 	    	 $("#"+$scope.menu_principal).show();
  750. 	    	 $("#"+$scope.chart_container).show();
  751.        }
  752.        
  753. 	    /**
  754. 	     * Faz a busca dos dados referente aos últimos 12 meses
  755. 	     * 
  756. 	     * @method chartDataSubPref
  757. 	     *
  758. 	     * @param orgaos {Array} Orgãos que serão exibidos no gráfico
  759. 	     * @param subpref {String} Nome do Orgão que será exibido no gráfico  
  760. 	     *
  761. 	     */       
  762.        $scope.chartDataSubPref = function (orgaos, subpref) {
  763.        	ocultarTreeMap()
  764.        	 
  765.        	 var orgaos_ = [];
  766.             for(var index in orgaos){
  767.                 if(typeof orgaos[index] == 'number'){
  768.                         var orgaolocal = orgaos[index];
  769.                         orgaos_.push(orgaolocal.toString());
  770.                 }else{
  771.                         var orgaolocal = orgaos[index];
  772.                         orgaos_.push(orgaolocal);
  773.                 }
  774.             }
  776.            $scope.orgao = orgaos_;
  777.            
  778.            if(orgaos_.length == 1){
  779.            		$('#'+$scope.div_menu_back_1).show();
  780.            		/*
  781.            		$('#'+$scope.menu_back_1).on('click', function () {
  782.        				$scope.executeOnBack();
  783.                 });*/
  784.            }	
  785.              
  786.            let data = new Date();
  788.            var time = new Date();
  789.            var outraData = new Date();
  790.            outraData.setDate(time.getDate() - 365); // diminui 365 dias
  792.            $scope.dataInicio = (outraData.getMonth() + 1)+"/"+outraData.getFullYear()
  793.            $scope.dataFim = ("0" + (data.getMonth() + 1)).slice(-2)+"/"+(data.getFullYear()).toString();
  795.            $scope.anoInicio = outraData.getFullYear().toString()
  796.            $scope.anoFim = data.getFullYear().toString()
  797.            
  798.            let relatorioAtual = {
  799.                "relatorio": "mensal",
  800.                "dataInicio": moment($scope.dataInicio, 'MM/YYYY').format('YYYYMM'),
  801.                "dataFim": moment($scope.dataFim, 'MM/YYYY').format('YYYYMM'),
  802.                "orgaos" : orgaos_
  803.            };
  804.            
  805.            let parametrosDaConsulta = relatorioAtual
  806.            
  807.            $http.post(API_ENDPOINT + 'relatorio/sp/filter', parametrosDaConsulta)
  808.                .then(function (res) {
  809.                    if (typeof res.data === 'object') {
  810.                        var dataAno = res.data;
  811.                        //console.log(JSON.stringify(dataAno));
  812.                        chartDataDestroy()
  813.                        chartBar(dataAno, subpref);
  814.                    } else {
  815.                        console.log("Erro na consulta");
  816.                    }
  817.                }, function (err) {
  818.                    console.log(err);
  819.                });
  821.        }
  823.         var modulos = Preset.obter().PresetModulos;
  824.         $scope.presetId = Preset.obter().id;
  827.         $timeout(function () {
  828.             for (var index in modulos) {
  829.                 if ((modulos[index].template == 'app/components/modulos/modulo-chartBar.html' || (modulos[index].Face && modulos[index].Face.template == 'app/components/modulos/modulo-chartBar.html')) && !modulos[index].usado) {
  831.                     modulos[index].usado = true;
  832.                     modulos[index].index = 1;
  833.                     $scope.modulo = modulos[index];
  834.                     $scope.tituloModulo = modulos[index].Face.name;
  835.                     $scope.endereco = modulos[index].Face;
  836.                     $scope.faceId = modulos[index].Face.id;
  837.                     $scope.orgao = modulos[index].Face.extras[0].orgaos
  838.                     
  839.                     $scope.buscar('');
  840.                 }
  841.             }
  842.         }, 300);
  844.         angular.extend($scope, {});
  845.     }
  847.     function s4cChartBar() {
  848.         return {
  849.             restrict: 'E',
  850.             templateUrl: 'app/directives/graficos/chartBar.html',
  851.             scope: {},
  852.             controller: chartBarController
  853.         };
  854.     }
  856.     angular.module('s4c.components.chartBar', [])
  857.         .directive('s4cChartbar', s4cChartBar);
  858. })();