feat: enhance ComparisonResult component with chart integration and layout adjustments

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

@@ -1,8 +1,52 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PerformanceResult from "./result-card/PerformanceResult";
 import EnergyUsage from "./result-card/EnergyUsage";
+import { Bar } 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: {
+          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="compare-result-container">
       <div className="header">Performance Comparison</div>
@@ -45,24 +89,34 @@ const ComparisonResult = () => {
         </div>
         <div className="overallDowntime-container comparisionCard">
           <div className="overallDowntime-header">Overall Downtime</div>
-          <div className="totalDownTime">
+          <div className="totalDownTime-wrapper">
-            <div className="totalDownTime-right">
+            <div className="totalDownTime">
-              <div className="totalDownTime-label">Total down time</div>
+              <div className="totalDownTime-right">
-              <div className="totalDownTime-subLabel">(Simulation 1)</div>
+                <div className="totalDownTime-label">Total down time</div>
-            </div>
+                <div className="totalDownTime-subLabel">(Simulation 1)</div>
-            <div className="totalDownTime-left">
+              </div>
-              <div className="value">17</div>
+              <div className="totalDownTime-left">
-              <div className="key">mins</div>
+                <div className="value">17</div>
+                <div className="key">mins</div>
+              </div>
             </div>
+            <div className="chart"></div>
           </div>
         </div>
 
         <div className="overallScrapRate comparisionCard">
           <div className="overallScrapRate-header">Overall Scrap Rate</div>
-          <div className="overallScrapRate-value">
+          <div className="overallScrapRate-wrapper">
-            <div className="overallScrapRate-label">Layout 1</div>
+            <div className="overallScrapRate-value">
-            <div className="overallScrapRate-key">Total scrap produced by</div>
+              <div className="overallScrapRate-label">Layout 1</div>
-            <div className="overallScrapRate-value">2.7 ton</div>
+              <div className="overallScrapRate-key">
+                Total scrap produced by
+              </div>
+              <div className="overallScrapRateKey-value">2.7 ton</div>
+            </div>
+            <div className="chart">
+              <Bar data={defaultData} options={options} />
+            </div>
           </div>
         </div>
         <PerformanceResult />

app/src/styles/layout/compareLayout.scss

@@ -554,41 +554,69 @@
 }
 
 .overallDowntime-container {
-    .totalDownTime {
+    .totalDownTime-wrapper {
-        background: var(--background-color-secondary);
-        backdrop-filter: blur(20px);
-        border-radius: 12px;
-        width: fit-content;
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 20px;
-        padding: 8px 10px;
-        margin: 44px 0;
 
-        .totalDownTime-right {
+        .totalDownTime {
+            width: 70%;
+            background: var(--background-color-secondary);
+            backdrop-filter: blur(20px);
+            border-radius: 12px;
+
             display: flex;
-            flex-direction: column;
+            justify-content: space-between;
-            gap: 6px;
+            align-items: center;
+            gap: 20px;
+            padding: 8px 10px;
+            margin: 44px 0;
+
+            .totalDownTime-right {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+            }
+
+            .totalDownTime-left {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+
+                .value {
+                    font-size: var(--font-size-xlarge);
+                    color: var(--background-color-button);
+                }
+            }
         }
 
-        .totalDownTime-left {
+        .chart {
-            display: flex;
+            width: 30%;
-            gap: 6px;
+            position: relative;
-
-            .value {
-                font-size: var(--font-size-xlarge);
-                color: var(--background-color-button);
-            }
         }
     }
 }
 
 .overallScrapRate {
-    .overallScrapRate-value {
+    .overallScrapRate-wrapper {
         display: flex;
-        flex-direction: column;
+
-        gap: 6px;
+        .overallScrapRate-value {
-        margin: 40px 0;
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            margin: 40px 0;
+
+            .overallScrapRate-key {
+
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .chart {
+            width: 50%;
+            position: relative;
+        }
     }
 }