github-actions[bot]
9acc5c192f
Created by Github action <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/23452?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. --> Co-authored-by: github-actions <github-actions@twenty.com>
170 lines
4.9 KiB
Plaintext
170 lines
4.9 KiB
Plaintext
---
|
|
title: Widgets
|
|
description: Explore os tipos de widget e as opções de visualização no Twenty.
|
|
---
|
|
|
|
import { ChartIcon } from '/snippets/chart-icon.mdx';
|
|
|
|
## Widgets disponíveis
|
|
|
|
O Twenty oferece vários tipos de widget para visualizar seus dados de CRM.
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-bar-popular" />Gráficos de barras</span>
|
|
|
|
Exiba dados como barras horizontais ou verticais.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-bar-chart.png" alt="Gráfico de barras" />
|
|
</Frame>
|
|
|
|
**Melhor para:**
|
|
|
|
* Comparar valores entre categorias
|
|
* Mostrar classificações
|
|
* Acompanhar métricas por período de tempo
|
|
|
|
**Exemplos de uso:**
|
|
|
|
* Negócios por etapa
|
|
* Receita por representante de vendas
|
|
* Contatos adicionados por mês
|
|
|
|
<Note>
|
|
**Limites de exibição**: gráficos de barras podem mostrar no máximo 100 barras e 50 grupos por barra ao usar Agrupar por. Se você vir o aviso "Undisplayed data: max X bars per chart", adicione filtros para reduzir seus dados ou altere o agrupamento (por exemplo, agrupe por semana em vez de por dia).
|
|
</Note>
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-pie" />Gráficos de pizza</span>
|
|
|
|
Exiba proporções do todo.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-pie-chart.png" alt="Gráfico de pizza" />
|
|
</Frame>
|
|
|
|
**Melhor para:**
|
|
|
|
* Mostrar composição ou distribuição
|
|
* Comparar partes com o todo
|
|
* Destacar os principais segmentos
|
|
|
|
**Exemplos de uso:**
|
|
|
|
* Distribuição de negócios por origem
|
|
* Distribuição de contatos por setor
|
|
* Composição do pipeline por responsável
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-line" />Gráficos de linha</span>
|
|
|
|
Exiba tendências ao longo do tempo.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-line-chart.png" alt="Gráfico de linha" />
|
|
</Frame>
|
|
|
|
**Melhor para:**
|
|
|
|
* Acompanhar mudanças ao longo do tempo
|
|
* Identificar tendências
|
|
* Comparar várias métricas
|
|
|
|
**Exemplos de uso:**
|
|
|
|
* Tendência mensal do número de negócios
|
|
* Crescimento da receita ao longo dos trimestres
|
|
* Níveis de atividade ao longo do tempo
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="sum" />Gráficos agregados</span>
|
|
|
|
Exiba em destaque valores-chave únicos.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-aggregate-chart.png" alt="Gráfico agregado" />
|
|
</Frame>
|
|
|
|
**Melhor para:**
|
|
|
|
* Destacar KPIs
|
|
* Mostrar totais ou médias
|
|
* Verificações rápidas de status
|
|
|
|
**Exemplos de uso:**
|
|
|
|
* Valor total do pipeline
|
|
* Número de oportunidades em aberto
|
|
* Taxa de conversão
|
|
|
|
**Opções avançadas:**
|
|
|
|
* **Proporção**: para campos do tipo Seleção, calcule proporções entre valores. Vá para **Dados em exibição** → selecione seu campo → ative a opção **Proporção**.
|
|
* **Prefixo e Sufixo**: adicione texto personalizado antes ou depois do número (por exemplo, prefixo "$" ou sufixo "%") para melhor legibilidade.
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="frame" />iFrames</span>
|
|
|
|
Incorpore ferramentas e conteúdo externos diretamente no seu painel.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-table.png" alt="Gráfico de tabela" />
|
|
</Frame>
|
|
|
|
**Melhor para:**
|
|
|
|
* Pesquisando itens individuais
|
|
* Verificando valores exatos
|
|
* Auditoria ou referência
|
|
|
|
**Exemplos de uso:**
|
|
|
|
* Negócios que serão fechados neste mês
|
|
* Novos leads nesta semana
|
|
* Faturas em atraso
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="table" />Tabela</span>
|
|
|
|
Veja os registros filtrados diretamente no seu painel.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-iframe.png" alt="iFrame" />
|
|
</Frame>
|
|
|
|
**Melhor para:**
|
|
|
|
* Exibir relatórios ou painéis externos
|
|
* Integrar ferramentas de vendas de terceiros
|
|
* Mostrar conteúdo em tempo real de outros sistemas
|
|
|
|
**Exemplos de uso:**
|
|
|
|
* Métricas da sua ferramenta de Suporte
|
|
* Métricas do seu discador
|
|
* Conteúdo em tempo real da sua ferramenta de sequências de Vendas
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="align-box-left-top" />Texto enriquecido</span>
|
|
|
|
Adicione texto e conteúdo formatados diretamente ao seu painel.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-rich-text.png" alt="Texto enriquecido" />
|
|
</Frame>
|
|
|
|
**Melhor para:**
|
|
|
|
* Adicionar contexto ou instruções
|
|
* Descrições do painel
|
|
* Notas e anotações
|
|
|
|
**Recursos:**
|
|
|
|
* Formatação de texto enriquecido (negrito, itálico, listas, etc.)
|
|
* Envio de imagens e arquivos
|
|
* Edição no estilo Markdown
|
|
|
|
<Note>
|
|
**Em breve**: gráficos de medidor ainda não estão disponíveis, mas estão em nosso roteiro.
|
|
</Note>
|
|
|
|
### Duplicar widgets
|
|
|
|
1. Clique no widget
|
|
2. Abra **Opções**
|
|
3. Clique em **Duplicar widget**
|