> ## 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.

# Paneles

> La función de paneles de SQL Console le permite recopilar y compartir visualizaciones a partir de consultas guardadas.

export const Image = ({img, alt, size}) => {
  return <Frame>
      <img src={img} alt={alt} />
    </Frame>;
};

export const galaxyOnClick = eventName => () => {
  try {
    if (typeof window !== "undefined" && window.galaxy && eventName) {
      window.galaxy.track(eventName, {
        interaction: "click"
      });
    }
  } catch (e) {}
};

export const BetaBadge = ({link, galaxyTrack, galaxyEvent}) => {
  if (link) {
    return <a href={link} target="_blank" rel="noopener noreferrer" className="betaBadge" onClick={galaxyTrack && galaxyEvent ? galaxyOnClick(galaxyEvent) : undefined}>
                <Icon />
                <span>Beta</span>
            </a>;
  }
  return <div className="betaBadge">
            <Icon />
            <span>
                Beta feature. 
                <u>
                    <a href="/docs/beta-and-experimental-features#beta-features">
                        Learn more.
                    </a>
                </u>
            </span>
        </div>;
};

La función de paneles de SQL Console te permite reunir y compartir visualizaciones a partir de consultas guardadas. Para empezar, guarda consultas y crea visualizaciones, añade las visualizaciones de las consultas a un panel y haz que el panel sea interactivo con parámetros de consulta.

<div id="core-concepts">
  ## Conceptos clave
</div>

<div id="query-sharing">
  ### Compartir consultas
</div>

Para compartir tu panel con tus colegas, asegúrate de compartir también la consulta guardada en la que se basa. Para ver una visualización, debes tener, como mínimo, acceso de solo lectura a la consulta guardada en la que se basa.

<div id="interactivity">
  ### Interactividad
</div>

