Punch card

Activity by weekday and hour, as sized dots. Sample data: API calls by weekday and hour, Monday to Sunday, 00 to 23.

API calls by hour
Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

API calls by hour
Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Installation

1
Set up the registry once
This chart is free in Hearth and MIT licensed: no token. Add @chartory to components.json once (the URL alone, no headers), or skip this when another chart is already installed.
Installation guide
2
Add the chart
One command adds the Punch card component to your project.
```
npx shadcn add @chartory/punch-card
```

Use it

Pass your rows. The props are the Figma properties.

usage.tsx

import { PunchCard }  from "@/components/chartory/punch-card"<PunchCard  data={apiCalls}  size="m"  legend/>

Props

<PunchCard>

Every prop but data is a Figma property with the same name and values.

PropTypeDefault

dataPunchCardDataRequired

size"xs" | "s" | "m" | "l""m"

legendbooleantrue

color"cat-1" | "cat-2" | "cat-3" | "cat-4""cat-1"

PunchCardData

The data prop: one object for the whole chart.

PropTypeDefault

rowsstring[]Required

valsnumber[][]Required

xlRecord<number, string>Required

The data as a JSON Schema: schemas/punch-card.json

Punch card: a React and Figma chart in four sizes

What does a punch card show?

A punch card puts weekdays down the side and hours across, and draws a dot in each cell sized by activity. Peak hours stand out as the biggest dots. Use it for API calls, commits or support load by time of week.

Chartory ships it as a Figma component and a React component with the same name. The code installs from the shadcn registry with one command and lands in your project as a file you own.

What is the Punch card component?

It is one <PunchCard> component. Its props are the Figma properties with the same names and values, and the props table above lists them. The data is a count per weekday and hour.

Sizes XS, S, M and L re-lay the chart out from the data instead of scaling it, so labels stay readable at every size.

When should I use it?

Are dot sizes enough? Yes means the punch card fits.
Is a grid wanted? Yes means the punch card fits.
Is it counts, not runs? Yes means the punch card fits.

When does another type fit better?

Shaded cells. Use Heatmap instead.
A round week. Use Radial hour heatmap instead.
A week of runs with a now marker. Use Weekly rhythm instead.

Punch card questions

Installing, data, Figma and plans.

Yes. It installs through the shadcn registry with the shadcn CLI, and the file lands in your project.

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Punch card

Installation

Set up the registry once

Add the chart

Use it

Props

<PunchCard>

PunchCardData

Punch card: a React and Figma chart in four sizes

What does a punch card show?

What is the Punch card component?

When should I use it?

When does another type fit better?

Punch card questions

Does the Punch card chart work with shadcn/ui?Install

How do I install it?Install

Can my coding agent install it?Install

What data does it expect?Data

Which sizes does it ship in?Figma

Is it in the Figma file too?Figma

Does it follow light and dark mode?Figma

Which plan has the code?Plans

New charts, by email.

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4