ゲージチャートライブラリ比較

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

export function EChartsGauge() {
  const option = {
    series: [{
      type: 'gauge',
      min: 0,
      max: 100,
      progress: { show: true, width: 18 },
      axisLine: { lineStyle: { width: 18 } },
      axisTick: { show: false },
      splitLine: { length: 15, lineStyle: { width: 2 } },
      axisLabel: { distance: 25 },
      pointer: { show: true },
      detail: {
        valueAnimation: true,
        formatter: '{value}%',
        fontSize: 24,
      },
      data: [{ value: 72, name: 'CPU使用率' }],
    }],
  };
  return <ReactECharts option={option} style={{ height: 360 }} />;
}

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

export function PlotlyGauge() {
  return (
    <Plot
      data={[{
        type: 'indicator',
        mode: 'gauge+number',
        value: 72,
        title: { text: 'CPU使用率', font: { size: 16 } },
        gauge: {
          axis: { range: [0, 100] },
          bar: { color: '#4f86c6' },
          steps: [
            { range: [0, 50],   color: '#e2f0fb' },
            { range: [50, 75],  color: '#b8d9f5' },
            { range: [75, 100], color: '#fde8e8' },
          ],
          threshold: {
            line: { color: '#ef4444', width: 4 },
            thickness: 0.75,
            value: 90,
          },
        },
        number: { suffix: '%' },
      }]}
      layout={{
        margin: { t: 60, b: 20, l: 40, r: 40 },
        height: 360,
        paper_bgcolor: 'transparent',
      }}
      config={{ displayModeBar: false }}
      style={{ width: '100%' }}
    />
  );
}

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

export function ApexGauge() {
  const series = [72];
  const options = {
    chart: { type: 'radialBar' as const },
    plotOptions: {
      radialBar: {
        startAngle: -135,
        endAngle: 135,
        hollow: { size: '60%' },
        dataLabels: {
          name: { fontSize: '16px', offsetY: -10 },
          value: {
            fontSize: '28px',
            formatter: (val: number) => `${val}%`,
            offsetY: 5,
          },
        },
      },
    },
    labels: ['CPU使用率'],
    colors: ['#4f86c6'],
  };
  return (
    <ApexChart
      type="radialBar"
      series={series}
      options={options}
      height={360}
      width="100%"
    />
  );
}

'use client';
import { ResponsivePie } from '@nivo/pie';

// Nivoには専用のゲージコンポーネントがないため、
// @nivo/pie の半円表示で擬似的にゲージを実現する
export function NivoGauge() {
  const value = 72;
  const remaining = 100 - value;

  const data = [
    { id: 'value',     value,          color: '#4f86c6' },
    { id: 'remaining', value: remaining, color: '#e5e7eb' },
  ];

  return (
    <div style={{ height: 360, position: 'relative' }}>
      <ResponsivePie
        data={data}
        startAngle={-90}
        endAngle={90}
        innerRadius={0.7}
        padAngle={1}
        colors={d => d.data.color}
        enableArcLabels={false}
        enableArcLinkLabels={false}
        isInteractive={false}
        margin={{ top: 20, bottom: 0, left: 20, right: 20 }}
      />
      <div style={{
        position: 'absolute',
        bottom: '28%',
        width: '100%',
        textAlign: 'center',
      }}>
        <div style={{ fontSize: 32, fontWeight: 700 }}>{value}%</div>
        <div style={{ fontSize: 14, color: '#6b7280' }}>CPU使用率</div>
      </div>
    </div>
  );
}