Configuração

View video

Visão Geral

A aplicação de Dashboard, é voltada para a criação de componentes onde possa se vizualizar várias apliações ao mesmo tempo.

Com a aplicação de dashboard, é possível criar por exemplo, uma tela para vizualização de vários gráficos, e também, com a adição do Widget de índice criar comparações, mostrar soma de valores, entre outras funcionalidades.

Na tela inicial, é possível também configurar onde os Widgets irão ser mostrados, eles podem facilmente ser arrastado e montado de acordo com a necessidade do usuário.

Na página inicial é possível vizualizar os Widgets e algumas opções.

Adicionar Widget de Ligação

Essa é a opção para a criação de um widget de ligação

Adicionar Widget de Índice

Essa é a opção para a criação de um widget de índice

Adicionar Widget de Divisão

Essa é a opção para a criação de um widget de dvisão

E dentro deles há as opções de:

Lápis

Server para editar as configurações do Widget.

Lixeira

Server para excluir um Widget

Além de que quando o mouse está sobre o Widget, podemos ver um botão para alterar o tamanho do mesmo.

Adicionar Widget de Ligação

Essa opção permite que seja adicionado ao um Widget qualquer aplicação que exista no projeto.

Ligação

Para criar o link entra o Widget e a aplicação, é necessário apenas clicar no campo Ligação, então será mostrado uma lista com todas as aplicações existentes no projeto.

Barra de ferramentas

Nas configurações da barra de ferramentas, é possível configurar os botões que irão aparacer na barra de ferramentas da aplicação que está configurada na ligação.

As opções em barra de ferramentas irão ser mostradas de acordo com a aplicação que está sendo ligada, ou seja, de acordo com a barra de ferramentas de cada aplicação.

Adicionar Widget de Índice

Essa opção permite que seja adicionado ao um Widget de índice baseado em uma tabela do banco de dados.

Índice

Para que seja criado um Widget de índice é necessário realizar algumas configurações.

Modo de exibição

O modo de exibição define como as informações do índice serão exibidas. As opções disponíveis incluem: Função de sumarização e Card simples

Obs: Quando o modo de exibição “Função de sumarização” é selecionado, a opção de Ícone de tendência torna-se disponível.

Título

Nessa opção podemos definir um título para o Widget para uma melhor visualização do que queremos exibir.

Legendas

Permite adicionar uma legenda às informações exibidas nos widgets para uma melhor visualização do que queremos exibir.

Conexão

Nessa opção é permitido escolher qual a conexão será utilizada no Widget de índice, cada Widget pode ser configurado com conexões diferentes.

Método de recuperação de dados

Determina o método utilizado para buscar as informações do banco de dados.

As opções são:

• Tabela: permite selecionar uma tabela diretamente para leitura dos dados.

• Comnando SQL: pode permitir a recuperação de dados personalizados através do comando Select.

Caso a opção de comando select seja selecionada, os campos: Nome da Tabela , Campo de período, Campo da métrica e Função da métrica irão se escondidos, e um campo para montar o comando select será exibido.

Ícone de tendência

Quando ativada, esta opção adiciona um ícone visual de tendência (ex: seta para cima/baixo) ao lado do valor do índice, representando crescimento, queda ou estabilidade em relação a um valor anterior.

A caixa de seleção “Ocultar ícone de tendência” pode ser marcada caso você não queira exibir esse indicador no widget.

Nome da Tabela

Nessa opção é permitido escolher qual a tabela será utilizada no Widget de índice.

Campo de período

Nessa opção é permitido selecionar um campo da tabela para que possa ser feita a comparação dos dados escolhidos na opção anterior.

Campo da métrica

Nessa opção é permitido selecionar um campo da tabela para realizar que seja criado uma métrica, assim como na aplicação de gráfico. Entretanto é possível realizar algumas comparações de acordo com o período definido na próxima opção.

Função da métrica

Define qual vai ser a função da métrica. As funções disponíveis são: Soma, Média, Max, Min, Contagem e Cont. Distinta.

Exibir como

Nessa opção é possível escolher de qual forma o valor será exibido. Você poderá escolher entre: Diferença percentual, Diferença e Valor.

Função do período

Essa opção dá a possibilidade de configurar o índice definindo uma função para determinado perído. Essas funções são definidas por um período de tempo, como: Data completa, Ano, mês, Dia, Semestre etc.

Exibir vaores de

Essa opção é permitida a exibição de valores para:

• Ambos os períodos
• Período atual
• úlltimo Período
• Nenhum

Layout

Alinhamento

Permite definir o alinhamento horizontal do conteúdo dentro do widget. As opções geralmente incluem:

• Esquerda: alinha o conteúdo à margem esquerda.

