2025-05-28 04:24:16 +00:00
|
|
|
import React, { useMemo } from "react";
|
2025-05-27 12:46:11 +00:00
|
|
|
import PerformanceResult from "./result-card/PerformanceResult";
|
|
|
|
import EnergyUsage from "./result-card/EnergyUsage";
|
2025-06-11 04:22:40 +00:00
|
|
|
import { Bar, Line, Pie } from "react-chartjs-2";
|
2025-06-12 06:34:45 +00:00
|
|
|
import { useCompareProductDataStore } from "../../../store/builder/store";
|
|
|
|
import { useComparisonProduct, useMainProduct } from "../../../store/simulation/useSimulationStore";
|
2025-05-27 12:46:11 +00:00
|
|
|
|
|
|
|
const ComparisonResult = () => {
|
2025-06-12 06:34:45 +00:00
|
|
|
const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
|
|
|
|
const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
|
|
|
|
const { mainProduct } = useMainProduct();
|
2025-05-28 04:24:16 +00:00
|
|
|
const options = useMemo(
|
|
|
|
() => ({
|
|
|
|
responsive: true,
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
plugins: {
|
2025-06-10 06:19:30 +00:00
|
|
|
title: { display: false },
|
|
|
|
legend: { display: false },
|
2025-05-28 04:24:16 +00:00
|
|
|
},
|
|
|
|
scales: {
|
2025-06-10 06:19:30 +00:00
|
|
|
x: { display: false, grid: { display: false } },
|
|
|
|
y: { display: false, grid: { display: false } },
|
2025-05-28 04:24:16 +00:00
|
|
|
},
|
|
|
|
}),
|
|
|
|
[]
|
|
|
|
);
|
2025-06-10 06:19:30 +00:00
|
|
|
|
|
|
|
// 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,
|
2025-06-11 04:22:40 +00:00
|
|
|
borderRadius: 10, // ✅ Rounded all corners (TypeScript-safe)
|
|
|
|
// borderSkipped: "bottom", // ✅ This is allowed by the Chart.js types
|
2025-06-10 06:19:30 +00:00
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
2025-06-11 04:22:40 +00:00
|
|
|
|
|
|
|
const cycleTimePieData = {
|
2025-06-10 06:19:30 +00:00
|
|
|
labels: ["Layout 1", "Layout 2"],
|
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
label: "Cycle Time (sec)",
|
2025-06-11 04:22:40 +00:00
|
|
|
data: [120, 110],
|
|
|
|
backgroundColor: [purpleDark, purpleLight],
|
|
|
|
borderColor: "#fff",
|
2025-06-10 06:19:30 +00:00
|
|
|
borderWidth: 2,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
const downtimeData = {
|
|
|
|
labels: ["Layout 1", "Layout 2"],
|
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
label: "Downtime (mins)",
|
|
|
|
data: [17, 12],
|
|
|
|
backgroundColor: [purpleDark, purpleLight],
|
|
|
|
borderColor: [purpleDark, purpleLight],
|
|
|
|
borderWidth: 1,
|
2025-06-11 04:22:40 +00:00
|
|
|
borderRadius: 10,
|
|
|
|
borderSkipped: false,
|
2025-06-10 06:19:30 +00:00
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
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,
|
2025-06-11 04:22:40 +00:00
|
|
|
borderRadius: 10,
|
|
|
|
borderSkipped: false,
|
2025-06-10 06:19:30 +00:00
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
2025-05-27 12:46:11 +00:00
|
|
|
return (
|
|
|
|
<div className="compare-result-container">
|
|
|
|
<div className="header">Performance Comparison</div>
|
|
|
|
<div className="compare-result-wrapper">
|
|
|
|
<EnergyUsage />
|
|
|
|
<div className="throughPutCard-container comparisionCard">
|
|
|
|
<h4>Throughput (units/hr)</h4>
|
|
|
|
<div className="layers-wrapper">
|
|
|
|
<div className="layer-wrapper">
|
|
|
|
<div className="key">Layout 1</div>
|
|
|
|
<div className="value">500/ hr</div>
|
|
|
|
</div>
|
|
|
|
<div className="layer-wrapper">
|
|
|
|
<div className="key">Layout 2</div>
|
|
|
|
<div className="value">550/ hr</div>
|
|
|
|
</div>
|
2025-06-11 04:22:40 +00:00
|
|
|
<div className="chart">
|
|
|
|
<Bar data={throughputData} options={options} />
|
|
|
|
</div>
|
2025-06-10 06:19:30 +00:00
|
|
|
</div>
|
2025-05-27 12:46:11 +00:00
|
|
|
</div>
|
2025-06-10 06:19:30 +00:00
|
|
|
|
2025-05-27 12:46:11 +00:00
|
|
|
<div className="cycle-time-container comparisionCard">
|
|
|
|
<div className="cycle-main">
|
|
|
|
<div className="cycle-header">Cycle Time</div>
|
|
|
|
<div className="layers-wrapper">
|
|
|
|
<div className="layers">
|
|
|
|
<div className="layer-name">Layout 1</div>
|
|
|
|
<div className="layer-time">120 Sec</div>
|
|
|
|
<div className="layer-profit">
|
|
|
|
<span>↑</span>19.6%
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="layers">
|
|
|
|
<div className="layer-name">Layout 2</div>
|
|
|
|
<div className="layer-time">110 Sec</div>
|
|
|
|
<div className="layer-profit">
|
2025-06-10 06:19:30 +00:00
|
|
|
<span>↑</span>1.6%
|
2025-05-27 12:46:11 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2025-06-10 06:19:30 +00:00
|
|
|
<div className="chart">
|
2025-06-11 04:22:40 +00:00
|
|
|
<Pie data={cycleTimePieData} options={options} />
|
2025-06-10 06:19:30 +00:00
|
|
|
</div>
|
2025-05-27 12:46:11 +00:00
|
|
|
</div>
|
2025-06-10 06:19:30 +00:00
|
|
|
|
2025-05-27 12:46:11 +00:00
|
|
|
<div className="overallDowntime-container comparisionCard">
|
|
|
|
<div className="overallDowntime-header">Overall Downtime</div>
|
2025-05-28 04:24:16 +00:00
|
|
|
<div className="totalDownTime-wrapper">
|
|
|
|
<div className="totalDownTime">
|
|
|
|
<div className="totalDownTime-right">
|
|
|
|
<div className="totalDownTime-label">Total down time</div>
|
|
|
|
<div className="totalDownTime-subLabel">(Simulation 1)</div>
|
|
|
|
</div>
|
|
|
|
<div className="totalDownTime-left">
|
|
|
|
<div className="value">17</div>
|
|
|
|
<div className="key">mins</div>
|
|
|
|
</div>
|
2025-05-27 12:46:11 +00:00
|
|
|
</div>
|
2025-05-28 05:27:10 +00:00
|
|
|
<div className="chart">
|
2025-06-10 06:19:30 +00:00
|
|
|
<Bar data={downtimeData} options={options} />
|
2025-05-28 05:27:10 +00:00
|
|
|
</div>
|
2025-05-27 12:46:11 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="overallScrapRate comparisionCard">
|
2025-06-12 06:34:45 +00:00
|
|
|
<div className="overallScrapRate-header">Production Capacity</div>
|
2025-05-28 04:24:16 +00:00
|
|
|
<div className="overallScrapRate-wrapper">
|
|
|
|
<div className="overallScrapRate-value">
|
|
|
|
<div className="overallScrapRate-label">Layout 1</div>
|
2025-06-10 06:19:30 +00:00
|
|
|
<div className="overallScrapRate-key">Total scrap produced by</div>
|
2025-05-28 04:24:16 +00:00
|
|
|
<div className="overallScrapRateKey-value">2.7 ton</div>
|
|
|
|
</div>
|
|
|
|
<div className="chart">
|
2025-06-10 06:19:30 +00:00
|
|
|
<Bar data={scrapRateData} options={options} />
|
2025-05-28 04:24:16 +00:00
|
|
|
</div>
|
2025-05-27 12:46:11 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2025-06-10 06:19:30 +00:00
|
|
|
|
2025-05-27 12:46:11 +00:00
|
|
|
<PerformanceResult />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ComparisonResult;
|