ヒートマップライブラリ比較

'use client';
const days = ['月', '火', '水', '木', '金', '土', '日'];
const hours = ['9時', '12時', '15時', '18時', '21時'];

const rawData = days.map(day => ({
  day,
  values: hours.map(hour => ({
    hour,
    value: Math.floor(Math.random() * 100),
  })),
}));

function getColor(value: number): string {
  const r = Math.round(59 + (value / 100) * (239 - 59));
  const g = Math.round(130 - (value / 100) * 100);
  const b = Math.round(246 - (value / 100) * 200);
  return `rgb(${r},${g},${b})`;
}

export function CustomSvgHeatmap() {
  const cellW = 60, cellH = 40;
  const marginLeft = 40, marginTop = 30;
  const svgW = marginLeft + hours.length * cellW + 10;
  const svgH = marginTop + days.length * cellH + 10;

  return (
    <svg viewBox={`0 0 ${svgW} ${svgH}`} className="w-full">
      {hours.map((h, j) => (
        <text key={h} x={marginLeft + j * cellW + cellW / 2} y={18}
          textAnchor="middle" fontSize={10} fill="#6b7280">{h}</text>
      ))}
      {rawData.map((row, i) => (
        <g key={row.day}>
          <text x={marginLeft - 4} y={marginTop + i * cellH + cellH / 2}
            textAnchor="end" dominantBaseline="middle" fontSize={10} fill="#6b7280">{row.day}</text>
          {row.values.map((cell, j) => (
            <rect key={cell.hour}
              x={marginLeft + j * cellW + 2} y={marginTop + i * cellH + 2}
              width={cellW - 4} height={cellH - 4} rx={3}
              fill={getColor(cell.value)} />
          ))}
        </g>
      ))}
    </svg>
  );
}

'use client';
import { ResponsiveHeatMap } from '@nivo/heatmap';

const data = [
  { id: '月', data: [{ x: '9時', y: 45 }, { x: '12時', y: 80 }, { x: '15時', y: 62 }, { x: '18時', y: 35 }, { x: '21時', y: 20 }] },
  { id: '火', data: [{ x: '9時', y: 38 }, { x: '12時', y: 75 }, { x: '15時', y: 58 }, { x: '18時', y: 42 }, { x: '21時', y: 25 }] },
  { id: '水', data: [{ x: '9時', y: 52 }, { x: '12時', y: 90 }, { x: '15時', y: 70 }, { x: '18時', y: 48 }, { x: '21時', y: 30 }] },
  { id: '木', data: [{ x: '9時', y: 41 }, { x: '12時', y: 68 }, { x: '15時', y: 55 }, { x: '18時', y: 38 }, { x: '21時', y: 18 }] },
  { id: '金', data: [{ x: '9時', y: 60 }, { x: '12時', y: 95 }, { x: '15時', y: 78 }, { x: '18時', y: 55 }, { x: '21時', y: 40 }] },
];

export function NivoHeatmap() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveHeatMap
        data={data}
        margin={{ top: 40, right: 40, bottom: 40, left: 60 }}
        colors={{ type: 'sequential', scheme: 'blues', minValue: 10, maxValue: 100 }}
        borderWidth={2}
        borderColor="#ffffff"
      />
    </div>
  );
}

'use client';
import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, Tooltip, Legend } from 'chart.js';
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';

ChartJS.register(Tooltip, Legend, MatrixController, MatrixElement);

const days = ['月', '火', '水', '木', '金'];
const hours = ['9時', '12時', '15時', '18時', '21時'];

const matrixData = days.flatMap((day, y) =>
  hours.map((hour, x) => ({ x: hour, y: day, v: Math.floor(Math.random() * 100) }))
);

const data = {
  datasets: [{
    label: 'アクセス数',
    data: matrixData,
    backgroundColor: (ctx: any) => {
      const v = ctx.dataset.data[ctx.dataIndex]?.v ?? 0;
      return `rgba(59, 130, 246, ${v / 100})`;
    },
    borderWidth: 2,
    borderColor: 'white',
    width: ({ chart }: any) => (chart.chartArea?.width || 200) / hours.length - 2,
    height: ({ chart }: any) => (chart.chartArea?.height || 200) / days.length - 2,
  }],
};

export function ChartJSHeatmap() {
  return (
    <Chart type={"matrix" as any} data={data as any}
      options={{ responsive: true, maintainAspectRatio: false }} />
  );
}