O Dashboard é um painel digital onde é possível exibir, em tempo real, diversas informações de forma resumida, utilizando para isso, componentes como tabelas, gráficos, mapas e diversos outros recursos. A ferramenta de Dashboard do Cronapp é fácil de utilizar e possui diversos recursos.

A figura 1 exibe o diretório padrão do dashboard criado no Cronapp (Localização: Dashboards/).

Open

Os dashboards criados no Cronapp podem ser visualizados através do componente Visualizador de Dashboard inseridos em uma view ou através do bloco de programação Abrir Dashboard.

Criação do Dashboard

Para criar um arquivo de dashboard clique no botão (+) (destaque 1 da figura 1.1) exibido ao lado do diretório Dashboards (Localização: Dashboards/) ou através do menu de contexto, selecionando Novo > Dashboard. Em seguida, na janela que abrir (destaque 2), informe o nome do arquivo e clique em OK.

Open

Visão Geral do Dashboard

O dashboard apresenta diversas ferramentas para construir um poderoso painel visual de maneira simples através de seus componentes de arrastar e soltar, no qual os componentes são arrastados até a área de edição e ao solta-los, eles preenchem automaticamente o espaço que será utilizado junto com os outros componentes existentes no dashboard, podendo personalizá-los de diversas formas. Veja abaixo os espaços que compõe a ferramenta do dashboard. 

Open

1. Menu superior;

2. Área lateral;

3. Área de edição, local onde são organizados os componentes do dashboard;

4. Menu inferior.

Menu Superior

O Menu superior (Destaque em amarelo da figura 2) é composto por abas que comportam ferramentas de utilização, são elas Início, Inserir, Página, Layout e Pré-visualizar.

Open

Aba Início

A aba início (Destaque amarelo da figura 2.1) é responsável por estilizar o componente, inserindo tamanhos e cores de fontes, bordas e cores de fundos para o componente. Também é possível escolher estilos prontos para o componente (ao selecionar o componente) ou para todo o dashboard (ao selecionar a área de edição).

Open

Aba Inserir

Na aba inserir (Destaque da figura 2.2), estão localizados os componentes que farão parte do dashboard. Com exceção dos componentes, imagem, texto, painel e formas, todos os outros componentes precisam estar relacionados com os campos de uma fonte de dados. No exemplo abaixo, Região e Estados são campos obtidos de uma fonte de dados.

Open

1. Tabela: insere uma tabela na área de edição.

2. Gráfico: insere um gráfico na área de edição.

3. Manômetro: insere um manômetro na área de edição.

4. Tabela de Pivô: insere uma tabela de pivô na área de edição. Uma tabela de pivô é uma tabela dinâmica que serve para calcular, resumir e analisar os dados, permitindo ver comparações, padrões e tendências nos dados.

5. Indicador: insere um indicador na área de edição que irá usar os dados para verificar se o valor está próximo da meta.

6. Progresso: insere um componente que mostra o progresso de um atributo.

7. Mapa: insere um mapa na área de edição, existem dois tipos de mapa: o mapa de região e mapa de localização. O primeiro exibe os países divididos por continentes, o segundo exibe todos os países de uma forma geral, como um mapa-múndi.

8. Imagem: insere uma imagem na área de edição.

9. Texto: insere uma área de texto.

10. Painel: insere um painel na área de edição, nele é possível inserir outros componentes do dashboard.

11. Formas: insere uma ou mais formas ao dashboard, como por exemplo, círculos, triângulos, setas, retângulos, etc.

12. Filtros: insere um filtro a um determinado componente do dashboard.

13. Setup de caixa de ferramentas:  local onde é possível deixar ou não visível algum componente do dashboard, basta clicar na checkbox para realizar tal ação.

Aba Página

A aba página é responsável por formatar a página, como por exemplo, definir as margens, orientação, tamanho da página, também é possível inserir uma marca d'água à página.

Open

Aba Layout

A aba layout apresenta todas as opções de organização dos componentes que se encontram na página do dashboard e o design dos mesmos. Essa opção só fica disponível quando o componente ou conjunto de componentes estão selecionados.

Open

Aba Pré-visualizar

A aba pré-visualizar mostra uma prévia de como está ficando o dashboard sem ter que executar o projeto.

Open

Área Lateral 

Na Área Lateral podemos encontrar as propriedades de cada componente selecionado na área de edição do dashboard, também é por ela que adicionamos a fonte de dados e podemos ver a árvore hierárquica de elementos que constam no dashboard.

Open

1. Ícone de atalhos: apresenta os principais componentes da aba inserir do menu superior;

2. Propriedades: apresenta as propriedades do componente selecionado na área de edição do dashboard.

3. Dicionário: área responsável por adicionar fontes de dados e disponibilizar funções prontas.

4. Árvore de relatório: exibe uma lista dos componentes presentes no dashboard.

5. Ícones de configuração do menu lateral: possui recursos diferentes a depender a aba aberta (Propriedades, Dicionário ou Árvore de relatório).

   • Propriedades: exibida apenas ao selecionar a aba Propriedades (destaque 2), possui os recursos para configurar o elemento selecionado;

   • Eventos: exibida apenas ao selecionar a aba Propriedades (destaque 2), possui os recursos para configurar eventos ao componente selecionado;

   • Colocações: possui opções diferentes a depender da aba selecionada:

     • Opções da aba Propriedades (destaque 2):

       • Localize Propriedades da Grade: permite alterar o nome dos campos das propriedades entre original e amigável.

     • Opções da aba Dicionário (destaque 3): 

       • Criar Campo com Dois Clicks: ao ativar essa opção, não é possível abrir a tela de edição do atributo ao clicar 2 vezes;

       • Criar Rótulo: ativa ou desativa o rótulo;

       • Usar Aliases: ao ativar, irá mostrar apenas o apelido da fonte de dados, desativado, irá mostrar o nome da fonte junto ao apelido entre parênteses, ex: app_dados (dados gerais).

   • Fixar: Fixa ou desprende/minimiza o menu lateral do relatório.

6. Segurança/Renderização: permite selecionar o perfil de usuário que terá acesso ao relatório e a forma como ele será exibido.

Propriedades

A aba propriedades varia conforme o componente selecionado no dashboard, ela exibe todas as configurações que podem ser feitas no componente. É possível clicar e expandir as subabas (exemplo: Tabelas, Posição, Aparência, etc) para exibir todos os campos do componente.

Open

Dicionário 

Na aba Dicionário é possível adicionar e remover fontes de dados, variáveis do sistema, variáveis criadas pelo usuário, funções e Recursos do relatório.

Open

1. Controles: menus e botões para manipulação dos recursos.

   • Ações: exibe ações para os recursos do dicionário.

     • Novo dicionário: limpa o dicionário atual e suas configurações.

     • Abrir dicionário: abre as configurações do dicionário a partir de um arquivo de configurações do dicionário.

     • Salvar dicionário como: permite exportar as configurações do dicionário atual para um arquivo de configurações.

     • Sincronizar: recarrega o dicionário.

   • Novo item: exibe ações para os recursos do dicionário.

     • Nova fonte de dados: adiciona uma Fonte de dados do Cronapp ou um dos arquivos: JSON, CSV e Excel.

     • Nova transformação de dados; cria um novo atributo a partir de um existente.

     • Nova coluna: (essa opção só será exibida quando um campo da fonte de dados estiver selecionado na área de recursos, destaque 2) - insere uma nova coluna (atributo) na fonte de dados.

     • Nova coluna calculada: (essa opção só será exibida quando um campo da fonte de dados estiver selecionado na área de recursos, destaque 2) - insere uma nova coluna calculada na fonte de dados.

     • Novo relacionamento: cria uma relação entre duas fontes de dados que possuam um atributo de relação.

     • Nova categoria: cria uma nova categoria de variáveis.

     • Nova variável: cria uma nova variável.

     • Novo recurso: cria um novo recurso (arquivo) no diretório "Recursos".

   • Editar: abre a janela de edição dos recursos criados pelo usuário. Exemplo: Fonte de dados, campos da fonte de dados, variáveis, recursos, etc. 

   • Excluir: deleta o recurso selecionado e criado pelo usuário. Exemplo: Fonte de dados, campos da fonte de dados, variáveis, recursos, etc. 

   • Mover para cima: habilitado somente quando um atributo da fonte de dados estiver selecionado e quando esse elemento não for o primeiro, ele move o atributo da fonte de dados para cima.

   • Mover para baixo: habilitado somente quando um atributo da fonte de dados estiver selecionado e quando esse elemento não for o último, ele move o atributo da fonte de dados para baixo.

2. Recursos

   • Fonte de dados: lista as fontes de dados (e seus campos) vinculados ao dashboard.

   • Variáveis:  lista as variáveis criadas pelo usuário.

   • Variáveis do Sistema: lista um conjunto de variáveis pré-definidas, normalmente são variáveis que fornecem informações sobre o status atual de um dashboard.

   • Funções: lista um conjunto de funções pré-definidas que podem ser utilizadas no dashboard.

   • Recursos: espaço destinado para armazenar recursos que podem ser utilizados no dashboard, são eles:

     • Arquivos de dados - CSV, Excel, JSON, XML, DBF;

     • Arquivos de imagem - SVG, JPEG, JPG, PNG, BMP, GIF e outros arquivos de imagem.

Nova fonte de dados

Ao clicar na opção Nova fonte de dados, será exibida a janela Selecionar o tipo de conexão, através dela poderemos incluir no dashboard diferentes tipos de fontes de dados: os arquivos CSV, Excel ou JSON e a Fonte de dados do Cronapp.

Existem três formas de adicionar uma nova fonte de dados, a primeira é logo após a criação do arquivo dashboard, onde será exibida a opção Criar nova fonte de dados, a segunda é através do menu Novo item, por fim, a última forma é clicando com o botão direito na área de destaque 2 da figura 3.2 e selecionando a opção Nova fonte de dados.

Open

1. Menu de Filtros: exibe os filtros que irão alterar o modo de exibição das fontes de dados na janela Selecionar o tipo de conexão.

   • Procurar: utilizado para buscar uma fonte de dados específica. 

   • Categoria: selecione Tudo para exibir todas as categorias ou selecione uma categoria específica.

2. Favoritos: campo destinado a exibir as fontes de dados favoritas do usuário. Para favoritar uma fonte de dados, clique no ícone de estrela que aparece quando colocamos o mouse em cima da opção. Por padrão, a Fonte de Dados do Cronapp já vem favoritada.

3. Arquivo: exibe as fontes de dados obtidas a partir de arquivos: CSV, Excel e JSON.

4. Ocultar fontes de dados não suportadas: oculta as fontes de dados que não são suportadas atualmente pelo Cronapp.

Ao selecionar a Fonte de dados Cronapp, a janela padrão de seleção de fonte de dados é exibida. Porém, ao selecionar uma das opções de arquivos, a janela exibida será a Nova conexão. Essa janela possui campos comuns a todos os arquivos e campos específicos. 

Open

Para este exemplo utilizamos o tipo de fonte de dados CSV, ele possui alguns campos em comum com os tipos de fonte de dados Excel e JSON.

Campos em comum:

1. Nome: especifica o nome da fonte de dados. 

2. Apelido: define um alias para a fonte de dados.

3. Caminho para Dados: clique no botão "..." para selecionar um arquivo em seu computador.

4. Campos específicos: os campos abaixo vão variar em relação ao arquivo selecionado.

   • CSV

     • Codificando: neste campo é possível informar a codificação do arquivo, para mais informações clique aqui.

     • Separador: define qual tipo de separador será utilizado no CSV, podendo ser: aba, ponto e vírgula, vírgula, espaço ou outro.

   • Excel

     • A primeira linha é cabeçalho: campo booleano que usa a primeira linha no arquivo do Excel como um cabeçalho para os dados. Se estiver habilitado, a primeira linha será o cabeçalho dos dados.

   • JSON

     • Direção da relação: define como os dados do arquivo serão importados.

       • Pai-Para-Filho: quando essa opção é selecionada, a fonte de dados é estruturada de forma que os objetos pais são listados primeiro, seguidos pelos objetos filhos que pertencem a cada objeto pai. Essa direção de relação é usada para exibir informações que têm uma hierarquia, como uma lista de categorias e subcategorias.

       • Filho-Para-Pai: quando essa opção é selecionada, a fonte de dados é estruturada de forma que os objetos filhos são listados primeiro, seguidos pelos objetos pais a que pertencem. Essa direção de relação é usada para exibir informações que têm um relacionamento de dependência, como uma lista de tarefas e seus projetos associados.

5. Recursos: esse campo exibe a galeria de recursos selecionados, é possível selecionar mais de um arquivo do mesmo tipo.

Após selecionar o arquivo e clicar em Ok o arquivo será incluído na propriedade Fonte de Dados (destaque 1 da figura 3.2.1.2) e a janela de seleção de dados será exibida, dessa forma, o usuário pode decidir se quer trabalhar com todos os campos da fonte ou somente alguns.

Open

Nova transformação de dados

A janela Nova Transformação de Dados permite modificar/converter valores dos campos de uma ou mais Fonte de dados e criar um recurso a parte para ser utilizado em diversos locais do dashboard. É possível inserir os dados arrastando e soltando um atributo da fonte de dados (2 da figura 3.2) para o campo Organização de dados (5 da figura 3.2.2) ou selecionando uma opção no menu de contexto da área dos campos (2 da figura 3.2.2). 

Open

