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.
Mirror
EpicWhat was added above the line, what was removed below it.
What was added above the line, what was removed below it.
Installation
pnpm add @react-wrapped/charts @react-wrapped/core gsapUsage
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.
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 for the shared rules.
