Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated layout comparsion

Browse Source
This commit is contained in:
Poovizhi99
2025-09-09 16:07:07 +05:30
parent 395c5e5112
commit a47ad60813
13 changed files with 556 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/src/components/ui/compareVersion/CompareLayOut.tsx
View File

@@ -12,12 +12,11 @@ import Scene from "../../../modules/scene/scene";
import useRestStates from "../../../hooks/useResetStates";
import { getVersionHistoryApi } from "../../../services/factoryBuilder/versionControl/getVersionHistoryApi";
import { useSimulationManager } from "../../../store/rough/useSimulationManagerStore";
import { validateSimulationDataApi } from "../../../services/simulation/comparison/validateSimulationDataApi";
const CompareLayOut = () => {
const { clearComparisonState, comparisonScene, setComparisonState } = useSimulationState();
const { versionStore, productStore } = useSceneContext();
const { versionStore } = useSceneContext();
const { versionHistory, selectedVersion, setSelectedVersion, clearSelectedVersion, setVersions } = versionStore();
const { setLoadingProgress } = useLoadingProgress();
const [width, setWidth] = useState("50vw");
@@ -31,8 +30,6 @@ const CompareLayOut = () => {
const { setIsPlaying } = usePlayButtonStore();
const { projectId } = useParams();
const { resetStates } = useRestStates();
const { products } = productStore();
const { addSimulationRecord } = useSimulationManager();
useEffect(() => {
return () => {
resetStates();
@@ -58,9 +55,7 @@ const CompareLayOut = () => {
});
setVersions(versions);
})
.catch(() => {
console.error("Error fetching version history");
});
.catch(() => {});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [projectId]);
@@ -167,14 +162,16 @@ const CompareLayOut = () => {
setLoadingProgress(1);
const singleData = {
projectId: projectId,
versionId: version.versionId, // use version directly, not selectedVersion
productUuid: data[0].productUuid, // productUuid is already a string
versionId: version.versionId,
productUuid: data[0].productUuid,
};
console.log("products", products);
validateSimulationDataApi(singleData).then((getData) => {
echo.log(getData.message);
const getSimulate = getData?.data;
addSimulationRecord(projectId, selectedVersion?.versionId || "", data[0].productUuid || "", getSimulate.data);
const getSimulate = getData?.data?.existingSimulatedData;
if (!getSimulate) return;
// addSimulationRecord(projectId, version?.versionId || "", data[0].productUuid || "", getSimulate.data);
});
}
});

