HeatmapCalendar

heatmapcalendar-1779394026039.tsx

'use client'
import { useState } from 'react'

function rnd(max) { return Math.floor(Math.random() * max) }

const WEEKS = Array.from({ length: 52 }, (_, w) =>
  Array.from({ length: 7 }, (_, d) => ({ week: w, day: d, value: Math.random() < 0.3 ? 0 : rnd(10) }))
)
const intensity = (v) => {
  if (v === 0) return '#e2e8f0'
  if (v < 3) return '#c4b5fd'
  if (v < 6) return '#8b5cf6'
  if (v < 9) return '#6d28d9'
  return '#4c1d95'
}

export default function HeatmapCalendar() {
  const [hovered, setHovered] = useState(null)
  const total = WEEKS.flat().reduce((s, d) => s + d.value, 0)
  return (
    <div>
      <div style={{ fontSize:'14px', fontWeight:600, color:'#1e293b', marginBottom:'10px' }}>
        {total} contributions in the last year
      </div>
      <div style={{ overflowX:'auto' }}>
        <div style={{ display:'flex', gap:'2px' }}>
          {WEEKS.map((week, w) => (
            <div key={w} style={{ display:'flex', flexDirection:'column', gap:'2px' }}>
              {week.map((cell) => (
                <div
                  key={cell.day}
                  onMouseEnter={() => setHovered(cell)}
                  onMouseLeave={() => setHovered(null)}
                  title={cell.value + ' contributions'}
                  style={{
                    width:'12px', height:'12px', borderRadius:'2px',
                    background:intensity(cell.value), cursor:'pointer',
                    transition:'transform 0.1s', transform:hovered===cell ? 'scale(1.4)' : 'scale(1)',
                  }}
                />
              ))}
            </div>
          ))}
        </div>
      </div>
      <div style={{ display:'flex', alignItems:'center', gap:'6px', marginTop:'8px', fontSize:'11px', color:'#94a3b8' }}>
        Less
        {['#e2e8f0','#c4b5fd','#8b5cf6','#6d28d9','#4c1d95'].map(c => (
          <div key={c} style={{ width:'12px', height:'12px', borderRadius:'2px', background:c }} />
        ))}
        More
      </div>
    </div>
  )
}

Component info

CategoryData Visualization

Frameworkreact

TierFREE

Copies0

About

GitHub-style contribution heatmap calendar with hover tooltips

More from Data Visualization

'use client'
import { useEffect, useState } from 'react'

interface Metric {
  label: string
  value: number
  max: number
  color: string
  unit: string
}

const metrics: Metric[] = [
  { label: 'CPU Usage', value: 72, max: 100, color: '#C9A84C', un

RadialProgress

Data Visualization

'use client';
import { useState, useEffect } from 'react';

export default function MetricGauge({ value = 73, max = 100, label = "Performance Score", unit = "%" }) {
  const [animated, setAnimated] = useState(0);

  useEffect(() => {
    const timer

MetricGauge

Data Visualization

'use client';
import { useState, useEffect } from 'react';

export default function SplitTestWidget() {
  const [animating, setAnimating] = useState(false);
  const tests = [
    { name: 'CTA Button Color', varA: { label: 'Blue', value: 3.2, users: 4

SplitTestWidget

Data Visualization

'use client'
import { useState } from 'react'

const SEGMENTS = [
  { label: 'Buttons', value: 12, color: '#C9A84C' },
  { label: 'Forms', value: 10, color: '#6366f1' },
  { label: 'Navigation', value: 8, color: '#22c55e' },
  { label: 'Dashboard', v

DonutChart

Data Visualization