Nexus – Elemento: Treemap

¿Qué es?

Treemap es un componente de tipo Data. Muestra una visualización jerárquica de datos, donde cada bloque representa un valor proporcional al total (mientras mayor el valor, más grande el bloque). Al arrastrarlo al lienzo viene con un ejemplo precargado (“Revenue Mix”, con categorías Enterprise, SMB, Self-Serve, Partners).

Propiedades

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

• Component ID: identificador único del componente, autogenerado (ej. trm_4d668006).
• 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 del gráfico (ej. “Revenue Mix”).
• Blocks (JSON): campo de código donde se definen los bloques del treemap en formato JSON. Cada bloque se compone de:
  • label: nombre de la categoría (ej. “Enterprise”).
  • value: valor numérico que determina el tamaño proporcional del bloque (ej. 420000).

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

• Value Prefix: texto que se antepone al valor mostrado en cada bloque (ej. $).
• Value Suffix: texto que se agrega después del valor mostrado en cada bloque.

Pestaña Style:

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

Pestaña Behavior:

• Show Share %: casilla que muestra el porcentaje que representa cada bloque respecto al total (ej. “49%” debajo de “$420.0k”).
• 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 bloque, hay que ubicarse en la última llave } del bloque anterior dentro de Blocks (JSON), agregarle una coma, y pegar el nuevo bloque a continuación:

[
  {
    "label": "Partners",
    "value": 86000
  },
  {
    "label": "Nuevo Canal",
    "value": 50000
  }
]

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

Con Value Prefix y Value Suffix se puede dar formato al valor mostrado sin modificar el JSON — por ejemplo, prefijo $ para montos en dólares, o sufijo kg para unidades de peso. Con Show Share % activado, cada bloque muestra automáticamente el porcentaje que representa sobre el total de todos los valores cargados.