Gráfico zerado primesFaces

16 de abril de 2016 14 respostas

Douglas_Dias 16 de abril de 2016

Tela com pesquisa e Gráfico
`<ui:composition xmlns=“http://www.w3.org/1999/xhtml”
xmlns:h=“http://xmlns.jcp.org/jsf/html”
xmlns:f=“http://xmlns.jcp.org/jsf/core”
xmlns:ui=“http://xmlns.jcp.org/jsf/facelets”
xmlns:p=“http://primefaces.org/ui”
template="/WEB-INF/templates/Layout.xhtml">

<ui:define name="content">
	<h1 class="aw-page-title">Pesquisa SOS</h1>
	
	<h:head>
	
		<script>
			PrimeFaces.locales['pt_BR'] = {
			closeText : 'Fechar',
			prevText : 'Anterior',
			nextText : 'Próximo',
			currentText : 'Começo',
			monthNames : [ 'Janeiro', 'Fevereiro', 'Março', 'Abril','Maio', 'Junho', 'Julho', 'Agosto', 'Setembro','Outubro', 'Novembro', 'Dezembro' ],
			monthNamesShort : [ 'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun','Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez' ],
			dayNames : [ 'Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta','Sexta', 'Sábado' ],
			dayNamesShort : [ 'Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex','Sáb' ],
			dayNamesMin : [ 'D', 'S', 'T', 'Q', 'Q', 'S', 'S' ],
			weekHeader : 'Semana',
			firstDay : 1,
			isRTL : false,
			showMonthAfterYear : false,
			yearSuffix : '',
			timeOnlyTitle : 'Só Horas',
			timeText : 'Tempo',
			hourText : 'Hora',
			minuteText : 'Minuto',
			secondText : 'Segundo',
			currentText : 'Data Atual',
			ampm : false,
			month : 'Mês',
			week : 'Semana',
			day : 'Dia',
			allDayText : 'Todo Dia'
		};
		</script>
	
	</h:head>

	<h:form id="frm">

		<p:toolbar>
			<p:toolbarGroup>
				<p:commandButton id="pesq" value="Pesquisar"
					action="#{controleSos.pesquisaSos}" update="@form" />
			</p:toolbarGroup>
		</p:toolbar>


		<p:messages autoUpdate="false" />

		<div class="ui-fluid">
			<p:panelGrid columns="4" layout="grid"
				style="margin-top: 20px; margin-bottom: 40px"
				styleClass="panelgrid-noborder"
				columnClasses="ui-grid-col-1, ui-grid-col-4, ui-grid-col-1, ui-grid-col-4">


				<p:outputLabel value="Setor" for="idSetores" />
				<p:selectOneMenu id="idSetores"
					value="#{controleSos.pesquisaSos.sSetor}">
					<f:selectItem itemLabel="Selecione" itemValue="" />
					<f:selectItem itemLabel="TODOS" itemValue="todos" />
					<f:selectItems value="#{controleSos.selectItenSetores}" />
				</p:selectOneMenu>

				<p:outputLabel value="Tipo Pesquisa" for="idTipo" />
				<p:selectOneMenu id="idTipo"
					value="#{controleSos.pesquisaSos.sTipoPesquisa}">
					<f:selectItem itemLabel="Selecione" itemValue="" />
					<f:selectItem itemLabel="TODOS" itemValue="todos" />
					<f:selectItem itemLabel="NC" itemValue="nc" />
					<f:selectItem itemLabel="AC" itemValue="ac" />
				</p:selectOneMenu>

				<p:outputLabel value="Data Início" for="idDtaIni" />
				<p:calendar id="idDtaIni" pattern="dd/MM/yyyy" value="#{controleSos.pesquisaSos.sDataInicial}" locale="pt_BR" />


				<p:outputLabel value="Data Final" for="idDtaFim" />
				<p:calendar id="idDtaFim" pattern="dd/MM/yyyy" value="#{controleSos.pesquisaSos.sDataFinal}" locale="pt_BR"/>


			</p:panelGrid>
		</div>


		<p:dataTable id="tbl" var="sos" value="#{controleSos.listSos}"
			paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"
			paginator="true" rows="5" style="margin-bottom:20px">

			<f:facet name="{Exporters}">
				<h:commandLink>
					<p:graphicImage name="gestaosos/images/excel.png" width="24" />
					<p:dataExporter type="xls" target="tbl" fileName="listSos" />
				</h:commandLink>

				<h:commandLink>
					<p:graphicImage name="gestaosos/images/pdf.png" width="24" />
					<p:dataExporter type="pdf" target="tbl" fileName="listSos" />
				</h:commandLink>

			</f:facet>

			<p:column width="3%">
				<f:facet name="header">
					<h:outputText value="SOS" style="font-size:10px;color:Brown;font-weight:bold" />
				</f:facet>
				<h:outputText value="#{sos.sSolic}" style="font-size:12px;" />
			</p:column>

			<p:column width="3%">
				<f:facet name="header">
					<h:outputText value="SETOR" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sSetor}" style="font-size:12px;"/>
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="ROTINA" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sRotina}" style="font-size:12px;"/>
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="DATA DE ABERTURA" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sDataAbertura}" style="font-size:12px;" />
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="HORA DE ABERTURA" style="font-size:10px;color:Brown;font-weight:bold" />
				</f:facet>
				<h:outputText value="#{sos.sHoraAbertura}" style="font-size:12px;"/>
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="PRAZO DATA REAL" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sPrazoDataReal}" style="font-size:12px;"/>
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="PRAZO HORA REAL" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sPrazoHoraReal}" style="font-size:12px;"/>
			</p:column>

			<p:column width="8%">
				<f:facet name="header">
					<h:outputText value="DATA DE ENCERRAMENTO" style="font-size:10px;color:Brown;font-weight:bold" />
				</f:facet>
				<h:outputText value="#{sos.sDataEncerramento}" style="font-size:12px;"/>
			</p:column>

			<p:column width="8%"  >
				<f:facet name="header">
					<h:outputText value="HORA DE ENCERRAMENTO" style="font-size:10px;color:Brown;font-weight:bold"/>
				</f:facet>
				<h:outputText value="#{sos.sHoraEncerramento}" style="font-size:12px;" />
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="RESPONSAVEL" style="font-size:10px;color:Brown;font-weight:bold"  />
				</f:facet>
				<h:outputText value="#{sos.sResponsavel}" style="font-size:12px;" />
			</p:column>

			<p:column width="5%">
				<f:facet name="header">
					<h:outputText value="STATUS" style="font-size:14px;color:green;font-weight:bold" />
				</f:facet>
				<h:outputText value="#{sos.sLabelStatus}" rendered="#{sos.sStatus eq '1'}" style="color:green;font-weight:bold;font-size:10px" />
				<h:outputText value="#{sos.sLabelStatus}" rendered="#{sos.sStatus eq '2'}" style="color:red;font-weight:bold;font-size:10px" />
			</p:column>
		</p:dataTable>			
	</h:form>



			<h:panelGroup id="idGrafico" layout="block" styleClass="ui-fluid">
					  <h:panelGrid columns="2" columnClasses="left,right" style="width:100%">
			              <p:chart type="bar" model="#{chartView.animatedModel2}" style="width:1000px" responsive="true"/>
				      </h:panelGrid>
			</h:panelGroup>
	
	
		
			


</ui:define>

</ui:composition>`

