Nexus – Elemento: Event Timeline

¿Qué es?

Event Timeline es un componente de tipo Data. Muestra una línea de tiempo de eventos, cada uno con título, descripción, hora y un color indicador de severidad. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Operations Timeline”, con 3 eventos).

Propiedades

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

• Component ID: identificador único del componente, autogenerado (ej. etl_42eff826).
• 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).

Pestaña Content:

• Title: título de la línea de tiempo (ej. “Operations Timeline”).
• Events (JSON): campo de código donde se definen los eventos en formato JSON. Cada evento se compone de:
  • title: título del evento (ej. “New enterprise account”).
  • description: descripción/detalle del evento.
  • time: hora del evento (ej. “09:24”).
  • variant: color/severidad del punto indicador. Valores vistos: "success" (verde), "info" (azul), "danger" (rojo).

  El campo cuenta con un botón para abrir un editor de código expandido (con pestañas HTML/CSS/JS/JSON, resaltado de sintaxis, autocompletado y formateo automático), útil para editar JSON extensos con más comodidad. El editor valida el JSON en tiempo real (marca “✓ valid” cuando el formato es correcto).

Pestaña Style:

• Custom Class: clase CSS personalizada.
• Custom Style: CSS personalizado aplicado directamente a este componente.

Pestaña Behavior:

• Max Items: cantidad máxima de eventos que se muestran en la línea de tiempo (valor de ejemplo: 8).
• Delete Component (ícono de papelera, arriba): 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 evento, hay que ubicarse en la última llave } del bloque anterior dentro de Events (JSON), agregarle una coma, y pegar el nuevo bloque a continuación:

[
  {
    "title": "Payment failed",
    "description": "Invoice INV-2048 requires retry",
    "time": "08:11",
    "variant": "danger"
  },
  {
    "title": "Backup completado",
    "description": "Copia de seguridad diaria finalizada sin errores",
    "time": "07:30",
    "variant": "success"
  }
]

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

Con variant se le da significado visual a cada evento: success para eventos positivos, info para eventos neutros/informativos, y danger para errores o incidentes. Con Max Items se puede limitar cuántos eventos se muestran a la vez, útil cuando la lista de eventos crece mucho.