Untitled

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

// Register Chart.js components
ChartJS.register(BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend);

const ChargingSimulation: React.FC = () => {
  // State for inputs
  const [numChargers, setNumChargers] = useState(5);
  const [chargingPower, setChargingPower] = useState(11);
  const [arrivalsPerHour, setArrivalsPerHour] = useState([3, 4, 5]);
  const [consumption, setConsumption] = useState(22);
  const [maxDuration, setMaxDuration] = useState(1);

  // State for results
  const [results, setResults] = useState<{ hour: number; carsCharging: number; totalPower: number }[]>([]);

  // Simulation function
  const simulateChargingPower = () => {
    const chargersOccupied = new Array(numChargers).fill(0);
    const output: { hour: number; carsCharging: number; totalPower: number }[] = [];

    arrivalsPerHour.forEach((arrivals, hour) => {
      // Free up chargers
      for (let i = 0; i < chargersOccupied.length; i++) {
        if (chargersOccupied[i] > 0) chargersOccupied[i] -= 1;
      }

      // Count available chargers
      const availableChargers = chargersOccupied.filter((time) => time === 0).length;

      // Determine cars charging
      const carsCharging = Math.min(arrivals, availableChargers);

      // Calculate total power usage
      const totalPower = carsCharging * chargingPower;

      // Assign chargers
      let carsAssigned = carsCharging;
      for (let i = 0; i < chargersOccupied.length && carsAssigned > 0; i++) {
        if (chargersOccupied[i] === 0) {
          const chargingTime = Math.ceil(consumption / chargingPower);
          chargersOccupied[i] = Math.min(chargingTime, maxDuration);
          carsAssigned--;
        }
      }

      // Add to output
      output.push({ hour: hour + 1, carsCharging, totalPower });
    });

    setResults(output);
  };

  // Data for Chart.js
  const chartData = {
    labels: results.map((r) => `Hour ${r.hour}`),
    datasets: [
      {
        label: 'Total Power (kW)',
        data: results.map((r) => r.totalPower),
        backgroundColor: 'rgba(75, 192, 192, 0.6)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1,
      },
    ],
  };

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Charging Simulation</h1>
      <div className="flex flex-wrap gap-4 mb-6">
        <div>
          <label>Number of Chargers:</label>
          <input
            type="number"
            value={numChargers}
            onChange={(e) => setNumChargers(Number(e.target.value))}
            className="border p-1 w-full"
          />
        </div>
        <div>
          <label>Charging Power (kW):</label>
          <input
            type="number"
            value={chargingPower}
            onChange={(e) => setChargingPower(Number(e.target.value))}
            className="border p-1 w-full"
          />
        </div>
        <div>
          <label>Arrivals Per Hour (comma-separated):</label>
          <input
            type="text"
            value={arrivalsPerHour.join(',')}
            onChange={(e) => setArrivalsPerHour(e.target.value.split(',').map(Number))}
            className="border p-1 w-full"
          />
        </div>
        <div>
          <label>Consumption Per Car (kWh):</label>
          <input
            type="number"
            value={consumption}
            onChange={(e) => setConsumption(Number(e.target.value))}
            className="border p-1 w-full"
          />
        </div>
        <div>
          <label>Max Charging Duration (hours):</label>
          <input
            type="number"
            value={maxDuration}
            onChange={(e) => setMaxDuration(Number(e.target.value))}
            className="border p-1 w-full"
          />
        </div>
      </div>

      <button
        onClick={simulateChargingPower}
        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700"
      >
        Run Simulation
      </button>

      {results.length > 0 && (
        <div className="mt-6">
          <h2 className="text-xl font-bold mb-4">Simulation Results</h2>
          <Bar data={chartData} />
        </div>
      )}
    </div>
  );
};

export default ChargingSimulation;