Untitled
unknown
plain_text
5 months ago
4.4 kB
3
Indexable
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;
Editor is loading...
Leave a Comment