Nexus – Elemento: Gauge

¿Qué es?

Gauge es un componente de tipo Data. Muestra un medidor circular (tipo velocímetro) que representa un valor dentro de un rango definido, con una etiqueta y una unidad de medida. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Score”, valor 72 sobre un rango de 0 a 100, con la etiqueta “Performance”).

Propiedades

Al seleccionar Gauge en el lienzo, el panel derecho muestra “Properties of Gauge”, organizado en tres pestañas: Content, Style y Behavior.

  • Component ID: identificador único del componente, autogenerado (ej. gau_be6202da).
  • Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show.
  • Selector S / M / L: ajusta el tamaño de visualización del panel de propiedades.

Pestaña Content:

  • Title: título del medidor (ej. “Score”).
  • Value: valor actual que se representa en el medidor (ej. 72).
  • Min: valor mínimo del rango (ej. 0).
  • Max: valor máximo del rango (ej. 100).
  • Label: etiqueta descriptiva que se muestra debajo del valor (ej. “Performance”).
  • Unit: unidad de medida que acompaña al valor (ej. “%”).
  • Theme: menú desplegable con el estilo visual del medidor. Opciones disponibles:

    • Classic
    • Dark
    • Gradient

Pestaña Style:

  • Gauge Color: selector de color para el arco del medidor (color picker + campo de texto para código de color).
  • Custom Class: clase CSS personalizada.
  • Custom Style: CSS personalizado aplicado directamente a este componente.

Pestaña Behavior:

  • Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .
  • Delete Component (ícono de papelera, arriba): elimina el componente del lienzo.

Ejemplo de uso

Para usar Gauge como indicador de una métrica propia, basta con reemplazar los valores de Value, Min, Max, Label y Unit según el dato que se quiera representar. Por ejemplo, para mostrar el nivel de batería de un dispositivo:

  • Title: Battery
  • Value: 45
  • Min: 0
  • Max: 100
  • Label: Battery Level
  • Unit: %

Con Theme se puede adaptar el estilo visual del medidor al diseño general del tablero (claro, oscuro o degradado), y con Gauge Color se puede personalizar el color del arco independientemente del tema elegido.