• Centralizado: centraliza o conteúdo horizontalmente.

• Direita: alinha o conteúdo à margem direita.

Alinhamento Vertical

Controla o posicionamento vertical das informações dentro do widget. Pode ser definido como:

• Acima: posiciona o conteúdo na parte superior do widget.

• Centralizado: posiciona o conteúdo ao centro vertical.

• Abaixo: posiciona o conteúdo na parte inferior.

Tipo de ícone

Permite escolher o tipo de ícones que será utilizado no widget. As opções incluiem:

• Ícone : com essa opção selecionada, o campo ícone será exibido para que você escolha um ícone diretamente do gerenciador de imagens.

• FontAwesome: Com essa opção definida, você verá uma série de campos disponíveis para a configuração do ícone fontawesome

Posição do ícone do título

Define onde o ícone do título será exibido em relação ao texto. As opções disponíveis incluem:

• Acima
• Esquerda do título
• Direita do título
• Esquerda
• Direita

Gráfico

Tipo do gráfico

Essa opção disponibiliza a exibição de gráfico nos índices. Você pode escolher entre três tipos de gráfico: Linha, Área e Coluna.

Caso não queira exibir o gráfico, basta escolher a opção “Nenhum”

Veja um exemplo de um gráfico de linha adicionado ao widget:

Largura do gráfico

Permite você definir um valor em porcentagem para a largura do gráfico.

Altura do gráfico

Permite você definir um valor para a altura do gráfico

Cor do gráfico

Permite você escolher a cor do gráfico

Formatação

Nessa opção é possível configurar as formatações da métrica e período que irão ser mostrados na execução do filtro.

Formatação da métrica

Formatar métrica como

Permite definir o tipo de dado que a métrica será mostrada, há três opções:

Inteiro: A métrica do índice será mostrada como um valor do tipo inteiro.
Decimal: A métrica do índice será mostrada como um valor do tipo Decimal.
Moeda: A métrica do índice será mostrada como um valor do tipo Modal.

Usar configurações regionais

Permite definir se a métrica irá seguir as configurações que foram definidas nas configurações regionais.

Casas decimais

Permite definir quantas casas decimais terão no índice da métrica, entretanto isso só estará disponível quando o formato da métrica for Decimal ou Moeda.

Completar com zeros

Permite definir se o valor será completado com zeros quando definido como Decimal ou Moeda.

Formatar o valor em escalas

Permite definir se o número no índice irá aparecer em uma escala ou o número completo. Caso seja escolhido Sim o número ao invés de aparecer 10.000 irá aparecer com o valor de 10 k.

Formatação de período

As opções são mostradas de acordo com a configuração realizada em Função de Periodo que é configurado em Índice, assim a configuração pode variar entre:

Usar configurações regionais

Permite definir se o período irá seguir as configurações que foram definidas nas configurações regionais.

Exibir o nome do mês

Permite definir se será mostrado o nome do mês.

Prefixo para semestre, quadrimestre, trimestre, bimestre, semana.

Permite informar uma lang ou um título que o desenvolvedor desejar que apareça.

Exibir nome do dia

Permite definir se será mostrado o nome do dia.

Filtro

Permite realizar a configuração do filtro que será exibido no momento de execução do Widget de índice.

Filtro da métrica

Condições de filtro

Nessa opção podemos definir a condição do filtro para que seja mostrada a informação referente aquela métrica, não sendo possível alterar em tempo de execução.

Filtro para périodo

Intervalo de datas

Nessa opção podemos definir a condição do filtro para que seja mostrada a informação referente aquele período, não sendo possível alterar em tempo de execução.

Periodo relativo

Devemos definir quais os períodos disponíveis para a utilização no filtro.

Outra opção referente apenas ao período relativo, é a possibilidade de criação de condições com períodos relativos customizados diretamente dentro da interface do filtro.

Os valores disponíveis estão separados por abas:

Ano: Define o ano utilizado no filtro. Trimestre: Define os trimestres utilizados no filtro.
Mês: Define a utilização dos meses do ano.
Semana: Define a utilização das semanas do ano.
Dia: Define a utilização dos dias do mês.

Usar filtro de campos da tabela

Permite criar filtros apartir dos campos da tabela.

Fontes e cores

Nessas opções é possível configurar as fontes e as cores do índice que será exibido no Widget.

Fundo do índice

Permite definir uma cor de fundo para o índice do Widget

Cor da borda

Permite definir uma cor para a borda o índice do Widget

Fonte do título

Permite configurar a fonte que será exibida no título do índice, nessa opção há mais quatro opções:

Família/tipo da fonte
Tamanho da fonte
Cor da fonte
O estilo da fonte

Fonte da legenda

Permite configurar a fonte que será exibida na legenda do índice nessa opção há mais quatro opções:

