Dashboard

O Dashboard, é um novo recurso do Cronapp muito completo e fácil de utilizar. A figura 1 exibe o diretório padrão do Dashboard criado no Cronapp (Localização: Dashboards/

)

Figura 1 - Local de criação do Dashboard

Os Dashboards criados no Cronapp podem ser visualizados através do componente Visualizador de dashboard inseridos em uma view.

Criação do Dashboard

A criação do Dashboard fica disponível no diretório Dashboards (Localização: Dashboards/

). Então, para criar um dashboard, clique com o botão direito do mouse para abrir o menu de contexto do diretório e clique em Novo > Dashboard (Figura 3).

Figura 2 - Criando um Dashboard

Visão Geral do Dashboard

O Dashboard apresenta diversas ferramentas para construir um  poderoso painel visual de maneira simples através de seus elementos de arrasta e solta, no qual os elementos são arrastados até a página do dashboard e ao solta-los, eles preenchem automaticamente o espaço que será utilizado, mas com as outras ferramentas existentes no dashboard é possível modifica-los, podendo ser seu tamanho, seu tema, etc.

Figura 1 - Visão geral do dashboard.

1. Menu superior;
2. Área lateral;
3. Área de edição do dashboard;
4. Menu inferior.

Menu Superior 

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

Figura 2 - Menu superior do dashboard.

Aba Início  

A aba início (Destaque 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).

Figura 2.1 - Aba Início.

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 de atributos da classe importada do banco de dados para serem exibidos, como no exemplo abaixo, Região e Estados são atributos de uma classe.

Image Modified

Figura 2.2 - Aba Inserir.

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 Pivô: Insere uma tabela pivô na área de edição, uma tabela pivô é uma tabela dinâmica que serve para calcular, resumir e analisar os dados que lhe permitem ver comparações, padrões e tendências nos dados;
5. Indicador: Insere um indicador na área de edição;
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 dividido por continentes, o segundo exibe todos os países de uma forma geral, como um mapa mundi;
8. Imagem: Insere uma imagem na área de edição;
9. Texto: Insere uma área de texto na área de edição;
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, circulos, 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.

EM CONSTRUÇÃOImage Added

Figura 2.3 - Aba Página.

Aba Layout

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

Figura 2.4 - Aba Layout.

Aba Pré-visualizar

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

Figura 2.5 - Aba Pré-visualizar.

Á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.

Figura 3 - Área Lateral.

1. Ícone de atalhos: apresenta os principais elementos 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 uma fonte de dados ao dashboard.
4. Árvore de relatório: Exibe uma lista dos componentes presentes no dashboard.
5. Ícones de configuração do menu lateral:
   • Propriedades: selecionado por padrão, exibe as propriedades do elemento selecionado;
   • Eventos: exibe os eventos que podem ser associados ao elemento selecionado.
   • Colocações: habilita a localização da grade;
   • Fixa ou desprende o menu lateral do relatório.

Propriedades

A aba propriedades varia conforme o elemento selecionado na página, mas ela exibe todas as configurações que podem ser feitas no elemento.

Figura 3.1 - Propriedades.

Dicionário 

A aba dicionário é onde se encontra a configuração de fonte de dados, variáveis do sistema, funções e recursos. Nessa aba, é possível adicionar e remover fonte de dados, inserir e remover variáveis e funções no relatório, etc.

Figura 3.2 - Dicionário. 

• Ações: exibe as opções: Novo dicionário, abrir dicionário, salvar dicionário como e sincronizar.
• Novo item: exibe as opções:
  • Nova fonte de dados: adiciona uma nova fonte de dados ao Dashboard;
  • Nova transformação de dados; Cria um novo atributo a partir de um existente;
  • Nova coluna: Insere uma nova coluna (atributo) na fonte de dados;
  • Nova coluna calculada: Insere uma nova coluna calculada na fonte de dados;
  • Novo relacionamento; Cria uma relação entre duas fontes de dados distintas; 
  • Nova categoria; Cria uma nova categoria de variáveis; 
  • Nova variável; Cria uma nova variável;
  • Novo recurso; Cria um novo recurso no diretório "Recursos". 
• Editar: habilitado somente quandouma fonte de dados ou um elemento dessa fonte estiver selecionado, ele abre a janela de edição da fonte ou do elemento;
• Excluir: habilitado somente quando uma fonte de dados ou um elemento dessa fonte estiver selecionado, ele exclui a fonte ou o elemento;
• Mover para cima: habilitado somente quando um elemento da fonte de dados estiver selecionado e quando esse elemento não for o primeiro, ele move o elemento da fonte de dados para cima;
• Mover para baixo: habilitado somente quando um elemento da fonte de dados estiver selecionado e quando esse elemento não for o último, ele move o elemento da fonte de dados para baixo.

