Nexus – Elemento: Live Ticker

¿Qué es?

Live Ticker es un componente de tipo Display. Muestra una cinta de datos con desplazamiento continuo (scroll horizontal automático), ideal para destacar métricas o indicadores en tiempo real. Al arrastrarlo al lienzo viene con datos de ejemplo precargados (Revenue, NPS, Open incidents).

Propiedades

Al seleccionar Live Ticker en el lienzo, el panel derecho muestra “Properties of LiveTicker” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. ltk_ca180ff8).
• 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 (ver Events & Actions).
• Ticker Label: texto que aparece fijo al inicio de la cinta (ej. LIVE).
• Items (JSON): campo de código donde se define el contenido de la cinta en formato JSON. Cada ítem se compone de:
  • title: nombre del dato (ej. “Revenue”).
  • value: valor mostrado (ej. “$142.4k”).
  • delta: variación mostrada junto al valor (ej. “+8.2%”).
  • deltaDirection: dirección de la variación. Acepta "up" (variación positiva, se muestra en verde) y "down" (variación negativa, se muestra en rojo).

  El editor valida el JSON en tiempo real (marca “✓ valid” cuando el formato es correcto).

• Behavior → Loop Duration (sec): tiempo en segundos que tarda la cinta en completar un ciclo de desplazamiento (valor de ejemplo: 24).
• Style → Custom Class: campo para asignar una clase CSS personalizada.
• Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

Para agregar un nuevo ítem a la cinta, hay que ubicarse en la última llave } del bloque anterior dentro de Items (JSON), agregarle una coma, y pegar el nuevo bloque a continuación:

[   
 {
  "title": "Open incidents",
  "value": "4",
  "delta": "-2",
  "deltaDirection": "down"
 },
 {
  "title": "Usuarios activos",
  "value": "312",
  "delta": "+5",
  "deltaDirection": "up"
 }
]

⚠️ Importante: la coma va pegada a la llave } del bloque anterior, no al principio del bloque nuevo.