Nexus – Elemento: Heatmap Calendar

¿Qué es?

Heatmap Calendar es un componente de tipo Data. Muestra un calendario tipo mapa de calor (similar al de contribuciones de GitHub), donde cada día se representa como una celda cuya intensidad de color varía según un valor asociado. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Activity Calendar”, con datos de actividad diaria distribuidos entre diciembre y marzo).

Propiedades

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

• Component ID: identificador único del componente, autogenerado (ej. hmp_4d2d519a).
• 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 calendario (ej. “Activity Calendar”).
• Data (array {date, value}): campo de código donde se definen los registros en formato JSON. Cada registro se compone de:
  • date: fecha del registro, en formato AAAA-MM-DD (ej. “2025-12-18”).value: valor numérico asociado a esa fecha, que determina la intensidad del color en la celda (ej. 8).
  Ejemplo de estructura:

  [
    {
      "date": "2025-12-18",
      "value": 8
    },
    {
      "date": "2025-12-19",
      "value": 1
    },
    {
      "date": "2025-12-20",
      "value": 6
    }
  ]

Cuenta con el editor de código expandido para más comodidad, con pestañas HTML/CSS/JS/JSON y botones Format y Copy. El editor valida el JSON en tiempo real (marca “✓ valid”).

• Lookback Days (7-365): cantidad de días hacia atrás que se muestran en el calendario, contados desde la fecha más reciente de los datos (ej. 91).
• Date Field: nombre de la propiedad del JSON que se usa como fecha (por defecto date). Permite adaptar el componente a datos con otro nombre de campo.
• Value Field: nombre de la propiedad del JSON que se usa como valor (por defecto value). Permite adaptar el componente a datos con otro nombre de campo.

Pestaña Style:

• Heatmap Color: selector de color base para las celdas con mayor intensidad (color picker + campo de texto con código hexadecimal, ej. #6366f1).
• 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 agregar un nuevo registro al calendario, se suma un nuevo objeto dentro del array, separado del anterior por una coma. El array completo, con sus corchetes de apertura y cierre, quedaría así:

[
  {
    "date": "2025-12-18",
    "value": 8
  },
  {
    "date": "2026-03-18",
    "value": 5
  }
]

La escala de color (referencia “Less” a “More” que se ve debajo del calendario) se calcula automáticamente en función del rango de valores presentes en los datos, y se puede personalizar el tono base desde Heatmap Color. Date Field y Value Field son útiles cuando el JSON de origen proviene de otra fuente (por ejemplo una API externa) que use nombres de propiedad distintos a date y value, evitando así tener que renombrar los campos manualmente.