Como centro de tu operación IoT, el dashboard es el lugar desde el cual realizas el seguimiento de tu objetivo de monitoreo. El dashboard contiene widgets que te permiten graficar datos según tus necesidades, y cada widget tiene un conjunto diferente de opciones de configuración. Según el widget, es posible que puedas agregar una o varias variables. Por ejemplo, el widget Métrica solo admite una variable, mientras que el widget Gráfico de Líneas admite múltiples variables.
En este artículo aprenderás sobre el proceso general de creación de un widget, sus opciones de interacción disponibles y los diferentes tipos de widgets.
1. Crear un nuevo widget
Para crear un widget, haz clic en el ícono "+" en la esquina superior derecha de la interfaz del dashboard.
Selecciona el tipo de widget entre las opciones disponibles o crea el tuyo propio con el HTML Canvas.
Selecciona el comportamiento del widget: Estático o dinámico. Para entender mejor estas opciones, consulta la segunda sección de esta guía, que explica los widgets estáticos y dinámicos.
Asigna una variable al widget haciendo clic en "+ AGREGAR VARIABLE(S)". Para los widgets dinámicos puedes editar la etiqueta de la variable manualmente.
Configura la apariencia del widget y guarda.
Nota: Algunos widgets (Gauge, Métrica, Tanque, Termómetro y Gráfico de Líneas) te ofrecen la opción de mostrar datos de demostración. Esto puede ser útil si necesitas presentar una solución a un cliente potencial antes de que haya datos reales disponibles. Para habilitarlo:
|
1.1 Método de Agregación
Esta opción te permite aplicar un método de agregación (raw, promedio, mínimo, máximo, suma, conteo, primero, último) sobre el rango de tiempo definido en la barra de navegación del dashboard.
Imagina que estás midiendo el consumo de agua en un campo agrícola y quieres crear un dashboard para que tus clientes conozcan el agua consumida en un rango de tiempo específico. Entonces crearías un widget Métrica con "suma" como método de agregación.
El widget sumará automáticamente todos los valores dentro del rango de tiempo especificado en la barra de navegación del dashboard.
Los siguientes widgets tienen la opción de aplicar un método de agregación.
Métrica
Termómetro
Gauge
Tanque
Batería
Ring Gauge
Gráfico de Líneas
Doble Eje
Tabla de Valores
Tabla de Dispositivos
Tabla de Variables
Tabla de Mapa de Calor
Gráfico de Torta
Algunos de estos widgets también te ofrecen la opción de anular el rango de tiempo del dashboard (es decir, "definido por el dashboard"), lo que te permite forzar que la agregación siempre se calcule para un rango de tiempo predeterminado.
Nota: Los widgets con métodos de agregación distintos a "último valor" no mostrarán nuevos datos en tiempo real, incluso si esa opción está habilitada en el dashboard. Para que esos widgets muestren nuevos datos, debes actualizar el dashboard.
1.2 Apariencia del Widget
Cada widget tiene un conjunto diferente de opciones para cambios de apariencia; las más comunes son:
Nombre: La etiqueta de texto que aparece en la esquina superior izquierda de tu widget.
Fuente: Opción para cambiar la fuente usada dentro del widget.
Decimales: La cantidad de decimales para valores no enteros.
Formato de fecha: Elige entre diferentes formatos de fecha. Si se selecciona el formato de "fecha personalizada", se aplican las mismas reglas que para la configuración del dashboard explicada aquí.
Color: Cada widget tiene un color predeterminado (opción "definido por el widget"), establecido por Ubidots. Puedes anular este color predeterminado seleccionando la opción "predeterminado de la variable", que usará el color de la variable, o seleccionando la opción "lógica de color", que te permite definir cómo cambia el color según el valor de la variable.
Estilo personalizado: Editor basado en JSON donde puedes ingresar claves definidas por elemento para establecer parámetros de aspecto y comportamiento de los elementos disponibles del widget. Esto comprende el "contenedor" y no el contenido en sí; para las opciones de estilo del contenido, lee el siguiente punto, Configuración de ECharts.
1.2.1 Color de fondo para widgets de tipo Métrica
La familia de widgets Métrica está compuesta por estas opciones:
Termómetro
Gauge
Tanque
Batería
Tienen una opción de configuración de apariencia adicional que te permite establecer un color de fondo fijo o una lógica que cambia el color de fondo según una lógica definida basada en datos.
Esta opción se encuentra en la tercera posición desde abajo. Sigue estos pasos para usar la opción de color de fondo:
Haz clic en el campo gris junto al encabezado correspondiente:
En el menú que se abre, elige si el color será fijo o cambiará según una lógica.
Para un color fijo, elige la opción "definido por el widget" y procede a elegir el color de fondo y su opacidad.
Para una lógica de color, elige la opción "lógica de color" y procede a completar los campos según tus necesidades, como se muestra en el siguiente ejemplo:
Además, usando los íconos de papelera puedes eliminar rangos de tu lógica, mientras que el botón "+ agregar rango" te permite agregar nuevos.
*Los widgets Indicador y Ring Gauge no admiten la opción de color de fondo.
2. Opciones de interacción con los widgets
Una vez creados, los widgets tienen las siguientes opciones de interacción para mejorar la experiencia del usuario.
Descargar un archivo CSV con los datos de la(s) variable(s) relacionadas con el widget. Debes seleccionar el rango de fechas y las columnas que deseas exportar.
Explorar datos de las variables o dispositivos relacionados con el widget. Una vez seleccionado, se abrirá una nueva ventana con la vista del dispositivo o variable.
Ampliar el widget para verlo con más detalle.
Duplicar el widget para ahorrar tiempo en lugar de crear uno nuevo con la misma configuración desde cero. La copia puede colocarse en el mismo dashboard del widget original o en uno diferente de tu elección.
Compartir el widget a través de una URL pública o un fragmento de código embebible para el código fuente HTML de un sitio web. Todos los widgets pueden compartirse excepto los widgets Switch, Slider y Manual Input. Para más información, visita este artículo.
Editar las configuraciones del widget. Esto también puede hacerse a través del ícono de lápiz en el encabezado del widget.
Exportar PNG como imagen del widget en el rango de fechas seleccionado.
Eliminar el widget de forma permanente.
Mientras editas un widget, puedes usar el botón "ir a la variable" para acceder a la página de la variable seleccionada.
3. Tipos de widgets
El panel de widgets está dividido en siete tipos de widgets que dan una idea de cómo luce y funciona cada uno.
Según su tipo, los widgets se comportarán de forma diferente ante cosas como los métodos de agregación o los dashboards dinámicos. Aunque estos tipos sirven principalmente como referencias, podemos usarlos para ver cómo responden los widgets cuando se seleccionan múltiples dispositivos en un dashboard dinámico. Las excepciones se señalan de forma correspondiente.
Tipo |
Widgets | Último(s) valor(es) en dashboards con múltiples dispositivos | Método de agregación en dashboards con múltiples dispositivos |
*Métrica |
| Se muestra el último valor del dispositivo seleccionado que aparece más arriba en la lista desplegable. | Se realiza un cálculo sobre los datos de cada dispositivo y luego esos resultados se usan para hacer el cálculo general que se muestra finalmente.
Por ejemplo: El método de agregación seleccionado es "promedio"; y se seleccionaron 3 dispositivos. Se calcula un promedio a partir del promedio de cada dispositivo. |
Tipo |
Widgets | Último(s) valor(es) en dashboards con múltiples dispositivos | Método de agregación en dashboards con múltiples dispositivos |
**Gráfico |
| Se agrega una línea por variable para cada dispositivo seleccionado (con un límite de 15 líneas). | Se agrega una línea por variable para cada dispositivo seleccionado. |
Tipo |
Widgets | Último(s) valor(es) en dashboards con múltiples dispositivos | Método de agregación en dashboards con múltiples dispositivos |
***Tabla | Tabla de Variables y de Dispositivos: Se agrega una fila por dispositivo. Tabla de Valores: Se agrega una fila por nuevo punto, por dispositivo. | Tabla de Variables y de Dispositivos: Se agrega una fila por dispositivo. Tabla de Valores: Se agrega una fila por cada dispositivo en los intervalos de tiempo seleccionados. |
Tipo | Widgets | Último(s) valor(es) en dashboards con múltiples dispositivos | Método de agregación en dashboards con múltiples dispositivos |
Mapa | Se agrega un ícono en el mapa por cada dispositivo seleccionado. |
No aplica. |
Tipo |
Widgets | Último(s) valor(es) en dashboards con múltiples dispositivos | Método de agregación en dashboards con múltiples dispositivos |
****Control | Se agrega un control por cada dispositivo seleccionado. |
No aplica. |
Tipo |
Widgets | Último(s) valor(es) en dashboards con múltiples dispositivos | Método de agregación en dashboards con múltiples dispositivos |
Visualización |
No aplica. |
No aplica. | |
Avanzado | No compatible. | No compatible. |
*: El Indicador mostrará un widget por cada dispositivo seleccionado. El widget Ring Gauge aún no tiene un comportamiento compatible con múltiples dispositivos.
**: Los comportamientos descritos aplican para el Gráfico de Líneas y el Doble Eje. El Gráfico de Barras, Gráfico de Rosa, Histograma, Dispersión y Gráfico de Frecuencia no admiten comportamientos con múltiples dispositivos.
***: Los widgets Incidentes y Tabla de Mapa de Calor no se ven afectados por múltiples dispositivos.
****: La Entrada Manual no se ve afectada por múltiples dispositivos.