Community Dashboard Framework

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á visualizar
está imagem;
 • Agora clique na caixa para 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 a 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 -- >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.12. 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 Em Column  Row  Column  Row -- >Html, dê um nome
igual a Grafico_Sexo, HtML atribua o valor igual a 18 para “Font Size” e
um titulo para este gráfico, como: Analise do sexo desta comunidade;
4.9. Selecione Column  Row  Column  Row e através do link adicione
uma linha;
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” através 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 página 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” atribui
para 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” atribui para 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. Em “Url Template”, ao clicar na caixa ao lado de “Url Template” aparecerá
uma janela, então selecione Jump to Url e clique em Next e digite na UrL:
javascript:Dashboards.fireChange('alunoParam','{PARAM}') e clique em ok.
Nome do parâmetro!
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 Silva (biuniversidade@gmail.com);
Marcondes Lessa (condaolessa@gmail.com).