# Mirror chart

Mirror draws one thing above a line and its opposite below it, period by period. Use it for added against removed, earned against spent, opened against closed.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/mirror/
>
> What was added above the line, what was removed below it.

## 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: ["Mirror."],
    lede: "What was added above the line, what was removed below it.",
    chart: {
      type: "mirror",
      pairs: [
        { up: 400, down: 180 },
        { up: 1013, down: 601 },
        { up: 1626, down: 1022 },
        { up: 2239, down: 543 },
        { up: 952, down: 964 },
        { up: 1565, down: 485 },
        { up: 2178, down: 906 },
        { up: 891, down: 427 },
        { up: 1504, down: 4210 },
        { up: 2117, down: 369 },
        { up: 830, down: 790 },
        { up: 1443, down: 311 },
        { up: 2056, down: 732 },
        { up: 769, down: 253 },
        { up: 1382, down: 674 },
        { up: 1995, down: 195 },
        { up: 708, down: 616 },
        { up: 1321, down: 1037 },
        { up: 1934, down: 558 },
        { up: 647, down: 979 },
        { up: 1260, down: 500 },
        { up: 1873, down: 921 },
      ],
      up: "+48,120 written",
      down: "-31,406 deleted",
      mark: { index: 8, label: "4,210 gone in a week" },
    },
  },
  { key: "mirror", label: "Mirror" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"mirror"` | Picks this chart. |
| `pairs` | `readonly { up: number; down: number }[]` | One pair per period, oldest first. |
| `up` | `string` | What the bars above the line count. |
| `down` | `string` | What the bars below the line count. |
| `mark` | `{ index: number; label: string }` | One fall to light, and its note. |

## 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/)
- [Where you stand chart](https://bettertyped.github.io/react-wrapped/docs/charts/standing/)
- [Week by hour chart](https://bettertyped.github.io/react-wrapped/docs/charts/hours/)
- [Donut chart](https://bettertyped.github.io/react-wrapped/docs/charts/donut/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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