168
app/src/components/ui/compareVersion/ComparisonResult.tsx
View File

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "react";
import PerformanceResult from "./result-card/PerformanceResult";
import { Bar, Pie } from "react-chartjs-2";
import { useCompareProductDataStore } from "../../../store/builder/store";
import { useSimulationState } from "../../../store/simulation/useSimulationStore";
import { useSimulationState } from "../../../store/simulation/useSimulationStore";
export interface CompareProduct {
productUuid: string;
@@ -28,14 +28,7 @@ const ComparisonResult = () => {
useEffect(() => {
if (compareProductsData.length > 0 && comparisonScene && mainScene) {
const mainProductData = compareProductsData.find((product) => product.productUuid === mainScene.product.productUuid);
const comparisonProductData = compareProductsData.find((product) => product.productUuid === comparisonScene.product.productUuid);
if (mainProductData && comparisonProductData) {
setComparedProducts([mainProductData, comparisonProductData]);
} else {
setComparedProducts([]);
}
setComparedProducts([compareProductsData[0], compareProductsData[1]]);
} else {
setComparedProducts([]);
}
@@ -122,18 +115,87 @@ const ComparisonResult = () => {
],
};
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">
<div className="cycle-time-container comparisionCard">
<div className="cycle-main">
<h4 className="cycle-header">Human Active Time</h4>
{/* <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-change ${product1CyclePercentage >= 50 ? "profit" : "loss"}`}>
<span>{product1CyclePercentage >= 50 ? "↑" : "↓"}</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-change ${product2CyclePercentage >= 50 ? "profit" : "loss"}`}>
<span>{product2CyclePercentage >= 50 ? "↑" : "↓"}</span>
{(100 - product2CyclePercentage).toFixed(2)}%
</div>
</div>
</div>
</div>
<div className="chart">
<Pie data={cycleTimePieData} options={options} />
</div>
</div>
{/* <EnergyUsage comparedProducts={comparedProducts} /> */}
<div className="cycle-time-container comparisionCard">
<div className="cycle-main">
<div className="cycle-header">Human Idle Time</div>
{/* <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 ${product1IdlePercentage >= 50 ? "profit" : "loss"}`}>
<span>{product1IdlePercentage >= 50 ? "↑" : "↓"}</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 ${product2IdlePercentage >= 50 ? "profit" : "loss"}`}>
<span>{product2IdlePercentage >= 50 ? "↑" : "↓"}</span>
{(100 - product2IdlePercentage).toFixed(2)}%
</div>
</div>
</div>
</div>
<div className="chart">
<Pie data={downtimeData} options={options} />
</div>
</div>
<div className="throughPutCard-container comparisionCard">
<h4>Throughput (units/hr)</h4>
<div className="layers-wrapper">
@@ -151,78 +213,24 @@ const ComparisonResult = () => {
</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)}%
</div>
<div className="overallDowntime-container comparisionCard">
<h4 className="overallDowntime-header">Overall Downtime</h4>
<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="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 className="totalDownTime-left">
<div className="value">17</div>
<div className="key">mins</div>
</div>
</div>
</div>
<div className="chart">
<Pie data={cycleTimePieData} options={options} />
</div>
</div>
{/* <EnergyUsage comparedProducts={comparedProducts} /> */}
<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 className="chart">
<Bar data={downtimeData} options={options} />
</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">
<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>
</div>
<div className="chart">
<Bar data={downtimeData} options={options} />
</div>
</div>
</div> */}
<div className="overallScrapRate comparisionCard">
<h4 className="overallScrapRate-header">Production Capacity</h4>

229
app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx
View File

@@ -4,114 +4,34 @@ import { Chart as ChartJS, LineElement, PointElement, CategoryScale, LinearScale
ChartJS.register(LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Legend);
// const EnergyUsage = ({comparedProducts}:any) => {
// const data = useMemo(() => {
// const randomizeData = () =>
// Array.from({ length: 5 }, () => Math.floor(Math.random() * (2000 - 300 + 1)) + 300);
// return {
// labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
// datasets: [
// {
// label: "Simulation 1",
// data: randomizeData(),
// borderColor: "#6a0dad",
// fill: false,
// tension: 0.5, // More curved line
// pointRadius: 0, // Remove point indicators
// },
// {
// label: "Simulation 2",
// data: randomizeData(),
// borderColor: "#b19cd9",
// fill: false,
// tension: 0.5,
// pointRadius: 0,
// },
// ],
// };
// }, []);
// const options = useMemo(
// () => ({
// responsive: true,
// maintainAspectRatio: false,
// plugins: {
// title: {
// display: true,
// },
// legend: {
// display: false,
// },
// },
// scales: {
// x: {
// display: false, // Hide x-axis
// grid: {
// display: false,
// },
// },
// y: {
// display: false, // Hide y-axis
// grid: {
// display: false,
// },
// },
// },
// }),
// []
// );
// return (
// <div className="comparisionCard energy-usage">
// <div className="energy-usage-wrapper">
// <h4>Energy Usage</h4>
// <p className="value">
// 2500 <span>kWh</span>
// </p>
// </div>
// <div className="simulation-details">
// <div className="simulation-wrapper sim-1">
// <div className="icon"></div>
// <div className="simulation-details-wrapper">
// <div className="label">{comparedProducts[0]?.productName}</div>
// <div className="value">98%</div>
// </div>
// </div>
// <div className="simulation-wrapper sim-2">
// <div className="icon"></div>
// <div className="simulation-details-wrapper">
// <div className="label">{comparedProducts[1]?.productName}</div>
// <div className="value">97%</div>
// </div>
// </div>
// </div>
// <div className="chart">
// <Line data={data} options={options} />
// </div>
// </div>
// );
// };
// export default EnergyUsage;
const EnergyUsage = ({ comparedProducts }: any) => {
const data = useMemo(() => {
const randomizeData = () => Array.from({ length: 5 }, () => Math.floor(Math.random() * (2000 - 300 + 1)) + 300);
console.log("randomizeData: ", randomizeData());
return {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
datasets: comparedProducts.map((product: any, idx: number) => ({
label: product.productName,
// use actual energyUsage instead of random data
data: Array(5).fill(product.simulationData.energyUsage),
borderColor: idx === 0 ? "#6a0dad" : "#b19cd9",
fill: false,
tension: 0.5,
pointRadius: 0,
})),
datasets: [
{
label: "Simulation 1",
data: randomizeData(),
// data: randomizeData(),
borderColor: "#6a0dad",
fill: false,
tension: 0.5, // More curved line
pointRadius: 0, // Remove point indicators
},
{
label: "Simulation 2",
data: randomizeData(),
borderColor: "#b19cd9",
fill: false,
tension: 0.5,
pointRadius: 0,
},
],
};
}, [comparedProducts]);
}, []);
const options = useMemo(
() => ({
@@ -127,13 +47,13 @@ const EnergyUsage = ({ comparedProducts }: any) => {
},
scales: {
x: {
display: false,
display: false, // Hide x-axis
grid: {
display: false,
},
},
y: {
display: false,
display: false, // Hide y-axis
grid: {
display: false,
},
@@ -148,20 +68,25 @@ const EnergyUsage = ({ comparedProducts }: any) => {
<div className="energy-usage-wrapper">
<h4>Energy Usage</h4>
<p className="value">
{comparedProducts.reduce((acc: number, p: any) => acc + (p.simulationData.energyUsage || 0), 0)} <span>kWh</span>
2500 <span>kWh</span>
</p>
</div>
<div className="simulation-details">
{comparedProducts.map((product: any, idx: number) => (
<div key={product.productUuid} className={`simulation-wrapper sim-${idx + 1}`}>
<div className="icon"></div>
<div className="simulation-details-wrapper">
<div className="label">{product.productName}</div>
<div className="value">{product.simulationData.energyUsage} kWh</div>
</div>
<div className="simulation-wrapper sim-1">
<div className="icon"></div>
<div className="simulation-details-wrapper">
<div className="label">{comparedProducts[0]?.productName}</div>
<div className="value">98%</div>
</div>
))}
</div>
<div className="simulation-wrapper sim-2">
<div className="icon"></div>
<div className="simulation-details-wrapper">
<div className="label">{comparedProducts[1]?.productName}</div>
<div className="value">97%</div>
</div>
</div>
</div>
<div className="chart">
@@ -172,3 +97,79 @@ const EnergyUsage = ({ comparedProducts }: any) => {
};
export default EnergyUsage;
// const EnergyUsage = ({ comparedProducts }: any) => {
// const data = useMemo(() => {
// return {
// labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
// datasets: comparedProducts.map((product: any, idx: number) => ({
// label: product.productName,
// // use actual energyUsage instead of random data
// data: Array(5).fill(product.simulationData.energyUsage),
// borderColor: idx === 0 ? "#6a0dad" : "#b19cd9",
// fill: false,
// tension: 0.5,
// pointRadius: 0,
// })),
// };
// }, [comparedProducts]);
// const options = useMemo(
// () => ({
// responsive: true,
// maintainAspectRatio: false,
// plugins: {
// title: {
// display: true,
// },
// legend: {
// display: false,
// },
// },
// scales: {
// x: {
// display: false,
// grid: {
// display: false,
// },
// },
// y: {
// display: false,
// grid: {
// display: false,
// },
// },
// },
// }),
// []
// );
// return (
// <div className="comparisionCard energy-usage">
// <div className="energy-usage-wrapper">
// <h4>Energy Usage</h4>
// <p className="value">
// {comparedProducts.reduce((acc: number, p: any) => acc + (p.simulationData.energyUsage || 0), 0)} <span>kWh</span>
// </p>
// </div>
// <div className="simulation-details">
// {comparedProducts.map((product: any, idx: number) => (
// <div key={product.productUuid} className={`simulation-wrapper sim-${idx + 1}`}>
// <div className="icon"></div>
// <div className="simulation-details-wrapper">
// <div className="label">{product.productName}</div>
// <div className="value">{product.simulationData.energyUsage} kWh</div>
// </div>
// </div>
// ))}
// </div>
// <div className="chart">
// <Line data={data} options={options} />
// </div>
// </div>
// );
// };
// export default EnergyUsage;