# 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.

### Problemas conocidos
No se conocen problemas.

### Copiar el marcado
Una hoja de estilos de `@luz-ds/catalog`: enlaza `components/heat-map.css` después de `luz.css`.

Heat map markup
```html
<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
- `--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.

### 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](https://nandovejer.github.io/luz/es/docs/catalog/bar-list/) o un [gráfico de columnas](https://nandovejer.github.io/luz/es/docs/catalog/column-chart/)) ni cuando importen más los valores exactos que el patrón (usa una [tabla](https://nandovejer.github.io/luz/es/docs/components/table/)).