Catálogo · Gráficos
Mapa de calor
Muestra cuánto hay en cada celda de una cuadrícula con color y con cifra, desde una tabla nativa; un calendario es uno.
Encaja mejor en: app — una página que muestra dónde una cuadrícula es alta o baja: una semana por horas, un mes de días
Ejemplo
Paquetes en cada momento del día, durante los cinco días laborables.
| Mon | Tue | Wed | Thu | Fri | |
|---|---|---|---|---|---|
| Morning | 120 | 240 | 360 | 480 | 600 |
| Afternoon | 0 | 60 | 300 | 180 | 540 |
| Evening | 30 | 90 | 150 | 270 | 420 |
Problemas conocidos
No se conocen problemas.
Código
Copiar el marcado
import "@luz-ds/catalog/components/heat-map.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/heat-map.min.css" integrity="sha384-DJgfU9rFnD5GNimPOCLjdOuNzoYZICrPETuLVH/pOo2F3LcYvJLCAPq85abuQpaw" crossorigin="anonymous">Una hoja de estilos de @luz-ds/catalog: enlaza components/heat-map.css después de luz.css.
<table class="luz-heat-map">
<caption>Parcels per part of the day, this week. The stronger the colour, the more parcels.</caption>
<thead>
<tr><td></td><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th></tr>
</thead>
<tbody>
<tr><th scope="row">Morning</th><td style="--v: .2">120</td><td style="--v: .4">240</td><td style="--v: .6">360</td></tr>
<tr><th scope="row">Afternoon</th><td style="--v: 0">0</td><td style="--v: .1">60</td><td style="--v: .5">300</td></tr>
</tbody>
</table>Variantes y opciones
| Opción | Efecto |
|---|---|
--v | En cada celda, de 0 a 1: su valor entre el valor más fuerte de toda la tabla |
--luz-heat-map-color | Otro color de gráfico para una tabla o una celda, como var(--luz-chart-2) |
Cómo funciona
Una tabla con una fila de encabezado de nombres y un nombre al principio de cada fila. Cada celda es su cifra en texto, con una muestra encima que mezcla --luz-chart-1 en --luz-chart-track en proporción a --v: la pista en 0, la serie en 1. La cifra queda sobre la superficie con el color del texto, así que se lee sea cual sea el valor.
Calcula --v a partir de tus datos: el valor dividido entre el valor más fuerte de la tabla, el mismo para todas las celdas. Un calendario es un mapa de calor con los días de la semana como columnas y las semanas como filas. El style en línea solo da --v; con un style-src estricto, ponlo en una regla propia.
La celda de la esquina de la fila de encabezado es un td vacío. Quédate en unas pocas columnas: con más de seis hace falta un luz-table-wrap.
Sin JavaScript
No lo necesita. Sin la hoja de estilos se lee como una tabla de cifras.
Teclado y ARIA
Nada recibe el foco. Una tabla conserva sus roles, así que un lector de pantalla lee cada cifra con los nombres de su fila y su columna. El título de la tabla la nombra e indica en qué sentido hay más.
La muestra no lleva texto ni nombre: la cifra es el valor.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Úsalo para ver dónde están los valores altos y bajos de una cuadrícula: una semana por horas, un mes de días, un equipo por trimestre.
Cuándo no usarlo
No lo uses para unos pocos valores (usa una lista de barras o un gráfico de columnas) ni cuando importen más los valores exactos que el patrón (usa una tabla).
Qué hacer y qué no
--v con el valor más fuerte de toda la tabla, para que un mismo color signifique siempre la misma cifra.Cómo escribir el contenido
Indica en el título qué cuenta la cuadrícula y en qué sentido hay más. El color es más claro para más en modo oscuro y más oscuro en modo claro, así que escribe «cuanto más fuerte el color» y no «cuanto más oscuro». Los datos y las etiquetas son tuyos: el componente solo los dibuja.
Contraste y foco
La muestra es un color de gráfico sobre la superficie; la vacía es la pista, discreta a propósito, porque la cifra lleva el valor.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Requisitos |
|---|---|---|---|---|---|
Muestra más fuerte sobre la página | --luz-chart-1 on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 3:1 |
Muestra más fuerte frente a la vacía | --luz-chart-1 on --luz-chart-track | 3.4:1 | 3.8:1 | 6.8:1 | 2:1 |
Muestra vacía sobre la página | --luz-chart-track on --luz-surface-page | 1.6:1 | 2.0:1 | 2.0:1 | 1.5:1 |
Cifra | --luz-text-primary on --luz-surface-page | 15.8:1 | 15.1:1 | 21.0:1 | 4.5:1 |
Nombre | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. Los requisitos son los mínimos de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos; una parte decorativa discreta mantiene 2:1 con aquello sobre lo que se dibuja.
- Foco: nada lo recibe.
- No solo color: cada muestra tiene su cifra debajo en texto, y en colores forzados la muestra es el resalte del sistema mezclado en el fondo, con un borde.
Tokens que usa
Los 12 tokens que lee components/heat-map.css, agrupados por familia. Cada familia enlaza a su página, con los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Spacing and sizing
--luz-space-2xl,--luz-space-2xs,--luz-space-3xs,--luz-space-lg- Typography
--luz-font-mono,--luz-font-sans,--luz-text-sm,--luz-text-xs- Radius
--luz-radius-sm
El teclado y ARIA están en la pestaña Código.