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.
Week by hour
EpicA week, hour by hour. The lit cell is the busiest slot.
A week, hour by hour. The lit cell is the busiest slot.
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: ["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 for the shared rules.