Usa [parámetros de consulta](/es/reference/syntax#defining-and-using-query-parameters) para que tu panel sea interactivo. Por ejemplo, puedes añadir un parámetro de consulta a una cláusula `WHERE` para que actúe como filtro.

Puedes mostrar u ocultar el campo del parámetro de consulta desde el panel lateral de filtros **Global** seleccionando un tipo “filter” en la configuración de la visualización. También puedes mostrar u ocultar el campo del parámetro de consulta vinculándolo a otro objeto (como una tabla) del panel. Consulta la sección “[configurar un filtro](/es/products/cloud/features/sql-console-features/dashboards#configure-a-filter)” de la guía de inicio rápido que aparece a continuación.

<div id="quick-start">
  ## Inicio rápido
</div>

Vamos a crear un panel para supervisar nuestro servicio de ClickHouse usando la tabla del sistema [query\_log](/es/reference/system-tables/query_log).

<div id="quick-start">
  ## Inicio rápido
</div>

<div id="create-a-saved-query">
  ### Crear una consulta guardada
</div>

Si ya tienes consultas guardadas para visualizar, puedes omitir este paso.

Abre una nueva pestaña de consulta. Vamos a escribir una consulta para contar el volumen de consultas por día en un servicio usando las tablas del sistema de ClickHouse:

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/Q67DpMkcKgzQJkGD/images/cloud/dashboards/2_dashboards.png?fit=max&auto=format&n=Q67DpMkcKgzQJkGD&q=85&s=6e3cc2bfb603a3a949521f3caef4dc33" size="md" alt="Crear una consulta guardada" border width="1600" height="1372" data-path="images/cloud/dashboards/2_dashboards.png" />

Podemos ver los resultados de la consulta en formato de tabla o empezar a crear visualizaciones desde la vista de gráfico. En el siguiente paso, guardaremos la consulta como `queries over time`:

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/Q67DpMkcKgzQJkGD/images/cloud/dashboards/3_dashboards.png?fit=max&auto=format&n=Q67DpMkcKgzQJkGD&q=85&s=ce40ebf9af562752646c9d1ea43f7265" size="md" alt="Guardar consulta" border width="1274" height="484" data-path="images/cloud/dashboards/3_dashboards.png" />

Puedes encontrar más documentación sobre las consultas guardadas en la [sección Saving a Query](/es/products/cloud/features/sql-console-features/sql-console#saving-a-query).

Podemos crear y guardar otra consulta, `query count by query kind`, para contar el número de consultas por tipo de consulta. Aquí tienes una visualización de gráfico de barras de los datos en la SQL Console.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/Q67DpMkcKgzQJkGD/images/cloud/dashboards/4_dashboards.png?fit=max&auto=format&n=Q67DpMkcKgzQJkGD&q=85&s=7803ff57f27b2f17f428f105a21f4c76" size="md" alt="Una visualización de gráfico de barras de los resultados de una consulta" border width="1438" height="1600" data-path="images/cloud/dashboards/4_dashboards.png" />

Ahora que ya hay dos consultas, vamos a crear un panel para visualizarlas y agruparlas.

<div id="create-a-dashboard">
  ### Crear un panel
</div>

Ve al panel Dashboards y haz clic en “New Dashboard”. Cuando le asignes un nombre, habrás creado tu primer panel.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/Q67DpMkcKgzQJkGD/images/cloud/dashboards/5_dashboards.png?fit=max&auto=format&n=Q67DpMkcKgzQJkGD&q=85&s=25a523e3a6c600c6b6d48fefb0c17c71" size="md" alt="Crear un nuevo panel" border width="1466" height="778" data-path="images/cloud/dashboards/5_dashboards.png" />

<div id="add-a-visualization">
  ### Añadir una visualización
</div>

Hay dos consultas guardadas, `queries over time` y `query count by query kind`. Visualicemos la primera como un gráfico de líneas. Asigna un título y un subtítulo a la visualización, y selecciona la consulta que quieres visualizar. A continuación, selecciona el tipo de gráfico “Line” y asigna un eje X y un eje Y.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/Q67DpMkcKgzQJkGD/images/cloud/dashboards/6_dashboards.png?fit=max&auto=format&n=Q67DpMkcKgzQJkGD&q=85&s=4a7fdc9236416635a0e7c028467ef8cd" size="md" alt="Añadir una visualización" border width="1600" height="1097" data-path="images/cloud/dashboards/6_dashboards.png" />

Aquí también puedes hacer cambios de estilo adicionales, como el formato de los números, la disposición de la leyenda y las etiquetas de los ejes.

A continuación, visualicemos la segunda consulta como una tabla y colócala debajo del gráfico de líneas.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/Q67DpMkcKgzQJkGD/images/cloud/dashboards/7_dashboards.png?fit=max&auto=format&n=Q67DpMkcKgzQJkGD&q=85&s=02ed09475a15dbc1ee94f4fcec7c497d" size="md" alt="Visualizar los resultados de la consulta como una tabla" border width="1600" height="1048" data-path="images/cloud/dashboards/7_dashboards.png" />

¡Has creado tu primer panel visualizando dos consultas guardadas!

<div id="configure-a-filter">
  ### Configurar un filtro
</div>

Hagamos que este panel sea interactivo añadiendo un filtro sobre el tipo de consulta, para que puedas mostrar solo las tendencias relacionadas con las consultas Insert. Realizaremos esta tarea usando [parámetros de consulta](/es/reference/syntax#defining-and-using-query-parameters).

Haz clic en los tres puntos junto al gráfico de líneas y, después, en el botón del lápiz que aparece junto a la consulta para abrir el editor de consultas en línea. Aquí podemos editar directamente desde el panel la consulta guardada subyacente.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/Q67DpMkcKgzQJkGD/images/cloud/dashboards/8_dashboards.png?fit=max&auto=format&n=Q67DpMkcKgzQJkGD&q=85&s=2d088a3725f98a18d0def203c7ecabc5" size="md" alt="Editar la consulta subyacente" border width="1115" height="1600" data-path="images/cloud/dashboards/8_dashboards.png" />

Ahora, al pulsar el botón amarillo de ejecutar consulta, verás la misma consulta de antes filtrada para mostrar solo las consultas Insert. Haz clic en el botón Guardar para actualizar la consulta. Cuando vuelvas a la configuración del gráfico, podrás filtrar el gráfico de líneas.

Ahora, usando Filtros globales en la barra superior, puedes activar o desactivar el filtro cambiando el valor de entrada.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/Q67DpMkcKgzQJkGD/images/cloud/dashboards/9_dashboards.png?fit=max&auto=format&n=Q67DpMkcKgzQJkGD&q=85&s=78fcf57875e7b4b3625890617338662b" size="md" alt="Ajustar los filtros globales" border width="1600" height="1045" data-path="images/cloud/dashboards/9_dashboards.png" />

Supongamos que quieres vincular el filtro del gráfico de líneas a la tabla. Puedes hacerlo volviendo a la configuración de la visualización, cambiando el origen del valor del parámetro de consulta query\_kind a una tabla y seleccionando la columna query\_kind como el campo que se va a vincular.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/Q67DpMkcKgzQJkGD/images/cloud/dashboards/10_dashboards.png?fit=max&auto=format&n=Q67DpMkcKgzQJkGD&q=85&s=c89343736adf85cfa963cb2e9c6b8b2e" size="md" alt="Cambiar el parámetro de consulta" border width="1600" height="1045" data-path="images/cloud/dashboards/10_dashboards.png" />

Ahora puedes controlar el filtro del gráfico de líneas directamente desde la tabla de consultas por tipo para hacer que tu panel sea interactivo.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/Q67DpMkcKgzQJkGD/images/cloud/dashboards/11_dashboards.png?fit=max&auto=format&n=Q67DpMkcKgzQJkGD&q=85&s=08d328185e1be52555b9773b70691de6" size="md" alt="Controlar el filtro en el gráfico de líneas" border width="1600" height="1012" data-path="images/cloud/dashboards/11_dashboards.png" />
