updated comparision

2025-06-12 17:35:42 +05:30
parent c7cc5cf2ca
commit 2fbdf8ab61
33 changed files with 670 additions and 316 deletions
--- a/app/src/components/ui/compareVersion/CompareLayOut.tsx
+++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx
@@ -118,7 +118,6 @@ const CompareLayOut = () => {
    if (product) {
      setComparisonProduct(product.productUuid, product.productName);
      setLoadingProgress(1);
-      setIsPaused(true);
    }
  };

--- a/app/src/components/ui/compareVersion/ComparisonResult.tsx
+++ b/app/src/components/ui/compareVersion/ComparisonResult.tsx
@@ -1,9 +1,41 @@
-import React, { useMemo } from "react";
+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,
@@ -25,11 +57,11 @@ const ComparisonResult = () => {
  const purpleLight = "#b19cd9";

  const throughputData = {
-    labels: ["Layout 1", "Layout 2"],
+    labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
    datasets: [
      {
        label: "Throughput (units/hr)",
-        data: [500, 550],
+        data: [comparedProducts[0]?.simulationData.throughputData, comparedProducts[1]?.simulationData.throughputData],
        backgroundColor: [purpleDark, purpleLight],
        borderColor: [purpleDark, purpleLight],
        borderWidth: 1,
@@ -41,11 +73,11 @@ const ComparisonResult = () => {


  const cycleTimePieData = {
-    labels: ["Layout 1", "Layout 2"],
+    labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
    datasets: [
      {
        label: "Cycle Time (sec)",
-        data: [120, 110],
+        data: [comparedProducts[0]?.simulationData.machineActiveTime, comparedProducts[1]?.simulationData.machineActiveTime],
        backgroundColor: [purpleDark, purpleLight],
        borderColor: "#fff",
        borderWidth: 2,
@@ -54,11 +86,24 @@ const ComparisonResult = () => {
  };

  const downtimeData = {
-    labels: ["Layout 1", "Layout 2"],
+    labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
    datasets: [
      {
        label: "Downtime (mins)",
-        data: [17, 12],
+        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,
@@ -68,20 +113,21 @@ const ComparisonResult = () => {
    ],
  };

-  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,
-      },
-    ],
-  };
+  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 (
    <div className="compare-result-container">
@@ -92,12 +138,12 @@ const ComparisonResult = () => {
          <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 className="key">{comparedProducts[0]?.productName}</div>
+              <div className="value">{comparedProducts[0]?.simulationData.throughputData}/ hr</div>
            </div>
            <div className="layer-wrapper">
-              <div className="key">Layout 2</div>
-              <div className="value">550/ hr</div>
+              <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} />
@@ -110,17 +156,17 @@ const ComparisonResult = () => {
            <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-name">{comparedProducts[0]?.productName}</div>
+                <div className="layer-time">{compareProductsData[0]?.simulationData.machineActiveTime} Sec</div>
                <div className="layer-profit">
-                  <span>↑</span>19.6%
+                  <span>↑</span>{(100 - product1CyclePercentage).toFixed(2)}%
                </div>
              </div>
              <div className="layers">
-                <div className="layer-name">Layout 2</div>
-                <div className="layer-time">110 Sec</div>
+                <div className="layer-name">{comparedProducts[1]?.productName}</div>
+                <div className="layer-time">{compareProductsData[1]?.simulationData.machineActiveTime} Sec</div>
                <div className="layer-profit">
-                  <span>↑</span>1.6%
+                  <span>↑</span>{(100 - product2CyclePercentage).toFixed(2)}%
                </div>
              </div>
            </div>
@@ -130,6 +176,31 @@ const ComparisonResult = () => {
          </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>
+              </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 className="overallDowntime-container comparisionCard">
          <div className="overallDowntime-header">Overall Downtime</div>
          <div className="totalDownTime-wrapper">
@@ -147,23 +218,23 @@ const ComparisonResult = () => {
              <Bar data={downtimeData} options={options} />
            </div>
          </div>
-        </div>
+        </div> */}

        <div className="overallScrapRate comparisionCard">
-          <div className="overallScrapRate-header">Overall Scrap Rate</div>
+          <div className="overallScrapRate-header">Production Capacity</div>
          <div className="overallScrapRate-wrapper">
            <div className="overallScrapRate-value">
-              <div className="overallScrapRate-label">Layout 1</div>
-              <div className="overallScrapRate-key">Total scrap produced by</div>
-              <div className="overallScrapRateKey-value">2.7 ton</div>
+              <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={scrapRateData} options={options} />
+              <Bar data={productionCapacityData} options={options} />
            </div>
          </div>
        </div>

-        <PerformanceResult />
+       { comparedProducts.length === 2 &&<PerformanceResult comparedProducts={comparedProducts}/>}
      </div>
    </div>
  );
--- a/app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx
+++ b/app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx
@@ -20,27 +20,32 @@ ChartJS.register(
 );

 const EnergyUsage = () => {
-  const data = {
-    labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
-    datasets: [
-      {
-        label: "Simulation 1",
-        data: [400, 600, 450, 1000, 1000],
-        borderColor: "#6a0dad",
-        fill: false,
-        tension: 0.5, // More curved line
-        pointRadius: 0, // Remove point indicators
-      },
-      {
-        label: "Simulation 2",
-        data: [300, 500, 700, 950, 1100],
-        borderColor: "#b19cd9",
-        fill: false,
-        tension: 0.5,
-        pointRadius: 0,
-      },
-    ],
-  };
+  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(
    () => ({
--- a/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx
+++ b/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx
@@ -5,7 +5,8 @@ import {
  TickIcon,
 } from "../../../icons/ExportCommonIcons";

-const PerformanceResult = () => {
+const PerformanceResult = ({ comparedProducts }: any) => {
+  const ProfitProduct = comparedProducts[0].simulationData.netProfit > comparedProducts[1].simulationData.netProfit ? comparedProducts[0] : comparedProducts[1];
  return (
    <div className="performanceResult-wrapper comparisionCard">
      <div className="header">
@@ -26,30 +27,30 @@ const PerformanceResult = () => {
            </div>
            <div className="metric-value">98%</div>
          </div>
-          <div className="label">Environmental impact</div>
+          <div className="label">Net Profit</div>
        </div>

        <div className="metrics-right">
          <div className="metric-wrapper">
-            <div className="metric-label">Waste generation</div>
+            <div className="metric-label">ROI Percentage</div>
            <div className="metric">
-              <div className="metric-icon">I</div>
-              <div className="metric-value">0.5%</div>
+              <div className="metric-icon"></div>
+              <div className="metric-value">{ProfitProduct.simulationData.roiPercentage.toFixed(2)}</div>
            </div>
          </div>

          <div className="metric-wrapper">
-            <div className="metric-label">Risk  management</div>
+            <div className="metric-label">Payback Period</div>
            <div className="metric">
-              <div className="metric-icon">I</div>
-              <div className="metric-value">0.1%</div>
+              <div className="metric-icon"></div>
+              <div className="metric-value">{ProfitProduct.simulationData.netProfit}</div>
            </div>
          </div>

          <div className="metric-wrapper">
            <div className="metric">
-              <div className="metric-icon">I</div>
-              <div className="metric-value">0.5%</div>
+              <div className="metric-icon"></div>
+              <div className="metric-value">{parseFloat(ProfitProduct.simulationData.paybackPeriod.toFixed(2))}years</div>
            </div>
          </div>
        </div>