# Construir Visualização

**Como construir uma Visualização**

Os próximos passos ajudarão a entender o mecanismo para criar as visualizações gráficas e os dados disponíveis para esta construção.

**Passo 1:** Em Workspaces, selecione o Workspace desejado;

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe5tAMftN949-eeU4GPHCO6-GeZhNfS7RMliONqECEdr0WhtfBEsJSDyLwdWWKD6FDD6s1L9NQHQ8ehnsEGczcmoDsNy4PTfomYPmsddyyEmYKg9Q3wco3ZRn6WQTpdGuoX9LyShw0dFimIIjwYi3eUnnsU?key=vafcWvfaIgNwVZq1YmKKKA" alt=""><figcaption></figcaption></figure>

**Passo 2:** Dentro do Workspace, selecione Nova Visualização;

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Ft9v3N4GyU2RMpNEr4mVD%2Fimage.png?alt=media&#x26;token=b1ae0779-9dfc-4f8f-b185-961537570ee6" alt=""><figcaption></figcaption></figure>

Feito isso, vamos visualizar a tela de edição da visualização.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeEatKns1eWmaKRWFL0-Aup7hlh0j1FhYWkwXkwJj2i4AI9I_3KUucrYokeO7dK22TkJSph_YK8gae_UTi40xj3IjzLOPG9WNPNSOm5LOs6ZhH-nkiE37CqbSW0LGIQSg4ow6BFevCwJpT0ucZHEZvsrivo?key=vafcWvfaIgNwVZq1YmKKKA" alt=""><figcaption></figcaption></figure>

Em **“Campos”** iremos visualizar todos os campos de billing do provider. Para entender acesse a documentação do **Dicionário de Campor por Provider**.