Família/tipo da fonte
Tamanho da fonte
Cor da fonte
O estilo da fonte

Fonte do índice positivo

Permite configurar a fonte que será exibida no índice quando positivo, nessa opção há mais quatro opções:

Família/tipo da fonte
Tamanho da fonte
Cor da fonte
O estilo da fonte

Fonte do índice negativo

Permite configurar a fonte que será exibida no índice quando negativo, nessa opção há mais quatro opções:

Família/tipo da fonte
Tamanho da fonte
Cor da fonte
O estilo da fonte

Fonte do índice neutro

Permite configurar a fonte que será exibida no índice quando neutro, nessa opção há mais quatro opções:

Família/tipo da fonte
Tamanho da fonte
Cor da fonte
O estilo da fonte

Fonte do índice dimensão

Permite configurar a fonte da dimensão, nessa opção há mais quatro opções:

Família/tipo da fonte
Tamanho da fonte
Cor da fonte
O estilo da fonte

Fonte do métrica positiva

Permite configurar a fonte que será exibida na métrica quando positiva, nessa opção há mais quatro opções:

Família/tipo da fonte
Tamanho da fonte
Cor da fonte
O estilo da fonte

Fonte do métrica negativa

Permite configurar a fonte que será exibida na métrica quando negativa, nessa opção há mais quatro opções:

Família/tipo da fonte
Tamanho da fonte
Cor da fonte
O estilo da fonte

Fonte do métrica neutra

Permite configurar a fonte que será exibida na métrica quando neutra, nessa opção há mais quatro opções:

Família/tipo da fonte
Tamanho da fonte
Cor da fonte
O estilo da fonte

Propriedades

Permite configurar algumas funcionalidades que estarão disponíveis em momento de execução, são elas:

Modo Compacto

Remove cabeçalho e rodapé das aplicações adicionadas dentro do Widget

Exemplo com o modo compacto ativado

Exemplo com o modo compacto desativado

Exibir cabeçalho do widget

Permite ativar ou desativar o cabeçalho do widget em execução. No cabeçalho será exibido o título e as opções de Remover, Mover, Maximizar e Expandir, de acordo com a configuração individual das opções.

As opções de Remover, Mover, Maximizar e Expandir estarão disponíveis apenas se o cabeçalho estiver sendo exibido.

Remover

Habilita ou desabilita o botão para excluir o widget em tempo de execução.

O widget será exibido novamente ao recarregar a página.

Mover

Habilita ou desabilita a opção que permite que os widgets possam ser movidos em tempo de execução.

Maximizar

Habilita ou desabilita a opção para maximizar o widget.

Expandir

Habilita ou desabilita o botão para expandir o widget.

Tempo de recarga

Permite definir em segundos um tempo para que o Widget seja recarregado, assim recarregando a informação.

Remover margem da aplicação

Esta opção remove às margens das aplicações dentro do Widget.

Exemplo da aplicação com a opção remover margem ativada

Exemplo da aplicação com a opção remover margem desativada

Remover borda

Esta opção remove as bordas das aplicações utilizadas dentro do Widget

Exemplo da aplicação com a opção remover borda ativada

Exemplo da aplicação com a opção remover borda desativada

Widget de Divisão

O widget de divisão serve como um divisor entre os widgets. Isso faz com que haja uma divisão entre os widgets melhorando a visualização.

Exempo de utilização do widget de divisão para separar widgets:

Divisor

Cor de fundo

Define a cor de fundo da área do divisor. Essa cor é aplicada atrás do título e subtítulo, ajudando a destacar visualmente a seção no dashboard.

Pode ser usada, por exemplo, para criar faixas coloridas que separam áreas temáticas do painel.

Título

Campo utilizado para definir o título principal do divisor.

Fonte do título

Permite selecionar o estilo tipográfico aplicado ao título. É possível ajustar o tipo, tamanho, peso (negrito), e outras características da fonte de acordo com as opções disponíveis no projeto.

As opções disponíveis são:

Família/tipo da fonte
Tamanho da fonte
Cor da fonte
O estilo da fonte

Subtítulo

Campo destinado ao texto complementar que aparece logo abaixo do título. O subtítulo pode conter descrições adicionais, observações ou informações de contexto sobre o conteúdo da seção.

Exemplo: Dados referentes ao último trimestre ou Atualizado diariamente às 08h

Fonte do subtítulo

Define o estilo tipográfico do subtítulo, possibilitando ajustar a aparência do texto de acordo com o design desejado.

As opções disponíveis são:

Família/tipo da fonte
Tamanho da fonte
Cor da fonte
O estilo da fonte

Linha horizontal

Ao marcar esta opção, o sistema insere uma linha horizontal logo abaixo do título.