Contribution Graph
The activity calendar: one square per day, a year across.
Walkthrough
1. Basic
A year of activity, one square a day. Hover a square for its date.
1,409 commits 210 active days Longest streak 7 Current streak 1
Less More
<script lang="ts"> import { ContributionGraph, type ActivityDay } from 'omaris'; const days: ActivityDay[] = Array.from({ length: 365 }, (_, index) => { const date = new Date(Date.now() - (364 - index) * 86_400_000); const weekend = date.getDay() === 0 || date.getDay() === 6; const noise = Math.sin(index * 12.9898) * 43758.5453; const chance = noise - Math.floor(noise); return { date, count: chance > (weekend ? 0.7 : 0.35) ? Math.ceil(chance * 9) : 0 }; });</script><div class="w-full"> <ContributionGraph data={days} unit="commit" stats /></div>2. Narrow
The same year in a phone-width column. trim drops the oldest weeks until what is left fits; scroll keeps them all and opens on the most recent.
Trimmed to fit
Less More
Scrolls
Less More
<script lang="ts"> import { ContributionGraph, type ActivityDay } from 'omaris'; const days: ActivityDay[] = Array.from({ length: 365 }, (_, index) => { const date = new Date(Date.now() - (364 - index) * 86_400_000); const noise = Math.sin(index * 7.331) * 15731.7; const chance = noise - Math.floor(noise); return { date, count: chance > 0.4 ? Math.ceil(chance * 7) : 0 }; });</script><div class="flex w-full max-w-72 flex-col gap-6"> <ContributionGraph data={days} fit="trim" size="sm" title="Trimmed to fit" /> <ContributionGraph data={days} fit="scroll" size="sm" title="Scrolls" /></div>3. Tones
The scale is mixed from one tone, so the graph matches whatever it tracks.
531 workouts
531 shifts
<script lang="ts"> import { ContributionGraph, type ActivityDay } from 'omaris'; const days: ActivityDay[] = Array.from({ length: 182 }, (_, index) => { const date = new Date(Date.now() - (181 - index) * 86_400_000); const noise = Math.sin(index * 3.77) * 9731.3; const chance = noise - Math.floor(noise); return { date, count: chance > 0.35 ? Math.ceil(chance * 6) : 0 }; });</script><div class="flex w-full flex-col gap-6"> <ContributionGraph data={days} tone="success" unit="workout" weeks={26} legend={false} /> <ContributionGraph data={days} tone="tertiary" unit="shift" weeks={26} legend={false} /></div>4. Overridden
Round cells, a fixed scale and a header of your own.
765 across 96 days
Less More
<script lang="ts"> import { ContributionGraph, type ActivityDay } from 'omaris'; const days: ActivityDay[] = Array.from({ length: 140 }, (_, index) => { const date = new Date(Date.now() - (139 - index) * 86_400_000); const noise = Math.sin(index * 5.13) * 22331.9; const chance = noise - Math.floor(noise); return { date, count: chance > 0.3 ? Math.ceil(chance * 12) : 0 }; });</script><div class="w-full"> <ContributionGraph data={days} weeks={20} thresholds={[1, 3, 6, 10]} classes={{ cell: 'rounded-full', legend: 'justify-start' }} > {#snippet header({ total, days: active })} <div class="flex items-baseline gap-2"> <span class="text-2xl font-semibold tabular-nums">{total}</span> <span class="text-sm text-muted-foreground">across {active} days</span> </div> {/snippet} </ContributionGraph></div>