📉 Barras Horizontales · Propiedades del Widget
Objetivo Principal: Permite al usuario configurar el widget Barras Horizontales, utilizado para comparar valores entre categorías mediante barras dispuestas en horizontal dentro de dashboards Analytics.
📸 Mapeo de Interfaz
La captura no muestra esto
La imagen corresponde a una versión anterior y al panel de un gráfico de líneas. En la 0.4.46 la sección "Grosor y tamaño" de este gráfico sólo ofrece los deslizadores "Radio esquinas" y "Ancho barras"; la pestaña "Apariencia" incluye además "Paleta de colores" y "Nombres de series", y la 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 la forma de las barras | Permite ajustar el redondeo y el ancho de las barras mediante los deslizadores "Radio esquinas" y "Ancho barras". 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. |
💡 Guía de Uso · Barras Horizontales
El widget Barras Horizontales está diseñado para comparar valores entre distintas categorías mediante barras distribuidas horizontalmente.
Se utiliza principalmente para:
- Comparar categorías
- Visualizar rankings
- Representar distribuciones
- Mostrar comparativas rápidas
- Analizar diferencias entre valores
- Supervisar agrupaciones de datos
- Facilitar interpretación visual
✅ Cómo configurar correctamente el widget Barras Horizontales
- Arrastra el widget al canvas.
- Selecciona el gráfico dentro del dashboard.
- Desde el panel de propiedades:
- Configura categorías y variables.
- Ajusta colores y estilos.
- Configura leyendas y etiquetas.
- Personaliza ejes y tamaños.
- Guarda los cambios realizados.