ヒートマップ（曜日×時間）

用途

曜日×時間帯の活動量を色濃淡で可視化。GitHub の contribution graph 風。

特徴

• 曜日×時間 の 7×24 グリッド
• 色濃淡で量表現
• ツールチップ
• クリックで詳細

コード（コピペ用）

export function Heatmap({ data }: { data: { day: number; hour: number; value: number }[] }) {
  const max = Math.max(...data.map(d => d.value), 1);
  const get = (d: number, h: number) => data.find(x => x.day === d && x.hour === h)?.value ?? 0;
  const days = ['月','火','水','木','金','土','日'];
  return (
    <table style={{ borderCollapse: 'collapse', fontSize: '.65rem' }}>
      <thead><tr><th></th>{Array.from({length:24}).map((_,h) => <th key={h} style={{padding:'.15rem'}}>{h}</th>)}</tr></thead>
      <tbody>
        {days.map((dn, d) => (
          <tr key={d}>
            <td style={{padding:'.15rem .35rem', color:'#71717a'}}>{dn}</td>
            {Array.from({length:24}).map((_,h) => {
              const v = get(d, h);
              const a = v / max;
              return <td key={h} title={`${dn} ${h}時: ${v}`}
                style={{width:14, height:14, background:`rgba(165,180,252,${a})`, border:'1px solid rgba(255,255,255,.05)'}} />;
            })}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加