> For the complete documentation index, see [llms.txt](https://wedocs.gitbook.io/wedocs-5.1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wedocs.gitbook.io/wedocs-5.1/wedocs-4.1/client-desktop/recursos-extras-de-dashboards/formatacao.md).

# Formatação

## Componentes - Opções Gerais adicionais

O Weknow possui diversas opções que se repetem em seus componentes durante a criação e a edição. Esse comportamento genérico da ferramenta permite uma melhor assimilação por parte do usuário final e cria uma identidade para o sistema, tornando a experiência de uso mais agradável.

A seguir estão listadas (em tópicos) as opções, ferramentas e funções compartilhadas entre a maioria ou todos os componentes:

## Movimentação e edição de componentes

Se desejar *<mark style="color:blue;">trocar a posição dos componentes em tela</mark>*, basta posicionar o mouse sobre a barra superior do respectivo componente, ao seu canto superior, onde será exibido um ícone de movimentação (em cruz), e por ele o componente poderá ser arrastado até a posição desejada em meio se adaptando em meio aos demais componentes do Dashboard. Clicando na tecla ESC, este ícone de movimentação é ocultado novamente.

<div align="left"><img src="/files/WVNUO5IMTExZ9Q2eiMn5" alt=""></div>

Se desejar *alterar um componente de um dashboard*, basta clicar no botão “*...*” também presente ao posicionar o mouse na barra superior do componente, ao canto superior esquerdo, e clicar em *Editar*:

![](/files/DKwTDAEAL8id8efwnaR0)

## Formatação de Valores

Todos os campos no Weknow são automaticamente atribuídos a uma formatação de acordo com o seu tipo de dados no banco de dados. Entretanto, essa configuração pode ser alterada através da opção *<mark style="color:blue;">Formatação</mark>*.

Ela aparece em todos os componentes e serve para configurar os resultados dos campos selecionados de acordo com suas preferências. Cada formato de valores possui suas características que podem ser alteradas, e na sequência temos uma lista de exemplos dos formatos e suas características disponíveis para alteração:

### Texto

* Prefixos, Sufixos e valor em caso de resultados Nulos;
* Tamanho Máximo para o campo, podendo cortar ou não palavras;
* Remover espaços em Branco;
* Caixa (*Caps Lock*) para todo o texto, para a primeira letra ou ainda para a primeira letra de cada palavra.

<div align="left"><img src="/files/v4vidFLD8JIcae5fdh6d" alt=""></div>

### Número

* Prefixos, Sufixos e valor em caso de resultados Nulos;
* Separadores de milhar e decimais;
* Nº de casas decimais e forçar para colocar mesmo não existindo;
* Tamanho Máximo para o campo;
* Multiplicadores, para esconder os zeros em caso de valores muito altos ou muito baixos;
* Sinais de modularidade em casos de negativo e/ou positivo.

<div align="left"><img src="/files/liS2lFDJdswL7KmvGHQJ" alt=""></div>

* *Data, Hora, Data/hora, Mês/ano e Intervalo de Tempo*
* Prefixos, Sufixos e valor em caso de resultados Nulos;
* Máscara, para definir separadores para dias e meses, por exemplo.

<div align="left"><img src="/files/SAo7X1rMWxQ6h7TdRNW4" alt=""></div>

*\*Máscara: **d** = dia, **n** = mês, **y** = ano, **h** = hora, **m** = minutos, **s** = segundos.*

### Lista

* Prefixos, Sufixos e valor em caso de resultados Nulos;
* Opções, são definidos os valores e como devem ser exibidos.

<div align="left"><img src="/files/CYYwnhZPeVbZfiSwTyFy" alt=""></div>

* *Lógico (Boolean)*
  * Prefixos, Sufixos e valor em caso de resultados Nulos;
  * Exibições para valores verdadeiro (1) e falso (0).

<div align="left"><figure><img src="/files/V70Ehz8UOvqiiOWfqnrC" alt=""><figcaption></figcaption></figure></div>

Além da lista acima, o weKnow também possibilita a utilização de formatações padrões de fábrica, clicando em “*<mark style="color:orange;">**...**</mark>*”. Essas formatações atuam como um facilitador e podem ser alteradas após a seleção sem alterar o padrão da fábrica.

<div align="left"><img src="/files/wcUDir9cYMYr5YlkWFbY" alt=""></div>

As formatações podem ser alteradas e aplicadas quantas vezes forem necessárias para cada campo selecionado em um componente na área *<mark style="color:blue;">Dados</mark>*.

Se desejar retirar a formatação de uma forma simples e ágil, clique no botão <mark style="color:blue;">**REMOVER FORMATAÇÃO**</mark>, já para aplicar a formatação, basta clicar em <mark style="color:blue;">**OK**</mark>.

## Filtros, Ordenações e Séries

Para todos os componentes é necessário selecionar ao menos um campo do metadado para servir como base (denominado *<mark style="color:blue;">Dados</mark>* <mark style="color:blue;"></mark><mark style="color:blue;">ou</mark> <mark style="color:blue;"></mark>*<mark style="color:blue;">Valores</mark>*). Na linguagem SQL essa operação é equivalente a um *Select*, porém dentro do metadado, que por si só já é uma consulta.

Assim como no caso dos Dados, outros campos são habilitados nos componentes para fazer ações equivalentes ao SQL. Essas opções são os *<mark style="color:blue;">Filtros</mark>*<mark style="color:blue;">,</mark> <mark style="color:blue;"></mark>*<mark style="color:blue;">Filtros Agrupados</mark>*<mark style="color:blue;">,</mark> <mark style="color:blue;"></mark>*<mark style="color:blue;">Ordenação</mark>* <mark style="color:blue;"></mark><mark style="color:blue;">e</mark> <mark style="color:blue;"></mark>*<mark style="color:blue;">Séries</mark>* que respectivamente funcionam como as cláusulas *Where*, *Having*, *Order* *by* e *Group* *by*. Ou seja, quando um indicador é criado no weKnow, é como se o sistema estivesse traduzindo os campos e configurações em uma nova consulta SQL “por baixo dos panos”.

Veja a seguir os objetivos de cada uma dessas opções, em quais componentes podem ser aplicados e exemplos:

### Filtros

Essa opção se encontra em todos os componentes e se resume na utilização de um ou mais valores de um campo para selecionar apenas parte do resultado retornado em uma consulta ou indicador.

É uma opção muito vantajosa e cada vez mais utilizada devido ao fato de que permite a criação de *Metadados* sem a utilização de filtros. Ou seja, ao utilizar uma cláusula *Where* no *Indicador* e não diretamente no *Metadado*, é possível deixar o metadado mais genérico e assim permitir a sua reutilização em diversos indicadores onde apenas o *Where* os difere.

Por exemplo, um metadado cujo objetivo é trazer a lista de Médicos cujo nome começa com a letra “P”. Com essa descrição, pode-se realizar a consulta já aplicando o filtro no *Metadado* ou então aplicá-lo no *Indicador*, conforme a seguir:

<div align="left"><img src="/files/PaFfjRZXzLMJHt5HUaZV" alt=""></div>

Note que os metadados A e B são exatamente iguais até a cláusula *Where*, porém B é mais genérico pois está retornando todos os Nomes e Ids de todos os Médicos, sem exceções. Na sequência, exemplos de planilhas utilizando os metadados A e B respectivamente:

<div align="left"><img src="/files/AI8SiCudkrdjRcnVLgFt" alt=""></div>

<div align="left"><img src="/files/nvt946jvXxQil5saU9yu" alt=""></div>

Neste exemplo, B está trazendo mais valores, como comentado anteriormente isso se da pois ainda não foi aplicado o filtro neste indicador. Para aplicá-lo basta arrastar o campo desejado para a área *<mark style="color:blue;">Filtro</mark>* e automaticamente o Weknow abrirá a tela de edição do filtro:

<div align="left"><img src="/files/LcE5h4SdkjM38nT1vhNt" alt=""></div>

A partir deste ponto pode-se fazer uso de todas as configurações da opção *<mark style="color:blue;">Filtro</mark>*, que são as mesmas para todos os componentes.

Primeiro é necessário selecionar o *<mark style="color:blue;">Operador</mark>*, que é a forma em que o sistema irá comparar o valor do campo a um valor informado pelo usuário. Há diversas opções de comparação, porém para o exemplo acima usaremos a opção “<mark style="color:blue;">Começa com</mark>”.

<div align="left"><img src="/files/J3rijGOcLGEV65KcpVuc" alt=""></div>

Depois disso, é necessário selecionar o *<mark style="color:blue;">Modo</mark>*, que define a forma em que o valor de comparação será informado. É possível informar o valor de quatro formas:

* *<mark style="color:blue;">Nulo</mark>*, quando o valor de comparação deve ser em branco;
* *<mark style="color:blue;">Fixo</mark>*, quando o valor é uma constante;
* *<mark style="color:blue;">Fórmula</mark>*, para buscar um valor de acordo com uma regra do Assistente de fórmula Weknow;
* *<mark style="color:blue;">SQL</mark>* quando o valor a ser utilizado é dinâmico e vindo de uma outra consulta.

Para este exemplo utilizaremos o modo *<mark style="color:blue;">Fixo</mark>*, e colocaremos o valor “P”. Obtendo assim os mesmos resultados da planilha criada com o metadado com a cláusula Where.

<div align="left"><img src="/files/5j0FUHEMc5pU3xBH9rmD" alt=""></div>

<div align="left"><img src="/files/4CX6E5Ti9XT1BgfSTUWN" alt=""></div>

Este exemplo mostra uma configuração de filtro dentro de um indicador, porém o Weknow ainda conta com um componente específico para filtros de componentes denominado *Conteiner* *de filtros*. Para mais detalhes vá até este tópico neste mesmo documento.

### Filtros Agrupados

Assim como nos filtros, os filtros agrupados têm o objetivo de selecionar parte dos resultados de uma pesquisa. A sua diferença do *<mark style="color:blue;">Filtro</mark>* está no fato de ser aplicado às *<mark style="color:blue;">Funções de Agregação</mark>*, não aos valores diretamente.

Na linguagem SQL, seu equivalente é a cláusula *Having* e no sistema está disponível para todos os componentes assim como os *<mark style="color:blue;">Filtros</mark>*. Lembrando que, isso ocorre pois todos eles possuem funções de agregação, permitindo essa utilização do filtro agrupado. A seguir está um exemplo no componente *<mark style="color:blue;">Cartão</mark>*:

<div align="left"><img src="/files/nppDMLWf2q2oh1SVPvSq" alt=""></div>

No exemplo acima temos um conjunto de cartões de valores e metas por convênios. Para chegar a esse exemplo, estão sendo utilizados os campos “*<mark style="color:blue;">Valor</mark>* *<mark style="color:blue;">Total</mark>*” e “*<mark style="color:blue;">meta</mark>*” como *<mark style="color:blue;">Valores</mark>* e o campo “*<mark style="color:blue;">company\_name</mark>*” como *<mark style="color:blue;">Séries</mark>*.

Note, que esse campo na imagem acima está sendo somado com uma função de agregação, logo os resultados em tela são as *<mark style="color:blue;">Somas</mark>* de todas as contas daquele Convênio nesse período.

Pense num cenário onde queremos trazer apenas os convênios que o “*<mark style="color:blue;">Valor</mark>* *<mark style="color:blue;">Total</mark>*” é maior do que R$ 1.000.000. Nesse caso basta arrastar o campo, “*<mark style="color:blue;">Valor</mark>* *<mark style="color:blue;">Total</mark>*” para a área *<mark style="color:blue;">Filtros</mark>* <mark style="color:blue;"></mark><mark style="color:blue;">(</mark>*<mark style="color:blue;">agrupados</mark>*<mark style="color:blue;">)</mark>, selecionar a função de agregação *<mark style="color:blue;">Somar</mark>*, selecionar ambos o Operador e o Modo (conforme demonstrado no tópico de Filtros) e adicionar o valor desejado:

<div align="left"><img src="/files/6DmFqb7cPpgOVppqosU6" alt=""></div>

Feito isso, o sistema filtrará não os valores diretamente (linha a linha) mas apenas a *<mark style="color:blue;">Soma</mark>* ou o Total para cada um dos convênios trazendo apenas os convênios com mais de R$ 1.000.000, conforme imagem a seguir.

<div align="left"><img src="/files/q1utlHk5bBOtVEoFmGOx" alt=""></div>

Os *<mark style="color:blue;">Filtros</mark>* *<mark style="color:blue;">agrupados</mark>* são uma ferramenta igualmente poderosa para a melhor utilização dos metadados e quando combinados com múltiplos *<mark style="color:blue;">Filtros</mark>* podem criar diversas visões diferentes sem a necessidade de um novo código SQL.

Para obter mais prática nessa opção sugerimos testar mais exemplos do filtro com outros tipos de *<mark style="color:blue;">Funções de agregação</mark>* e antes de desenvolver um novo metadado estudar a possibilidade de reutilização do metadado em conjunto com novos filtros.

### Ordenação

Outra opção que é muito utilizada e está presente em três dos componentes (*<mark style="color:blue;">Planilha</mark>*<mark style="color:blue;">,</mark> <mark style="color:blue;"></mark>*<mark style="color:blue;">Gráfico</mark>* <mark style="color:blue;"></mark><mark style="color:blue;">e</mark> <mark style="color:blue;"></mark>*<mark style="color:blue;">Cartão</mark>*). A ordenação é o equivalente a cláusula *Order by* no SQL e tem como objetivo criar uma regra para ordem de demonstração dos dados.

Das opções gerais é a mais simples por não necessitar de nenhuma configuração extra e depender apenas do campo que for selecionado para servir de regra de ordenação.

Para demonstrar essa opção na prática seguiremos o mesmo exemplo da opção anterior (*<mark style="color:blue;">Filtros</mark>* *<mark style="color:blue;">Agrupados</mark>*) e iremos organizar o componente Cartão de acordo com duas necessidades diferentes.

Primeiro vamos adicionar uma ordenação no *<mark style="color:blue;">Cartão</mark>* utilizando um campo do tipo *<mark style="color:blue;">Texto</mark>*, dessa forma ao clicar para selecionar o sentido ordenação será utilizado o modelo *<mark style="color:blue;">Alfabético</mark>* “de A á Z” ou “de Z á A”.

#### **Antes**

<div align="left"><img src="/files/fs9FPEazZhs8vOrMcdXI" alt=""></div>

<div align="left"><img src="/files/w0ObCPGQGqL6O6lHvIFL" alt=""></div>

#### Depois

<div align="left"><img src="/files/zCig1aRrufAI9rQBmt59" alt=""></div>

Note que o sistema já estava ordenando alfabeticamente de acordo com o campo em *<mark style="color:blue;">Série</mark>*. Ou seja, se o componente possuir mais do que os campos em *<mark style="color:blue;">Valores</mark>*, como *<mark style="color:blue;">Rótulos</mark>* ou *<mark style="color:blue;">Séries</mark>*, o sistema automaticamente ordenará por essas opções. Caso contrário ele não aplicará uma ordenação.

Após adicionarmos o campo “*<mark style="color:blue;">company\_uf</mark>*” na *<mark style="color:blue;">Ordenação</mark>*, ele deixou de ordenar pelo nome dos convênios (campo “*<mark style="color:blue;">company\_name</mark>*”) e ordenou alfabeticamente pelos Estados dos Convênios. Neste exemplo é possível alterar o sentido da ordenação clicando no ícone de *Flecha* ao lado do ícone de funções agregadas.

E em seguida vamos adicionar uma segunda ordenação que funcionará em conjunto com a ordenação alfabética anterior. O cenário proposto é que alguns convênios são do mesmo Estado o que permite organizar novamente a listagem dos cartões, porém agora utilizando da opção *<mark style="color:blue;">Função de agregação</mark>*.

<div align="left"><img src="/files/POUdTkzlsCPinCRlYaqy" alt=""></div>

### Final

<div align="left"><img src="/files/ArUnIwnya3yhchVqWYdC" alt=""></div>

Como resultado obtivemos os cartões ordenados alfabeticamente por Estado e logo em seguida pela *<mark style="color:blue;">Soma</mark>* do “*<mark style="color:blue;">Valor Total</mark>*” de cada convênio.

Vale ressaltar que este exemplo traz apenas duas formas de fazer a ordenação, porém essa opção pode ser combinada com várias outras configurações para trazer até mesmo um TOP 10 Convênios mais valiosos, por exemplo (se utilizado um limitador), dependendo apenas da necessidade do indicador.

### Séries

A opção séries é a equivalente á cláusula *Group by* no SQL, responsável por juntar diversos valores através de um campo com valor comum entre registros.

É muito associada a tabelas que possuem uma chave estrangeira de tabelas como “Categoria” ou “Tipo” uma vez que esses campos se repetem muitas vezes nesses cenários e podem servir como bons campos para agrupamento. Contudo a sua utilização não se restringe a esse cenário permitindo que, na prática, qualquer campo possa ser utilizado como um campo de *<mark style="color:blue;">Séries</mark>*.

No sistema essa opção se encontra nos componentes do tipo *<mark style="color:blue;">Gráfico</mark>*<mark style="color:blue;">,</mark> <mark style="color:blue;"></mark>*<mark style="color:blue;">Cartão</mark>* <mark style="color:blue;"></mark><mark style="color:blue;">e</mark> <mark style="color:blue;"></mark>*<mark style="color:blue;">Planilha</mark>* (através das linhas/colunas que atuam como *<mark style="color:blue;">Séries</mark>*). A seguir, exemplo da série sendo utilizada para transformar um gráfico mais genérico em um gráfico separado por sexos sem alterar o <mark style="color:blue;">Metadados</mark>:

<div align="left"><img src="/files/mVmDGvdmWZ6GeSukVOPj" alt=""></div>

<div align="left"><img src="/files/NF77ulqBpF2dgeAp2SI3" alt=""></div>

Note que o sistema automaticamente inclui uma segunda coluna no gráfico para cada um dos *<mark style="color:blue;">Rótulos</mark>* sem ter a necessidade de adicionar mais um campo em *<mark style="color:blue;">Valores</mark>*.

*<mark style="color:blue;">**Atenção**</mark>**!*** A configuração realizada nesse exemplo não interfere com as cores do gráfico, para alterá-las foi utilizado de *<mark style="color:blue;">Personalizações</mark>*.

Ainda é possível incluir mais de um campo na área de séries, trazendo mais agrupamentos de acordo com a necessidade. O sistema irá separar de acordo com a quantidade de valores para cada uma das séries. A série com menos valores se torna o primeiro nível de agrupamento, a segunda com menos valores se torna o segundo nível e assim por diante.

## Variáveis de entrada

No dia a dia de trabalho do Analista, é possível deparar-se com situações que exigem a entrada de algum dado para que seja possível gerar determinada informação. Sem que se altere as configurações do componente e que dispense a necessidade de um perfil com permissões de Edição.

Este dado que será informado, poderá assumir N responsabilidades de acordo com o que foi definido na configuração do componente, por exemplo:

* Meta;
* Parâmetro;
* Classificação;

Na prática, é uma forma do usuário visualizador interagir com os gráficos disponibilizados pelo weKnow, e agregar mais valor a informação gerada.

\
Exemplo:

Para adicionar uma Variável de entrada, primeiramente abrimos a edição do componente, e na tela que foi aberta, na listagem de campos, clico em **Adicionar campo de entrada**, onde serão definidos:

* Nome
* Título
* Categoria
* Tipo de dado (se é texto, decimal, data, etc..)
* Valor (valor padrão)

<div align="left"><img src="/files/aGjSp2JDwvw9TnhHhEgL" alt=""></div>

Neste exemplo definiremos uma **Meta** por **Período** para as vendas faturadas em cada estado, ou seja, uma linha que cortará o gráfico de barras, identificando quais dos estados atingiram a média em determinado período.

Para isto, adiciono o campo Variável de entrada ao Eixo Y, e o defino como uma linha(também podem ser definidos outros tipos de gráfico). E em seguida clico em Concluir, para finalizar a configuração da variável.

\
Agora com a Variável de entrada já definida, vamos configurar um filtro para que possamos interagir com a mesma. Para isso, no contêiner de filtros, clicamos no ícone de Filtro, depois nos três pontinhos para abrir o Dropdown e em seguida, clicamos em **Adicionar Filtro Simples**.

<div align="left"><img src="/files/lSF4GzBTctlVz6oelrWA" alt=""></div>

Na janela que foi aberta na criação de um novo filtro neste conteiner, configure o filtro simples normalmente, assim como criação de filtros para interação com outros tipos de vínculos. Vale ressaltar que o formato do campo filtro deve ser o mesmo que o da variável de entrada.

Para finalização da criação do campo neste contêiner de filtro, clique em Próximo e depois em concluir.

<div align="left"><img src="/files/3gt22SACFr906IkcI77i" alt=""></div>

Agora a **Variável de entrada** já está configurada e pronta para receber valores. Neste exemplo que configuramos, definiremos uma meta, e validar quais estados estão abaixo/acima do que foi definido.

A linha cinza que corta o Gráfico, representa a **Meta** configurada na **Variável de entrada**.

<div align="left"><img src="/files/xgDGXyqQwrQYY9UDCZK6" alt=""></div>

Vários filtros e variáveis podem ser configurados, para gerar resultados mais complexos.