Community Dashboard Framework - Simples Dashboard

Dashboards são coleções de gráficos e/ou relatórios geralmente agrupados com um mesmo tema para facilitar a visualização e compreensão das informações pelos usuários.

O Pentaho Community Edition possui um framework de criação de dashboards chamado Community Dashboard Framework (CDF) que facilita bastante a criação de dashboards. O CDF, porém requer de seus desenvolvedores conhecimento de HTML, JavaScript, JQuery e CSS, o que pode dificultar a criação de dashboards por desenvolvedores menos experientes ou até mesmo por usuários comuns.

Com o intuito de resolver este problema, foi desenvolvido pela comunidade o CDF Dashboard Editor (CDF-DE). O CDF-DE tem uma interface simples e intuitiva com operações drag and drop (arrastar e soltar) possibilitando a criação de dashboards com muito mais facilidade.

No nosso trabalho, utilizados o CDF-DE para efetuar a geração dos Dashboards. É possível efetuar a instalação seguindo os seguintes passos:

• Baixe o arquivo: cdf-de_0.2.tar.bz2. O arquivo encontra-se disponível para download em: http://code.google.com/p/cdf-de/downloads/list
• Descompacte o arquivo cdf-de_0.2.tar.bz2.
• Copie a pasta system para: biserver-ce\pentaho-solutions.
• Copie a pasta pentahomeeting09 para: biserver-ce\pentaho-solutions.
• Copie a pasta cdf para: biserver-ce\tomcat\webapps\pentaho.
• Reinicie o servidor do Pentaho

Para efetuar a geração de dashboards é necessário seguir os seguintes passos:

• Inicie o Pentaho e vá em File --> New --> New Dashboard. Deverá visualuizar está imagem;

• Agora clique no linkpara escolher um template;
• Neste exemplo utilizo o template “Two x One Template”, selecione o modelo desejado e clique em ok.
• Daí aparecera uma mensagem “Are you sure you want to load the template? “ - Tem certeza que quer carregar o modelo? Clique em ok.

  1.      Selecione o link “Row” (linha) e atribua um nome na coluna value, tipo name igual a topo, pois esta linha define o topo deste layout;

1.1.           Em “height” (altura) atribua valor igual a  100;

1.2.           Em “comers”  selecione  Simple;

1.3.           Os demais espaços deixem em branco;

1.4.    O layout de ficar assim;

1.5.           Selecione Row à Column  e atribua o nome igual a  topo;

1.6.           Em “span size” atribua o valor igual a 24;

1.7.           Em “comers” selecione Round e em “Height” (altura) atribua o valor igual a 75;

1.8.           Em “BackgroundColor “ escolha a cor de sua preferência;

1.9.           Selecione Row à Column  à Html e na caixa  da coluna da direita coloque o titulo e a cor de sua preferência para o seu dashboard;

  2.      Próxima “Row” (linha) com nome igual a body (corpo da pagina) deixe como está;

 2.1.           Selecione  Row à Column, dê um nome igual a painel_da_esquerda, em “Span size” atribua o valor igual a 12 e deixe os demais espaço como estão;

2.2.           Selecione Row à Column à Row, em “Height” (altura) atribua o valor igual a 220 e dê um nome igual a Vinculo_aluno (nome da tabela que  utilizará para o gráfico desta coluna);

2.3.           Agora selecione Row à Column à Row à Column, dê um nome para esta coluna igual a painel_1;

2.4.           Em “Span size” atribua o valor igual a 10;

2.5.           Em “Prepend size” e “Append size” atribua o valor igual a 1;

2.6.           Em “Comers selecione Round, em “Height” (altura) atribua o valor igual a 215 e os demais espaços deixe como estão;

2.7.           Selecione Row à Column à Row à Column  e adicione uma nova “Row” (linha) no link

 ;

2.8.           Em Row àColumn à Row à Column àRow, dê um nome igual a  Titulo_aluno e atribua valor igual a 70 em “Height”;

2.9.           Selecione  Row àColumn à Row à Column àRow e adicione html no link ;

2.10.           Selecione Row àColumn à Row à Column àRow -- >Html e  dê o nome Titulo_Grafico, em HTML escreva o titulo do gráfico igual Vinculo Aluno e atribua em “Font Size” o valor igual a 18, o qual será o tamanho da fonte deste titulo;
2.11     Selecione Row àColumn à Row à Column àRow e adicione uma "Row" através do link

;

2.12.           Selecione Row àColumn à Row à Column àRow -- >Html -- >Row e dê o nome igual a  Aluno_objeto, em “Height” atribua o valor igual a 50 e os demais campos deixe como estão;

2.13.           Selecione Row àColumn à Row à Column àRow -- >Html -- >Row e adicione “Space” através do link   e atribua o valor igual a 5 em “Height” ;

3.   Selecione a próxima linha, logo depois de “Space” e dê o nome igual a  Escolaridade;

3.1.           Selecione Row à Column e dê o nome igual a  Painel_2_esquerda;

3.2.           Em “Span size” atribua o valor igual a 10;

3.3.           Em “Prepend size” e “Append size” atribua o valor igual a 1;

3.4.           Em “Comers selecione Round, em “Height” (altura) atribua o valor igual a 215 e os demais espaços deixe como estão;

3.5.           Selecione Row àColumn e adicione uma “Row” (linha) através do link;

3.6.           Em Row àColumn à Row , dê um nome igual a  Titulo_Escolaridade e atribua valor igual a 70 em “Height”;

3.7.           Selecione Row àColumn à Row e através do link  

adicione HTML;

3.8.           Selecione Row àColumn à Row -- >Html, dê um nome igual a Grafico_Escolaridade,  THML atribua o valor igual a 18 para “Font Size” e um  titulo para este gráfico, como: Escolaridade desta comunidade;

3.9.           Selecione Row àColumn à Row  e através do link  

adicione uma linha;

3.10.           Selecione Row àColumn à Row -- >Html -- > Row, dê o nome igual a Escolaridade_Objeto, em “Height” atribua o valor igual a 50 e os demais campos deixe como estão;

4.      Selecione a coluna depois da linha Escolaridade_Objeto e dê o nome igual a Painel_da_direita;

4.1.           Em “Span size” atribua o valo de 12 e deixe os demais campos como estão;

4.2.           Selecione Column à Row, dê o nome igual a  separa_rodape e atribua o valor de 440 em “Height”;

4.3.           Selecione Column à Row à Column, dê o nome igual a  Painel_3_direito, atribua o valor 10 em “Span size” e  para “Prepend size” e “Append size” atribua o valor 1;

4.4.            Em “Height” atribua o valor igual a 435;

4.5.           Selecione Column à Row à Column e adicione uma “Row” (linha) através do link ;

4.6.           Em Column à Row à Column à Row , dê um nome igual a  Titulo_Sexo e atribua valor igual a 70 em “Height”;

4.7.           Selecione Column à Row à Column à Row e através do link   adicione HTML;

4.8. Selecione Column --> Row --> Column -->Row -->Html, dê um nome igual a Gráfico_Sexo, em HTML atribua o valor igual a 18 para "Font Size" e um tituloparaeste gráfico, como: Analise do sexo desta Comunidade;

4.9. Selecione Column--> Row --> Column --> Row e adicione uma linha através do link 

;

4.10.           Selecione Column à Row à Column à Row -- >Html à Row, dê o nome igual a     Sexo_Objeto, em “Height” atribua o valor igual a 50 e os demais campos deixe como estão;

  4.11.           Selecione Column à Row à Column à Row -- >Html à Row e adicione “Space” ataves do link  e atribua o valor igual a 5 em “Height”;

5.      A “ROW “ (linha) após Space define o rodapé desta pagina.

 5.1.           O Layout de sua pagina deve ficar assim;

  6.     Agora defina o DATASOURCE.

6.1.           Clique no link que fica no topo a direta da pagina;

6.2.           Selecione o link e depois clique em OLAP MDX query para adicionar uma query;

6.3.           Daí aparecerá uma caixa para  escolher o Schema e o cubo que utilizará neste dashboard, depois que selecionar estes clique em ok;

6.4.           Nomeia este MDX query como aluno_query e crie  um código em MDX para selecionar as coluna(s) ou tabela(s), Exemplo;

“select NON EMPTY {[Measures].[Quantidade]} ON COLUMNS,

  NON EMPTY {[Vinculo Aluno].[All Vinculo Alunos].[Aluno], [Vinculo Aluno].[All Vinculo Alunos].[Nao aluno]} ON ROWS

from [Pessoa Fisica]”

6.5.           Daí faça o mesmo procedimento acima para os demais MDX query como: Escolaridade_Query e Sexo_query.

6.6.           O código do MDX query – Escolaridade_Query para este exemplo é:

” select NON EMPTY {[Measures].[Quantidade]} ON COLUMNS,

  NON EMPTY {[Escolaridade].[All Escolaridades].[Doutorado], [Escolaridade].[All Escolaridades].[Especializacao], [Escolaridade].[All Escolaridades].[Graduacao], [Escolaridade].[All Escolaridades].[Mestrado], [Escolaridade].[All Escolaridades].[Pos-Doutorado]} ON ROWS

from [Pessoa Fisica]”

6.7.           O código do MDX query – Sexo_Query  com parâmetro definido para este exemplo é:

“ select NON EMPTY {[Measures].[Quantidade]} ON COLUMNS,

  NON EMPTY {[Sexo].[All Sexos].[Feminino], [Sexo].[All Sexos].[Masculino]} ON ROWS

from [Pessoa Fisica]

where (

[Vinculo Aluno].[All Vinculo Alunos].[${alunoParam}], [Escolaridade].[All Escolaridades].[${escolaridadeParameter}]

) “

6.8.           O Datasource Painel deve ficar assim;

 7.      Agora vou definir os componentes deste dashboard:

7.1.           Clique no link que fica no topo da pagina a direita;

7.2.           Selecione o link e depois clique em “Simple parameter” para adicionar um Paramater;

7.3.           Nomeia este parâmetro como alunoParam e em “property value” atribue pra All Vinculo Alunos;

7.4.           Selecione o link  e depois clique em “Simple parameter” para adicionar outro Paramater;

7.5.           Nomeia este parâmetro como escolaridadeParameter e em “property value” atribue pra All Escolaridades;

7.6.           Selecione o link e depois clique em Chart component para adicionar uma JFree Chart;

7.7.           Nomeia esta JFree Chart como alunoChart;

7.8.           Em “Chart Type” selecione Pie Chart (tipo de gráfico);

7.9.           Em “Listeners”  selecione o parâmetro alunoParam,

7.10.       Em “Datasource” selecione aluno_Query;

7.11.       Em “Execute at start”  selecione True;

7.12.       Em “HtmlObject” selecione Aluno_Objeto;

7.13.       Em “Dataset Type” selecione Category Dataset;

7.14.       Em “Orientation” selecione Vertical ou Horizontal;

7.15.       Em “Height” atrigue o valor igual a 200 e 400 em “Width”;

7.16.       Na coluna property tem uma “Url Template” que fica no final desta página, clique na caixa ao lado de “Url Template” (fica na coluna value) aparecerá uma janela, então selecione "Fire Change", clique em Next e depois selecione o parametro desejado, exemplo: "escolaridadeParameter". Depois sua URL deve ficar assim:  UrL: javascript:Dashboards.fireChange('escolaridadeParameter','{PARAM}') e clique em ok.

7.17.       Faça o mesmo procedimento para os demais “Charts”, daí o Components Painel deve ficar assim;

 8.      Vamos visualizar o Dashboard:

8.1.           Clique no link para visualizar seu dashboard;

8.2.           O dashboard deve ficar assim;

Créditos

Hugo Alex Sailva (biuniversidade@gmail.com);

Marcondes Lessa biuniversidade@gmail.com).

  Esta documentação é livre; é possível redistribuí-la e/ou modificá-la sob os termos da

Licença Pública Geral GNU conforme publicada pela Free Software Foundation; tanto na

sua versão 2, como qualquer versão posterior (a seu critério) .

     A distribuição desta documentação é realizada com o objetivo de que ela auxilie os

iniciantes da ferramenta e que não tenha qualquer garantia implícita de comerciabilidade

ou adequação a uma finalidade específica.

     Consulte a Licença Pública Geral do GNU para mais detalhes.

http://creativecommons.org/licenses/GPL/2.0/
http://creativecommons.org/licenses/GPL/2.0/deed.pt