倉庫内物流の革新を牽引する最新スタートアップ10社

import React, { useState, useEffect } from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, Cell } from 'recharts';

const startupsData = [
  { name: 'Omnipack', funding: 10.73, year: 2017, country: 'ポーランド', employees: '101-250' },
  { name: 'e-Shang Redwood', funding: 1039.30, year: 2016, country: '香港', employees: '101-250' },
  { name: 'Cargamos.com', funding: 5.30, year: 2019, country: 'メキシコ', employees: '51-100' },
  { name: 'everstox', funding: 3.00, year: 2019, country: 'ドイツ', employees: '11-50' },
  { name: 'Delhivery', funding: 1236.57, year: 2011, country: 'インド', employees: '5001-10000' },
  { name: 'WareIQ', funding: 1.80, year: 2019, country: 'インド', employees: '1-10' },
  { name: 'Arya Collateral', funding: 28.93, year: 1982, country: 'インド', employees: '51-100' },
  { name: 'Nice Tuan', funding: 1298.61, year: 2018, country: '中国', employees: '11-50' },
  { name: 'Mech-Mind', funding: 79.04, year: 2016, country: '中国', employees: '251-500' },
  { name: 'Lineage Logistics', funding: 7000.00, year: 2012, country: 'アメリカ', employees: '10001+' }
];

const COLORS = ['#8884d8', '#82ca9d', '#ffc658', '#ff7300', '#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#a4de6c', '#d0ed57'];

const Dashboard = () => {
  const [sortBy, setSortBy] = useState('funding');
  const [sortedData, setSortedData] = useState([]);
  const [totalFunding, setTotalFunding] = useState(0);

  useEffect(() => {
    const sorted = [...startupsData].sort((a, b) => b[sortBy] - a[sortBy]);
    setSortedData(sorted);
    const total = startupsData.reduce((sum, startup) => sum + startup.funding, 0);
    setTotalFunding(total);
  }, [sortBy]);

  const formatFunding = (value) => {
    return value >= 1000 ? `${(value / 1000).toFixed(2)}B` : `${value.toFixed(2)}M`;
  };

  return (
    <div className="p-6 bg-gray-100">
      <h1 className="text-3xl font-bold mb-6 text-center">倉庫内物流スタートアップ資金調達ダッシュボード</h1>
      <p className="mb-4 text-center">以下は、倉庫内物流の領域で資金調達をしている最新のスタートアップのデータです。</p>
      
      <div className="mb-4 flex justify-between items-center">
        <div>
          <label htmlFor="sortSelect" className="mr-2">ソート基準:</label>
          <select 
            id="sortSelect" 
            value={sortBy} 
            onChange={(e) => setSortBy(e.target.value)}
            className="p-2 border rounded"
          >
            <option value="funding">資金調達額</option>
            <option value="year">設立年</option>
          </select>
        </div>
        <div className="text-xl font-bold">
          総資金調達額: {formatFunding(totalFunding)}
        </div>
      </div>

      <ResponsiveContainer width="100%" height={500}>
        <BarChart data={sortedData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
          <XAxis dataKey="name" angle={-45} textAnchor="end" interval={0} height={100} />
          <YAxis label={{ value: '資金調達額 (百万ドル)', angle: -90, position: 'insideLeft' }} />
          <Tooltip formatter={(value) => `${formatFunding(value)}`} />
          <Legend />
          <Bar dataKey="funding" name="資金調達額">
            {sortedData.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>

      <div className="mt-8">
        <h2 className="text-2xl font-bold mb-4">スタートアップ詳細情報</h2>
        <div className="overflow-x-auto">
          <table className="min-w-full bg-white border border-gray-300">
            <thead>
              <tr className="bg-gray-100">
                <th className="p-2 border">企業名</th>
                <th className="p-2 border">資金調達額</th>
                <th className="p-2 border">設立年</th>
                <th className="p-2 border">国</th>
                <th className="p-2 border">従業員数</th>
              </tr>
            </thead>
            <tbody>
              {sortedData.map((startup, index) => (
                <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : ''}>
                  <td className="p-2 border">{startup.name}</td>
                  <td className="p-2 border text-right">{formatFunding(startup.funding)}</td>
                  <td className="p-2 border text-center">{startup.year}</td>
                  <td className="p-2 border">{startup.country}</td>
                  <td className="p-2 border text-center">{startup.employees}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <p className="mt-6 text-sm text-gray-600">
        データソース: <a href="https://www.failory.com/startups/warehousing" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Failory - Top 16 Warehousing Startups in 2024</a>
      </p>
    </div>
  );
};

export default Dashboard;