> ## Documentation Index
> Fetch the complete documentation index at: https://ayuda.pxsol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creación de Panel Personalizado

> Aprende a crear y personalizar tu propio panel con gráficos para visualizar información de manera rápida y eficiente.

# Creación de panel personalizado

La aplicación de Informes y Paneles permite crear y personalizar tu propio panel con los gráficos que prefieras para visualizar información de manera rápida y eficiente.

**¿Cómo crear mi panel?**

Para configurar un nuevo panel, sigue estos pasos:

<Steps>
  <Step title="1. Accede a la aplicación y presiona 'Nuevo panel'">
    Accede a la aplicación Informes y Paneles y presiona "Nuevo panel".

    <Frame>
      *
    </Frame>
  </Step>

  <Step title="2. Configura las opciones generales del panel">
    En el margen derecho, selecciona:

    * **Título del panel**
    * **Descripción**
    * **Paleta de colores** para la visualización de los gráficos
    * **Período a visualizar** en la configuración

    <Frame>
      <img src="https://7398646.fs1.hubspotusercontent-na1.net/hubfs/7398646/image-png-Apr-23-2025-04-54-26-5006-PM.png" alt="Opciones de configuración general del panel" />
    </Frame>
  </Step>
</Steps>

En el margen izquierdo encontrarás los componentes disponibles para construir tu panel.

**Estructura:**

* Columnas: **Sirven para organizar el panel en distintas secciones. Es necesario agregar al menos una columna al arrastrarla hacia el panel, ya que esto habilita la posibilidad de insertar gráficos posteriormente.**
* Caja contenedora: **Permite insertar un recuadro dentro de una columna para agrupar y estructurar mejor los elementos.**

**Gráficos**: - Puedes elegir entre gráficos de torta, barras, líneas o combinados (barra y línea).

**Otros**: - **Datos**: Incluyen KPI, totales, tabla y contadores.

<Frame>
  <img src="https://7398646.fs1.hubspotusercontent-na1.net/hubfs/7398646/image-png-Apr-23-2025-04-55-13-2535-PM.png" alt="Componentes de datos disponibles para el panel" />
</Frame>

**Construcción del Panel**

<Steps>
  <Step title="1. Estructura el panel con columnas">
    Arrastra y suelta las columnas deseadas para estructurar el panel.
  </Step>

  <Step title="2. Agrega y configura gráficos">
    Agrega y configura los gráficos según tus necesidades.

    <Frame>
      <img src="https://7398646.fs1.hubspotusercontent-na1.net/hubfs/7398646/image-png-Apr-23-2025-04-56-11-4374-PM.png" alt="Arrastrar y soltar un gráfico en el panel" />
    </Frame>
  </Step>

  <Step title="3. Selecciona el informe a utilizar">
    Haz clic sobre el recuadro del gráfico y, en el margen derecho, selecciona "Elegir informe a utilizar".

    <Frame>
      <img src="https://7398646.fs1.hubspotusercontent-na1.net/hubfs/7398646/image-png-Apr-03-2025-02-37-22-6893-PM.png" alt="Seleccionar informe para el gráfico" />
    </Frame>
  </Step>

  <Step title="4. Elige el informe">
    Selecciona el informe que deseas visualizar en el gráfico.

    <Frame>
      <img src="https://7398646.fs1.hubspotusercontent-na1.net/hubfs/7398646/image-png-Apr-03-2025-02-37-43-4100-PM.png" alt="Lista de informes disponibles para visualizar" />
    </Frame>
  </Step>

  <Step title="5. Personaliza variables">
    Personaliza cada gráfico utilizando diferentes variables.
  </Step>
</Steps>

**Configuración de Gráficos**

**Gráfico de Torta**

* **Título**: Nombre del gráfico.

* **Descripción**: Breve explicación.

* **Agrupar por**: Criterio para organizar la información.

* **Radio interno**: Personaliza la visualización.

* **Mostrar leyenda**: Habilita la visualización de segmentos.

* **Número máximo de valores**: Limita la cantidad de datos mostrados.

* **Altura máxima**: Define el alto del gráfico.

* **Columna a filtrar**: Permite establecer un filtro en el gráfico.

* **Filtrar por**: Campo obligatorio con la variable a visualizar en caso de seleccionar columna a filtrar.

