# HeatKeys

A grid of cells shaded in four steps by their value, laid out like a keyboard or any grid, with the label kept on every cell.

- **Use it for**: Which keys or cells get used, laid out like the real thing.
- **Not for**: Counts across two named axes. Try [Matrix](https://unseenui.com/components/matrix/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { HeatKeys } from '@stackunseen/ui';
import { Matrix } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<HeatKeys label="Keys you reach for" rows={keyboard} scale={["Fewer", "More"]} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `label` (required) | `string` | Names the figure for assistive technology and the hidden table. |
| `max` | `number` | The value that gets the full fill; defaults to the largest value present. |
| `rows` (required) | `readonly HeatKeyRow[]` |  |
| `scale` | `readonly [string, string]` | Printed beside the scale: ['Fewer', 'More']. |
| `unit` | `string` | Unit for the hidden table, such as "presses". |

## Keyboard

Inert content; the hidden table is read in order.

## Works with

[Card](https://unseenui.com/components/card/), [Table](https://unseenui.com/components/table/), [Tag](https://unseenui.com/components/tag/), [DiffStat](https://unseenui.com/components/diff-stat/), [ElapsedTime](https://unseenui.com/components/elapsed-time/), [Numeric](https://unseenui.com/components/numeric/), [Kbd](https://unseenui.com/components/kbd/), [DotRing](https://unseenui.com/components/dot-ring/), [DotBars](https://unseenui.com/components/dot-bars/), [WeekStrip](https://unseenui.com/components/week-strip/), [Sparkline](https://unseenui.com/components/sparkline/), [BarList](https://unseenui.com/components/bar-list/)

Page: https://unseenui.com/components/heat-keys/