# Week by hour chart

Week by hour lays a week out as a grid, a row per day and a cell per hour. The busiest slot is lit, or the one you mark.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/hours/
>
> A week, hour by hour. The lit cell is the busiest slot.

## Installation

```bash
pnpm add @react-wrapped/charts @react-wrapped/core gsap
```

## Usage

A chart is data, not markup. Hand a scene an object with `type` set and the numbers to draw, and the scene draws it and plays its entrance on the video's timeline.

```tsx
import { chartScene } from "@react-wrapped/scenes";

export const scene = chartScene(
  {
    eyebrow: "Your year",
    title: ["Week by hour."],
    lede: "A week, hour by hour. The lit cell is the busiest slot.",
    chart: {
      type: "hours",
      rows: [
        [
          0, 1, 0, 0, 1, 0, 0, 3, 3, 4, 6, 12,
          // ...and 12 more
        ],
        [
          0, 1, 0, 0, 2, 1, 0, 0, 4, 5, 6, 13,
          // ...and 12 more
        ],
        // ...and 5 more rows
      ],
    },
  },
  { key: "hours", label: "Week by hour" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"hours"` | Picks this chart. |
| `rows` | `readonly (readonly number[])[]` | Seven rows, Monday first, of 24 values each. |
| `mark` | `{ day: number; hour: number }` | The slot to light. The busiest when left out. |

## How it comes in

Every chart plays in the order it is read: what it is made of stands first, the numbers arrive with a direction, and the one thing the chart is about lands last with its pill. Nothing is on screen before its own entrance. See [how charts animate](https://bettertyped.github.io/react-wrapped/docs/charts/) for the shared rules.

## Related

- [Charts](https://bettertyped.github.io/react-wrapped/docs/charts/)
- [Mirror chart](https://bettertyped.github.io/react-wrapped/docs/charts/mirror/)
- [Days chart](https://bettertyped.github.io/react-wrapped/docs/charts/days/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

Source: https://bettertyped.github.io/react-wrapped/docs/charts/hours/