# Formato de Gráfico TreeMap

Um gráfico de mapa de árvore fornece uma exibição hierárquica de seus dados e facilita a localização de padrões, como quais recursos são mais utilizados por um provider.

Ao selecionar a opção de **Gráfico TreeMap**, o sistema permitirá que customize algumas outras configurações referentes a opção de gráfico. Para cada customização realizada, será necessário utilizar o botão "**aplicar**" para que reflita na visualização.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FmpRkFh4o634OTTMKXP5L%2Fimage.png?alt=media&#x26;token=0545e34e-8131-4c80-a28d-5ddd9de2aa8e" alt=""><figcaption></figcaption></figure>

* **Altura do gráfico (em px)**: O sistema utiliza a unidade de medida em px (pixel) para aumentar ou diminuir a riqueza de detalhes no gráfico. Quanto maior o pixel, maior será o gráfico.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2F3Sy9mQNqAziwamAloAc8%2Fimage.png?alt=media&#x26;token=5fe7b2be-fe10-4779-976b-ff366092666f" alt=""><figcaption></figcaption></figure>

* **Mostrar rótulos**: Assim como em outros tipos de gráficos, o sistema permite habitar a opção mostrar rótulos, que permitirá que informe o tamanho da fonte que será exibida no rótulo, para que seja possível ajustar de acordo com o espaço disponível.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FYEnKIn4n0hiYMf7ufw7X%2Fimage.png?alt=media&#x26;token=c9aaae1e-c3b8-4e81-af52-e87cbe412978" alt=""><figcaption></figcaption></figure>

* **Personalizar cores:** E personalizar as opções de cores exibidas no gráfico, inclusive editando alguma cor desejada ou inserindo uma nova cor.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FtAMeysYbNfigobyj75Bc%2Fimage.png?alt=media&#x26;token=ca47af05-b6b8-48a6-8e95-10f79d97a8b9" alt=""><figcaption></figcaption></figure>

Podendo adicionar novas cores clicando no ícone "+" ou selecionar uma paleta de cores clicando no ícone "![](https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FKZgNN1z1ToxhSnxFF49P%2Fimage.png?alt=media\&token=5439ff26-fdea-47fc-8449-73e48b12cace)".

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FJ3xRMvYt1ablqXtgLo5C%2Fimage.png?alt=media&#x26;token=1dfb26f9-1d13-4420-ba5a-5c909a43132b" alt=""><figcaption></figcaption></figure>

Selecionando a opção para adicionar uma paleta de cores, o sistema abrirá a tela de **Paleta de Cores**:

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FTPROk2bfEl3ktHnW6ELb%2Fimage.png?alt=media&#x26;token=c9b9cb9e-6f28-4cda-82ed-ce605bcf24c0" alt=""><figcaption></figcaption></figure>

Sendo possível selecionar uma paleta existente, sendo ela padrão, o sistema assumirá as mesmas cores dos outros gráficos que estiverem utilizando a paleta padrão. Podendo também criar uma nova paleta, que será customizada para a sua necessidade e será aplicada apenas para a visualização que estiver utilizando essa paleta.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FMtVZB2fSwTvgJdUJxwkK%2Fimage.png?alt=media&#x26;token=65fb7b01-869c-4c63-acd6-c4d40c44c8b6" alt=""><figcaption></figcaption></figure>

Clicando no ícone "**+ Adicionar**", o sistema abrirá uma tela para criação de uma nova paleta, podendo adicionar novas cores&#x20;

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fe20xS8jAc0XnxW0Jmr9t%2Fimage.png?alt=media&#x26;token=b6e3d4f2-e771-44d9-9161-354b33af0edd" alt=""><figcaption></figcaption></figure>

E alterar as cores existentes clicando em cima da cor que deseja alterar

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FNH8SrwaeP7YcnyzzEbVT%2Fimage.png?alt=media&#x26;token=85c87ef6-73b0-45be-ae0b-108ec53c00a3" alt=""><figcaption></figcaption></figure>

Selecionando a nova cor desejada e clicando no botão **Salvar**, para efetivar a alteração

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2F6L8ACKke4S0AsquUyDjc%2Fimage.png?alt=media&#x26;token=846dd72b-12f5-4494-9759-74a11d01ac08" alt=""><figcaption></figcaption></figure>

Após **salvar** a nova paleta criada, o sistema retornará para a tela principal de Paleta de Cores, podendo selecionar a nova paleta para utilização:

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FjpB8DNaOacOinPRQIcNy%2Fimage.png?alt=media&#x26;token=e078f254-79d6-4453-9d51-b06aadd94930" alt=""><figcaption></figcaption></figure>

Ou até mesmo **definir uma nova paleta como padrão,** além de **remover** uma paleta existente clicando no ícone "![](https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fth1gVeKzkbDDGyB6QKAU%2Fimage.png?alt=media\&token=502978d0-0f9b-4f11-b64b-532a2215baba)"

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2F7AXsQ1XxixSyGb0jpBL7%2Fimage.png?alt=media&#x26;token=8d8dc4a3-0d27-4e0d-9d1d-5c229a167edc" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
OBS.: Caso a Paleta padrão seja alterada, todas as visualizações que estiverem utilizando a Paleta padrão, irão sofrer alteração.
{% endhint %}

* **Expandir competência para:** O sistema irá permitir que a competência seja expendida para:

  * &#x20;**Início do ano:**  Exibe as informações a partir do início do ano.
  * **Ano completo:** Exibe o ano completo.
  * **Estático:** Necessário configurar o mês inicial da competência
  * **Dinâmico:** Necessário configurar a quantidade de meses atrás ou depois.

  <figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FUSPucZtz1vnZKDiTHTE9%2Fimage.png?alt=media&#x26;token=df842b76-ceb5-48c2-b4d3-66b885d0b916" alt="" width="429"><figcaption></figcaption></figure>
* **Alternar linhas e colunas:** Inverter a posição de linhas e colunas, caso faça sentido para a sua visualização.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2FLypvNsdh0E2BU2kvHPkO%2Fimage.png?alt=media&#x26;token=2985bd20-dadd-4f32-b96b-a155ee2cd715" alt=""><figcaption></figcaption></figure>

* **Limitar registros da busca em**: E permite estabelecer um limite de registros retornados na busca. O sistema irá ajustar o tamanho das barras de acordo com a quantidade de registros retornados.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fw4mUN9Q6IrqqhszpjYxu%2Fimage.png?alt=media&#x26;token=54b2176b-0242-4735-b91e-3e7be5fc83b1" alt=""><figcaption></figcaption></figure>

* **Incluir meses**: O sistema também permite inserir um ou mais meses do ano para retornar na busca, desde que esteja dentro do período filtrado.

<figure><img src="https://109632036-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcxn6hAOP0k8IqKSI8iRP%2Fuploads%2Fl8GIVe1uQcEgVtU5MVrD%2Fimage.png?alt=media&#x26;token=1e5de28a-b064-464e-919f-962f9d4788c0" alt=""><figcaption></figcaption></figure>