community_dashboard_framework
TRANSCRIPT
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 ROWSfrom [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 ROWSfrom [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 ROWSfrom [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.
7.17. Faça o mesmo procedimento para os demais “Charts”, daí o Components Painel deve ficar assim;
Nome do parâmetro!
8. Vamos visualizar o Dashboard:
8.1. Clique no link para visualizar seu dashboard;8.2. O dashboard deve ficar assim;
