Bloque de mapa de calor
Una cuadrícula de fila × columna de valores, sombreada en una rampa de color secuencial de claro a oscuro — para detectar dónde se concentra la actividad en dos dimensiones a la vez, como día de la semana × hora.
Cómo funciona
El gráfico se renderiza como un único PNG generado en el servidor (sin biblioteca de gráficos del lado del cliente, sin JavaScript) con una tabla de datos HTML siempre visible debajo — el mismo emparejamiento innegociable al que se compromete cada gráfico de esta familia. Un mapa de calor no tiene una forma de serie o proporción de categoría como sus hermanos: la magnitud se codifica puramente mediante la intensidad de color a lo largo de una rampa secuencial, nunca mediante un segundo color de identidad. Su "leyenda" encima de la tabla es una barra de degradado (CSS real, no una lista de muestras), etiquetada con 0 en un extremo y el valor máximo real de la cuadrícula en el otro, mostrando qué tono corresponde a qué magnitud.
Las filas se escriben en "formato largo": una Fila, una Columna, y un Valor por fila escrita — una celda de la cuadrícula, no una fila o columna completa a la vez. Ese es el ajuste natural aquí, ya que los datos de proyecto no pueden anidar arreglos dentro de arreglos. El bloque agrupa cada celda escrita en una matriz de fila × columna en el momento de renderizar. Las etiquetas distintas de fila y columna se mantienen en el orden en que se escribieron por primera vez, nunca ordenadas — un mapa de calor que lista días de la semana mantiene el lunes primero porque lo escribiste primero, no por ninguna inferencia alfabética o cronológica.
Una combinación realmente ausente (un par (fila, columna) para el que nunca escribiste ningún valor) se renderiza como una celda gris plana distintiva de "sin datos" en la imagen. Aparece una muestra de "Sin datos" en la leyenda siempre que la cuadrícula tenga al menos una de esas ausencias. Esto es deliberadamente distinto de cómo se renderizaría un cero.
Un cero es un valor real, apropiadamente oscuro en la rampa — el extremo bajo, pero aun así medido — mientras que una ausencia significa que nadie registró nunca nada para esa celda. Confundir los dos haría que "aquí no tenemos datos" se viera idéntico a "aquí la actividad es exactamente cero", lo cual es una afirmación materialmente distinta. La tabla de datos solo lista las celdas para las que realmente escribiste un valor; una ausencia genuina tampoco contribuye ninguna fila a la tabla, ya que no hay ningún valor que mostrar para ella.
Las celdas muestran su valor exacto como texto directamente dentro de la imagen de la cuadrícula solo mientras esta se mantiene pequeña: hasta 40 celdas en total (filas × columnas). Pasado eso, el sombreado de la rampa por sí solo transmite la magnitud en la propia imagen, y la tabla de datos siempre visible se convierte en el lugar para leer los números exactos. Meter texto legible en un número cada vez menor de celdas cada vez más pequeñas deja de funcionar bien antes de que la cuadrícula se haga grande. La cuadrícula está limitada a 12 filas distintas y 24 columnas distintas. Una nueva identidad de fila o columna adicional que exceda esos límites se descarta en lugar de fusionarse con una existente, ya que fusionar dos filas o columnas genuinamente distintas distorsionaría lo que medía cada una.
La rampa usa por defecto un tono derivado del color de marca del proyecto; Color de rampa lo anula con el tuyo propio.
Este bloque es solo de filas escritas por el autor — no tiene modo de vinculación a fuente de datos ni a resultados de respuesta de campaña. Mira Vincular gráficos a datos reales para saber cuáles cuatro tipos de gráfico sí admiten vinculación.
Campos configurables:
- Título del gráfico — se muestra encima de la imagen.
- Celdas (fila, columna, valor) — la lista de filas; una celda de la cuadrícula por fila escrita.
- Color de rampa — anula el tono de rampa derivado de la marca por defecto.
- Color de fondo, relleno, borde, radio de borde en la tarjeta.
- Pares independientes de color/tamaño de fuente para el título y el texto de la leyenda/tabla.
Ejemplos
Subject
When your RSVPs are opening
Un resumen de eventos puede mapear en calor la actividad de RSVP por día de la semana × hora del día (una forma clásica de 7×24, cómodamente dentro de los límites de fila/columna) para mostrarles a los organizadores cuándo se abren y se actúa realmente sobre las invitaciones. Un informe de operaciones de soporte podría graficar en cuadrícula el volumen de tickets por día de la semana × categoría, dejando claro qué categoría se dispara en qué día sin una docena de gráficos de barras separados. Un informe de temporada de un equipo deportivo podría mapear en calor la asistencia por escuadra × mes. Las ausencias genuinas de "sin datos" — una escuadra que aún no existía en un mes temprano — se renderizan distintivamente en gris, en lugar de parecer un mes de asistencia cero que distorsionaría la afluencia real del equipo.
Cómo se ve la alternativa estática
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Activity by day and time</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
alt="Heatmap: 3 rows × 4 columns, values from 0 to 15"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px">
<span style="font-size:12px;color:#6b7280">0</span>
<span aria-hidden="true" style="display:inline-block;width:120px;height:10px;border-radius:5px;background:linear-gradient(to right,#eef2ff,#3730a3)"></span>
<span style="font-size:12px;color:#6b7280">15</span>
</div>
<table style="width:100%;border-collapse:collapse;margin-top:4px">
<tr>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Row</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Column</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Value</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Tue</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Afternoon</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">15</td>
</tr>
</table>
</div>
La leyenda de degradado etiqueta los extremos 0 y máximo de la rampa; la tabla lista Fila/Columna/Valor para cada celda que realmente tiene datos — una ausencia real no contribuye ninguna fila aquí.