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

'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 }} />
  );
}

'use client';
import dynamic from 'next/dynamic';
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });

export function PlotlyHeatmap() {
  return (
    <Plot
      data={[{
        type: 'heatmap',
        x: ['月', '火', '水', '木', '金'],
        y: ['午前', '午後', '夜間'],
        z: [
          [10, 20, 30, 25, 15],
          [30, 40, 50, 45, 35],
          [20, 15, 25, 20, 10],
        ],
        colorscale: 'Blues',
      }]}
      layout={{ title: { text: '時間帯別アクセス数' }, height: 300, margin: { t: 40, b: 40, l: 60, r: 20 } }}
      style={{ width: '100%' }}
      config={{ responsive: true }}
    />
  );
}

'use client';
import dynamic from 'next/dynamic';
const ReactECharts = dynamic(() => import('echarts-for-react'), { ssr: false });

export function EChartsHeatmap() {
  const option = {
    tooltip: { position: 'top' },
    xAxis: { type: 'category', data: ['月', '火', '水', '木', '金'] },
    yAxis: { type: 'category', data: ['午前', '午後', '夜間'] },
    visualMap: { min: 0, max: 50, calculable: true, orient: 'horizontal', left: 'center', bottom: 0 },
    series: [{
      type: 'heatmap',
      data: [
        [0,0,10],[1,0,20],[2,0,30],[3,0,25],[4,0,15],
        [0,1,30],[1,1,40],[2,1,50],[3,1,45],[4,1,35],
        [0,2,20],[1,2,15],[2,2,25],[3,2,20],[4,2,10],
      ],
      label: { show: true },
    }],
  };
  return <ReactECharts option={option} style={{ height: 300 }} />;
}

'use client';
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

export function ApexHeatmap() {
  const options = {
    chart: { type: 'heatmap' as const, toolbar: { show: false } },
    dataLabels: { enabled: false },
    colors: ['#3b82f6'],
    xaxis: { categories: ['9時', '12時', '15時', '18時', '21時'] },
    tooltip: { y: { formatter: (val: number) => `${val} アクセス` } },
  };
  const series = [
    { name: '月', data: [45, 80, 62, 35, 20] },
    { name: '火', data: [38, 75, 58, 42, 25] },
    { name: '水', data: [52, 90, 70, 48, 30] },
    { name: '木', data: [41, 68, 55, 38, 18] },
    { name: '金', data: [60, 95, 78, 55, 40] },
  ];
  return <Chart type="heatmap" options={options} series={series} height={300} width="100%" />;
}