> ## Documentation Index > Fetch the complete documentation index at: https://docs.suasofia.online/llms.txt > Use this file to discover all available pages before exploring further. # Configuração de Widgets > Guia completo para configurar widgets de Estatística, Gráfico e Tabela com todas as opções disponíveis Aprenda como configurar cada tipo de widget com explicações detalhadas de cada opção. ## Criando Widgets 1. Navegue até o painel personalizado 2. Clique em **"Gerenciar Widgets"** e depois em **"Criar Novo Widget"** 3. Selecione o tipo de widget 4. Siga o assistente de 2-3 etapas 5. Salve e adicione ao painel ## Widgets de Estatística Exibição de métrica única com comparação opcional e gráfico de tendência. ### Etapa 1: Básico **Nome do Widget** * Identificador interno para lista de widgets * Não exibido no painel * Exemplo: "Total de Chamadas Deste Mês" **Tabela de Dados** * Escolha a fonte de dados: calls, leads, campaigns, assistants, phone\_numbers, sms * Determina as colunas disponíveis **Agregação** * `COUNT` - Número total de registros (nenhuma coluna necessária) * `SUM` - Soma de valores (requer seleção de coluna) * `AVG` - Média de valores (requer seleção de coluna) * `MAX` - Valor máximo (requer seleção de coluna) * `MIN` - Valor mínimo (requer seleção de coluna) **Coluna** (se SUM/AVG/MAX/MIN selecionado) * Selecione a coluna numérica para agregar * Exemplo: `duration` para duração média de chamada * Não necessário para COUNT ### Etapa 2: Exibição e Filtros **Rótulo** (obrigatório) * Título principal mostrado no widget * Exemplo: "Total de Chamadas" **Descrição** * Texto opcional abaixo do valor * Oculto se comparação habilitada * Exemplo: "Chamadas feitas este mês" **Cor** * primary (azul), success (verde), warning (amarelo), danger (vermelho), info (ciano), gray (cinza) * Escolha baseado no tipo de métrica (verde para positivo, vermelho para negativo) **Mostrar Mini Gráfico** * Exibe pequeno gráfico de linha mostrando tendência diária * Usa o mesmo intervalo de datas da estatística **Comparar com Período Anterior** * Mostra mudança percentual do período anterior * Exemplo: Últimos 7 dias vs 7 dias anteriores * Exibe "+15%" ou "-8%" com seta para cima/baixo * Substitui o campo de descrição **Intervalo de Datas** * Filtrar por data de criação * Opções: Hoje, 1, 7, 14, 30, 60, 90, 180, 365 dias **Condições** (opcional) * Adicione filtros para restringir dados * Múltiplas condições combinadas com AND * Veja a seção [Filtrando Dados](#filtering-data) ### Exemplos **Total de Chamadas** ``` Agregação: COUNT Tabela: calls Rótulo: "Total de Chamadas" Descrição: "Últimos 30 dias" Cor: primary Intervalo de Datas: 30 dias ``` **Duração Média de Chamadas** ``` Agregação: AVG Tabela: calls Coluna: duration Rótulo: "Duração Média" Cor: info Mostrar Mini Gráfico: Sim Intervalo de Datas: 30 dias ``` **Agendamentos Bem-sucedidos** ``` Agregação: COUNT Tabela: calls Rótulo: "Agendamentos Reservados" Cor: success Comparar: Sim Intervalo de Datas: 7 dias Condições: - status = completed - evaluation.appointment_booked = true ``` ## Widgets de Gráfico Visualize tendências com 8 tipos de gráficos. ### Etapa 1: Básico Igual aos widgets de Estatística, mais: **Tipo de Gráfico** * `line` - Tendências ao longo do tempo * `bar` - Compare categorias ou períodos de tempo * `area` - Gráfico de tendência preenchido * `pie` - Proporções (requer Agrupar Por) * `donut` - Pizza com buraco central (requer Agrupar Por) * `polarArea` - Circular com raio variável (requer Agrupar Por) * `radar` - Comparação multi-eixo * `radialBar` - Indicador de progresso único ### Etapa 2: Exibição e Filtros **Rótulo** (obrigatório) * Título do gráfico **Descrição** * Texto de subtítulo opcional abaixo do gráfico * Exemplo: "Desempenho dos últimos 30 dias" **Cor** * Cor primária do gráfico * Para pizza/donut, usa paleta multi-cor (azul, verde, laranja, vermelho, roxo, rosa) **Intervalo de Datas** * Igual às estatísticas **Agrupar Por** OU **Agrupar Por Período** (mutuamente exclusivos) **Agrupar Por** - Agrupamento categórico * Agrupar dados por valores de coluna * Exemplos: Status, Id da Campanha, Nome do Assistente * **Obrigatório** para gráficos pizza/donut/polarArea * Opcional para gráficos barra/radar * **Não pode usar** com Agrupar Por Período **Agrupar Por Período** - Agrupamento baseado em tempo * Agrupar por intervalos de tempo * Opções: hora, dia, semana, mês * Usado para gráficos linha/barra/área * **Não pode usar** com Agrupar Por **Condições** * Igual às estatísticas ### Etapa 3: Avançado (Apenas Gráficos) **Mostrar Linhas de Grade** (apenas linha/barra/área) * Linhas horizontais/verticais de fundo * Ajuda a ler valores exatos * Padrão: Sim **Mostrar Legenda** * Rótulos codificados por cor * Padrão: Sim para pizza/donut/polarArea, Não para outros * Posição: Abaixo do gráfico **Mostrar Dicas** * Pop-ups ao passar mouse com valores exatos * Padrão: Sim (recomendado) **Mostrar Rótulos de Dados** * Valores exibidos diretamente nos elementos do gráfico * Padrão: Sim para pizza/donut/polarArea, Não para outros * Pode poluir gráficos linha/barra **Mostrar Barra de Ferramentas** (apenas linha/barra/área) * Controles de zoom e download * Padrão: Não **Curva da Linha** (apenas linha/área) * `smooth` - Curvas arredondadas (padrão, visualmente atraente) * `straight` - Linhas diretas (preciso) * `stepline` - Degraus (bom para eventos discretos) **Largura da Linha** (apenas linha/barra/área) * Espessura em pixels (1-10) * Padrão: 2px **Altura do Gráfico** * Espaço vertical em pixels (200-800) * Padrão: 300px * Gráficos mais altos melhores para mais pontos de dados **Habilitar Gradiente** (apenas radialBar) * Efeito de gradiente de cor * Padrão: Não **Cor do Gradiente** (se gradiente habilitado) * Cor final para gradiente * Padrão: Verde (#10b981) ### Guia de Tipos de Gráfico **Gráfico de Linha** * **Use para:** Tendências diárias/semanais, dados contínuos * **Requer:** Agrupar Por Período * **Exemplo:** Chamadas por dia nos últimos 30 dias **Gráfico de Barras** * **Use para:** Comparação de categoria, períodos de tempo * **Pode usar:** Agrupar Por (categorias) OU Agrupar Por Período (tempo) * **Exemplo:** Chamadas por campanha, distribuição por hora **Gráfico de Área** * **Use para:** Igual à linha, enfatiza volume * **Requer:** Agrupar Por Período * **Exemplo:** Tendência de volume de chamadas **Gráfico de Pizza/Donut** * **Use para:** Proporções, porcentagens * **Requer:** Agrupar Por (NÃO Agrupar Por Período) * **Exemplo:** Distribuição de status de chamadas **Área Polar** * **Use para:** Como pizza mas mostra magnitude via raio * **Requer:** Agrupar Por * **Exemplo:** Contribuição de campanha **Gráfico Radar** * **Use para:** Comparação multi-variável * **Requer:** Agrupar Por * **Exemplo:** Desempenho entre métricas **Barra Radial** * **Use para:** Porcentagem/progresso único * **Não usa:** Agrupar Por ou Agrupar Por Período * **Exemplo:** % de conclusão de meta ### Exemplos **Volume Diário de Chamadas (Linha)** ``` Tabela: calls Agregação: COUNT Tipo de Gráfico: line Rótulo: "Chamadas Diárias" Agrupar Por Período: dia Mostrar Grade: Sim Curva de Traçado: smooth Intervalo de Datas: 30 dias ``` **Distribuição de Status (Pizza)** ``` Tabela: calls Agregação: COUNT Tipo de Gráfico: pie Rótulo: "Status de Chamadas" Agrupar Por: status Mostrar Legenda: Sim Mostrar Rótulos de Dados: Sim Intervalo de Datas: 7 dias ``` **Padrão por Hora (Barras)** ``` Tabela: calls Agregação: COUNT Tipo de Gráfico: bar Rótulo: "Chamadas Por Hora" Agrupar Por Período: hora Intervalo de Datas: 7 dias ``` **Comparação de Campanhas (Barras)** ``` Tabela: calls Agregação: COUNT Tipo de Gráfico: bar Rótulo: "Chamadas Por Campanha" Agrupar Por: campaign.name Intervalo de Datas: 30 dias ``` ## Widgets de Tabela Exiba registros detalhados com colunas personalizadas. ### Etapa 1: Básico **Tabela de Dados** * Escolha a fonte: calls, leads, campaigns, assistants, phone\_numbers, sms **Filtro de Campanha** (apenas tabela leads) * Selecione campanha para: * Filtrar tabela para essa campanha * Habilitar colunas de variáveis personalizadas * Opcional **Filtro de Assistente** (apenas tabela calls) * Selecione assistente para: * Filtrar tabela para esse assistente * Habilitar colunas de campos de avaliação * Opcional **Seleção de Colunas** * Colunas básicas: Id, Status, Created At, etc. * Colunas de relacionamento: Assistant Name, Campaign Name * Campos de avaliação: evaluation.{field_name} (se assistente selecionado) * Variáveis de lead: variables.{variable_name} (se campanha selecionada) * Padrão se nenhum selecionado: Id, Status, Created At ### Etapa 2: Exibição e Filtros **Rótulo** (obrigatório) * Título da tabela **Descrição** * Subtítulo opcional **Intervalo de Datas** * Igual a estatísticas/gráficos **Ordenar Por** * Coluna de ordenação padrão * Apenas colunas simples (não relacionamentos) * Padrão: created\_at **Direção da Ordenação** * desc (mais recente primeiro) - padrão * asc (mais antigo primeiro) **Linhas Por Página** * Número de linhas a exibir (1-100) * Padrão: 10 **Condições** * Igual a estatísticas/gráficos ### Recursos Interativos **Linhas Clicáveis** * As linhas da tabela são clicáveis * Automaticamente vincula à página de detalhes/edição do registro * Funciona para: Calls, Leads, Campaigns, Assistants **Filtro de Data Dinâmico** * Altere o intervalo de datas diretamente no widget * Substitui o intervalo de datas padrão configurado * Útil para explorar diferentes períodos de tempo **Filtro de Status** * Menu suspenso de seleção múltipla para filtrar por status * Disponível para: Calls, Leads, Campaigns, Assistants, SMS * Selecione múltiplos status de uma vez **Exibição de Texto** * Texto longo automaticamente truncado em 50 caracteres * Passe o mouse sobre texto truncado mostra conteúdo completo em dica ### Tipos de Coluna **Colunas de Número de Telefone** * Formato internacional (+55 11 98765 4321) * Prefixo de bandeira do país * Exemplos: client\_phone\_number, phone\_number **Colunas de Status** * Emblemas coloridos * Exemplos: campo status em qualquer tabela **Colunas de Data** * Formato "3 horas atrás" * Passe o mouse mostra data/hora completa * Exemplos: created\_at, updated\_at **Colunas de Avaliação** (tabela calls com assistente) * Campos booleanos: marca de verificação ou X com emblema verde/vermelho * Campos não-booleanos: valor com emblema cinza * Passe o mouse mostra descrição do campo * Formato: evaluation.{field_name} **Colunas de Variáveis** (tabela leads com campanha) * Dados personalizados de lead * Formato: variables.{variable_name} * Exemplos: customer\_name, company **Colunas de Relacionamento** * Acesse dados relacionados * Exemplos: Assistant Name, Campaign Name * Não pode ordenar por estas ### Exemplos **Chamadas Recentes** ``` Tabela: calls Colunas: - Client Phone Number - Assistant Name - Duration - Status - Created At Ordenar: Created At desc Linhas: 25 Intervalo de Datas: 7 dias ``` **Agendamentos Bem-sucedidos** ``` Tabela: calls Assistente: [Selecione para carregar campos] Colunas: - Client Phone Number - Assistant Name - evaluation.appointment_booked - Created At Ordenar: Created At desc Linhas: 50 Intervalo de Datas: 30 dias Condições: - Status = completed - Coluna: Extracted Variables Nome da Variável Extraída: Custom variable Nome da Variável Personalizada: appointment_booked Operador: = Valor da Variável: true ``` ## Filtrando Dados Todos os widgets suportam condições para filtrar dados. ### Operadores * `=` - Igual * `!=` - Diferente * `>` - Maior que * `>=` - Maior ou igual * `<` - Menor que * `<=` - Menor ou igual * `like` - Contém texto * `in` - Um de (separado por vírgula) * `not in` - Não é um de * `is null` - Sem valor * `is not null` - Tem valor ### Filtragem Básica **Filtro de Status** ``` Coluna: Status Operador: = Valor: completed ``` **Filtro de Duração** ``` Coluna: Duration Operador: > Valor: 60 ``` **Múltiplos Valores** ``` Coluna: Status Operador: in Valor: completed,in-progress ``` ### Filtragem de Campo de Avaliação Filtre por valores de avaliação pós-chamada. **Configuração:** 1. Coluna: Extracted Variables 2. Nome da Variável Extraída: Status ou Custom variable 3. Se Custom variable: Digite o nome do campo em Custom Variable Name 4. Valor da Variável: true/false para booleanos, ou any + valor personalizado **Exemplo Booleano - Agendamento Reservado** ``` Coluna: Extracted Variables Nome da Variável Extraída: Custom variable Nome da Variável Personalizada: appointment_booked Operador: = Valor da Variável: true ``` **Exemplo Não-Booleano - Sentimento** ``` Coluna: Extracted Variables Nome da Variável Extraída: Custom variable Nome da Variável Personalizada: sentiment Operador: = Valor da Variável: any Valor Personalizado: positive ``` **Verificar Se Campo Existe** ``` Coluna: Extracted Variables Nome da Variável Extraída: Custom variable Nome da Variável Personalizada: interested Operador: = Valor da Variável: any ``` ### Múltiplas Condições Condições combinadas com AND: ``` Filtrar para chamadas longas bem-sucedidas: Condição 1: - Coluna: Status - Operador: = - Valor: completed Condição 2: - Coluna: Duration - Operador: > - Valor: 120 Condição 3: - Coluna: Extracted Variables - Nome da Variável Extraída: Custom variable - Nome da Variável Personalizada: appointment_booked - Operador: = - Valor da Variável: true ``` ## Melhores Práticas ### Nomenclatura de Widgets Use nomes internos descritivos: * ✅ "Chamadas de Vendas - Últimos 30 Dias" * ✅ "Duração Média de Suporte" * ❌ "Widget 1" ### Intervalos de Datas Combine intervalo ao caso de uso: * **Hoje:** Monitoramento em tempo real * **7 dias:** Desempenho semanal * **30 dias:** Tendências mensais * **90+ dias:** Análise de longo prazo ### Cores Uso estratégico de cores: * **Verde (success):** Métricas positivas * **Vermelho (danger):** Métricas de alerta * **Azul (primary):** Métricas neutras * **Amarelo (warning):** Atenção necessária * **Cinza (info):** Informação secundária ### Desempenho Mantenha painéis rápidos: * Use filtros de intervalo de datas * Limite widgets por painel a menos de 20 * Use COUNT quando possível (mais rápido) * Evite intervalos de datas muito longos ## Solução de Problemas **Widget mostra "Sem dados"** * Expanda o intervalo de datas * Remova/ajuste filtros * Verifique se a tabela tem registros **Campos de avaliação não aparecem** * Selecione assistente na configuração do widget * Certifique-se de que o assistente tem esquema pós-chamada * Verifique se os nomes dos campos correspondem **Gráfico mostra vazio** * Pizza/donut: Deve usar Agrupar Por (não Período) * Linha/área: Deve usar Agrupar Por Período (não Categoria) * Verifique se o intervalo de datas inclui dados **Tabela faltando colunas** * Colunas de relacionamento precisam de registros relacionados * Colunas de avaliação precisam de seleção de assistente * Colunas de variáveis precisam de seleção de campanha **Erro "Agrupar Por obrigatório"** * Gráficos pizza/donut/polarArea DEVEM ter Agrupar Por * Não pode usar Agrupar Por Período com estes tipos de gráfico **Não pode ordenar por coluna** * Colunas de relacionamento (com .) não são ordenáveis * Campos de avaliação não são ordenáveis * Use colunas básicas para ordenação Para criação de painel e gerenciamento de layout, veja [Visão Geral de Painéis Personalizados](/custom-dashboards/overview).