Árvore de relatório

A aba Árvore de relatório exibe todos os elementos e itens em que ele é constituído, da mesma forma de uma árvore de projeto, com menus e submenus - no caso da árvore, é mostrado na forma de suas páginas e os elementos que contém em cada página.

Figura 3.3 - Árvore de relatório.

Menu Inferior 

Âncora
menuinferior menuinferior

Apresenta informações gerais sobre a página do dashboard.

Figura 4 - Menu Inferior.

1. Ao clicar, será feita uma varredura em todo o dashboard, e, ao final,  aparecerá uma janela informando os possíveis erros, avisos, informações de mensagens e relatório de prestação de mensagens;

2. Mostra o título do elemento selecionado no dashboard, podendo ser a página ou um componente de texto;

3. A coluna informa as coordenadas x e y do mouse ou do componente selecionado dentro do relatório, assim como largura e altura;

4. Zoom definido pelo tamanho do relatório:
   
   • Largura da Página: altera o zoom do relatório para ver a página inteira na janela;
   • Altura da Página: altera o zoom de modo que a largura do relatório corresponda à largura da janela;
   • Informa o percentual utilizado no zoom.
5. Define o valor do zoom do dashboard;
6. Informa o zoom atual e ao clicar sobre a opção, ele apresenta outros valores de zoom.

Componentes

Os componentes possuem algumas propriedades na qual poderá utilizá-las para manipular os dados, posicionar e customizar os componentes no Dashboard.

Gráfico

Tabela

Mapa

Principais propriedades

Após selecionar um componente, é exibido na aba de propriedades (1 da figura 5) os elementos para configurarmos o comportamento, aparência e posição do componente, com isso será possível mudar para forma que desejar obter, filtrar e até customizar temas.

Figura 5 - Principais propriedades

1. Aba de propriedades: exibida após selecionar o componente;
2. Nome do componente selecionado: dependendo do componente selecionado, poderá haver subpropriedades diferentes, também é usado para mudar a forma de como os dados são exibidos;
3. Posição: utilizado para definir a posição e tamanho do componente;
4. Aparência: configura a aparência geral do componente;
5. Comportamento: configurações de comportamento referente ao componente selecionado;
   • Interação: configura a interação com o componente, podendo inserir hiperlink, filtro, drilldown e outras configurações;
   • Margem: altera a margem do componente;
   • Preenchimento: altera o preenchimento do componente
6. Design: trava a posição do componente em relação ao Dashboard para evitar que seja movido por engano;

Propriedades específicas

 O componente Tabela não possui propriedades específicas, mas ao contrário da maioria dos componentes, ele não possui o subcampo de formatação dos dados no campo Comportamento.

1. Gráfico
   • Área: Configura os dados dentro da área do componente gráfico, definindo alteração de cor entre colunas e suas posições;
   • Rótulo: Se definido uma posição, aparecerá rótulos contendo informações dentro do gráfico, com isso, também é possível definir a cor; e outras configurações referente ao rótulo exibido;
   • Legenda: configura a exibição da legenda no componente;
   • Eixo X: área para configurações de rótulo referente ao Eixo X do gráfico;
   • Eixo Y: área para configurações de rótulo referente ao Eixo Y do gráfico;
2. Comportamento: 

• • Formato do argumento: possui máscaras pré-definidas para a exibição dos dados de argumento;

• • Formato de valor: possui máscaras pré-definidas para a exibição dos dados de argumento;

• Comportamento: 
  • Formato de texto: possui máscaras pré-definidas para a exibição dos dados;

O elemento exibe a proporção dos dados de entrada. Pode ser apresentado em diferentes modos - uma torta, círculo, barras.

• Comportamento: 
  • Formato de texto: possui máscaras pré-definidas para a exibição dos dados;

• Imagem:
  • Alinhamento Horizontal: Define o alinhamento Horizontal da imagem no componente imagem; 

• • Alinhamento Vertical: Define o alinhamento Vertical da imagem no componente imagem;

• Mapa da região
  • Valor curto: Simplifica os valores exibidos no mapa ex: 100.000,00 muda para 100K.
    • O K significa milhares e o M milhões.

Funções