ボックスプロットライブラリ比較

'use client';
import { ResponsiveBoxPlot } from '@nivo/boxplot';

const data = [
  { group: '営業部', subGroup: '月次売上', n: 50, mean: 1100,
    extrema: [820, 1450], quantiles: [0.1, 0.25, 0.5, 0.75, 0.9],
    values: [820, 950, 1100, 1280, 1450] },
  { group: 'マーケ部', subGroup: '月次売上', n: 50, mean: 900,
    extrema: [600, 1200], quantiles: [0.1, 0.25, 0.5, 0.75, 0.9],
    values: [600, 780, 920, 1050, 1200] },
];

export function NivoBoxPlot() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveBoxPlot
        data={data as any}
        groupBy="group"
        subGroupBy="subGroup"
        value="value"
        quantiles={[0.1, 0.25, 0.5, 0.75, 0.9]}
        margin={{ top: 20, right: 20, bottom: 60, left: 70 }}
        padding={0.3}
        colorBy="group"
        colors={{ scheme: 'category10' }}
        borderRadius={2}
        borderWidth={1.5}
        medianWidth={2}
        whiskerEndSize={0.6}
      />
    </div>
  );
}

'use client';
// D3.js カスタム SVG ボックスプロット
const data = [
  { group: '営業部', min: 820, q1: 950, median: 1100, q3: 1280, max: 1450, outliers: [620, 1680] },
  { group: 'マーケ部', min: 600, q1: 780, median: 920, q3: 1050, max: 1200, outliers: [380, 1420] },
];

export function D3BoxPlot() {
  const viewBoxWidth = 400, viewBoxHeight = 300;
  const margin = { top: 20, right: 20, bottom: 60, left: 60 };
  const width = viewBoxWidth - margin.left - margin.right;
  const height = viewBoxHeight - margin.top - margin.bottom;
  const yMin = 200, yMax = 2000;
  const yScale = (v: number) => ((yMax - v) / (yMax - yMin)) * height;
  const bandWidth = width / data.length;
  const boxW = bandWidth * 0.4;
  const cx = (i: number) => i * bandWidth + bandWidth / 2;
  const colors = ['#3b82f6', '#10b981'];

  return (
    <svg viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`} className="w-full h-full">
      <g transform={`translate(${margin.left}, ${margin.top})`}>
        {data.map((d, i) => (
          <g key={d.group}>
            <line x1={cx(i)} x2={cx(i)} y1={yScale(d.max)} y2={yScale(d.min)} stroke={colors[i]} strokeWidth={1.5} />
            <rect x={cx(i) - boxW / 2} y={yScale(d.q3)} width={boxW}
              height={yScale(d.q1) - yScale(d.q3)} fill={colors[i]} fillOpacity={0.25}
              stroke={colors[i]} strokeWidth={1.5} rx={2} />
            <line x1={cx(i) - boxW / 2} x2={cx(i) + boxW / 2}
              y1={yScale(d.median)} y2={yScale(d.median)} stroke={colors[i]} strokeWidth={2.5} />
            {d.outliers.map((o, j) => (
              <circle key={j} cx={cx(i)} cy={yScale(o)} r={4} fill="none" stroke={colors[i]} strokeWidth={1.5} />
            ))}
            <text x={cx(i)} y={height + 20} textAnchor="middle" fontSize={11} fill="#6b7280">{d.group}</text>
          </g>
        ))}
      </g>
    </svg>
  );
}

'use client';
import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js';
import { BoxPlotController, BoxAndWiskers } from '@sgratzl/chartjs-chart-boxplot';

ChartJS.register(CategoryScale, LinearScale, Tooltip, Legend, BoxPlotController, BoxAndWiskers);

const data = {
  labels: ['営業部', 'マーケ部', 'CSS部', 'パートナー部'],
  datasets: [{
    label: '月次売上分布',
    data: [
      { min: 820, q1: 950, median: 1100, q3: 1280, max: 1450, outliers: [620, 1680] },
      { min: 600, q1: 780, median: 920, q3: 1050, max: 1200, outliers: [380, 1420] },
      { min: 700, q1: 860, median: 980, q3: 1120, max: 1300, outliers: [500] },
      { min: 900, q1: 1050, median: 1200, q3: 1380, max: 1550, outliers: [1800] },
    ],
    backgroundColor: ['rgba(59,130,246,0.3)', 'rgba(16,185,129,0.3)', 'rgba(245,158,11,0.3)', 'rgba(139,92,246,0.3)'],
    borderColor: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6'],
    borderWidth: 1.5,
  }],
};

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

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

export function ApexBoxPlot() {
  const options = {
    chart: { type: 'boxPlot' as const, toolbar: { show: false } },
    colors: ['#3b82f6', '#10b981'],
    plotOptions: {
      boxPlot: {
        colors: { upper: 'rgba(59,130,246,0.3)', lower: 'rgba(16,185,129,0.3)' },
      },
    },
    xaxis: { type: 'category' as const },
    tooltip: { shared: false },
    dataLabels: { enabled: false },
  };
  const series = [{
    type: 'boxPlot',
    data: [
      { x: '営業部',       y: [820, 950, 1100, 1280, 1450] },
      { x: 'マーケ部',     y: [600, 780,  920, 1050, 1200] },
      { x: 'CS部',         y: [700, 860,  980, 1120, 1300] },
      { x: 'パートナー部', y: [900, 1050, 1200, 1380, 1550] },
    ],
  }];
  return <Chart type="boxPlot" options={options} series={series} height={300} width="100%" />;
}