Files
upstream-mirror e7da97194a
Some checks failed
App Prod-Parity E2E Dispatch / dispatch (push) Failing after 10s
CD Storybook UI / build (push) Failing after 3m25s
CD Storybook UI / dispatch (push) Has been skipped
CD deploy main / website-changed-files (push) Successful in 18m8s
CI Agent Skills / changed-files-check (push) Successful in 18m9s
CI Create App E2E minimal / changed-files-check (push) Successful in 24s
CI Create App / changed-files-check (push) Successful in 26s
CI Docs / changed-files-check (push) Successful in 26s
CI Emails / changed-files-check (push) Successful in 28s
CI Example App Hello World / changed-files-check (push) Successful in 23s
CI Front / changed-files-check (push) Has been skipped
CI Example App Postcard / changed-files-check (push) Successful in 27s
CI UI / changed-files-check (push) Has been skipped
CI Utils Test / changed-files-check (push) Successful in 45s
CI Twenty Apps / discover (push) Successful in 1m3s
CD deploy main / deploy-main (push) Failing after 3s
CI Agent Skills / agent-skills-validate (push) Has been skipped
CI Create App / create-app-test (lint) (push) Has been skipped
CI Emails / emails-test (push) Has been skipped
CI Front / front-task (lingui:compile) (push) Has been skipped
CI Front / front-task (lint) (push) Has been skipped
CI Example App Postcard / example-app-postcard (push) Has been skipped
CI UI / ui-task (lint) (push) Has been skipped
CI UI / ui-task (pack-size) (push) Has been skipped
CI UI / ui-task (size) (push) Has been skipped
CI UI / ui-task (test) (push) Has been skipped
CI UI / ui-task (typecheck) (push) Has been skipped
CI Utils Test / utils-test (push) Has been skipped
CI Twenty Apps / ${{ matrix.app.name }} (push) Has been skipped
CI Emails / ci-emails-status-check (push) Successful in 2s
CI Example App Hello World / ci-example-app-hello-world-status-check (push) Successful in 2s
CI Example App Postcard / ci-example-app-postcard-status-check (push) Successful in 3s
CI UI / ui-sb-test (push) Has been skipped
CI Utils Test / ci-utils-test-status-check (push) Successful in 2s
CI Twenty Apps / ci-twenty-apps-status-check (push) Successful in 2s
CI UI / ci-ui-status-check (push) Successful in 2s
CI Desktop / desktop (push) Failing after 1m8s
Push docs to Crowdin / Push documentation to Crowdin (push) Failing after 55s
Push translations to Crowdin / Extract and upload translations (push) Failing after 5s
Push website translations to Crowdin / Extract and upload website translations (push) Failing after 5s
CI Create App / create-app-test (test) (push) Has been skipped
CI Create App / create-app-test (typecheck) (push) Has been skipped
CI Docs / docs-lint (push) Has been skipped
CI Example App Hello World / example-app-hello-world (push) Has been skipped
CI Front / front-task (lingui:extract) (push) Has been skipped
CI Front / front-task (test) (push) Has been skipped
CI Front / front-task (typecheck) (push) Has been skipped
CI UI / ui-sb-build (push) Failing after 1m32s
CI Twenty Apps / ${{ matrix.app.name }} (${{ matrix.server-source }}) (push) Has been skipped
CI Agent Skills / agent-skills-publish (push) Has been skipped
CI Create App / ci-create-app-status-check (push) Successful in 2s
CI Agent Skills / agent-skills-remote-source (push) Has been skipped
CI Create App E2E minimal / create-app-e2e-minimal (push) Has been cancelled
CI E2E Main / e2e-test (push) Has been cancelled
CI Front / front-sb-build (push) Has been cancelled
CI Front / front-build (push) Has been cancelled
CI Create App E2E minimal / ci-create-app-e2e-minimal-status-check (push) Has been cancelled
CI E2E Main / ci-e2e-main-status-check (push) Has been cancelled
CI E2E Main / notify-main-ci-failure (push) Has been cancelled
CI E2E Main / qa-scout-comment (push) Has been cancelled
CI Front / front-sb-test (push) Has been cancelled
CI Front / front-sb-screenshots (push) Has been cancelled
CI Front / ci-front-status-check (push) Has been cancelled
DPA Sub-Processor Sync / sync-subprocessors (push) Failing after 3s
AI Catalog Sync / sync-catalog (push) Failing after 2s
snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)
2026-09-17 23:28:13 +05:00

