ヒストグラムライブラリ比較

'use client';
// ApexHistogram.tsx（apexcharts 8.7 / react-apexcharts 2.2。ページ側では next/dynamic の ssr: false で読み込む）
import { useState } from 'react';
import Chart from 'react-apexcharts';
import type { ApexOptions } from 'apexcharts';

// サンプルデータ：API の応答時間（ms）1,000 件。乱数の種を固定して、毎回同じ値にする
let seed = 42;
const rand = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
const normal = () => Math.sqrt(-2 * Math.log(rand())) * Math.cos(2 * Math.PI * rand());
const responseTimes = Array.from({ length: 1000 }, (_, i) =>
  Math.round(i % 5 === 0 ? 420 * Math.exp(0.18 * normal()) : 120 * Math.exp(0.3 * normal())),
);

// ビン幅の候補（ms）。どれも範囲（0〜700）を割り切れる値にする
const WIDTHS = [10, 20, 25, 35, 50, 70, 100, 140];

export default function ApexHistogram() {
  const [binWidth, setBinWidth] = useState(25);

  const options: ApexOptions = {
    chart: { type: 'histogram', toolbar: { show: false } },
    // 生データを渡すと、ApexCharts がビンに分けて数える。binWidth を省くと bins: 'auto' で幅が決まる
    plotOptions: { histogram: { binWidth, range: [0, 700] } },
    colors: ['#3b82f6'],
    xaxis: { type: 'numeric', min: 0, max: 700, tickAmount: 7, title: { text: '応答時間（ms）' } },
    yaxis: { title: { text: 'リクエスト数' } },
    // 狭い画面（breakpoint は画面の幅）では、目盛りを減らし、棒の境目の白い線を消す（細い棒が白っぽく見えるため）
    responsive: [{ breakpoint: 640, options: { xaxis: { tickAmount: 2 }, stroke: { width: 0 } } }],
    tooltip: {
      // x はビンの中央の値。既定の見出しは「100 to 125」と英語なので、ビン幅から範囲を作り直す
      x: { formatter: (v: number) => `${v - binWidth / 2}〜${v + binWidth / 2} ms` },
      y: { formatter: (v: number) => `${v} 件` },
    },
  };

  return (
    <div>
      <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        ビン幅
        <input type="range" min={0} max={WIDTHS.length - 1} value={WIDTHS.indexOf(binWidth)}
          onChange={(e) => setBinWidth(WIDTHS[Number(e.target.value)])} />
        {binWidth} ms
      </label>
      {/* react-apexcharts の型の type に histogram が無いので、値は渡したうえで型だけ外す */}
      <Chart
        type={'histogram' as never}
        series={[{ name: 'リクエスト数', data: responseTimes }]}
        options={options}
        height={320}
      />
    </div>
  );
}

'use client';
// PlotlyHistogram.tsx（plotly.js-dist-min 4.2 / react-plotly.js 4.1。ページ側では next/dynamic の ssr: false で読み込む）
import { useState } from 'react';
import createPlotlyComponent from 'react-plotly.js/factory';
import Plotly from 'plotly.js-dist-min';

// react-plotly.js の既定の入口は plotly.js（フル版）を読み込むので、plotly.js-dist-min を渡して作る
const Plot = createPlotlyComponent(Plotly as never);

// サンプルデータ：API の応答時間（ms）1,000 件。乱数の種を固定して、毎回同じ値にする
let seed = 42;
const rand = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
const normal = () => Math.sqrt(-2 * Math.log(rand())) * Math.cos(2 * Math.PI * rand());
const responseTimes = Array.from({ length: 1000 }, (_, i) =>
  Math.round(i % 5 === 0 ? 420 * Math.exp(0.18 * normal()) : 120 * Math.exp(0.3 * normal())),
);

// ビン幅の候補（ms）。どれも範囲（0〜700）を割り切れる値にする
const WIDTHS = [10, 20, 25, 35, 50, 70, 100, 140];

