Skip to content
EspañolEnglish
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.
  • from and to mark 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.
  • label says what is measured and unit what each count is of ("orders").
  • tableVisible shows 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

Orders this quarter22 pedidos
MonMonday, August 3, 2026: 0 pedidosMonday, August 10, 2026: 0 pedidosMonday, August 17, 2026: 0 pedidosMonday, August 24, 2026: 0 pedidosMonday, August 31, 2026: 0 pedidosMonday, September 7, 2026: 0 pedidosMonday, September 14, 2026: 11 pedidosMonday, September 21, 2026: 0 pedidosMonday, September 28, 2026: 0 pedidosMonday, October 5, 2026: 0 pedidosMonday, October 12, 2026: 0 pedidosMonday, October 19, 2026: 0 pedidosMonday, October 26, 2026: 0 pedidos
TueTuesday, August 4, 2026: 0 pedidosTuesday, August 11, 2026: 0 pedidosTuesday, August 18, 2026: 0 pedidosTuesday, August 25, 2026: 0 pedidosTuesday, September 1, 2026: 0 pedidosTuesday, September 8, 2026: 0 pedidosTuesday, September 15, 2026: 0 pedidosTuesday, September 22, 2026: 0 pedidosTuesday, September 29, 2026: 0 pedidosTuesday, October 6, 2026: 0 pedidosTuesday, October 13, 2026: 0 pedidosTuesday, October 20, 2026: 0 pedidosTuesday, October 27, 2026: 0 pedidos
WedWednesday, August 5, 2026: 0 pedidosWednesday, August 12, 2026: 0 pedidosWednesday, August 19, 2026: 0 pedidosWednesday, August 26, 2026: 0 pedidosWednesday, September 2, 2026: 4 pedidosWednesday, September 9, 2026: 0 pedidosWednesday, September 16, 2026: 0 pedidosWednesday, September 23, 2026: 0 pedidosWednesday, September 30, 2026: 0 pedidosWednesday, October 7, 2026: 0 pedidosWednesday, October 14, 2026: 0 pedidosWednesday, October 21, 2026: 0 pedidosWednesday, October 28, 2026: 0 pedidos
ThuThursday, August 6, 2026: 0 pedidosThursday, August 13, 2026: 0 pedidosThursday, August 20, 2026: 0 pedidosThursday, August 27, 2026: 0 pedidosThursday, September 3, 2026: 0 pedidosThursday, September 10, 2026: 0 pedidosThursday, September 17, 2026: 0 pedidosThursday, September 24, 2026: 0 pedidosThursday, October 1, 2026: 7 pedidosThursday, October 8, 2026: 0 pedidosThursday, October 15, 2026: 0 pedidosThursday, October 22, 2026: 0 pedidosThursday, October 29, 2026: 0 pedidos
FriFriday, August 7, 2026: 0 pedidosFriday, August 14, 2026: 0 pedidosFriday, August 21, 2026: 0 pedidosFriday, August 28, 2026: 0 pedidosFriday, September 4, 2026: 0 pedidosFriday, September 11, 2026: 0 pedidosFriday, September 18, 2026: 0 pedidosFriday, September 25, 2026: 0 pedidosFriday, October 2, 2026: 0 pedidosFriday, October 9, 2026: 0 pedidosFriday, October 16, 2026: 0 pedidosFriday, October 23, 2026: 0 pedidosFriday, October 30, 2026: 0 pedidos
SatSaturday, August 1, 2026: 0 pedidosSaturday, August 8, 2026: 0 pedidosSaturday, August 15, 2026: 0 pedidosSaturday, August 22, 2026: 0 pedidosSaturday, August 29, 2026: 0 pedidosSaturday, September 5, 2026: 0 pedidosSaturday, September 12, 2026: 0 pedidosSaturday, September 19, 2026: 0 pedidosSaturday, September 26, 2026: 0 pedidosSaturday, October 3, 2026: 0 pedidosSaturday, October 10, 2026: 0 pedidosSaturday, October 17, 2026: 0 pedidosSaturday, October 24, 2026: 0 pedidosSaturday, October 31, 2026: 0 pedidos
SunSunday, August 2, 2026: 0 pedidosSunday, August 9, 2026: 0 pedidosSunday, August 16, 2026: 0 pedidosSunday, August 23, 2026: 0 pedidosSunday, August 30, 2026: 0 pedidosSunday, September 6, 2026: 0 pedidosSunday, September 13, 2026: 0 pedidosSunday, September 20, 2026: 0 pedidosSunday, September 27, 2026: 0 pedidosSunday, October 4, 2026: 0 pedidosSunday, October 11, 2026: 0 pedidosSunday, October 18, 2026: 0 pedidosSunday, 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.

PropTypeWhat it does
daysrequiredreadonly ActivityDay[]—
fromrequiredstring | PlainDate | DateFirst day, inclusive: `YYYY-MM-DD`, a single day or a `Date`.
labelrequiredstringWhat is being measured. It is the table's name.
torequiredstring | PlainDate | DateLast day, inclusive.
unitrequiredstringWhat the activity is about: "orders", "workouts", "posts".
classNamestringMerged with the library classes; it does not replace them.
size"sm" | "md" | "lg"—
tableVisiblebooleanAlso 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.

VariableDefault
--amset-activity-cell0.75rem
--amset-activity-slot3px
--amset-activity-radius2px
--amset-activity-titlevar(--amset-text-sm)
--amset-activity-labelvar(--amset-text-xs)
--amset-activity-day0.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: