1 Hacking CTools. CDF Community Dashboard Framework CDE Community Dashboards Editor

Transcrição

1 1 Hacking CTools CDF Community Dashboard Framework CDE Community Dashboards Editor

2 Sumário 1Hacking CTools...1 Exercícios de laboratórios C**Tools...3 HACK63 - Instalando o Ctools pelo repositório....3 HACK64 Instalando as C*tools (personalizado)...4 HACK65 Criando um template para o Dashboard com o CDE...4 HACK66 Criando um filtro no Dashboard com o CDE Wizard...7 HACK67 Criando um gráfico no Dashboard com o CDE Wizard...9 HACK68 Usando recursos de filtro do gráfico do dashboard...11 HACK69 Criando um datasource para uso em gráficos sem wizard...11 HACK70 Usando o CDA para testar a query do datasource...12 HACK71 Criando elemento gráfico CCC sem o wizard do CDE...13 HACK72 Usando um parâmetro de filtro no gráfico...13 HACK73 Usando uma coluna do gráfico como parâmetro para filtro de outro gráfico...14 HACK74 Entendendo o Javascript e debugando...17 HACK75 Destacando a seleção de uma gráfico...17 HACK76 Novos efeitos de animação para dashboards...18 HACK77 Destacando uma fatia do gráfico de pizza...18 HACK78 Adicionando uma tabela de dados (table component)...18 HACK79 Personalizando Table Component Sobre o Documento...19 Créditos...20 Histórico do Documento...20

3 Exercícios de laboratórios C**Tools Os hacks serão inicialmente usados e criados para a prática dos conhecimentos adquiridos no curso e posteriormente podem ser uma base de conhecimento para consulta. HACK63 - Instalando o Ctools pelo repositório. 1. Para copiar a versão mais recente das ferramentas C**Tools acesse o site e clique na aba 'webdetails': CDA, dois arquivos zip: - código: cda-trunk-*.zip - exemplos: cda-samples-trunk-*.zip CDE, 2 arquivos zip: - código: pentaho-cdf-dd-trunk-*.zip - exemplos: pentaho-cdf-dd-solution-trunk-*.zip CDF - 2 arquivos zip código: pentaho-cdf-trunk-snapshot.zip exemplos: pentaho-cdf-solution-trunk-snapshot.zip 1. Parar seu servidor Pentaho. 2. Faça um backup do diretório do Pentaho BI../biserver-ce/pentaho-solutions/ 3. Delete os diretorios abaixo ( alguns diretórios podem não existir se for a primeira instalação):../biserver-ce/pentaho-solutions/system/pentaho-cdf../biserver-ce/pentaho-solutions/system/pentaho-cdf-dd../biserver-ce/pentaho-solutions/system/cda../biserver-ce/pentaho-solutions/cdf../biserver-ce/pentaho-solutions/bi-developers/cda../biserver-ce/pentaho-solutions/cde_sample 4. Descompacte o CDF (pentaho-cdf-trunk-snapshot.zip) na pasta../biserver-ce/pentaho-solutions/system/ Descompacte os exemplos CDF (pentaho-cdf-solution-trunk-snapshot.zip) em../biserver-ce/pentaho-solutions/ 5. Descompacte o CDA (cda-trunk-*.zip) em../biserver-ce/pentaho-solutions/system/ descompacte os exemplos do CDA (cda-samples-trunk-*.zip) na pasta../biserver-ce/pentaho-solutions/ (exemplos do diretório bi-developers) 6. Descompacte o CDE (pentaho-cdf-dd-trunk-*.zip) em../biserver-ce/pentaho-solutions/system/ Descompacte os exemplos do CDA (pentaho-cdf-dd-solution-trunk-*.zip) na pasta../biserver-ce/pentaho-solutions/ 7. Inicie seu Servidor Pentaho.

4 HACK64 Instalando as C*tools (personalizado) 1. Acesse o ambiente de EAD e faça o download da instalação personalizada das c*tools 2. Descompacte o arquivo pentaho-solutions-ctools.zip em uma área temporária 3. Pare o server Pentaho 4. Acesse o diretório /opt/pentaho/biserver-ce/pentaho-solutions/system e exclua o diretório pentaho-cdf (este é o framework na versão antiga) 5. Copie a pasta pentaho-solutions para o diretório biserver-ce sobrescrevendo / mesclando os seu conteúdo 6. Reinicie o BI Server e veja que o novo ícone está disponível (CDE) HACK65 Criando um template para o Dashboard com o CDE 1. Acesse o CDE pela interface do Pentaho User Console ( PUC ). 2. Para desenvolver utilize browsers que suportem padrões W3C como Mozilla Firefox e Chome para desenvolver dashboards, browsers Internet Explorer não tem suporte por completo aos recursos da Internet definidos pela W3C. Que são bem explorados pelas C*Tools. 3. Trabalhe com seu browser na opção de tela cheia, pois alguns botões podem ser ocultados sem esta opção ( F11 Firefox ). 4. Será aberta a tela abaixo, e inicialmente temos que selecionar um template para criarmos o dashboard, clique no icone Apply template indicado na imagem. 5. Ao clicar será aberta uma tela parea selecionar um modelo de template, vamos utilizar um dashboard com filtro então escolha o modelo Top Filter Template conforme imagem abaixo e clique em ok:

5 6. Apoś selecionar e clicar em Ok uma tela virá para confirmação da seleção do template, clique em ok.

6 7. Agora vamos salvar nosso dashboard, clique em salvar e salve ele na solution setorcomercial na pasta painéis com o nome painel02, conforme imagem abaixo. 8. Após selecionado e confirmado serão criados os elementos HTML para apresentação do Dashboard, conforme imagem abaixo. 9. Clique em preview para conferir como está o seu dashboard que neste momento ainda tem somente um template formado por divs outros elementos básicos do HTML. 10. Para alterar o nome do seu dashboard podemos acessar a opção layout e navegar na estrutura do Layout Row Column Html e clique na propriedade HTML no botão ( ). 11. Altere a descrição que está no comando H2 do HTML para Painel de Vendas, verifique que neste item você pode colocar qualquer comando HTML. 12. Salve e teste seu dashboard que deve estar como o modelo abaixo:

7 HACK66 Criando um filtro no Dashboard com o CDE Wizard 1. Vamos agora criar um componente de seleção usando o wizard embutido no CDE, sempre crie primeiramente o componente de seleção pois o mesmo será base para fazer filtro nos demais gráficos então ele deve ser inserido primeiro para podemos usar os dados no filtro. Clique em Datasource e Wizards, conforme imagem: 2. Clique em OLAP Selector Wizard e será aberta a tela abaixo, para configuração de nosso componente de filtro, selecione na opção Cube o nosso cubo Setor Comercial / Pedidos e veja que serão apresentados as dimensões e medidas criadas. 3. Abra a medida Período e arraste o o nível ano para Rows, sera apresentado uma preview com um combo dos anos. Coloque a propriedade name como FiltroAno e a propriedade HTML Object como Filter Panel conforme imagem abaixo:

8 4. Quando clicar em OK o Wizard vai criar diversas configurações e não poderá ser mais aberta esta tela para alterações nesta componente, apenas fazer outro novo. Verifique que pode ser implementado a função Top Count para listar apenas as 10 mais recentes! 5. Salve novamente o dashboard. 6. Agora vamos testar se o filtro esta aparacendo em nosso dashboard, clique em preview e veja como está sendo apresentado, será aberto um combo no painel de filtro com os anos de seus pedidos.

9 HACK67 Criando um gráfico no Dashboard com o CDE Wizard 1. Com já temos o combobox de seleção para filtro criado, vamos agora criar um gráfico de barra com a dimensão de vendedores usando o filtro do combobox. 2. No CDE clique em datasource Wizard Olap Chart Wizard e configure o gráfico da seguinte forma : - Selecione o Cubo Setor Comercial / Pedidos; - Arraste a dimensão / nível vendedor para Rows - Arraste a medida valor para Columns - Como já fizemos um combo ele automaticamente criou uma opção de filtro que pode ser usada neste gráfico, então selecione o campo de filtro FiltroAnoParameter para Filters - Configure a propriedade name para grafico01 - Configure a propriedade title para Venda por Vendedor - Configura a propriedade HTML Object com Panel_1 - Mude a orientação do Gráfico para Vertical veja abaixo a imagem do Wizard preenchido com estas opções citadas acima.

10 3. Clique em Ok, clique em Save e depois teste em Preview. O mesmo sairá um pouco fora de centro mais já vai estar funcional e aplicando o filtro. 4. Agora vamos melhorar a tamanho da área de visualização do gráfico, acesse a opção components e na barra de componentes, dentro de um Group encontre o componente com o CCC bar Chart grafico01chart e altere as propriedade Width para 250 e Height mantenha 300, salve e teste com o preview. 5. Altere a propriedade Series in Rows para TRUE a assim dar cor diferentes de acordo com o vendedor., veja abaixo com o mesmo deve ficar: 6. Salve o Dashboard.