export default function PlotlyHistogram() {
  const [binWidth, setBinWidth] = useState(25);

  return (
    <div>
      <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        ビン幅
        <input type="range" min={0} max={WIDTHS.length - 1} value={WIDTHS.indexOf(binWidth)}
          onChange={(e) => setBinWidth(WIDTHS[Number(e.target.value)])} />
        {binWidth} ms
      </label>
      <Plot
        data={[
          {
            type: 'histogram',
            x: responseTimes,
            // ビンの始まり・終わり・幅。xbins を省くと Plotly が自動で決める（nbinsx で本数の上限を渡せる）
            xbins: { start: 0, end: 700, size: binWidth },
            // histnorm: 'percent' や 'probability density' にすると、件数ではなく割合・密度で描く
            marker: { color: '#3b82f6', line: { color: '#ffffff', width: 1 } },
            // %{x} はビンの範囲（100 - 124 のように出る）
            hovertemplate: '%{x} ms：%{y} 件<extra></extra>',
          },
        ]}
        layout={{
          bargap: 0, // 棒どうしをくっつける
          xaxis: { title: { text: '応答時間（ms）' }, range: [0, 700] },
          yaxis: { title: { text: 'リクエスト数' } },
          margin: { t: 10, r: 10, b: 50, l: 60 },
        }}
        config={{ displayModeBar: false, responsive: true }}
        useResizeHandler
        style={{ width: '100%', height: 320 }}
      />
    </div>
  );
}

'use client';
// RechartsHistogram.tsx（recharts 3.10 / d3-array 3.2）
import { useMemo, useState } from 'react';
import { bin, range } from 'd3-array';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

// サンプルデータ：API の応答時間（ms）1,000 件。乱数の種を固定して、毎回同じ値にする
let seed = 42;
const rand = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
const normal = () => Math.sqrt(-2 * Math.log(rand())) * Math.cos(2 * Math.PI * rand());
const responseTimes = Array.from({ length: 1000 }, (_, i) =>
  Math.round(i % 5 === 0 ? 420 * Math.exp(0.18 * normal()) : 120 * Math.exp(0.3 * normal())),
);

// ビン幅の候補（ms）。どれも範囲（0〜700）を割り切れる値にする
const WIDTHS = [10, 20, 25, 35, 50, 70, 100, 140];

