# Heat map

Shows how much in each cell of a grid by colour and by figure, from a native table; a calendar is one.

### Known issues
None known.

### Copy the markup
A stylesheet of `@luz-ds/catalog`: link `components/heat-map.css` after `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>
```

### Variants and options
- `--v`: On each cell, from 0 to 1: its value over the strongest value of the whole table
- `--luz-heat-map-color`: Another chart colour for a table or a cell, such as `var(--luz-chart-2)`

### How it works
A table with a head row of names and a name at the start of each row. Each cell is its figure in text, with a swatch above it that mixes `--luz-chart-1` into `--luz-chart-track` in proportion to `--v`: the track at 0, the series at 1. The figure stays on the surface in the text colour, so it reads whatever the value.

Work out `--v` from your data: the value divided by the strongest value of the table, the same for every cell. A calendar is a heat map with the days of the week as columns and the weeks as rows. The inline `style` sets only `--v`; with a strict `style-src`, set it in a rule of your own.

The corner cell of the head row is an empty `td`. Keep to a handful of columns: with more than six, put the table in a `luz-table-wrap`.

### Without JavaScript
It needs none. Without the stylesheet it reads as a table of figures.

### Keyboard and ARIA
Nothing takes focus. A table keeps its roles, so a screen reader reads each figure with its row and column names. The caption names the table and says which way is more.

The swatch carries no text and no name: the figure is the value.

### When to use
Use it to see where the high and low values of a grid are: a week by hours, a month of days, a team by quarter.

### When not to use
Do not use it for a few values (use a [bar list](https://nandovejer.github.io/luz/docs/catalog/bar-list/) or a [column chart](https://nandovejer.github.io/luz/docs/catalog/column-chart/)) or when the exact values matter more than the pattern (use a [table](https://nandovejer.github.io/luz/docs/components/table/)).