added comparsion data
This commit is contained in:
@@ -1,15 +1,103 @@
|
||||
import { useProductContext } from '../../../modules/simulation/products/productContext'
|
||||
import RegularDropDown from '../../ui/inputs/RegularDropDown';
|
||||
import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from '../../../store/builder/store';
|
||||
import useModuleStore from '../../../store/useModuleStore';
|
||||
import CompareLayOut from '../../ui/compareVersion/CompareLayOut';
|
||||
import ComparisonResult from '../../ui/compareVersion/ComparisonResult';
|
||||
import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore';
|
||||
import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useVersionHistoryStore } from '../../../store/builder/useVersionHistoryStore';
|
||||
import { useVersionContext } from '../../../modules/builder/version/versionContext';
|
||||
import { useSceneContext } from '../../../modules/scene/sceneContext';
|
||||
import { useProductContext } from "../../../modules/simulation/products/productContext";
|
||||
import RegularDropDown from "../../ui/inputs/RegularDropDown";
|
||||
import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from "../../../store/builder/store";
|
||||
import useModuleStore from "../../../store/useModuleStore";
|
||||
import CompareLayOut from "../../ui/compareVersion/CompareLayOut";
|
||||
import ComparisonResult from "../../ui/compareVersion/ComparisonResult";
|
||||
import { useComparisonProduct, useMainProduct } from "../../../store/simulation/useSimulationStore";
|
||||
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useVersionHistoryStore } from "../../../store/builder/useVersionHistoryStore";
|
||||
import { useVersionContext } from "../../../modules/builder/version/versionContext";
|
||||
import { useSceneContext } from "../../../modules/scene/sceneContext";
|
||||
import { useSimulationManager } from "../../../store/rough/useSimulationManagerStore";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
export interface CompareProduct {
|
||||
productUuid: string;
|
||||
productName: string;
|
||||
simulationData: {
|
||||
roiPercentage: number;
|
||||
netProfit: number;
|
||||
productionCapacity: number;
|
||||
paybackPeriod: number;
|
||||
machineIdleTime: number;
|
||||
machineActiveTime: number;
|
||||
throughputData: number;
|
||||
simulationTime?: number;
|
||||
simulationCost?: number;
|
||||
efficiencyScore?: number;
|
||||
};
|
||||
}
|
||||
|
||||
type AssetData = {
|
||||
activeTime: number;
|
||||
idleTime: number;
|
||||
type: string;
|
||||
assetId: string;
|
||||
};
|
||||
|
||||
const calculateSimulationData = (assets: AssetData[]) => {
|
||||
let totalActiveTime = 0;
|
||||
let totalIdleTime = 0;
|
||||
let throughput = 0;
|
||||
let productionCapacity = 0;
|
||||
let simulationCost = 0;
|
||||
|
||||
// Cost weight per type (example values, adjust as needed)
|
||||
const costWeight: Record<string, number> = {
|
||||
roboticArm: 50,
|
||||
machine: 100,
|
||||
human: 30,
|
||||
transfer: 20,
|
||||
storageUnit: 10,
|
||||
};
|
||||
|
||||
assets.forEach((asset) => {
|
||||
totalActiveTime += asset.activeTime;
|
||||
totalIdleTime += asset.idleTime;
|
||||
|
||||
if (asset.activeTime > 0) throughput += 1;
|
||||
|
||||
productionCapacity += asset.activeTime;
|
||||
simulationCost += asset.activeTime * (costWeight[asset.type] || 10);
|
||||
});
|
||||
|
||||
const machineActiveTime = assets.filter((a) => a.type === "machine").reduce((acc, a) => acc + a.activeTime, 0);
|
||||
|
||||
const machineIdleTime = assets.filter((a) => a.type === "machine").reduce((acc, a) => acc + a.idleTime, 0);
|
||||
|
||||
const simulationTime = totalActiveTime + totalIdleTime;
|
||||
|
||||
// --- Efficiency Score ---
|
||||
// Weighted formula: lower cost + lower time => higher score
|
||||
// Example formula (normalize to 0–100):
|
||||
const efficiencyScore = Math.max(
|
||||
0,
|
||||
100 -
|
||||
(simulationTime / 1000) * 0.5 - // weight 0.5 for time
|
||||
(simulationCost / 1000) * 0.5 // weight 0.5 for cost
|
||||
);
|
||||
|
||||
return {
|
||||
throughputData: throughput,
|
||||
machineActiveTime,
|
||||
machineIdleTime,
|
||||
productionCapacity,
|
||||
netProfit: 0, // placeholder
|
||||
roiPercentage: 0, // placeholder
|
||||
paybackPeriod: 0, // placeholder
|
||||
simulationTime,
|
||||
simulationCost,
|
||||
efficiencyScore,
|
||||
};
|
||||
};
|
||||
|
||||
export const createCompareProduct = (productUuid: string, productName: string, assets: AssetData[]): CompareProduct => ({
|
||||
productUuid,
|
||||
productName,
|
||||
simulationData: calculateSimulationData(assets),
|
||||
});
|
||||
|
||||
function ComparisonScene() {
|
||||
const { isPlaying } = usePlayButtonStore();
|
||||
@@ -27,6 +115,8 @@ function ComparisonScene() {
|
||||
const { versionHistory } = useVersionHistoryStore();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
const { selectedVersion, setSelectedVersion } = selectedVersionStore();
|
||||
const { simulationRecords } = useSimulationManager();
|
||||
const { projectId } = useParams();
|
||||
|
||||
const handleSelectVersion = (option: string) => {
|
||||
const version = versionHistory.find((version) => version.versionName === option);
|
||||
@@ -79,27 +169,53 @@ function ComparisonScene() {
|
||||
// ])
|
||||
// }, []);
|
||||
|
||||
// useEffect(() => {
|
||||
|
||||
// console.log('mainProduct: ', mainProduct);
|
||||
// console.log('comparisonProduct: ', comparisonProduct);
|
||||
// if (mainProduct && comparisonProduct) {
|
||||
// // if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
|
||||
// // console.log('compareProductsData: ', compareProductsData);
|
||||
// const hasMain = compareProductsData.some(val => val.productUuid === mainProduct.productUuid);
|
||||
// const hasComparison = compareProductsData.some(val => val.productUuid === comparisonProduct.productUuid);
|
||||
// console.log('hasMain: ', hasMain);
|
||||
// console.log('hasComparison: ', hasComparison);
|
||||
// if (hasMain && hasComparison) {
|
||||
// setShouldShowComparisonResult(true);
|
||||
// } else {
|
||||
// setShouldShowComparisonResult(false);
|
||||
// }
|
||||
// }
|
||||
// }, [compareProductsData, mainProduct, comparisonProduct]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
|
||||
// console.log('compareProductsData: ', compareProductsData);
|
||||
const hasMain = compareProductsData.some(val => val.productUuid === mainProduct.productUuid);
|
||||
const hasComparison = compareProductsData.some(val => val.productUuid === comparisonProduct.productUuid);
|
||||
if (hasMain && hasComparison && mainProduct.productUuid !== comparisonProduct.productUuid) {
|
||||
setShouldShowComparisonResult(true);
|
||||
} else {
|
||||
if (mainProduct && comparisonProduct && selectedVersion) {
|
||||
const product1 = useSimulationManager.getState().getProductById(projectId, selectedVersion?.versionId, mainProduct.productUuid);
|
||||
|
||||
const product2 = useSimulationManager.getState().getProductById(projectId, selectedVersion?.versionId, comparisonProduct.productUuid);
|
||||
|
||||
const compareProduct1 = createCompareProduct(product1?.productId ?? "", mainProduct.productName, product1?.data || []);
|
||||
const compareProduct2 = createCompareProduct(product2?.productId ?? "", comparisonProduct.productName, product2?.data || []);
|
||||
|
||||
const comparedArray = [compareProduct1, compareProduct2];
|
||||
|
||||
if (product1 == undefined || product2 === undefined) {
|
||||
setShouldShowComparisonResult(false);
|
||||
} else if (comparedArray.length === 2) {
|
||||
console.log("comparedArray: ", comparedArray);
|
||||
setCompareProductsData(comparedArray);
|
||||
setShouldShowComparisonResult(true);
|
||||
}
|
||||
} else {
|
||||
setShouldShowComparisonResult(false);
|
||||
}
|
||||
}, [compareProductsData, mainProduct, comparisonProduct]);
|
||||
}, [mainProduct, comparisonProduct, simulationRecords]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isVersionSaved && activeModule === "simulation" && selectedProduct && (
|
||||
<>
|
||||
{selectedVersion && !isPlaying &&
|
||||
{selectedVersion && !isPlaying && (
|
||||
<div className="initial-selectLayout-wrapper">
|
||||
<RegularDropDown
|
||||
header={selectedVersion.versionName}
|
||||
@@ -115,14 +231,13 @@ function ComparisonScene() {
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
<CompareLayOut />
|
||||
|
||||
{(shouldShowComparisonResult && !loadingProgress) && <ComparisonResult />}
|
||||
{shouldShowComparisonResult && !loadingProgress && compareProductsData && <ComparisonResult />}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default ComparisonScene;
|
||||
|
||||
@@ -9,5 +9,6 @@ export const saveSimulationData = ({ key, data }: SimulationData) => {
|
||||
export const getSimulationData = ({ key }: SimulationData) => {
|
||||
const data = localStorage.getItem(key);
|
||||
console.log("data: ", JSON.parse(data || "{}"));
|
||||
return data;
|
||||
};
|
||||
export const clearSimulationData = ({ key, data }: SimulationData) => {};
|
||||
|
||||
@@ -2,205 +2,211 @@ 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 { useCompareProductDataStore } from "../../../store/builder/store";
|
||||
// import { CompareProduct, useCompareProductDataStore } from "../../../store/builder/store";
|
||||
import { useComparisonProduct, useMainProduct } from "../../../store/simulation/useSimulationStore";
|
||||
|
||||
export interface CompareProduct {
|
||||
productUuid: string;
|
||||
productName: string;
|
||||
simulationData: {
|
||||
roiPercentage: number;
|
||||
netProfit: number;
|
||||
productionCapacity: number;
|
||||
paybackPeriod: number;
|
||||
machineIdleTime: number;
|
||||
machineActiveTime: number;
|
||||
throughputData: number;
|
||||
simulationTime?: number;
|
||||
simulationCost?: number;
|
||||
efficiencyScore?: number;
|
||||
};
|
||||
}
|
||||
const ComparisonResult = () => {
|
||||
const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
|
||||
const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
|
||||
const { mainProduct } = useMainProduct();
|
||||
const [comparedProducts, setComparedProducts] = useState<[CompareProduct, CompareProduct] | []>([]);
|
||||
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
|
||||
);
|
||||
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]);
|
||||
if (mainProductData && comparisonProductData) {
|
||||
setComparedProducts([mainProductData, comparisonProductData]);
|
||||
} else {
|
||||
setComparedProducts([]);
|
||||
}
|
||||
} else {
|
||||
setComparedProducts([]);
|
||||
}
|
||||
}, [compareProductsData, mainProduct, comparisonProduct]);
|
||||
|
||||
useEffect(() => {
|
||||
if (comparedProducts.length === 2) {
|
||||
|
||||
}
|
||||
}, [comparedProducts]);
|
||||
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 } },
|
||||
},
|
||||
}),
|
||||
[]
|
||||
);
|
||||
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";
|
||||
// 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 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 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 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 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 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 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;
|
||||
|
||||
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 (
|
||||
<div className="compare-result-container">
|
||||
<div className="header">Performance Comparison</div>
|
||||
<div className="compare-result-wrapper">
|
||||
<EnergyUsage comparedProducts={comparedProducts}/>
|
||||
<div className="throughPutCard-container comparisionCard">
|
||||
<h4>Throughput (units/hr)</h4>
|
||||
<div className="layers-wrapper">
|
||||
<div className="layer-wrapper">
|
||||
<div className="key">{comparedProducts[0]?.productName}</div>
|
||||
<div className="value">{comparedProducts[0]?.simulationData.throughputData}/ hr</div>
|
||||
</div>
|
||||
<div className="layer-wrapper">
|
||||
<div className="key">{comparedProducts[1]?.productName}</div>
|
||||
<div className="value">{comparedProducts[1]?.simulationData.throughputData}/ hr</div>
|
||||
</div>
|
||||
<div className="chart">
|
||||
<Bar data={throughputData} options={options} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="cycle-time-container comparisionCard">
|
||||
<div className="cycle-main">
|
||||
<h4 className="cycle-header">Cycle Time</h4>
|
||||
<div className="layers-wrapper">
|
||||
<div className="layers">
|
||||
<div className="layer-name">{comparedProducts[0]?.productName}</div>
|
||||
<div className="layer-time">{compareProductsData[0]?.simulationData.machineActiveTime} Sec</div>
|
||||
<div className="layer-profit">
|
||||
<span>↑</span>{(100 - product1CyclePercentage).toFixed(2)}%
|
||||
return (
|
||||
<div className="compare-result-container">
|
||||
<div className="header">Performance Comparison</div>
|
||||
<div className="compare-result-wrapper">
|
||||
<EnergyUsage comparedProducts={comparedProducts} />
|
||||
<div className="throughPutCard-container comparisionCard">
|
||||
<h4>Throughput (units/hr)</h4>
|
||||
<div className="layers-wrapper">
|
||||
<div className="layer-wrapper">
|
||||
<div className="key">{comparedProducts[0]?.productName}</div>
|
||||
<div className="value">{comparedProducts[0]?.simulationData.throughputData}/ hr</div>
|
||||
</div>
|
||||
<div className="layer-wrapper">
|
||||
<div className="key">{comparedProducts[1]?.productName}</div>
|
||||
<div className="value">{comparedProducts[1]?.simulationData.throughputData}/ hr</div>
|
||||
</div>
|
||||
<div className="chart">
|
||||
<Bar data={throughputData} options={options} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layers">
|
||||
<div className="layer-name">{comparedProducts[1]?.productName}</div>
|
||||
<div className="layer-time">{compareProductsData[1]?.simulationData.machineActiveTime} Sec</div>
|
||||
<div className="layer-profit">
|
||||
<span>↑</span>{(100 - product2CyclePercentage).toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="chart">
|
||||
<Pie data={cycleTimePieData} options={options} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="cycle-time-container comparisionCard">
|
||||
<div className="cycle-main">
|
||||
<div className="cycle-header">Overall Downtime</div>
|
||||
<div className="layers-wrapper">
|
||||
<div className="layers">
|
||||
<div className="layer-name">{comparedProducts[0]?.productName}</div>
|
||||
<div className="layer-time">{compareProductsData[0]?.simulationData.machineIdleTime} Sec</div>
|
||||
<div className="layer-profit">
|
||||
<span>↑</span>{(100 - product1IdlePercentage).toFixed(2)}%
|
||||
<div className="cycle-time-container comparisionCard">
|
||||
<div className="cycle-main">
|
||||
<h4 className="cycle-header">Cycle Time</h4>
|
||||
<div className="layers-wrapper">
|
||||
<div className="layers">
|
||||
<div className="layer-name">{comparedProducts[0]?.productName}</div>
|
||||
<div className="layer-time">{compareProductsData[0]?.simulationData.machineActiveTime} Sec</div>
|
||||
<div className="layer-profit">
|
||||
<span>↑</span>
|
||||
{(100 - product1CyclePercentage).toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className="layers">
|
||||
<div className="layer-name">{comparedProducts[1]?.productName}</div>
|
||||
<div className="layer-time">{compareProductsData[1]?.simulationData.machineActiveTime} Sec</div>
|
||||
<div className="layer-profit">
|
||||
<span>↑</span>
|
||||
{(100 - product2CyclePercentage).toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="chart">
|
||||
<Pie data={cycleTimePieData} options={options} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layers">
|
||||
<div className="layer-name">{comparedProducts[1]?.productName}</div>
|
||||
<div className="layer-time">{compareProductsData[1]?.simulationData.machineIdleTime} Sec</div>
|
||||
<div className="layer-profit">
|
||||
<span>↑</span>{(100 - product2IdlePercentage).toFixed(2)}%
|
||||
|
||||
<div className="cycle-time-container comparisionCard">
|
||||
<div className="cycle-main">
|
||||
<div className="cycle-header">Overall Downtime</div>
|
||||
<div className="layers-wrapper">
|
||||
<div className="layers">
|
||||
<div className="layer-name">{comparedProducts[0]?.productName}</div>
|
||||
<div className="layer-time">{compareProductsData[0]?.simulationData.machineIdleTime} Sec</div>
|
||||
<div className="layer-profit">
|
||||
<span>↑</span>
|
||||
{(100 - product1IdlePercentage).toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className="layers">
|
||||
<div className="layer-name">{comparedProducts[1]?.productName}</div>
|
||||
<div className="layer-time">{compareProductsData[1]?.simulationData.machineIdleTime} Sec</div>
|
||||
<div className="layer-profit">
|
||||
<span>↑</span>
|
||||
{(100 - product2IdlePercentage).toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="chart">
|
||||
<Pie data={downtimeData} options={options} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="chart">
|
||||
<Pie data={downtimeData} options={options} />
|
||||
</div>
|
||||
</div>
|
||||
{/*
|
||||
{/*
|
||||
<div className="overallDowntime-container comparisionCard">
|
||||
<h4 className="overallDowntime-header">Overall Downtime</h4>
|
||||
<div className="totalDownTime-wrapper">
|
||||
@@ -220,24 +226,24 @@ const ComparisonResult = () => {
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="overallScrapRate comparisionCard">
|
||||
<h4 className="overallScrapRate-header">Production Capacity</h4>
|
||||
<div className="overallScrapRate-wrapper">
|
||||
<div className="overallScrapRate-value">
|
||||
<div className="overallScrapRate-label">{highestProductivityProduct?.productName}</div>
|
||||
<div className="overallScrapRate-key">Total product produced</div>
|
||||
<div className="overallScrapRateKey-value">{highestProductivityProduct?.simulationData.productionCapacity}</div>
|
||||
</div>
|
||||
<div className="chart">
|
||||
<Bar data={productionCapacityData} options={options} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overallScrapRate comparisionCard">
|
||||
<h4 className="overallScrapRate-header">Production Capacity</h4>
|
||||
<div className="overallScrapRate-wrapper">
|
||||
<div className="overallScrapRate-value">
|
||||
<div className="overallScrapRate-label">{highestProductivityProduct?.productName}</div>
|
||||
<div className="overallScrapRate-key">Total product produced</div>
|
||||
<div className="overallScrapRateKey-value">{highestProductivityProduct?.simulationData.productionCapacity}</div>
|
||||
</div>
|
||||
<div className="chart">
|
||||
<Bar data={productionCapacityData} options={options} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ comparedProducts.length === 2 &&<PerformanceResult comparedProducts={comparedProducts}/>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{comparedProducts.length === 2 && <PerformanceResult comparedProducts={comparedProducts} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComparisonResult;
|
||||
|
||||
Reference in New Issue
Block a user