¶ Módulo de Gráficos en el interfaz visual de Dragsa
Documentación actualizada 07/10/2024
El módulo de gráficos permite crear, personalizar y visualizar variables (datos) en gráficas interactivas.
Se pueden crear uno o varios gráficos que representan la información de las variables mediante diferentes ejes y series. Tanto las series como los ejes son personalizables, ofreciendo opciones para ajustar colores y formatos, según los intereses y preferencias del usuario.
Además, los gráficos se pueden visualizar directamente en el módulo a través de un visor interactivo, lo que permite examinar cada variable y su valor en una fecha y hora en concreto.
También es posible editar cada gráfico de manera individual y organizarlos en categorías y subcategorías, facilitando su acceso en cualquier momento.
El módulo de gráficos incluye un calendario que permite filtrar los datos por una fecha o un rango de fechas, ajustando la consulta y actualizando el gráfico en tiempo real.
¶ ¿Cómo acceder al módulo de gráficos?
El módulo de gráficos está situado en el menú de navegación lateral, debajo del módulo de paneles con la siguiente apariencia: Gráficos
Al acceder al módulo de gráficos se puede observar una pantalla dividida en dos secciones:
- Árbol de categorías: En esta sección se puede encontrar todos los gráficos creados organizados en categorías y subcategorías.
- Visor de gráficas: En esta sección se puede ver en primer lugar el logo de la plataforma y será la zona donde se cargará el visor interactivo cuando el usuario seleccione una gráfica del árbol de categorías.
¶ ¿Cómo crear un gráfico?
En la sección del árbol de categorías del módulo de gráficos se puede encontrar dos botones: «Añadir categoría» y «Añadir gráfico».
El botón de «Añadir gráfico» permanecerá deshabilitado hasta encontrar una categoría creada en el árbol de categorías. Si no hay ninguna categoría creada, el usuario debe crear una categoría.
Para añadir un gráfico el usuario debe seleccionar una categoría en la que tenga permiso de escritura y pulsar en el botón Añadir gráfico.
Al pulsar en el botón Añadir gráfico se le muestra al usuario una ventana emergente donde puede crear la gráfica y personalizar sus ejes y series.
¶ ¿Cómo personalizar una gráfica?
En la ventana emergente, el usuario debe completar una serie de campos obligatorios y opcionales.
Una vez que se hayan rellenado todos los campos, el módulo de gráficos generará una gráfica basada en los datos y los parámetros de personalización que el usuario haya especificado durante el proceso de creación y ajuste del gráfico.
A continuación, se enumeran todos los campos disponibles en el creador de gráficos de Dragsa.
¶ Categoría
El sistema ofrece un desplegable con todas las categorías y subcategorías para poder elegir una donde almacenar la gráfica que se está creando.
¶ Nombre
Este campo establece el nombre que va a tener el gráfico.
¶ Eje X
El Eje X es un desplegable donde se puede seleccionar un rango de fecha/hora (valor por defecto) o construir un eje personalizado.
¶ ¿Qué son las series en un gráfico?
Las series son el conjunto de datos que se va a mostrar en el gráfico. Estos datos son los valores que se van a extraer de las variables que se quieren mostrar en la gráfica.
Las series se pueden añadir a través del botón (), modificar (), eliminar () y ordenar ( o ).
¶ Variable
Este campo permite al usuario seleccionar una variable de la lista de variables y añadirlo como una serie de datos.
La variable seleccionada representa un dato de un activo. Dependiendo del rango de fechas o del eje definido anteriormente, el gráfico será capaz de recuperar todos los valores correspondientes a esta variable y generar una gráfica interactiva.
¶ Nombre
Este campo establece el nombre que va a tener la serie en el gráfico
¶ Color
Cada serie en el gráfico se mostrará en un color distinto. En este campo, el usuario puede personalizar el color según sus preferencias.
El sistema ofrece un selector de colores y una paleta accesible mediante el botón con el siguiente ícono: .
Además, el sistema puede interpretar valores hexadecimales introducidos manualmente.
¶ Tipo
El campo tipo permite al usuario decidir como se va a construir las series de datos en el gráfico representando Líneas, Áreas o Barras.
¶ Valor discreto
Este campo define el formato de los valores de las series de datos en el gráfico. Al seleccionar esta opción, los valores se mostrarán como números enteros sin decimales.
De lo contrario, el gráfico presentará los valores con decimales.
¶ Mostrar en resumen
Esta opción de personalización permite al usuario decidir si, debajo del visor interactivo del gráfico, se mostrará un resumen con una leyenda.
La leyenda o resumen, ubicada debajo del gráfico, muestra la serie de datos seleccionada, incluyendo el nombre de la variable que representa y sus valores mínimos, máximos y el promedio.
El resumen es interactivo: cada serie mostrada puede ser seleccionada para ocultar o volver a mostrar esa serie en el gráfico.
¶ Eje
Cada serie creado tiene que tener un campo Eje vinculado, para ello el módulo de gráficos ofrece la posibilidad de asignar el eje automáticamente o añadir un eje personalizado.
Un eje en una gráfica es una línea de referencia utilizada para representar las series de datos y medir sus valores de manera clara y precisa.
El eje más común es el eje del tiempo, que muestra cómo varía el valor de una variable a lo largo del tiempo.
Este eje se asigna automáticamente cuando se crea una serie. Sin embargo, el usuario tiene la opción de crear y asignar un eje personalizado si lo necesita.
Los ejes se pueden añadir (), modificar () y eliminar ().
¶ Unidad
El usuario puede seleccionar la unidad en la que se va a representar la línea de referencia de datos entre las disponibles que se muestran para las series seleccionadas
¶ Mínimo
El usuario puede establecer el valor mínimo que se utilizará en el Eje para representar la línea de tiempo.
¶ Máximo
El usuario puede establecer el valor máximo que se utilizará en el Eje para representar la línea de tiempo.
¶ Color
El usuario puede personalizar el color de la línea del Eje escribiendo un valor hexadecimal en el campo de color.
También puede seleccionar un color en el selector de colores pulsando en el botón con el icono para abrir una ventana emergente con una paleta de colores interactiva.
¶ Posición
El usuario puede decidir donde posicionar el eje respecto a la gráfica, los valores disponibles son: izquierda y derecha.
¶ ¿Cómo editar un gráfico?
El usuario puede modificar y actualizar los parámetros de un gráfico ya existente directamente desde el árbol de categorías.
Para editar un gráfico, el usuario debe hacer clic en el icono de los tres puntos verticales, ubicado junto a la gráfica en el árbol de categorías, para desplegar un menú de opciones.
Dentro de este menú, el usuario podrá seleccionar la opción Editar gráfico. Al elegir esta opción, se abrirá nuevamente la ventana emergente utilizada durante la creación del gráfico, permitiendo cambiar los valores y parámetros previamente configurados.
¶ ¿Cómo duplicar un gráfico?
El usuario puede duplicar un gráfico directamente desde el árbol de categorías. Para hacerlo, debe seleccionar el gráfico que desea duplicar y hacer clic en el icono de los tres puntos verticales.
Al hacer clic, se desplegará un menú con varias opciones, entre las cuales se encuentra duplicar gráfico.
Al seleccionar esta opción, aparecerá una ventana emergente de confirmación que permitirá al usuario decidir si realmente desea duplicar el gráfico seleccionado.
¶ ¿Cómo eliminar un gráfico?
El usuario puede eliminar un gráfico directamente desde el árbol de categorías. Para hacerlo, debe seleccionar el gráfico que desea eliminar y hacer clic en el icono de los tres puntos verticales.
Al hacer clic, se desplegará un menú con varias opciones, entre las cuales se encuentra Eliminar gráfico.
Al seleccionar esta opción, aparecerá una ventana emergente de confirmación que permitirá al usuario decidir si realmente desea eliminar el gráfico seleccionado. Al pulsar en Eliminar, el gráfico se borrará de forma definitiva.
¶ ¿Cómo ver una gráfica?
El usuario puede acceder a una gráfica desde el módulo de Gráficos al seleccionar una gráfica almacenada en una categoría o subcategoría.
Las gráficas se organizan en carpetas denominadas categorías y subcategorías. Al hacer clic en una de estas carpetas, se despliegan todas las gráficas disponibles, junto con su nombre.
Al seleccionar una gráfica específica, esta se mostrará en pantalla, renderizada con los valores filtrados del día de hoy en un rango de una hora.
En la parte inferior de la gráfica, se puede visualizar una leyenda o resumen que muestra las variables seleccionadas, así como sus valores mínimos, máximos y medianos.
Este resumen solo aparecerá si el usuario seleccionó la opción Mostrar resumen al momento de crear la gráfica.
¶ ¿Cómo interactuar con una gráfica en Dragsa?
El módulo de gráficos ofrece una variedad de herramientas que permiten al usuario desplazarse por la gráfica, filtrar datos y evaluar cada valor de los ejes de forma individual.
El sistema cuenta con las siguientes opciones de interacción.
¶ Desplazarse por un gráfico
El usuario dispone de varias herramientas sobre la gráfica renderizada. Interactuar con estas herramientas permite ajustar la consulta, filtrar datos y desplazarse por los valores y el tiempo de manera sencilla.
¶ Fechas
El primer elemento visible es un campo de fecha que permite al usuario ajustar la consulta de datos dentro de un rango temporal.
Al hacer clic en el icono de calendario, se despliega un calendario para establecer el rango de fechas.
El usuario también puede optar por hacer clic en el icono de reloj para ajustar la consulta a un periodo de tiempo predefinido.
Además, es posible modificar la fecha manualmente directamente en el campo que muestra la fecha actual de la consulta.
¶ Acciones manuales
Estas opciones permiten al usuario desplazarse por la gráfica mediante una serie de botones que actualizan el tiempo de consulta en tiempo real.
Cada botón representa una acción específica, identificada con un icono:
-
Volver a la consulta original: Restablece el gráfico al día actual, mostrando un rango de tiempo de una hora.
-
Añadir zoom: Disminuye la resolución y el tiempo de consulta para visualizar los cambios en la gráfica con mayor detalle.
-
Reducir zoom: Aumenta la resolución, ofreciendo una visión más general y menos precisa de los cambios a lo largo del tiempo.
-
Botones de movimiento: Permiten al usuario desplazarse hacia atrás o hacia adelante en el tiempo, ajustando la consulta de datos y actualizando la gráfica en tiempo real.
-
Exportar gráfico: Permite descargar la gráfica en formato PDF, CSV o como imagen (JPG, PNG, SVG).
-
Opciones: Al hacer clic en este botón, se abre una ventana emergente que permite al usuario cambiar la resolución de la consulta y modificar la función de agregado para personalizar los resultados que se muestran en pantalla.
¶ ¿Cómo exportar una gráfica?
El usuario tiene acceso a una serie de herramientas que le permiten interactuar con la gráfica renderizada en pantalla.
Además, el módulo de gráficos ofrece la posibilidad de descargar el gráfico en varios formatos, incluyendo: PDF, CSV, Excel, JPG, PNG y SVG.
Para exportar una gráfica, el usuario debe primero seleccionarla desde el árbol de categorías para renderizarla en pantalla.
Una vez que la gráfica esté visible, el usuario encontrará un conjunto de herramientas en la parte superior de la gráfica.
La opción de descarga se encuentra entre la última acción de movimiento y el botón de opciones.
Al hacer clic en el botón Descargar/Exportar Gráfico, se abrirá una ventana donde el usuario podrá seleccionar el formato del archivo que desea exportar y personalizar algunos parámetros opcionales.
¶ Buscar una gráfica
El usuario tiene acceso a un campo de búsqueda que permite filtrar los gráficos dentro del árbol de categorías a medida que escribe. Esto facilita la localización rápida de gráficos específicos que coincidan con los términos de búsqueda ingresados.
¶ Ordenar gráficos
El usuario puede reorganizar los gráficos en el árbol de categorías según sus preferencias en el módulo de gráficos. Para hacerlo, debe acceder al menú de edición del gráfico haciendo clic en el icono de los tres puntos verticales.
En el menú desplegable, podrá seleccionar las opciones Mover arriba o Mover abajo para ajustar la posición del gráfico dentro de la lista. También puede arrastrar y soltar el gráfico directamente en el árbol de categorías para colocarlo en la posición deseada.
Si el gráfico ya está en la primera o última posición, la opción de movimiento correspondiente se deshabilitará.