170 lines
5.0 KiB
Plaintext

---
title: Widgets
description: Explora los tipos de widgets y las opciones de visualización en Twenty.
---
import { ChartIcon } from '/snippets/chart-icon.mdx';
## Widgets disponibles
Twenty ofrece varios tipos de widgets para visualizar tus datos de CRM.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-bar-popular" />Gráficos de barras</span>
Muestra los datos como barras horizontales o verticales.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-bar-chart.png" alt="Gráfico de barras" />
</Frame>
**Ideal para:**
* Comparar valores entre categorías
* Mostrar clasificaciones
* Hacer seguimiento de métricas por período de tiempo
**Ejemplos de uso:**
* Oportunidades por etapa
* Ingresos por representante de ventas
* Contactos agregados por mes
<Note>
**Límites de visualización**: Los gráficos de barras pueden mostrar un máximo de 100 barras y 50 grupos por barra cuando se usa Agrupar por. Si ves la advertencia "Datos no mostrados: máximo de X barras por gráfico", agrega filtros para acotar tus datos o cambia la agrupación (p. ej., agrupar por semana en lugar de por días).
</Note>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-pie" />Gráficos de pastel</span>
Muestra las proporciones de un todo.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-pie-chart.png" alt="Gráfico de pastel" />
</Frame>
**Ideal para:**
* Mostrar composición o distribución
* Comparar las partes con el todo
* Resaltar los segmentos principales
**Ejemplos de uso:**
* Distribución de oportunidades por origen
* Desglose de contactos por sector
* Composición del embudo por propietario
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-line" />Gráficos de líneas</span>
Muestra las tendencias a lo largo del tiempo.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-line-chart.png" alt="Gráfico de líneas" />
</Frame>
**Ideal para:**
* Hacer seguimiento de los cambios a lo largo del tiempo
* Identificar tendencias
* Comparar múltiples métricas
**Ejemplos de uso:**
* Tendencia mensual del número de oportunidades
* Crecimiento de ingresos por trimestres
* Niveles de actividad a lo largo del tiempo
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="sum" />Gráficos agregados</span>
Muestra valores clave individuales de forma destacada.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-aggregate-chart.png" alt="Gráfico agregado" />
</Frame>
**Ideal para:**
* Resaltar los KPI
* Mostrar totales o promedios
* Comprobaciones rápidas de estado
**Ejemplos de uso:**
* Valor total del embudo
* Número de oportunidades abiertas
* Tasa de conversión
**Opciones avanzadas:**
* **Proporción**: Para campos de tipo Select, calcula proporciones entre valores. Ve a **Datos en pantalla** → selecciona tu campo → activa la opción **Proporción**.
* **Prefijo y sufijo**: Agrega texto personalizado antes o después del número (p. ej., prefijo "$" o sufijo "%") para mejorar la legibilidad.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="frame" />iFrames</span>
Incorpora herramientas y contenido externos directamente en tu panel.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-table.png" alt="Tabla" />
</Frame>
**Ideal para:**
* Búsqueda de elementos individuales
* Comprobación de valores exactos
* Auditoría o referencia
**Ejemplos de uso:**
* Oportunidades que se cierran este mes
* Nuevos leads esta semana
* Facturas vencidas
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="table" />Tabla</span>
Ve los registros filtrados directamente en tu panel.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-iframe.png" alt="iFrame" />
</Frame>
**Ideal para:**
* Mostrar informes o paneles externos
* Integrar herramientas de ventas de terceros
* Mostrar contenido en tiempo real de otros sistemas
**Ejemplos de uso:**
* Métricas de tu herramienta de soporte
* Métricas de tu herramienta de marcación
* Contenido en tiempo real de tu herramienta de secuencias de ventas
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="align-box-left-top" />Texto enriquecido</span>
Añade texto con formato y contenido directamente a tu panel.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-rich-text.png" alt="Texto enriquecido" />
</Frame>
**Ideal para:**
* Añadir contexto o instrucciones
* Descripciones del panel
* Notas y anotaciones
**Funciones:**
* Formato de texto enriquecido (negrita, cursiva, listas, etc.)
* Carga de imágenes y archivos
* Edición con estilo Markdown
<Note>
**Próximamente**: Los gráficos de indicador aún no están disponibles, pero están en nuestra hoja de ruta.
</Note>
### Duplicar widgets
1. Haz clic en el widget
2. Abre **Opciones**
3. Haz clic en **Duplicar widget**