Heatmap

A heatmap visualization component that displays activity intensity across days of the week and multiple weeks, using color gradients to represent intensity levels.

Usage

import Heatmap from '@/components/Heatmap';

export default function MyPage() {
  return (
    <div className="p-4 border rounded-lg">
      <h2 className="text-lg font-bold mb-4">Activity Tracker</h2>
      <Heatmap 
        width={600}
        height={300}
        events={true}
      />
    </div>
  );
}

Examples

Basic Heatmap

A simple heatmap displaying activity levels across days and weeks.

<Heatmap 
  width={600}
  height={300}
/>

Interactive Heatmap

A heatmap with click events enabled for each cell.

<Heatmap 
  width={600}
  height={300}
  events={true}
/>

Compact Heatmap

A smaller heatmap with adjusted margins.

<Heatmap 
  width={400}
  height={200}
  margin={{ top: 30, left: 30, right: 10, bottom: 20 }}
/>