11 HACK68 Usando recursos de filtro do gráfico do dashboard 1. No Preview do gráfico o usuário pode filtrar de acordo com a legenda, selecione o ano de 2011 e clique sobre a legenda Sr.Gisele e Sr.Viviane ( em nosso exemplo em laranjado e vermelho respectivamente ), e verifique que ao clicar o mesmo e retirando da apresentação do gráfico. Veja na imagem o filtro aplicado conforme orientado: HACK69 Criando um datasource para uso em gráficos sem wizard. 1. Primeiramente devemos inserir a consulta MDX ou consulta SQL, o CDE aceita ambas as consultas e fontes de dados. Vamos criar uma consulta MDX para podermos praticar esta linguagem de consulta. Acesse a opção Data Sources, clique em MDX Queries e seleciona a opção mdx over mondrianjndi e clique sobre ela para o datasource ser criado na lista. 2. Será criado no Group do Data Source um novo com o nome mdx over mondrianjndi.

12 3. Clique no data source mdx over mondrianjndi e configure as propriedades do datasource, a propriedade name adiciona como : query_mdxregiao 4. Na propriedade Jndi informe : datawarehouse_olap 5. Na propriedade Mondrian Schema informe o nome do se cubo : Setor Comercial 6. Na propriedade query adicione o comando MDX abaixo para listar as vendas agrupadas por estado, repare que neste primeiro momento estamos adicionado um filtro estático para o ano de 2011 e um filtro estático para o vendedor Sr.Marcio de acordo com a claúsula MDX. Obs. Caso você tenha criado o cubo, as suas dimensões, hierarquias, nível ou medidas criadas no schema-workbeanch, podem ter nomes similares e não idênticos aos abaixo, então use o JPivot/MDX para validar se o MDX funciona com seu cubo criado em seu pentaho BI Sever, caso não funciona adapte os nomes, o MDX não é case-sensitive mais os nomes das dimensões, hierarquias, níveis e medidas são case-sensitive. SELECT NON EMPTY {Hierarchize({[Measures].[Total]})} ON COLUMNS, NON EMPTY {Hierarchize({[Regiao].[Regiao].Members})} ON ROWS FROM [Pedidos] WHERE CrossJoin({[Periodo].[2011]}, {[Vendedores.Vendedor]. [Sr.Marcio]}) HACK70 Usando o CDA para testar a query do datasource. 1. Vamos analisar agora se a consulta está funcionando, este um passo importante a ser executado pois no CDE não conseguimos testar uma consulta do SQL ou MDX em seu ambiente de desenvolvimento, para testa-lo, porém podemos usar o CDA, salve o seu dashboard. 2. Para testar a consulta via CDA após salvar o dashboard acesse sua solution setorcomercial/painel e veja um arquivo chamado painel2.cda ( sempre será o mesmo nome do seu dashboard ), clique sobre o mesmo e uma tela do CDA será aberta. 3. Na opção DataAccess selecione a sua query, query_mdxregiao, se os dados forem apresentados logo abaixo sua consulta foi executada com sucesso usando a conexão jndi configurada no Pentaho BI Server.

13 HACK71 Criando elemento gráfico CCC sem o wizard do CDE. 1. Agora retorna ou CDE e vamos adicionar um componente de gráfico para consumir esta consulta SQL, clique em components e clique na opção charts e selecione a o elemento CCC Pie Chart, será criado um novo componente na lista de componentes. 2. Selecione componente CCC Pie Chart e configure suas propriedades. 3. Name: graficopizzaregiao 4. Width : 250, Height : Datasource: query_mdxregiao 6. Title: Vendas por região 7. HtmlObject : Panel_2 8. Salve e teste em preview se o gráfico pizza aparece corretamente no segundo painel ( panel_2), neste momento o mesmo está estático independente do ano que selecionar ou vendedor que clicar o resultado ainda será o mesmo pois teremos que montar esta interação entre filtro e entre gráficos nos próximos hacks. HACK72 Usando um parâmetro de filtro no gráfico. 1. Para trabalharmos com parâmetros nos gráficos o gráfico deve estar escutando as variáveis de parâmetros então o primeiro item a ser feito e selecionar o gráfico que vai receber o parâmetro, no nosso caso o gráfico graficopizzaregiao, clique na propriedade Listeners e selecione a parâmetro FiltroAnoParameter, com isso o gráfico visualiza o parâmetro.

