A calendar density grid. It answers a question no chart here answers well: when did this happen, across months, at a glance.
Loading preview...
import { ActivityHeatmap } from "@/components/ui/klyv-activity-heatmap";
import { Card } from "@/components/ui/klyv-activity-heatmap-utils/components-Card-Card";
import { type HeatmapDay } from "@/components/ui/klyv-activity-heatmap";
const SourceExample = () => (
<Card title="Transaction activity" className="w-full">
<div className="mt-3">
<ActivityHeatmap days={HEATMAP} label="Transactions per day" weeks={26} />
</div>
</Card>
);
const HEATMAP: HeatmapDay[] = (() => {
const days: HeatmapDay[] = []
const start = new Date()
start.setDate(start.getDate() - 26 * 7)
for (let index = 0; index < 26 * 7; index += 1) {
const date = new Date(start)
date.setDate(start.getDate() + index)
const weekday = date.getDay()
// Quiet weekends, a spike near the start of each month.
const base = weekday === 0 || weekday === 6 ? 0.25 : 1
const payday = date.getDate() <= 3 ? 3 : 1
const value = Math.max(0, Math.round((Math.random() * 5 * base * payday) - 0.6))
days.push({
date: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`,
value,
})
}
return days
})()
export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><SourceExample /></div></div>}