Controle da pesquisa:
`package com.montreal.gestaosos.controller;

import java.io.Serializable;

import java.util.ArrayList;

import java.util.List;

import javax.faces.application.FacesMessage;

import javax.faces.context.FacesContext;

import javax.faces.model.SelectItem;

import javax.faces.view.ViewScoped;

import javax.inject.Inject;

import javax.inject.Named;

import com.montreal.gestaosos.excecoes.DaoException;

import com.montreal.gestaosos.model.PesquisaSOS;

import com.montreal.gestaosos.model.RelatorioSos;

import com.montreal.gestaosos.model.Setores;

import com.montreal.gestaosos.service.GestaoSos;

import com.montreal.gestaosos.uteis.Parametros;

/**

Gerenciador de tarefas
@author Douglas Dias
@return lista de setores, lista de sos

@throws DaoException
*/
@Named
@ViewScoped
public class ControleSos extends Parametros implements Serializable {

private static final long serialVersionUID = 1L;

@Inject
private GestaoSos gestaoSos;

private List listSos = new ArrayList();
private List listSetores = new ArrayList();

private static List selectItensSetores;

private Setores setores = new Setores();

private RelatorioSos relatorioSos = new RelatorioSos();
private PesquisaSOS pesquisaSos = new PesquisaSOS();

private FacesMessage msg = null;

public static void main(String[] args) {

ControleSos sos = new ControleSos();

sos.getSelectItenSetores();

}

/**

Responsavel por recuperar setores para pequisa
@return lista de setores

@throws DaoException
*/
public List getSelectItenSetores() {

if (selectItensSetores == null) {
selectItensSetores = new ArrayList();

for (Setores s : buscaSetores() ) {
 	selectItensSetores.add(new SelectItem(s.getSetor(), s.getSetor() + " - " + s.getNome()));
 }

}

return selectItensSetores;

}

/**

Responsável por pesquisar sos referente à setores pesquisados

*/
public void pesquisaSos() {

try {
 	
 	listSos = gestaoSos.sPesquisaSos(pesquisaSos);
 	
 	
 	if(listSos.size() == 0){
 	msg = new FacesMessage("Não existem SOS's nesse periodo.");
 	}else {
 	msg = new FacesMessage("SOS's Retornadas com sucesso!");	
 	}
 	FacesContext.getCurrentInstance().addMessage(null, msg);
 	
 } catch (DaoException e) {
 	this.addLog("[ERRO AO RECUPERAR PESQUISA DE SOS, COM ERRO: ]", e);
 }

}

public List buscaSetores() {

try {

 	listSetores = gestaoSos.sPesquisaSetores();
 	
 	if(listSetores.size() == 0){
 	msg = new FacesMessage("Pesquisa não retornou lista de setores");
 	FacesContext.getCurrentInstance().addMessage(null, msg);
 	}
 	
 	
 } catch (DaoException e) {
 	this.addLog("[ERRO AO RECUPERAR SETORES, COM ERRO: ]", e);
 }

 return listSetores;

}

public Setores getSetores() {

return setores;

}

public void setSetores(Setores setores) {

this.setores = setores;

}

public RelatorioSos getRelatorioSos() {

return relatorioSos;

}

public void setRelatorioSos(RelatorioSos relatorioSos) {

this.relatorioSos = relatorioSos;

}

public PesquisaSOS getPesquisaSos() {

return pesquisaSos;

}

public void setPesquisaSos(PesquisaSOS pesquisaSos) {

this.pesquisaSos = pesquisaSos;

}

public List getlistSetores() {

return listSetores;

}

public List getselectItensSetores() {

return listSetores;

}

public List getlistSos() {

return listSos;

}

}

`

Controle da Geração do gráfico:
`package com.montreal.gestaosos.controller;

import java.io.Serializable;

import java.util.HashMap;

import java.util.Map;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;

import org.primefaces.model.chart.Axis;

import org.primefaces.model.chart.AxisType;

import org.primefaces.model.chart.BarChartModel;

import org.primefaces.model.chart.ChartSeries;

import com.montreal.gestaosos.model.GeraGrafico;
import com.montreal.gestaosos.uteis.Parametros;

@ManagedBean
public class ChartView extends Parametros implements Serializable {

private static final long serialVersionUID = 1L;

private BarChartModel animatedModel2;
private HashMap<String, GeraGrafico> mpaGrafico = new HashMap<String, GeraGrafico>();
private GeraGrafico objGrafico = new GeraGrafico();

public void recebeInfGrafico(HashMap<String, GeraGrafico> mpaGrafico, GeraGrafico objGrafico) {
	this.mpaGrafico = mpaGrafico;
	this.objGrafico = objGrafico;
}

@PostConstruct
public void init() {
	createAnimatedModels();
}

public BarChartModel getAnimatedModel2() {
	return animatedModel2;
}

private void createAnimatedModels() {
	
	animatedModel2 = initBarModel(mpaGrafico);
	animatedModel2.setTitle(objGrafico.getDataPesquisa());
	animatedModel2.setAnimate(true);
	animatedModel2.setLegendPosition("ne");
	Axis yAxis = animatedModel2.getAxis(AxisType.Y);
	yAxis.setMin(0);
	yAxis.setMax(30);
	
}

private BarChartModel initBarModel(HashMap<String, GeraGrafico> mpaGrafico) {
	BarChartModel model = new BarChartModel();

	if (mpaGrafico.size() != 0) {

		for (Map.Entry<String, GeraGrafico> itemGrafico : mpaGrafico.entrySet()) {

			GeraGrafico objGrafico = new GeraGrafico();
			objGrafico.setQtdetotalSos(itemGrafico.getValue().getQtdeDentroPrazo() + itemGrafico.getValue().getQtdeForaPrazo());
			objGrafico.setQtdeDentroPrazo(itemGrafico.getValue().getQtdeDentroPrazo());
			objGrafico.setQtdeForaPrazo(itemGrafico.getValue().getQtdeForaPrazo());
			objGrafico.calularPorcentagem(objGrafico);

			ChartSeries setores = new ChartSeries();
			setores.setLabel("Setor: " + itemGrafico.getValue().getSetor());
			setores.set(FPRAZO, objGrafico.getPorcentagemForaPrazo());

			model.addSeries(setores);

		}

	} else {
		
		ChartSeries setores = new ChartSeries();
		setores.setLabel("Setor: teste " );
		setores.set(FPRAZO, 10);

		model.addSeries(setores);
		
	}
	return model;
}

No dao faço faço a pesquisa e faço o tratamento para selecionar as informações para mandar pro gráfico.
as informações vão certinha para o controlador do gráfico só que de lá não monta o gráfico fica o inicial
` objGrafico = mpaGrafico.get(objGrafico);