14 2. Agora para trocar capturar o conteúdo da varíavel contida no ( combobox ), temos que criar um parametro neste componente. Clique em parameters, e na opção arg informe uma variável chamada ano na opção value clique nos botão ( ) e seleciona o parâmetro FiltroAnoParameter, com isso a variável ano vai receber o valor que esta em FiltroAnoParameter mais ainda temos mais alguns ajustes! 3. Agora vamos fazer com que o datasource e o MDX recebam este parâmetro para filtro, clique em datasource e clique na ultima MDX criada query_mdxregiao. Clique em parameters e na opção name informe ano, pode deixar o value vazio e informe String na opção Type, com isso o datasource pode enxergar a variável ano e utiliza-la em suas query MDX.

15 4. Agora vamos usar o parâmetro na consulta MDX! Selecione a opção query, e altere a query MDX conforme abaixo. Está em negrito a alteração realizada no MDX original, veja que foi adicionado uma variável com a sintaxe do CDF : ${ano}, que vai conter os valores de acordo com o nosso combobox que retorna em o valor nível da hierarquia selecionado, ex: [periodo].[2011]. SELECT NON EMPTY {Hierarchize({[Measures].[Total]})} ON COLUMNS, NON EMPTY {Hierarchize({[Regiao].[Regiao].Members})} ON ROWS FROM [Pedidos] WHERE CrossJoin({${ano}}, {[Vendedores.Vendedor]. [Sr.Marcio]}) 5. Salve e teste fazendo o preview, se não houverem dados em algum ano ( ex 2010 ) será mostrada a mensagem no data found, altere o ano para ver o gráfico sendo carregado. HACK73 Usando uma coluna do gráfico como parâmetro para filtro de outro gráfico. 1. A framework CDF permite a passagem de parâmetros através dos componentes gráficos criados, por exemplo se clicar em uma coluna com o nome do vendedor ele pode aplicar este filtro deste vendedor no segundo gráfico, e é isso que faremos agora. 2. Vamos criar um parametro para podermos utiliza-lo, acesse components, clique no item generics e adicione um simple Parameter, na propriedade name informa param_vendedor e na propriedade Property value informe o MDX: [Vendedores.Vendedor].[Todos Vendedores] Obs. Se necessário adapte o MDX aos nomes referentes ao seu cubo 3. Agora temos que preparar o gráfico de barra para passar o parâmetro para o gráfico Pizza usando o parâmetro param_vendedor como ponte de ligação. Entre em no CDE em Components e selecione o Grafico01Chart e altere a propriedade Clickable para True. 4. Vamos adicionar uma ação javascript ao clicarmos na barra do Gráfico, Clique na propriedade Click action e adicione o comando abaixo:

16 function(scene){ s = "[Vendedores.Vendedor].["+scene.vars.series.value+"]"; alert(s); Dashboards.fireChange('param_vendedor',s) } 5. Com isso o gráfico está pronto para fazer a passem de parâmetro porém, o outro gráfico não está pronto para receber estes parâmetros, nem mesmo a função Dashboards.fireChange será executada neste momento. 6. Clique no gráfico de Pizza Clique na propriedade listeners e selecione todos os parâmetros que em nosso caso será selecionado o parâmetro que vamos utilizar filtro de vendedores: param_vendedor. 7. Faça um preview e clique sobre o gráfico de vendedores ( em alguma coluna ) e verifique que a função está sendo executada e recarregando os gráficos porém ainda não estamos usando o parâmetro. 8. Agora vamos criar um variável/argumento para receber o valor do gráfico anterior e para conseguirmos utilizar em nossos filtros. Clique em Parameters e adicione um Arg com o nome vendedor e clique no botão ( ) e selecione nosso parâmetro param_vendedor, agora estamos com tudo ok para podermos realizar o filtro em nosso MDX. 9. Agora vamos para nosso datasource, clique em datasource e clique na mdx over mondrianjndi com o nome query_mdxregiao e aqui também teremos que receber o parâmetro vendedor criado como argumento no gráfico pizza, clique em Parameters e adicione a nome/parâmetro com o mesmo nome do arg criado no gráfico pizza em nosso caso vendedor, com o value vazio e o type string conforme abaixo:

17 10. agora altere o MDX para receber o valor passado por parâmetro, altere a propriedade Query, e mesma deve ficar conforma abaixo, veja que o negrito e o item alterado neste momento: SELECT NON EMPTY {Hierarchize({[Measures].[Total]})} ON COLUMNS, NON EMPTY {Hierarchize({[Regiao].[Regiao].Members})} ON ROWS FROM [Pedidos] WHERE CrossJoin({${ano}}, {${vendedor}}) 11. Salve e teste o seu dashboard com o preview, ele vai filtra de acordo com cada clique na coluna do gráfico anterior. HACK74 Entendendo o Javascript e debugando. 1. Para que compreendamos um pouco melhor como isso funcionou podemos colocar um alerta no javascript do gráfico de vendedores para visualizar o que está sendo enviado por

18 parâmetro para o MDX, caso não tenha compreendido,. 2. Acesse components clique no gráfico com o nome grafico01chart e acesse a propriedade Click action altere para que o javascript fique conforme abaixo com um alert ( comenta que apresenta na tela a valor de uma variável ) function(scene){ s = "[Vendedores.Vendedor].["+scene.vars.series.value+"]"; alert(s); Dashboards.fireChange('param_vendedor',s) } 3. O uso deste recurso é muito interessante para encontrar erros comuns, sempre adicione um alert para verificar se o valor passado e aceitável pelo MDX. Teste em preview e clique em um vendedor no gráfico, será gerada uma imagem conforme abaixo: 4. Pode fazer o mesmo teste com as outras variáveis do javascript, verá que elas listam o total do valor apresentado e o nome da medida que esta sendo usada no gráfico. HACK75 Destacando a seleção de uma gráfico 1. Acesse components 2. Selecione o component grafico01chart, clique em parâmetros avançados ( Advanced Properties ) 3. Altere o valor da propriedade Selectable para True

19 HACK76 Novos efeitos de animação para dashboards. 1. Temos diversos recursos para deixar os nossos gráficos mais atraentes vamos explorar mais 1, acesse em components o nosso gráfico pizza que criamos com o nome graficopizzaregiao, clique em parâmetros avançados ( Advanced Properties ). 2. Acesse também nas propriedades avançadas a propriedade Extension points e configura com o arg : pie_innerradius e o value com 80, está propriedade extendida permite que o gráfico tenha uma animação diferente. Salve e teste com o Preview. 3. Altere a propriedade hoverable para true 4. Teste o gŕafico HACK77 Destacando fatia do gráfico de pizza 1. Acesse em components 2. Selecione o nosso gráfico pizza que criamos com o nome graficopizzaregiao 3. Clique em parâmetros avançados ( Advanced Properties ) 4. Altere a propriedade Exploded slice radius para valor 4 5. Teste o gráfico HACK78 Adicionando uma tabela de dados (table component) 1. Acesse DataSources 2. Selecione a opção Sql Queries 3. Selecione o datasource sql over sqljndi 4. Atribua a propriedade name : ListadeClientes

20 5. Informe em Jndi o nome da conexão datawarehouse_olap 6. Clique no propriedade query e insira a query abaixo: Select nome, estado_civil from dim_cliente 7. Altere a propriedade cache para false ( com isso essa consulta não usará o cache do CDA ) 8. Acesse em components 9. Selecione a opção Others 10. Escolha a opção Table Component 11. Atribua a propriedade name TabelaClientes 12. Atribua a propriedade HTMLObject Panel_3 13. Atribua a propriedade datasource ListadeClientes 14. Visualize a tabela 15. Clique em parâmetros avançados ( Advanced Properties ) 16. Atribua Page Length com valor 7 HACK79 Personalizando Table Component 1. É possível limitar o número de registros e modificar o formato de apresentação deste componente. 2. Acesse DataSources 3. Selecione o datasource ListadeClientes e altere o sql (query) incrementando a clausula limitadora de registros abaixo: 4. Select nome, estado_civil from dim_cliente limit 7 5. Acesse em components e selecione TabelaClientes 6. Clique em parâmetros avançados ( Advanced Properties ) 7. Atribua Paginate como False 8. Atribua Show Filter como False 9. Atribua Info Filter como False 10. Visualize a Tabela 2 Sobre o Documento. Parte deste documento e baseado em artigos técnicos, tutoriais, posts de blogs e outras referências que encontramos livremente na Internet, os mesmo são compilados de uma forma mais organizada e complementados com nossa contribuições. Todas as marcas citadas neste documentos são de responsabilidade de seus devidos criadores. A Ambiente Livre é uma marca própria e não tem nenhum vinculo com nenhuma das marcas citadas.

21 Créditos Documento Hacks Pentaho Dasjboards Direitos Autorais Reservados Ambiente Livre Tecnologia Treinamento em Pentaho Business Intelligence CE Marcio Junior Vieira Histórico do Documento. Versão 1.0 Versão 3.7 do Pentaho metadata Editor Fevereiro de 2010 Marcio Junior Vieira <marcio em ambientelivre.com.br> Versão 2.0 Versão 3.8 do Pentaho BI Server Fevereiro de 2010 Marcio Junior Vieira <marcio em ambientelivre.com.br>