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,6 +89,7 @@ const ComparisonResult = () => {
         </div>
         <div className="overallDowntime-container comparisionCard">
           <div className="overallDowntime-header">Overall Downtime</div>
+          <div className="totalDownTime-wrapper">
             <div className="totalDownTime">
               <div className="totalDownTime-right">
                 <div className="totalDownTime-label">Total down time</div>
@@ -55,14 +100,23 @@ const ComparisonResult = () => {
                 <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-wrapper">
             <div className="overallScrapRate-value">
               <div className="overallScrapRate-label">Layout 1</div>
-            <div className="overallScrapRate-key">Total scrap produced by</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,11 +554,15 @@
 }
 
 .overallDowntime-container {
+    .totalDownTime-wrapper {
+        display: flex;
+
         .totalDownTime {
+            width: 70%;
             background: var(--background-color-secondary);
             backdrop-filter: blur(20px);
             border-radius: 12px;
-        width: fit-content;
+
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -574,6 +578,7 @@
 
             .totalDownTime-left {
                 display: flex;
+                align-items: center;
                 gap: 6px;
 
                 .value {
@@ -582,13 +587,36 @@
                 }
             }
         }
+
+        .chart {
+            width: 30%;
+            position: relative;
+        }
+    }
 }
 
 .overallScrapRate {
+    .overallScrapRate-wrapper {
+        display: flex;
+
         .overallScrapRate-value {
+            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;
+        }
     }
 }