Ir al contenido principal

Crear un Widget Indicador

Aprende a crear widgets Indicador en tus dashboards.

Escrito por Sergio M

El widget Indicador ofrece una forma sencilla pero poderosa de rastrear el estado en tiempo real de tus dispositivos y variables de un vistazo. Diseñado para mostrar información rápida, cada Indicador usa una lógica de color encendido/apagado que refleja las condiciones que defines, facilitando la detección de cambios o problemas sin tener que revisar los datos. Ya sea que estés visualizando un solo punto de interés o agrupando varias variables en un mismo widget, los Indicadores ofrecen una presentación limpia y personalizable que se adapta al diseño de tu dashboard y a tus necesidades de monitoreo.

Requisitos

1. Crear un Widget Indicador

Paso 1. Estando en un dashboard, haz clic en el botón "+" ubicado en la esquina superior derecha de la pantalla.

Paso 2. Una vez en el panel de widgets, busca y selecciona la opción Indicador.

Paso 3. Haz clic en el botón "+ agregar variables" y selecciona todas las variables que deseas monitorear. Se creará un widget que contendrá un "indicador" por cada variable seleccionada aquí.

Paso 4. Nombra la(s) variable(s) con el texto que prefieras. También puedes usar las claves {{variable.name}} y/o {{device.name}} aquí. El nombre ingresado se mostrará encima del indicador.

Paso 5. Haz clic en el botón "intervalo" para definir el período de tiempo que el widget tomará en cuenta. Puedes dejarlo en su opción predeterminada "definido por el dashboard" para que el widget siga la configuración general de intervalo de tiempo del dashboard.

En la pestaña "apariencia", puedes configurar opcionalmente las siguientes opciones:

Paso 6. Nombra el widget.

Paso 7. Oculta el encabezado del widget.

Paso 8. Usando el botón "mostrar etiquetas", decide si deseas que el widget muestre el valor del último punto recibido por la variable y su fecha de llegada.

Paso 9. Define el formato de los datos, entre estas opciones posibles:

  • Auto

  • Ninguno

  • Miles

  • Millones

  • Miles de millones

Paso 10. Elige el formato de fecha del widget.

Paso 11. Define una lógica de color que funcione según el valor de la variable para determinar si el Indicador se muestra como "apagado" o "encendido".

Paso 12. Elige las fuentes primaria y secundaria y sus respectivos tamaños.

Paso 13. Define el tamaño de los Indicadores.

Paso 14. Usando la opción "diseño", elige la dirección en la que se organizarán los Indicadores dentro del widget (horizontalmente, verticalmente o "auto").

Paso 15. Cambia la alineación de los Indicadores usando las opciones "izquierda", "centro" y "derecha".

Paso 16. Agrega una imagen de fondo.

Paso 17. Personaliza aún más la apariencia del widget usando el editor de "estilo personalizado".​

¿Ha quedado contestada tu pregunta?