# ContributionGraph

> A year of per-day counts at a glance, as a real `<table role="grid">`: weeks are columns, weekdays rows, and each day is tinted one of five levels drawn from the accent, so each app's theme recolours it.

```ts
import { ContributionGraph } from "@sdxc/ui/app";
```

Without script each day's `title` names its count; mapping `@sdxc/ui/app/contribution-graph` in
the browser entry runs ContributionGraphTooltip, for a shared tooltip and arrow keys. Size
it with `--ui-contribution-graph-cell` and `-gap`, match `-bg` to the surface, tint `--graph-level-0`–`4`.

## Examples

```tsx
<ContributionGraph
	days={days}
	start="2025-11-14"
	end="2026-11-13"
	locale="en-US"
	href={(date) => `/activity?date=${date}`}
	labels={{
		caption: t("profile.contributions", { count: total }),
		day: (count, date) => t("profile.contributionsOn", { count, date }),
		less: t("graph.less"),
		more: t("graph.more"),
	}}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `days` | `readonly Day[]` | The counts to plot, in any order; only days between `start` and `end` are drawn. |
| `start` | `string` | The first day drawn, as `YYYY-MM-DD`. |
| `end` | `string` | The last day drawn, as `YYYY-MM-DD`; its week is kept in view on a phone. |
| `levels?` | `readonly number[]` | Lower bound of levels 0 to 4: a day takes the highest level its count reaches. @default [0, 1, 4, 8, 12] |
| `href?` | `(date: string) => string` | Where a day leads, such as that day's activity; days are links when set. |
| `locale?` | `string` | Locale for month and weekday names, and for the first day of the week. |
| `weekStart?` | `number` | First day of the week, 0 = Sunday; defaults to the locale's. |
| `labels` | `Labels` | Every string the graph shows, so it reads in any language. |

Also accepts everything in `Omit<TagProps<"div">, "children">`.


## Also exported

- `weekStartFor`
- `contributionLevel`