Como criar telas de relatório no Portal de Telemetria
Introdução
Este tutorial tem como objetivo descrever o passo a passo para criação de um dashboard no Portal de Telemetria com o relatório de algumas informações de um conector, além de descrever algumas configurações básicas de utilização.
O conceito de relatórios no Portal de Telemetria nada mais é do que a utilização de painéis específicos em uma tela (verificar Elementos de uma Tela de um Conector) nos quais lidam com objetos gráficos e registros históricos, ficando a cargo do usuário definir o melhor layout para sua aplicação.
Criando Tela
Primeiramente, precisamos criar uma tela para que posteriormente possamos configurar os painéis de layout do relatório. Para isso siga os seguintes passos:
Selecione o ícone Telas () no menu lateral e acesse “ Nova tela”;
Crie uma nova tela (ver Criando uma nova Tela(dashboard) para um Conector);
Para este exemplo, utilizaremos os painéis:
Barra de ferramentas;
Painel de texto;
Painel de imagem;
Painel gráfico;
3 Painéis Tabela.
Definindo Layout da Tela do Relatório
O layout proposto para o relatório deste tutorial utilizará a seguinte estrutura:
Uma linha para configurarmos o painel que permite ao usuário definir um período de consulta (entre outras opções) para os registros do relatório;
Uma segunda linha para que possamos definir o cabeçalho do relatório através de um Texto de título e uma Imagem;
Uma terceira linha para apresentarmos algumas informações gerais de introdução ao relatório através de uma Tabela;
Na penúltima linha, vamos definir o conteúdo do relatório através de uma Tabela e um Gráfico;
Por fim, na última linha iremos configurar uma tabela que apresentará todos os registros existentes no histórico de dados para o período selecionado.
Veja um exemplo do processo de adição dos painéis aos layouts:
Por fim, teremos uma tela semelhante ao exemplo abaixo:
Linha de seleção de período
Na primeira linha do relatório, iremos utilizar o Painel Barra de Ferramentas.
Este painel é utilizado para permitir a seleção do período de consulta do relatório, além de outras opções como permitir a pré-visualização de impressão da tela de relatório, etc.
Então vamos aos passos para criação do painel:
Clique na opção Selecionar painel na primeira linha do layout;
Na lista que será apresentada, selecione o Painel Barra de Ferramentas.
Linha de cabeçalho
Já nesta linha do relatório, iremos utilizar o Painel Texto para definirmos um título para o relatório e também um Painel Imagem, para inserirmos o logo da empresa.
Linha de informações gerais (introdução)
Nesta linha, vamos utilizar o Painel Tabela para apresentar algumas informações gerais de introdução ao relatório.
Linha de conteúdo do relatório
Nesta linha iremos utilizar o Painel Tabela algumas estatísticas dos registros filtrados e um Painel Gráfico para apresentar a evolução no tempo dos valores dos dados filtrados.
Linha de conteúdo da tabela
Por fim, vamos utilizar novamente o Painel Tabela para apresentar o histórico dos dados.
Limitações de impressão do Relatório
O recurso de impressão do Relatório tem como objetivo relatar, de forma geral, informações do Conector especificado, podendo ser selecionados quaisquer tipos de painéis disponíveis no Portal de Telemetria para a sua criação.
Porém, é importante ressaltar que, o recurso de download para Relatórios possui algumas particularidades: Foram definidos 5 painéis que atuam de maneira precisa para o recurso de download:
Barra de ferramentas: Define o tempo de início e fim para requisição de informações dos Dados e auxilia na conversão das informações desta requisição para cada um do(s) Painel(éis);
Painel de Texto: Possibilita, de maneira indicativa, auxiliar na compreensão das informações do relatório, com títulos e subtítulos, por exemplo;
Painel de Imagem: Permite utilizar imagens pré-adicionadas pelo Portal de Telemetria, imagens que foram adicionadas através de arquivos com extensões de imagem (JPG e/ou PNG) ou utilizando a localização (URL) da imagem escolhida;
Painel Gráfico: Responsável por informar o histórico de valores dos Dados do Conector escolhido de forma ilustrativa;
Tabela: Responsável por exibir informações do Conector associado à tela e/ou informações do(s) Dado(s) do Conector que serão monitorados pelo Relatório;
Além da criação dos Painéis, é importante ter em mente que, para algumas configurações dos Painéis citados acima atuarem da maneira adequada para os downloads, serão necessárias configurações específicas:
Os Painéis precisam ser configurados com altura mínima e máxima para serem impressos, exceto o Painel Tabela;
Barra de ferramentas: É necessário definir o campo de margem superior para “auto”. Com isso, ocupará o menor espaço possível na impressão;
Painéis de Texto: Não suportam todas as fontes disponíveis no Portal de Telemetria para o recurso de download;
Painel tabela: Por padrão, são exibidas linhas transparentes para divisão das células. Porém, para o recurso de download, as linhas são substituídas por um fundo de cor preta. O recurso de quebra de linha também pode sofrer alterações para o recurso de download.
Cores com transparência são deixadas sem transparência para evitar um possível erro de impressão;
Configurando os Painéis do Relatório
Nesta seção, vamos configurar os painéis definidos na estrutura no relatório. Portanto, siga os seguintes passos para configurar cada um dos painéis:
Configurando o Painel de Texto
Aqui, vamos configurar o Painel Texto referente ao título do nosso relatório.
Portanto, siga os seguintes passos:
No Painel Texto, clique sobre o painel para acessar suas configurações;
Em “Propriedades específicas”, acesse “Propriedades do painel” e digite o título do relatório;
Para finalizar, personalize o título da maneira preferível.
Veja um exemplo do passo a passo acima:
Configurando o Painel de Imagem
Aqui, vamos configurar o o Painel Imagem referente ao cabeçalho do nosso relatório.
Portanto, siga os seguintes passos:
Clique sobre o painel para acessar suas configurações;
Selecione a imagem que será utilizada no ícone ao lado do campo “url”;
Em seguida, em Alinhamento, escolha o canto superior direito.
Veja um exemplo do passo a passo acima:
Após essas configurações, basta ajustar o Painel Texto e o Painel Imagem, para deixar o texto centralizado.
Para isso, siga os seguintes passos:
Clique sobre o Painel Imagem e em seguida Propriedades;
No campo Altura , selecione o Mínimo para auto;
Para o Painel Texto, defina a altura para 100;
Arraste a barra central até onde desejar para o enquadramento dos 2 painéis;
Veja um exemplo do passo a passo acima:
Configurando o Painel de Tabela de informações gerais
Aqui, vamos configurar o Painel Tabela referente as informações gerais de introdução ao relatório. Então vamos aos passos:
Acesse as configurações do Painel Tabela;
Em Título, deixe em branco para retirá-lo;
Em Subtítulo, deixe em branco para retirá-lo;
Para acrescentar linhas e colunas, basta clicar o botão direito do mouse em qualquer célula para o que o menu de contexto seja apresentado;
Acrescente ou remova linhas e/ou colunas conforme desejado;
Escreva, do lado esquerdo, as opções do cabeçalho;
Selecione a primeira célula da segunda coluna (à direita das opções) e clique no botão Propriedades da célula. Será apresentada uma janela modal com todas as configuração da célula selecionada;
Na guia Propriedades, em Conteúdo da Célula, selecione a opção Sistema;
Atenção
Para maiores informações sobre a utilização de expressões e opções disponíveis, acesse Expressões / Fórmulas.
Continuando a configuração:
Na seção Expressão, clique no ícone para abrir o editor de expressões (no contexto de conteúdos de sistema);
No editor, selecione a informação desejada, como por exemplo, o nó user -> full_name para apresentar na célula o nome completo do usuário logado no Portal.
Já para configurar o estilo da célula, basta utilizar as configurações disponíveis na guia Estilo.
Veja um exemplo da configuração visual da tabela:
Para exemplificar a configuração acima, adicionaremos os valores das células da seguinte forma:
Nome da célula |
Conteúdo |
Formato |
Conteúdo final da expressão |
|---|---|---|---|
Período |
Sistema |
Data e hora : ‘DD/MM/YY HH/mm’ |
${data.history.start} - ${data.history.end} |
Usuário |
Sistema |
Não definido |
${data.user.full_name} |
Conector |
Dado |
Não definido |
Vazio |
Data de Geração do Relatório |
Sistema |
Data e hora : ‘DD/MM/YYYY HH/mm/ss’ |
${data.history.created} |
Veja um guia de exemplo das configurações de aplicação das células responsáveis por exibir as informações da tabela:
Para finalizar, defina nas propriedades do Painel Tabela, a Altura mínima como “auto”:
Configurando o Painel de Tabela de conteúdo do relatório
Aqui, vamos configurar o Painel Tabela referente as informações de conteúdo do relatório. Então vamos aos passos:
Clique sobre o Painel Tabela para acessar suas configurações;
Acesse as Propriedades do Painel;
Em Título, escreva o título da tabela;
Em Subtítulo, escreva o subtítulo da tabela, se não houver, deixe em branco;
Para acrescentar linhas e colunas, basta clicar o botão direito do mouse em qualquer célula para o que o menu de contexto seja apresentado;
Acrescente ou remova linhas e/ou colunas conforme desejado;
Após alterar a primeira parte visual da tabela, teremos um painel semelhante ao exemplo abaixo:
Seguindo com a configuração:
Para abrir o editor de expressões, acesse as Propriedades da célula, localizada na aba Célula e clique no ícone ;
No editor, selecione o nó history -> stats para visualizar as opções de estatísticas disponíveis para serem aplicadas nas amostradas do Dado retornadas no período selecionado;
Atenção
Para maiores informações sobre a utilização de expressões e opções de estatísticas disponíveis, acesse Expressões / Fórmulas.
Neste ponto basta selecionar qual estatística se deseja apresentar na célula (automaticamente o editor irá preencher com a expressão correspondente) e fechar o editor.
Já para configurar o estilo da célula, basta utilizar as configurações disponíveis na guia Estilo.
Para o nosso exemplo, na primeira coluna da tabela (referente ao primeiro dado), foram realizadas as seguintes configurações:
Nome da célula |
Conteúdo |
Histórico |
Formato |
Conteúdo final da expressão |
|---|---|---|---|---|
Nome do Dado |
Dado |
Desabilitado |
Numérico |
${data.name} |
Quantidade de Amostras |
Dado |
Habilitado |
Numérico |
${data.history.stats.count} |
Valor Inicial |
Dado |
Habilitado |
Numérico |
${data.history.stats.first} |
Valor Final |
Dado |
Habilitado |
Numérico |
${data.history.stats.last} |
Valor Mínimo |
Dado |
Habilitado |
Numérico |
${data.history.stats.minimum} |
Valor Máximo |
Dado |
Habilitado |
Numérico |
${data.history.stats.maximum} |
Valor de Amplitude |
Dado |
Habilitado |
Numérico |
${data.history.stats.amplitude} |
Valor Total (soma) |
Dado |
Habilitado |
Numérico |
${data.history.stats.sum} |
Valor Médio |
Dado |
Habilitado |
Numérico : ‘%.2f’ |
${data.history.stats.average} |
Configurando a primeira coluna com os parâmetros acima:
Para definir o formato de um valor de uma célula, acesse as Propriedades da célula e em formato, neste exemplo, defina “Customizado” e seleciona a opção “%.2f”. Desta forma, o valor exibido pela célula será apresentado com 2 casas decimais.
Esta configuração está exemplificada na imagem abaixo:
Já para a segunda coluna da tabela (referente ao segundo dado), foram realizadas as mesmas configurações, diferenciando apenas a qual dado de referência os valores seriam exibidos:
Configurando a segunda coluna com os seus respectivos itens e configurando a altura da tabela:
Para adicionar mais dados a tabela, basta criar uma nova coluna e referencia-la ao novo dado. Já para visualizar todas as opções de informações dos dados que podem ser exibidas, basta expandir as opções da aba Expressões, localizada nas propriedades da célula.
Atenção
Apesar de não ser utilizado neste exemplo, existe um recurso interessante no Painel Tabela chamado de Conjunto de Dados. Nesta configuração, é possível configurar o painel para apresentar todos os registros de amostra dos Dados configurados no conjunto para o período selecionado.
Configurando o Painel Gráfico de conteúdo do relatório
Neste ponto, iremos configurar o Painel Gráfico de conteúdo do relatório.
Para isso, siga os seguintes passos:
Clique sobre Painel Gráfico para acessar o modo de edição;
Em Série de Dados, selecione o dado que será utilizado;
Depois clique no botão Adicionar série;
Repita o processo para todos os dados que deseja inserir no gráfico;
Veja um exemplo do passo a passo acima:
Configurando o Painel de Tabela com o histórico de dados
Por fim, vamos configurar o Painel Tabela referente a apresentação dos registros do histórico para os dados utilizados no relatório.
Então vamos aos passos:
Para a personalização visual, vamos alterar as colunas, retirar o sub título e alterar o título padrão da tabela. Já nas configurações da tabela, acesse a aba Cabeçalho, e altere o Título. Neste exemplo vamos utilizar Histórico de dados;
Ainda na aba Cabeçalho, em Sub título, vamos remove-lo clicando no ícone ;
Já em relação de dados, ao expandir as configurações do painel pelo ícone , podemos observar a opção Conjunto de dados. Ao expandi-la com o ícone , devemos selecionar os dados que serão monitorados pelo conector em que os mesmos foram cadastrados. Neste exemplo, vamos ativar as opções número da linha, data e hora e selecionar a célula “A2” como célula alvo. Para maiores informações sobre Conjunto de dados, acesse Conjunto de Dados.
Aplicando as configurações do Conjunto de dados, teremos uma configuração semelhante ao exemplo abaixo:
Veja um exemplo aplicando as configurações descritas acima:
Personalizando os painéis do relatório
O relatório de estatísticas contém várias informações sobre o conector, e seus respectivos dados.
Para facilitar a visualização de todas as informações, vamos personalizar os painéis da tela.
Neste exemplo, vamos alterar principalmente as tabelas, identificando as células fixas e as diferenciando das outras células que receberão os dados.
Ao final da personalização, teremos uma tela semelhante a imagem abaixo:
(TELA PRONTA)
Configurando a visualização do Relatório em um Conector
Nesta seção, vamos verificar uma das maneiras de visualizarmos o conteúdo do nosso relatório na prática.
Nos passos seguintes, utilizaremos uma tela de sinótico com apenas um botão que abrirá nossa tela de relatório em uma janela modal.
Portando, para visualizarmos o relatório com dados reais, realize os seguintes passos:
Publicando a tela de Relatório
Clique em Publicar na parte superior da edição da tela;
Insira o nome da sua tela e uma descrição (Opcional);
Clique em Confirmar.
Veja um exemplo do passo a passo acima:
Criando uma tela de sinótico com o acesso ao Relatório
Crie uma nova tela de sinótico conforme os passos descritos em Criando Tela;
Insira o controle Button, conforme os passos descritos em Adicionando um Controle no painel sinótico;
No editor de propriedades do botão, selecione a aba e modifique o nome, fonte e tamanho do botão conforme desejado;
Agora, selecione a aba de “ Eventos”;
Em Eventos, adicione o evento Clique;
Na seção Ao Clicar, selecione a opção Tela na configuração de Grupo do evento;
Já na seleção da Ação, selecione a opção Abrir tela (guia) e confirme através do botão ;
Na configuração da ação em Ações, selecione a tela que irá ser aberta como modal;
Em parâmetros, dê um título que será apresentado na janela modal.
Veja um exemplo do botão cadastrado acima:
Publicando a tela de Sinótico
Clique em “ Publicar”;
Insira o nome da sua tela e uma descrição (Opcional);
Clique em Confirmar.
Associando a tela de sinótico a um conector
Após a publicação, clique em ;
Clique no conector que ira receber a tela;
No campo Tela, selecione a tela sinótico com apenas um botão recém criada;
Clicar em Salvar:
Visualizando o relatório no dashboard do conector
Acesse o dashboard do contrato clicando em ;
Clique na linha do conector que associamos a tela;
Clique no botão para visualizar o relatório;
Se desejar pré-visualizar o relatório para impressão, clique no botão ;
Caso deseje imprimi-lo, clique em .
Veja um exemplo do passo a passo acima:
