# Then and now chart

Then and now puts two years on one line per row: a ring for where it was, a dot for where it ended. The row with the biggest jump is lit unless you pick one.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/dumbbell/
>
> The ring is where last year ended, the dot is where this one did.

## 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: ["Then and now."],
    lede: "The ring is where last year ended, the dot is where this one did.",
    chart: {
      type: "dumbbell",
      rows: [
        { label: "Contributions", was: 1240, now: 2052 },
        { label: "Reviews", was: 22, now: 65 },
        { label: "Active days", was: 198, now: 263 },
        { label: "Pull requests", was: 61, now: 48 },
      ],
    },
  },
  { key: "dumbbell", label: "Then and now" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"dumbbell"` | Picks this chart. |
| `rows` | `readonly { label: string; was: number; now: number }[]` | One row per thing counted. |
| `point` | `number` | The row to light. The biggest jump 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/)
- [Dot share chart](https://bettertyped.github.io/react-wrapped/docs/charts/dots/)
- [Bubbles chart](https://bettertyped.github.io/react-wrapped/docs/charts/bubbles/)
- [Spark chart](https://bettertyped.github.io/react-wrapped/docs/charts/spark/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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