> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-8a08bda2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Visualizaciones y dashboards con ClickStack
> Visualizaciones y dashboards con ClickStack
export const Image = ({img, alt, size}) => {
return
;
};
ClickStack permite visualizar eventos y ofrece compatibilidad nativa para crear gráficos en la interfaz de usuario de ClickStack (HyperDX). Estos gráficos pueden añadirse a dashboards para compartirlos con otros usuarios.
Las visualizaciones se pueden crear a partir de traza, métricas, logs o cualquier esquema de eventos wide definido por el usuario.
## Creación de visualizaciones
La interfaz **Chart Explorer** de HyperDX permite visualizar métricas, traza y logs a lo largo del tiempo, lo que facilita la creación rápida de visualizaciones para analizar datos. Esta interfaz también se reutiliza al crear dashboards. En la siguiente sección se describe el proceso de creación de una visualización con Chart Explorer.
Cada visualización comienza seleccionando una **fuente de datos**, seguida de una **métrica**, con **expresiones de filtro** y campos de **group by** opcionales. Conceptualmente, las visualizaciones en HyperDX se corresponden internamente con una consulta SQL `GROUP BY`: se definen métricas para agregarlas en las dimensiones seleccionadas.
**Generación de gráficos con IA**
ClickStack también permite crear gráficos a partir de prompts en lenguaje natural mediante la función [text-to-chart](/es/clickstack/text-to-chart). Describe lo que quieres ver y ClickStack genera la visualización automáticamente.
Por ejemplo, podrías crear un gráfico con el número de errores (`count()`) agrupados por nombre de servicio.
Para los ejemplos siguientes, usamos el conjunto de datos remoto disponible en [sql.clickhouse.com](https://sql.clickhouse.com), descrito en la guía ["Remote Demo Dataset"](/es/clickstack/example-datasets/remote-demo-data). **También puedes reproducir estos ejemplos visitando [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com).**
### Ir a Chart Explorer
Selecciona `Chart Explorer` en el menú de la izquierda.
### Crear visualización
En el ejemplo siguiente, creamos un gráfico de la duración media de las solicitudes a lo largo del tiempo por nombre de servicio. Para ello, el usuario debe especificar una métrica, una columna (que puede ser una expresión SQL) y un campo de agregación.
Selecciona el tipo de visualización `Line/Bar` en el menú superior y, a continuación, el conjunto de datos `Traces` (o `Demo Traces` si usas [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com)). Completa los siguientes valores:
* Metric: `Average`
* Column: `Duration/1000`
* Where: ``
* Group By: `ServiceName`
* Alias: `Average Time`
Ten en cuenta que puedes filtrar eventos usando una cláusula SQL `WHERE` o sintaxis Lucene, y establecer el intervalo de tiempo en el que deben visualizarse. También se admiten varias series.
Por ejemplo, filtra por el servicio `frontend` añadiendo el filtro `ServiceName:\"frontend\"`. Agrega una segunda serie para el recuento de eventos a lo largo del tiempo con el alias `Count` haciendo clic en `Add Series`.
Las visualizaciones pueden crearse a partir de cualquier fuente de datos: métricas, traza o logs. ClickStack trata todos estos datos como eventos wide. Cualquier **columna numérica** puede representarse en un gráfico a lo largo del tiempo, y las columnas de tipo **cadena**, **fecha** o **numérico** pueden usarse para agrupaciones.
Este enfoque unificado permite crear dashboards en distintos tipos de telemetría utilizando un modelo coherente y flexible.
## Creación de dashboards
Los dashboards permiten agrupar visualizaciones relacionadas para comparar métricas y explorar patrones en paralelo, con el fin de identificar posibles causas raíz en sus sistemas. Estos dashboards pueden usarse para investigaciones ad hoc o guardarse para el monitoreo continuo.
Los filtros globales pueden aplicarse a nivel de dashboard y se propagan automáticamente a todas las visualizaciones dentro de ese dashboard. Esto permite hacer drill-down de forma coherente entre gráficos y simplifica la correlación de eventos entre servicios y tipos de telemetría.
A continuación, creamos un dashboard con dos visualizaciones usando las fuentes de datos de logs y trazas. Estos pasos pueden reproducirse en [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com) o localmente, conectándose al conjunto de datos alojado en [sql.clickhouse.com](https://sql.clickhouse.com), como se describe en la guía ["Conjunto de datos de demostración remoto"](/es/clickstack/example-datasets/remote-demo-data).
### Vaya a Dashboards
Seleccione `Dashboards` en el menú de la izquierda. Luego, haga clic en `New Dashboard` para crear un dashboard temporal o guardado.
### Crear una visualización: tiempo promedio de solicitud por servicio
Selecciona `Add New Tile` para abrir el panel de creación de visualizaciones.
Selecciona el tipo de visualización `Line/Bar` en el menú superior y, a continuación, el dataset `Traces` (o `Demo Traces` si usas [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com)). Completa los siguientes valores para crear un gráfico que muestre la duración promedio de las solicitudes a lo largo del tiempo para cada nombre de servicio:
* Nombre del gráfico: `Average duration by service`
* Métrica: `Average`
* Columna: `Duration/1000`
* Where: ``
* Agrupar por: `ServiceName`
* Alias: `Average Time`
Haz clic en el botón **play** antes de hacer clic en `Save`.
Cambia el tamaño de la visualización para que ocupe todo el ancho del dashboard.
### Crear una visualización: eventos a lo largo del tiempo por servicio
Seleccione `Add New Tile` para abrir el panel de creación de visualizaciones.
Seleccione el tipo de visualización `Line/Bar` en el menú superior y, a continuación, el conjunto de datos `Logs` (o `Demo Logs` si usa [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com)). Complete los siguientes valores para crear un gráfico que muestre el recuento de eventos a lo largo del tiempo por nombre de servicio:
* Nombre del gráfico: `Event count by service`
* Métrica: `Count of Events`
* Where: ``
* Agrupar por: `ServiceName`
* Alias: `Count of events`
Haga clic en el botón **play** antes de hacer clic en `Save`.
Cambie el tamaño de la visualización para que ocupe todo el ancho del dashboard.
### Agrega un tile de heatmap para la duración de spans
Los tiles de heatmap muestran el recuento de eventos que caen en cada bucket de (tiempo, valor) como una cuadrícula coloreada. Usa un heatmap cuando quieras ver la **forma** de una distribución a lo largo del tiempo, no solo el promedio o un único percentil. Un heatmap de latencia revela patrones de duración bimodales, agrupaciones en la cola lenta o dispersiones repentinas que un gráfico de líneas promediaría y ocultaría.
Para agregar un tile de heatmap:
1. Selecciona `Add New Tile`.
2. Elige el tipo de visualización `Heatmap` en el menú superior. El menú desplegable de fuentes de datos solo muestra fuentes cuyo [tipo de source es `Traces`](/es/clickstack/managing/config#traces). Las fuentes de logs, metrics y session se excluyen, ya que los heatmaps necesitan una columna de duración de span que solo proporcionan las fuentes de traces.
3. Elige cualquiera de tus fuentes de traces por nombre. El nombre en sí es arbitrario; solo importa el tipo.
Una vez seleccionada una fuente, el heatmap completa automáticamente:
* **Value**: la `Duration Expression` de la fuente, ajustada a la unidad de visualización actual (por ejemplo, `(Duration)/1e6` para convertir la duración de span de cada evento de nanosegundos a milisegundos)
* **Count**: `count()`
4. Define un nombre para el gráfico y usa `Where` para limitar el heatmap a un servicio específico o a un conjunto de operaciones cuyo rendimiento quieras observar.
5. Ajusta el intervalo de tiempo para que coincida con el período de interés. Los intervalos más amplios muestran cambios en la distribución y patrones de latencia bimodales que las ventanas más cortas pueden ocultar.
El siguiente ejemplo muestra un único servicio durante una ventana de 24 horas, con las rutas rápida y lenta de la duración de sus spans claramente separadas en dos bandas horizontales.
Para personalizar aún más el heatmap, haz clic en **Display Settings** para abrir un panel con la expresión de **Scale** (Log o Linear), **Value** y **Count**. La lista completa de opciones está documentada en [Personaliza el heatmap](/es/clickstack/features/event-deltas#customize), en la página de Event Deltas. Se reutiliza el mismo panel.
Haz clic en `Run` para obtener una vista previa del gráfico y luego en `Save`.
El tile guardado se muestra como un heatmap en el dashboard. Pasa el cursor sobre cualquier celda para ver los límites del bucket y el recuento de eventos.
**Dos consultas de ClickHouse por heatmap**
El heatmap se ejecuta como dos consultas secuenciales: una pequeña **consulta de límites** que resuelve el rango de valores y luego una **consulta de heatmap** que cuenta los eventos por bucket. Ambas consultas están visibles en el editor, en **Generated SQL**, si quieres inspeccionarlas o copiarlas.
#### Profundiza en Event Deltas
Haz clic en cualquier celda de un tile de heatmap ya renderizado para abrir la acción **View in Event Deltas**.
Al seleccionarla, se abre la vista de [Event Deltas](/es/clickstack/features/event-deltas) con la fuente de datos del tile, la cláusula `Where` y el intervalo de tiempo transferidos. Desde allí puedes examinar la misma distribución de forma interactiva, segmentar por attribute para ver qué hace que los spans lentos sean distintos de los rápidos e inspeccionar los spans individuales detrás de cualquier celda, sin tener que reconstruir manualmente la consulta.
### Filtrar el dashboard
Se pueden aplicar filtros de Lucene o SQL, junto con el intervalo de tiempo, a nivel del dashboard, y se propagarán automáticamente a todas las visualizaciones.
Para demostrarlo, aplique el filtro de Lucene `ServiceName:"frontend"` al dashboard y ajuste el intervalo de tiempo para que abarque las últimas 3 horas. Observe cómo las visualizaciones ahora reflejan únicamente datos del servicio `frontend`.
El dashboard se guardará automáticamente. Para definir el nombre del dashboard, seleccione el título y modifíquelo antes de hacer clic en `Save Name`.
## Dashboards - edición de visualizaciones
Para eliminar, editar o duplicar una visualización, pase el cursor sobre ella y utilice los botones de acción correspondientes.
## Dashboards: listado y búsqueda
Los dashboards están disponibles en la página de dashboards. Están organizados por etiquetas y cuentan con búsqueda y filtrado integrados para localizar rápidamente dashboards específicos.
Los dashboards se pueden marcar como favoritos para acceder fácilmente a ellos desde la barra lateral y desde la parte superior de la página de listado. Los favoritos son individuales para cada usuario.
## Dashboards - etiquetado
Puedes añadir etiquetas a los dashboards y a las búsquedas guardadas para organizarlos mejor.
Las etiquetas ofrecen una forma flexible de clasificarlos y filtrarlos según tus necesidades.
#### Cómo funcionan las etiquetas
* **Organización**: Las etiquetas aparecen en la barra lateral izquierda, donde los dashboards y las búsquedas guardadas se agrupan según las etiquetas asignadas
* **Múltiples etiquetas**: Puedes añadir una o varias etiquetas a un mismo elemento para categorizarlo mejor
* **Creación automática**: Si asignas una etiqueta que aún no existe, se creará automáticamente
* **Gestión sencilla**: Puedes añadir o quitar etiquetas en cualquier momento para ajustar tu organización
Esto facilita encontrar elementos relacionados y mantener un espacio de trabajo ordenado a medida que crece tu colección.
También puedes seleccionar varias etiquetas para filtrar y ver elementos de distintas categorías:
## Filtros personalizados
Además de los [filtros de texto libre](#filter-dashboards) disponibles en todos los dashboards, los dashboards guardados admiten filtros personalizados en listas desplegables que se rellenan con datos consultados desde ClickHouse. Estos proporcionan controles de filtro reutilizables de apuntar y hacer clic, para que quienes consultan el dashboard puedan filtrar sin tener que escribir expresiones manualmente.
Los siguientes pasos muestran cómo añadir un filtro personalizado al dashboard creado en la sección ["Creación de paneles"](#creating-dashboards).
### Abrir el cuadro de diálogo Edit Filters
Abra un dashboard guardado y seleccione **Edit Filters** en la barra de herramientas.
### Añadir un filtro nuevo
Haga clic en **Add new filter**. Configure el filtro indicando un **Name**, seleccionando una **Data source** e introduciendo una **Filter expression**: una columna o expresión SQL cuyos valores distintos rellenarán la lista desplegable. Haga clic en **Save filter**.
Por ejemplo, para añadir un filtro de servicio a datos de traza, use `ServiceName` como expresión de filtro con la fuente de datos `Traces`. El "Dropdown values filter" es opcional y permite restringir qué valores aparecen en la lista desplegable.
El modal Filters muestra todos los filtros configurados para el dashboard. Desde aquí puede editar o eliminar filtros existentes, o añadir más.
### Usar el filtro
Cierre el modal Filters. El nuevo filtro desplegable aparece debajo de la barra de búsqueda. Haga clic en él para ver los valores disponibles y, a continuación, seleccione uno para filtrar todas las visualizaciones del dashboard.
### (Opcional) Guardar los valores del filtro como predeterminados
Para conservar una selección de filtro como valor predeterminado del dashboard, elija **Save Query & Filters as Default** en el menú del dashboard. El dashboard siempre se abrirá con los filtros seleccionados aplicados. Para restablecerlo, seleccione **Remove Default Query & Filters** en el mismo menú.
Los filtros personalizados en listas desplegables están disponibles en los dashboards guardados. Para ver un ejemplo de este patrón en uso, consulte el [panel de Kubernetes](#kubernetes-dashboard), que proporciona filtros desplegables integrados para pod de Kubernetes, Implementación, nombre del nodo, Espacio de nombres y clúster.
## Desglosar en Search
Los tiles del dashboard permiten desglosar hasta la página Search. Haz clic en un punto de datos de una visualización para abrir un menú contextual con las siguientes opciones:
* **Ver todos los eventos** — navega a la página Search y muestra todos los eventos de la ventana de tiempo seleccionada.
* **Filtrar por grupo** — navega a la página Search filtrada por una serie específica.
Esto resulta útil para investigar picos o anomalías concretos detectados en un dashboard: puedes pasar rápidamente de una vista agregada a los eventos individuales subyacentes.
## Preconfiguraciones
HyperDX se despliega con dashboards listos para usar.
### Dashboard de ClickHouse
Este dashboard ofrece visualizaciones para monitorizar ClickHouse. Para acceder a él, selecciónelo en el menú de la izquierda.
Este dashboard usa pestañas para separar la monitorización de **Selects**, **Inserts** e **Infraestructura de ClickHouse**.
**Acceso requerido a las tablas del sistema**
Este dashboard consulta las [tablas del sistema](/es/reference/system-tables) de ClickHouse para mostrar métricas clave. Se requieren los siguientes permisos:
`GRANT SHOW COLUMNS, SELECT(CurrentMetric_MemoryTracking, CurrentMetric_S3Requests, ProfileEvent_OSCPUVirtualTimeMicroseconds, ProfileEvent_OSReadChars, ProfileEvent_OSWriteChars, ProfileEvent_S3GetObject, ProfileEvent_S3ListObjects, ProfileEvent_S3PutObject, ProfileEvent_S3UploadPart, event_time) ON system.metric_log`
`GRANT SHOW COLUMNS, SELECT(active, database, partition, rows, table) ON system.parts`
`GRANT SHOW COLUMNS, SELECT(event_date, event_time, memory_usage, normalized_query_hash, query, query_duration_ms, query_kind, read_rows, tables, type, written_bytes, written_rows) ON system.query_log`
`GRANT SHOW COLUMNS, SELECT(event_date, event_time, hostname, metric, value) ON system.transposed_metric_log`
### Dashboard de servicios
El dashboard de servicios muestra los servicios activos actualmente en función de los datos de trazas. Para ello, debes haber recopilado trazas y configurado una fuente de datos de trazas válida.
Los nombres de los servicios se detectan automáticamente a partir de los datos de trazas, y se presentan en una serie de visualizaciones predefinidas organizadas en tres pestañas: Servicios HTTP, Base de datos y Errores.
Las visualizaciones se pueden filtrar mediante la sintaxis de Lucene o SQL, y el intervalo de tiempo puede ajustarse para un análisis más preciso.
### Dashboard de Kubernetes
Este dashboard permite explorar los eventos de Kubernetes recopilados mediante OpenTelemetry. Incluye opciones avanzadas de filtrado, por lo que puede filtrar por pod de Kubernetes, implementación, nombre del nodo, espacio de nombres y clúster, además de realizar búsquedas de texto libre.
Los datos de Kubernetes se organizan en tres pestañas para facilitar la navegación: Pods, Nodos y Espacios de nombres.