Pizza, Rosca e Funil

O Widget de Pizza (e suas variações, Rosca e Funil) é utilizado para mostrar a proporção de partes em relação a um todo. Ele é ideal para exibir como um valor total (Vendas Totais) é dividido entre categorias (por Região, por Categoria de Produto).

📊 Tipos de Visualização

Este Widget suporta três modos visuais distintos:

1. Pizza (Pie): O clássico gráfico circular
   • Uso recomendado: Para poucas categorias (2 a 5 fatias)
2. Rosca (Donut): Similar à pizza, mas com o centro vazado
   • Uso recomendado: Esteticamente mais moderno, ideal quando se quer destacar o todo
3. Funil (Funnel): Forma triangular invertida
   • Uso recomendado: Para etapas de processos sequenciais (Leads > Propostas > Vendas) onde há redução natural de volume em cada etapa

---

⚙️ Configuração de Dados

Estrutura

• Eixo (Dimensão): A categoria que dividirá as fatias (Marca)
• Valor (Métrica): O número que define o tamanho da fatia (Valor Total)
• Ordenação: É possível ordenar as fatias (do maior para o menor ou por etapa, utilizando um campo extra)

🎨 Configuração Visual (Aba Visual)

Aparência Geral

• Aparência: Padrão, Transparente (sem fundo/borda) ou Destacado (com sombra)
• Cor do Fundo: Cor fixa ou dinâmica via expressão (na aparência Padrão)
• Tipo de Gráfico: Alternância rápida entre Pizza, Rosca e Funil

Rótulos de Dados (Data Labels)

Controle total do texto que será apresentado sobre cada fatia:

• Mostrar Valor: Exibe o número absoluto
• Mostrar Percentual: Exibe a representatividade da fatia
• Mostrar Nome: Exibe o nome da categoria (Eixo)
• Posição:
  • Interno: Dentro da fatia (ideal para poucas fatias grandes)
  • Externo: Fora do gráfico com linhas de chamada (ideal para fatias menores)
• Formatação Numérica: Forçar formato (Moeda, %, Inteiro, Reduzido) independente do banco de dados

Legenda

• Mostrar Legenda: Toggle para exibir ou ocultar a informação
• Posição: Superior ou Inferior

🔢 Limitação de Resultados

Essencial para evitar gráficos de pizza ilegíveis com centenas de fatias finas.

• Limitar em: Define o número máximo de fatias (Top 10)
• Mostrar fatia ("Outros"): Agrupa todo o restante em uma única fatia cinza no final, garantindo que o total 100% seja preservado

Opções Específicas de Funil

• Tamanho do Funil: Muito Pequeno, Pequeno, Médio, Grande. Afeta a largura visual do cone

---

🎨 Cores e Estilos

É possível configurar as cores de duas formas principais:

1. Cor por Eixo (Categoria):
   • Use para fixar cores específicas para marcas ou status ("Aprovado" sempre verde, "Reprovado" sempre vermelho)
   • É possível configurar manualmente a cor para cada item
2. Cor por Expressão:
   • Permite lógica avançada via JavaScript
   • Exemplo: if (this.value > 1000) return 'green'; else return 'red';

Para personalizar, clique no ícone de engrenagem ao lado da coluna selecionada.

---

🔻 Funil (Opções Específicas)

Quando o tipo Funil é selecionado:

• Tamanho: Controla a largura e o estreitamento do funil (Muito Pequeno a Grande)
• Posição dos Rótulos:
  • Externo: Mostra linhas conectando o nome da etapa ao funil
  • Interno: Tenta posicionar o texto dentro da área colorida

---

💻 Expressões Comuns

Contexto de Coloração

Ao usar Cor por Expressão, acessam-se os dados da fatia específica que está sendo colorida.

Variável	Descrição	Exemplo
this.value	Valor numérico da fatia (Métrica)	if (this.value < 0) return 'red';
this.axis	Nome da categoria da fatia (Dimensão)	if (this.axis == 'Crítico') return 'red';
this.result	Lista completa de dados do gráfico	const total = this.result.reduce(...);

Exemplos Práticos:

1. Colorir apenas uma categoria específica:

// Pinta de verde se for "Lucro", o resto fica cinza
if (this.axis == 'Lucro') {
    return '#22c55e'; // Verde
}
return '#e5e7eb'; // Cinza

2. Colorir baseado em meta (Valor):

// Vermelho se vendas forem menores que 1000
if (this.value < 1000) {
    return '#ef4444'; 
}
return '#3b82f6'; // Azul