# CalendarHeatmap

> Contribution-style calendar: one square per day, weeks as columns (Monday first), months labelled on top.

Source: https://ui.jcsoftdev.com/docs/components/calendar-heatmap

Contribution-style calendar: one square per day, weeks as columns (Monday
first), months labelled on top. Same color scales, ranges, crosshair and
keyboard model as `HeatmapChart`.

## Import

```ts
import { CalendarHeatmap } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/heatmap-chart`.

## Usage

```tsx
<CalendarHeatmap
  title="Ocupación de sillas por hora y día"
  rows={days}
  columns={hours}
  values={occupancy}
  scale="sequential"
  valueFormat={percent}
  domain={[0, 100]}
  cellLabels={false}
  gap={3}
  radius={4}
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name of the drawing and caption of the data table. |
| `days` * | `readonly CalendarDay[]` |  | One entry per day; missing days inside the range are drawn empty. |
| `from` | `Date` |  | First day shown; the earliest entry by default. |
| `to` | `Date` |  | Last day shown; the latest entry by default. |
| `scale` | `"sequential" \| "diverging"` | `"sequential"` |  |
| `domain` | `readonly [number, number]` |  |  |
| `center` | `number` | `0` |  |
| `colors` | `ScaleColors` |  |  |
| `ranges` | `readonly ColorRange[]` |  | Stepped coloring, e.g. "Sin citas", "1-5", "6-10", "Más de 10". |
| `valueFormat` | `ValueFormat` |  |  |
| `minCellSize` | `number` | `11` | Smallest cell in pixels; narrow containers show only the most recent weeks that fit. |
| `height` | `number \| "fill"` |  | Height of the drawing in px or "fill". By default it follows the width: cells are square, so the height is the month header plus seven cell sides. |
| `aspectRatio` | `number` |  | Width / height ratio; overrides the width-derived default height. |
| `gap` | `number` | `3` |  |
| `radius` | `number` | `3` |  |
| `weekdays` | `readonly string[]` | `WEEKDAYS` | Weekday names Monday to Sunday; only Monday, Wednesday and Friday are drawn. |
| `legend` | `boolean` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `animate` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<HeatmapLabels>` |  |  |
| `onDayClick` | `((day: CalendarDay) => void)` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-heatmapchart--default)
- [Cell Labels](/storybook/?path=/story/charts-heatmapchart--cell-labels)
- [Diverging](/storybook/?path=/story/charts-heatmapchart--diverging)
- [Ranges](/storybook/?path=/story/charts-heatmapchart--ranges)
- [Missing Data](/storybook/?path=/story/charts-heatmapchart--missing-data)
- [Calendar](/storybook/?path=/story/charts-heatmapchart--calendar)
- [Calendar Ranges](/storybook/?path=/story/charts-heatmapchart--calendar-ranges)
- [Rounded](/storybook/?path=/story/charts-heatmapchart--rounded)
- [Honeycomb](/storybook/?path=/story/charts-heatmapchart--honeycomb)
- [Continuous Datetime](/storybook/?path=/story/charts-heatmapchart--continuous-datetime)
- [Canvas Dense](/storybook/?path=/story/charts-heatmapchart--canvas-dense)
- [Drilldown](/storybook/?path=/story/charts-heatmapchart--drilldown)
- [Narrow Drilldown](/storybook/?path=/story/charts-heatmapchart--narrow-drilldown)
- [Loading](/storybook/?path=/story/charts-heatmapchart--loading)
- [Empty](/storybook/?path=/story/charts-heatmapchart--empty)
- [Narrow](/storybook/?path=/story/charts-heatmapchart--narrow)
- [Narrow Calendar](/storybook/?path=/story/charts-heatmapchart--narrow-calendar)

## Source

`packages/ui/src/charts/heatmap-chart/calendar-heatmap.tsx`