1. Nome na Fonte: nome do diretório onde ficará o recurso no dicionário.

2. Nome: nome do novo diretório onde será armazenado os atributos com dados transformados.

3. Apelido: neste campo você pode especificar o nome da transformação, que será usado se o parâmetro Usar Aliases estiver habilitado nas configurações do Dicionário.

4. Tabela de dados: exibe os valores das colunas e campos de dados.

5. Organização de dados: campo destinado a armazenar os dados que serão transformados.

6. Tipo: define o modo de um atributo selecionado, podendo ser Dimensão (

   ) ou A medida (
   ):

   • Dimensão. esse tipo de campo não é aplicado a tipos de dados numéricos por padrão. Ao agrupar dados, os valores deste campo de dados serão a condição de agrupamento para valores de outros campos de dados.

   • A medida. por padrão, esse tipo de campo é aplicado a todos os tipos numéricos de dados. Além disso, esse tipo de campo de dados é usado se você precisar agrupar os valores do campo de dados atual pelos valores de outro campo de dados.

7. Expressão: expressão que resultará no valor do campo selecionado. Também é possível utilizar funções para tratar o valor.

8. Tipo: define o tipo de dado para o campo selecionado, exemplo: String, inteiro, datetime, byte[], etc.

Variáveis

É possível criar variáveis para utilizar junto com textos, expressões e outros recursos do dashboard. Todas as variáveis são armazenadas no dicionário de dados e podem ser de diferentes tipos: string, data, hora, número, array, coleção, intervalo, etc. Antes de utilizar uma variável, é necessário adicioná-la ao dicionário de dados. Para adicionar uma variável, você pode selecionar Nova variável no menu Novo Item do dicionário de dados ou clicar com o botão direito no item Variável e em seguida Nova variável, como na imagem abaixo.

Open

1. Nome: especifica o nome da variável usada no dashboard.

2. Apelido: aplica um nome mais amigável ao nome da variável.

3. Descrição: é possível adicionar algum comentário para a variável.

4. Tipo: você pode alterar o tipo de dado que será colocado em uma variável e o seu formato. Este campo é representado por duas caixas de seleção, a primeira é uma lista de todos os tipos de dados, já a segunda informa o formato do dado:

   • Valor: define que a variável será um valor simples.

   • Nullable Valor: fornece a capacidade de colocar valores simples que podem ser iguais a null. 

   • Faixa: permite trabalhar com intervalos de valores. Nesse caso, a variável armazenará um intervalo de valores.

   • Lista: fornece a capacidade de colocar uma lista de valores de qualquer tipo de dados disponível. Ao contrário da variável Valor, neste caso, na renderização do dashboard, a variável contém uma lista de valores.

5. Iniciar por: caixa de seleção para definir o tipo de conteúdo da variável, "Valor" ou "Expressão".

6. Valor / Expressão: este campo especifica o conteúdo a ser armazenado na variável. Se o campo Iniciar por (5) estiver configurado como "Valor", o campo atual espera receber um conteúdo fixo, como um texto ou número, porém, caso a opção "Expressão" esteja selecionada no campo Iniciar por (5), o campo atual espera receber uma expressão, como um cálculo matemático ou função do sistema.

7. Somente leitura: o valor armazenado em uma variável é retornado e o usuário não pode alterá-lo.

8. Solicitado ao usuário: estabelece um modo onde é possível definir o parâmetro de entrada. Ao marcar essa opção, novos campos de configurações de parâmetros serão exibidos. 

Variável tipo Faixa

A opção Faixa permite trabalhar com um intervalo de valores. Ao selecionar a opção faixa, a janela Nova Variável sofre algumas alterações.

Open

1. Tipo: ao selecionar a opção "Faixa", na segunda caixa de seleção, os campos "De" (3) e "Para" (4) serão exibidos.

2. Iniciar por: caixa de seleção para definir o tipo de conteúdo da variável, "Valor" ou "Expressão".

3. De: especifica o valor inicial do intervalo. O valor neste campo é incluído no intervalo de valores. No nosso caso a data 01/01/2022; 00:00:01 é especificado

4. Para: especifica o valor final do intervalo. O valor neste campo é incluído no intervalo de valores. No nosso caso a data 07/04/2022; 23:59:59 é especificado.

Variáveis de sistema

As Variáveis de sistema encontram-se na aba Dicionário e para utilizá-las é preciso ter alguma fonte de dados vinculado ao dashboard. Elas possuem diversos elementos prontos para serem exibidos no dashboard. Em geral, essas variáveis contemplam informações sobre páginas, informações do dashboard, informações de linha do dashboard, data e hora.

Open