鉄道物流の新たな潮流：資金調達を進めるスタートアップ10社

import React, { useState } from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  PointElement,
  ArcElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar, Line, Pie } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  PointElement,
  ArcElement,
  Title,
  Tooltip,
  Legend
);

const Dashboard = () => {
  const [activeTab, setActiveTab] = useState('overview');

  const overviewData = {
    labels: ['2021', '2022', '2023', '2024', '2025'],
    datasets: [
      {
        label: '鉄道物流市場規模（億ドル）',
        data: [19950, 21147, 22436, 23782, 25209],
        backgroundColor: 'rgba(75, 192, 192, 0.6)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1,
      },
    ],
  };

  const startupFundingData = {
    labels: ['2021', '2022', '2023'],
    datasets: [
      {
        label: 'ロジスティクススタートアップへの資金調達額（億ドル）',
        data: [256, 145, 29],
        backgroundColor: 'rgba(255, 99, 132, 0.6)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1,
      },
    ],
  };

  const topStartups = [
    { name: 'Union Pacific', funding: '248.7億ドル（2022年の年収）' },
    { name: 'Wabtec Corporation', funding: '83.6億ドル（2022年の年収）' },
    { name: 'Iowa Northern Railway Company', funding: '1,310万ドル' },
    { name: 'Cathcart Rail', funding: '非公開' },
    { name: 'Fastfrate', funding: '非公開' },
    { name: 'TNW', funding: '非公開' },
    { name: 'IAISRR', funding: '非公開' },
    { name: 'Pan Am Railways', funding: '非公開' },
    { name: 'Florida East Coast Railway', funding: '非公開' },
    { name: 'International Rail Partners', funding: '1,460万ドル' },
  ];

  const industryTrendsData = {
    labels: ['自動運転列車', '鉄道の脱炭素化', '高速鉄道', '高度な鉄道通信技術', '人工知能の活用'],
    datasets: [
      {
        data: [30, 25, 20, 15, 10],
        backgroundColor: [
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)',
          'rgba(153, 102, 255, 0.6)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-8 text-center">鉄道物流スタートアップ分析ダッシュボード</h1>
      
      <div className="mb-8">
        <div className="flex justify-center space-x-4">
          {['overview', 'startups', 'trends'].map((tab) => (
            <button
              key={tab}
              className={`px-4 py-2 rounded ${activeTab === tab ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
              onClick={() => setActiveTab(tab)}
            >
              {tab === 'overview' ? '概要' : tab === 'startups' ? 'スタートアップ' : '業界トレンド'}
            </button>
          ))}
        </div>
      </div>

      {activeTab === 'overview' && (
        <div>
          <h2 className="text-2xl font-semibold mb-4">鉄道物流市場の成長</h2>
          <div className="mb-8 h-64">
            <Line data={overviewData} options={{ responsive: true, maintainAspectRatio: false }} />
          </div>
          <p className="mb-4">
            鉄道物流市場は2021年に1兆9,950億ドルと評価され、2031年までに3兆5,797億ドルに達すると予測されています。
            年平均成長率（CAGR）は6.1%と見込まれています。
          </p>
          <h2 className="text-2xl font-semibold mb-4">ロジスティクススタートアップへの投資動向</h2>
          <div className="mb-8 h-64">
            <Bar data={startupFundingData} options={{ responsive: true, maintainAspectRatio: false }} />
          </div>
          <p className="mb-4">
            2021年に256億ドルのピークを迎えたロジスティクススタートアップへの投資は、
            2023年には29億ドルまで減少しました。これは約90%の減少を示しています。
          </p>
        </div>
      )}

      {activeTab === 'startups' && (
        <div>
          <h2 className="text-2xl font-semibold mb-4">注目の鉄道物流スタートアップ</h2>
          <div className="overflow-x-auto">
            <table className="min-w-full bg-white">
              <thead className="bg-gray-100">
                <tr>
                  <th className="px-4 py-2 text-left">企業名</th>
                  <th className="px-4 py-2 text-left">資金調達額/年収</th>
                </tr>
              </thead>
              <tbody>
                {topStartups.map((startup, index) => (
                  <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : ''}>
                    <td className="px-4 py-2">{startup.name}</td>
                    <td className="px-4 py-2">{startup.funding}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p className="mt-4">
            これらのスタートアップは、鉄道物流業界に革新をもたらし、効率性と持続可能性を向上させることを目指しています。
          </p>
        </div>
      )}

      {activeTab === 'trends' && (
        <div>
          <h2 className="text-2xl font-semibold mb-4">鉄道業界の主要トレンド</h2>
          <div className="mb-8 h-96">
            <Pie data={industryTrendsData} options={{ responsive: true, maintainAspectRatio: false }} />
          </div>
          <ul className="list-disc pl-5">
            <li>自動運転列車: 高度なセンサー技術とリアルタイムデータ伝送により、運行の効率化を実現</li>
            <li>鉄道の脱炭素化: バッテリー技術や水素燃料電池の導入によるCO2排出量の削減</li>
            <li>高速鉄道: 都市間の移動時間短縮と経済成長の促進</li>
            <li>高度な鉄道通信技術: 5G技術を活用した低遅延通信システムの導入</li>
            <li>人工知能の活用: メンテナンスの予測やスケジュールの最適化、顧客サービスの向上</li>
          </ul>
        </div>
      )}
    </div>
  );
};

export default Dashboard;