import React, { useEffect, useMemo, useState } from "react"; import PerformanceResult from "./result-card/PerformanceResult"; import EnergyUsage from "./result-card/EnergyUsage"; import { Bar, Line, Pie } from "react-chartjs-2"; import { CompareProduct, useCompareProductDataStore } from "../../../store/builder/store"; import { useComparisonProduct, useMainProduct } from "../../../store/simulation/useSimulationStore"; const ComparisonResult = () => { const { compareProductsData, setCompareProductsData } = useCompareProductDataStore(); const { comparisonProduct, setComparisonProduct } = useComparisonProduct(); const { mainProduct } = useMainProduct(); const [comparedProducts, setComparedProducts] = useState<[CompareProduct, CompareProduct] | []>([]); useEffect(() => { if (compareProductsData.length > 0 && mainProduct && comparisonProduct) { const mainProductData = compareProductsData.find( (product) => product.productUuid === mainProduct.productUuid ); const comparisonProductData = compareProductsData.find( (product) => product.productUuid === comparisonProduct.productUuid ); if (mainProductData && comparisonProductData) { setComparedProducts([mainProductData, comparisonProductData]); } else { setComparedProducts([]); } } else { setComparedProducts([]); } }, [compareProductsData, mainProduct, comparisonProduct]); useEffect(() => { if (comparedProducts.length === 2) { } }, [comparedProducts]); 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: [comparedProducts[0]?.productName, comparedProducts[1]?.productName], datasets: [ { label: "Throughput (units/hr)", data: [comparedProducts[0]?.simulationData.throughputData, comparedProducts[1]?.simulationData.throughputData], backgroundColor: [purpleDark, purpleLight], borderColor: [purpleDark, purpleLight], borderWidth: 1, borderRadius: 10, // ✅ Rounded all corners (TypeScript-safe) // borderSkipped: "bottom", // ✅ This is allowed by the Chart.js types }, ], }; const cycleTimePieData = { labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName], datasets: [ { label: "Cycle Time (sec)", data: [comparedProducts[0]?.simulationData.machineActiveTime, comparedProducts[1]?.simulationData.machineActiveTime], backgroundColor: [purpleDark, purpleLight], borderColor: "#fff", borderWidth: 2, }, ], }; const downtimeData = { labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName], datasets: [ { label: "Downtime (mins)", data: [comparedProducts[0]?.simulationData.machineIdleTime, comparedProducts[1]?.simulationData.machineIdleTime], backgroundColor: [purpleDark, purpleLight], borderColor: "#fff", borderWidth: 2, }, ], }; const productionCapacityData = { labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName], datasets: [ { label: "Production Capacity (units)", data: [comparedProducts[0]?.simulationData.productionCapacity, comparedProducts[1]?.simulationData.productionCapacity], backgroundColor: [purpleDark, purpleLight], borderColor: [purpleDark, purpleLight], borderWidth: 1, borderRadius: 10, borderSkipped: false, }, ], }; const highestProductivityProduct = (comparedProducts[0]?.simulationData?.productionCapacity ?? 0) > (comparedProducts[1]?.simulationData?.productionCapacity ?? 0) ? comparedProducts[0] : comparedProducts[1]; const product1CyclePercentage = (comparedProducts[0]?.simulationData?.machineActiveTime ?? 0) / ((compareProductsData[0]?.simulationData?.machineActiveTime ?? 0) + (compareProductsData[0]?.simulationData?.machineIdleTime ?? 0)) * 100; const product2CyclePercentage = ((comparedProducts[1]?.simulationData?.machineActiveTime ?? 0) / ((compareProductsData[1]?.simulationData?.machineActiveTime ?? 0) + (compareProductsData[1]?.simulationData?.machineIdleTime ?? 0))) * 100; const product1IdlePercentage = (comparedProducts[0]?.simulationData?.machineIdleTime ?? 0) / ((compareProductsData[0]?.simulationData?.machineActiveTime ?? 0) + (compareProductsData[0]?.simulationData?.machineIdleTime ?? 0)) * 100; const product2IdlePercentage = ((comparedProducts[1]?.simulationData?.machineIdleTime ?? 0) / ((compareProductsData[1]?.simulationData?.machineActiveTime ?? 0) + (compareProductsData[1]?.simulationData?.machineIdleTime ?? 0))) * 100; return (
Performance Comparison

Throughput (units/hr)

{comparedProducts[0]?.productName}
{comparedProducts[0]?.simulationData.throughputData}/ hr
{comparedProducts[1]?.productName}
{comparedProducts[1]?.simulationData.throughputData}/ hr
Cycle Time
{comparedProducts[0]?.productName}
{compareProductsData[0]?.simulationData.machineActiveTime} Sec
{(100 - product1CyclePercentage).toFixed(2)}%
{comparedProducts[1]?.productName}
{compareProductsData[1]?.simulationData.machineActiveTime} Sec
{(100 - product2CyclePercentage).toFixed(2)}%
Overall Downtime
{comparedProducts[0]?.productName}
{compareProductsData[0]?.simulationData.machineIdleTime} Sec
{(100 - product1IdlePercentage).toFixed(2)}%
{comparedProducts[1]?.productName}
{compareProductsData[1]?.simulationData.machineIdleTime} Sec
{(100 - product2IdlePercentage).toFixed(2)}%
{/*
Overall Downtime
Total down time
(Simulation 1)
17
mins
*/}
Production Capacity
{highestProductivityProduct?.productName}
Total product produced
{highestProductivityProduct?.simulationData.productionCapacity}
{ comparedProducts.length === 2 &&}
); }; export default ComparisonResult;