🖥️ Editor de dashboards
Objetivo Principal: Permite a los perfiles de administración crear, configurar y personalizar dashboards interactivos mediante widgets, filtros y herramientas visuales para la supervisión y el análisis de datos industriales. Los perfiles sin permiso de edición no pueden abrir el editor: la aplicación los devuelve a la vista de consulta del dashboard y, además, la plataforma comprueba en el servidor cada cambio —el dashboard, sus páginas y sus widgets—, de modo que tampoco podrían guardarlo llegando por otra vía.
📸 Mapeo de interfaz
La imagen corresponde a una versión anterior. En la 0.4.46 el filtro «Período» ya no ofrece el valor «7d» que aparece en la captura: los rangos indicados por número de días se retiraron del desplegable, aunque los dashboards guardados con uno de ellos siguen funcionando.
🧩 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 | Mostrar/ocultar páginas | Toggle | Muestra u oculta el panel «Páginas» | Permite al usuario abrir o cerrar el panel lateral izquierdo con las páginas del dashboard, ya que un mismo dashboard puede tener varias. Para utilizarlo, el usuario debe pulsar la pestaña situada en el borde izquierdo, justo debajo de la de la barra de herramientas. El panel aparece cerrado por defecto y la aplicación recuerda la última posición elegida. Desde él se cambia de página. Solo los perfiles de administración pueden crear («Nueva página»), renombrar, duplicar, reordenar («Mover arriba» y «Mover abajo») y eliminar páginas; cuando solo queda una página, no se puede eliminar. |
| 2 | Mostrar/ocultar barra de herramientas | Toggle | Muestra u oculta la barra superior del dashboard | Permite al usuario ocultar la barra superior del propio dashboard (nombre, filtros, estado de guardado y acciones) para ganar espacio de trabajo. Para utilizarlo, el usuario debe pulsar la pestaña situada en la esquina superior izquierda del área de edición. No afecta al menú lateral de la aplicación. |
| 3 | Navegación y nombre del dashboard | Navegación contextual | Volver al listado de dashboards | Permite al usuario identificar el dashboard abierto y volver al listado pulsando la flecha situada a su izquierda. Además, al hacer clic sobre el nombre este se vuelve editable: se escribe el nuevo nombre y se confirma con Intro (Esc cancela); el cambio se conserva al guardar. |
| 4 | Período | Filtro desplegable | Cambia el rango temporal | Permite al usuario elegir el periodo de los datos mostrados en el dashboard. El desplegable ofrece «Últimos 30 minutos», «Última hora», «Últimas 8 horas», «Últimas 24 horas», «Últimas 48 horas», «Hoy», «Ayer», «Esta semana», «Semana anterior», «Este mes», «Mes anterior», «Este año», «Año pasado» y «Rango personalizado», que permite indicar fechas de inicio y fin. |
| 5 | Filtro de planta | Filtro desplegable | Filtra por planta | Permite al usuario visualizar información únicamente de una planta o instalación concreta. Para utilizarlo, el usuario debe abrir el desplegable y seleccionar la planta deseada. |
| 6 | Filtro de zona | Filtro desplegable | Filtra por zona | Permite al usuario filtrar los datos según una zona o área específica de la instalación. Para utilizarlo, el usuario debe seleccionar la zona correspondiente desde el desplegable. |
| 7 | Máq | Filtro desplegable | Filtra por máquina | Permite al usuario limitar los datos mostrados a una máquina concreta. Para utilizarlo, el usuario debe abrir el desplegable y elegir la máquina deseada; la opción «Todas» retira el filtro. Este filtro solo aparece si se ha activado previamente en la configuración de filtros visibles. |
| 8 | Turno | Filtro desplegable | Filtra por turno | Permite al usuario ver la información correspondiente a un turno concreto. El desplegable depende del filtro «Grupo»: permanece desactivado mientras no se elige un grupo de turnos y solo ofrece los turnos de ese grupo; al cambiar de grupo, el turno seleccionado se borra. La opción «Todos los turnos del grupo» retira el filtro. |
| 9 | Restablecer filtros | CTA Secundario | Borra los filtros aplicados | Permite al usuario devolver todos los filtros de la barra superior a sus valores por defecto. Solo aparece cuando hay algún filtro activo. No es un botón de actualización manual de datos: no existe ninguno, porque los widgets piden los datos nuevos por su cuenta. |
| 10 | Configuración de filtros visibles | CTA Secundario | Abre el panel «Filtros visibles» | Permite al usuario decidir qué filtros aparecen en la barra superior del dashboard. Para utilizarlo, el usuario debe pulsar el icono del engranaje y activar o desactivar «Planta», «Zona», «Máquina», «Grupo de turnos» y «Turno»; «Planta», «Zona», «Máquina» y «Turno» admiten además la opción de multiselección, que permite elegir varios valores a la vez. «Rango de tiempo» está siempre visible y no se puede desactivar. |
| 11 | Vista previa del dashboard | CTA Secundario | Abrir vista previa | Permite al usuario comprobar cómo se verá el dashboard sin las herramientas de edición, tal como lo consultará el resto de perfiles. Para utilizarlo, el usuario debe pulsar el icono del ojo; se regresa al editor con el botón «Salir de vista previa». |
| 12 | Guardar | CTA Principal | Guarda los cambios | Permite al usuario guardar el nombre, los filtros de la barra superior, la configuración de las páginas y los widgets del dashboard. Es el botón azul con icono de disquete del extremo derecho de la barra superior y permanece desactivado mientras no haya cambios pendientes. A su izquierda se muestra el estado: «Sin guardar», «Guardando» o «Guardado». |
| 13 | Mostrar/ocultar widgets | Toggle | Muestra u oculta el panel «Widgets disponibles» | Permite al usuario abrir o cerrar el panel lateral derecho, que contiene el catálogo «Widgets disponibles». Para utilizarlo, el usuario debe pulsar la pestaña del borde derecho. El catálogo se agrupa en las categorías «Gráficos», «Textos», «Indicadores», «Manufacturing KPIs», «Maintenance KPIs», «Datos», «Contenido», «Formas SCADA» y «Avanzados» —según la configuración del entorno pueden mostrarse menos— y cada widget se añade arrastrándolo al lienzo o haciendo clic sobre él. La configuración de cada widget no está en este panel: se abre en una ventana propia al editar el widget. |
| 14 | Canvas del dashboard | Área de trabajo | Edita dashboard | Permite al usuario diseñar y organizar visualmente el dashboard añadiendo Widgets y configurando variables. Para utilizarlo, el usuario debe arrastrar elementos al canvas y posicionarlos según sus necesidades. |
| 15 | Selector de resolución | Selector | Cambia el tamaño del lienzo | Permite al usuario fijar el tamaño de trabajo del lienzo entre tres opciones: «HD (1280×720)», «Full HD (1920×1080)» y «2K/QHD (2560×1440)». Para utilizarlo, el usuario debe abrir el desplegable y elegir una. La resolución se guarda en cada página del dashboard. |
| 16 | Zoom del canvas | Herramienta de visualización | Ajusta zoom | Permite al usuario ampliar o reducir la escala visual del dashboard para facilitar la edición de elementos. Para utilizarlo, el usuario debe utilizar los controles de zoom disponibles. |
| 17 | Resetear zoom a 100% | Herramienta de visualización | Vuelve al zoom original | Permite al usuario devolver el zoom del lienzo al 100 %. Para utilizarlo, el usuario debe pulsar el icono situado junto al porcentaje de zoom; aparece desactivado cuando el zoom ya está al 100 %. |
| 18 | Encajar en pantalla | Herramienta de visualización | Ajusta el zoom al espacio disponible | Permite al usuario ajustar automáticamente el nivel de zoom para que el lienzo completo quepa en el área visible. Para utilizarlo, el usuario debe pulsar el icono situado a la derecha de los controles de zoom. No abre el dashboard a pantalla completa. |
| 19 | Modo de interacción | Selector de modo | Alterna entre seleccionar y mover | Permite al usuario elegir cómo responde el ratón sobre el lienzo: «Modo seleccionar» para elegir y manipular widgets, y «Modo mover (pan)» para desplazar la vista arrastrando el lienzo. Para utilizarlo, el usuario debe pulsar el icono del modo deseado. |
| 20 | Fondo | Herramienta visual | Cambia el color de fondo | Permite al usuario elegir el color de fondo del lienzo de la página actual o dejarlo transparente. Para utilizarlo, el usuario debe abrir el desplegable «Fondo», marcar «Fondo transparente» o escoger un color, y pulsar «Aplicar». No admite imágenes de fondo. |
| 21 | Compactación | Toolbar | Cambia cómo se acomodan los widgets | Permite al usuario decidir cómo se recolocan automáticamente los widgets al moverlos o redimensionarlos: «Vertical» (suben para ocupar los huecos), «Horizontal» (se desplazan hacia la izquierda) o «Libre» (se quedan exactamente donde se sueltan). Para utilizarlo, el usuario debe pulsar el icono de la opción deseada. |
| 22 | Herramienta de reorganización | Toolbar | Reorganizar widgets | Permite al usuario reorganizar automáticamente los widgets del dashboard para optimizar la distribución del espacio y recuperar los que hayan quedado fuera del lienzo. Para utilizarlo, el usuario debe pulsar «Reorganizar»; el botón está desactivado si la página no tiene widgets. |
| 23 | Herramienta de eliminación | Toolbar | Eliminar elementos | Permite al usuario eliminar el widget seleccionado del dashboard. Para utilizarlo, el usuario debe seleccionar el widget y pulsar «Eliminar»; el botón permanece desactivado mientras no haya ninguno seleccionado. |
| — | Grupo | Filtro desplegable | Filtra por grupo de turnos | Permite al usuario elegir el grupo de turnos con el que se acotan los datos. Es el filtro del que depende «Turno»: mientras no se selecciona un grupo, el desplegable de turno permanece desactivado, y al cambiar de grupo se borra el turno elegido. La opción «Sin grupo» retira el filtro. Aparece de fábrica, igual que «Turno»; se oculta desactivándolo en «Filtros visibles». Los que sí llegan ocultos de fábrica, y hay que activar a mano, son «Planta», «Zona» y «Máquina». |
💡 Guía de uso
El editor de dashboards permite construir paneles visuales personalizados mediante widgets y filtros dinámicos, y está reservado a los perfiles de administración. Desde la barra superior puedes configurar el contexto de visualización: período, planta, zona, máquina, grupo de turnos y turno. Los filtros que aparecen en esa barra se eligen en el panel de configuración de filtros visibles; el período está siempre disponible.
Un dashboard puede tener varias páginas. El panel «Páginas», que se abre desde la pestaña del borde izquierdo, permite cambiar de una a otra, crear páginas nuevas, renombrarlas, duplicarlas, moverlas de orden y eliminarlas. Cada página guarda su propia resolución de lienzo y su color de fondo.
El área central funciona como un lienzo interactivo donde se añaden y organizan los widgets. Los widgets se toman del panel «Widgets disponibles» del borde derecho, agrupado por categorías, y se colocan arrastrándolos al lienzo o haciendo clic sobre ellos. Los elementos pueden moverse y redimensionarse, y la opción de compactación decide si se recolocan automáticamente en vertical, en horizontal o si se quedan libres donde se sueltan; solo puede haber un widget seleccionado a la vez.
Las herramientas inferiores permiten controlar el zoom, la resolución, el fondo y la organización visual de la página. La barra superior muestra en todo momento el estado de guardado («Sin guardar», «Guardando» o «Guardado») para saber si quedan cambios pendientes antes de salir del dashboard. No existe un paso de publicación: los cambios se aplican al guardar.
Mientras diseñas, los widgets muestran datos reales y se van actualizando solos con la misma cadencia que tendrán una vez publicado el panel: depende del período elegido y no se puede configurar. Las cifras exactas y lo que ocurre cuando la pestaña queda en segundo plano están en la vista del dashboard.