feat: integrate new chart types and update layout in ComparisonResult component

app/src/components/ui/compareVersion/ComparisonResult.tsx

@@ -1,57 +1,89 @@
 import React, { useMemo } from "react";
 import PerformanceResult from "./result-card/PerformanceResult";
 import EnergyUsage from "./result-card/EnergyUsage";
-import { Bar } from "react-chartjs-2";
+import { Bar, Line } from "react-chartjs-2";
 
 const ComparisonResult = () => {
-  const defaultData = {
-    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-    datasets: [
-      {
-        label: "Dataset",
-        data: [12, 19, 3, 5, 2, 3],
-        backgroundColor: ["#6f42c1"],
-        borderColor: "#b392f0",
-        borderWidth: 1,
-      },
-    ],
-  };
-
-  // Memoize Chart Options
   const options = useMemo(
     () => ({
       responsive: true,
       maintainAspectRatio: false,
       plugins: {
-        title: {
+        title: { display: false },
-          display: true,
+        legend: { display: false },
-        },
-        legend: {
-          display: false,
-        },
       },
       scales: {
-        x: {
+        x: { display: false, grid: { display: false } },
-          display: false, // Hide x-axis
+        y: { display: false, grid: { display: false } },
-          grid: {
-            display: false,
-          },
-        },
-        y: {
-          display: false, // Hide y-axis
-          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,
+      },
+    ],
+  };
+
+  const cycleTimeData = {
+    labels: ["Layout 1", "Layout 2"],
+    datasets: [
+      {
+        label: "Cycle Time (sec)",
+        data: [110, 110],
+        backgroundColor: [purpleLight],
+        borderColor: purpleDark,
+        borderWidth: 2,
+        tension: 0.4,
+        fill: false,
+      },
+    ],
+  };
+
+  const downtimeData = {
+    labels: ["Layout 1", "Layout 2"],
+    datasets: [
+      {
+        label: "Downtime (mins)",
+        data: [17, 12],
+        backgroundColor: [purpleDark, purpleLight],
+        borderColor: [purpleDark, purpleLight],
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  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,
+      },
+    ],
+  };
+
   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">
@@ -64,8 +96,11 @@ const ComparisonResult = () => {
               <div className="value">550/ hr</div>
             </div>
           </div>
-          <div className="chart"></div>
+          <div className="chart">
+            <Bar data={throughputData} options={options} />
+          </div>
         </div>
+
         <div className="cycle-time-container comparisionCard">
           <div className="cycle-main">
             <div className="cycle-header">Cycle Time</div>
@@ -81,12 +116,16 @@ const ComparisonResult = () => {
                 <div className="layer-name">Layout 2</div>
                 <div className="layer-time">110 Sec</div>
                 <div className="layer-profit">
-                  <span>↑</span>19.6%1.6%
+                  <span>↑</span>1.6%
                 </div>
               </div>
             </div>
           </div>
+          <div className="chart">
+            <Line data={cycleTimeData} options={options} />
+          </div>
         </div>
+
         <div className="overallDowntime-container comparisionCard">
           <div className="overallDowntime-header">Overall Downtime</div>
           <div className="totalDownTime-wrapper">
@@ -101,10 +140,7 @@ const ComparisonResult = () => {
               </div>
             </div>
             <div className="chart">
-              <div className="vertical-chart">
+              <Bar data={downtimeData} options={options} />
-                <div className="layout1"></div>
-                <div className="layout2"></div>
-              </div>
             </div>
           </div>
         </div>
@@ -114,16 +150,15 @@ const ComparisonResult = () => {
           <div className="overallScrapRate-wrapper">
             <div className="overallScrapRate-value">
               <div className="overallScrapRate-label">Layout 1</div>
-              <div className="overallScrapRate-key">
+              <div className="overallScrapRate-key">Total scrap produced by</div>
-                Total scrap produced by
-              </div>
               <div className="overallScrapRateKey-value">2.7 ton</div>
             </div>
             <div className="chart">
-              <Bar data={defaultData} options={options} />
+              <Bar data={scrapRateData} options={options} />
             </div>
           </div>
         </div>
+
         <PerformanceResult />
       </div>
     </div>

app/src/pages/Project.tsx

@@ -39,7 +39,6 @@ import RegularDropDown from "../components/ui/inputs/RegularDropDown";
 import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
 import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
 import { useProductStore } from "../store/simulation/useProductStore";
-import ThreadChat from "../components/ui/collaboration/ThreadChat";
 import ComparisonResult from "../components/ui/compareVersion/ComparisonResult";
 
 const Project: React.FC = () => {
@@ -181,7 +180,7 @@ const Project: React.FC = () => {
             />
           </div>
           <CompareLayOut dummyLayouts={dummyLayouts} />
-          {true && <ComparisonResult />}
+          {false && <ComparisonResult />}
         </>
       )}
       <VersionSaved />

app/src/styles/layout/compareLayout.scss

@@ -251,6 +251,7 @@
                 display: flex;
               }
             }
+
             .metric-value {
               padding-top: 6px;
               font-size: var(--font-size-xlarge);
@@ -286,6 +287,7 @@
                 top: -57%;
                 left: 220%;
               }
+
               &::after {
                 content: "";
                 position: absolute;
@@ -297,21 +299,19 @@
                 background-color: #b7b7c6;
 
                 // Custom polygon shape (adjust if needed)
-                clip-path: polygon(
+                clip-path: polygon(96% 52%,
-                  96% 52%,
+                    96% 54%,
-                  96% 54%,
+                    45% 53%,
-                  45% 53%,
+                    3% 100%,
-                  3% 100%,
+                    0 100%,
-                  0 100%,
+                    42% 52%);
-                  42% 52%
-                );
 
                 z-index: 0; // Behind any inner content
               }
             }
 
             // Optional: content above the shape
-            > * {
+            >* {
               position: relative;
               z-index: 1;
             }
@@ -319,12 +319,14 @@
             &:nth-child(2) {
               grid-column-start: 1;
               grid-row-start: 2;
+
               .metric-label {
                 white-space: normal;
                 width: 50px;
                 left: 230%;
               }
             }
+
             &:nth-child(3) {
               grid-row: span 2 / span 2;
               grid-column-start: 2;
@@ -364,21 +366,19 @@
               height: 100%;
 
               background: var(--background-color, wheat);
-              clip-path: polygon(
+              clip-path: polygon(25% 0%,
-                25% 0%,
+                  75% 0%,
-                75% 0%,
+                  100% 50%,
-                100% 50%,
+                  75% 100%,
-                75% 100%,
+                  25% 100%,
-                25% 100%,
+                  0% 50%);
-                0% 50%
-              );
               filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
 
               z-index: 0;
             }
 
             // Content stays above the shape
-            > * {
+            >* {
               position: relative;
               z-index: 1;
             }
@@ -461,6 +461,8 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
+    position: relative;
+    z-index: 10;
 
     .layer-wrapper {
       display: flex;
@@ -473,24 +475,29 @@
   }
 
   .chart {
-    height: 90%;
+    height: 60%;
+    width: 40%;
     position: absolute;
-    bottom: 0;
+    bottom: 10px;
-    left: 0;
+    left: 50%;
+    transform: translate(-50%, 0%);
   }
 }
 
 .cycle-time-container {
+  flex-direction: column;
+
   .cycle-main {
-    display: flex;
+    // display: flex;
     justify-content: space-between;
     height: 100%;
 
     .layers-wrapper {
-      height: 100%;
+      height: 90%;
       display: flex;
-      flex-direction: column;
+      // flex-direction: column;
       justify-content: space-between;
+      padding-top: 6px;
 
       .layers {
         display: flex;
@@ -513,9 +520,22 @@
             color: #14ca44;
           }
         }
+
+        &:nth-child(2) {
+          justify-content: flex-end;
+        }
       }
     }
   }
+
+  .chart {
+    width: 90%;
+    height: 90%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    left: 50%;
+  }
 }
 
 .overallDowntime-container {
@@ -583,4 +603,4 @@
       position: relative;
     }
   }
-}
+}