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
5.0 KiB
Plaintext
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**
|