カレンダーヒートマップライブラリ比較

'use client';
import { ResponsiveCalendar } from '@nivo/calendar';

// 日付ごとのアクティビティデータを生成
const generateData = () => {
  const data = [];
  const start = new Date('2024-01-01');
  for (let i = 0; i < 365; i++) {
    const date = new Date(start);
    date.setDate(start.getDate() + i);
    data.push({
      day: date.toISOString().split('T')[0],
      value: Math.floor(Math.random() * 10),
    });
  }
  return data;
};

export function NivoCalendarHeatmap() {
  return (
    <div style={{ height: 200 }}>
      <ResponsiveCalendar
        data={generateData()}
        from="2024-01-01"
        to="2024-12-31"
        emptyColor="#ebedf0"
        colors={['#9be9a8', '#40c463', '#30a14e', '#216e39']}
        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
        monthBorderColor="#ffffff"
        dayBorderWidth={2}
        dayBorderColor="#ffffff"
      />
    </div>
  );
}

'use client';
// React + SVG カスタムカレンダーヒートマップ
const getColor = (value: number): string => {
  if (value === 0) return '#ebedf0';
  if (value <= 2) return '#9be9a8';
  if (value <= 4) return '#40c463';
  if (value <= 6) return '#30a14e';
  return '#216e39';
};

// 2024年1月分のサンプルデータ
const generateMonthData = (year: number, month: number) => {
  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) {
    cells.push({ day: d, value: Math.floor(Math.random() * 10) });
  }
  return cells;
};

export function CustomCalendarHeatmap() {
  const cells = generateMonthData(2024, 0); // 1月
  const cellSize = 28, gap = 4;

  return (
    <svg viewBox={`0 0 ${7 * (cellSize + gap)} ${6 * (cellSize + gap) + 20}`}
      className="w-full max-w-xs">
      {['日','月','火','水','木','金','土'].map((d, i) => (
        <text key={d} x={i * (cellSize + gap) + cellSize / 2} y={14}
          textAnchor="middle" fontSize={9} fill="#6b7280">{d}</text>
      ))}
      {cells.map((cell, i) => {
        if (!cell) return null;
        const col = i % 7, row = Math.floor(i / 7);
        return (
          <rect key={i}
            x={col * (cellSize + gap)} y={20 + row * (cellSize + gap)}
            width={cellSize} height={cellSize} rx={3}
            fill={getColor(cell.value)}>
            <title>{cell.day}日: {cell.value}件</title>
          </rect>
        );
      })}
    </svg>
  );
}

'use client';
import CalendarHeatmap from 'react-calendar-heatmap';
import 'react-calendar-heatmap/dist/styles.css';

// サンプルデータ生成
const generateValues = () => {
  const values = [];
  const start = new Date('2023-12-31');
  for (let i = 0; i < 365; i++) {
    const date = new Date(start);
    date.setDate(start.getDate() + i + 1);
    values.push({
      date: date.toISOString().split('T')[0],
      count: Math.floor(Math.random() * 10),
    });
  }
  return values;
};

export function ReactCalendarHeatmap() {
  return (
    <>
      <style>{`
        .color-empty { fill: #ebedf0; }
        .color-scale-1 { fill: #9be9a8; }
        .color-scale-2 { fill: #40c463; }
        .color-scale-3 { fill: #30a14e; }
        .color-scale-4 { fill: #216e39; }
      `}</style>
      <CalendarHeatmap
        startDate={new Date('2023-12-31')}
        endDate={new Date('2024-12-31')}
        values={generateValues()}
        classForValue={(value) => {
          if (!value || value.count === 0) return 'color-empty';
          if (value.count <= 2) return 'color-scale-1';
          if (value.count <= 4) return 'color-scale-2';
          if (value.count <= 6) return 'color-scale-3';
          return 'color-scale-4';
        }}
        showWeekdayLabels
      />
    </>
  );
}