if (objGrafico == null) {

				objGrafico = geraGrafico(objRelatorioSos);

				if (objGrafico != null) {
					mpaGrafico.put(objRelatorioSos.getsSetor(), objGrafico);
				}

			}

			listaSos.add(objRelatorioSos);
		}
		
		
		controleGrafico.recebeInfGrafico(mpaGrafico, retonarDataPesquisa(objPesquisa, objGrafico));
		controleGrafico.init();
		`

Layout:
`

<h:head>

<f:facet name=“first”>





</f:facet>

<title>Relatório SOS</title>

<h:outputStylesheet library="gestaosos" name="styles/custom.css" />
<h:outputStylesheet library="gestaosos" name="styles/layout.css" />
<h:outputStylesheet library="gestaosos" name="styles/components.css" />

<h:outputScript target="body" library="primefaces" name="jquery/jquery.js" />
<h:outputScript target="body" library="gestaosos" name="javascripts/app.js" />

</h:head>

<h:body>

<header class="aw-topbar">
	<h:graphicImage library="gestaosos" name="images/logo.png" />
	
	<a href="#" class="aw-toggle  js-toggle"><i class="fa  fa-bars"></i></a>
</header>

<aside class="aw-sidebar  js-sidebar">
	<ui:include src="Menu.xhtml" />
</aside>

<section class="aw-content  js-content">
	<ui:insert name="content" />
</section>

</h:body>

Menu:
`<ui:composition xmlns=“http://www.w3.org/1999/xhtml”
xmlns:ui=“http://xmlns.jcp.org/jsf/facelets”
xmlns:h=“http://xmlns.jcp.org/jsf/html”>

<nav class="aw-menu">
	<ul>
		<li class="is-selected">
			<h:link><i class="fa  fa-fw  fa-file-text"></i>Gestão SOS</h:link>
		</li>
	</ul>
</nav>

</ui:composition>`

components: CSS

`/* TOGGLE */

.aw-toggle {

float: right;

line-height: 50px;

margin-right: 15px;

color: #fff;

}

/* MENU */

.aw-menu {

font-size: 1.1em;

}

.aw-menu > ul {

margin: 0;

padding: 0;

list-style: none;

}

.aw-menu > ul a {

display: block;

padding: 10px 15px;

text-decoration: none;
font-weight: 500;
color: #373737;

}

.aw-menu > ul i {

margin-right: 6px;

}

.aw-menu > ul a:hover, .aw-menu > ul a:focus {

background-color: #dfdfdf;

}

.aw-menu > ul .is-selected {

border-left: 3px solid #1e94d2;

background-color: #f3f3f3;

}

.aw-menu > ul .is-selected a {

margin-left: -3px;

color: #1e94d2;

}

/* PAGE-TITLE */

.aw-page-title {

margin: 0;

padding: 20px 0;

font-size: 1.5em;
color: #373737;

custom CSS:

`/* BASE */

body {

margin: 0;

font-size: 13px;

font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

}

/* TABVIEW */

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {

color: #555;

}

@media (max-width: 640px) {

.ui-tabs.ui-tabs-top > .ui-tabs-nav li {

width: 100%;

}

}

/* PANELGRID */

.ui-panelgrid.panelgrid-noborder .ui-grid-responsive {

border: none;

}

@media (max-width: 640px) {

.ui-panelgrid.panelgrid-noborder .ui-grid-responsive .ui-grid-row {

border: none;

}

}`

layout CSS:

`/* TOPBAR */

.aw-topbar {

position: fixed;

top: 0;

right: 0;

left: 0;

min-height: 50px;

z-index: 9999;

background-color: #f44d11;

}

.aw-topbar > img {

margin-top: 10px;

margin-left: 5px;

}

/* SIDEBAR */

.aw-sidebar {

position: fixed;

top: 50px;

bottom: 0;

left: 0;

width: 210px;

margin-left: -211px;

z-index: 9998;

transition: margin-left 0.5s;

overflow-y: auto;

background-color: #f6f6f6;
border-right: 1px solid #eaeaea;

}

.aw-sidebar.is-toggled {

margin-left: 0px;

}

@media (min-width: 960px) {

.aw-sidebar {

margin-left: 0px;

}

.aw-sidebar.is-toggled {
	margin-left: -211px;
}

}

/* CONTENT */

.aw-content {

padding: 0 15px;

margin-top: 50px;

transition: margin-left 0.5s;

}

