<!-- 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
## 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**
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).
### 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.
### 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.
### 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.
### 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 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) "
### 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).
>**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**
[](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.
### 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.
### 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.
### X Axis options
En la sección X axis options se podrá configurar la visualización de las etiquetas del eje X.
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)"
### 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".**
### 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) "
### 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**
[](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.
### 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.
### 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.
### 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.
- **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.
<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) "
**Ejemplo visual de un widget Pie**
[](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.
### 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.
### 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*
### 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.
### 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) "
**Ejemplo visual de un widget Donut**
[](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.
### 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.
### 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**
- **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----**
### 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.
* **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-----**
### 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.
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) "
### 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.
> 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**
[](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.
<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.
### 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.
### 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 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) "
### Ranges Query
**-----Esta sección hay que desarrollarla-----**
**Ejemplo visual de un widget Gauge**
[](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
### 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.
### 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**
- **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----**
### 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.
* **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-----**
### 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.
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) "
### 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.
> 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**
[](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).
### 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.
### 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----***
### 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).
### 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.
* **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-----**
### 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.
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) "
### 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.
> 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**
[](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.
### 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.
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.
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)
Ejemplo visual de widget Funnel:
[](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.).
### 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.
### 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----***
### 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.
### 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.
**------Agregar un ejemplo con variables dinámicas------**
### 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.
### 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
```
**Ejemplo visual de un widget Line DX**
[](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.
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
### 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 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) "
### 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**
[](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.
### 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.
### 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**
### 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
### 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
**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.
### 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 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) "
**Ejemplo visual de un widget Polar**
[](https://youtu.be/inVZQyZ9UwA)
Sign in with Wallet
Connect another wallet