---
# System prepended metadata

title: CHARTS

---

<!-- INICIO: Estilos -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<style>
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, code, pre, blockquote, span {
  font-family: 'Roboto', sans-serif !important;
}
    
.nav>li {
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.6;
  margin-left: 0; /* Quitamos el corrimiento lateral */
}

.markdown-body ul {
  padding-left: 1em; /* Espaciado limpio y coherente */
}

.markdown-body img {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px;
    margin: 24px 0;
    background-color: #ffffff;
    display: block;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
    
 .markdown-body li {
  padding: 4px 0;
  margin-left: 5px;
  line-height: 1.4;
}

</style>
<!-- FIN: Estilos -->



# CHARTS

![Lista de CHARTS](https://hackmd.io/_uploads/HJ1uJw5J-g.png)


## Chart DX

Un gráfico **Chart** se utiliza para comparar valores entre diferentes categorías de manera visual y sencilla, según parámetros definidos en los ejes **X e Y**


![Widget ChartDX](https://hackmd.io/_uploads/Byy-mdP_gx.jpg)


Este widget ha sido diseñado para permitir la combinación de diferentes tipos de series dentro de un mismo gráfico. 



### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, único campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo de query en formato json, en este caso, cada objeto del arreglo contiene una propiedad `arg` (categoría del eje X) y `val` (valor numérico para el eje Y).


![ChartDX-Basic options1](https://hackmd.io/_uploads/Sk3lN_Ddge.jpg)


### Chart options

En esta sección se configuran aspectos visuales y de formato general del gráfico, tales como etiquetas, leyendas y unidades:

- **Label Key**: Especifíca la clave del campo que se utilizará como etiqueta en el gráfico. Por ejemplo: "arg".
- **Left Y Axis Title / Right Y Axis Title**: Espacio para personalizar los títulos del eje Y izquierdo y derecho. Esto facilita identificar claramente las métricas representadas en el gráfico.
- **Left Y Axis Unit/ Right Y Axis Unit**: Espacio para definir unidades personalizadas para el eje Y izquierdo y derecho, como por ejemplo: "kg", "%" o "USD". Estas unidades se muestran junto a los valores del eje.
- **Legend**: Permite seleccionar la posición de la leyenda del gráfico. Las opciones disponibles suelen ser "Top", "Bottom", "Left", "Right" y "Hidden". 
- **Text size / Text color**: Permite seleccionar el tamaño y el color del texto de la leyenda, mejorando la legibilidad y la estética del gráfico. Por ejemplo: Text size: 15 - Text color: #ff5733
- **Display labels**: Al activar esta opción, se muestran las etiquetas con valores directamente sobre los puntos o las barras del gráfico.
- **Format labels**: Permite definir entre 3 opciones, un formato para los valores que se muestran como etiquetas:
- **Predefined**: Permite seleccionar un formato estandarizado entre los que se encuentran, p.e.: "Fixed Point", "Percent", "Currency"
- **Custom**: es posible ingresar un formato personalizado, p.e.: 'AWX'
- **Expression**: Se habilita una expresión lógica para transformar dinámicamente los valores. Por ejemplo: *val + "%"*
- **Apply format to axis**: Si se activa esta opción, el formato seleccionado para las etiquetas también se aplicará a los valores mostrados en los ejes.


![ChartDX-Chart options](https://hackmd.io/_uploads/rklD_iv_el.jpg)



### X Axis Options

En esta sección se definen configuraciones específicas para la visualización de las etiquetas del eje **X**, mejorando la legibilidad de los datos categóricos o temporales.

- **X Axis Title**: Permite definir un título descriptivo para el eje X. Este texto se mostrará debajo del eje, brindando contexto sobre los valores representados. P.e.: "Ejemplo"

- **Label display mode**: Permite seleccionar el modo de visualización de las etiquetas del eje X. Las opciones comunes incluyen:

**Standard**: Muestra las etiquetas del eje X en una posición horizontal, alineadas directamente debajo de cada marca del eje. Es el comportamiento predeterminado. 

     **Rotate**: Gira las etiquetas para evitar solapamiento, contiene estas opciones: 
* **Rotation angle**: es posible ingresar el ángulo (en grados) de inclinación de las etiquetas. P.e.: 45 para girarlas 45°.
* **Alignment**: Se utiliza para definir la alineación horizontal del texto rotado. Las opciones disponibles son: "Left", "Right", "Center"
* **Stagger**: Permite escalonar las etiquetas en dos líneas alternadas, desplazando verticalmente las etiquetas pares para evitar superposición si el espacio horizontal es limitado.
* **Show all axis labels**: Este toggle fuerza la visualización de **todas** las etiquetas del eje X. Cuando está activado, el gráfico intentará mostrar todas las etiquetas sin omitir ninguna, aunque puede afectarse la densidad visual. En contraposisción, si el toggle está desactivado, el sistema puede ocultar algunas etiquetas automáticamente para evitar el solapamiento.

![ChartDX-X axis options](https://hackmd.io/_uploads/SyXGt2Pdxe.jpg)



### Series

Asi como es posible configurar la visualización de los datos, en esta sección se configuran las **_series_** de los datos que se mostrarán en el gráfico. Es posible seleccionar múltiples series con distintos estilos y ubicarlas en los ejes Y.

Los atributos a configurar son los siguientes: 

- **Type**: Define el tipo de visualización de la serie. Las opciones típicas incluyen: *Line* (línea continua), *Bar* (barras verticales), *Area* (área  sombreada bajo la línea), *Scatter* (diagrama de dispersión), *Bubble*, entre muchas otras opciones.
- **Value Key**: Campo obligatorio que especifica la **clave del valor** (key) que se tomará del  [datasource](https://hackmd.io/@sitrackio/S1r8PbX2ll#Settings---Configuraci%C3%B3n-Data-Sources) para graficar esta serie, p.e.: *temperature*, *sales*, *total_visits*
- **Dash style**: Permite definir el estilo de línea para las series de tipo **Line**, las opciones incluyen: *Solid*, *Dash*, *Dot* y *DashDot*.
- **Stroke**: Selector de color para la línea, barra o área de la serie. Ayuda a diferenciar visualmente varias series en un mismo gráfico.
- **Y Axis**: Define en qué eje **Y** se mostrará la serie. Las opciones son: *Left* y *Right*. Esta opción es útil para comparar variables con escalas diferentes. P.e.: temperatura y humedad.
- **Botón "+"**: Agrega una nueva serie. Cada nueva serie tendrá los mismos atributos configurables. Ideal para representar múltiples variables en un mismo gráfico.
- **Ícono de papelera 🗑️**: Elimina una serie ya configurada.

![ChartDX-Series](https://hackmd.io/_uploads/HkKeAz5del.jpg)


### Guide lines
Esta sección permite configurar **líneas guía** que se superponen al gráfico principal para resaltar valores clave de referencia como máximos, mínimos o puntos intermedios. Estas líneas ayudan a contextualizar los datos visualizados.

Los atributos configurables por guía son los siguientes:

- **Key**: Clave del valor a representar como línea guía. Este valor debe corresponder a un campo disponible en los datos o a una constante definida en el contexto del gráfico. P.e.: *M1*, *threshold*, *expected_min*.
- **Label**: Texto que se mostrará como etiqueta en la línea guía dentro del gráfico. P.e.: *Máximo*, *Promedio*, *Límite inferior*.
- **Dash style**: Define el estilo visual de la línea guía. Las opciones más comunes son: *Solid*, *Dash*, *Dot*, *Long Dash*.
- **Color**: Selector de color para la línea guía. Ayuda a distinguir visualmente diferentes guías en el gráfico.
- **Ícono de papelera 🗑️**: Permite eliminar la línea guía configurada.
- **Botón "+"**: Agrega una nueva línea guía con los campos configurables correspondientes.


![ChartDX-Guide lines](https://hackmd.io/_uploads/SyhS1E9Ogx.jpg)

### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "


![Chart DX- Basic options](https://hackmd.io/_uploads/HyIB2b26ee.jpg)

![ChartDX-Query](https://hackmd.io/_uploads/r1RZDE9_gg.jpg)



### Guide Lines query

En esta sección se diseñan las líneas guía del gráfico, obtenidas dinámicamente desde una consulta a un datasource. Esto resulta útil para mantener actualizados de forma automática valores de referencia como máximos, mínimos o límites intermedios.
Los atributos configurables son los siguientes:

- **Key field**: Define el campo del resultado de la query que se usará como clave identificadora de cada línea guía.
- **Value field**: Especifica el campo del resultado de la query que contiene el valor numérico que será utilizado para trazar la posición de la línea guía en el gráfico. 
- **Query for guide lines**: Se especifica la consulta que extraerá la información de las líneas guía desde un  [datasource](https://hackmd.io/@sitrackio/S1r8PbX2ll#Settings---Configuraci%C3%B3n-Data-Sources).



![Chart DX- Guide lines query](https://hackmd.io/_uploads/SJFlCS5uel.jpg)

>**Nota**: si se han utilizado los 2 ejes (X e Y) para diseñar el gráfico, las lineas guías se mostrarán para los 2 ejes.


**Ejemplo visual de un widget Chart DX**

[![Ejemplo Widget Chart DX](https://hackmd.io/_uploads/ryDP19ne-g.png =60%x)](https://youtu.be/C3Z8yRW3yO0)


<br/> <br/>


## Areas DX

Un gráfico de área es una representación visual que muestra cómo cambian una o varias variables a lo largo del tiempo, rellenando el espacio bajo la línea de datos para destacar la magnitud acumulada. Sirve principalmente para visualizar tendencias y comparar proporciones entre categorías.


![Widget Areas DX](https://hackmd.io/_uploads/B1RMEoiule.png)


### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, único campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo de query en formato Json.


![Apps - Dashboard - Widget Area_Basic options](https://hackmd.io/_uploads/SkirPjs_xx.png)



### Chart options

En esta sección se configuran aspectos visuales y de formato general del gráfico, tales como etiquetas, leyendas y unidades:

- **Label Key**: Especifica la clave del campo que se utilizará como etiqueta en el gráfico. Por ejemplo: "arg".
- **Custom Label Key**: Espacio para personalizar el nombre de la etiqueta (label key).
- **Left Y Axis Title / Right Y Axis Title**: Espacio para personalizar los títulos del eje Y izquierdo y derecho. Esto facilita identificar claramente las métricas representadas en el gráfico.
- **Left Y Axis Unit/ Right Y Axis Unit**: Espacio para definir unidades personalizadas para el eje Y izquierdo y derecho, como por ejemplo: "kg", "%" o "USD". Estas unidades se muestran junto a los valores del eje.
- **Legend**: Permite seleccionar la posición de la leyenda del gráfico. Las opciones disponibles suelen ser "Top", "Bottom", "Left", "Right" y "Hidden". 
- **Text size / Text color**: Permite seleccionar el tamaño y el color del texto de la leyenda, mejorando la legibilidad y la estética del gráfico. Por ejemplo: Text size: 15 - Text color: #ff5733
- **Display labels**: Al activar esta opción, se muestran las etiquetas con valores directamente sobre los puntos o las barras del gráfico.
- **Format labels**: Permite definir entre 3 opciones, un formato para los valores que se muestran como etiquetas:
     **Predefined**: Permite seleccionar un formato estandarizado entre los que se encuentran, p.e.: "Fixed Point", "Percent", "Currency"
    **Custom**: Es posible ingresar un formato personalizado, p.e.: 'AWX'
    **Expression**: Se habilita una expresión lógica para transformar dinámicamente los valores. Por ejemplo: *val + "%"*
    **Apply format to axis**: Si se activa esta opción, el formato seleccionado para las etiquetas también se aplicará a los valores mostrados en los ejes.


![Widget Areas DX - Charts Options](https://hackmd.io/_uploads/HyuIwWGYex.png)


### X Axis options 

En la sección X axis options se podrá configurar la visualización de las etiquetas del eje X.


![Widget Area DX - X axis options](https://hackmd.io/_uploads/rJfrh-ftgg.png)


Los espacios configurables son:
- **X Axis Title**: Puede especificarse un titulo para el eje X.
- **Label display mode**: Es posible seleccionar el modo o forma en la que se mostrarán los labels del eje X. Las opciones pueden ser: "Standard", "Stagger (escalonada)" y ""Rotate"". Cuando se selecciona esta última opción se activan 2 opciones adicionales. El **Rotation angle (ángulo de rotación)** y la opción de **Alignment (alineación)** que asu vez puede seleccionarse como "Left", "Right" y "Center".



### Series 

Esta sección permite mostrar distintas series, mediante la especificación de las variables de cada una. Ademas de configurar colores de "Refill (Relleno)" de las areas a mostrar y la "Opacity (Opacidad)"" para cada serie ingresada es posible seleccionar el color del "Stroke (Trazo)"


![Widget Area Chart DX - Series](https://hackmd.io/_uploads/Sky-tEMFgl.png)


### Guide Lines


En esta sección es posible configurar "lineas guias" que permiten visualizar mejor la información representada en el gráfico.
Las guias se agregan seleccionando el botón **"+"**

Las variables a configurar con:
    
- **Key**: Se especifica el nombre de la variable que contiene la información a mostrar.
- **Label**: Es la etiqueta que se asigna a la variable y se mostrará en el gráfico.
- **Dash Style**: Estilo de linea de cada linea guia. Es posible seleccionar 4 estilos diferentes: **"Solid", "Dash", "Dot" y Long Dash".**


![Apps - Dashboard - Widget Area_Guide lines](https://hackmd.io/_uploads/HkeRx8MYlg.png)



### Widget Setup 


Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "


![Apps - Dashboard - Widget Area_Basic options 2](https://hackmd.io/_uploads/SJNckH7Kll.png =80%x)
![Apps - Dashboard - Widget Area_Query](https://hackmd.io/_uploads/BkpTLtmYex.png =80%x)


### Guide lines query

En esta sescción se diseñan las líneas guía del gráfico, obtenidas dinámicamente desde una consulta a un [datasource](https://hackmd.io/@sitrackio/S1r8PbX2ll#Settings---Configuraci%C3%B3n-Data-Sources). Esto resulta útil para mantener actualizados de forma automática valores de referencia como máximos, mínimos o límites intermedios.
Los atributos configurables son los siguientes:

- **Key field**: Define el campo del resultado de la query que se usará como clave identificadora de cada línea guía.
- **Value field**: Especifica el campo del resultado de la query que contiene el valor numérico que será utilizado para trazar la posición de la línea guía en el gráfico. 
- **Query for guide lines**: Se especifica la consulta que extraerá la información de las líneas guía desde un [datasource](https://hackmd.io/@sitrackio/S1r8PbX2ll#Settings---Configuraci%C3%B3n-Data-Sources)


**Ejemplo visual de un widget Area DX**


[![Ejemplo Widget Chart DX](https://hackmd.io/_uploads/HyqorM1GWg.png =70%x)](https://youtu.be/6mDlUN1MrWc)


<br/> <br/>


## Widget Pie

Un gráfico tipo pie (o gráfico circular) sirve para representar visualmente cómo se distribuye un conjunto de datos en porcentajes o proporciones dentro de un todo. 


![Widget Pie](https://hackmd.io/_uploads/HJ6m0iVYgg.png)


### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, único campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo de query en formato json.

![Apps - Dashboard - Widget Pie_Basic options](https://hackmd.io/_uploads/rJ-AtA4tgg.png)


### Chart Options


En esta sección se configuran aspectos visuales y de formato general del gráfico, tales como etiquetas, leyendas y unidades:

- **Label Key**: Especifica la clave del campo que se utilizará como etiqueta en el gráfico. Por ejemplo: "arg".
- **Value Key**: Se especifica el nombre de la variable que trae el valor a mostrar en el gráfico. Por ejemplo: "val"
- **Custom Label Key**: Se especifica el nombre de la variable que desea mostrarse en el sector del grafico. 
- **Legend**: Permite seleccionar la posición de la leyenda del gráfico. Las opciones disponibles suelen ser "Top", "Bottom", "Left", "Right" y "Hidden". 
- **Text size / Text color**: Permite seleccionar el tamaño y el color del texto de la leyenda, mejorando la legibilidad y la estética del gráfico. Por ejemplo: Text size: 15 - Text color: #ff5733
- **Label**: Permite seleccionar una posición para mostrar la etiqueta. Puede ser: "exterior", "interior" o "hide (ocultar la etiqueta)". Tambien es posible seleccionar el tamaño del texto ("Text size") y el color ("Text color)".
- **Show on label**: Esta opción permite seleccionar 2 tipos de datos a mostrar, "Percentage (porcentaje)" o "Value(valor)". Es decir, se refiere a que los valores, porcentajes o nombres de las categorías se vean directamente sobre cada porción del gráfico.
- **Show Total**: Si se selecciona esta opción, permite mostrar la suma total de los valores, al pie del gráfico.


![Apps - Dashboard - Widget Pie_Chart options](https://hackmd.io/_uploads/BJfnAJHKll.png)



### Color configuration

En esta sección se selecciona la gama de colores que se aplicará al grafico.
Esta acción puede ejecutarse de 2 formas diferentes, seleccionando el botón "Variable colors" o bien activando el botón "Fixed Colors"

- **Variable Colors**: Esta opción permite asiganr un color a cada porción que se muestra en el grafico. Dentro de esta misma sección está la función *Apply Color Group*que da la opción de seleccionar un grupo de colores pre establecidos. 

![Apps - Dashboard - Widget Pie_Colors configuration](https://hackmd.io/_uploads/r1Kitg5txg.png)



- **Fixed Colors**: Esta opción permite establecer un color determinado de acuerdo al valor exacto de una variable. Esta variable se especifica en el espacio **Color Key**. Por ejmeplo, en la figura que se muestra se ha especificado como _Color Key_ la variable _val_. Luego se selecciona el color y en el espacio disponible se ingresa el *valor exacto* que debe cumplirse para activar el color seleccionado.


![widget Pie - Colors configuration](https://hackmd.io/_uploads/S1NN9gcYle.png)
![Fixed Colors - PIE Chart](https://hackmd.io/_uploads/H1qtuY4Z-x.png)


<br/>  <br/>


### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "


![Apps - Dashboard - Widget Pie_Basic options 2](https://hackmd.io/_uploads/BJugigcYgx.png =80%x)
![Apps - Dashboard - Widget Pie_Query](https://hackmd.io/_uploads/SkwSjlqKxl.png =80%x)


**Ejemplo visual de un widget Pie**


[![Ejemplo Widget PIE](https://hackmd.io/_uploads/BysEUz1M-l.png =70%x)](https://youtu.be/-_v8DtwmYds)

<br/>  <br/>



## Donut

Un gráfico de tipo DONUT (o “donut chart”) es una versión estilizada del gráfico tipo PIE. Ofrece una visualización más clara y elegante, especialmente cuando se quiere destacar proporciones sin saturar el espacio.

![Widget Donut](https://hackmd.io/_uploads/SJJer49Fle.png)



### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, único campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo de query en formato json.

![Apps - Dashboard - Widget Donut_Basic options](https://hackmd.io/_uploads/r1EKt7itxx.png)

### Chart Options


En esta sección se configuran aspectos visuales y de formato general del gráfico, tales como etiquetas, leyendas y unidades:

- **Chart Title**: Espacio para especificar el título del gráfico.
- **Argument Key**: Se especifica el nombre de la variable que trae el argumento a mostrar en el gráfico. Por ejemplo: "arg"
- **Value Key**: Se especifica el nombre de la vriabale que trae el valor del argumento.Por ejemplo: "val".
- **Chart Type**: Por la similitud con el grafico de tipo Pie, esta opción permite seleccionar el tipo pie **(colocar link a este widget)** o de tipo Donut ("Dona").
- **Legend**: Permite seleccionar la posición de la leyenda del gráfico. Las opciones disponibles suelen ser "Top", "Bottom", "Left", "Right" y "Hidden". 
- **Text size / Text color**: Permite seleccionar el tamaño y el color del texto de la leyenda, mejorando la legibilidad y la estética del gráfico. Por ejemplo: Text size: 15 - Text color: #ff5733
- **Legend Title**: Espacio para especificar una leyenda en el encabezado que aparece sobre el gráfico,  indicando qué tipo de información se está desglosando.
- **Disable Animation**: Este toggle permite activar o desactivar la animación de la pocrión de la dona que se selecciona.
- **Show Labels**: Este toggle permite activar o desactivar que se muestren las etiquetas en el gráfico. Si se activa esta opción se muestra la posibilidad de establcer el formato de la etiqueta (*Label Format*)
- **Label Format**: Esta opción tiene 4 formatos posibles: *Decimal*, *Currency*, *Millions* y *Percentage*   



![Apps - Dashboard - Widget Donut_Chart options](https://hackmd.io/_uploads/H1ssKXstle.png)



### Color configuration

En esta sección se seleccionala gama de colores que se aplicará al grafico.
Esta acción puede ejecutarse de 2 formas diferentes, seleccionando el botón ***"Apply color group"*** o bien seleccionando, en cada *"**check box**"* el color que se requiera para cada dato a mostrar.

![Apps - Dashboard - Widget Donut_Colors configuration](https://hackmd.io/_uploads/rknBU4stxx.png)




### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "


![Apps - Dashboard - Widget Donut_Basic options 2](https://hackmd.io/_uploads/Sy5XxrjYgx.png)

![Apps - Dashboard - Widget Donut_Query](https://hackmd.io/_uploads/ry6VgriKee.png)


**Ejemplo visual de un widget Donut**

[![Ejemplo Widget Dona](https://hackmd.io/_uploads/BkIkwf1M-e.png =70%x)](https://youtu.be/38ZVDmkz3Y8)


<br/> <br/>


## Scatter

Un gráfico scatter (también llamado diagrama de dispersión) es una herramienta visual para analizar la relación entre dos variables numéricas. Cada punto en el gráfico representa una observación, con su posición determinada por dos valores: uno en el eje X y otro en el eje Y.
Este grafico sirve para: 
- Identificar patrones o tendencias: Por ejemplo, si al aumentar una variable también aumenta la otra, podría verse una correlación positiva.
- Detectar relaciones entre variables: Por ejemplo: si el peso de una persona se relaciona con su altura.
- Encontrar valores atípicos: Puntos que se alejan mucho del resto pueden indicar errores o casos especiales.
- Visualizar la dispersión de los datos: colabora en determinar si los datos están agrupados, dispersos o siguen alguna forma.
- Explorar hipótesis: Antes de aplicar modelos estadísticos, es útil ver si hay alguna relación visible.

![Widget Scatter](https://hackmd.io/_uploads/BkUpyIsYlx.png)



### Basic Options

En esta sección se realiza la configuración general del widget.

**Name**: Nombre del widget, único campo obligatorio.
**Description**: Descripción opcional del propósito del widget.
**Documentation**: Espacio libre para incluir documentación adicional.
**Sample Data**: Se muestra un ejemplo en formato Json.


![Apps - Dashboard - Widget Scatter_Basic options](https://hackmd.io/_uploads/HyZsePiKgx.png)



### Chart Options

En esta sección se configuraran las variables correspondientes a nombres y etiquetas de los valores para los dos ejes. Además se puede seleccionar la visibilidad y formato de la leyenda y las etiquetas.
Por comodidad se muestra la **configuración de los ejes X e Y** y, a continuación, la configuración de los **Labels**

![Apps - Dashboard - Widget Scatter_Chart options](https://hackmd.io/_uploads/B109hwoFlx.png)

- **Legend**: se especifica el título del gráfico y es posible aplicar estilos como el *Tamaño (Text size)*, expresado en _pixeles_ y el *Color (Text Color)*, este último en formato _hexadecimal_ (#xxxxxx)

#### X Axis

- **Axis Title**: Nombre asignado al eje X
- **Axis Tick Interval**: Define el intervalo numérico o división en el eje X.
- **Axis Type**: Es posible configurar el intervalo numérico como **Discreto** o **Continuo**
- **Custom Axis Config**: Este toggle se activa para configurar el eje X con otras opciones de visualización de los datos tales como:
* **Visual Range from   -   to**: Sirve para establecer un rango de visualización de los datos del eje X. P.e.: -10 a 50
*  **Custom Position**: Permite posicionar el eje X a un nivel determinado por el usuario.
- **Offset**: Es un ajuste en la posición del eje X. P.e.: para evitar que los datos comiencen en cero o para mejorar la visualización de datos superpuestos.
- **X Axis Title**: **----posiblemente sin uso, aunque levantamos una issue para revisar----**
- **Label Display Mode**: Es posible seleccionar el modo de mostrar los datos del eje X, para esto existen 3 opciones disponibles:
- **Standard:** Se muestran los valores del eje X de manera convencional
- **Rotate**: Si se selecciona esta opción se activan 2 campos adicionales para elegir el **Angulo de Rotación (Rotation Angle)** y el **Alineamiento (Alignment)**, esta ultima podria ser _Derecha (Right), Izquierda (Left) o Centro (Center)._
- **Stagger**: Muestra los valores del eje X de manera escalonada.
- **Show all axis labels**: Si se activa este toggle, se mostrarán todos los labels del eje X.

#### Y Axis

- **Axis Title**:  Nombre asignado al eje Y.
- **Axis Tick Interval**: Define el intervalo numérico o división en el eje Y.
- **Axis Type**: Es posible configurar el intervalo numérico como **Logaritmico** o **Continuo**
- **Custom Axis Config**: Este toggle se activa para configurar el eje Y con otras opciones de visualización de los datos tales como:
- **Visual Range from   -   to**: Sirve para establecer un rango de visualización de los datos del eje Y. P.e.: -10 a 50
- **Custom Position**: Permite posicionar el eje Y a un nivel determinado por el usuario.
- **Offset**: Es un ajuste en la posición del eje Y. P.e.: para evitar que los datos comiencen en cero o para mejorar la visualización de datos superpuestos.



![Apps - Dashboard - Widget Scatter_Chart options 2](https://hackmd.io/_uploads/BJwahwoYxx.png)

#### Labels

- **Display labels**: Es un toggle que cuando se activa permite mostrar los labels (son los datos de cada punto)
- **Format labels**: Cuando se activa el toggle anterior se activan 3 opciones para el **Formato** 
- **Predefined:** Formato predefinido que se puede seleccionar desde el menú desplegable, entre ellos: _FixedPoint_, _Decimal_, _Percent_, _Currency_, _Exponential_, y otros más.
- **Custom:** Permite ingresar un formato customizado.
- **Expression:** Permite usar la variable "val" para formatearla.P.e.: _val+"%"_  
- **Apply format to axis**: **----funcionalidad que no genera efecto----**


![Widget Scatter - Lables Predefined](https://hackmd.io/_uploads/HJyCeOsKlg.png)



### Series

Esta sección permite graficar diferentes series de datos, ya sea de forma **Estática** o **Dinámica**. Para agregar una serie basta con seleccionar el botón **"+"**


* **Series - Static**
En esta sección es posible configurar el widget para que muestre otras series de forma estática, esto significa, establcer y definir los siguientes datos:
        
- **Series Name:** Nombre de la serie para identificarla
* **Agument Key:** Nombre de la variable que trae el dato
* **Value Key:** Identifica el valor de la variable
- **Tag Key:** Refiere a una categoría o atributo que se usa para agrupar, clasificar o identificar los puntos del gráfico. No afecta la posición de los puntos (que depende de los valores en los ejes X e Y) 
* **Point Symbol:** Es posible seleccionar un simbolo para indicar lo puntos de la nueva serie. Estos pueden ser un circulo (_Circle_), una cruz (_Cross_), entre otros.
* **Check de Color:** Este check permite acceder a la paleta de colores para asignar un color determinado a los puntos (point symbol) para cada serie.
- **Icono de Eliminar:** Icono que permite eliminar la serie.
    
 ![Apps - Dashboard - Widget Scatter_Series Static](https://hackmd.io/_uploads/SJtExdk9el.png)

 * **Series - Dynamic**
En esta sección es posible configurar el widget para que muestre otra serie de forma dinámica, esto significa que se configuran diferentes variables que son traidas por las queries a un recurso.
Los parámetros a configurar son:

- **Tag Key:** Refiere a una categoría o atributo que se usa para agrupar, clasificar o identificar los puntos del gráfico. No afecta la posición de los puntos (que depende de los valores en los ejes X e Y)
- **Point Symbol:** Es posible seleccionar un simbolo para indicar lo puntos de la nueva serie. Estos pueden ser un circulo (_Circle_), una cruz (_Cross_), entre otros.
* **Argument key:** Nombre de la variable que trae el dato.
- **Vaue key:** Identifica el valor de la variable.
- **Name Field:** Nombre del campo 
- **Color List:** Seleccionando el botón **+** se mostraran colores predeterminados que podrán ser cambiados segun el parecer del diseñador.
    
**-----Agregar un ejemplo con variables dinámicas-----**




![Apps - Dashboard - Widget Scatter_Series Dynamic](https://hackmd.io/_uploads/rk2UxOk9ll.png)



### Guide Lines

En esta sección es posible agregar líneas adicionales que mejoran la visualización de la información que se grafica. Para agregar una linea guia se selecciona el botón **+**. 

- **Key**: Es el nombre de la variable que identifica al valor que se mostrará en la configuración de las lineas (ver **Guide Lines query**)
- **Label**: Es la etiqueta que se mostará en el gráfico
- **Dash style**: Se muestra un menú desplegable que permite seleccionar distintos estilos de lineas, entre ellos *solid*, *dash*, *long dash* y *dot*.
- **Check de color**: Seleccionando este tipo de check se accede a una paleta de colores para asignar a la linea guia.

![Widget Scatter - Guide Lines](https://hackmd.io/_uploads/S1WjWTa9xe.png)

Una vez configuradas las lineas guias, se debe dirigir al Widget Setup en la opción [**Guide lines query**](https://hackmd.io/8gTA44rpSRWsKwkShLerIw?both#Guide-lines-query37)


### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "

![Apps - Dashboard - Widget Scatter_Basic options 2](https://hackmd.io/_uploads/r1HOls_e-l.png)
![Apps - Dashboard - Widget Scatter_Query](https://hackmd.io/_uploads/HJNqgj_xWe.png)


### Guide lines query

En esta sección se especifica el [datasource](https://hackmd.io/@sitrackio/S1r8PbX2ll#Settings---Configuraci%C3%B3n-Data-Sources) que contiene los datos crudos de las lineas guias y cuáles son los campos que "dibujarán" las lineas en el gráfico.


![Apps - Dashboard - Widget Scatter_Guide lines query](https://hackmd.io/_uploads/rkUL-6pcll.png)


> Nota: se adjunta una query de ejemplo 
```json
   select * from
      '[
           { "nombremeta": "Máximo", "valmeta": 1500, "keymeta": "M1" }, 
           { "nombremeta": "Medio", "valmeta": 1300, "keymeta": "M2" }, 
           { "nombremeta": "Mínimo", "valmeta": 1200, "keymeta": "M3" }
      ] ' as data
```

Una vez que se hayan guardado los cambios se visualizará el gráfico.

**Ejemplo visual de widget Scatter**


[![Ejemplo Widget Scatter](https://hackmd.io/_uploads/r1XTDMJz-l.png =70%x)](https://youtu.be/oHxdlPdiX0k)


<br/> <br/>


## Circular Gauge

El widget Circular Gauge, también llamado medidor radial o velocímetro, sirve para representar de forma visual y rápida el progreso de una métrica hacia un objetivo. Es ideal cuando se requiere mostrar un solo valor en relación con un rango, tal como si fuera la aguja de un tablero de auto.
Es te tipo de gráfico sirve para:
- Visualizar KPIs (indicadores clave de rendimiento), como ventas, producción o eficiencia.
- Mostrar el estado actual de una métrica frente a un valor objetivo.
- Detectar desviaciones rápidamente, p.e. si el valor está por debajo del mínimo esperado.
- Comunicar resultados de forma intuitiva en dashboards ejecutivos o informes.


![Widget Circular Gauge](https://hackmd.io/_uploads/SyMtQJA9ge.png)


<br/>

### Gauge Chart  - Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, único campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato Json.

![Apps - Dashboard - Widget Circular Gauge_Basic options](https://hackmd.io/_uploads/ryjX4kAcll.png)


### Chart options

En esta sección se configuran las variables correspondientes a etiqueta y valor para el gráfico. Esto permite una mejor visualizacion de los datos. 

- **Label Key**: Es el nombre de la etiqueta que mostrará el valor que contenga el Value Key.
- **Value Key**: Se especifica la variable que contiene el dato a mostrar en el gráfico.
- **Legend**: Se especifica la ubicación del label, que puede ser *Top*, *Bottom*, *Left*, *Right* o *Hidden*
- Existen 2 campos contiguos que permiten configurar el tamaño de la Leyenda (*Text Size*) y el color en formato hexadecimal (*Text Color*)
- **Show value indicator**: Es un check que una vez activado o clickeado, se muestra un indicador en la aguja del gráfico.


![Apps - Dashboard - Widget Circular Gauge_Chart options](https://hackmd.io/_uploads/r1qIk-Cqxx.png)

### Ranges

En esta sección se configuran los intervalos o franjas cuantitativas que indicará el Gauge. Se inserta un nuevo rango seleccionando el botón ""+"".
Para configurarlos se completan los siguientes campos:

* **Name**: nombre de la etiqueta que marca el intervalo. P.e.: *"Alto Riesgo"*, *"Peligro"*, *"Sin Presión"*
* **Start**: Es un campo numérico que indica el comienzo del intervalo.
* **End**: Es un campo numérico que indica el final del intervalo. 
* **Fill**: Es un tipo de check que permite seleccionar el color de la franja o intervalo.
* **Icono de trash**: Este icono permite la eliminación del intervalo.


![Widget Circular Gauge - Ranges Sin styles](https://hackmd.io/_uploads/BkoqmsOgZg.png)


### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "


![Apps - Dashboard - Widget Circular Gauge_Basic options 2](https://hackmd.io/_uploads/HJkhl5lsxg.png)


### Ranges Query 

**-----Esta sección hay que desarrollarla-----**

**Ejemplo visual de un widget Gauge**


[![Widget Circular Gauge - ejemplo](https://hackmd.io/_uploads/H1TkF9q4bl.png =70%x)](https://youtu.be/ndcLHdkOBaU) 


<br/> <br/>



## Bubble

Un gráfico tipo Bubble (o gráfico de burbujas) es una herramienta visual para representar tres variables al mismo tiempo en un solo gráfico. Es similar a un gráfico de dispersión (Scatter), aunque  con una dimensión extra: el tamaño de la burbuja.
Este gráfico es útil para comparar múltiples variables ya que cada burbuja representa un punto de datos con:

* Posición en el eje X: p.e. ingresos
* Posición en el eje Y: p.e. edad
* Tamaño de la burbuja: p.e. gastos o población
* Detectar patrones y correlaciones: se muestra cómo se relacionan tres variables entre sí de forma intuitiva.
* Identificar valores atípicos: las burbujas muy grandes o muy pequeñas destacan enseguida.
* Visualizar datos complejos: ideal para dashboards, análisis de mercado, estudios demográficos o comparaciones entre proyectos

![Widget Bubble](https://hackmd.io/_uploads/HkVaFlvjxe.png)



### Basic Options

En esta sección se realiza la configuración general del widget.

* **Name**: Nombre del widget, único campo obligatorio.
* **Description**: Descripción opcional del propósito del widget.
* **Documentation**: Espacio libre para incluir documentación adicional.
* **Sample Data**: Se muestra un ejemplo en formato Json.

![Apps - Dashboard - Widget Bubble_Basic options](https://hackmd.io/_uploads/rkc-9eDoxl.png)


### Chart Options

En esta sección se configuraran las variables correspondientes a nombres y etiquetas de los valores para los dos ejes. Además se puede seleccionar la visibilidad y formato de la leyenda y las etiquetas.
Por comodidad se muestra la **configuración de los ejes X e Y** y, a continuación, la configuración de los **Labels**


![Apps - Dashboard - Widget Bubble_Chart options](https://hackmd.io/_uploads/S18g6Vujxx.png)



- **Legend**: se especifica el título del gráfico y es posible aplicar estilos como el *Tamaño (Text size)*, expresado en _pixeles_ y el *Color (Text Color)*, este último en formato _hexadecimal_ (#xxxxxx)

#### X Axis

- **Axis Title**: Nombre asignado al eje X
- **Axis Tick Interval**: Define el intervalo numérico o división en el eje X.
- **Axis Type**: Es posible configurar el intervalo numérico como **Discreto** o **Continuo**
- **Custom Axis Config**: Este toggle se activa para configurar el eje X con otras opciones de visualización de los datos tales como:
* **Visual Range from   -   to**: Sirve para establecer un rango de visualización de los datos del eje X. P.e.: -10 a 50
*  **Custom Position**: Permite posicionar el eje X a un nivel determinado por el usuario.
- **Offset**: Es un ajuste en la posición del eje X. P.e.: para evitar que los datos comiencen en cero o para mejorar la visualización de datos superpuestos.
- **X Axis Title**: **----posiblemente sin uso, aunque levantamos una issue para revisar----**
- **Label Display Mode**: Es posible seleccionar el modo de mostrar los datos del eje X, para esto existen 3 opciones disponibles:
- **Standard:** Se muestran los valores del eje X de manera convencional
- **Rotate**: Si se selecciona esta opción se activan 2 campos adicionales para elegir el **Angulo de Rotación (Rotation Angle)** y el **Alineamiento (Alignment)**, esta ultima podria ser _Derecha (Right), Izquierda (Left) o Centro (Center).
- **Stagger**: Muestra los valores del eje X de manera escalonada.
- **Show all axis labels**: Si se activa este toggle, se mostrarán todos los labels del eje X.

#### Y Axis

- **Axis Title**:  Nombre asignado al eje Y.
- **Axis Tick Interval**: Define el intervalo numérico o división en el eje Y.
- **Axis Type**: Es posible configurar el intervalo numérico como **Logaritmico** o **Continuo**
- **Custom Axis Config**: Este toggle se activa para configurar el eje Y con otras opciones de visualización de los datos tales como:
- **Visual Range from   -   to**: Sirve para establecer un rango de visualización de los datos del eje Y. P.e.: -10 a 50
- **Custom Position**: Permite posicionar el eje Y a un nivel determinado por el usuario.
- **Offset**: Es un ajuste en la posición del eje Y. P.e.: para evitar que los datos comiencen en cero o para mejorar la visualización de datos superpuestos.


#### Labels

- **Display labels**: Es un toggle que cuando se activa permite mostrar los labels (son los datos de cada punto)
- **Format labels**: Cuando se activa el toggle anterior se activan 3 opciones para el **Formato** 
- **Predefined:** Formato predefinido que se puede seleccionar desde el menú desplegable, entre ellos: _FixedPoint_, _Decimal_, _Percent_, _Currency_, _Exponential_, y otros más.
- **Custom:** Permite ingresar un formato customizado.
- **Expression:** Permite usar la variable "val" para formatearla.P.e.: _val+"%"_  
- **Apply format to axis**: **----funcionalidad que no genera efecto----**


![Apps - Dashboard - Widget Bubble_Chart options 2](https://hackmd.io/_uploads/BJXxCVOigl.png)



### Series

Esta sección permite ingresar información para graficar diferentes series de datos, ya sea de forma **Estática** o **Dinámica**. Para agregar una serie basta con seleccionar el botón **"+"**


* **Series - Static**
En esta sección es posible configurar el widget para que muestre otras series de forma estática, esto significa, establcer y definir los siguientes datos:
        
- **Series Name:** Nombre de la serie para identificarla
* **Agument Key:** Nombre de la variable que trae el dato que corresponde al eje X
* **Value Key:** Identifica el valor de la variable que se muestra en el eje Y
- **Tag Key:** Refiere a una categoría o atributo que se usa para agrupar, clasificar o identificar los puntos del gráfico. No afecta la posición de los puntos (que depende de los valores en los ejes X e Y) en el gráfico se vé como un titulo de la burbuja.
* **Point Symbol:** Es posible seleccionar un simbolo para indicar lo puntos de la nueva serie. Estos pueden ser un circulo (_Circle_), una cruz (_Cross_), entre otros.
* **Check de Color:** Este check permite acceder a la paleta de colores para asignar un color determinado a los puntos (point symbol) para cada serie.
- **Icono de Eliminar:** Icono que permite eliminar la serie.
    

![Apps - Dashboard - Widget Bubble_Series Static](https://hackmd.io/_uploads/HkW1yBdile.png)



 * **Series - Dynamic**
En esta sección es posible configurar el widget para que muestre otra serie de forma dinámica, esto significa que se configuran diferentes variables que son traidas por las queries a un recurso.
Los parámetros a configurar son:

- **Tag Key:** Refiere a una categoría o atributo que se usa para agrupar, clasificar o identificar los puntos del gráfico. No afecta la posición de los puntos (que depende de los valores en los ejes X e Y)
- **Point Symbol:** Es posible seleccionar un simbolo para indicar lo puntos de la nueva serie. Estos pueden ser un circulo (_Circle_), una cruz (_Cross_), entre otros.
* **Argument key:** Nombre de la variable que trae el dato.
- **Vaue key:** Identifica el valor de la variable.
- **Name Field:** Nombre del campo 
- **Color List:** Seleccionando el botón **+** se mostraran colores predeterminados que podrán ser cambiados segun el parecer del diseñador.
    
**-----Agregar un ejemplo con variables dinámicas-----**


![Apps - Dashboard - Widget Bubble_Series Dynamic](https://hackmd.io/_uploads/BJBA_Jqsex.png)



### Guide Lines

En esta sección es posible agregar líneas adicionales que mejoran la visualización de la información que se grafica. Para agregar una linea guia se selecciona el botón **+**. 

- **Key**: Es el nombre de la variable que identifica al valor que se mostrará en la configuración de las lineas (ver **Guide Lines query**)
- **Label**: Es la etiqueta que se mostará en el gráfico
- **Dash style**: Se muestra un menú desplegable que permite seleccionar distintos estilos de lineas, entre ellos *solid*, *dash*, *long dash* y *dot*.
- **Check de color**: Seleccionando este tipo de check se accede a una paleta de colores para asignar a la linea guia.

![Apps - Dashboard - Widget Bubble_Guide lines](https://hackmd.io/_uploads/rkTUYJ9jle.png)


Una vez configuradas las lineas guias, se debe dirigir al Widget Setup en la opción [**Guide lines query**](https://hackmd.io/8gTA44rpSRWsKwkShLerIw?both#Guide-lines-query52)

### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "


![Apps - Dashboard - Widget Bubble_Basic options 2](https://hackmd.io/_uploads/HyRzUiOe-e.png)

![Apps - Dashboard - Widget Bubble_Query](https://hackmd.io/_uploads/rJ0Q8iugWg.png)


### Guide lines query

En esta sección se especifica el [datasource](https://hackmd.io/@sitrackio/S1r8PbX2ll#Settings---Configuraci%C3%B3n-Data-Sources) que contiene los datos crudos de las líneas guías ycuáles son los campos que "dibujarán" las líneas en el gráfico.

![Apps - Dashboard - Widget Bubble_Guide lines query](https://hackmd.io/_uploads/rJXHF1qiel.png)


> Nota: se adjunta una query de ejemplo 
```json
   select * from
      '[
           { "nombremeta": "Máximo", "valmeta": 20.5, "keymeta": "M1" }, 
           { "nombremeta": "Medio", "valmeta": 15.5, "keymeta": "M2" }, 
           { "nombremeta": "Mínimo", "valmeta": 10.5, "keymeta": "M3" }
      ] ' as data
```

Una vez que se hayan guardado los cambios se visualizará el gráfico.

**Ejemplo visual de un widget Bubble**

[![Widget Bubble - ejemplo](https://hackmd.io/_uploads/Skf6Yc9Nbx.png =70%x)](https://youtu.be/a-eOzc09JeM) 


<br/> <br/>


## Bar chart DX

Un gráfico de barras sirve para visualizar comparaciones entre categorías de forma clara y rápida. Es una herramienta útil cuando se requiere mostrar diferencias, tendencias o distribuciones en datos categóricos. 

Alguno de los usos principales son:
* Comparar valores entre categorías Ideal para mostrar cuánto representa cada grupo (por ejemplo, ventas por producto, visitas por página, tareas por miembro del equipo).
* Detectar patrones o tendencias Aunque no muestra evolución temporal como un gráfico de líneas, sí permite ver qué categorías destacan o quedan rezagadas.
* Visualizar conteos o frecuencias, útil en análisis exploratorios, encuestas, o resúmenes de datos agrupados.
* Comparar múltiples series, utilizando barras agrupadas o apiladas para mostrar más de una variable por categoría (por ejemplo, ingresos y egresos por mes).

![Widget Bars DX](https://hackmd.io/_uploads/Sy96b7k2gx.png)


### Basic Options

En esta sección se realiza la configuración general del widget.

**Name**: Nombre del widget, único campo obligatorio.
**Description**: Descripción opcional del propósito del widget.
**Documentation**: Espacio libre para incluir documentación adicional.
**Sample Data**: Se muestra un ejemplo en formato Json.

![Apps - Dashboard - Widget Bars_Basic options](https://hackmd.io/_uploads/rklfwXkhlg.png)


### Chart Options

En esta sección se configuran las variables correspondientes a nombres y etiquetas de los valores para los dos ejes. Además se puede seleccionar la visibilidad y formato de la leyenda y las etiquetas. 

* **Label key**: es el nombre de la variable que contiene el dato que se mostrará en el eje Y
* **Min Y range**: valor mínimo a mostrar en el eje Y
* **Max Y range**: valor máximo a mostrar en el eje Y
* **Left Y Axis Title**: Titulo del eje Y izquierdo
* **Right Y Axis Title**: titulo del eje Y derecho
* **Left Y Axis Unit**: es posible especificar la unidad de los datos que se muestran en el eje Y izquierdo
* **Right Y Axis Unit**: es posible especificar la unidad de los datos que se muestran en el eje Y derecho
* **Type**: existen 2 opciones para seleccionar, el tipo "Bars" muestra el grafico rotado 90 grados, es decir que el eje Y cambia su posición con el eje X, no sucede lo mismo si se opta por el tipo "Columns"
* **Bar Chart Type**: se ofrecen 2 opciones para graficar los datos, de tipo "Barras", que se muestran las barras con los datos individuales y "Stacked Bars" como barras apiladas, donde cada barra representa un total, y está dividida en secciones (apiladas una sobre otra) que muestran la composición interna de ese total. Se usa para comparar categorías y ver cómo se distribuyen subcategorías dentro de cada una.
* **Costum Label Key**: en este campo se especifica o customiza la etiqueta (en este caso el nombre de la variable que muestra el dato, el label)
* **Legend**: se especifica el lugar que ocupará el título del gráfico y es posible aplicar estilos como el *Tamaño (Text size)*, expresado en _pixeles_ y el *Color (Text Color)*, este último en formato _hexadecimal_ (#xxxxxx)
* **Display bar labels**: es posible seleccionar la posición de las etiquetas de cada barra, ya sea "Inside", dentro de la barra, o "Outside", fuera de la barra, también es posible seleccionar "Don't Display", no mostrar las etiquetas, que además, es la opción por defecto.
* **Show zero values**: estoggle si se activa, muestra las barras que tengan valores en cero.
* **Resolve label overlapping**: esta opción permite ajustar las etiquetas cuando se superponen.
    * "None" (Ninguna): Muestra cada etiqueta por separado, sin interacción visual entre ellas. Ideal para comparar valores absolutos.
    * "Hide" (Ocultar):  No se muestran los datos superpuestos
    * "Stack" (Apilar): se muestran apiladas las etiquetas.
* **Format labels**: Cuando se activa el toggle anterior se activan 3 opciones para el **Formato** 
   * **Predefined:** Formato predefinido que se puede seleccionar desde el menú desplegable, entre ellos: _FixedPoint_, _Decimal_, _Percent_, _Currency_, _Exponential_, y otros más.
   * **Custom:** Permite ingresar un formato customizado.
   * **Expression:** Permite usar la variable "val" para formatearla.P.e.: _val+"%"_  
* **Apply format to axis**: **----funcionalidad que no genera efecto----*** 

 
![Apps - Dashboard - Widget Bars_Chart options](https://hackmd.io/_uploads/SkbVtEe2el.png)

![Apps - Dashboard - Widget Bars_Chart options 2](https://hackmd.io/_uploads/r1EPKVehxx.png)



### X axis options

En la sección se configurarán detalles a mostrar en el eje X

- **X Axis Title**: se especifica el titulo del eje X
- **Label Display Mode**: es posible seleccionar el modo de mostrar los datos del eje X, para esto existen 3 opciones disponibles:
    - **Standard:** Se muestran los valores del eje X de manera convencional
    - **Rotate**: Si se selecciona esta opción se activan 2 campos adicionales para elegir el **Angulo de Rotación (Rotation Angle)** y el **Alineamiento (Alignment)**, esta ultima podria ser _Derecha (Right), Izquierda (Left) o Centro (Center).

![Apps - Dashboard - Widget Bars_x axis options](https://hackmd.io/_uploads/H1_CW0M2xe.png)


### Series

Esta sección permite ingresar información para graficar diferentes series de datos, ya sea de forma **Estática** o **Dinámica**. Para agregar una serie basta con seleccionar el botón **"+"**


* **Series - Static**
En esta sección es posible configurar el widget para que muestre otras series de forma estática, esto significa, establecer y definir los siguientes datos:
        
    * **Value Key:** Identifica el valor de la variable que se muestra en el eje Y
    * **Fill:** es un *Check de Color*, que permite acceder a la paleta de colores para asignar un color a la serie
    * **Y Axis**: permite seleccionar a cual eje aplica la configuración
    * **Icono de Eliminar:** Icono que permite eliminar la serie.

![Apps - Dashboard - Widget Bars_Series Static](https://hackmd.io/_uploads/rkDQQAGnex.png)


* **Series - Dynamic**
En esta sección es posible configurar el widget para que muestre otra serie de forma dinámica, esto significa que se configuran diferentes variables que son traidas por las queries a un recurso.
Los parámetros a configurar son:

    * **Vaue key:** Identifica el valor de la variable.
    * **Name Field:** Nombre del campo 
    * **Color List:** Haciendo click en los cheks de cada color, se abre la paleta de colores para elegir el que se desee. 
    * **Apply color group**: se abre una paleta de colores predeterminada que luego se verán en los checks del Color List. 
    * **Clear colors**: función que sirve para borrar los colores seleccionados. 
    
**-----Agregar un ejemplo con variables dinámicas-----**

![Widget Bar Chart DX - Series Dynamic](https://hackmd.io/_uploads/SyrmhCf3le.png)



### Guide Lines

En esta sección es posible agregar líneas adicionales que mejoran la visualización de la información que se gráfica. Para agregar una línea guía se selecciona el botón **+**. 

- **Key**: Es el nombre de la variable que identifica al valor que se mostrará en la configuración de las lineas (ver **Guide Lines query**)
- **Label**: Es la etiqueta que se mostará en el gráfico
- **Dash style**: Se muestra un menú desplegable que permite seleccionar distintos estilos de lineas, entre ellos *solid*, *dash*, *long dash* y *dot*.
- **Check de color**: Seleccionando este tipo de check se accede a una paleta de colores para asignar a la linea guia
- **Icono de Eliminar:** Icono que permite eliminar la guía.

![Apps - Dashboard - Widget Bars_Guide lines](https://hackmd.io/_uploads/B1Ssg1Q3xg.png)


Una vez configuradas las lineas guias, se debe dirigir al Widget Setup en la opción [**Guide lines query**](https://hackmd.io/8gTA44rpSRWsKwkShLerIw?both#Guide-lines-query59)


### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "

![Apps - Dashboard - Widget Bars_Basic options 2](https://hackmd.io/_uploads/B1guPjuxZg.png)

![Apps - Dashboard - Widget Bars_Query](https://hackmd.io/_uploads/SJKODodxZg.png)


### Guide lines query

En esta sección se especifica el DataSource que contiene los datos crudos de las líneas guías y cuáles son los campos que "dibujarán" las lineas en el gráfico.

![Apps - Dashboard - Widget Bars_Guide lines query](https://hackmd.io/_uploads/rJs-FyQhxe.png)



> Nota: se adjunta una query de ejemplo 
```json
   select * from
      '[
           { "nombremeta": "Máximo", "valmeta": 20.5, "keymeta": "M1" }, 
           { "nombremeta": "Medio", "valmeta": 15.5, "keymeta": "M2" }, 
           { "nombremeta": "Mínimo", "valmeta": 10.5, "keymeta": "M3" }
      ] ' as data
```

Una vez que se hayan guardado los cambios se visualizará el gráfico.

**Ejemplo visual de un widget Bar Chart DX**


[![Apps - Dashboard - Widget Bars](https://hackmd.io/_uploads/rJRZiocNWe.png =70%x)](https://youtu.be/bpU5posrRAI)



<br/>  <br/>

## Funnel DX

Un gráfico tipo funnel (o embudo) sirve para visualizar cómo se reduce progresivamente un conjunto de datos a través de distintas etapas de un proceso, destacando pérdidas o conversiones en cada fase.

* **¿Qué representa un gráfico tipo funnel?**
    - *Forma de embudo*: Ancho en la parte superior y estrecho en la base, simboliza cómo se filtran o reducen los datos.
    - *Etapas secuenciales*: Cada segmento representa una fase del proceso. Por ejemplo: leads → interesados → prospectos → clientes, referido a un proceso de ventas.
    - *Visualización de eficiencia*: Permite identificar dónde se pierden oportunidades, clientes o recursos.
* **¿Para qué se usa?**
    - *Marketing y ventas*: Para seguir el recorrido del cliente desde el primer contacto hasta la compra.
    - *Procesos de conversión*: En sitios web, muestra cuántos usuarios completan formularios, se registran o compran.
    - *Gestión de proyectos*: Para ver cómo se filtran tareas o decisiones a lo largo de un flujo de trabajo.
    - *Recursos humanos*: En procesos de selección, desde postulantes hasta contrataciones.

📌 Ejemplo práctico:
Supongamos que 1.000 personas visitan una tienda online:
* 600 ven productos
* 300 agregan al carrito
* 100 inician el pago
* 50 completan la compra

El gráfico funnel mostraría visualmente esa caída en cada etapa, ayudando a detectar dónde mejorar la experiencia o el proceso.

Esta opción de gráfico permite realizar tanto un "embudo" como una "pirámide" (embudo invertido)

<div style="display: flex; gap: 20px;">
  <img src="https://hackmd.io/_uploads/rJzr8nllWg.png" alt="Funnel Embudo" style="width: 45%;"/>
  <img src="https://hackmd.io/_uploads/HJEjLnlgZx.png" alt="Funnel Pirámide" style="width: 45%;"/>
</div>



### Basic Options

En esta sección se realiza la configuración general del widget.

* **Name**: Nombre del widget, único campo obligatorio.
* **Description**: Descripción opcional del propósito del widget.
* **Documentation**: Espacio libre para incluir documentación adicional.
* **Sample Data**: Se muestra un ejemplo en formato Json.

![Widget Funnel Chart DX - Basic options](https://hackmd.io/_uploads/B1Pzuhex-e.png)



### Chart Options

En esta sección se definen las variables que determinarán los valores y etiquetas a representar en el gráfico. Además, se puede configurar la visibilidad y el formato de las leyendas y etiquetas, así como seleccionar el tipo de visualización: embudo o pirámide.

1.**Argument Key**: es el nombre del campo del conjunto de datos que se utilizará para identificar y etiquetar cada etapa del embudo. Representa las categorías o pasos secuenciales del proceso visualizado.
2. **Value Key**: representa el valor numérico asociado a cada etapa.
3.**Chart Format**: es un menú desplegable en el que es posible seleccionar si el gráfico será tipo embudo o pirámide.
4. **Legend**: es un componente visual que identifica y describe los elementos representados en el gráfico, asociado a un color (Text Color) y tamaño (Text Size). Concretamente es el nombre de cada etapa.

![Widget Funnel Chart DX - Chart Options](https://hackmd.io/_uploads/HJTnDnelZx.png)

La query utilizada en este caso es la siguiente:

```json
    select * from '[ { "etapa": "Visitas al sitio", "cantidad": 1000 },
                             { "etapa": "Visualización de productos", "cantidad": 600 },
                             { "etapa": "Agregados al carrito", "cantidad": 300 },
                             { "etapa": "Inicio de pago", "cantidad": 100 },
                             { "etapa": "Compras completadas", "cantidad": 50 }
                             ]' as datos
```

### Colors Configuration

Esta sección permite asignar colores personalizados a cada etapa del embudo de forma individual. 


![Apps - Dashboard - Widget FunnelDX_Colors configuration](https://hackmd.io/_uploads/B1xgslzg-x.png)

Incluye dos funciones complementarias: "Apply color group", que aplica una paleta de colores predefinida, y "Clear color", que elimina las asignaciones de color existentes.

<div style="display: flex; gap: 20px;">
  <img src="https://hackmd.io/_uploads/B1lidbzeZx.png" alt="Pickup a color group" style="width: 45%;"/>
  <img src="https://hackmd.io/_uploads/SkQj_ZGxWl.png" alt="Grafico con color" style="width: 45%;"/>
</div>


### Widget Setup

Una vez configurados estos aspectos se mostrará la configuración general de widgets, el [Widget Setup. ](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup)

![Apps - Dashboard - Widget FunnelDX_Basic options 2](https://hackmd.io/_uploads/ry-6didl-l.png)

![Apps - Dashboard - Widget FunnelDX_Query](https://hackmd.io/_uploads/BykCOiul-e.png)

Ejemplo visual de widget Funnel:

[![Widget - Funnel](https://hackmd.io/_uploads/S1qYvC9Nbg.png =70%x)](https://youtu.be/DNqlvIb3XWA)

<br/>  <br/>



## Line chart

Un gráfico de líneas (line chart) sirve para mostrar cómo cambian los datos a lo largo del tiempo o frente a una variable continua, permitiendo visualizar tendencias, patrones y fluctuaciones de forma clara y sencilla.

* ¿Para qué se usa un gráfico de líneas?
    * **Visualizar tendencias temporales**: Ideal para mostrar cómo evoluciona una variable a lo largo de días, meses, años, etc.
    * **Comparar múltiples series**: Se pueden trazar varias líneas en un mismo gráfico para comparar diferentes conjuntos de datos.
    * **Detectar patrones o anomalías**: Ayuda a identificar ciclos, picos, caídas o comportamientos atípicos.
    * **Monitorear el rendimiento**: Muy usado en finanzas, marketing, ciencia y tecnología para seguir métricas clave (como ventas, temperatura, tráfico web, etc.).

![widget lines dx](https://hackmd.io/_uploads/BkRWrCNlZl.png)


### Basic Options

En esta sección se realiza la configuración general del widget.

**Name**: Nombre del widget, único campo obligatorio.
**Description**: Descripción opcional del propósito del widget.
**Documentation**: Espacio libre para incluir documentación adicional.
**Sample Data**: Se muestra un ejemplo en formato Json.

![Widget Line DX - Basic Options](https://hackmd.io/_uploads/SyLxLAVlWx.png)



### Chart Options

En esta sección se configuran las variables correspondientes a etiquetas y títulos y unidades de ejes Y. Además se puede seleccionar la visibilidad y formato de la leyenda y las etiquetas. 

- **Label Key**: es el nombre de la variable que se mostrará en el eje **X**. 
- **Left Y Axis Title**: titulo que se mostrará en el eje **Y** izquierdo.
- **Right Y Axis Title**: titulo que se mostrará en el eje **Y** derecho.
- **Left Y Axis Unit**: unidad de medida que se mostrará en el eje **Y** izquierdo.
- **Right Y Axis Unit**: unidad de medida lo que se mostrará en el eje **Y** derecho.
- **Legend**: es un menú desplegable que permite ubicar los nombres de las series, ya sea en la parte de arriba del gráfico (TOP), abajo (Down), del lado izquierdo (Left), derecho (Right) o bien ocultarlo (Hidden). al mismo tiempo existen 2 campos que permiten configurar el tamaño del texto (**Text Size**) en pixel y el color (**Text color**)
- **Display lables**: es un toggle que al activarlo, permite ver los valores de cada punto en el gráfico.
- **Format labels**: Cuando se activa el toggle anterior se activan 3 opciones para el **Formato** 
   * **Predefined:** Formato predefinido que se puede seleccionar desde el menú desplegable, entre ellos: _FixedPoint_, _Decimal_, _Percent_, _Currency_, _Exponential_, y otros más.
   * **Custom:** Permite ingresar un formato customizado.
   * **Expression:** Permite usar la variable "val" para formatearla.P.e.: _val+"%"_  
* **Apply format to axis**: **----funcionalidad que no genera efecto----*** 


![Apps - Dashboard - Widget LineDX_Chart options](https://hackmd.io/_uploads/HkRuMh_xZx.png)


### X axis options
En esta sección se podrá configurar el título y la posición de las etiquetas del eje X.

- **X Axis Title**: titulo que se mostrará en el eje **X**
- **Label display mode**: es un menú desplegable que permite seleccionar la disposicion del titulo. Contiene 3 opciones: *Standard*,  *Rotate* o *Stagger (escalonada)*. Si se selecciona la opción _Rotate_ se activan otras opciones:
        - **Rotation Angle**: permite seleccionar el angulo de rotación del titulo
        - **Alignement**: permite selecionar la alineación del titulo del eje **X**, puede ser _Left_, _Right_ o _Center_.
- **Show all axis labels**: si se activa este toggle se mostrarán todas las eitquetas del eje X.


![Apps - Dashboard - Widget LineDX_x axis options](https://hackmd.io/_uploads/B1Lte6_ebe.png)



### Series
Esta sección permite ingresar información para graficar diferentes series de datos, ya sea de forma **Estática** o **Dinámica**. Para agregar una serie basta con seleccionar el botón **"+"**


* **Series - Static**
En esta sección es posible configurar el widget para que muestre otras series de forma estática, esto significa, establecer y definir los siguientes datos:
        
    * **Value Key:** Identifica el valor de la variable que se muestra en el eje Y
    * **Dash Style:** es un *Check de Estilos*, que permite establecer el estilo de la linea que se dibuja.Estos estilos pueden ser: **Solid**, **Dot**, **Dash** y **Long Dash**. 
    * **Stroke**: permite permite acceder a la paleta de colores para esa serie en cuestión.
    * **Y Axis**:  selecciona el eje **Y** al que debe aplicar la configuración.



* **Series - Dynamic**
En esta sección es posible configurar el widget para que muestre otra serie de forma dinámica, esto significa que se configuran diferentes variables que son traidas por las queries a un recurso.
Los parámetros a configurar son:

    * **Vaue key:** Identifica el valor de la variable.
    * **Name Field:** Nombre del campo 
    * **Color List:** Haciendo click en los cheks de cada color, se abre la paleta de colores para elegir el que se desee. 
    * **Apply color group**: se abre una paleta de colores predeterminada que luego se verán en los checks del Color List. 
    * **Clear colors**: función que sirve para borrar los colores seleccionados. 
    
    
![Widget Line - Series](https://hackmd.io/_uploads/SJQDXpdlbg.png)

**------Agregar un ejemplo con variables dinámicas------**

![Apps - Dashboard - Widget LineDX_Series Dynamic](https://hackmd.io/_uploads/ByRYQa_lWx.png)

### Guide Lines
Aquí se puedrá agregar líneas guías como es mencionado anteriormente. Para cada una se debe colocar el nombre de la variable con el valor de la línea y la correspondiente a la etiqueta para la misma, además del color y el estilo de la línea.


![Apps - Dashboard - Widget LineDX_Guide lines query](https://hackmd.io/_uploads/SyhD7qMrbl.png)


### Widget Setup

Una vez configurados estos aspectos se mostrará la configuración general de widgets, el [Widget Setup. ](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup)


### Guide Lines Query
Adicional si se han colocado líneas guías, en esta sección se deberá colocar la consulta con la que se obtendrán los valores para las mismas.

[!Tip] *Query del ejemplo* 
 ```json
 select * from '[{
            "nombremeta": "Prueba Máximo",
            "valmeta": 20.5,
            "keymeta": "M1"
          }]' as data
 ```

![Apps - Dashboard - Widget LineDX_Guide lines query](https://hackmd.io/_uploads/SyF7EpOxWl.png)

**Ejemplo visual de un widget Line DX**

[![Widget Line - ejemplo](https://hackmd.io/_uploads/S1g-1KaNWg.png =80%x)](https://youtu.be/P0tUaoVxYcQ)



<br/> <br/>



## Pivot Chart DX

El widget Pivot Chart DX, no es utilizable por si mismo, sino que se debe relacionar a través de la [Tabla Pivot](https://hackmd.io/wZ3yMN3QR9axdIUbhBQ0vw#Pivot-Table-con-Pivot-Chart-DX) que se desarrolla en la sección **Tables**.

**--------VERIFICAR QUE SIGA ACTIVO EL LINK A LA TABLA PIVOT DE LA SECCION TABLES----------**

<br/> <br/>


## Sankey

El widget **Sankey** permite visualizar flujos entre nodos, mostrando conexiones (source → target) con diferentes pesos o volúmenes. Su objetivo es representar cómo se distribuyen elementos, usuarios, recursos o datos a través de distintos puntos o etapas dentro de un proceso. 
Es un tipo de diagrama de flujo en el que la anchura de las flechas representa la cantidad de un recurso que se mueve entre nodos.

![sankey-selección widget](https://hackmd.io/_uploads/BkdikXpVWx.jpg)

El widget **Sankey** permite:

* Visualizar relaciones entre nodos con pesos variables.
* Configurar claves de origen, destino y peso mediante propiedades.
* Personalizar estilos como el ancho del nodo y espacio entre conexiones.
* Interactuar con datos a través de hover y tooltip dinámicos.

**Componentes principales:**

* **Nodos**: representan entidades, ubicaciones o categorías (ejemplo: departamentos, procesos, fuentes de energía).
* **Enlaces**: muestran los flujos entre nodos (ejemplo: electricidad, dinero, agua, usuarios).
* **Anchura proporcional**: el grosor de cada enlace refleja la magnitud del flujo.



### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, único campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo de query en formato json

![Widget Sankey-basic options](https://hackmd.io/_uploads/HJ9KlX6EZg.jpg)


### Sankey Options

Esta sección determina las claves que vinculan la estructura del dataset con los elementos visuales del Sankey.

* **Source key**: Campo que representa el punto de origen en cada flujo.
* **Target key**: Campo que representa el destino del flujo.
* **Weight key**: Valor numérico que define el volumen del flujo.

#### Node Styles

* **Width**: Define el grosor visual del nodo.
* **Padding**: Ajusta el espacio entre los nodos para mejorar la legibilidad.


![Widget Sankey-Sankey options](https://hackmd.io/_uploads/r10OHHTEbe.jpg)


### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "


![Widget Sankey-widget setup](https://hackmd.io/_uploads/ryrJ8Ha4-e.jpg)

![Widget Sankey-Query](https://hackmd.io/_uploads/SJHGUraEWe.jpg)


### Comportamiento en Visualización

- Los nodos se muestran de manera secuencial o ramificada según los valores definidos en los campos *source* y *target*.
- El grosor de cada conexión está determinado por el valor en *weight*.
- Al posicionar el cursor sobre una conexión, se despliega un **tooltip** con el detalle del flujo. 



**Ejemplo visual de un widget Sankey**


[![Widget - Sankey](https://hackmd.io/_uploads/HJy80dTNWl.png =70%x)](https://youtu.be/DLdx7xk3bBQ)



<br/> <br/>



## Polar Chart

El **Polar Chart** permite visualizar datos en un sistema de coordenadas polares. Este tipo de gráfico es útil para representar variables que tienen una naturaleza circular o periódica (como meses del año, direcciones, fases, etc.), comparando diferentes series de datos en torno a un eje central.
Cada punto se define por:

* Ángulo: indica la dirección.
* Radio: indica la magnitud o valor.

**Principales usos**
- Datos direccionales: p.e. dirección y velocidad del viento en meteorología.
- Distribución de valores: permite visualizar cómo se concentran los datos en diferentes ángulos.
- Comparación de variables: se pueden representar varias series en el mismo gráfico para ver patrones.
- Aplicaciones científicas y de ingeniería: Análisis de vibraciones, Señales periódicas, Campos electromagnéticos.
- Visualización empresarial: mostrar métricas como ingresos por región o producto en relación a un ángulo.

![widget Polar](https://hackmd.io/_uploads/BJqVg_fHbx.png)



### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, único campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato Json.


![widget polar - Polar Coordinates Chart - Basic Options](https://hackmd.io/_uploads/SkB43uzrWx.png)

### Chart options

En esta sección se configuran aspectos visuales y de formato general del gráfico.

- **Chart Title**: Título del gráfico. 
- **Argument Key**: Define el campo que se usará como eje angular (categorías).
- **Legend:** Posición de la leyenda. Opciones disponibles: Left, Right, Top, Bottom y Hidden

También es posible ajustar la leyenda en estos aspectos:  **Text size** y **Text color**

![widget polar - chart options](https://hackmd.io/_uploads/SkGunOzS-g.png)


### Data options

Se configuran las opciones de los datos y los ejes.

**Data:**
- Discrete Data: datos categóricos (ej. meses, categorías).
- Periodic Data: datos periódicos que cierran el ciclo (ej. días de la semana, estaciones). Se muestra un espacio para especificar la cantidad de elementos del periodo **CONFIRMAR ESTO**

**Axis**
- Invert Argument Axis: invierte el sentido de los valores.
- Start Angle: ángulo inicial del gráfico (por defecto 0).
- Use spider web: permite mostrar el gráfico con líneas de araña (radiales y circulares).
- First point on start angle: fuerza a que el primer valor se muestre en el ángulo inicial, siempre que no esté habilitada la opción de "Use spider web"
- Axis Division Mode: se refiere a cómo se colocan las divisiones del eje angular respecto a las etiquetas (labels). Se ofrecen 2 opciones: 
    - Between labels
    - Cross labels

![widget polar - data options](https://hackmd.io/_uploads/rJWK2_GSbl.png)

![widget polar - data options - periodic data](https://hackmd.io/_uploads/rJCth_fBWx.png)


### Series

Aquí se definen las series de datos que se van a mostrar.

**Static**: se especifica manualmente cada serie:

- **Series Name**: Nombre de la serie.
- **Value Key**: Clave del valor en el dataset.
- **Series Type**: forma en la que se mostrará la serie dentro del gráfico. Se ofrecen estas opciones: Area, Bars, Lines, Scatter y Stacked Bars

![widget polar - series static](https://hackmd.io/_uploads/B1en2_MBZx.png)


**Dynamic**: permite configurar dinámicamente las series según los datos de entrada.

- **Series Type**: contiene las opciones: Area, Bars, Lines, Scatter y Stacked Bars
- **Value Key**: Clave del valor en el dataset.
- **Name Field**: Nombre del campo que se mostrará en la serie.
- **Color List**: permite seleccionar un color para las series que se muestran. Existe la opción de utilizar la función **"Apply color group"** que ofrece la opción de seleccionar una paleta de colores predeterminada.


![widget polar - series dynamic](https://hackmd.io/_uploads/ryglp_MS-x.png)


### Guide lines

Esta sección permite configurar **líneas guía** que se superponen al gráfico principal para resaltar valores clave de referencia como máximos, mínimos o puntos intermedios. Estas líneas ayudan a contextualizar los datos visualizados.

Los atributos configurables por guía son los siguientes:

- **Key**: Clave del valor a representar como línea guía. Este valor debe corresponder a un campo disponible en los datos o a una constante definida en el contexto del gráfico. P.e.: *M1*, *threshold*, *expected_min*.
- **Label**: Texto que se mostrará como etiqueta en la línea guía dentro del gráfico. P.e.: *Máximo*, *Promedio*, *Límite inferior*.
- **Dash style**: Define el estilo visual de la línea guía. Las opciones más comunes son: *Solid*, *Dash*, *Dot*, *Long Dash*.
- **Color**: Selector de color para la línea guía. Ayuda a distinguir visualmente diferentes guías en el gráfico.
- **Ícono de papelera 🗑️**: Permite eliminar la línea guía configurada.
- **Botón "+"**: Agrega una nueva línea guía con los campos configurables correspondientes.

![widget polar - guide lines](https://hackmd.io/_uploads/B1CE1tMrWx.png)


### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "


![widget setup - basic options](https://hackmd.io/_uploads/BymLJtGHbl.png)
![widget setup - query](https://hackmd.io/_uploads/rkdUytfHbg.png)
![widget polar - guide lines query](https://hackmd.io/_uploads/H1dkVcGSbx.png)



**Ejemplo visual de un widget Polar**


[![Widget - POLAR](https://hackmd.io/_uploads/HkvLv2GSbe.png =70%x)](https://youtu.be/inVZQyZ9UwA)