**AWS**: Para acessar a documentação do Dicionário de Campos AWS, clique [aqui](https://docs.piercloud.com.br/plataforma-de-finops/produtos/lighthouse/workspaces/dicionario-de-campos-provedores/dicionario-de-campos-aws)!

**Azure**: Para acessar a documentação do Dicionário de Campos Azure, clique [aqui](https://docs.piercloud.com.br/plataforma-de-finops/produtos/lighthouse/workspaces/dicionario-de-campos-provedores/dicionario-de-campos-azure)!

**GCP**: Para acessar a documentação do Dicionário de Campos GCP, clique [aqui](https://docs.piercloud.com.br/plataforma-de-finops/produtos/lighthouse/workspaces/dicionario-de-campos-provedores/dicionario-de-campos-gcp)!

**OCI**: Para acessar a documentação do Dicionário de Campos OCI, clique [aqui](https://docs.piercloud.com.br/plataforma-de-finops/produtos/lighthouse/workspaces/dicionario-de-campos-provedores/dicionario-de-campos-oci)!

**IBM**: Para acessar a documentação do Dicionário de Campos IBM, clique [aqui](https://docs.piercloud.com.br/plataforma-de-finops/produtos/lighthouse/workspaces/dicionario-de-campos-provedores/dicionario-de-campos-ibm)!

**Passo 3:** Configure os dados da Visualização na aba **Campos**.

Clique no campo desejado e arraste-as para as áreas **Colunas, Dados e Filtros**.

* **Colunas:** Assim como em uma tabela dinâmica, os campos desta área serão exibidos nas posições de colunas;
* **Dados:** Utilizado para efetuar operações matemáticas (soma, média, menor e maior valor e contagem). Ao arrastar um campo para esta área, os valores serão agregados conforme as operações matemáticas configuradas para cada campo desta área;
* **Filtros:** Campos utilizados para filtrar os registros da visualização.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXduDYC-lK5VTfl2NxOjP6p-3gCX8ynpdE028ERv3jEZbTIZBdaHsByKom7pOBPCI1Cp5otG0V5rG3S2r7knOm4Q2AvGErmRGdBOSubR9umIt6nHRjELtvNSs02TMUO1xXRNl3kGZSx2iYvuesBwQh5W6qLi?key=vafcWvfaIgNwVZq1YmKKKA" alt=""><figcaption></figcaption></figure>

**Passo 4:** Edite os campos de uma visualização.

### **Área Colunas**

Na tela Editar Colunas configure os campos nas abas **Configurações, Formatar e Ranquear por**.

* **Apelido:** informe um apelido a ser exibido na coluna;

**Configurações:**

* **Agrupado por:** para campos de data, possibilita agrupar os registros por períodos: hora, dia, semana, quinzenal, mês ou ano;
* **Ordenação:** configure a ordem em que os dados serão exibidos: ascendente, descendente ou nenhum.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FgYRsjZmZKrzwTaZwygUm%2Fimage.png?alt=media&#x26;token=5dde0184-2fba-4130-b33d-e32c9787d2a3" alt=""><figcaption></figcaption></figure>

**Formatar:**

* Para campos do tipo **número:**
  * **Decimais**: Quantidade de casas decimais utilizado na visualização;
  * **Unidade**: Unidade de medida do campo em questão (USD, BRL, MEX, CNY, EUR, ANG, COP, DOP, ARS, PEN, UYU, MB, GB, TB, Percent).
* **Notação**: Notação que pode ser utilizada no campo (Compacta e Científica).

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FUJyf4vrBz5d9my60KusY%2Fimage.png?alt=media&#x26;token=fc5d87d1-eb93-4ec7-bb5a-20a49e75ceed" alt=""><figcaption></figcaption></figure>

* Para campos do tipo **data:**

  * **Formato de data**: Selecione um formato de data que será utilizado para apresentação da data, conforme opções (Por hora, horas e minutos, Diário, Dia e hora, Dia e mês, Mensal, Competência).

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FatAkz03Jaqgnae4Msq98%2Fimage.png?alt=media&#x26;token=f1c95624-046c-4ff3-85b0-cd788421e3f4" alt=""><figcaption></figcaption></figure>

* Para campos do tipo **string:**
  * **Decimais**: Quantidade de casas decimais utilizado na visualização;
  * **Unidade**: Unidade de medida do campo em questão (USD, BRL, MEX, CNY, EUR, ANG, COP, DOP, ARS, PEN, UYU, MB, GB, TB, Percent).
  * **Notação**: Notação que pode ser utilizada no campo (Compacta e Científica).
  * **Formato de data**: Selecione um formato de data que será utilizado para apresentação da data, conforme opções (Por hora, horas e minutos, Diário, Dia e hora, Dia e mês, Mensal, Competência).&#x20;

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2F62hq0v9d7gJUnDqcRqNO%2Fimage.png?alt=media&#x26;token=6bf57e6d-6aff-46c2-af56-ab28482ff1c0" alt=""><figcaption></figcaption></figure>

**Ranquear por:**

* **Campo:** Selecione o campo numérico que será utilizado para obter as quantidades de linhas do item acima;
* **Expressão:** Selecione a operação matemática que será utilizada para agregar os dados;
* **Quantidade:** número de linhas que serão apresentadas, por exemplo, as 10 maiores contas;
* **Agrupar excedente em Outros:** Os demais itens da visualização terão seus valores somados no item "Outros".

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fh2sM3edOLa1nf4g2S4lK%2Fimage.png?alt=media&#x26;token=0a35756b-a66b-4446-be5e-0e06d4af01b1" alt=""><figcaption></figcaption></figure>

Feito isso, clique em **Salvar**.

### **Área Dados**

Na tela **Editar dados**, configure informações de Dados nas abas **Configurações, Formatar**, **Segmentar** **por** e **Gráfico**.&#x20;

**Configurações**

* **Expressão:** Selecione a operação matemática que será utilizada para agregar os dados numéricos;
* **Ordenação:** Opção para ordenar a exibição dos dados de forma ascendente ou descendente;
* **Orientação:** Eixo do gráfico, direito ou esquerdo.
* **Permitir mostrar o total**: Quando ativado essa opção, o valor total dessa coluna será exibido caso seja habilitado no gráfico a exibição total.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2F50q2xBLELQXqj80XbN5E%2Fimage.png?alt=media&#x26;token=5ce55300-9b00-48ea-b309-da230915fd5c" alt="" width="563"><figcaption></figcaption></figure>

**Formatar**

* Para campos do tipo **número:**
  * **Decimais**: Quantidade de casas decimais utilizado na visualização;
  * **Unidade**: Unidade de medida do campo em questão  (USD, BRL, MEX, CNY, EUR, ANG, COP, DOP, ARS, PEN, UYU, MB, GB, TB, Percent).
  * **Notação**: Notação que pode ser utilizada no campo (Compacta e Científica).

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FO8ZxoAlVDrxIXog2V9d3%2Fimage.png?alt=media&#x26;token=24bac31a-beda-48bc-9ea1-149fb8ecd52b" alt=""><figcaption></figcaption></figure>

* Para campos do tipo **data:**

  * **Formato de data**: Selecione um formato de data que será utilizado para apresentação da data, conforme opções (Por hora, horas e minutos, Diário, Dia e hora, Dia e mês, Mensal, Competência).

  <figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FmVDZcQcWzEFB2DGtAB53%2Fimage.png?alt=media&#x26;token=da1d1112-c3b3-4165-949a-5f231f184660" alt=""><figcaption></figcaption></figure>
* Para campos do tipo **string:**
  * **Decimais**: Quantidade de casas decimais utilizado na visualização;
  * **Unidade**: Unidade de medida do campo em questão  (USD, BRL, MEX, CNY, EUR, ANG, COP, DOP, ARS, PEN, UYU, MB, GB, TB, Percent).
  * **Notação**: Notação que pode ser utilizada no campo (Compacta e Científica).
  * **Formato de data**: Selecione um formato de data que será utilizado para apresentação da data, conforme opções (Por hora, horas e minutos, Diário, Dia e hora, Dia e mês, Mensal, Competência).

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FTW4PtBIErHLwoeEQNqEK%2Fimage.png?alt=media&#x26;token=41c87d08-c5a8-49a0-9abc-f5e96842e312" alt=""><figcaption></figcaption></figure>

* **Regras de cor:** Para alterar a cor, conforme aplicação da regra.
  * **Regra**: Selecione uma das opções de regras (entre, maior que, menor que, maior ou igual a, menor ou igual a)
  * **Valor**: Informe o valor de referencia para a regra
  * **Cor:** Selecione uma opção de cor para ser aplicada quando a regra for atendida.

**Segmentar por**

* **Prefixo:** Entre com o nome correspondente ao campo
* **Campo**: Selecione a informação que irá agrupar e sumarizar os valores de seu gráfico, por exemplo, total por região;
* **Quantidade**: Informe a quantidade de itens que serão visualizados no gráfico, exemplo 10 maiores valores.
* Agrupar excedente em **Outros**: Selecione essa opção caso deseje agrupar o excedente em um novo tipo chamado **Outros**.
* **Manter agrupado**: Habilite esta opção caso deseje que as novas colunas sejam agrupadas sob a referência da coluna original.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fzy62qPC79W2lEKXMbwms%2Fimage.png?alt=media&#x26;token=848df300-e876-45ec-9d88-fc80fbf3dc26" alt="" width="563"><figcaption></figcaption></figure>

**Gráfico**

* **Tipo de Visualização**: Selecione entre gráfico de linhas, de áreas ou de barras.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2F3xtcKdVQHfUA4l139JRQ%2Fimage.png?alt=media&#x26;token=69ea5fee-47e2-44e4-97a3-849a9837cf54" alt="" width="563"><figcaption></figcaption></figure>

### **Área Filtros**

Utilize para filtrar os registros da visualização.<br>

**Conjunção dos Filtros:**

* **Operador "Or"**: Utilize para múltiplas seleções, exemplo, filtrar os produtos "A", "B", "C"...
* **Operador "And"**: Utilize para combinar mais de uma condição, exemplo, produtos que começam com "F" e terminam com "2" ou ainda produtos diferentes de "A" e "B".

**Expressões negativas:** Marque esta opção para inverter a expressão, exemplo, produtos

diferentes de "A" e "B".

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fdou3jaBJFTNO0DKrcm7q%2Fimage.png?alt=media&#x26;token=1e2723c4-232d-47cc-95ef-d49b7505d07d" alt=""><figcaption></figcaption></figure>

Clique em adicionar e em seguida em **Salvar**.

\
**Visualização**

Clicando em “**Aplicar**”, o sistema carregará a visualização.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2F3pBjIxS6yLsndxaltrby%2Fimage.png?alt=media&#x26;token=70832075-ae9d-4ab0-a315-6db32edf6890" alt=""><figcaption></figcaption></figure>

Clicando em “**Salvar**” o sistema será direcionado para a parte de nomeação do título da visualização.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FDH6tbVNoYVnSuzXZ4Hgv%2Fimage.png?alt=media&#x26;token=525f8641-6c4f-4b0b-9f89-361a6be101c7" alt=""><figcaption></figcaption></figure>

Clique em OK e pronto a visualização foi criada com sucesso.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FmJC55TyRNwXquup1C1qu%2Fimage.png?alt=media&#x26;token=0fc7e973-b39c-49c8-af92-372770ae3979" alt=""><figcaption></figcaption></figure>

<br>