📊 Area · Propiedades del Widget
Objetivo Principal: Permite al usuario configurar el widget Área, utilizado para representar la evolución temporal de los datos rellenando el espacio bajo la línea, dentro de dashboards Analytics.
📸 Mapeo de Interfaz
La captura no muestra esto
La imagen corresponde a una versión anterior. En la 0.4.46 la pestaña "Apariencia" incluye además las secciones "Paleta de colores", "Nombres de series" y "Tipo de curva", y su sección "Contenedor" ya no ofrece el selector "Fondo" ni el deslizador "Transparencia" cuando el gráfico se configura desde un dashboard.
🧩 Despiece de Elementos Funcionales
Los elementos marcados con — no aparecen señalados en la captura: existen en la versión 0.4.46 pero la imagen no los numera.
| # | Nombre del Elemento | Tipo | Destino / Acción | Descripción Funcional |
|---|---|---|---|---|
| 1 | Pestañas de configuración | Navegación interna | Cambia sección de propiedades | Permite alternar entre las distintas categorías de configuración del gráfico. Para utilizarlo, el usuario debe pulsar “Datos”, “Apariencia” o “Texto” según el tipo de configuración que quiera modificar. |
| 1.1 | Campo "Nombre del widget" | Campo de texto | Renombra el gráfico | Permite definir el nombre identificativo del gráfico dentro del dashboard. Para utilizarlo, el usuario debe escribir el nombre que quiera mostrar en la cabecera del widget. |
| 1.2 | Sección "Configuración General" | Configuración de datos | Configura variables y agregación | Permite seleccionar las variables que utilizará el gráfico y cómo se procesarán los datos. Para utilizarlo, el usuario debe pulsar “Editar”, seleccionar variables y configurar agregación e intervalo. |
| 1.3 | Sección "Rango de Tiempo" | Configuración temporal | Configura periodo de datos | Permite definir el rango temporal utilizado por el gráfico. Para utilizarlo, el usuario puede usar el filtro global o configurar un rango específico según las necesidades del dashboard. |
| 2 | Pestaña "Apariencia" | Configuración visual | Personaliza el gráfico | Permite acceder a todas las configuraciones visuales relacionadas con el diseño y estilo del gráfico. |
| 2.1 | Sección "Contenedor" | Configuración visual | Ajusta apariencia del widget | Permite modificar el estilo del contenedor del gráfico. Para utilizarlo, el usuario debe elegir el "Estilo de marco" y decidir con las casillas si oculta la cabecera, el borde, la ventana temporal o el conteo de variables. El selector de fondo y el deslizador de transparencia sólo se ofrecen al configurar el gráfico desde una vista SCADA. |
| 2.2 | Sección "Opciones de gráfico" | Configuración funcional | Ajusta visualización | Permite activar o desactivar "Mostrar leyenda", "Mostrar cuadrícula" y "Activar tooltip en hover". Al activar la leyenda se despliegan "Posición" ("Arriba", "Abajo", "Izquierda" o "Derecha"), "Alinear" y la casilla "Flotante — sobre el gráfico", que la superpone al área del gráfico. |
| 2.3 | Sección "Tipografía" | Configuración textual | Ajusta textos y fuentes | Permite modificar tamaños, colores y pesos tipográficos de títulos, subtítulos y leyendas. Para utilizarlo, el usuario debe seleccionar familia tipográfica y ajustar tamaños y estilos visuales. |
| 2.4 | Sección "Grosor y tamaño" | Configuración visual | Ajusta el trazo y los puntos | Permite ajustar los deslizadores "Grosor línea", "Tamaño puntos" y "Borde puntos". Para utilizarlo, el usuario debe mover cada deslizador hasta conseguir la visualización deseada. |
| 2.5 | Sección "Ejes y referencias" | Configuración de ejes | Configura escalas y referencias | Permite ajustar la visualización de los ejes X e Y, unidades y referencias visuales. Para utilizarlo, el usuario puede configurar títulos, formatos y añadir umbrales o referencias visuales sobre el gráfico. |
| 3 | Pestaña "Texto" | Configuración textual | Configura textos adicionales | Permite acceder a configuraciones relacionadas con textos auxiliares y contenido adicional mostrado en el gráfico. |
| 3.1 | Sección "Textos adicionales" | Configuración textual | Añade información contextual | Permite añadir subtítulos y notas adicionales dentro del gráfico. Para utilizarlo, el usuario debe rellenar los campos disponibles con información contextual o aclaraciones visuales. |
| — | Sección "Filtros de contexto" | Configuración de datos | Elige de qué contexto salen los datos | Aparece en la pestaña "Datos", debajo de "Rango de tiempo", al configurar el gráfico desde un dashboard. Permite que el gráfico siga los filtros generales del dashboard o que fije un contexto propio de "Planta", "Zona", "Máquina", "Grupo" y "Turno". Se cambia con los botones "Filtro global" y "Contexto propio", y la cabecera de la sección indica en cuál de los dos modos está. |
| — | Sección "Paleta de colores" | Configuración visual | Elige la gama de colores de las series | Es la primera sección de la pestaña "Apariencia" y sólo se ofrece al configurar el gráfico desde un dashboard. Para utilizarla, el usuario debe pulsar la paleta con la que quiere que se pinten las series. |
| — | Sección "Nombres de series" | Campos de texto | Renombra las series de la leyenda | Aparece en la pestaña "Apariencia" en cuanto hay variables seleccionadas y muestra un campo por cada una. Para utilizarla, el usuario debe escribir el nombre que quiere ver en la leyenda en lugar del identificador de la variable. |
| — | Sección "Tipo de curva" | Configuración visual | Cambia el trazado de la línea | Permite elegir cómo se dibuja la línea entre puntos. Para utilizarlo, el usuario debe desplegar el selector "Curva" y elegir entre "Suave", "Recta" o "Escalon". |
💡 Guía de Uso
El widget Área está diseñado para representar datos de forma continua rellenando visualmente el espacio bajo la línea del gráfico.
Se utiliza principalmente para:
- Visualizar evolución temporal de datos
- Representar acumulaciones visuales
- Supervisar cambios continuos
- Mostrar tendencias de comportamiento
- Comparar variaciones entre periodos
- Analizar información histórica
- Monitorizar datos en tiempo real
✅ Cómo configurar correctamente el widget Área
- Arrastra el widget al canvas.
- Selecciona el gráfico dentro del dashboard.
- Desde el panel de propiedades:
- Configura variables y agregaciones.
- Ajusta rango temporal.
- Personaliza colores y estilos.
- Configura leyendas y ejes.
- Ajusta grosor y tamaños visuales.
- Añade referencias o umbrales si es necesario.
- Guarda los cambios realizados.