import React, { useMemo } from "react"; import PerformanceResult from "./result-card/PerformanceResult"; import EnergyUsage from "./result-card/EnergyUsage"; import { Bar, Line } from "react-chartjs-2"; const ComparisonResult = () => { const options = useMemo( () => ({ responsive: true, maintainAspectRatio: false, plugins: { title: { display: false }, legend: { display: false }, }, scales: { x: { display: false, grid: { display: false } }, y: { display: false, grid: { display: false } }, }, }), [] ); // Color palette const purpleDark = "#6a0dad"; const purpleLight = "#b19cd9"; const throughputData = { labels: ["Layout 1", "Layout 2"], datasets: [ { label: "Throughput (units/hr)", data: [500, 550], backgroundColor: [purpleDark, purpleLight], borderColor: [purpleDark, purpleLight], borderWidth: 1, }, ], }; const cycleTimeData = { labels: ["Layout 1", "Layout 2"], datasets: [ { label: "Cycle Time (sec)", data: [110, 110], backgroundColor: [purpleLight], borderColor: purpleDark, borderWidth: 2, tension: 0.4, fill: false, }, ], }; const downtimeData = { labels: ["Layout 1", "Layout 2"], datasets: [ { label: "Downtime (mins)", data: [17, 12], backgroundColor: [purpleDark, purpleLight], borderColor: [purpleDark, purpleLight], borderWidth: 1, }, ], }; const scrapRateData = { labels: ["Layout 1", "Layout 2"], datasets: [ { label: "Scrap Rate (tons)", data: [2.7, 1.9], backgroundColor: [purpleDark, purpleLight], borderColor: [purpleDark, purpleLight], borderWidth: 1, }, ], }; return (
Performance Comparison

Throughput (units/hr)

Layout 1
500/ hr
Layout 2
550/ hr
Cycle Time
Layout 1
120 Sec
19.6%
Layout 2
110 Sec
1.6%
Overall Downtime
Total down time
(Simulation 1)
17
mins
Overall Scrap Rate
Layout 1
Total scrap produced by
2.7 ton
); }; export default ComparisonResult;