export default function RechartsHistogram() {
  const [binWidth, setBinWidth] = useState(25);

  // Recharts は数えないので、d3-array の bin() でビンに分けてから棒で描く
  const bins = useMemo(() => {
    const binner = bin().domain([0, 700]).thresholds(range(0, 700, binWidth));
    return binner(responseTimes).map((b) => ({
      x: ((b.x0 ?? 0) + (b.x1 ?? 0)) / 2, // 棒はビンの中央に置く
      x0: b.x0 ?? 0, x1: b.x1 ?? 0,
      count: b.length,
    }));
  }, [binWidth]);

  return (
    <div>
      <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        ビン幅
        <input type="range" min={0} max={WIDTHS.length - 1} value={WIDTHS.indexOf(binWidth)}
          onChange={(e) => setBinWidth(WIDTHS[Number(e.target.value)])} />
        {binWidth} ms
      </label>
      <ResponsiveContainer width="100%" height={320}>
        {/* barCategoryGap={0} で、棒どうしをすき間なく並べる */}
        <BarChart data={bins} barCategoryGap={0} margin={{ top: 10, right: 20, bottom: 10, left: 0 }}>
          <CartesianGrid strokeDasharray="3 3" vertical={false} />
          {/* x を数値の軸にして、目盛りを ms の値で打つ（カテゴリの軸だと、目盛りが棒の中央に付く）。狭い幅では等間隔に間引く */}
          <XAxis type="number" dataKey="x" domain={[0, 700]} ticks={[0, 100, 200, 300, 400, 500, 600, 700]} interval="equidistantPreserveStart" />
          <YAxis />
          <Tooltip
            labelFormatter={(_, payload) => {
              const p = payload?.[0]?.payload;
              return p ? `${p.x0}〜${p.x1} ms` : '';
            }}
            formatter={(v) => [`${v} 件`, 'リクエスト数']}
          />
          <Bar dataKey="count" fill="#3b82f6" stroke="#ffffff" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

'use client';
// ChartjsHistogram.tsx（chart.js 4.6 / react-chartjs-2 5.3 / d3-array 3.2）
import { useMemo, useState } from 'react';
import { bin, range } from 'd3-array';
import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, LinearScale, BarElement, Tooltip } from 'chart.js';

ChartJS.register(LinearScale, BarElement, Tooltip);

// サンプルデータ：API の応答時間（ms）1,000 件。乱数の種を固定して、毎回同じ値にする
let seed = 42;
const rand = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
const normal = () => Math.sqrt(-2 * Math.log(rand())) * Math.cos(2 * Math.PI * rand());
const responseTimes = Array.from({ length: 1000 }, (_, i) =>
  Math.round(i % 5 === 0 ? 420 * Math.exp(0.18 * normal()) : 120 * Math.exp(0.3 * normal())),
);

// ビン幅の候補（ms）。どれも範囲（0〜700）を割り切れる値にする
const WIDTHS = [10, 20, 25, 35, 50, 70, 100, 140];

export default function ChartjsHistogram() {
  const [binWidth, setBinWidth] = useState(25);

  // Chart.js も数えないので、d3-array の bin() で数える。棒はビンの中央に置き、範囲はツールチップ用に持たせる
  const points = useMemo(() => {
    const binner = bin().domain([0, 700]).thresholds(range(0, 700, binWidth));
    return binner(responseTimes).map((b) => ({
      x: ((b.x0 ?? 0) + (b.x1 ?? 0)) / 2, y: b.length,
      x0: b.x0 ?? 0, x1: b.x1 ?? 0,
    }));
  }, [binWidth]);

  return (
    <div>
      <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        ビン幅
        <input type="range" min={0} max={WIDTHS.length - 1} value={WIDTHS.indexOf(binWidth)}
          onChange={(e) => setBinWidth(WIDTHS[Number(e.target.value)])} />
        {binWidth} ms
      </label>
      {/* maintainAspectRatio: false のときは、高さを持つ親要素に入れる */}
      <div style={{ height: 320 }}>
        <Bar
          data={{
            datasets: [{
              label: 'リクエスト数',
              data: points,
              backgroundColor: '#3b82f6',
              borderColor: '#ffffff', borderWidth: 1,
              // 棒の幅を間隔いっぱいにして、隣のビンとすき間なく並べる
              barPercentage: 1, categoryPercentage: 1,
            }],
          }}
          options={{
            maintainAspectRatio: false,
            plugins: {
              tooltip: {
                callbacks: {
                  // raw は data に渡した点（x0・x1 を持たせてある）
                  title: (items) => { const p = items[0].raw as { x0: number; x1: number }; return `${p.x0}〜${p.x1} ms`; },
                  label: (item) => `${item.parsed.y} 件`,
                },
              },
            },
            scales: {
              // x を数値の軸にする。offset: false で、棒を目盛りの位置どおりに置く
              x: {
                type: 'linear', min: 0, max: 700, offset: false, grid: { offset: false },
                // Chart.js は目盛りの間隔でも棒の幅を決めるので、目盛りはビン幅の倍数にする（狭いと棒が細くなる）。
                // maxRotation: 0 で、狭い画面ではラベルを斜めにせず間引く
                ticks: { stepSize: binWidth * Math.ceil(100 / binWidth), maxRotation: 0, autoSkipPadding: 12 },
              },
              y: { beginAtZero: true },
            },
          }}
        />
      </div>
    </div>
  );
}