@media (min-width: 960px) {

.aw-content {

margin-left: 210px;

}

.aw-content.is-toggled {
	margin-left: 0;
}

14 Respostas

aix 16 de abr. de 2016

Ola Douglas_Dias,

você postar o .xhtml para podermos ver como você esta utilizando?

Douglas_Dias 16 de abr. de 2016

postei lá aix, se puder dar um força

aix 16 de abr. de 2016

Eu não entendi algumas coisas, vamos la:

esta chamada de método animatedModel2 = initBarModel(mpaGrafico); de onde vem, este initBarModel com o mapa de graficos? é da parametros que você herda?

Pois eu penso que o correto seria invocar initBarModel(HashMap<String, GeraGrafico> mpaGrafico)

ex:

Eu deixaria o método private void createAnimatedModels() como public e adicionaria um id em p:chart atualizando o gráfico e não toda a tela com @form, na view eu faria + ou - assim:

<p:commandButton id="grafico" value="Gráficos" icon="ui-icon-extlink" update="frm:reportGraph"
					 actionListener="#{chartView.createAnimatedModels()}"   />

<p:chart id="reportGraph" type="bar" model="#{chartView.animatedModel2}" responsive="true"/>

Douglas_Dias 17 de abr. de 2016

Aix, na verdade esse botão <p:commandButton id="grafico" value="Gráficos" icon="ui-icon-extlink" update="@form" actionListener="#{chartView.init}" oncomplete="PF('itemGrafico').show()" />

era só um teste que tava fazendo para gerar o gráfico apertando esse só que vi que teria que fazer a pesquisa duas vezes.

o gráfico ta na tela inicial quando carrego a primeira vez não mostra nda pois ainda não foi feita a pesquisa mais quando seleciono as informações para gera a tabela com essas informações gero o gráfico, e a informação para a geração até vão certas só que não carrega o gráfico novamente
vou postar as classe pro seu entendimento melhor

aix 17 de abr. de 2016

Sua ChartView esta em um scopo de @Request e usa o @ManageBean do JSF enquanto que o resto da aplicação utiliza o CDI(@Named) , faça um teste por favor tira esse ManageBean e adiciona o @Named e anota esse ChartView com @ViewScoped e me como ficou.

Douglas_Dias 17 de abr. de 2016

aix, não funcionou deu a mesma coisa, o gráfico não recarregou o que acho estranho que a tabela carrega normalmente.
e uma coisa que percebi no final quando eu chamo a classe para monta o gráfico ela monta todas as informações

aix 18 de abr. de 2016

Brothe desculpe não ter respondido ontem mas meu note estragou o teclado, olha só se os dados estão certo indo para o componente veja com o firebug se eles estão la na view e se não é alguma propriedade do CSS que esta impedindo a visualização, testa também o update do primefaces se esta mesmo atualizando esse gráfico, notei que tem um id no panelGroup do grafico se ele não é utilziado retira ele ou então passa la no update todo o caminho do componente a ser atualizado, se não rolar me fala vou vou montar um teste aqui, abração.

Douglas_Dias 18 de abr. de 2016

vou testar aki

Douglas_Dias 18 de abr. de 2016

não sei se pode ter alguma coisa haver mais estou usando um layout (Templantes) que ganhei do curso
vou postar eles para ver se eles

Douglas_Dias 18 de abr. de 2016

ai na impressa não consigo instalar o firefox e o debug do Chrome não pega nenhum irregularidade

Douglas_Dias 18 de abr. de 2016

é isso que aparece quando debug, perdoa minha ignorância mais não sei interpretar isso

aix 21 de abr. de 2016

ola Douglas,

não esqueci de você manu, meu note esta com problemas no teclado recem hoje consegui um emprestado mas quanto ao seu problema pode ser sim o template que faz não renderizar o seu gráfico, o que poso dizer é que tenho um software que utiliza do mesmo gráfico e funciona bem, então eu recomendo você testar criando um outro projeto e criando só a tela com o grafico sem esses CSS’s que ganhou no curso tudo do mais simples possível quem sabe assim não funciona e você consiga identificar o problema no seu software, se não quiser criar outra app então reitre o _template da renderização desta tela para ver se tem resultados, abração.

Douglas_Dias 25 de abr. de 2016

e ai velho, conseguimos resolver aqui, finalmente
analisando mais afundo reparei que o gráfico gerava uma vez e depois ele entrava no método novamente e montava o gráfico vazio mudei o método de geração e funcionou perfeitamente.
muitoooo obrigado pela ajuda.

aix 25 de abr. de 2016

que bom que resolveu manu, abração,

Criado 16 de abril de 2016

Ultima resposta 25 de abr. de 2016

Respostas 14

Participantes 2

14 Respostas

Topicos relacionados