import React, { useMemo } from "react"; import PerformanceResult from "./result-card/PerformanceResult"; import EnergyUsage from "./result-card/EnergyUsage"; import { Bar, Line, Pie } from "react-chartjs-2"; import { 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 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, borderRadius: 10, // ✅ Rounded all corners (TypeScript-safe) // borderSkipped: "bottom", // ✅ This is allowed by the Chart.js types }, ], }; const cycleTimePieData = { labels: ["Layout 1", "Layout 2"], datasets: [ { label: "Cycle Time (sec)", data: [120, 110], backgroundColor: [purpleDark, purpleLight], borderColor: "#fff", borderWidth: 2, }, ], }; const downtimeData = { labels: ["Layout 1", "Layout 2"], datasets: [ { label: "Downtime (mins)", data: [17, 12], backgroundColor: [purpleDark, purpleLight], borderColor: [purpleDark, purpleLight], borderWidth: 1, borderRadius: 10, borderSkipped: false, }, ], }; 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, borderRadius: 10, borderSkipped: false, }, ], }; return (