* **Tipo de fecha:** permite determinar qué variable de fecha se utilizará para mostrar el gráfico (al igual que sucede en el informe).

**Gráfico de Barras**

* **Título**: Nombre del gráfico.

* **Descripción**: Breve explicación.

* **Agrupar por**: Criterio para organizar la información.

* **Barras**: Permite configurar las barras que se mostrarán en el gráfico. Incluye:
  * **Columna:** Selecciona la columna de datos que se utilizará para generar las barras.
  * **Tipo de agregación:** Determina cómo se procesarán los datos. Opciones: Suma o Conteo.
  * **Filtro:** Aplica un filtro adicional para limitar los datos.

* **Mostrar leyenda:** Habilita la visualización de segmentos.

* **Número máximo de valores**: Limita la cantidad de datos mostrados.

* **Altura máxima**: Define el alto del gráfico.

* **Columna a filtrar**: Permite establecer un filtro en el gráfico.

* **Filtrar por**: Campo obligatorio con la variable a visualizar en caso de seleccionar columna a filtrar.

**Gráfico de Líneas**

* **Título**: Nombre del gráfico.

* **Descripción**: Breve explicación.

* **Eje X**.

* **Líneas:** Permite configurar las líneas que se mostrarán en el gráfico. Incluye:
  * **Columna:** Selecciona la columna de datos que se utilizará para generar las líneas.
  * **Tipo de agregación:** Determina cómo se procesarán los datos. Opciones: Suma o Conteo.

* **Filtro:** Aplica un filtro adicional para limitar los datos.

* **Número máximo de valores**: Limita la cantidad de datos mostrados.

* **Columna a filtrar**: Permite establecer un filtro en el gráfico.

* **Altura máxima**: Define el alto del gráfico.

* **Ordenar**: Ascendente o descendente.

* **Filtrar por**: Campo obligatorio con la variable a visualizar.

**Gráfico Compuesto**

* **Título**: Nombre del gráfico.

* **Descripción**: Breve explicación.

* **Agrupar por**: Criterio para organizar la información.

* **Gráficos**: Permite configurar los gráficos que se mostrarán. Incluye:
  * **Columna:** Selecciona la columna de datos que se utilizará para generar los gráficos.
  * **Tipo de agregación:** Opciones: Suma o Conteo.
  * **Filtro:** Aplica un filtro adicional.

* **Número máximo de valores**: Limita la cantidad de datos mostrados.

* **Columna a filtrar**: Permite establecer un filtro en el gráfico.

* **Altura máxima**: Define el alto del gráfico.

* **Filtrar por**: Campo obligatorio con la variable a visualizar.

**KPI**

* **Título**: Nombre del gráfico.
* **Descripción**: Breve explicación del gráfico.

**Total**

* **Tipo de agregación**: Método utilizado para calcular el dato.
* **Título**: Nombre del gráfico.
* **Descripción**: Breve explicación del gráfico.
* **Prefijo**: Texto opcional que se mostrará antes del valor.
* **Sufijo**: Texto opcional que se mostrará después del valor.

**Tabla**

* **Número máximo de valores a mostrar:** Limita la cantidad de datos mostrados.

* **Columnas a mostrar:** Permite seleccionar los datos del informe que se desean visualizar en la tabla.

* **Columna de filtro**: Campo utilizado para filtrar los datos.

* **Valor del filtro**: Criterio aplicado para filtrar la información.

**Contador**

* **Título**: Nombre del gráfico.

* **Descripción**: Breve explicación del gráfico.

* **Ícono:** Permite agregar un ícono al título.

* **Color del texto:** Permite seleccionar un color para los datos mostrados.

* **Columna:** Permite seleccionar los datos del informe que se desean visualizar en el contador.

* **Tipo de comparación:** Permite seleccionar un valor fijo de comparación o bien otro dato seleccionado en la columna de comparación.

* **Tipo de agregación**: Método utilizado para calcular el dato.

* **Columna de filtro**: Campo utilizado para filtrar los datos.

* **Valor del filtro**: Criterio aplicado para filtrar la información.

**Finalización**

Una vez configurados todos los gráficos, haz clic en el botón "Crear panel" para guardarlo.

<Frame>
  <img src="https://7398646.fs1.hubspotusercontent-na1.net/hubfs/7398646/image-png-Mar-26-2025-08-41-52-0749-PM.png" alt="Botón para crear panel" />
</Frame>
