All components (204)
Activity map
Data · ActivityMap · .amset-activity
What it is and when to use it
The grid of days by weeks, like the one on a GitHub profile: each column is a week (Monday to Sunday), each square a day, and the color shows how much activity there was. At the top, the title and the total for the period, and above the columns the name of each month in the week where it starts. If the period does not start on a Monday, the first column has gaps for the days before: it is the same week, not a misalignment.
When to use it
- To see at a glance which days have the most activity over a few months: orders, workshop check-ins, reviews.
fromandtomark the period, both included; days without data count as zero, not as a gap. They are calendar days, without a time: the clock change in March and October neither repeats nor drops any of them.labelsays what is measured andunitwhat each count is of ("orders").tableVisibleshows the table of days with their counts below, when the exact number matters.- The color is spread over four levels on the real maximum of the period: if the best day is four orders, four is the ceiling.
When not to
- To compare quantities across a few categories:
BarChart. - For the evolution of a figure, with its rise or fall:
Trend. - For appointments and events in a month that can be opened:
MonthAgenda.
Keyboard: none: there is nothing to press.
Accessibility: the grid is a real table, with the title in the caption and the day of the week as the header of each row. Each square carries, hidden from view, its full date and its count ("Monday, September 14, 2026: 3 orders"): a colored square cannot be read aloud and cannot be told apart if the colors are hard to see. The "Less … More" legend is decorative. With tableVisible, the table of days is the data for everyone and the grid becomes the drawing (aria-hidden), so the reader does not announce it twice. If from comes after to, it says so ("No dates to show") instead of drawing an empty grid.
Fine-tuning: CSS variables --amset-activity-*: -cell, -day, -label, -radius, -slot, -title. The size moves the side of the square, the gap between squares and the labels.
What it looks like
| Aug | Sep | Oct | ||||||||||||
| Mon | Monday, August 3, 2026: 0 pedidos | Monday, August 10, 2026: 0 pedidos | Monday, August 17, 2026: 0 pedidos | Monday, August 24, 2026: 0 pedidos | Monday, August 31, 2026: 0 pedidos | Monday, September 7, 2026: 0 pedidos | Monday, September 14, 2026: 11 pedidos | Monday, September 21, 2026: 0 pedidos | Monday, September 28, 2026: 0 pedidos | Monday, October 5, 2026: 0 pedidos | Monday, October 12, 2026: 0 pedidos | Monday, October 19, 2026: 0 pedidos | Monday, October 26, 2026: 0 pedidos | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tue | Tuesday, August 4, 2026: 0 pedidos | Tuesday, August 11, 2026: 0 pedidos | Tuesday, August 18, 2026: 0 pedidos | Tuesday, August 25, 2026: 0 pedidos | Tuesday, September 1, 2026: 0 pedidos | Tuesday, September 8, 2026: 0 pedidos | Tuesday, September 15, 2026: 0 pedidos | Tuesday, September 22, 2026: 0 pedidos | Tuesday, September 29, 2026: 0 pedidos | Tuesday, October 6, 2026: 0 pedidos | Tuesday, October 13, 2026: 0 pedidos | Tuesday, October 20, 2026: 0 pedidos | Tuesday, October 27, 2026: 0 pedidos | |
| Wed | Wednesday, August 5, 2026: 0 pedidos | Wednesday, August 12, 2026: 0 pedidos | Wednesday, August 19, 2026: 0 pedidos | Wednesday, August 26, 2026: 0 pedidos | Wednesday, September 2, 2026: 4 pedidos | Wednesday, September 9, 2026: 0 pedidos | Wednesday, September 16, 2026: 0 pedidos | Wednesday, September 23, 2026: 0 pedidos | Wednesday, September 30, 2026: 0 pedidos | Wednesday, October 7, 2026: 0 pedidos | Wednesday, October 14, 2026: 0 pedidos | Wednesday, October 21, 2026: 0 pedidos | Wednesday, October 28, 2026: 0 pedidos | |
| Thu | Thursday, August 6, 2026: 0 pedidos | Thursday, August 13, 2026: 0 pedidos | Thursday, August 20, 2026: 0 pedidos | Thursday, August 27, 2026: 0 pedidos | Thursday, September 3, 2026: 0 pedidos | Thursday, September 10, 2026: 0 pedidos | Thursday, September 17, 2026: 0 pedidos | Thursday, September 24, 2026: 0 pedidos | Thursday, October 1, 2026: 7 pedidos | Thursday, October 8, 2026: 0 pedidos | Thursday, October 15, 2026: 0 pedidos | Thursday, October 22, 2026: 0 pedidos | Thursday, October 29, 2026: 0 pedidos | |
| Fri | Friday, August 7, 2026: 0 pedidos | Friday, August 14, 2026: 0 pedidos | Friday, August 21, 2026: 0 pedidos | Friday, August 28, 2026: 0 pedidos | Friday, September 4, 2026: 0 pedidos | Friday, September 11, 2026: 0 pedidos | Friday, September 18, 2026: 0 pedidos | Friday, September 25, 2026: 0 pedidos | Friday, October 2, 2026: 0 pedidos | Friday, October 9, 2026: 0 pedidos | Friday, October 16, 2026: 0 pedidos | Friday, October 23, 2026: 0 pedidos | Friday, October 30, 2026: 0 pedidos | |
| Sat | Saturday, August 1, 2026: 0 pedidos | Saturday, August 8, 2026: 0 pedidos | Saturday, August 15, 2026: 0 pedidos | Saturday, August 22, 2026: 0 pedidos | Saturday, August 29, 2026: 0 pedidos | Saturday, September 5, 2026: 0 pedidos | Saturday, September 12, 2026: 0 pedidos | Saturday, September 19, 2026: 0 pedidos | Saturday, September 26, 2026: 0 pedidos | Saturday, October 3, 2026: 0 pedidos | Saturday, October 10, 2026: 0 pedidos | Saturday, October 17, 2026: 0 pedidos | Saturday, October 24, 2026: 0 pedidos | Saturday, October 31, 2026: 0 pedidos |
| Sun | Sunday, August 2, 2026: 0 pedidos | Sunday, August 9, 2026: 0 pedidos | Sunday, August 16, 2026: 0 pedidos | Sunday, August 23, 2026: 0 pedidos | Sunday, August 30, 2026: 0 pedidos | Sunday, September 6, 2026: 0 pedidos | Sunday, September 13, 2026: 0 pedidos | Sunday, September 20, 2026: 0 pedidos | Sunday, September 27, 2026: 0 pedidos | Sunday, October 4, 2026: 0 pedidos | Sunday, October 11, 2026: 0 pedidos | Sunday, October 18, 2026: 0 pedidos | Sunday, October 25, 2026: 0 pedidos |
<ActivityMap
label="Orders this quarter"
unit="orders"
from="2026-08-01"
to="2026-10-31"
days={[{ date: '2026-09-14', count: 11 }]}
/>Props
Import it with import { ActivityMap } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
daysrequired | readonly ActivityDay[] | — |
fromrequired | string | PlainDate | Date | First day, inclusive: `YYYY-MM-DD`, a single day or a `Date`. |
labelrequired | string | What is being measured. It is the table's name. |
torequired | string | PlainDate | Date | Last day, inclusive. |
unitrequired | string | What the activity is about: "orders", "workouts", "posts". |
className | string | Merged with the library classes; it does not replace them. |
size | "sm" | "md" | "lg" | — |
tableVisible | boolean | Also shows the table of days and counts below the grid. Then the table is the data for everyone and the grid is the drawing; without it, the grid itself is the table for the screen reader. |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
CSS variables
These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.
| Variable | Default |
|---|---|
--amset-activity-cell | 0.75rem |
--amset-activity-slot | 3px |
--amset-activity-radius | 2px |
--amset-activity-title | var(--amset-text-sm) |
--amset-activity-label | var(--amset-text-xs) |
--amset-activity-day | 0.625rem |
How to change it
.amset-activity {
--amset-activity-cell: ...;
--amset-activity-slot: ...;
}In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech:
