/**
* @ngdoc directives
* @name Chartbar
* @module s4c.directives.graficos.chartBar
*
* @description Componente para demonstração de gráficos no formato de barras
*
*
*/
(function () {
'use strict';
chartBarController.$inject = [
'$scope',
'$timeout',
'Preset',
'DashboardService',
'$http',
'$q',
'API_ENDPOINT'
];
function chartBarController(
$scope,
$timeout,
Preset,
DashboardService,
$http,
$q,
API_ENDPOINT) {
$scope.res = $scope.$root.res;
$scope.canvas = {};
$scope.canvas.id = guidGenerator() + '_chart';
$scope.externo = guidGenerator();
$scope.menu_back = guidGenerator();
$scope.div_menu_back = guidGenerator();
$scope.menu_back_1 = guidGenerator();
$scope.div_menu_back_1 = guidGenerator();
$scope.chart_container = guidGenerator();
$scope.menu_principal = guidGenerator();
$scope.idChartTree = guidGenerator();
/**
* Gera Ids dinamicamente que são usados no html
*
* @method 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());
}
/**
* Destroy o gráfico atual para que possa ser criado um novo
*
* @method limpar
*
*
*/
$scope.limpar = function () {
chartDataDestroy()
}
/**
* 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 if($scope.orgao.length == 1){
orgaos_ = $scope.orgao;
}else {
orgaos_ = 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;
}
filterData(parametrosDaConsulta).then(function (response) {
if (response != null) {
var dataAno = response;
chartDataDestroy();
chartBar(dataAno, $scope.tituloModulo);
if(orgaos_.length > 1){
$('#'+$scope.div_menu_back_1).hide();
}
} else {
console.log("Objeto nulo");
}
}, function (err) {
console.log("Erro na consulta");
});
}
/*
function filterData(parametrosDaConsulta){
var deferred = $q.defer();
$http.post(API_ENDPOINT + 'relatorio/sp/filter', parametrosDaConsulta)
.then(function (response) {
if (typeof response.data === 'object') {
deferred.resolve();
} else {
return deferred.reject(response.data);
}
}, function (err) {
deferred.reject("Error! filterData");
});
return deferred.promise;
}*/
/**
* Faz o acesso ao backend que retornará com os dados da busca
*
* @method filterData
*
* @param filter {Object} Dados para filtrar a busca
*
* @returns {Promise} Promise que resolve com as informações sobre o
* relatório
*/
function filterData(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;
}
/**
* 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){
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');
}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)
}
$("#tab"+$scope.canvas.id+"anual").click(function () {
$("#tab"+$scope.canvas.id+"anual").addClass('active');
$("#tab"+$scope.canvas.id+"mensal").removeClass('active');
});
$("#tab"+$scope.canvas.id+"mensal").click(function () {
$("#tab"+$scope.canvas.id+"mensal").addClass('active');
$("#tab"+$scope.canvas.id+"anual").removeClass('active');
});
$('[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='+$scope.canvas.id+'funcao]').on('click', function () {
$("#"+$scope.menu_principal).hide();
//treemap("funcao", $scope.periodo)
$('[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 () {
$("#"+$scope.menu_principal).hide();
// treemap("orgao", $scope.periodo)
$('[data-tab='+$scope.canvas.id+'funcao]').removeClass('active');
$('[data-tab='+$scope.canvas.id+'orgao]').addClass('active');
});
}
};
}else{
$timeout(function () { carregarCanvasOnclinck(); }, 3000);
}
}
/**
* 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,
}
}]
}
}
});
}
/**
* 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;
}
/**
* Destroy o gráfico de barras atual para que possa ser criado um novo
*
* @method chartDataDestroy
*
*
*/
function chartDataDestroy(){
if ($scope.chartData != null) {
try{
$scope.chartData.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_;
if(orgaos_.length == 1){
$('#'+$scope.div_menu_back_1).hide();
}
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))
}
}
);
treemapRender(dataOrgao);
});
}
/**
* 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" style="height:100%" ></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.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);
/*
$('#'+$scope.menu_back).on('click', function () {
executeOnBack();
});*/
}
/**
* Volta as informações do gráfico para o momento inicial
*
* @method executeOnBack
*
*
*
*/
$scope.executeOnBack = function (){
chartDataDestroy();
ocultarTreeMap();
for (var index in modulos) {
if ((modulos[index].template == 'app/components/modulos/modulo-chartBar.html' || (modulos[index].Face && modulos[index].Face.template == 'app/components/modulos/modulo-chartBar.html'))) {
let orgaos = modulos[index].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);
}
}
$scope.orgao = orgaos_;
$scope.tituloModulo = modulos[index].Face.name;
$scope.buscar('mensal', orgaos_);
break;
}
}
}
/**
* 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();
/**
* Controle de exibição ou ocultação de divs e botões dos gráficos
*
* @method exibirTreeMap
*
*
*/
function exibirTreeMap(){
$("#"+$scope.div_menu_back).show();
$('.titleValorBar').show()
$("#"+$scope.externo).show();
$("#"+$scope.idChartTree).show();
$("#"+$scope.menu_principal).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');
$("#"+$scope.div_menu_back).hide();
$('.titleValorBar').hide()
$("#"+$scope.externo).hide();
$("#"+$scope.menu_principal).show();
$("#"+$scope.chart_container).show();
}
/**
* 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()
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_;
if(orgaos_.length == 1){
$('#'+$scope.div_menu_back_1).show();
/*
$('#'+$scope.menu_back_1).on('click', function () {
$scope.executeOnBack();
});*/
}
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;
//console.log(JSON.stringify(dataAno));
chartDataDestroy()
chartBar(dataAno, subpref);
} else {
console.log("Erro na consulta");
}
}, function (err) {
console.log(err);
});
}
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-chartBar.html' || (modulos[index].Face && modulos[index].Face.template == 'app/components/modulos/modulo-chartBar.html')) && !modulos[index].usado) {
modulos[index].usado = true;
modulos[index].index = 1;
$scope.modulo = modulos[index];
$scope.tituloModulo = modulos[index].Face.name;
$scope.endereco = modulos[index].Face;
$scope.faceId = modulos[index].Face.id;
$scope.orgao = modulos[index].Face.extras[0].orgaos
$scope.buscar('');
}
}
}, 300);
angular.extend($scope, {});
}
function s4cChartBar() {
return {
restrict: 'E',
templateUrl: 'app/directives/graficos/chartBar.html',
scope: {},
controller: chartBarController
};
}
angular.module('s4c.components.chartBar', [])
.directive('s4cChartbar', s4cChartBar);
})();